/* ==========================================================================
   NEVERMORE SP. Z O.O. — Corporate design system
   Palette and typography derived from the Nevermore Brand Sheet.
   Ink #12100E · Terracotta #B4522E (accent, max ~10% of surface) · Cream #F3EDE4
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --ink:#12100E;
  --ink-90:#1c1916;
  --ink-80:#2a2622;
  --ink-70:#3d3831;
  --terracotta:#B4522E;
  --terracotta-dark:#8f3f22;
  --terracotta-light:#c9714f;
  --cream:#F3EDE4;
  --cream-2:#EDE5D9;
  --cream-3:#E2D8C8;
  --paper:#FBF8F3;

  --rule:rgba(18,16,14,.14);
  --rule-strong:rgba(18,16,14,.26);
  --rule-inv:rgba(243,237,228,.18);
  --muted:rgba(18,16,14,.62);
  --muted-inv:rgba(243,237,228,.66);

  --serif:"Source Serif 4","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1220px;
  --wrap-narrow:820px;
  --gutter:clamp(20px,5vw,64px);
  --sp-section:clamp(72px,9vw,140px);

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

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
hr{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- 3. Typography ------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;line-height:1.12;letter-spacing:-.012em}
h1{font-size:clamp(2.5rem,5.6vw,4.35rem);line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.25}
h4{font-size:1.02rem;line-height:1.3}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.08rem,1.55vw,1.32rem);line-height:1.6;color:var(--muted);max-width:62ch}
.lede--inv{color:var(--muted-inv)}
small,.small{font-size:.86rem;line-height:1.55}

/* Eyebrow / descriptor style — mirrors the logo descriptor (tracking .28em) */
.eyebrow{
  font-family:var(--sans);font-size:.685rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.28em;color:var(--terracotta);
  margin:0 0 1.1rem;display:block;
}
.eyebrow--muted{color:var(--muted)}
.eyebrow--inv{color:var(--terracotta-light)}

.sec-num{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  color:var(--terracotta);text-transform:uppercase;
}

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:clamp(48px,6vw,84px)}
.section--ink{background:var(--ink);color:var(--cream)}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--cream)}
.section--paper{background:var(--paper)}
.section--cream2{background:var(--cream-2)}
.section--rule{border-top:1px solid var(--rule)}

.grid{display:grid;gap:clamp(24px,3vw,44px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,5vw,80px);align-items:start}
.split--even{grid-template-columns:1fr 1fr}
@media (max-width:900px){.g-3,.g-4,.split,.split--even{grid-template-columns:1fr}
  .g-2{grid-template-columns:1fr}}
@media (min-width:901px) and (max-width:1080px){.g-4{grid-template-columns:repeat(2,1fr)}}

.stack>*+*{margin-top:1rem}
.section-head{max-width:74ch;margin-bottom:clamp(34px,4vw,60px)}
.section-head .lede{margin-top:1rem}

/* ---------- 5. Header ---------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:.7rem 1.1rem;z-index:200}
.skip:focus{left:8px;top:8px}

.site-header{
  position:sticky;top:0;z-index:100;background:rgba(243,237,228,.92);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--rule);
}
/* Header sizing note.
   The desktop nav is 7 links + a CTA button + the language switch. Measured at
   the previous metrics it needed ~1070px of its own, plus the logo, so it
   overflowed everywhere between the old 1120px breakpoint and ~1430px — which
   is exactly the width range every laptop sits in. Two changes fix it:
   the per-item cost is reduced and made fluid, and the breakpoint is raised to
   1300px so the horizontal nav only ever renders where it demonstrably fits
   (measured need at 1301px is ~1120px against ~1173px available).
   --nav-h gives links, button and language switch one shared height, so they
   align on a single optical line instead of three different ones. */
.header-inner{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);min-height:82px}
/* flex:0 1 auto + min-width:0 is the safety valve. If a longer nav label is
   ever added, or a font falls back to something wider than Inter, the logo
   scales down a few pixels instead of the nav overflowing the header. */
.brand{display:flex;align-items:center;flex:0 1 auto;min-width:0;text-decoration:none}
.brand img{width:clamp(196px,16vw,236px);max-width:100%;height:auto}
@media (max-width:520px){.brand img{width:172px}}

.nav{--nav-h:2.5rem;margin-left:auto;display:flex;align-items:center;gap:0;flex:0 0 auto}
.nav a{
  text-decoration:none;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-70);
  display:inline-flex;align-items:center;height:var(--nav-h);
  padding:0 clamp(.4rem,.65vw,.72rem);
  border-bottom:2px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);
  white-space:nowrap;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--terracotta)}

.has-sub{position:relative;display:inline-flex;align-items:center}
.subnav{
  position:absolute;top:100%;left:0;min-width:250px;background:var(--paper);
  border:1px solid var(--rule);padding:.4rem;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.2s var(--ease);box-shadow:0 18px 44px -28px rgba(18,16,14,.5);
  z-index:10;
}
/* Any dropdown after the first sits close to the right edge of the header.
   Anchor it to its own right edge so it can never spill outside the page,
   however long the menu labels become. */
.nav > .has-sub ~ .has-sub .subnav{left:auto;right:0}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.nav .subnav a{display:block;height:auto;padding:.6rem .8rem;border-bottom:0}
.subnav a:hover{background:var(--cream-2)}

.nav-cta{margin-left:clamp(.4rem,.8vw,.75rem)}
/* The CTA is a .btn, so it does not inherit .nav a. Match the shared height
   explicitly, otherwise it sits a few pixels off the links beside it. */
.nav a.nav-cta{height:var(--nav-h);padding:0 clamp(.85rem,1.2vw,1.15rem);border-bottom:0}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule-strong);
  padding:.55rem .8rem;cursor:pointer;font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink);
}
.lang{
  display:inline-flex;gap:.3rem;align-items:center;height:var(--nav-h);
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-left:clamp(.45rem,.75vw,.8rem);
  padding-left:clamp(.45rem,.75vw,.8rem);border-left:1px solid var(--rule);flex:0 0 auto;
}
/* Raised specificity on purpose: .lang a and .nav a have equal weight, so the
   language links were picking up the nav font-size, padding and 2px border and
   breaking out of the header line. */
.nav .lang a{
  font-size:.7rem;letter-spacing:.1em;height:auto;padding:.15rem .1rem;
  border-bottom:0;white-space:nowrap;
}
.nav .lang a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--terracotta)}

@media (max-width:1300px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:82px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:1rem var(--gutter) 2rem;
    max-height:calc(100dvh - 82px);overflow:auto;display:none;
  }
  .nav.is-open{display:flex}
  .nav a{height:auto;padding:.95rem 0;border-bottom:1px solid var(--rule);font-size:.78rem}
  .nav a[aria-current="page"]{border-bottom-color:var(--rule)}
  .has-sub{display:block}
  .subnav{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;background:transparent;padding:0 0 0 1rem}
  .nav .subnav a{padding:.8rem 0}
  .nav a.nav-cta{height:auto;margin:1.4rem 0 0;padding:1rem 1.6rem;justify-content:center}
  .lang{height:auto;margin:1.4rem 0 0;padding:0;border-left:0}
}

/* ---------- 6. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;cursor:pointer;
  font-size:.775rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  padding:1.02rem 1.6rem;border:1px solid transparent;background:var(--terracotta);color:#fff;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{background:var(--terracotta-dark);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn--ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--ghost-inv{background:transparent;color:var(--cream);border-color:var(--rule-inv)}
.btn--ghost-inv:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--sm{padding:.72rem 1.05rem;font-size:.7rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.775rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--terracotta);border-bottom:1px solid transparent;padding-bottom:2px;
}
.link-arrow::after{content:"→";transition:transform .2s var(--ease)}
.link-arrow:hover{border-bottom-color:var(--terracotta)}
.link-arrow:hover::after{transform:translateX(4px)}
.link-arrow--inv{color:var(--terracotta-light)}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--terracotta);outline-offset:3px;border-radius:1px;
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero{position:relative;background:var(--ink);color:var(--cream);overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background:
    radial-gradient(115% 85% at 88% 8%,rgba(180,82,46,.30),transparent 58%),
    radial-gradient(90% 70% at 8% 100%,rgba(243,237,228,.10),transparent 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-inner{padding-block:clamp(88px,13vw,178px)}
.hero h1{max-width:19ch}
.hero .lede{margin-top:1.6rem;color:var(--muted-inv);max-width:56ch}
.hero-rule{width:76px;height:2px;background:var(--terracotta);margin:0 0 1.6rem}

.hero-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--rule-inv);margin-top:clamp(48px,7vw,84px);
}
.hero-facts div{padding:1.6rem 1.4rem 0 0}
.hero-facts dt{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--terracotta-light);margin-bottom:.5rem}
.hero-facts dd{margin:0;font-family:var(--serif);font-size:1.06rem;line-height:1.35;color:var(--cream)}
@media (max-width:820px){.hero-facts{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.hero-facts{grid-template-columns:1fr}}

.page-hero{background:var(--ink);color:var(--cream);position:relative;isolation:isolate;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.42;
  background:radial-gradient(100% 80% at 92% 0%,rgba(180,82,46,.28),transparent 60%);
}
.page-hero-inner{padding-block:clamp(64px,9vw,120px)}
.page-hero h1{max-width:20ch}
.page-hero .lede{margin-top:1.4rem;color:var(--muted-inv)}

/* ---------- 8. Breadcrumb ------------------------------------------------ */
.crumb{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-inv);margin-bottom:1.4rem}
.crumb a{text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{border-bottom-color:var(--terracotta-light)}
.crumb span{opacity:.55;padding:0 .5rem}

/* ---------- 9. Cards ----------------------------------------------------- */
.card{
  background:var(--paper);border:1px solid var(--rule);padding:clamp(24px,2.6vw,34px);
  display:flex;flex-direction:column;transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.card:hover{border-color:var(--rule-strong)}
a.card{text-decoration:none}
a.card:hover{transform:translateY(-3px)}
.card h3{margin-bottom:.7rem}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.card .link-arrow{margin-top:auto}
.card--ink{background:var(--ink-90);border-color:var(--rule-inv);color:var(--cream)}
.card--ink p{color:var(--muted-inv)}

.numbered{border-top:1px solid var(--rule);padding-top:1.5rem}
.numbered .sec-num{display:block;margin-bottom:1rem}
.numbered h3{margin-bottom:.6rem}
.numbered p{color:var(--muted);font-size:.95rem;margin:0}
.section--ink .numbered{border-top-color:var(--rule-inv)}
.section--ink .numbered p{color:var(--muted-inv)}

/* ---------- 10. Chain / process ------------------------------------------ */
.chain{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule-inv);border:1px solid var(--rule-inv)}
.chain li{list-style:none;background:var(--ink);padding:1.5rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.chain .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--terracotta-light)}
.chain .t{font-family:var(--serif);font-size:1.02rem;line-height:1.25}
.chain .d{font-size:.83rem;color:var(--muted-inv);line-height:1.5}
@media (max-width:1000px){.chain{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.chain{grid-template-columns:1fr}}

.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;border-top:1px solid var(--rule);padding:1.7rem 0 1.7rem 4.2rem;position:relative;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.75rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--terracotta);
}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps h3{margin-bottom:.45rem}
.steps p{color:var(--muted);margin:0;font-size:.96rem;max-width:70ch}

/* ---------- 11. Definition / spec tables --------------------------------- */
.dl{border-top:1px solid var(--rule);margin:0}
.dl div{display:grid;grid-template-columns:minmax(180px,.42fr) 1fr;gap:1.5rem;
  padding:1.05rem 0;border-bottom:1px solid var(--rule)}
.dl dt{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0}
.dl dd{margin:0;font-size:.98rem}
@media (max-width:640px){.dl div{grid-template-columns:1fr;gap:.35rem}}
.section--ink .dl,.section--ink .dl div{border-color:var(--rule-inv)}
.section--ink .dl dt{color:var(--terracotta-light)}

.spec-table{width:100%;border-collapse:collapse;font-size:.94rem}
.spec-table caption{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);padding-bottom:.9rem}
.spec-table th,.spec-table td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
.spec-table thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--rule-strong)}
.spec-table tbody th{font-weight:600;font-family:var(--serif);font-size:1rem}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 12. Ticks / lists -------------------------------------------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:.97rem;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--terracotta)}
.section--ink .ticks li{color:var(--muted-inv)}
.ticks--2{grid-template-columns:1fr 1fr;gap:.85rem 2.4rem}
@media (max-width:700px){.ticks--2{grid-template-columns:1fr}}

.prose{max-width:72ch}
.prose h2{margin:2.6rem 0 1rem}
.prose h3{margin:2rem 0 .7rem}
.prose ul,.prose ol{padding-left:1.15rem;margin:0 0 1.2rem}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--terracotta);text-underline-offset:3px}

/* ---------- 13. Figures (photography placeholders) ----------------------- */
.figure{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink);
  display:flex;align-items:flex-end;isolation:isolate;
}
.figure::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#241d17 0%,#3a2a1d 45%,#6d3a22 100%);
}
.figure::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}
.figure figcaption{
  padding:1rem 1.2rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(243,237,228,.72);width:100%;background:linear-gradient(transparent,rgba(18,16,14,.7));
}
.figure--tall{aspect-ratio:3/4}
.figure--wide{aspect-ratio:16/9}
.figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}

/* ---------- 13b. Illustrations ------------------------------------------ */
/* Original vector artwork (build/make_illustrations.py). Strokes inherit
   colour, so one file works on cream and on ink. */
.ill{display:flex;align-items:center;justify-content:center;color:var(--ink)}
.ill svg{width:100%;height:auto;display:block}
.section--ink .ill,.ill--inv{color:var(--cream)}

.pcard{
  background:var(--paper);border:1px solid var(--rule);display:flex;flex-direction:column;
  text-decoration:none;transition:border-color .25s var(--ease),transform .25s var(--ease);
}
a.pcard:hover{transform:translateY(-3px)}
.pcard:hover{border-color:var(--rule-strong)}
.pcard .ill{background:var(--cream-2);border-bottom:1px solid var(--rule);padding:26px 26px 22px}
.pcard .ill svg{width:88px;height:88px}
.pcard .pbody{padding:24px clamp(20px,2.2vw,28px) clamp(24px,2.4vw,30px);display:flex;
  flex-direction:column;flex:1}
.pcard h3{margin-bottom:.55rem}
.pcard p{color:var(--muted);font-size:.93rem;margin:0 0 1rem}
.pcard .origin{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.17em;
  color:var(--terracotta);margin-bottom:.9rem;display:block}
.pcard .link-arrow{margin-top:auto}
.section--ink .pcard{background:var(--ink-90);border-color:var(--rule-inv);color:var(--cream)}
.section--ink .pcard .ill{background:rgba(243,237,228,.045);border-bottom-color:var(--rule-inv)}
.section--ink .pcard p{color:var(--muted-inv)}
.section--ink .pcard .origin{color:var(--terracotta-light)}

.ill-feature{
  background:var(--cream-2);border:1px solid var(--rule);
  padding:clamp(28px,4vw,54px);display:flex;align-items:center;justify-content:center;
}
.ill-feature svg{width:100%;max-width:270px;height:auto}
.section--ink .ill-feature{background:rgba(243,237,228,.045);border-color:var(--rule-inv)}

.ill-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.section--ink .ill-band{background:var(--rule-inv)}
.ill-band>div{background:var(--paper);padding:clamp(24px,3vw,38px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1rem}
.section--ink .ill-band>div{background:var(--ink)}
.ill-band svg{width:104px;height:104px}
.ill-band .t{font-family:var(--serif);font-size:1.05rem;line-height:1.25}
.ill-band .d{font-size:.83rem;color:var(--muted);line-height:1.5}
.section--ink .ill-band .d{color:var(--muted-inv)}
@media (max-width:900px){.ill-band{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.ill-band{grid-template-columns:1fr}}

/* ---------- 14. Callouts ------------------------------------------------- */
.callout{border-left:2px solid var(--terracotta);padding:.4rem 0 .4rem 1.4rem;margin:2rem 0;color:var(--muted)}
.callout strong{color:var(--ink)}
.section--ink .callout strong{color:var(--cream)}
.section--ink .callout{color:var(--muted-inv)}

.notice{
  background:var(--cream-2);border:1px solid var(--rule);padding:1.3rem 1.5rem;
  font-size:.9rem;color:var(--muted);
}
.notice strong{color:var(--ink);display:block;margin-bottom:.35rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em}

.quote{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.3;max-width:24ch;margin:0}

/* ---------- 15. CTA band ------------------------------------------------- */
.cta-band{background:var(--ink);color:var(--cream);position:relative;isolation:isolate;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(80% 120% at 100% 0%,rgba(180,82,46,.32),transparent 62%)}
.cta-band .wrap{padding-block:clamp(60px,7vw,104px);display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,64px);align-items:end}
@media (max-width:860px){.cta-band .wrap{grid-template-columns:1fr}}
.cta-band h2{max-width:18ch}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.duo>*{background:var(--paper);padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column}
@media (max-width:820px){.duo{grid-template-columns:1fr}}

/* ---------- 16. Forms ---------------------------------------------------- */
.form{display:grid;gap:1.25rem;grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
@media (max-width:700px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.field label .req{color:var(--terracotta)}
/* Text-like controls only. Radios and checkboxes must be excluded or they
   inherit the full-width padded box and render as broken grey rectangles. */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select,.field textarea{
  font:inherit;font-size:.98rem;padding:.85rem .95rem;background:var(--paper);
  border:1px solid var(--rule-strong);color:var(--ink);border-radius:0;width:100%;
  transition:border-color .2s var(--ease);
}
.field input:not([type="radio"]):not([type="checkbox"]):focus,
.field select:focus,.field textarea:focus{border-color:var(--terracotta);outline:none}
.field textarea{min-height:150px;resize:vertical}
.field .hint{font-size:.78rem;color:var(--muted)}

/* Segmented choice control — buyer / supplier / partner */
.radio-row{display:flex;flex-wrap:wrap;gap:.6rem;padding-top:.55rem}
.choice{position:relative;display:inline-flex;margin:0}
.choice input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.choice span{
  display:inline-flex;align-items:center;gap:.6rem;padding:.72rem 1.1rem;
  border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);
  font-size:.92rem;font-weight:500;line-height:1.2;text-transform:none;letter-spacing:0;
  cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.choice span::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--rule-strong);background:transparent;transition:.18s var(--ease);
}
.choice:hover span{border-color:var(--ink)}
.choice input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.choice input:checked+span::before{background:var(--terracotta);border-color:var(--terracotta)}
.choice input:focus-visible+span{outline:2px solid var(--terracotta);outline-offset:3px}
@media (max-width:520px){.radio-row{flex-direction:column;align-items:stretch}
  .choice,.choice span{width:100%}}

.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.86rem;color:var(--muted)}
.consent input[type="checkbox"]{
  flex:0 0 auto;width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--terracotta);cursor:pointer;
}
.form-status{font-size:.9rem;padding:.9rem 1.1rem;border-left:2px solid var(--terracotta);background:var(--cream-2);display:none}
.form-status.is-visible{display:block}

/* ---------- 17. Insights ------------------------------------------------- */
.article-list{border-top:1px solid var(--rule)}
.article-list a{
  display:grid;grid-template-columns:170px 1fr auto;gap:2rem;align-items:baseline;
  padding:1.8rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:padding-left .25s var(--ease);
}
.article-list a:hover{padding-left:.6rem}
.article-list .meta{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.article-list h3{font-size:1.24rem}
@media (max-width:820px){.article-list a{grid-template-columns:1fr;gap:.6rem}}

.article-head{max-width:72ch}
.article-meta{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-inv);margin-top:1.4rem}

/* ---------- 18. Footer --------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--cream);padding-block:clamp(56px,6vw,88px) 0}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,3.4vw,52px);padding-bottom:clamp(40px,5vw,64px)}
@media (max-width:960px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-brand img{width:250px;margin-bottom:1.3rem}
.footer-brand p{color:var(--muted-inv);font-size:.92rem;max-width:36ch}
.footer-col h4{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  color:var(--terracotta-light);font-family:var(--sans);margin-bottom:1.1rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.footer-col a{text-decoration:none;font-size:.92rem;color:var(--muted-inv);transition:color .2s var(--ease)}
.footer-col a:hover{color:var(--cream)}
.footer-legal{
  border-top:1px solid var(--rule-inv);padding-block:1.6rem 2.2rem;display:flex;flex-wrap:wrap;
  gap:.5rem 1.6rem;align-items:center;font-size:.78rem;color:var(--muted-inv);
}
.footer-legal a{text-decoration:none;color:var(--muted-inv)}
.footer-legal a:hover{color:var(--cream)}
.footer-legal .sep{margin-left:auto}
.company-line{font-size:.78rem;color:var(--muted-inv);line-height:1.7;margin-top:1.4rem}

/* ---------- 19. Utilities ------------------------------------------------ */
.tag{display:inline-block;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  border:1px solid var(--rule-strong);padding:.35rem .6rem;color:var(--muted);margin:0 .4rem .4rem 0}
.section--ink .tag{border-color:var(--rule-inv);color:var(--muted-inv)}
/* Unconfirmed data awaiting management sign-off. Remove class when filled. */
.tbc{background:rgba(180,82,46,.15);color:var(--terracotta-dark);padding:.06em .42em;
  font-family:var(--mono);font-size:.86em;white-space:nowrap}
.section--ink .tbc,.site-footer .tbc,.hero .tbc{background:rgba(201,113,79,.22);color:#e6b7a3}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 20. Print ---------------------------------------------------- */
@media print{
  .site-header,.nav,.cta-band,.btn,.nav-toggle{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:18pt}
  .section--ink,.hero,.page-hero,.site-footer{background:#fff!important;color:#000!important}
}