/* ============================================================
   Organica Communications Ltd — organica.nz

   Colour system is taken directly from the aperture mark: six
   blades, six hues. Full-strength values are used for graphics
   (bars, blades, dots); darkened variants carry text, so every
   hue clears WCAG AA on paper.
   ============================================================ */

:root{
  /* --- surfaces --- */
  --paper:      #FBFAF7;
  --surface:    #FFFFFF;
  --tint:       #F4F1EA;
  --tint-2:     #EDE8DE;
  --rule:       #E4DFD5;
  --rule-soft:  #EFEAE1;

  /* --- type --- */
  --ink:        #12100E;   /* 18.2:1 — matches the wordmark */
  --body:       #3D3833;   /* 11.1:1 */
  --muted:      #6E6862;   /*  5.3:1 */
  --faint:      #9A938C;   /*  2.9:1 — decorative only */

  /* --- the six blades, full strength (graphics) --- */
  --amber:      #F6AE2A;
  --orange:     #EA602A;
  --red:        #D83C36;
  --green:      #7EAE42;
  --teal:       #3090A2;
  --indigo:     #4848A2;

  /* --- darkened for text (all >= 4.6:1 on paper) --- */
  --amber-ink:  #9B6605;
  --orange-ink: #C84512;
  --red-ink:    #D72E28;
  --green-ink:  #597B2E;
  --teal-ink:   #287C8B;
  --indigo-ink: #4747A3;

  /* --- roles --- */
  --primary:      var(--orange);
  --primary-on:   #12100E;      /* 5.6:1 on orange */
  --link:         var(--indigo-ink);

  --shadow-sm: 0 1px 2px rgba(18,16,14,.05), 0 2px 8px rgba(18,16,14,.04);
  --shadow:    0 2px 4px rgba(18,16,14,.04), 0 12px 32px -12px rgba(18,16,14,.14);
  --shadow-lg: 0 4px 8px rgba(18,16,14,.05), 0 32px 64px -24px rgba(18,16,14,.20);

  --font-display: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --r: 6px;
  --r-lg: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  overflow-x:hidden;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--font-body);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.028em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h2{ font-size:clamp(1.9rem, 1.3rem + 2.5vw, 3.15rem); font-weight:800; }
h3{ font-size:clamp(1.12rem, 1.04rem + .45vw, 1.34rem); letter-spacing:-.018em; }
p{ margin:0 0 1.15em; text-wrap:pretty; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
strong{ color:var(--ink); font-weight:600; }

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

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

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

.skip-link{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--ink); color:#fff;
  padding:.7rem 1.1rem; border-radius:var(--r);
  font-weight:600; transition:top .2s var(--ease);
}
.skip-link:focus{ top:.75rem; }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-display);
  font-weight:600; font-size:.95rem; letter-spacing:-.005em;
  padding:.9rem 1.6rem;
  border-radius:var(--r);
  border:1.5px solid transparent;
  cursor:pointer; text-align:center;
  transition:transform .2s var(--ease), background .2s var(--ease),
             color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{ text-decoration:none; }
.btn--solid{
  background:var(--primary); color:var(--primary-on);
  box-shadow:0 2px 0 0 #B8410F;
}
.btn--solid:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 0 0 #B8410F, 0 14px 26px -14px rgba(234,96,42,.75);
  background:#F2723E;
}
.btn--solid:active{ transform:translateY(0); box-shadow:0 1px 0 0 #B8410F; }
.btn--ghost{
  border-color:var(--ink); color:var(--ink); background:transparent;
}
.btn--ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn--sm{ padding:.58rem 1.1rem; font-size:.875rem; }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ---------------- nav ---------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck{
  background:rgba(251,250,247,.88);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-bottom-color:var(--rule);
  box-shadow:0 1px 16px -8px rgba(18,16,14,.18);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:4.9rem; }

.brand{ display:flex; align-items:center; flex:none; }
.brand:hover{ text-decoration:none; }
.brand__lockup{ width:auto; height:38px; }

.nav__links{ display:flex; align-items:center; gap:.2rem; }
.nav__links a{
  color:var(--body); font-size:.9rem; font-weight:500;
  padding:.5rem .8rem; border-radius:var(--r);
  position:relative;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--ink); background:var(--tint); text-decoration:none; }
.nav__links .btn{ margin-left:.7rem; }
.nav__links .btn--solid{ color:var(--primary-on); }   /* beat the .nav__links a colour rule */

.nav__toggle{
  display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0;
}
.nav__toggle span{
  display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__drawer[hidden]{ display:none !important; }
@media (min-width:861px){ .nav__drawer{ display:none !important; } }
.nav__drawer{
  display:flex; flex-direction:column;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  box-shadow:var(--shadow);
  padding:.25rem var(--pad) 1.25rem;
}
.nav__drawer a{
  color:var(--ink); padding:.9rem .25rem; font-family:var(--font-display);
  font-weight:500; font-size:1.05rem; border-bottom:1px solid var(--rule-soft);
}
.nav__drawer a:hover{ text-decoration:none; color:var(--orange-ink); }
.nav__drawer a:last-child{ border-bottom:0; color:var(--orange-ink); font-weight:600; }

/* ---------------- hero ---------------- */
.hero{
  position:relative; isolation:isolate;
  padding:clamp(8rem, 7rem + 6vw, 11rem) 0 clamp(3.5rem, 3rem + 3vw, 5rem);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero__aperture{
  position:absolute;
  top:50%; right:-8vw; translate:0 -50%;
  width:min(52vw, 620px); height:auto;
  opacity:.13;
  animation:apertureIn 1.6s var(--ease) both, apertureSpin 90s linear 1.6s infinite;
}
@keyframes apertureIn{
  from{ opacity:0; transform:rotate(-24deg) scale(.9); }
  to  { opacity:.13; transform:rotate(0) scale(1); }
}
@keyframes apertureSpin{ to{ transform:rotate(360deg); } }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(90% 70% at 20% 40%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(90% 70% at 20% 40%, #000, transparent 72%);
  opacity:.85;
}

.hero__inner{ position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-size:.74rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule);
  box-shadow:var(--shadow-sm);
  padding:.45rem 1rem .45rem .7rem; border-radius:100px;
  margin:0 0 1.8rem;
}
.pip{
  width:8px; height:8px; border-radius:50%; background:var(--green); flex:none;
  box-shadow:0 0 0 0 rgba(126,174,66,.7);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(126,174,66,.7); }
  70%{ box-shadow:0 0 0 9px rgba(126,174,66,0); }
  100%{ box-shadow:0 0 0 0 rgba(126,174,66,0); }
}

.hero__title{
  font-size:clamp(2.2rem, 1.4rem + 3.6vw, 4.5rem);
  font-weight:800;
  line-height:1.09; letter-spacing:-.038em;
  margin:0 0 1.5rem; max-width:24ch;
}
.hero__title .line{ display:block; }
.hl{ position:relative; white-space:nowrap; color:var(--ink); }
.hl::after{
  content:""; position:absolute; left:-.05em; right:-.05em; top:.30em; bottom:.20em;
  background:var(--amber); border-radius:3px; z-index:-1;
  transform:scaleX(0); transform-origin:left;
  animation:swipe .85s var(--ease) .55s forwards;
}
@keyframes swipe{ to{ transform:scaleX(1); } }

.hero__lede{
  max-width:58ch; font-size:clamp(1.03rem, .98rem + .38vw, 1.24rem);
  color:var(--body); margin-bottom:2.1rem;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:3.5rem; }

.stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0; margin:0; max-width:880px;
  background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.stat{ padding:1.4rem 1.35rem 1.5rem; border-left:1px solid var(--rule); position:relative; }
.stat:first-child{ border-left:0; }
.stat::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--bar, var(--rule));
}
.stat:nth-child(1){ --bar:var(--amber); }
.stat:nth-child(2){ --bar:var(--orange); }
.stat:nth-child(3){ --bar:var(--teal); }
.stat:nth-child(4){ --bar:var(--indigo); }
.stat dt{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.3rem; font-weight:600;
}
.stat dd{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.75rem, 1.35rem + 1.5vw, 2.6rem);
  line-height:1; color:var(--ink); letter-spacing:-.035em;
}
.stat__plus{ color:var(--orange); }
.stat--zero{ color:var(--red-ink) !important; }

/* ---------------- marquee ---------------- */
.marquee{
  border-block:1px solid var(--rule);
  background:var(--tint);
  overflow:hidden; padding:1.1rem 0;
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track{ display:flex; width:max-content; animation:slide 62s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__set{ display:flex; align-items:center; gap:1.4rem; padding-right:1.4rem; }
.marquee__set span{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.92rem, .88rem + .28vw, 1.14rem);
  color:var(--muted); white-space:nowrap;
  transition:color .2s var(--ease);
}
.marquee__set span:hover{ color:var(--ink); }
.marquee__set i{
  font-style:normal; font-size:0; width:7px; height:7px; border-radius:50%; flex:none;
}
.marquee__set i:nth-of-type(6n+1){ background:var(--amber); }
.marquee__set i:nth-of-type(6n+2){ background:var(--orange); }
.marquee__set i:nth-of-type(6n+3){ background:var(--red); }
.marquee__set i:nth-of-type(6n+4){ background:var(--green); }
.marquee__set i:nth-of-type(6n+5){ background:var(--teal); }
.marquee__set i:nth-of-type(6n+6){ background:var(--indigo); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------------- sections ---------------- */
.section{ padding:clamp(4.25rem, 7vw, 7.5rem) 0; position:relative; }
.section--tint{ background:var(--tint); border-block:1px solid var(--rule); }

.section__kicker{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-display); font-size:.73rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  margin:0 0 1.1rem;
}
.rule{
  width:30px; height:8px; flex:none; border-radius:100px;
  background:linear-gradient(90deg, var(--amber) 0 16.6%, var(--orange) 16.6% 33.3%,
    var(--red) 33.3% 50%, var(--green) 50% 66.6%, var(--teal) 66.6% 83.3%, var(--indigo) 83.3%);
}

.section__head{ max-width:60ch; margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.section__sub{ color:var(--muted); font-size:clamp(1rem,.97rem+.25vw,1.12rem); margin:0; }

.grid-2{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
}

/* ---------------- about ---------------- */
.about__side{ position:sticky; top:7.5rem; }
.portrait__frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--rule);
  box-shadow:var(--shadow); aspect-ratio:5/6;
  display:grid; place-items:center; padding:2rem;
}
.portrait__frame::before{
  content:""; position:absolute; inset:auto 0 0 0; height:6px;
  background:linear-gradient(90deg, var(--amber) 0 16.6%, var(--orange) 16.6% 33.3%,
    var(--red) 33.3% 50%, var(--green) 50% 66.6%, var(--teal) 66.6% 83.3%, var(--indigo) 83.3%);
}
.portrait__mark{ width:64%; height:auto; opacity:.95; }
.portrait__cap{
  font-size:.8rem; color:var(--muted); margin:.9rem 0 0; line-height:1.5;
}
.portrait__cap strong{ display:block; color:var(--ink); font-weight:600; }

.about__body h2{ margin-top:-.12em; }
.lede{ font-size:clamp(1.04rem,1rem+.38vw,1.22rem); color:var(--ink); font-weight:400; }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:2rem 0 0; }
.chips li{
  font-family:var(--font-display); font-size:.8rem; font-weight:500;
  color:var(--body); background:var(--surface);
  border:1px solid var(--rule); border-radius:100px; padding:.4rem .95rem;
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.chips li:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }

/* ---------------- capability: six cards, six blades ---------------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px,100%),1fr)); gap:1.15rem; }
.card{
  --c: var(--rule);
  --c-ink: var(--ink);
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:1.9rem 1.7rem 1.75rem;
  box-shadow:var(--shadow-sm);
  transition:border-color .26s var(--ease), transform .26s var(--ease), box-shadow .26s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--c);
  transform-origin:left;
}
.card:hover{ transform:translateY(-4px); border-color:var(--c); box-shadow:var(--shadow); }
.card[data-blade="amber"]  { --c:var(--amber);  --c-ink:var(--amber-ink); }
.card[data-blade="orange"] { --c:var(--orange); --c-ink:var(--orange-ink); }
.card[data-blade="red"]    { --c:var(--red);    --c-ink:var(--red-ink); }
.card[data-blade="green"]  { --c:var(--green);  --c-ink:var(--green-ink); }
.card[data-blade="teal"]   { --c:var(--teal);   --c-ink:var(--teal-ink); }
.card[data-blade="indigo"] { --c:var(--indigo); --c-ink:var(--indigo-ink); }

.card__num{
  font-family:var(--font-display); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; color:var(--c-ink); display:block; margin-bottom:.85rem;
}
.card p{ color:var(--body); font-size:.945rem; }
.card ul{ list-style:none; padding:1.1rem 0 0; margin:1.25rem 0 0; border-top:1px solid var(--rule-soft); }
.card ul li{
  position:relative; padding-left:1.2rem; font-size:.865rem;
  color:var(--muted); margin-bottom:.42rem;
}
.card ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--c);
}

/* ---------------- clients ---------------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.chip-btn{
  font-family:var(--font-display); font-size:.8rem; font-weight:500;
  color:var(--body); background:var(--surface);
  border:1px solid var(--rule); border-radius:100px; padding:.45rem 1rem;
  cursor:pointer; transition:all .2s var(--ease);
}
.chip-btn:hover{ color:var(--ink); border-color:var(--ink); }
.chip-btn.is-active{
  background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:600;
}

.clients{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(290px,100%),1fr)); gap:1rem;
}
.client{
  --c: var(--rule); --c-ink: var(--muted);
  position:relative; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:1.5rem 1.4rem 1.45rem;
  box-shadow:var(--shadow-sm);
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.client::before{
  content:""; position:absolute; left:0; top:1.4rem; bottom:1.4rem; width:4px;
  border-radius:0 4px 4px 0; background:var(--c);
  transition:top .22s var(--ease), bottom .22s var(--ease);
}
.client:hover{ transform:translateY(-3px); border-color:var(--c); box-shadow:var(--shadow); }
.client:hover::before{ top:.6rem; bottom:.6rem; }
.client.is-hidden{ display:none; }
.client[data-blade="amber"]  { --c:var(--amber);  --c-ink:var(--amber-ink); }
.client[data-blade="orange"] { --c:var(--orange); --c-ink:var(--orange-ink); }
.client[data-blade="red"]    { --c:var(--red);    --c-ink:var(--red-ink); }
.client[data-blade="green"]  { --c:var(--green);  --c-ink:var(--green-ink); }
.client[data-blade="teal"]   { --c:var(--teal);   --c-ink:var(--teal-ink); }
.client[data-blade="indigo"] { --c:var(--indigo); --c-ink:var(--indigo-ink); }

.client__sector{
  font-family:var(--font-display); font-size:.65rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--c-ink);
  margin:0 0 .5rem;
}
.client__name{ font-size:1.1rem; margin:0 0 .5rem; letter-spacing:-.022em; }
.client__note{ font-size:.865rem; color:var(--muted); margin:0; line-height:1.6; }
.clients__foot{
  font-size:.78rem; color:var(--muted); margin:2rem 0 0; max-width:72ch;
  padding-top:1.25rem; border-top:1px solid var(--rule);
}

/* ---------------- engage ---------------- */
.steps{
  list-style:none; padding:0; margin:0 0 clamp(3rem,5vw,4.25rem);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(235px,100%),1fr)); gap:1.15rem;
}
.step{
  --c:var(--rule);
  position:relative; padding:1.75rem 1.5rem;
  border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-sm);
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.step:hover{ transform:translateY(-3px); border-color:var(--c); box-shadow:var(--shadow); }
.step:nth-child(1){ --c:var(--amber); }
.step:nth-child(2){ --c:var(--orange); }
.step:nth-child(3){ --c:var(--teal); }
.step:nth-child(4){ --c:var(--indigo); }
.step__n{
  display:grid; place-items:center; width:40px; height:40px;
  background:var(--c); border-radius:50%;
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  margin-bottom:1.05rem; font-size:.98rem;
}
.step:nth-child(4) .step__n{ color:#fff; }   /* indigo needs light text */
.step p{ color:var(--muted); font-size:.9rem; margin:0; }

.principles{
  border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-sm);
  padding:clamp(1.75rem,3vw,2.6rem);
  position:relative; overflow:hidden;
}
.principles::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--amber) 0 16.6%, var(--orange) 16.6% 33.3%,
    var(--red) 33.3% 50%, var(--green) 50% 66.6%, var(--teal) 66.6% 83.3%, var(--indigo) 83.3%);
}
.principles__title{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); margin:.25rem 0 1.5rem; font-weight:700;
}
.principles__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(265px,100%),1fr));
  gap:1.15rem 2.25rem;
}
.principles__grid p{ margin:0; color:var(--muted); font-size:.92rem; }
.principles__grid strong{
  color:var(--ink); display:block; font-family:var(--font-display); font-weight:600;
}

/* ---------------- contact ---------------- */
.grid-2--contact{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
.contact__intro .lede{ max-width:46ch; }
.contact__direct{ list-style:none; padding:0; margin:2rem 0 0; }
.contact__direct li{
  display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:baseline;
  padding:.85rem 0; border-top:1px solid var(--rule); font-size:.94rem; color:var(--body);
}
.contact__label{
  font-family:var(--font-display); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); min-width:5.5rem; font-weight:600;
}

.form{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.form::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--amber) 0 16.6%, var(--orange) 16.6% 33.3%,
    var(--red) 33.3% 50%, var(--green) 50% 66.6%, var(--teal) 66.6% 83.3%, var(--indigo) 83.3%);
}
.field{ margin-bottom:1.05rem; }
.field label{
  display:block; font-family:var(--font-display); font-size:.75rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink); margin-bottom:.42rem;
}
.req{ color:var(--red-ink); }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:.98rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule); border-radius:var(--r);
  padding:.78rem .9rem; transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ resize:vertical; min-height:8rem; line-height:1.6; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6862' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center;
  padding-right:2.4rem; cursor:pointer;
}
.field input:hover, .field textarea:hover, .field select:hover{ border-color:var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--indigo); background:var(--surface); outline:none;
  box-shadow:0 0 0 3px rgba(72,72,162,.14);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field.is-invalid input, .field.is-invalid textarea{ border-color:var(--red); background:#FEF6F5; }
.err{ color:var(--red-ink); font-size:.8rem; margin:.4rem 0 0; font-weight:500; }

/* honeypot — present in the DOM for bots, invisible and unreachable for people */
.hp{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.hp label, .hp input{
  width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none;
}

.spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(18,16,14,.25); border-top-color:var(--ink);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.form__status{ margin:1rem 0 0; font-size:.9rem; min-height:1.2em; font-weight:500; }
.form__status.is-ok{ color:var(--green-ink); }
.form__status.is-err{ color:var(--red-ink); }
.form__fine{ font-size:.78rem; color:var(--muted); margin:1rem 0 0; }

/* ---------------- footer ---------------- */
.footer{ background:var(--ink); color:#B9B3AC; padding:3.25rem 0 2.5rem; }
.footer__inner{ display:grid; gap:1.75rem; }
.footer__brand{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.footer__lockup{ height:40px; width:auto; }
.footer__brand span{ font-size:.83rem; color:#8E8880; max-width:44ch; }
.footer__links{ display:flex; flex-wrap:wrap; gap:.35rem 1.6rem; }
.footer__links a{ color:#B9B3AC; font-size:.88rem; transition:color .2s var(--ease); }
.footer__links a:hover{ color:#fff; }
.footer__copy{
  font-size:.78rem; color:#8D877F; margin:0;
  padding-top:1.5rem; border-top:1px solid #2A2724;
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center;
}
.footer__blades{ display:inline-flex; gap:4px; }
.footer__blades i{ width:7px; height:7px; border-radius:50%; }
.footer__blades i:nth-child(1){ background:var(--amber); }
.footer__blades i:nth-child(2){ background:var(--orange); }
.footer__blades i:nth-child(3){ background:var(--red); }
.footer__blades i:nth-child(4){ background:var(--green); }
.footer__blades i:nth-child(5){ background:var(--teal); }
.footer__blades i:nth-child(6){ background:var(--indigo); }

/* ---------------- reveal ---------------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .grid-2, .grid-2--contact{ grid-template-columns:1fr; }
  .about__side{ position:static; max-width:320px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--rule); }
  .hero__aperture{ opacity:.08; right:-22vw; width:min(80vw,560px); }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .brand__lockup{ height:34px; }
  .hero__title{ max-width:100%; }
  .hl{ white-space:normal; }
}
@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .stat{ border-left:0; }
  .stat:nth-child(n+2){ border-top:1px solid var(--rule); }
  .hero__cta .btn{ width:100%; }
  .footer__brand span{ font-size:.78rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hl::after{ transform:scaleX(1); }
  .hero__aperture{ opacity:.13; }
  .marquee__track{ animation:none; }
}

@media print{
  .nav,.marquee,.hero__bg,.form,.filters{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1; transform:none; }
  .footer{ background:#fff; color:#000; }
  a{ color:#000; }
}

/* ---------------- 404 ---------------- */
.oops{ min-height:100svh; display:grid; place-items:center; text-align:center; padding:3rem 0; }
.oops__mark{ width:80px; height:80px; margin:0 auto 2rem; }
.oops__code{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.05em;
  font-size:clamp(4.5rem,16vw,10rem); line-height:.9; margin:0 0 .35em;
  background:linear-gradient(100deg, var(--amber), var(--orange) 30%, var(--red) 50%, var(--indigo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.oops__body{ color:var(--muted); max-width:46ch; margin:0 auto 1.75em; }