/* ==========================================================================
   Adhishtam Digital Solutions
   Palette is the client's own swatch: #236147 / gold gradient / #FFFEF4
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------
   Self-hosted, not loaded from Google. Two variable files, 71 KB total, which
   is both smaller than the six static weights it replaces and one fewer
   third-party connection to set up on a phone.
   Sora echoes the angular, squared geometry of the ADHISHTAM wordmark;
   Inter carries body text because nothing reads better at 15px on a phone. */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- tokens ------------------------------------------------------------- */
:root {
  --green:      #236147;
  --green-dk:   #17402f;
  --green-dker: #0e2a1e;
  --ink:        #061710;
  --ink-soft:   #0b2118;

  --cream:      #fffef4;
  --cream-2:    #f3efe0;
  --cream-dim:  rgba(255, 254, 244, .62);
  --cream-faint:rgba(255, 254, 244, .38);

  --gold:       #c9a961;
  --gold-dp:    #b8943e;
  --gold-lt:    #e8ce8e;
  --gold-grad:  linear-gradient(100deg, var(--gold-dp), var(--gold-lt) 48%, var(--gold-dp));

  --hair:       rgba(201, 169, 97, .22);
  --hair-soft:  rgba(255, 254, 244, .1);

  --ff-display: "Sora", system-ui, sans-serif;
  --ff-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad:        clamp(1.25rem, 5vw, 5.5rem);
  --maxw:       1320px;
  --ease:       cubic-bezier(.16, 1, .3, 1);
  --ease-io:    cubic-bezier(.65, .05, .36, 1);
  --nav-h:      64px;
}
@media (min-width: 1024px) { :root { --nav-h: 86px; } }

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .2vw, 1.075rem);
  line-height: 1.7;
  color: var(--cream);
  background: var(--ink);
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--gold); color: var(--ink); }

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

/* --- type --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* Sora is a wide face — uppercase display needs pulling in harder than Syne
   did, and the minimum has to stay small enough that "MARKET" clears a 320px
   phone with room to spare. */
.display {
  font-size: clamp(2.6rem, .9rem + 8vw, 9rem);
  line-height: .94;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.h2 {
  font-size: clamp(1.95rem, 1.05rem + 3.6vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.h3 { font-size: clamp(1.28rem, 1.08rem + .9vw, 1.85rem); letter-spacing: -.02em; line-height: 1.15; }

.lede {
  font-size: clamp(1.05rem, .98rem + .5vw, 1.32rem);
  line-height: 1.6;
  font-weight: 300;
  max-width: 62ch;
}

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  paint-order: stroke fill;
}

/* eyebrow / section index */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: var(--gold);
  opacity: .8;
}
.eyebrow--plain::before { display: none; }

/* --- layout ------------------------------------------------------------- */
/* max() keeps content clear of the rounded corners / camera cutout on
   notched phones held in landscape. */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

.section { position: relative; padding-block: clamp(4.5rem, 9vw, 9.5rem); }
.section--cream { background: var(--cream); color: var(--ink); }
.section--cream .eyebrow { color: var(--green); }
.section--cream .eyebrow::before { background: var(--green); }
.section--green { background: var(--green-dker); }

.section-head {
  display: grid;
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
    gap: 3rem;
  }
}

/* hairline rule */
.rule { height: 1px; background: var(--hair); border: 0; }
.section--cream .rule { background: rgba(35, 97, 71, .18); }

/* --- buttons ------------------------------------------------------------ */
.btn {
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 1.05rem 2rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--gold-grad);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover { box-shadow: 0 14px 40px -12px rgba(201, 169, 97, .55); }
.btn:hover::after { transform: translateY(0); }

.btn svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translate(4px, -4px); }

.btn--ghost {
  --btn-fg: var(--cream);
  background: transparent;
  border: 1px solid var(--hair);
}
.btn--ghost::after { background: var(--gold); }
.btn--ghost:hover { --btn-fg: var(--ink); border-color: transparent; }
.section--cream .btn--ghost { --btn-fg: var(--ink); border-color: rgba(35, 97, 71, .28); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* text link with animated underline */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 4px;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .5s var(--ease);
}
.tlink:hover::after { transform-origin: left; transform: scaleX(1); }

/* --- cursor ------------------------------------------------------------- */
.cursor, .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
  transition: opacity .3s;
}
.cursor {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--gold);
  transition: opacity .3s, width .35s var(--ease), height .35s var(--ease),
              margin .35s var(--ease), background-color .35s var(--ease);
}
.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--gold);
}
.cursor.is-on { opacity: 1; }
.cursor-dot.is-on { opacity: 1; }
.cursor.is-big {
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  background: rgba(201, 169, 97, .13);
}
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

/* --- preloader -----------------------------------------------------------
   Held deliberately for ~5.2s. That is a long time to look at nothing, so it
   is choreographed: ring draws, peak draws then fills, wordmark tracks in,
   tagline follows, meter runs the whole way, then the panel lifts away. */
html.is-loading, html.is-loading body { overflow: hidden; }

.preload {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(2.5rem, 8vh, 4.5rem);
  padding: var(--pad);
  background: var(--ink);
  transition: transform .9s var(--ease), visibility .9s;
}
.preload::after {           /* faint gold vignette so it isn't a flat black */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 42%, rgba(201, 169, 97, .09), transparent 70%);
  pointer-events: none;
}
.preload.is-done { transform: translateY(-100%); visibility: hidden; }
.preload.is-done .preload__inner,
.preload.is-done .preload__meter { opacity: 0; transition: opacity .35s ease; }

.preload__inner { display: grid; justify-items: center; gap: 1.4rem; position: relative; }

.preload__mark { width: clamp(78px, 17vw, 112px); }
.pl-ring, .pl-line { stroke-linecap: round; stroke-linejoin: round; }
.pl-ring {
  stroke-dasharray: 165; stroke-dashoffset: 165;
  animation: draw 1.5s var(--ease) .15s forwards;
}
.pl-line {
  stroke-dasharray: 285; stroke-dashoffset: 285;
  animation: draw 1.7s var(--ease) .55s forwards;
}
.pl-fill { opacity: 0; animation: pl-in 1s var(--ease) 1.75s forwards; }
@keyframes draw  { to { stroke-dashoffset: 0; } }
@keyframes pl-in { to { opacity: 1; } }

.preload__word {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 5.5vw, 1.9rem);
  color: var(--cream);
  opacity: 0;
  letter-spacing: .62em;
  text-indent: .62em;          /* balances the trailing letter-space */
  animation: pl-word 1.3s var(--ease) 1.9s forwards;
}
@keyframes pl-word {
  from { opacity: 0; letter-spacing: .62em; }
  to   { opacity: 1; letter-spacing: .26em; }
}

.preload__tag {
  font-size: clamp(.62rem, 2.6vw, .72rem);
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  animation: pl-in .9s var(--ease) 2.7s forwards;
}

.preload__meter {
  display: grid;
  justify-items: center;
  gap: .9rem;
  position: relative;
}
.preload__bar {
  width: min(240px, 52vw);
  height: 1px;
  background: var(--hair-soft);
  position: relative;
  overflow: hidden;
}
.preload__bar i {
  position: absolute;
  inset: 0;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
}
.preload__num {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.preload__num::after { content: "%"; }

/* --- scroll progress ---------------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--gold-grad);
  z-index: 8000;
}

/* --- nav ---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--nav-h);
  z-index: 800;
  display: flex;
  align-items: center;
  transition: background-color .5s var(--ease), height .5s var(--ease),
              box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  height: 68px;
  background: rgba(6, 23, 16, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hair);
}
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav__logo img {
  height: clamp(34px, 4.2vw, 44px);
  width: auto;
  transition: height .5s var(--ease);
}
.nav.is-stuck .nav__logo img { height: 32px; }

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.4rem);
}
@media (min-width: 1024px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .4rem 0;
  color: var(--cream-dim);
  transition: color .35s;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--cream); }
.nav__link:hover::after, .nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__cta { display: none; }
@media (min-width: 1024px) { .nav__cta { display: inline-flex; padding: .8rem 1.5rem; } }

/* burger */
.burger {
  display: grid;
  gap: 6px;
  padding: 10px;
  margin-right: -10px;
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--cream);
  transition: transform .45s var(--ease), opacity .3s;
}
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: var(--green-dker);
  padding: calc(var(--nav-h) + 2rem) var(--pad) 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
  overflow-y: auto;
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__links { display: grid; gap: .35rem; }
.menu__links a {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2rem, 11vw, 3.4rem);
  text-transform: uppercase;
  line-height: 1.08;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu__links a:hover { color: var(--gold); }
.menu__foot {
  display: grid;
  gap: .5rem;
  font-size: .85rem;
  color: var(--cream-dim);
}
.menu__foot a:hover { color: var(--gold); }

/* --- hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback for browsers without svh */
  min-height: 100svh;  /* the honest height under a mobile URL bar */
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  background: radial-gradient(120% 90% at 78% 8%, var(--green-dk) 0%, var(--green-dker) 42%, var(--ink) 100%);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
}
.hero__glow {
  position: absolute;
  width: 62vmax; height: 62vmax;
  right: -14vmax; top: -22vmax;
  background: radial-gradient(circle, rgba(201, 169, 97, .16), transparent 62%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__title { margin-block: clamp(1.2rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
}
.is-ready .hero__title .line > span { transform: none; }
.hero__title .line:nth-child(2) > span { transition-delay: .1s; }
.hero__title .line:nth-child(3) > span { transition-delay: .2s; }

.hero__foot {
  display: grid;
  gap: 2rem;
  padding-top: clamp(1.8rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--hair);
}
@media (min-width: 880px) {
  .hero__foot { grid-template-columns: 1.05fr auto; align-items: end; gap: 3rem; }
}

.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4vw, 3.2rem); }
.stat__num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem);
  line-height: 1;
  color: var(--gold);
}
.stat__lbl {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-top: .5rem;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .6rem;
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.scroll-cue i {
  width: 1px; height: 46px;
  background: linear-gradient(var(--gold), transparent);
  animation: cue 2.1s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}
@media (max-width: 880px) { .scroll-cue { display: none; } }

/* --- marquee ------------------------------------------------------------ */
.marquee {
  position: relative;
  padding-block: clamp(1.1rem, 2vw, 1.7rem);
  background: var(--gold-grad);
  color: var(--ink);
  overflow: hidden;
  display: flex;
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: 2.6rem;
  padding-right: 2.6rem;
  align-items: center;
  animation: slide 44s linear infinite;
  min-width: 100%;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }
.marquee span {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(.95rem, .8rem + .5vw, 1.35rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2.6rem;
}
.marquee span::after {
  content: "";
  width: 7px; height: 7px;
  background: var(--ink);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* --- about -------------------------------------------------------------- */
.about__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 950px) { .about__grid { grid-template-columns: 1.25fr .75fr; } }

.about__body { display: grid; gap: 1.4rem; max-width: 64ch; }
.about__body p { color: rgba(6, 23, 16, .78); }

.vm { display: grid; gap: 1.5rem; align-content: start; }
.vm__card {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(35, 97, 71, .18);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(255, 254, 244, .9), rgba(243, 239, 224, .55));
  position: relative;
  overflow: hidden;
}
.vm__card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--gold-grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .8s var(--ease);
}
.vm__card.is-in::before { transform: scaleY(1); }
.vm__card h3 { color: var(--green); margin-bottom: .7rem; }
.vm__card p { font-size: .96rem; color: rgba(6, 23, 16, .72); }

/* --- services ----------------------------------------------------------- */
.svc { display: grid; gap: 0; border-top: 1px solid var(--hair); }

.svc__item { border-bottom: 1px solid var(--hair); }

.svc__head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.9rem, 2.5vw, 2rem);
  padding-block: clamp(1.35rem, 2.6vw, 2rem);
  text-align: left;
  transition: color .4s;
}
.svc__head:hover { color: var(--gold); }
.svc__no {
  font-family: var(--ff-display);
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--gold);
  min-width: 2.2ch;
}
.svc__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.25rem, .95rem + 1.9vw, 2.5rem);
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: -.02em;
}
.svc__toggle {
  position: relative;
  width: clamp(34px, 4vw, 44px);
  height: clamp(34px, 4vw, 44px);
  border: 1px solid var(--hair);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color .45s var(--ease), border-color .45s, transform .45s var(--ease);
}
.svc__toggle::before, .svc__toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease), background-color .45s;
}
.svc__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc__head[aria-expanded="true"] .svc__toggle {
  background: var(--gold);
  border-color: var(--gold);
  transform: rotate(180deg);
}
.svc__head[aria-expanded="true"] .svc__toggle::before,
.svc__head[aria-expanded="true"] .svc__toggle::after { background: var(--ink); }
.svc__head[aria-expanded="true"] .svc__toggle::after { transform: translate(-50%, -50%) rotate(0); }

.svc__panel {
  overflow: hidden;
  height: 0;
  transition: height .6s var(--ease);
}
.svc__panel-in { padding-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.svc__desc {
  color: var(--cream-dim);
  max-width: 60ch;
  margin-bottom: 1.6rem;
  font-size: .98rem;
}
.svc__list {
  display: grid;
  gap: .55rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.svc__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: .93rem;
  color: var(--cream-dim);
  transition: color .3s;
}
.svc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .66em;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.svc__list li:hover { color: var(--cream); }

/* --- portfolio ---------------------------------------------------------- */
/* Nine filters wrap to four rows on a phone and push the work off-screen.
   Below 700px they become one horizontal, snapping strip instead. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 700px) {
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so the strip reads as scrollable */
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: .25rem;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: 0 0 auto; scroll-snap-align: start; }
}
.filter {
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* comfortable thumb target */
  padding: .58rem 1.15rem;
  border: 1px solid rgba(35, 97, 71, .22);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(6, 23, 16, .66);
  transition: color .35s, background-color .35s, border-color .35s;
}
.filter:hover { color: var(--green); border-color: var(--green); }
.filter.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}

.work {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  grid-auto-flow: dense;
}
.work__item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--green-dker);
  aspect-ratio: 4 / 5;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.work__item--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .work__item--wide { grid-column: span 1; aspect-ratio: 4 / 5; } }
.work__item.is-hidden {
  display: none;
}
.work__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease), filter .6s;
}
.work__item:hover img { transform: scale(1.07); }

.work__veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .4rem;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  color: var(--cream);
  background: linear-gradient(to top, rgba(6, 23, 16, .93) 0%, rgba(6, 23, 16, .5) 42%, transparent 78%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.work__item:hover .work__veil, .work__item:focus-within .work__veil { opacity: 1; }
.work__cat {
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  transform: translateY(14px);
  transition: transform .55s var(--ease) .05s;
}
.work__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
  line-height: 1.15;
  transform: translateY(14px);
  transition: transform .55s var(--ease) .1s;
}
.work__item:hover .work__cat, .work__item:hover .work__title,
.work__item:focus-within .work__cat, .work__item:focus-within .work__title { transform: none; }

/* corner tick */
.work__item::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 169, 97, .5);
  border-radius: 2px;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.work__item:hover::after { opacity: 1; transform: none; }

.work-empty {
  grid-column: 1 / -1;
  display: none;
  place-items: center;
  text-align: center;
  gap: .8rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  border: 1px dashed rgba(35, 97, 71, .3);
  border-radius: 4px;
  color: rgba(6, 23, 16, .7);
}
.work-empty.is-on { display: grid; }
.work-empty strong {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  color: var(--green);
}

/* --- touch devices -------------------------------------------------------
   No hover means no reveal. Without this the portfolio is seven unlabelled
   images on a phone — which is most of the traffic. Show the captions
   outright and drop the effects that can never fire. */
@media (hover: none), (pointer: coarse) {
  .work__veil { opacity: 1; }
  .work__cat, .work__title { transform: none; }
  .work__veil {
    background: linear-gradient(to top,
      rgba(6, 23, 16, .95) 0%, rgba(6, 23, 16, .62) 45%, rgba(6, 23, 16, .05) 82%);
  }
  .work__item::after { display: none; }
  .card:hover, .post:hover { transform: none; }
  .btn:hover { box-shadow: none; }
  .footer__list a:hover { padding-left: 0; }
}

/* --- clients ------------------------------------------------------------ */
.clients {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.client {
  background: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.2rem) 1.2rem;
  display: grid;
  gap: .35rem;
  place-items: center;
  text-align: center;
  transition: background-color .45s;
}
.client:hover { background: var(--green-dk); }
.client b {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.client span {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* --- why / cards -------------------------------------------------------- */
.cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--hair);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .5s, transform .5s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(201, 169, 97, .1), transparent 58%);
  opacity: 0;
  transition: opacity .5s;
}
.card:hover { border-color: rgba(201, 169, 97, .55); transform: translateY(-5px); }
.card:hover::before { opacity: 1; }
.card__no {
  font-family: var(--ff-display);
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 1.4rem;
  display: block;
}
.card h3 { margin-bottom: .6rem; }
.card p { font-size: .93rem; color: var(--cream-dim); }

/* --- process ------------------------------------------------------------ */
.steps { display: grid; gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--green-dker);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: .7rem;
  align-content: start;
  transition: background-color .5s;
}
.step:hover { background: var(--green-dk); }
.step__no {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
}
.step h3 { font-size: 1.12rem; }
.step p { font-size: .9rem; color: var(--cream-dim); }

/* --- CTA band ----------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--green);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 8rem);
}
.cta::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background:
    radial-gradient(circle at 22% 28%, rgba(232, 206, 142, .22), transparent 42%),
    radial-gradient(circle at 78% 72%, rgba(6, 23, 16, .34), transparent 46%);
  animation: drift 22s var(--ease-io) infinite alternate;
}
@keyframes drift { to { transform: translate3d(4%, -3%, 0) rotate(6deg); } }
.cta__inner { position: relative; z-index: 2; display: grid; gap: 1.8rem; justify-items: center; }

/* --- contact ------------------------------------------------------------ */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 980px) { .contact__grid { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .5rem; margin-bottom: 1.1rem; }
.field label {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
/* font-size must not drop below 16px: iOS Safari zooms the whole page in on
   focus for anything smaller, and the layout never recovers gracefully. */
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: .95rem 1.1rem;
  background: rgba(255, 254, 244, .04);
  border: 1px solid var(--hair);
  border-radius: 3px;
  font-size: 16px;
  font-weight: 300;
  transition: border-color .35s, background-color .35s;
  appearance: none;
  -webkit-appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c9a961' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 254, 244, .07);
}
.field input::placeholder, .field textarea::placeholder { color: var(--cream-faint); }
.field select option { background: var(--ink); color: var(--cream); }

.form-note {
  font-size: .8rem;
  color: var(--cream-faint);
  margin-top: 1rem;
}

.info { display: grid; gap: 1.6rem; align-content: start; }
.info__row {
  display: grid;
  gap: .35rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--hair);
}
.info__row:last-of-type { border-bottom: 0; }
.info__k {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.info__v { font-size: 1.02rem; line-height: 1.55; }
.info__v a:hover { color: var(--gold); }

.socials { display: flex; flex-wrap: wrap; gap: .6rem; }
.social {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  transition: background-color .4s var(--ease), border-color .4s, transform .4s var(--ease), color .4s;
}
.social svg { width: 17px; height: 17px; }
.social:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-3px);
}

/* --- footer ------------------------------------------------------------- */
.footer { background: var(--ink); border-top: 1px solid var(--hair); }
.footer__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__logo img { height: 52px; width: auto; margin-bottom: 1.2rem; }
.footer__tag { font-size: .93rem; color: var(--cream-dim); max-width: 38ch; }
.footer h4 {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
  font-family: var(--ff-body);
  font-weight: 500;
}
.footer__list { display: grid; gap: .6rem; font-size: .92rem; color: var(--cream-dim); }
.footer__list a { transition: color .3s, padding-left .3s; }
.footer__list a:hover { color: var(--gold); padding-left: 5px; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hair);
  font-size: .78rem;
  color: var(--cream-faint);
}

/* --- blog --------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  background: radial-gradient(110% 100% at 70% 0%, var(--green-dk), var(--green-dker) 48%, var(--ink));
  overflow: hidden;
}

.posts {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.post {
  display: grid;
  gap: .9rem;
  align-content: start;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--hair);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: border-color .5s, transform .5s var(--ease);
}
.post:hover { border-color: rgba(201, 169, 97, .5); transform: translateY(-5px); }
.post__tag {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.post h3 { font-size: 1.22rem; line-height: 1.25; }
.post p { font-size: .92rem; color: var(--cream-dim); }
.post__soon {
  margin-top: .3rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* --- scroll reveal ------------------------------------------------------ */
.rv {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.rv.is-in { opacity: 1; transform: none; }
.rv-1 { transition-delay: .08s; }
.rv-2 { transition-delay: .16s; }
.rv-3 { transition-delay: .24s; }
.rv-4 { transition-delay: .32s; }
.rv-5 { transition-delay: .4s; }

/* ==========================================================================
   MOTION LAYER
   Four committed SVG assets in assets/anim/ plus the CSS that places them.
   Everything here is decorative: it sits behind content, never intercepts a
   pointer, and switches off under prefers-reduced-motion.
   ========================================================================== */

/* --- film grain ----------------------------------------------------------
   One fixed tile over the whole page. Kills the banding that large flat
   greens produce on cheap phone panels, and reads as print texture. Animated
   by transform only, so it composites on the GPU and never triggers layout. */
.grain {
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  z-index: 400;
  pointer-events: none;
  opacity: .055;
  background-image: url("../anim/grain.svg");
  background-size: 190px 190px;
  animation: grain 1.1s steps(5) infinite;
  will-change: transform;
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-2%, -2%, 0); }
  80%  { transform: translate3d(3%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- decorative backdrops ------------------------------------------------ */
.has-deco { position: relative; overflow: hidden; isolation: isolate; }
.has-deco > .wrap { position: relative; z-index: 1; }

.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Topographic contours — the mark is a summit in a ring; this is the same
   idea drawn as a map. Sits behind the process steps. */
.deco--topo {
  width: min(120vw, 1000px);
  aspect-ratio: 1;
  top: 50%; left: 50%;
  translate: -50% -50%;
  opacity: .5;
}

/* Honeycomb, lifted from the profile deck cover. Used where there is no
   hero canvas to carry the pattern. */
.deco--hex {
  width: min(150vw, 1100px);
  aspect-ratio: 1;
  top: -25%; right: -18%;
  opacity: .75;
}
.deco--hex-left { right: auto; left: -22%; top: -30%; }

@media (max-width: 700px) {
  .deco--topo { opacity: .38; width: 150vw; }
  .deco--hex  { opacity: .55; }
}

/* --- footer watermark ---------------------------------------------------- */
.footer { position: relative; overflow: hidden; }
.footer__mark {
  position: absolute;
  right: -4%;
  bottom: -18%;
  width: min(46vw, 340px);
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.footer > .wrap { position: relative; z-index: 1; }

/* --- heading mask reveal -------------------------------------------------
   Headings wipe upward into place instead of just fading. Negative bottom
   inset gives descenders and the outline stroke room to escape the clip. */
.rv-mask {
  clip-path: inset(0 0 105% 0);
  transform: translateY(12px);
  transition: clip-path 1.05s var(--ease), transform 1.05s var(--ease);
}
.rv-mask.is-in {
  clip-path: inset(0 0 -14% 0);
  transform: none;
}

/* --- metallic sweep ------------------------------------------------------
   A brighter band travels across gold text, so it behaves like foil rather
   than a flat gradient. */
.gold-text--shine {
  background-image: linear-gradient(100deg,
    var(--gold-dp) 0%, var(--gold-lt) 28%, #fff4d6 46%,
    var(--gold-lt) 64%, var(--gold-dp) 100%);
  background-size: 260% 100%;
  animation: shine 9s linear infinite;
}
@keyframes shine {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* --- portfolio: light follows the pointer -------------------------------- */
.work__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(232, 206, 142, .26), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.work__item:hover::before { opacity: 1; }
.work__veil { z-index: 2; }
.work__item::after { z-index: 3; }

/* --- accordion: gold thread draws across the row ------------------------- */
.svc__item { position: relative; }
.svc__item::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
}
.svc__item:hover::after,
.svc__item:focus-within::after { transform: scaleX(1); }

/* --- stats: rule draws in under each figure ------------------------------ */
.stat { position: relative; padding-bottom: .9rem; }
.stat::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  opacity: .45;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) .3s;
}
.is-ready .stat::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; opacity: .04; }
  .gold-text--shine { animation: none; background-position: 50% 0; }
  .rv-mask { clip-path: none; transform: none; }
}

/* --- phones --------------------------------------------------------------
   Most of this site's traffic is a phone. Everything below is about thumbs
   and small text, not layout — the grids already collapse on their own. */

/* Every interactive thing clears a 44px target. */
.btn { min-height: 50px; }
.social { width: 48px; height: 48px; }
.nav__link { min-height: 44px; display: inline-flex; align-items: center; }
.svc__head { min-height: 60px; }

@media (max-width: 620px) {
  /* Side-by-side buttons squeeze to two illegible words each. Stack them. */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; justify-content: center; }

  /* Small copy gets a floor — 13px body text on a phone is unreadable. */
  .svc__list li,
  .card p,
  .step p,
  .post p,
  .footer__list,
  .footer__tag { font-size: .95rem; }
  .svc__desc { font-size: 1rem; }
  .client span, .work__cat { font-size: .68rem; }

  /* Three stats across 320px is a pile-up; two columns reads cleanly. */
  .hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }

  /* The ticker is decoration — at phone width it just needs to be calmer. */
  .marquee__track { animation-duration: 30s; }
  .marquee span, .marquee__track { gap: 1.6rem; }
  .marquee__track { padding-right: 1.6rem; }

  /* Accordion rows: keep the number, name and toggle from colliding. */
  .svc__head { gap: .7rem; }
  .svc__no { font-size: .68rem; min-width: 1.8ch; }

  .eyebrow { font-size: .68rem; letter-spacing: .22em; }
  .eyebrow::before { width: 20px; }

  .info__v { font-size: .98rem; }
  .footer__bar { font-size: .74rem; }
}

/* Landscape phones are short, not narrow — a 100svh hero would be all
   chrome and no content, so let it size to what it holds. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 2rem) 3rem; }
  .scroll-cue { display: none; }
}

/* --- no-JS fallback ------------------------------------------------------
   Nothing may depend on JS to become visible. If main.js never runs, the
   preloader must not exist and every animated-in element starts settled. */
html:not(.js) .preload,
html:not(.js) .cursor,
html:not(.js) .cursor-dot,
html:not(.js) .progress { display: none; }
html:not(.js) .rv { opacity: 1; transform: none; }
html:not(.js) .rv-mask { clip-path: none; transform: none; }
html:not(.js) .stat::after { transform: scaleX(1); }
html:not(.js) .hero__title .line > span { transform: none; }
html:not(.js) .vm__card::before { transform: scaleY(1); }
html:not(.js) .svc__panel { height: auto; }

/* --- 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;
  }
  .rv { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
  .marquee__track { animation: none; }
  .cursor, .cursor-dot { display: none; }
}