/* ══ tokens ═══════════════════════════════════════════════ */
:root{
  --pine:#07211b;
  --pine-2:#0e3329;
  --pine-3:#123f32;
  --leaf:#79e36a;
  --carmine:#e0245e;
  --plum:#8b44c9;
  --saffron:#f5b93a;
  --linen:#f4efe2;
  --linen-2:#e8e0cd;
  --bark:#3c4a3f;

  --face:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --pad:clamp(20px,5vw,74px);
  --gap:clamp(72px,10vh,130px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--pine);
  color:var(--linen);
  font:400 clamp(15.5px,1.05vw,17.5px)/1.62 var(--face);
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dt,dd,ul{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--leaf);color:#06201a}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}

/* ══ language ═════════════════════════════════════════════ */
.lang{
  position:fixed;z-index:40;
  top:clamp(14px,2.2vw,28px);right:clamp(14px,2.2vw,28px);
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  background:rgba(7,33,27,.82);
  backdrop-filter:blur(8px);
  border:1px dashed rgba(121,227,106,.55);
}
.lang__dot{width:6px;height:6px;background:var(--carmine);transform:rotate(45deg)}
.lang__opt{
  appearance:none;border:0;background:none;cursor:pointer;
  padding:3px 1px;
  font:700 12px/1 var(--face);letter-spacing:.13em;
  color:#8fae9d;
  border-bottom:2px solid transparent;
  transition:color .28s ease,border-color .28s ease;
}
.lang__opt:hover{color:var(--linen)}
.lang__opt.is-on{color:var(--leaf);border-bottom-color:var(--leaf)}

/* ══ hero ═════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(96px,14vh,160px) var(--pad) clamp(88px,12vh,140px);
  background:
    radial-gradient(74% 60% at 76% 46%,#12473a 0%,#0b2c24 48%,var(--pine) 100%);
  overflow:hidden;
  isolation:isolate;
}
#loom{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
/* on narrow screens a scrim keeps the copy clear of the column */
@media (max-width:1000px){
  .hero::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(92deg,var(--pine) 0 44%,rgba(7,33,27,.72) 72%,rgba(7,33,27,0) 100%);
  }
}

.hero__inner{position:relative;z-index:1;max-width:min(720px,100%)}

.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:.79rem;letter-spacing:.05em;
  color:var(--leaf);
  margin-bottom:clamp(18px,2.6vh,28px);
  animation:in .85s .05s both cubic-bezier(.2,.8,.2,1);
}
.eyebrow::before{
  content:"";width:10px;height:10px;
  background:var(--carmine);
  transform:rotate(45deg);
  box-shadow:0 0 0 3px rgba(224,36,94,.22);
}

.title{
  font-size:clamp(2.5rem,9vw,6.2rem);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.038em;
  margin-bottom:clamp(24px,3.4vh,38px);
  background:linear-gradient(100deg,var(--linen) 6%,var(--leaf) 34%,var(--saffron) 58%,var(--carmine) 82%,var(--plum) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shimmer 15s ease-in-out infinite,in 1s .12s both cubic-bezier(.16,.9,.2,1);
}
@keyframes shimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

.lead{
  max-width:46ch;
  color:#c6d8cb;
  font-size:clamp(1rem,1.4vw,1.18rem);
  padding-left:clamp(14px,1.6vw,20px);
  border-left:2px dashed var(--carmine);
  animation:in .9s .5s both cubic-bezier(.2,.8,.2,1);
}
.marks{
  display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,28px);
  margin-top:clamp(24px,3.4vh,38px);
  animation:in .9s .68s both cubic-bezier(.2,.8,.2,1);
}
.marks li{display:inline-flex;align-items:center;gap:9px;font-size:.81rem;color:#dbe8dd}
.marks li::before{content:"";width:9px;height:9px;background:var(--leaf);transform:rotate(45deg)}
.marks li:nth-child(2)::before{background:var(--saffron)}
.marks li:nth-child(3)::before{background:var(--plum)}

.cue{
  position:absolute;z-index:1;
  left:var(--pad);bottom:clamp(20px,3vh,36px);
  font-size:.71rem;letter-spacing:.12em;color:#71917f;
  animation:in .9s .9s both ease;
}
.cue span::after{
  content:"";display:block;
  width:30px;height:2px;margin-top:9px;
  background:repeating-linear-gradient(90deg,var(--leaf) 0 5px,transparent 5px 10px);
  animation:sew 2.2s linear infinite;
}
@keyframes sew{to{background-position:20px 0}}
@keyframes in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}

/* ══ stitched band ════════════════════════════════════════ */
.band{
  position:relative;
  height:clamp(30px,4vw,52px);
  background:var(--pine);
  overflow:hidden;
}
.band i{
  position:absolute;inset:0;
  background-repeat:repeat-x;
  background-size:auto 100%;
  animation:travel 26s linear infinite;
}
/* zigzag seam with carmine diamonds caught in it */
.band i:nth-child(1){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 30 L15 13 L30 30 L45 13 L60 30 L75 13 L90 30 L105 13 L120 30' fill='none' stroke='%2379e36a' stroke-width='3.4' stroke-dasharray='9 5'/%3E%3Cpath d='M30 23 l7 7 -7 7 -7 -7 z' fill='%23e0245e'/%3E%3Cpath d='M90 23 l7 7 -7 7 -7 -7 z' fill='%23e0245e'/%3E%3C/svg%3E");
}
/* a second, finer thread running the other way */
.band i:nth-child(2){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40' viewBox='0 0 60 40'%3E%3Cpath d='M4 8 L12 8 M20 8 L28 8 M36 8 L44 8 M52 8 L60 8' stroke='%23f5b93a' stroke-width='3' stroke-linecap='square'/%3E%3Cpath d='M15 4 l4 4 -4 4 -4 -4 z' fill='%238b44c9'/%3E%3Cpath d='M45 4 l4 4 -4 4 -4 -4 z' fill='%238b44c9'/%3E%3C/svg%3E");
  animation-duration:17s;
  animation-direction:reverse;
  opacity:.85;
}
@keyframes travel{to{background-position:-240px 0}}
.band--flip{transform:scaleY(-1)}
.band--flip i:nth-child(1){animation-direction:reverse}
.band--flip i:nth-child(2){animation-direction:normal}

/* ══ sheet ════════════════════════════════════════════════ */
.sheet{
  background:linear-gradient(180deg,var(--linen),var(--linen-2) 98%);
  color:#14251c;
}
.hold{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.slab{padding-block:var(--gap)}
.slab + .slab{border-top:2px dashed rgba(20,37,28,.22)}

.h2{
  font-size:clamp(1.85rem,4.3vw,3.1rem);
  font-weight:800;line-height:1.04;
  letter-spacing:-.032em;
  max-width:20ch;
  text-wrap:balance;
  color:#10231a;
}
.slab:not(.slab--split) .h2{margin-bottom:clamp(26px,4vh,44px)}
.slab--split{display:grid;gap:clamp(26px,4vw,64px)}
@media (min-width:940px){
  .slab--split{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:start}
}
.prose{display:grid;gap:1.05em;max-width:50ch;color:#42533f}
.prose p:first-child::first-letter{
  float:left;
  font-size:3em;line-height:.84;font-weight:800;
  color:var(--carmine);
  padding:.04em .1em 0 0;
}

/* ══ stitched patches ═════════════════════════════════════ */
.weave{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px);
}
@media (max-width:920px){.weave{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.weave{grid-template-columns:1fr}}
.patch{
  position:relative;
  padding:clamp(24px,2.8vw,36px);
  background:rgba(255,255,255,.5);
  border:2px dashed rgba(20,37,28,.3);
  transition:border-color .35s ease,background .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);
}
/* the weave only appears where the pointer rests */
.patch::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;opacity:0;
  transition:opacity .4s ease;
  background:
    repeating-linear-gradient(45deg,rgba(121,227,106,.2) 0 3px,transparent 3px 9px),
    repeating-linear-gradient(-45deg,rgba(224,36,94,.14) 0 3px,transparent 3px 9px);
}
.patch:hover{
  border-color:var(--carmine);
  background:rgba(255,255,255,.86);
  transform:translateY(-3px);
}
.patch:hover::after{opacity:1}
.patch__rhomb{
  position:relative;z-index:2;
  display:block;width:16px;height:16px;
  margin-bottom:clamp(16px,2vw,22px);
  background:var(--leaf);
  transform:rotate(45deg);
  box-shadow:0 0 0 3px rgba(121,227,106,.24);
  transition:background .35s ease,box-shadow .35s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.patch:nth-child(3n-1) .patch__rhomb{background:var(--plum);box-shadow:0 0 0 3px rgba(139,68,201,.22)}
.patch:nth-child(3n) .patch__rhomb{background:var(--saffron);box-shadow:0 0 0 3px rgba(245,185,58,.26)}
.patch:hover .patch__rhomb{transform:rotate(135deg) scale(1.08)}
.patch h3{
  position:relative;z-index:2;
  font-size:clamp(1.04rem,1.55vw,1.22rem);
  font-weight:700;letter-spacing:-.014em;
  margin-bottom:9px;color:#10231a;
}
.patch p{position:relative;z-index:2;color:#4a5a47;font-size:.94rem}

/* ══ the column as a spine ════════════════════════════════ */
.stack{display:grid;gap:clamp(20px,3vw,44px)}
@media (min-width:820px){
  .stack{grid-template-columns:96px minmax(0,1fr);align-items:stretch}
}
.stack__spine{display:none}
@media (min-width:820px){
  .stack__spine{
    display:grid;
    grid-template-rows:repeat(4,1fr);
    justify-items:center;
    gap:0;                       /* the modules meet, as they do in the column */
  }
  /* each module: two trapezoids meeting at the widest line, after Brâncuși */
  .stack__spine span{
    position:relative;
    width:72px;
    align-self:stretch;
    clip-path:polygon(28% 0,72% 0,100% 50%,72% 100%,28% 100%,0 50%);
    background:linear-gradient(160deg,var(--leaf),#3bb46d 46%,#1f7a57);
    box-shadow:inset 0 0 0 1px rgba(7,33,27,.25);
  }
  .stack__spine span:nth-child(2){background:linear-gradient(160deg,var(--saffron),#e08a2a 46%,#a85f16)}
  .stack__spine span:nth-child(3){background:linear-gradient(160deg,var(--carmine),#a8164a 46%,#6f0d32)}
  .stack__spine span:nth-child(4){background:linear-gradient(160deg,var(--plum),#5f2b8c 46%,#3d1a5c)}
}
.stack__rows{display:grid;grid-template-rows:repeat(4,1fr)}
.module{
  display:grid;gap:5px clamp(22px,4vw,52px);
  padding-block:clamp(18px,2.4vh,26px);
  border-top:2px dashed rgba(20,37,28,.2);
  align-content:center;
}
.module:first-child{border-top:0}
@media (min-width:860px){
  .module{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);align-items:baseline}
}
.module h3{font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:700;color:#10231a}
.module p{color:#4a5a47;font-size:.95rem;max-width:58ch}

/* ══ contact ══════════════════════════════════════════════ */
.closing{background:var(--pine);padding-block:clamp(54px,8vh,100px)}
.linen{
  position:relative;
  padding:clamp(26px,4vw,54px);
  background:var(--linen);
  color:#12241b;
  border:3px double var(--pine-3);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.8);
}
.linen::before{
  content:"";
  position:absolute;inset:9px;
  border:2px dashed rgba(224,36,94,.45);
  pointer-events:none;
}
.linen__h{
  position:relative;z-index:2;
  font-size:clamp(1.5rem,3.2vw,2.3rem);
  font-weight:800;letter-spacing:-.03em;
  margin-bottom:6px;
}
.linen__entity{
  position:relative;z-index:2;
  color:#9a1240;font-weight:700;letter-spacing:.015em;
  margin-bottom:clamp(20px,3vw,32px);
}
.contact{
  position:relative;z-index:2;
  display:grid;gap:2px;
  background:rgba(18,63,50,.25);
  border:2px solid var(--pine-3);
}
@media (min-width:620px){
  .contact{grid-template-columns:1fr 1fr}
  /* the full address takes its own row and stays on one line */
  .contact__row:first-child{grid-column:span 2}
}
.contact__row{padding:clamp(14px,1.6vw,20px);background:var(--linen)}
.contact dt{font-size:.72rem;letter-spacing:.06em;color:#5f7263;margin-bottom:6px}
.contact dd{
  margin:0;font-size:1rem;font-weight:500;color:#12241b;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

/* ══ foot ═════════════════════════════════════════════════ */
.foot{
  background:var(--pine);color:#6e8d7c;
  font-size:.76rem;text-align:center;
  padding:20px var(--pad) 28px;
  border-top:2px dashed rgba(121,227,106,.22);
}

/* ══ reveal + motion prefs ════════════════════════════════ */
.reveal{opacity:0;transform:translateY(13px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .eyebrow,.title,.lead,.marks,.cue,.cue span::after,.band svg{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .patch,.patch__rhomb{transition:none}
}