/* ============================================================================
   FONTS — self-hosted, same origin.
   Previously these came from fonts.googleapis.com, which put a render-blocking
   request to a third-party origin ahead of first paint: the browser had to do
   DNS, TLS and a round trip to Google before it could draw anything, then a
   second connection to fonts.gstatic.com for the files themselves. On mobile
   that alone accounted for roughly two seconds of a 3.1s first paint.
   Serving them from our own origin removes both connections.

   Both are variable fonts, so one file per family covers every weight we use
   (Cinzel 400-900, Josefin Sans 300-700). Latin subset only — the site is
   English, and "Malé" sits inside Latin-1.

   Cinzel and Josefin Sans are both licensed under the SIL Open Font License,
   which expressly permits redistribution this way.
   ============================================================================ */
@font-face{
  font-family:'Cinzel';
  font-style:normal;
  font-weight:400 900;          /* variable range */
  font-display:swap;            /* show text immediately in the fallback */
  src:url('fonts/cinzel-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
    U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Josefin Sans';
  font-style:normal;
  font-weight:100 700;          /* variable range */
  font-display:swap;
  src:url('fonts/josefin-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
    U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================================
   BLUE LINE — Exaggerated Minimalism
   Type  : Cinzel (display, inscriptional) / Josefin Sans (geometric, UI+body)
   Colour: brand cyan + navy on architectural paper. Every text token ≥4.5:1.
   Motion: 150–300ms for UI. Scroll-linked reveals longer. Parallax on
           decorative layers only, never on text (motion-sickness rule).
   ============================================================================ */
:root{
  /* drafting-sheet paper: cool, very pale. Every token re-verified on it. */
  --paper:#F6F9FB;               /* ink 16.5:1 */
  --paper-2:#EDF2F6;
  --paper-3:#E2EAF0;

  --ink:#0D1B26;                 /* 16.5:1 */
  --ink-2:rgba(13,27,38,.68);    /*  5.9:1 — body   */
  --ink-3:rgba(13,27,38,.72);    /*  6.8:1 — labels */
  --rule:rgba(13,27,38,.15);
  --rule-2:rgba(13,27,38,.08);

  /* blueprint substrate — grid lines sit at 1.05–1.10:1 so text contrast is untouched */
  --bp-fine:rgba(10,58,92,.030);
  --bp-major:rgba(10,58,92,.055);
  --bp-fine-size:26px;
  --bp-major-size:130px;

  --navy:#144162;                /*  9.9:1 */
  --blue-ink:#0A6EA6;            /*  5.1:1 — text/links */
  --blue-line:#0E8FCC;           /*  3.3:1 — meaningful strokes */
  --cyan:#42C4FE;                /* brand — decorative only, never text */

  --gut:clamp(22px,5.2vw,88px);
  --t-ui:200ms;                  /* skill rule: UI feedback 150–300ms */
  --e:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{background:var(--paper);color:var(--ink);
  font-family:'Josefin Sans',system-ui,sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}

/* ---------- BLUEPRINT SUBSTRATE ----------
   Fixed drafting sheet behind everything: fine grid + major grid + paper grain.
   Contrast is deliberately near-invisible (≈1.05:1) — it reads as texture,
   never as pattern, and leaves every text ratio unchanged.                    */
.sheet{position:fixed;inset:0;z-index:0;pointer-events:none}
.sheet::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(var(--bp-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--bp-major) 1px,transparent 1px),
    linear-gradient(var(--bp-fine) 1px,transparent 1px),
    linear-gradient(90deg,var(--bp-fine) 1px,transparent 1px);
  background-size:
    var(--bp-major-size) var(--bp-major-size),
    var(--bp-major-size) var(--bp-major-size),
    var(--bp-fine-size) var(--bp-fine-size),
    var(--bp-fine-size) var(--bp-fine-size);
  /* the sheet lightens toward the centre so long copy always sits on clean paper */
  mask-image:radial-gradient(ellipse 92% 78% at 50% 42%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.82) 52%,#000 100%);
  -webkit-mask-image:radial-gradient(ellipse 92% 78% at 50% 42%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.82) 52%,#000 100%)}
.sheet::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E")}
@media(max-width:768px){
  :root{--bp-fine-size:20px;--bp-major-size:100px}
}
a{color:inherit;text-decoration:none;cursor:pointer}
img{display:block;max-width:100%;height:auto}
/* .news img deliberately overrides this with an explicit height + object-fit */
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--cyan);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue-ink);outline-offset:3px;border-radius:2px}

/* ---------- TYPE ---------- */
/* Tracking is size-specific: large type tightens, small type opens up.
   A single letter-spacing value is wrong somewhere on the scale.        */
.dsp{font-family:'Cinzel',Georgia,serif;font-weight:800;line-height:.92;
  text-transform:uppercase;font-optical-sizing:auto}
h1.dsp{font-size:clamp(2.3rem,7.4vw,7.2rem);letter-spacing:-.032em;line-height:.9}
h2.dsp{font-size:clamp(2.1rem,6.2vw,5.2rem);letter-spacing:-.026em;line-height:.94}
h3.dsp{font-size:clamp(1.4rem,2.9vw,2.3rem);letter-spacing:-.014em;line-height:1.02}
/* small caps label — positive tracking, and it eases off as the label grows */
.lbl{font-size:clamp(.78rem,.9vw,.86rem);font-weight:600;
  letter-spacing:clamp(.16em,.24em - .06vw,.24em);
  text-transform:uppercase;color:var(--ink-3);display:inline-block}
.lbl-n{color:var(--blue-ink)}
.bd{font-size:clamp(1.02rem,1.15vw,1.18rem);line-height:1.72;color:var(--ink-2);
  max-width:62ch;font-weight:400}
.bd strong{color:var(--ink);font-weight:600}
.led{font-size:clamp(1.24rem,2.1vw,1.85rem);line-height:1.4;color:var(--ink);
  font-weight:300;max-width:32ch;letter-spacing:-.01em}

/* ---------- LAYOUT ---------- */
.pad{padding-left:var(--gut);padding-right:var(--gut)}
section{position:relative;z-index:2;padding:clamp(76px,10vw,170px) 0}
.hr{height:1px;background:var(--rule);border:none}
.head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  gap:clamp(24px,5vw,86px);align-items:start;margin-bottom:clamp(40px,6vw,88px)}
.head .lbl{margin-bottom:clamp(14px,2vw,22px)}

/* ---------- DEPTH: parallax bands (decorative only) ---------- */
.depth{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.band{position:absolute}
.band.b1{top:-10%;right:-6%;width:44vw;height:44vw;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(226,234,240,.55),transparent 68%)}
.band.b2{bottom:-14%;left:-8%;width:38vw;height:38vw;
  background:linear-gradient(140deg,rgba(237,242,246,.5),transparent 70%)}

/* ---------- NAV ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;padding:clamp(14px,1.6vw,22px) 0;
  transition:background var(--t-ui) var(--e),padding var(--t-ui) var(--e),
             box-shadow var(--t-ui) var(--e)}
header.stuck{background:rgba(246,249,251,.82);backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);padding:10px 0}
/* scroll edge effect: content fades under the floating chrome instead of
   meeting a hard rule (§12). Only rendered where the bar actually overlaps. */
header::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;
  pointer-events:none;opacity:0;transition:opacity var(--t-ui) var(--e);
  background:linear-gradient(rgba(246,249,251,.85),rgba(246,249,251,0))}
header.stuck::after{opacity:1}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px}
.brand img{height:clamp(34px,3.4vw,44px);width:auto}
.nav-links{display:flex;gap:clamp(10px,1.8vw,26px)}
.nav-links a{position:relative;display:flex;align-items:center;min-height:44px;
  font-size:.84rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);transition:color var(--t-ui) var(--e)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:10px;height:1.5px;
  background:var(--blue-line);transition:right 280ms var(--e)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:active{opacity:.6;transition:opacity 80ms ease-out}
.nav-links a:hover::after{right:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 clamp(22px,2.4vw,34px);
  font-size:.84rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border:1.5px solid var(--ink);color:var(--ink);position:relative;overflow:hidden;
  transition:color var(--t-ui) var(--e),border-color var(--t-ui) var(--e)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform 260ms var(--e);z-index:-1}
.btn span{position:relative;z-index:1}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:translateY(0)}
/* press feedback fires on pointer-down — waiting for release reads as dead */
.btn:active{transform:scale(.985)}
.btn{transition:color var(--t-ui) var(--e),border-color var(--t-ui) var(--e),
     transform 100ms ease-out}
.btn-fill{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.btn-fill::before{background:var(--blue-ink)}
.btn-fill:hover{color:var(--paper);border-color:var(--blue-ink)}
.burger{display:none;flex-direction:column;gap:5px;min-width:44px;min-height:44px;
  align-items:flex-end;justify-content:center}
.burger i{display:block;height:1.5px;background:var(--ink);transition:all 260ms var(--e)}
.burger i:nth-child(1){width:24px}
.burger i:nth-child(2){width:17px}
.burger.on i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on i:nth-child(2){width:24px;transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(110px,14vh,170px);padding-bottom:clamp(40px,6vw,80px)}
.hero-mark{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vw,38px)}
.hero-mark .tick{width:clamp(38px,5vw,74px);height:2px;background:var(--blue-line)}
.hero h1{margin-bottom:clamp(22px,3vw,40px)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:block;transform:translateY(104%);
  transition:transform 900ms var(--e)}
.rdy .hero h1 .ln>span{transform:translateY(0)}
.rdy .hero h1 .ln:nth-child(2)>span{transition-delay:110ms}
.rdy .hero h1 .ln:nth-child(3)>span{transition-delay:220ms}
.hero h1 .lt{font-weight:400;color:var(--blue-ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(24px,4vw,64px);align-items:end;
  padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule)}
.hero-grid p{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.72;color:var(--ink-2);max-width:46ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity 800ms var(--e) 380ms,
  transform 800ms var(--e) 380ms}
.rdy .fade-up{opacity:1;transform:none}

/* ---------- TRUST STRIP ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.trust div{padding:clamp(20px,2.4vw,32px) clamp(14px,2vw,30px) clamp(20px,2.4vw,32px) 0;
  border-right:1px solid var(--rule-2)}
.trust div:last-child{border-right:none}
.trust .v{font-family:'Cinzel',serif;font-weight:600;font-size:clamp(.98rem,1.35vw,1.24rem);
  margin-top:9px;letter-spacing:-.01em;line-height:1.25}

/* ---------- MANIFESTO ---------- */
.mani{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,84px);align-items:start}
.pull{font-family:'Cinzel',serif;font-size:clamp(1.5rem,3.1vw,2.6rem);line-height:1.24;
  font-weight:600;letter-spacing:-.02em;color:var(--ink);
  padding-left:clamp(18px,2.4vw,32px);border-left:2px solid var(--blue-line)}

/* ---------- VISION / MISSION ---------- */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule)}
.vm > div{padding:clamp(30px,4vw,58px) clamp(24px,3.4vw,52px) clamp(30px,4vw,58px) 0;
  border-right:1px solid var(--rule-2);position:relative}
.vm > div:last-child{border-right:none;padding-left:clamp(24px,3.4vw,52px)}
.vm h3{margin:16px 0 14px}
.vm p{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.62;color:var(--ink-2);font-weight:400}

/* ---------- VALUES ---------- */
.vals{border-top:1px solid var(--rule)}
.vrow{display:grid;grid-template-columns:clamp(46px,5vw,84px) minmax(0,.8fr) minmax(0,1.5fr);
  gap:clamp(12px,2.6vw,44px);align-items:baseline;
  padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid var(--rule-2);
  position:relative;transition:padding-left 280ms var(--e)}
.vrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--blue-line);transition:width 280ms var(--e)}
.vrow:hover{padding-left:clamp(12px,1.6vw,24px)}
.vrow:hover::before{width:3px}
.vrow .n{font-family:'Cinzel',serif;font-size:.9rem;font-weight:600;color:var(--blue-ink)}
.vrow h4{font-family:'Cinzel',serif;font-size:clamp(1rem,1.5vw,1.28rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.01em}
.vrow p{font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.62;color:var(--ink-2)}

/* ---------- SERVICES ---------- */
.svc{border-top:1px solid var(--rule)}
.srow{display:grid;grid-template-columns:clamp(46px,5vw,84px) minmax(0,1fr) minmax(0,1.2fr) auto;
  gap:clamp(12px,2.6vw,44px);align-items:baseline;
  padding:clamp(22px,2.8vw,40px) 0;border-bottom:1px solid var(--rule);
  position:relative;transition:padding-left 280ms var(--e)}
.srow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--blue-line);transition:width 280ms var(--e)}
.srow:hover{padding-left:clamp(12px,1.8vw,28px)}
.srow:hover::before{width:4px}
.srow .n{font-family:'Cinzel',serif;font-size:.9rem;font-weight:600;color:var(--blue-ink)}
.srow h3{transition:color var(--t-ui) var(--e)}
.srow:hover h3{color:var(--blue-ink)}
.srow:active,.vrow:active,.prow:active{background:rgba(13,27,38,.022)}
.srow p{font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.64;color:var(--ink-2)}
.srow .t{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}

/* ---------- DRAWING PLATE ---------- */
.plate{position:relative;border:1px solid var(--rule);background:rgba(237,242,246,.72);
  backdrop-filter:blur(2px);overflow:hidden}
.plate svg{display:block;width:100%;height:auto}
.plate .stamp{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px clamp(14px,2vw,20px);border-top:1px solid var(--rule);background:var(--paper)}
.dl{stroke:var(--ink);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.dl2{stroke:rgba(13,27,38,.4);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.dlb{stroke:var(--blue-line);stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
.dld{stroke:rgba(13,27,38,.34);stroke-width:1;fill:none;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.dt{font-family:'Josefin Sans',monospace;font-size:8px;font-weight:600;
  fill:rgba(13,27,38,.55);letter-spacing:.1em}
.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1700ms var(--e)}
.in .draw{stroke-dashoffset:0}

/* ---------- SECTORS ---------- */
.sect{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.sect article{background:rgba(246,249,251,.82);padding:clamp(28px,3.4vw,50px) clamp(22px,2.6vw,38px);
  transition:background var(--t-ui) var(--e)}
.sect article:hover{background:rgba(237,242,246,.94)}
.sect article:active{background:rgba(226,234,240,.96)}
.sect .ic{width:44px;height:44px;color:var(--blue-ink);margin-bottom:22px}
.sect h3{margin-bottom:12px}
.sect p{font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.66;color:var(--ink-2)}

/* ---------- PROCESS ---------- */
.proc{border-top:1px solid var(--rule)}
.prow{display:grid;grid-template-columns:clamp(70px,8vw,140px) minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(12px,2.6vw,44px);align-items:start;
  padding:clamp(24px,3vw,44px) 0;border-bottom:1px solid var(--rule)}
.prow .st{font-family:'Cinzel',serif;font-size:clamp(1.5rem,3vw,2.6rem);font-weight:700;
  color:var(--rule);line-height:.9;transition:color 280ms var(--e)}
.prow:hover .st{color:var(--blue-line)}
.prow p{font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.66;color:var(--ink-2)}

/* ---------- NEWS ---------- */
.news{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.news figure{border:1px solid var(--rule);background:rgba(237,242,246,.72);overflow:hidden}
.news img{width:100%;height:clamp(280px,38vw,470px);object-fit:cover;object-position:50% 36%;
  filter:grayscale(1) contrast(1.05);transition:filter 700ms var(--e),transform 900ms var(--e)}
.news figure:hover img{filter:grayscale(0) contrast(1);transform:scale(1.02)}
.news figcaption{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px clamp(14px,2vw,18px);border-top:1px solid var(--rule);background:var(--paper)}

/* ---------- PARENT ---------- */
.parent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,4vw,72px);
  align-items:center;padding:clamp(28px,3.6vw,54px);
  border:1px solid var(--rule);background:rgba(237,242,246,.78)}
.parent img{width:clamp(150px,17vw,214px)}

/* ---------- CONTACT ---------- */
.cwrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,72px);align-items:start;margin-top:clamp(30px,4vw,58px)}
.dl-list{border-top:1px solid var(--rule)}
.dl-list div{display:grid;grid-template-columns:minmax(96px,.4fr) 1fr;gap:16px;
  padding:clamp(15px,1.8vw,22px) 0;border-bottom:1px solid var(--rule-2);align-items:baseline}
.dl-list .v{font-size:clamp(.96rem,1.1vw,1.06rem);font-weight:500;overflow-wrap:anywhere}
.dl-list a.v{transition:color var(--t-ui) var(--e)}
.dl-list a.v:hover{color:var(--blue-ink)}
form{border-top:1px solid var(--rule)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px)}
.fld{padding-top:clamp(16px,2vw,24px)}
.fld label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.fld input,.fld select,.fld textarea{width:100%;font-family:inherit;font-size:16px;
  font-weight:400;color:var(--ink);background:transparent;border:none;
  border-bottom:1px solid var(--rule);padding:10px 0;outline:none;
  transition:border-color var(--t-ui) var(--e)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-bottom-color:var(--blue-line);
  border-bottom-width:2px;padding-bottom:9px}
.fld textarea{resize:vertical;min-height:104px}
.fld ::placeholder{color:rgba(13,27,38,.42)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fnote{margin-top:16px;font-size:.92rem;line-height:1.6;min-height:1px}
.fnote.ok{color:#0B6B45}
.fnote.err{color:#A32020}
form.sending button[type=submit]{opacity:.6;pointer-events:none}

/* Touch targets. Only on coarse pointers, so the desktop composition — where
   the thin underlined fields are the whole point — is left exactly as drawn.
   Inputs grow to the 44px minimum; the contact links gain hit area through
   padding cancelled by an equal negative margin, so nothing moves. */
@media (pointer:coarse){
  .fld input,.fld select{min-height:44px}
  .fld textarea{min-height:120px}
  .dl-list a.v{display:block;padding:15px 0;margin:-15px 0}
}

/* ---------- FOOTER ---------- */
footer{position:relative;z-index:2;border-top:1px solid var(--rule);
  padding:clamp(44px,5vw,76px) 0 clamp(24px,3vw,36px);background:rgba(237,242,246,.86)}
.fg{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,58px);margin-bottom:clamp(30px,4vw,52px)}
.fg img.fl{height:44px;width:auto;margin-bottom:18px}
.fg a{display:flex;align-items:center;min-height:44px;font-size:.92rem;color:var(--ink-2);
  transition:color var(--t-ui) var(--e)}
.fg a:hover{color:var(--blue-ink)}
.fg a:active,.dl-list a.v:active{opacity:.6;transition:opacity 80ms ease-out}
.fg h5{font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--rule);font-size:.82rem;color:var(--ink-3)}
.f-parent{display:flex;align-items:center;gap:12px;margin-top:16px}
.f-parent img{width:112px}
.f-parent span{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}

/* ---------- WHATSAPP ---------- */
.wa{position:fixed;right:clamp(16px,2vw,26px);bottom:calc(clamp(16px,2vw,26px) + env(safe-area-inset-bottom));
  z-index:55;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;
  background:var(--navy);color:var(--paper);font-size:.8rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background var(--t-ui) var(--e),transform var(--t-ui) var(--e)}
.wa:hover{background:var(--blue-ink);transform:translateY(-2px)}
.wa:active{transform:scale(.97)}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity 760ms var(--e),transform 760ms var(--e)}
.rv.in{opacity:1;transform:none}

/* ---------- MOBILE MENU ---------- */
/* Enters and exits along the same path (§7), and materialises rather than
   fades — blur and scale animate together so it reads as a real surface (§12). */
.mm{position:fixed;inset:0;z-index:59;display:flex;
  flex-direction:column;justify-content:center;
  padding:calc(84px + env(safe-area-inset-top)) var(--gut) calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;
  background:rgba(246,249,251,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  opacity:0;visibility:hidden;transform:scale(1.015);
  transition:opacity 240ms var(--e),transform 240ms var(--e),
             background 240ms var(--e),backdrop-filter 240ms var(--e),
             visibility 0s linear 240ms}
.mm.open{opacity:1;visibility:visible;transform:none;
  background:rgba(246,249,251,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition-delay:0s}
.mm a{font-family:'Cinzel',serif;font-size:clamp(1.7rem,8vw,2.5rem);font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;padding:clamp(11px,2vw,15px) 0;
  border-bottom:1px solid var(--rule-2);display:flex;justify-content:space-between;
  align-items:baseline;opacity:0;transform:translateY(16px)}
.mm.open a{animation:mmIn 480ms var(--e) forwards}
.mm.open a:nth-child(1){animation-delay:40ms}.mm.open a:nth-child(2){animation-delay:80ms}
.mm.open a:nth-child(3){animation-delay:120ms}.mm.open a:nth-child(4){animation-delay:160ms}
.mm.open a:nth-child(5){animation-delay:200ms}.mm.open a:nth-child(6){animation-delay:240ms}
.mm.open a:nth-child(7){animation-delay:280ms}
@keyframes mmIn{to{opacity:1;transform:none}}
/* press feedback on menu items */
.mm a:active{opacity:.55;transition:opacity 80ms ease-out}
.mm a small{font-family:'Josefin Sans',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.18em;color:var(--blue-ink)}
body.lock{overflow:hidden}

/* ============================================================================
   BREAKPOINTS — skill checklist: 375 / 768 / 1024 / 1440
   ============================================================================ */
/* large screens: cap the measure so lines don't run edge-to-edge on 1440+ */
@media(min-width:1440px){
  .pad{padding-left:max(var(--gut),calc((100vw - 1560px)/2));
       padding-right:max(var(--gut),calc((100vw - 1560px)/2))}
  h1.dsp{font-size:clamp(2.3rem,6.6vw,6.6rem)}
}
@media(max-width:1024px){
  .head,.mani,.news,.cwrap{grid-template-columns:1fr;gap:clamp(22px,4vw,40px)}
  .hero-grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .trust{grid-template-columns:1fr 1fr}
  .trust div:nth-child(2){border-right:none}
  .trust div:nth-child(-n+2){border-bottom:1px solid var(--rule-2)}
  .sect{grid-template-columns:1fr}
  .parent{grid-template-columns:1fr;gap:24px}
  .fg{grid-template-columns:1fr 1fr}
  .led{max-width:none}
}
@media(max-width:768px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav .btn{display:none}
  .hero{min-height:auto;padding-top:clamp(104px,15vh,140px)}
  .vm{grid-template-columns:1fr}
  .vm > div{border-right:none;border-bottom:1px solid var(--rule-2);
    padding:clamp(26px,4vw,36px) 0}
  .vm > div:last-child{padding-left:0;border-bottom:none}
  .vrow{grid-template-columns:clamp(38px,9vw,52px) 1fr;gap:6px 14px}
  .vrow p{grid-column:2}
  .srow{grid-template-columns:clamp(38px,9vw,52px) 1fr;gap:8px 14px}
  .srow p,.srow .t{grid-column:2}
  .srow .t{margin-top:4px}
  .prow{grid-template-columns:1fr;gap:10px}
  .prow .st{font-size:clamp(1.6rem,7vw,2.2rem)}
  .frow{grid-template-columns:1fr;gap:0}
  .fg{grid-template-columns:1fr;gap:22px}
  .pull{font-size:clamp(1.3rem,5.4vw,1.7rem);padding-left:16px}
  .dl-list div{grid-template-columns:1fr;gap:5px}
  .wa{padding:0;width:52px;justify-content:center}
  .wa span{display:none}
}
@media(max-width:375px){
  .trust{grid-template-columns:1fr}
  .trust div{border-right:none;border-bottom:1px solid var(--rule-2)}
  .hero-cta .btn{width:100%}
}
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:100px;padding-bottom:44px}
}
/* ============================================================================
   §14 — three independent accessibility signals, not just reduced-motion.
   ============================================================================ */

/* Translucency off: surfaces go frosty/solid, blur drops. */
@media(prefers-reduced-transparency:reduce){
  header.stuck{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 1px 0 var(--rule)}
  header::after{display:none}
  .mm{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .mm.open{background:var(--paper)}
  .plate{background:var(--paper-2);backdrop-filter:none}
  .sect article{background:var(--paper)}
  .sect article:hover{background:var(--paper-2)}
  .parent,.news figure{background:var(--paper-2)}
  footer{background:var(--paper-2)}
  .sheet{opacity:.5}
}

/* Higher contrast: near-solid surfaces, defined borders, texture retired. */
@media(prefers-contrast:more){
  :root{
    --ink-2:rgba(13,27,38,.86);
    --ink-3:rgba(13,27,38,.9);
    --rule:rgba(13,27,38,.42);
    --rule-2:rgba(13,27,38,.28);
    --blue-ink:#05517E;          /* 7.9:1 on paper */
  }
  .sheet{display:none}           /* texture is noise when contrast matters */
  header.stuck{background:var(--paper);backdrop-filter:none;box-shadow:0 0 0 1px var(--rule)}
  .plate,.sect article,.parent,.news figure{background:var(--paper);border-color:var(--rule)}
  .btn{border-width:2px}
  :focus-visible{outline-width:3px}
  .lbl{color:var(--ink)}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero h1 .ln>span{transform:none}
  .fade-up,.rv{opacity:1;transform:none}
  .mm{transition:opacity 200ms ease,visibility 0s linear 200ms;transform:none!important}
  .mm.open{transition-delay:0s}
  .draw{stroke-dashoffset:0}
  .band{transform:none!important}
}

/* ---------- FAQ (accordion) ---------- */
.faq{border-top:1px solid var(--rule)}
.qrow{border-bottom:1px solid var(--rule)}
.qrow summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:clamp(46px,5vw,84px) minmax(0,1fr) auto;
  gap:clamp(12px,2.6vw,44px);align-items:baseline;
  padding:clamp(20px,2.6vw,34px) 0;position:relative;transition:padding-left 280ms var(--e)}
.qrow summary::-webkit-details-marker{display:none}
.qrow summary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--blue-line);transition:width 280ms var(--e)}
.qrow summary:hover{padding-left:clamp(12px,1.8vw,28px)}
.qrow summary:hover::before{width:4px}
.qrow summary:active{background:rgba(13,27,38,.022)}
.qrow .n{font-family:'Cinzel',serif;font-size:.9rem;font-weight:600;color:var(--blue-ink)}
.qrow summary h3{font-size:clamp(1.05rem,1.9vw,1.5rem);text-transform:none;
  letter-spacing:-.012em;line-height:1.3;transition:color var(--t-ui) var(--e)}
.qrow summary:hover h3{color:var(--blue-ink)}
.qrow .pm{position:relative;width:16px;height:16px;flex-shrink:0;align-self:center}
.qrow .pm::before,.qrow .pm::after{content:"";position:absolute;background:var(--ink-3);
  transition:transform 280ms var(--e),opacity 200ms var(--e)}
.qrow .pm::before{left:0;right:0;top:7.5px;height:1.5px}
.qrow .pm::after{top:0;bottom:0;left:7.5px;width:1.5px}
.qrow[open] .pm::after{transform:rotate(90deg);opacity:0}
.qrow .ans{padding:0 0 clamp(20px,2.6vw,32px) 0;
  padding-left:calc(clamp(46px,5vw,84px) + clamp(12px,2.6vw,44px))}
.qrow .ans p{font-size:clamp(.96rem,1.08vw,1.08rem);line-height:1.72;color:var(--ink-2);max-width:64ch}
@media(max-width:768px){
  .qrow summary{grid-template-columns:clamp(38px,9vw,52px) 1fr auto;gap:8px 14px}
  .qrow .ans{padding-left:calc(clamp(38px,9vw,52px) + 14px)}
}

/* ---------- response promise ---------- */
.promise{display:flex;gap:11px;align-items:flex-start;margin-top:clamp(18px,2.4vw,26px);
  padding:clamp(13px,1.6vw,17px) clamp(15px,1.8vw,19px);
  border:1px solid var(--rule);border-left:3px solid var(--blue-line);
  background:rgba(255,255,255,.55);font-size:.94rem;line-height:1.6;color:var(--ink-2);max-width:52ch}
.promise svg{color:var(--blue-ink);flex-shrink:0;margin-top:2px}
@media(prefers-reduced-transparency:reduce){.promise{background:var(--paper-2)}}
@media(prefers-contrast:more){.promise{background:var(--paper);border-color:var(--rule)}}

/* ---------- form: inline errors + loading ---------- */
.ferr{display:block;font-size:.86rem;line-height:1.45;color:#A32020;margin-top:7px;min-height:1px}
.fld input.bad,.fld textarea.bad,.fld select.bad{border-bottom-color:#A32020;border-bottom-width:2px;padding-bottom:9px}
.fld input.bad:focus,.fld textarea.bad:focus{border-bottom-color:#A32020;
  box-shadow:0 2px 0 -1px rgba(163,32,32,.25)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;
  border-right-color:transparent;display:inline-block;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
form.sending button[type=submit]{opacity:.72;pointer-events:none}
form.sending button[type=submit] span:last-child{opacity:.9}

/* image placeholders reserve space (width/height attrs do the real work) */
picture{display:block}
img[loading=lazy]{background:var(--paper-2)}

/* ---------- cookie consent ---------- */
.cc{position:fixed;left:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);
  bottom:calc(clamp(12px,2vw,24px) + env(safe-area-inset-bottom));z-index:70;
  max-width:640px;margin-inline:auto;display:flex;gap:clamp(12px,2vw,22px);
  align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:clamp(15px,1.8vw,20px) clamp(17px,2vw,22px);
  background:rgba(246,249,251,.97);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border:1px solid var(--rule);
  box-shadow:0 20px 60px -30px rgba(13,27,38,.55);
  opacity:0;transform:translateY(12px);
  transition:opacity 260ms var(--e),transform 260ms var(--e)}
.cc.in{opacity:1;transform:none}
.cc p{font-size:.9rem;line-height:1.6;color:var(--ink-2);flex:1 1 260px;margin:0}
.cc p a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.cc-btns{display:flex;gap:10px;flex-shrink:0}
.cc .btn{min-height:42px;padding:0 18px;font-size:.78rem}
@media(max-width:520px){
  .cc{left:10px;right:10px;padding:15px}
  .cc-btns{width:100%}
  .cc .btn{flex:1}
}
@media(prefers-reduced-transparency:reduce){.cc{background:var(--paper);backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.cc{transition:opacity 150ms ease;transform:none}}

/* ============================================================================
   MOBILE PAINT BUDGET
   Two effects here are full-screen compositing work that a phone GPU redoes on
   every scroll frame:
     .sheet::after — a fixed, viewport-sized layer carrying an SVG turbulence
       texture composited with mix-blend-mode:multiply.
     header.stuck  — a fixed header with backdrop-filter:blur(16px), which makes
       the browser resample everything behind it, continuously, while scrolling.
   Both are texture rather than information, and at phone size the grain is not
   perceptible anyway. Dropping them below 768px is invisible to the reader and
   is the difference between a smooth scroll and a janky one. The desktop
   composition, where the score was already 96, is left exactly as drawn.
   ============================================================================ */
@media (max-width:768px){
  .sheet::after{display:none}
  header.stuck{
    background:rgba(246,249,251,.97);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .mm.open{
    background:rgba(246,249,251,.99);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .plate{backdrop-filter:none;-webkit-backdrop-filter:none}
}