/* ==========================================================================
   Meridian — architecture & interiors landing page
   Free template by NikoCodes. Sections: tokens · reset · type · header ·
   hero · work · studio · services · process · contact · footer · responsive
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  --bone:      #efede7;
  --bone-2:    #e5e2da;
  --ink:       #131210;
  --body:      #33302b;
  --mute:      #5c574f;   /* small text — kept dark enough to read at 12px */
  --line:      rgba(19,18,16,.16);
  --line-2:    rgba(19,18,16,.30);

  --wrap:      1320px;
  --gut:       clamp(20px, 3.4vw, 48px);
  --sec:       clamp(56px, 7vw, 112px);

  --f-d:       "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-m:       "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --head-h:    76px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--f-d);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dd,dt,figure,ol,ul{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}

.skip{
  position:fixed;top:.7rem;left:.7rem;z-index:120;padding:.7rem 1.1rem;
  background:var(--ink);color:var(--bone);font-size:.85rem;
  transform:translateY(-160%);transition:transform .2s var(--ease);
}
.skip:focus-visible{transform:none}

/* ── Layout & type ───────────────────────────────────────────────────────── */
.shell{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.sec{padding-block:var(--sec);scroll-margin-top:var(--head-h)}
.sec--tint{background:var(--bone-2);border-block:1px solid var(--line)}

.mono{
  font-family:var(--f-m);font-size:11.5px;line-height:1.5;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
}

h1{font-size:clamp(40px,5.3vw,82px);line-height:.96;letter-spacing:-.038em;font-weight:600;
   text-wrap:balance}
h2{font-size:clamp(26px,2.6vw,40px);line-height:1.05;letter-spacing:-.032em;font-weight:600;
   text-wrap:balance}
h3{font-size:19px;line-height:1.25;letter-spacing:-.018em;font-weight:500}

.sec__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-bottom:22px;border-bottom:1px solid var(--line-2);margin-bottom:clamp(24px,3vw,40px);
}
.sec__head .mono{flex:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 28px;background:var(--ink);color:var(--bone);
  font-size:14px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:#2c2823;transform:translateY(-1px)}
.btn:active{transform:none}
.btn--sm{padding:11px 20px;font-size:13px}

.arrow{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;
       border-bottom:1px solid var(--line-2);padding-bottom:4px;
       transition:border-color .3s var(--ease)}
.arrow span{transition:transform .3s var(--ease)}
.arrow:hover{border-color:var(--ink)}
.arrow:hover span{transform:translateX(4px)}

/* ── Header ──────────────────────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);
  background:var(--bone);
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.top.is-stuck{
  background:color-mix(in srgb,var(--bone) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--head-h)}

.brand{font-size:15px;font-weight:600;letter-spacing:.22em}
.brand sup{font-size:8px;vertical-align:super;letter-spacing:0}
.brand--lg{font-size:22px;letter-spacing:.18em}

.nav{display:flex;gap:32px;font-size:14px;color:var(--mute)}
.nav a{color:inherit;transition:color .2s var(--ease)}
.nav a:hover{color:var(--ink)}

.top__actions{display:flex;align-items:center;gap:14px}

.burger{
  display:none;width:40px;height:40px;place-items:center;
  border:1px solid var(--line);border-radius:999px;
}
.burger__bars{display:grid;gap:5px;width:16px}
.burger__bars i{display:block;height:1.5px;background:currentColor;
                 transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] .burger__bars i:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ── Mobile menu ─────────────────────────────────────────────────────────── */
.menu{
  position:fixed;inset:var(--head-h) 0 0;z-index:55;background:var(--bone);
  padding:clamp(24px,5vw,44px) 0;display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1;transform:none}
.menu__in{display:grid;gap:2px}
.menu__in a{
  display:flex;align-items:baseline;gap:14px;
  font-size:clamp(28px,8vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.3;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.menu__in span{font-family:var(--f-m);font-size:11px;letter-spacing:.13em;color:var(--mute)}
.menu__foot{font-size:15px;color:var(--mute)}
body.nav-open{overflow:hidden}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);
  /* min-height, not height: the copy is centred with justify-content, and a
     fixed box shorter than that copy pushes it out both ends, which draws this
     border straight through the facts row. The row is the tallest thing on the
     page at small widths and the copy is the tallest at wide ones, so the hero
     has to be allowed to grow. */
  min-height:clamp(560px,80vh,700px);border-bottom:1px solid var(--line);
}
.hero__text{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(32px,4vw,54px);
  padding-block:clamp(30px,3.6vw,52px);
  padding-right:clamp(24px,3vw,56px);
  /* The text lines up with the centred .shell, but this column is only 44% of
     the page: past roughly 1700px the inset above would eat the column and
     leave a paragraph four words wide, so it is capped. */
  padding-left:clamp(var(--gut),
                     calc((100vw - var(--wrap)) / 2 + var(--gut)),
                     20vw);
}
.hero h1{margin-top:20px}
.hero__intro{margin-top:22px;max-width:36ch;color:var(--body);font-size:17px}
.hero__cta{display:flex;align-items:center;gap:24px;margin-top:32px;flex-wrap:wrap}

.hero__meta{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  padding-top:20px;border-top:1px solid var(--line);
}
.hero__meta dt{margin-bottom:7px}
.hero__meta dd{font-size:14.5px;font-weight:500}

.hero__fig{position:relative;overflow:hidden;background:var(--bone-2)}
/* Taken out of flow so the photograph cannot set the row height: left in flow
   at width:100% a 2:3 portrait would make the hero 1076px tall at 1280 wide.
   Positioned, it simply fills whatever height the copy and the min-height
   above settle on. */
.hero__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
               filter:saturate(.78) contrast(1.02)}
.hero__fig figcaption{
  position:absolute;left:0;bottom:0;background:var(--bone);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  padding:12px 18px;color:var(--mute);
}

/* ── Selected work ───────────────────────────────────────────────────────── */
.feat{display:grid;grid-template-columns:minmax(0,63%) minmax(0,37%);
      gap:clamp(22px,3vw,54px)}
.feat figure{overflow:hidden;background:var(--bone-2)}
.feat figure img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.78);
                 transition:transform 1s var(--ease)}
.feat:hover figure img{transform:scale(1.03)}
.feat__body{display:flex;flex-direction:column;justify-content:space-between;gap:28px;
            padding-top:4px}
.feat__body h3{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.032em;font-weight:600;
               margin:14px 0 14px}
.feat__body p{color:var(--body);font-size:16px;max-width:38ch}
.facts{display:grid;gap:9px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.facts li{display:flex;gap:14px;font-size:14.5px}
.facts .mono{flex:none;width:78px}

.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
       gap:clamp(18px,2.4vw,36px);margin-top:clamp(30px,3.6vw,56px)}
.p figure{overflow:hidden;background:var(--bone-2);margin-bottom:16px}
.p figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.78);
              transition:transform 1s var(--ease)}
.p:hover figure img{transform:scale(1.045)}
.p__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.p__meta{margin-top:6px}
.p__body{margin-top:12px;color:var(--body);font-size:15px;max-width:34ch}

/* ── Studio ──────────────────────────────────────────────────────────────── */
.state{display:grid;grid-template-columns:minmax(0,26%) minmax(0,74%);
       gap:clamp(20px,3vw,56px)}
.state h2{max-width:24ch}
.state__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);margin-top:36px}
.state__cols p{color:var(--body);font-size:16px;max-width:44ch}

.band{margin-top:clamp(40px,5vw,80px)}
.band img{width:100%;aspect-ratio:16/8;object-fit:cover;filter:saturate(.7)}
.band figcaption{padding-top:14px;color:var(--mute)}

/* ── Services ────────────────────────────────────────────────────────────── */
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
     gap:clamp(18px,2.4vw,36px)}
.svc > div{display:grid;gap:10px;align-content:start;padding-top:22px;
           border-top:1px solid var(--line-2)}
.svc b{font-size:18px;font-weight:500;letter-spacing:-.018em}
.svc p{color:var(--body);font-size:15px;max-width:30ch}

/* ── Process ─────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
       gap:clamp(22px,3vw,48px)}
.steps li{display:grid;gap:10px;align-content:start}
.steps h3{font-size:clamp(20px,1.9vw,26px);letter-spacing:-.026em;font-weight:500;
          margin-top:6px}
.steps p:last-child{color:var(--body);font-size:15.5px;max-width:34ch}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
         gap:clamp(28px,4vw,72px)}
.contact h2{font-size:clamp(30px,3.2vw,48px);margin-top:16px}
.contact__lede{margin-top:20px;color:var(--body);font-size:16.5px;max-width:40ch}
.mail{display:inline-block;margin-top:26px;font-size:clamp(18px,1.8vw,23px);
      border-bottom:1px solid var(--line-2);padding-bottom:4px}
.mail:hover{border-color:var(--ink)}
.contact__list{margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--line);
               display:grid;gap:11px}
.contact__list li{position:relative;padding-left:22px;color:var(--mute);font-size:15px}
.contact__list li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;
                          background:var(--ink)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px;align-content:start}
.field{display:grid;gap:8px}
.field--full{grid-column:1 / -1}
.field label{font-family:var(--f-m);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
             color:var(--mute)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 0;background:none;border:0;border-bottom:1px solid var(--line-2);
  font-size:16px;transition:border-color .25s var(--ease);border-radius:0;
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--ink);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}
.field input:user-invalid,.field textarea:user-invalid{border-bottom-color:#a3341f}
.form__foot{grid-column:1 / -1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
            margin-top:4px}
.form__note{margin:0;font-size:14px;color:var(--mute)}
.form__note[data-state="error"]{color:#a3341f}
.form__note[data-state="ok"]{color:#2f5a3a}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:#e9e7e1;padding:clamp(44px,6vw,84px) 0 28px}
.foot .mono{color:rgba(233,231,225,.55)}
.foot__top{display:grid;grid-template-columns:minmax(0,48%) minmax(0,52%);
           gap:clamp(28px,4vw,60px);padding-bottom:clamp(34px,4vw,58px);
           border-bottom:1px solid rgba(255,255,255,.16)}
.foot__brand p:last-child{margin-top:16px;color:rgba(233,231,225,.72);font-size:15px;max-width:34ch}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot__cols ul{display:grid;gap:10px;margin-top:14px}
.foot__cols a{font-size:15px;color:rgba(233,231,225,.82);
              transition:color .2s var(--ease)}
.foot__cols a:hover{color:#fff}
.foot__bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:24px}

/* ── Reveal (only when JS is available) ──────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(18px);
            transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:grid}

  .hero{grid-template-columns:1fr;height:auto;min-height:0}
  .hero__text{padding-inline:var(--gut);padding-block:clamp(28px,5vw,48px) 0;gap:36px}
  .hero__intro{max-width:52ch}
  .hero__fig{margin-top:clamp(28px,4vw,44px);aspect-ratio:16/11}
  .hero__fig img{position:absolute;inset:0}
  .hero__fig{display:block}
  .hero__fig figcaption{position:static;border-right:0;border-top:0;padding-inline:var(--gut)}

  .feat{grid-template-columns:1fr}
  .feat__body{gap:24px}
  .feat__body p{max-width:56ch}

  .state{grid-template-columns:1fr;gap:18px}
  .state__cols{grid-template-columns:1fr 1fr}

  .contact{grid-template-columns:1fr;gap:40px}
  .contact__lede,.contact__list{max-width:56ch}
}

@media (max-width:900px){
  .strip{grid-template-columns:1fr 1fr}
  .svc{grid-template-columns:1fr 1fr;gap:28px}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps li{padding-top:20px;border-top:1px solid var(--line-2)}
  .foot__top{grid-template-columns:1fr}
}

@media (max-width:620px){
  :root{--head-h:64px}
  body{font-size:16px}

  .top__cta{display:none}
  h1{font-size:clamp(34px,10vw,46px)}
  h2{font-size:clamp(24px,7vw,30px)}

  .hero__meta{grid-template-columns:1fr 1fr;gap:16px}
  .hero__fig{aspect-ratio:4/3}

  .sec__head{flex-direction:column;align-items:flex-start;gap:8px}
  .strip{grid-template-columns:1fr;gap:34px}
  .svc{grid-template-columns:1fr}
  .state__cols{grid-template-columns:1fr;gap:20px}

  .form{grid-template-columns:1fr}
  .band img{aspect-ratio:4/3}

  .foot__cols{grid-template-columns:1fr 1fr;gap:26px}
}

/* ── Motion preferences ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
  .feat:hover figure img,.p:hover figure img{transform:none}
  .btn:hover{transform:none}
}