/* ============================================================
   Leaft — Landscape design, Dubai
   Palette: deep olive canvas, warm limestone panel, olive accent
   Type:    Archivo (structure) + Newsreader (voice)
   ============================================================ */

:root{
  /* ground */
  --canvas:        #22271A;
  --canvas-deep:   #171B10;
  --canvas-raise:  #2B3121;

  /* light panel */
  --limestone:     #E7E2D3;
  --limestone-2:   #D9D3C1;

  /* accent */
  --olive:         #A5B45C;
  --olive-dim:     #7C8A3C;
  --olive-deep:    #55611F;

  /* type colour */
  --bone:          #EEEBE0;
  --sage:          #9BA28C;
  --ink:           #1B1F13;
  --ink-soft:      #565C46;

  /* rules */
  --hair:          rgba(238,235,224,.13);
  --hair-2:        rgba(238,235,224,.26);
  --hair-ink:      rgba(27,31,19,.18);

  /* metrics */
  --gut:           clamp(20px, 5vw, 76px);
  --maxw:          1480px;
  --r:             4px;
  --band:          clamp(76px, 10vw, 152px);

  --ease:          cubic-bezier(.22,.61,.36,1);

  --f-display:     "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-voice:       "Newsreader", Georgia, "Times New Roman", serif;
}

/* ── reset ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px }
body{
  margin:0;
  background:var(--canvas);
  color:var(--bone);
  font-family:var(--f-display);
  font-size:17px;
  line-height:1.5;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
ul{ margin:0; padding:0; list-style:none }
h1,h2,h3,p,figure,figcaption,blockquote{ margin:0 }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
svg{ display:block }

::selection{ background:var(--olive); color:var(--canvas-deep) }

:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed; top:10px; left:10px; z-index:200;
  padding:10px 16px; border-radius:999px;
  background:var(--olive); color:var(--canvas-deep);
  font-size:13px; font-weight:600;
  transform:translateY(-160%);
  transition:transform .25s var(--ease);
}
.skip:focus{ transform:none }

/* ── shared type ─────────────────────────────────────────── */
.label{
  font-size:11px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--sage);
}
.label .num{ color:var(--bone) }
.sep{ color:var(--olive-dim); padding:0 .1em }

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.band{ padding-block:var(--band) }

/* pill buttons ------------------------------------------------ */
.pill{
  display:inline-flex; align-items:center; gap:.7em;
  padding:.95em 1.7em;
  border:1px solid var(--hair-2);
  border-radius:999px;
  font-size:13px; font-weight:500;
  letter-spacing:.04em;
  color:var(--bone);
  white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.pill:hover{ border-color:var(--olive); color:var(--olive) }

.pill--solid{
  background:var(--bone);
  border-color:var(--bone);
  color:var(--canvas-deep);
}
.pill--solid:hover{
  background:var(--olive);
  border-color:var(--olive);
  color:var(--canvas-deep);
}
.pill--lg{ padding:1.15em 2.2em; font-size:14px }

.pill .arrow{ transition:transform .35s var(--ease) }
.pill:hover .arrow{ transform:translateX(4px) }

/* circular rail buttons --------------------------------------- */
.circ{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--hair-2);
  border-radius:50%;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.circ svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }
.circ:hover:not(:disabled){ border-color:var(--olive); color:var(--olive) }
.circ:disabled{ opacity:.28; cursor:default }

/* ── header ──────────────────────────────────────────────── */
.site-head{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background-color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(23,27,16,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--hair);
}
.site-head__in{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:22px var(--gut);
  display:flex; align-items:center; gap:clamp(16px,4vw,56px);
}

.mark{ display:flex; align-items:center; gap:9px; margin-right:auto }
.mark__leaf{ width:19px; height:19px; fill:var(--olive); stroke:none; flex:none }
.mark__leaf .mark__stem{ fill:none; stroke:var(--olive); stroke-width:1.6; stroke-linecap:round }
.mark__word{
  font-size:19px; font-weight:600;
  letter-spacing:.01em;
  font-variation-settings:"wdth" 106;
}

.site-nav{ display:flex; gap:clamp(14px,2vw,30px) }
.site-nav a{
  position:relative;
  font-size:13px; font-weight:400;
  letter-spacing:.03em;
  color:var(--sage);
  padding-block:4px;
  transition:color .28s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--olive);
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.site-nav a:hover{ color:var(--olive) }
.site-nav a:hover::after{ transform:scaleX(1) }
.site-nav a.is-current{ color:var(--bone) }

.site-head__cta{ padding:.75em 1.4em }

.burger{ display:none; width:34px; height:34px; padding:8px 5px }
.burger span{ display:block; height:1.5px; background:var(--bone); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease) }
.burger span+span{ margin-top:6px }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg) }

.mobile-nav{
  display:none;
  flex-direction:column; gap:4px;
  max-height:calc(100svh - 78px);
  overflow-y:auto;
  padding:8px var(--gut) 28px;
  background:rgba(23,27,16,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.mobile-nav a{
  font-size:22px; padding:11px 0;
  border-bottom:1px solid var(--hair);
  transition:color .25s var(--ease);
}
.mobile-nav a:hover{ color:var(--olive) }
.mobile-nav .pill{ align-self:flex-start; margin-top:18px; border-bottom:0; font-size:13px }

/* ── hero ────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:140px clamp(26px,4vw,44px);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  transform:scale(1.09);
  animation:heroSettle 3s var(--ease) forwards;
}
@keyframes heroSettle{ to{ transform:scale(1) } }

.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(23,27,16,.86) 0%, rgba(23,27,16,.30) 30%, rgba(23,27,16,.52) 62%, var(--canvas) 100%),
    linear-gradient(90deg, rgba(23,27,16,.72) 0%, rgba(23,27,16,.12) 58%);
}

.hero__in{
  max-width:var(--maxw);
  width:100%;
  margin-inline:auto;
  padding-inline:var(--gut);
}
.hero__eyebrow{ margin-bottom:clamp(18px,2.4vw,30px) }

.hero__title{
  font-size:clamp(2.4rem, 7.6vw, 6.9rem);
  font-weight:400;
  line-height:.99;
  letter-spacing:-.035em;
  font-variation-settings:"wdth" 108;
  max-width:15ch;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em }
.hero__title .line > span{
  display:block;
  transform:translateY(105%);
  animation:lineUp 1.15s var(--ease) forwards;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.15s }
.hero__title .line:nth-child(2) > span{ animation-delay:.29s }
@keyframes lineUp{ to{ transform:none } }

.hero__title em{
  font-family:var(--f-voice);
  font-style:italic;
  font-weight:300;
  font-variation-settings:"opsz" 60;
  letter-spacing:-.01em;
  color:var(--olive);
}

.hero__lede{
  font-family:var(--f-voice);
  font-size:clamp(1.06rem, 1.35vw, 1.35rem);
  font-weight:300;
  font-variation-settings:"opsz" 22;
  line-height:1.55;
  color:#D2D0C4;
  max-width:46ch;
  margin-top:clamp(24px,2.6vw,34px);
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(30px,3.4vw,44px);
}

.hero__foot{
  max-width:var(--maxw); width:100%;
  margin:clamp(48px,7vw,96px) auto 0;
  padding-inline:var(--gut);
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  border-top:1px solid var(--hair);
  padding-top:20px;
}
.hero__credit{
  font-size:12px; letter-spacing:.05em;
  color:var(--sage);
  text-align:right;
}
.hero__credit-time{
  display:inline-block;
  margin-right:.7em;
  padding:.35em .7em;
  border:1px solid var(--hair-2);
  border-radius:999px;
  font-size:11px; letter-spacing:.1em;
  color:var(--olive);
}

/* ── section heads ───────────────────────────────────────── */
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(20px,3vw,48px);
  align-items:start;
  padding-bottom:clamp(38px,5vw,72px);
}
.sec-head__num{ padding-top:.9em }
.sec-head__title{
  grid-column:2;
  font-size:clamp(1.9rem, 4.3vw, 4rem);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.032em;
  font-variation-settings:"wdth" 104;
  max-width:19ch;
}
.sec-head__lede{
  grid-column:2;
  font-family:var(--f-voice);
  font-weight:300;
  font-variation-settings:"opsz" 20;
  font-size:1.06rem;
  line-height:1.6;
  color:var(--sage);
  max-width:44ch;
  margin-top:1.1em;
}

/* ── 01 studio ───────────────────────────────────────────── */
.studio__grid{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.studio__copy{ display:flex; flex-direction:column; gap:1.3em }
.studio__copy p{
  font-family:var(--f-voice);
  font-weight:300;
  font-variation-settings:"opsz" 20;
  font-size:1.06rem;
  line-height:1.62;
  color:#C6C7B8;
}
.studio__more{ align-self:flex-start; margin-top:.6em }

.studio__fig{
  border-radius:var(--r);
  overflow:hidden;
  aspect-ratio:16/9;
}
.studio__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.studio__fig:hover img{ transform:scale(1.035) }

/* ── 02 projects ─────────────────────────────────────────── */
.projects{ position:relative }

/* dusk sweep control ------------------------------------------ */
.dusk{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:14px 26px;
  padding-bottom:clamp(28px,3.4vw,44px);
}
.dusk__switch{
  display:inline-flex; align-items:center; gap:16px;
  padding:.7em 1.15em;
  border:1px solid var(--hair-2);
  border-radius:999px;
  transition:border-color .3s var(--ease);
}
.dusk__switch:hover{ border-color:var(--olive) }

.dusk__label{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--sage);
  transition:color .5s var(--ease);
}
.dusk__label--day{ color:var(--bone) }
.dusk__switch[aria-checked="true"] .dusk__label--day{ color:var(--sage) }
.dusk__switch[aria-checked="true"] .dusk__label--night{ color:var(--bone) }

.dusk__track{
  position:relative;
  width:74px; height:1px;
  background:var(--hair-2);
}
.dusk__dot{
  position:absolute; top:50%; left:0;
  width:11px; height:11px;
  margin-top:-5.5px; margin-left:-5.5px;
  border-radius:50%;
  background:var(--olive);
  box-shadow:0 0 0 5px rgba(165,180,92,.14);
  transition:left .7s var(--ease), background-color .7s var(--ease), box-shadow .7s var(--ease);
}
.dusk__switch[aria-checked="true"] .dusk__dot{
  left:100%;
  background:#E9E4C6;
  box-shadow:0 0 0 5px rgba(233,228,198,.13);
}

.dusk__hint{
  font-family:var(--f-voice);
  font-weight:300; font-style:italic;
  font-variation-settings:"opsz" 16;
  font-size:.95rem;
  color:var(--sage);
}

/* rail --------------------------------------------------------- */
.rail-shell{
  margin-inline:calc(var(--gut) * -1);
}
.rail{
  display:flex;
  gap:clamp(14px,1.6vw,26px);
  padding-inline:var(--gut);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:var(--gut);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{ display:none }
.rail:focus-visible{ outline-offset:-2px }

.proj{
  flex:0 0 clamp(268px, 31vw, 452px);
  scroll-snap-align:start;
}

.proj__frame{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--canvas-deep);
}
.proj__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.proj__img--night{
  opacity:0;
  transition:opacity .95s var(--ease);
  transition-delay:calc(var(--i) * 55ms);
}
.projects.is-night .proj__img--night{ opacity:1 }

.proj__tag{
  position:absolute; left:12px; bottom:12px;
  padding:.5em .9em;
  border-radius:999px;
  background:rgba(23,27,16,.62);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bone);
}

.proj__meta{ padding-top:20px }
.proj__name{
  display:flex; align-items:baseline; gap:.6em;
  font-size:clamp(1.15rem,1.7vw,1.5rem);
  font-weight:400;
  letter-spacing:-.02em;
  font-variation-settings:"wdth" 104;
  transition:color .3s var(--ease);
}
.proj__num{
  font-size:11px; letter-spacing:.14em;
  color:var(--olive);
  font-variation-settings:"wdth" 100;
}
.proj:hover .proj__name{ color:var(--olive) }

.proj__where{
  margin-top:.45em;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sage);
}
.proj__sum{
  margin-top:.95em;
  font-family:var(--f-voice);
  font-weight:300;
  font-variation-settings:"opsz" 18;
  font-size:1rem; line-height:1.58;
  color:#B6B9A8;
}

.rail-ctrl{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  margin-top:clamp(30px,3.6vw,48px);
  padding-top:22px;
  border-top:1px solid var(--hair);
}
.rail-ctrl__btns{ display:flex; gap:10px }
.rail-ctrl__count{
  font-size:12px; letter-spacing:.16em;
  color:var(--sage);
}
#railNow{ color:var(--bone) }

/* ── 03 services ─────────────────────────────────────────── */
.svc{ border-top:1px solid var(--hair) }
.svc__row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;
  gap:clamp(16px,3vw,48px);
  align-items:baseline;
  padding-block:clamp(24px,2.8vw,38px);
  border-bottom:1px solid var(--hair);
}
.svc__row::after{
  content:""; position:absolute; left:0; bottom:-1px;
  height:1px; width:100%;
  background:var(--olive);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.svc__row:hover::after{ transform:scaleX(1) }

.svc__name{
  font-size:clamp(1.35rem,2.7vw,2.15rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.028em;
  font-variation-settings:"wdth" 104;
  transition:color .35s var(--ease);
}
.svc__row:hover .svc__name{ color:var(--olive) }

.svc__desc{
  font-family:var(--f-voice);
  font-weight:300;
  font-variation-settings:"opsz" 20;
  font-size:1.06rem; line-height:1.58;
  color:#B6B9A8;
  max-width:52ch;
}
.svc__arrow{
  font-size:20px; color:var(--sage);
  opacity:0; transform:translateX(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .4s var(--ease);
}
.svc__row:hover .svc__arrow{ opacity:1; transform:none; color:var(--olive) }

/* ── 04 climate (limestone panel) ────────────────────────── */
.climate-band{ padding-block:0 }
.climate{
  background:var(--limestone);
  color:var(--ink);
  border-radius:calc(var(--r) * 2);
  padding:clamp(34px,5vw,84px) clamp(24px,4vw,72px);
}
.climate .label{ color:var(--ink-soft) }
.climate .label .num{ color:var(--ink) }
.climate .sep{ color:var(--olive-deep) }

.climate__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,64px);
  align-items:end;
  padding-bottom:clamp(38px,5vw,72px);
}
.climate__title{
  margin-top:.7em;
  font-size:clamp(1.9rem,4.1vw,3.7rem);
  font-weight:400;
  line-height:1.03;
  letter-spacing:-.034em;
  font-variation-settings:"wdth" 104;
}
.climate__lede{
  margin-top:1.1em;
  font-family:var(--f-voice);
  font-weight:300;
  font-variation-settings:"opsz" 22;
  font-size:1.1rem; line-height:1.6;
  color:var(--ink-soft);
  max-width:52ch;
}

.sunpath{ width:clamp(210px,24vw,320px); flex:none; color:var(--olive-deep); padding-bottom:.4em }
.sunpath svg{ width:100%; height:auto; overflow:visible }
.sunpath__arc{
  fill:none; stroke:currentColor; stroke-width:1;
  stroke-dasharray:2 6; opacity:.6;
}
.sunpath__ticks line{ stroke:currentColor; stroke-width:1; opacity:.5 }
.sunpath__ground{ stroke:var(--ink); stroke-width:1; opacity:.3 }
.sunpath__sun{ fill:var(--olive-deep) }
.sunpath__ray{ stroke:currentColor; stroke-width:1; opacity:.35; stroke-dasharray:2 4 }
.sunpath__cap{
  display:flex; justify-content:space-between; gap:8px;
  margin-top:10px;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft);
}

.climate__list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,44px);
  border-top:1px solid var(--hair-ink);
  padding-top:clamp(26px,3vw,44px);
}
.climate__list li{ position:relative; padding-left:clamp(16px,2vw,28px) }
.climate__list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:1px; height:calc(100% - .42em);
  background:var(--hair-ink);
}
.climate__list li:first-child::before{ background:var(--olive-deep) }
.climate__list h3{
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  font-weight:500;
  letter-spacing:-.012em;
}
.climate__list p{
  margin-top:.7em;
  font-family:var(--f-voice);
  font-weight:300;
  font-variation-settings:"opsz" 18;
  font-size:1.02rem; line-height:1.58;
  color:var(--ink-soft);
}

/* ── 05 approach ─────────────────────────────────────────── */
.steps{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px;
  padding-bottom:clamp(30px,3.6vw,48px);
}
.chip{
  padding:.72em 1.35em;
  border:1px solid var(--hair-2);
  border-radius:999px;
  font-size:12.5px; letter-spacing:.04em;
  color:var(--sage);
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.chip:hover{ color:var(--olive); border-color:var(--olive) }
.chip.is-on{
  background:var(--olive);
  border-color:var(--olive);
  color:var(--canvas-deep);
  font-weight:500;
}
.chip.is-on:hover{ color:var(--canvas-deep) }
.steps__sep{ color:var(--olive-dim); font-size:15px; padding-inline:2px }

.step-panel{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.step-panel__fig{
  border-radius:var(--r);
  overflow:hidden;
  aspect-ratio:5/4;
  background:var(--canvas-deep);
}
.step-panel__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .5s var(--ease);
}
.step-panel.is-swapping .step-panel__fig img{ opacity:0 }

.step-panel__copy h3{
  margin-top:.75em;
  font-size:clamp(1.6rem,3.2vw,2.6rem);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.03em;
  font-variation-settings:"wdth" 104;
}
.step-panel__copy p:last-child{
  margin-top:1em;
  font-family:var(--f-voice);
  font-weight:300;
  font-variation-settings:"opsz" 22;
  font-size:1.12rem; line-height:1.6;
  color:#C6C7B8;
  max-width:38ch;
}
.step-panel.is-swapping .step-panel__copy h3,
.step-panel.is-swapping .step-panel__copy p{ opacity:0 }
.step-panel__copy h3,
.step-panel__copy p{ transition:opacity .35s var(--ease) }

/* ── inquiry ─────────────────────────────────────────────── */
.inquiry{
  background:var(--canvas-deep);
  border-top:1px solid var(--hair);
}
.inquiry__in{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(30px,5vw,72px);
  align-items:end;
}
.inquiry__title{
  font-size:clamp(2.3rem,6vw,5.4rem);
  font-weight:400;
  line-height:.99;
  letter-spacing:-.038em;
  font-variation-settings:"wdth" 108;
}
.inquiry__title em{
  font-family:var(--f-voice);
  font-style:italic; font-weight:300;
  font-variation-settings:"opsz" 60;
  letter-spacing:-.012em;
  color:var(--olive);
}
.inquiry__side{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; padding-bottom:.6em }
.inquiry__lede{
  font-family:var(--f-voice);
  font-weight:300;
  font-variation-settings:"opsz" 22;
  font-size:1.12rem; line-height:1.58;
  color:var(--sage);
  max-width:34ch;
}
.inquiry__mail{
  font-size:13px; letter-spacing:.09em;
  color:var(--sage);
  border-bottom:1px solid var(--hair-2);
  padding-bottom:3px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.inquiry__mail:hover{ color:var(--olive); border-color:var(--olive) }

/* ── footer ──────────────────────────────────────────────── */
.site-foot{
  background:var(--canvas-deep);
  padding-block:clamp(52px,6vw,88px) 30px;
  border-top:1px solid var(--hair);
}
.site-foot__top{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(30px,4vw,64px);
  padding-bottom:clamp(40px,5vw,72px);
}
.site-foot__line{
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.018em;
  max-width:22ch;
}
.site-foot__cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
.site-foot__cols ul{ margin-top:1.5em; display:flex; flex-direction:column; gap:.72em }
.site-foot__cols li{ font-size:14px; color:var(--sage) }
.site-foot__cols a{ transition:color .28s var(--ease) }
.site-foot__cols a:hover{ color:var(--olive) }

.site-foot__base{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  padding-top:26px;
  border-top:1px solid var(--hair);
  font-size:12px; letter-spacing:.05em;
  color:var(--sage);
}
.site-foot__up{ display:inline-flex; gap:.6em; transition:color .28s var(--ease) }
.site-foot__up:hover{ color:var(--olive) }
.site-foot__up .arrow{ transition:transform .35s var(--ease) }
.site-foot__up:hover .arrow{ transform:translateY(-3px) }

/* ── scroll reveal ───────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none }
.hero .reveal{ transition-delay:.42s }
.hero .hero__lede{ transition-delay:.5s }
.hero .hero__actions{ transition-delay:.58s }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1080px){
  .sec-head{ grid-template-columns:1fr; gap:14px }
  .sec-head__title,
  .sec-head__lede{ grid-column:1 }
  .sec-head__num{ padding-top:0 }
  .sec-head__title{ max-width:22ch }

  .studio__grid{ grid-template-columns:1fr }
  .studio__fig{ order:-1; aspect-ratio:3/2 }

  .svc__row{ grid-template-columns:1fr auto; gap:10px 24px }
  .svc__desc{ grid-column:1/2 }
  .svc__arrow{ grid-row:1; align-self:center }

  .climate__head{ grid-template-columns:1fr }
  .sunpath{ width:230px }
  .climate__list{ grid-template-columns:1fr; gap:24px }
  .climate__list li:first-child::before{ background:var(--hair-ink) }

  .step-panel{ grid-template-columns:1fr }
  .inquiry__in{ grid-template-columns:1fr; align-items:start }
  .site-foot__top{ grid-template-columns:1fr }
}

@media (max-width:820px){
  .site-nav,
  .site-head__cta{ display:none }
  .burger{ display:block }
  .mobile-nav:not([hidden]){ display:flex }
  .site-head{ background:rgba(23,27,16,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }

  .hero{ min-height:92svh }
  .hero__title{ max-width:none }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:12px }
  .hero__credit{ text-align:left }

  .proj{ flex:0 0 min(80vw, 380px) }
  .site-foot__cols{ grid-template-columns:1fr 1fr }
}

@media (max-width:560px){
  body{ font-size:16px }
  .dusk{ gap:12px }
  .dusk__hint{ display:none }
  .site-foot__cols{ grid-template-columns:1fr; gap:26px }
  .rail-ctrl{ flex-direction:row }

  .svc__row{ grid-template-columns:1fr; gap:8px }
  .svc__arrow{ display:none }
  .svc__desc{ grid-column:1 }
}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero__media img{ transform:none }
  .hero__title .line > span{ transform:none }
  .reveal{ opacity:1; transform:none }
  .proj__img--night{ transition:opacity .01ms !important; transition-delay:0s !important }
}