/* =========================================================
   Starlink Secure — warm editorial design system
   Palette: paper / clay / ink. Type: Newsreader + Inter + Mono
   ========================================================= */

:root{
  --paper:#FAF7F1;
  --paper-2:#F4EEE3;
  --card:#FFFDFA;
  --ink:#211E1A;
  --ink-2:#4C463F;
  --muted:#6E6659;
  --line:#E6DACA;
  --line-strong:#D6C4AC;
  --clay:#C05F3C;
  --clay-btn:#B0502C;
  --clay-btn-hover:#96401F;
  --clay-deep:#9B4526;
  --clay-soft:#F2E0D3;
  --apricot:#E7B18F;
  --band:#1F1C18;
  --band-ink:#F5EEE3;
  --band-muted:#B8AC9C;

  --font-display:"Newsreader", "Iowan Old Style", Georgia, "Songti SC", serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-display:clamp(2.55rem, 5vw, 4.15rem);
  --fs-h2:clamp(1.95rem, 3.5vw, 2.95rem);
  --fs-h3:clamp(1.15rem, 1.4vw, 1.35rem);
  --fs-lead:clamp(1.06rem, 1.3vw, 1.22rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;

  --pad-y:clamp(4.5rem, 8.5vw, 8rem);
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(45,32,20,.04), 0 8px 24px -18px rgba(45,32,20,.35);
  --shadow-md:0 2px 4px rgba(45,32,20,.05), 0 24px 48px -32px rgba(45,32,20,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* faint paper grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--clay-soft);color:var(--ink)}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.021em;
  line-height:1.06;
  margin:0;
}
p{margin:0}

.wrap{width:min(1240px, 100% - 3rem);margin-inline:auto;position:relative;z-index:1}
.wrap--narrow{width:min(980px, 100% - 3rem)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

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

/* ---------- type helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.625rem;
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--clay-deep);
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:currentColor;opacity:.55;
}
.eyebrow--plain::before{display:none}

.lead{
  font-size:var(--fs-lead);
  line-height:1.62;
  color:var(--ink-2);
  max-width:56ch;
}
.muted{color:var(--muted)}
.serif{font-family:var(--font-display)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.875rem 1.35rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{
  background:var(--clay-btn);color:#FFF9F4;
  box-shadow:0 1px 2px rgba(120,50,25,.18), 0 12px 24px -16px rgba(120,50,25,.8);
}
.btn--primary:hover{background:var(--clay-btn-hover);transform:translateY(-1px);box-shadow:0 2px 4px rgba(120,50,25,.2), 0 18px 32px -18px rgba(120,50,25,.9)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.6);transform:translateY(-1px)}
.btn--light{background:var(--band-ink);color:var(--band)}
.btn--light:hover{background:#fff;transform:translateY(-1px)}
.btn--sm{padding:.6rem 1rem;font-size:.875rem}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(250,247,241,.86);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
  box-shadow:0 12px 32px -32px rgba(45,32,20,.6);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:78px;
}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand__mark{width:34px;height:34px;flex-shrink:0}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{
  font-family:var(--font-display);
  font-size:1.115rem;
  letter-spacing:-.015em;
}
.brand__sub{
  font-family:var(--font-mono);
  font-size:.5625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:3px;
}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav__link{
  position:relative;
  font-size:.9375rem;
  color:var(--ink-2);
  padding:.35rem 0;
  transition:color .2s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--clay);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{transform:scaleX(1)}
.header-cta{display:flex;align-items:center;gap:.75rem}
.cta-label-short{display:none}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);
  border-radius:999px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:transform .3s var(--ease), opacity .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5.5rem);overflow:hidden}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
}
.hero__copy{max-width:36rem}
.hero h1{
  font-size:var(--fs-display);
  margin:1.35rem 0 1.4rem;
  line-height:1.02;
  letter-spacing:-.028em;
}
.hero h1 em{
  font-style:italic;
  color:var(--clay);
  font-weight:300;
}
.hero__lead{max-width:44ch;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.62}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}
.hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.15rem;
  margin-top:2.4rem;
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero__meta li{display:flex;align-items:center;gap:.5rem;list-style:none}
.hero__meta li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--apricot)}
.hero__meta li:first-child::before{background:var(--clay)}

.hero__visual{position:relative}
.hero__figure{
  position:relative;
  border-radius:clamp(16px,2vw,26px);
  overflow:hidden;
  background:var(--paper-2);
  box-shadow:var(--shadow-md);
  border:1px solid rgba(214,196,172,.5);
}
.hero__figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:62% 50%;
}
.hero__figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg, rgba(250,247,241,0) 45%, rgba(192,95,60,.10) 100%);
  pointer-events:none;
}
.hero__badge{
  position:absolute;left:-1.1rem;bottom:1.9rem;
  display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1.1rem;
  background:rgba(255,253,250,.93);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  font-size:.8125rem;
  max-width:15rem;
}
.hero__badge b{display:block;font-weight:500;font-size:.8125rem;letter-spacing:-.01em}
.hero__badge span{color:var(--muted);font-size:.75rem;line-height:1.4;display:block}
.pulse{width:9px;height:9px;border-radius:50%;background:#4C8C5A;position:relative;flex-shrink:0}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(76,140,90,.5);animation:pulse 2.6s infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ---------- capability strip ---------- */
.strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(244,238,227,.45);
}
.strip__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 2rem;
  padding:1.15rem 0;
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.strip__item{display:flex;align-items:center;gap:.55rem}
.strip__item svg{color:var(--clay);flex-shrink:0}
.strip__note{color:var(--muted);letter-spacing:.08em}

/* ---------- generic section ---------- */
.section{padding:var(--pad-y) 0;position:relative}
.section--tint{background:var(--paper-2)}
.section__head{max-width:46rem}
.section__head h2{font-size:var(--fs-h2);margin:1.1rem 0 1.25rem}
.section__head p{max-width:52ch;color:var(--ink-2)}
.section__head--split{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  max-width:none;
}
.section__head--split .aside{
  font-size:var(--fs-sm);
  color:var(--muted);
  border-left:1px solid var(--line-strong);
  padding-left:1.35rem;
}

/* ---------- gap / statement ---------- */
.statement{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.statement h2{
  font-size:clamp(1.85rem,3.1vw,2.65rem);
  line-height:1.12;
  letter-spacing:-.022em;
}
.statement h2 em{font-style:italic;color:var(--clay)}
.statement__body p + p{margin-top:1.1rem}
.statement__body{color:var(--ink-2);padding-top:.4rem}
.principles{
  display:grid;gap:0;margin-top:2.25rem;border-top:1px solid var(--line);
}
.principle{
  display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
}
.principle span{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;color:var(--clay-deep);padding-top:.28rem;
}
.principle b{font-weight:500;display:block;margin-bottom:.15rem}
.principle p{font-size:var(--fs-sm);color:var(--muted);line-height:1.55}

/* ---------- services ---------- */
.services__grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1.1rem;margin-top:clamp(2rem,4vw,3.25rem);
}
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.5rem,2.2vw,2rem);
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  overflow:hidden;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.card--wide{grid-column:span 3}
.card--third{grid-column:span 2}
.card--full{grid-column:span 6;flex-direction:row;align-items:center;gap:2rem;justify-content:space-between}
.card__num{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--clay-deep);
  display:flex;align-items:center;gap:.6rem;
}
.card__num::after{content:"";height:1px;width:26px;background:currentColor;opacity:.35}
.card h3{font-size:var(--fs-h3);margin:1.1rem 0 .6rem;letter-spacing:-.018em;line-height:1.22}
.card p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6}
.card__list{
  list-style:none;margin:1.15rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem;
}
.card__list li{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;
  padding:.32rem .55rem;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  background:rgba(250,247,241,.7);
}
.card__icon{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--clay-soft);color:var(--clay-deep);flex-shrink:0;
  border:1px solid rgba(192,95,60,.12);
}
.card--full h3{margin-top:0}
.card--full p{max-width:60ch}
.card__media{
  width:min(42%, 320px);
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
  flex-shrink:0;
}
#services, #approach, #security, #company, #faq, #contact, #why{scroll-margin-top:96px}

/* ---------- approach ---------- */
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin-top:clamp(2.25rem,4vw,3.5rem);
  border-top:1px solid var(--line-strong);
}
.step{
  padding:1.75rem 1.6rem 1.9rem 0;
  border-right:1px solid var(--line);
  position:relative;
}
.step:last-child{border-right:0;padding-right:0}
.step__num{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--clay-deep);
  display:block;margin-bottom:1.15rem;
}
.step h3{font-size:1.2rem;margin-bottom:.55rem}
.step p{font-size:var(--fs-sm);color:var(--muted);line-height:1.58;max-width:26ch}
.step dl{margin:1.1rem 0 0;font-size:.8125rem;display:grid;gap:.45rem}
.step dt{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-deep)}
.step dd{margin:0;color:var(--ink-2);line-height:1.45}
.step::before{
  content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--clay);
}
.step:first-child::before{background:var(--clay)}

/* ---------- dark band ---------- */
.band{
  background:var(--band);
  color:var(--band-ink);
  padding:var(--pad-y) 0;
  position:relative;
  overflow:hidden;
}
.band::before{
  content:"";position:absolute;right:-12%;top:-30%;width:56rem;height:56rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(192,95,60,.22) 0%, rgba(192,95,60,.06) 45%, rgba(31,28,24,0) 70%);
  pointer-events:none;
}
.band .eyebrow{color:#E5A987}
.band h2{font-size:var(--fs-h2);margin:1.1rem 0 1.25rem;max-width:22ch}
.band .lead{color:#CFC3B3}
.band__grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.band__list{display:grid;gap:0;margin-top:.35rem}
.band__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;
  padding:1.15rem 0;border-bottom:1px solid rgba(245,238,227,.14);
}
.band__item:first-child{border-top:1px solid rgba(245,238,227,.14)}
.band__item svg{color:#D98A63;margin-top:.15rem}
.band__item b{display:block;font-weight:500;font-size:1rem;letter-spacing:-.01em}
.band__item span{font-size:.875rem;color:var(--band-muted);line-height:1.55;display:block;margin-top:.15rem}
.band__facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin-top:2.75rem;padding-top:2rem;border-top:1px solid rgba(245,238,227,.14);
}
.band__fact b{
  display:block;font-family:var(--font-display);font-size:2.1rem;line-height:1;
  letter-spacing:-.02em;font-weight:400;color:#fff;
}
.band__fact span{
  display:block;margin-top:.45rem;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--band-muted);
}

/* ---------- about ---------- */
.about{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.about__media{position:relative}
.about__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
  border:1px solid rgba(214,196,172,.6);
}
.about__media::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);z-index:1;
  background:linear-gradient(180deg, rgba(20,16,12,0) 55%, rgba(20,16,12,.55) 100%);
  pointer-events:none;
}
.about__caption{
  position:absolute;z-index:2;left:1rem;bottom:1rem;right:1rem;
  display:flex;justify-content:space-between;align-items:end;gap:1rem;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.about__facts{
  margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem 2rem;
}
.about__facts div{border-top:1px solid var(--line);padding-top:.75rem}
.about__facts dt{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--clay-deep);
}
.about__facts dd{margin:.35rem 0 0;font-size:.9375rem;color:var(--ink-2);line-height:1.5}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq__list{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-size:1.0625rem;font-weight:500;letter-spacing:-.012em;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--clay-deep)}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.65rem;width:11px;height:11px;
  border-right:1.5px solid var(--clay);border-bottom:1.5px solid var(--clay);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{
  padding:0 3rem 1.5rem 0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.62;
  animation:fadeIn .35s var(--ease);
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- contact ---------- */
.contact{position:relative}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.contact__info{max-width:30rem}
.contact__row{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;
  padding:1.1rem 0;border-bottom:1px solid var(--line);
}
.contact__row:first-of-type{border-top:1px solid var(--line)}
.contact__row dt{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding-top:.3rem}
.contact__row dd{margin:0;font-size:.9375rem;line-height:1.55}
.contact__row a{border-bottom:1px solid var(--line-strong);transition:border-color .2s}
.contact__row a:hover{border-color:var(--clay)}

.form{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  box-shadow:var(--shadow-sm);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
.field label .req{color:var(--clay-deep)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.9375rem;
  padding:.78rem .9rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  width:100%;
}
.field textarea{resize:vertical;min-height:6.5rem}
.field input::placeholder,.field textarea::placeholder{color:#A79C8E}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--clay);background:#fff;
  box-shadow:0 0 0 3px rgba(192,95,60,.12);
}
.field.invalid input,.field.invalid textarea{border-color:#B4402B;background:#FDF3F0}
.field__error{font-size:.75rem;color:#A93A26;min-height:0;display:none}
.field.invalid .field__error{display:block}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem}
.form__note{font-size:.75rem;color:var(--muted);line-height:1.5;max-width:32ch}
.form__status{
  margin-top:1rem;font-size:.875rem;line-height:1.55;padding:.9rem 1rem;border-radius:10px;
  display:none;
}
.form__status.ok{display:flex;align-items:flex-start;gap:.6rem;background:#EEF4EA;border:1px solid #CBDCC0;color:#2F5427}
.form__status.err{display:flex;align-items:flex-start;gap:.6rem;background:#FBF0EC;border:1px solid #EBCFC3;color:#8E3A23}
.form__status.ok strong{font-weight:600}

/* sending state */
.spinner{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  border:1.6px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading{pointer-events:none;opacity:.92}
.form.is-sending .field input,.form.is-sending .field select,.form.is-sending .field textarea{opacity:.55;cursor:not-allowed}
.tick{width:18px;height:18px;flex-shrink:0;margin-top:.12rem;color:#3D6B32}
.tick__path{stroke-dasharray:22;stroke-dashoffset:22;animation:draw .45s .12s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .spinner{animation:none;border-top-color:rgba(255,255,255,.95)}
  .tick__path{animation:none;stroke-dashoffset:0}
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--paper-2);
  padding:clamp(3rem,5vw,4.5rem) 0 2rem;
}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.7fr));
  gap:clamp(1.75rem,4vw,3rem);
  padding-bottom:2.75rem;border-bottom:1px solid var(--line);
}
.footer__brand p{font-size:var(--fs-sm);color:var(--muted);max-width:30ch;margin-top:1rem;line-height:1.6}
.footer__col h4{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay-deep);margin-bottom:1rem;font-weight:500;
}
.footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer__col a{font-size:.9375rem;color:var(--ink-2);transition:color .2s}
.footer__col a:hover{color:var(--clay-deep)}
.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 2rem;
  padding-top:1.5rem;font-size:.75rem;color:var(--muted);
}
.footer__bottom nav{display:flex;gap:1.5rem}
.footer__bottom a:hover{color:var(--ink)}
.footer__legal{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;color:var(--muted)}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .pulse::after{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .header-inner{gap:1.25rem}
  .nav{gap:1.35rem}
  .cta-label{display:none}
  .cta-label-short{display:inline}
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__copy{max-width:none}
  .hero__figure img{aspect-ratio:16/10}
  .hero__badge{left:auto;right:1rem;bottom:1rem}
  .services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card--wide,.card--third{grid-column:span 1}
  .card--full{grid-column:span 2}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:1.5rem 0}
  .step:nth-child(odd){padding-right:1.5rem}
  .band__grid,.about,.faq,.contact__grid,.statement{grid-template-columns:1fr}
  .about__media{order:-1}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav,.header-cta .btn--ghost{display:none}
  .nav-toggle{display:flex}
  .header-cta .btn{padding:.6rem .95rem;font-size:.875rem}
  body.menu-open .nav{
    display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
    position:fixed;left:0;right:0;top:78px;
    background:var(--paper);
    padding:1.25rem 1.5rem 1.75rem;
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -32px rgba(45,32,20,.5);
    z-index:99;
  }
  body.menu-open .nav__link{font-size:1.05rem;padding:.7rem 0;width:100%;border-bottom:1px solid var(--line)}
  body.menu-open .nav__link::after{display:none}
  .section__head--split{grid-template-columns:1fr;align-items:start}
  .section__head--split .aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:.85rem}
}
@media (max-width:640px){
  :root{--fs-display:2.4rem}
  .wrap{width:min(1240px, 100% - 2rem)}
  .cta-label{display:none}
  .cta-label-short{display:inline}
  .header-inner{gap:.75rem}
  .header-cta{gap:.7rem}
  .header-cta .btn{padding:.55rem .9rem;font-size:.8125rem;min-height:44px}
  .header-cta .btn svg{display:none}
  .brand__sub{display:none}
  .brand__name{font-size:1.02rem}
  .services__grid{grid-template-columns:1fr}
  .card--full{grid-column:span 1;flex-direction:column;align-items:flex-start}
  .steps{grid-template-columns:1fr}
  .step{padding-right:0!important}
  .form__row{grid-template-columns:1fr}
  .band__facts{grid-template-columns:1fr 1fr}
  .about__facts{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .hero__meta{font-size:.625rem}
  .strip__inner{font-size:.625rem;justify-content:flex-start;gap:.6rem 1.25rem}
  .strip__note{width:100%}
  .contact__row{grid-template-columns:1fr;gap:.25rem}
}
