/* ==========================================================================
   MANZIL GOVERNANCE PARTNERS — Official website stylesheet
   Static site (Amazon S3 hosting). No build step, no runtime dependencies.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root{
  /* Brand palette — sampled directly from the official Manzil logo artwork */
  --navy-900:#071527;
  --navy-800:#0B1F3B;   /* primary brand navy */
  --navy-700:#0F2A4E;
  --navy-600:#163A66;
  --navy-500:#1E2761;   /* deep indigo used in brand collateral */
  --gold-600:#A8871C;
  --gold-500:#C9A326;   /* primary brand gold */
  --gold-400:#D5B037;
  --gold-300:#E4C765;

  --ink:#101826;
  --ink-70:#42506A;
  --ink-55:#63718C;
  --line:#E3E7EE;
  --paper:#FFFFFF;
  --paper-alt:#F6F8FB;
  --paper-tint:#EEF2F8;

  --shadow-sm:0 1px 2px rgba(7,21,39,.05),0 2px 8px rgba(7,21,39,.05);
  --shadow-md:0 2px 8px rgba(7,21,39,.05),0 10px 26px rgba(7,21,39,.07);
  --shadow-lg:0 6px 16px rgba(7,21,39,.07),0 20px 48px rgba(7,21,39,.1);

  --font-display:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --shell:1200px;
  --shell-narrow:880px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section-y:clamp(4.5rem,9vw,7.5rem);

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:76px;
}

/* --------------------------------------------------------------- 2. Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.16;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,5.2vw,3.85rem);letter-spacing:-.03em}
h2{font-size:clamp(1.72rem,3.6vw,2.65rem)}
h3{font-size:clamp(1.12rem,1.9vw,1.38rem);letter-spacing:-.015em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--gold-500);color:var(--navy-900)}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:4px}

/* --------------------------------------------------------------- 3. Layout */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--narrow{max-width:var(--shell-narrow)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(3rem,6vw,4.75rem)}
.section--alt{background:var(--paper-alt)}
.section--tint{background:linear-gradient(180deg,var(--paper-alt),var(--paper-tint))}
.section--navy{background:var(--navy-800);color:#EAF0F8}
.section--navy h2,.section--navy h3{color:#fff}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold-500);
  color:var(--navy-900);padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip-link:focus{left:0}

/* ------------------------------------------------------ 4. Type utilities */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-display);font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-600);margin-bottom:1.15rem;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold-500);flex:none}
.section--navy .eyebrow,.hero .eyebrow{color:var(--gold-400)}
.lede{font-size:clamp(1.05rem,1.5vw,1.19rem);color:var(--ink-70);line-height:1.75;max-width:64ch}
.section--navy .lede{color:#C3D2E6}
.measure{max-width:66ch}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lede{margin-inline:auto}
.gold{color:var(--gold-500)}
.tm{font-size:.4em;vertical-align:.95em;letter-spacing:.02em;margin-left:.05em;font-weight:700}
.headline-rule{width:64px;height:3px;background:var(--gold-500);border-radius:2px;margin:0 0 1.6rem}
.center .headline-rule{margin-inline:auto}
.section-head{margin-bottom:clamp(2.4rem,5vw,3.4rem)}

/* --------------------------------------------------------------- 5. Buttons */
.btn{
  --btn-bg:var(--gold-500); --btn-fg:var(--navy-900); --btn-bd:var(--gold-500);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border:1.5px solid var(--btn-bd);border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  font-family:var(--font-display);font-size:.875rem;font-weight:700;letter-spacing:.03em;
  line-height:1;text-align:center;white-space:nowrap;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),
             background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .4s var(--ease-out)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(201,163,38,.24)}
.btn:active{transform:translateY(0)}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}
.btn--ghost:hover{--btn-bd:var(--gold-500);color:var(--gold-400);box-shadow:0 10px 26px rgba(7,21,39,.28)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--navy-800);--btn-bd:rgba(11,31,59,.24)}
.btn--outline:hover{--btn-bd:var(--gold-500);--btn-fg:var(--gold-600);box-shadow:0 10px 26px rgba(11,31,59,.12)}
.btn--sm{padding:.72rem 1.3rem;font-size:.78rem}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}
.center .btn-row{justify-content:center}

.textlink{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);
  font-size:.85rem;font-weight:700;letter-spacing:.04em;color:var(--gold-600)}
.textlink svg{width:14px;height:14px;transition:transform .4s var(--ease-out)}
.textlink:hover svg{transform:translateX(5px)}
.section--navy .textlink{color:var(--gold-400)}

/* --------------------------------------------------------------- 6. Header */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(11,31,59,.86);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.site-header.is-scrolled{background:rgba(7,21,39,.95);box-shadow:0 12px 34px rgba(7,21,39,.34);
  border-bottom-color:rgba(201,163,38,.3)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:var(--header-h);max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

.brand{display:flex;align-items:center;flex:none;transform-origin:left center}
.brand img{height:38px;width:auto;transition:opacity .3s var(--ease)}
.brand:hover img{opacity:.85}

.nav{display:flex;align-items:center}
.nav__list{display:flex;align-items:center;gap:.15rem}
.nav__item{position:relative}
/* The panel floats 10px below the item. Without this bridge the cursor crosses
   dead space on its way down and the panel closes before it can be reached. */
.nav__item--has-panel::after{content:"";position:absolute;left:0;right:0;top:100%;
  height:14px;display:none}
.nav__item--has-panel:hover::after,
.nav__item--has-panel:focus-within::after{display:block}
.nav__link{
  position:relative;display:flex;align-items:center;gap:.35rem;padding:.6rem .95rem;
  border-radius:var(--r-sm);font-family:var(--font-display);font-size:.775rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#D6E1EF;white-space:nowrap;
  background:none;border:0;cursor:pointer;transition:color .3s var(--ease);
}
.nav__link::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.3rem;height:1.5px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease-out)}
.nav__link:hover,.nav__link[aria-current="page"]{color:#fff}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--gold-400)}
.nav__caret{width:9px;height:9px;opacity:.75;transition:transform .35s var(--ease)}
.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg)}

.nav__panel{
  /* anchored to the item's right edge: both panels sit at the end of the bar,
     so centring them would push the last one past the viewport */
  position:absolute;top:calc(100% + 10px);right:0;left:auto;min-width:250px;
  transform:translateY(10px);opacity:0;visibility:hidden;pointer-events:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:.5rem;overflow:hidden;
  transition:opacity .3s var(--ease),transform .34s var(--ease-out),visibility .3s;
}
.nav__panel::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nav__panel a{display:block;padding:.7rem .85rem;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:500;color:var(--ink);
  transition:background-color .25s var(--ease),color .25s var(--ease),padding-left .3s var(--ease-out)}
.nav__panel a small{display:block;font-size:.75rem;color:var(--ink-55);margin-top:.1rem;
  letter-spacing:0;text-transform:none;font-weight:400}
.nav__panel a:hover{background:var(--paper-alt);color:var(--navy-800);padding-left:1.15rem}
.nav__panel a[aria-current="page"]{color:var(--gold-600);background:var(--paper-alt)}
.header__cta{flex:none;transform-origin:right center}

/* Home only. There the header is not painted on load: it mends in as the
   visitor scrolls, taking over from the hero. --mend-logo and --mend-cta
   (0 -> 1, set on <html> by site.js) fade the hero lockup and the hero button
   out, and --mend-logo-in / --mend-cta-in fade their counterparts in the bar
   in a beat later, so each pair reads as one element handing over to the other
   rather than two separate animations. Every other page has no lockup to hand
   over from, so its header is simply there from the start.
   Only opacity is animated on the bar itself — a transform here would become
   the containing block for the position:fixed mobile .nav inside it. */
.home .site-header{opacity:var(--mend-logo,0);visibility:hidden;pointer-events:none}
.home .site-header.is-revealed{visibility:visible;pointer-events:auto}
/* Settles down and back to size as the hero lockup above it dissolves. */
.home .brand{
  opacity:var(--mend-logo-in,0);
  transform:translate3d(0,calc((1 - var(--mend-logo-in,0)) * -7px),0)
            scale(calc(1 + (1 - var(--mend-logo-in,0)) * .14))}
/* Same hand-off, one beat later, from the hero's "Talk to Pascoal". */
.home .header__cta{
  opacity:var(--mend-cta-in,0);
  transform:translate3d(0,calc((1 - var(--mend-cta-in,0)) * -6px),0)
            scale(calc(1 + (1 - var(--mend-cta-in,0)) * .18))}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  padding:0;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);background:transparent;cursor:pointer}
.nav-toggle span{display:block;width:19px;height:1.8px;background:#fff;margin-inline:auto;border-radius:2px;
  transition:transform .4s var(--ease-out),opacity .25s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* --------------------------------------------------------------- 7. Hero */
.hero{position:relative;background:var(--navy-800);color:#fff;overflow:hidden;isolation:isolate;
  padding-block:calc(var(--header-h) + clamp(3.6rem,8vw,6rem)) clamp(4rem,8vw,6.5rem)}
.hero--tall{padding-block:calc(var(--header-h) + clamp(5rem,10vw,8.5rem)) clamp(5rem,9vw,8rem)}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg::before,.hero__bg::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.hero__bg::before{width:62vw;height:62vw;max-width:840px;max-height:840px;top:-24%;right:-14%;
  background:radial-gradient(circle,rgba(201,163,38,.17),transparent 66%);
  animation:drift-a 26s var(--ease) infinite alternate}
.hero__bg::after{width:56vw;height:56vw;max-width:760px;max-height:760px;bottom:-30%;left:-16%;
  background:radial-gradient(circle,rgba(30,39,97,.85),transparent 68%);
  animation:drift-b 32s var(--ease) infinite alternate}
@keyframes drift-a{to{transform:translate3d(-7%,9%,0) scale(1.14)}}
@keyframes drift-b{to{transform:translate3d(9%,-7%,0) scale(1.1)}}
.hero__grid{position:absolute;inset:0;z-index:-2;opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 42%,#000,transparent 76%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 42%,#000,transparent 76%)}
.hero__ridge{position:absolute;left:0;right:0;bottom:-1px;z-index:-1;width:100%;opacity:.45}
.hero__inner{position:relative;max-width:980px}
.hero.center .hero__inner{margin-inline:auto;text-align:center}
.hero h1{color:#fff;margin-bottom:1.4rem;text-wrap:balance}
.hero__lede{font-size:clamp(1.05rem,1.65vw,1.26rem);color:#C7D6EA;line-height:1.72;max-width:64ch}
.hero.center .hero__lede{margin-inline:auto}
/* --- Brand-led hero (home) -------------------------------------------------
   One symmetrical composition. The lockup and the manifesto share the top row
   as equal halves with their contents centred, and the promise and the two
   calls to action sit centred beneath them — so every element hangs off the
   same centre axis. */
.hero--brand{
  display:flex;align-items:center;min-height:100vh;min-height:100svh;
  /* equal top and bottom, so the block sits on the viewport's centre line */
  padding-block:calc(var(--header-h) + clamp(.8rem,2vw,1.6rem))}
/* Matches the 1200px body shell on ordinary laptops, so the hero lines up with
   every section below it, and only widens on monitors where 1200 would strand
   a third of the screen. */
.hero--brand>.shell{width:100%;max-width:clamp(1200px,86vw,1680px)}
.hero--brand .hero__inner{max-width:none}

.hero__brand-split{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,6.5vw,7.5rem);align-items:center}
.hero__brand-split>*{min-width:0}

/* ---- left column: the artwork ---- */
.hero__marks{display:flex;flex-direction:column;align-items:center;min-width:0}
.hero__lockup-wrap{display:block;width:min(100%,740px)}
/* The other half of the hand-off: rises and dissolves as the bar takes over. */
.hero__lockup{display:block;width:100%;height:auto;transform-origin:left top;
  opacity:calc(1 - var(--mend-logo,0));
  transform:translate3d(0,calc(var(--mend-logo,0) * -20px),0)
            scale(calc(1 - var(--mend-logo,0) * .08))}

/* ---- below both columns: the promise and the two calls to action ---- */
.hero__promise{margin-top:clamp(3rem,10vw,9.8rem);text-align:center}
.hero__promise-text{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(1.02rem,1.4vw,1.42rem);line-height:1.62;
  color:#DEE8F5;text-wrap:balance;margin:0 auto;max-width:min(100%,96ch)}
.hero__promise-text strong{font-weight:700;color:var(--gold-400)}
.hero__promise .btn-row{justify-content:center;gap:1.4rem;
  margin-top:clamp(2.4rem,7.5vw,7rem)}
/* the outgoing half of the CTA hand-off — see the header block above */
.hero--brand .hero__promise .btn-row{
  opacity:calc(1 - var(--mend-cta,0));
  transform:translate3d(0,calc(var(--mend-cta,0) * -16px),0)
            scale(calc(1 - var(--mend-cta,0) * .05))}
.hero--brand .hero__promise .btn-row.is-mended{pointer-events:none}

/* ---- right column: the manifesto ---- */
/* The quote leads and the gold line answers it: sizing them identically, as
   they were, left the column reading as two competing blocks. */
.hero__manifesto{position:relative;text-align:center}
.hero__manifesto-quote{
  margin:0 0 clamp(1.1rem,2vw,1.7rem);
  font-family:var(--font-display);font-weight:600;font-style:italic;
  font-size:clamp(1.1rem,1.55vw,1.47rem);line-height:1.5;letter-spacing:-.018em;
  color:#fff;text-wrap:balance}
/* The gold line is the only paragraph left in this column, so it no longer
   needs to out-specify a generic `.hero__manifesto p` rule to style itself. */
.hero__manifesto-close{
  margin:0 auto;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1rem,1.2vw,1.22rem);line-height:1.62;
  letter-spacing:-.012em;color:var(--gold-400);
  text-wrap:balance;max-width:34em}

/* Shorter laptop screens (1366x768, 1280x800): trim the lockups so the hero
   still lands inside one screen. */
@media (min-width:981px) and (max-height:850px){
  .hero--brand{padding-block:calc(var(--header-h) + .6rem)}
  .hero__lockup-wrap{width:min(100%,600px)}
  .hero__manifesto-quote{font-size:clamp(1.05rem,1.35vw,1.3rem)}
  .hero__promise{margin-top:clamp(2.4rem,7vw,5.5rem)}
  .hero__promise-text{font-size:clamp(1.05rem,1.5vw,1.24rem)}
  .hero__promise .btn-row{margin-top:clamp(2rem,5vw,4rem)}
}

@media (max-width:980px){
  .hero--brand{min-height:0;display:block;
    padding-block:calc(var(--header-h) + clamp(2.2rem,5vw,3.4rem)) clamp(3rem,6vw,4.4rem)}
  .hero__brand-split{grid-template-columns:1fr;gap:clamp(2.4rem,6vw,3.2rem)}
  .hero__lockup-wrap{width:min(100%,470px)}
}
@media (max-width:640px){
  .hero__lockup-wrap{width:min(100%,330px)}
}

/* Available to assistive tech and search engines, hidden from sighted users */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.hero__quote{font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.6;color:#DCE6F4;border-left:3px solid var(--gold-500);padding-left:1.4rem;
  max-width:62ch;margin-top:2.3rem}
.hero.center .hero__quote{margin-inline:auto;border-left:0;border-top:3px solid var(--gold-500);
  padding:1.4rem 0 0;text-align:center}

/* --------------------------------------------------------- 8. Reveal anim */
.reveal{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease-out),transform .95s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms)}
.reveal.is-in{opacity:1;transform:none}
.reveal--left{transform:translate3d(-26px,0,0)}
.reveal--scale{transform:translate3d(0,20px,0) scale(.975)}
.no-js .reveal{opacity:1;transform:none}
/* Without JS nothing sets the mend vars, so hand everything its finished state */
.no-js .home .site-header{opacity:1;visibility:visible;pointer-events:auto}
.no-js .home .brand,.no-js .home .header__cta,.no-js .hero__lockup,
.no-js .hero--brand .hero__promise .btn-row{opacity:1;transform:none}

.line-mask{display:block;overflow:hidden;padding-bottom:.06em}
.line-mask>span{display:block;transform:translateY(105%);opacity:0;
  animation:line-up 1.05s var(--ease-out) forwards;animation-delay:calc(.18s + var(--i,0)*.13s)}
@keyframes line-up{to{transform:none;opacity:1}}
.fade-up{opacity:0;animation:fade-up .95s var(--ease-out) forwards;animation-delay:calc(.4s + var(--i,0)*.11s)}
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------- 9. Cards */
.grid{display:grid;gap:1.4rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(288px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(228px,100%),1fr))}

.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 1.75rem;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s var(--ease)}
.card:hover{border-color:rgba(201,163,38,.42);box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:.55rem;color:var(--navy-800)}
.card p{font-size:.95rem;color:var(--ink-70);margin:0}
.card--flat{background:var(--paper-alt);border-color:transparent}
.card--flat:hover{background:var(--paper)}
.card--navy{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.card--navy h3{color:#fff}
.card--navy p{color:#B9C9DF}
.card--navy:hover{background:rgba(255,255,255,.07);border-color:rgba(201,163,38,.4)}
.card__num{display:block;font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;color:var(--gold-600);margin-bottom:.85rem}

.icon-badge{display:grid;place-items:center;width:46px;height:46px;margin-bottom:1.15rem;border-radius:12px;
  background:linear-gradient(145deg,rgba(201,163,38,.16),rgba(201,163,38,.05));
  border:1px solid rgba(201,163,38,.26);color:var(--gold-600);
  transition:transform .5s var(--ease-out),background-color .4s var(--ease)}
.icon-badge svg{width:21px;height:21px}
.card:hover .icon-badge{transform:translateY(-2px) scale(1.06);
  background:linear-gradient(145deg,rgba(201,163,38,.26),rgba(201,163,38,.1))}
.card--navy .icon-badge{color:var(--gold-400)}

/* ------------------------------------------------------- 10. Question list */
.q-list{display:grid;gap:.1rem;margin-top:2.2rem;max-width:780px}
.q-list li{display:flex;align-items:flex-start;gap:1.05rem;padding:1.15rem 1.35rem;border-radius:var(--r-md);
  font-family:var(--font-display);font-weight:600;font-size:clamp(.99rem,1.5vw,1.12rem);
  color:#E7EEF8;line-height:1.5;
  transition:background-color .4s var(--ease),transform .45s var(--ease-out)}
.q-list li:hover{background:rgba(255,255,255,.055);transform:translateX(6px)}
.q-list li::before{content:"?";flex:none;display:grid;place-items:center;width:27px;height:27px;margin-top:.06em;
  border-radius:50%;border:1.5px solid rgba(201,163,38,.5);background:rgba(201,163,38,.11);
  color:var(--gold-400);font-size:.82rem;font-weight:700}
.q-list--light li{color:var(--navy-800)}
.q-list--light li:hover{background:#fff;box-shadow:var(--shadow-sm)}

/* ------------------------------------------- 10b. Plain line list (offerings)
   Same rhythm as the CISO question list, with a gold lozenge marker.        */
.line-list{display:grid;gap:.1rem;margin-top:.6rem;max-width:820px}
.line-list li{
  display:flex;align-items:center;gap:1.1rem;padding:1.05rem 1.35rem;border-radius:var(--r-md);
  font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,1.5vw,1.15rem);
  letter-spacing:-.01em;color:var(--navy-800);line-height:1.5;
  border-bottom:1px solid var(--line);
  transition:background-color .4s var(--ease),transform .45s var(--ease-out),
             border-color .4s var(--ease)}
.line-list li:last-child{border-bottom:0}
.line-list li::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;
  transform:rotate(45deg);background:var(--gold-500);
  transition:transform .45s var(--ease-out)}
.line-list li:hover{background:var(--paper-alt);transform:translateX(6px);
  border-color:rgba(201,163,38,.35)}
.line-list li:hover::before{transform:rotate(135deg) scale(1.15)}
.section--navy .line-list li{color:#E7EEF8;border-bottom-color:rgba(255,255,255,.09)}
.section--navy .line-list li:hover{background:rgba(255,255,255,.055)}

/* --------------------------------------- 10c. MANZIL SOC-GMA text lockup
   The framework name set in type, stacked as it reads in the brand mark.   */
.gma-lockup{margin:1.4rem 0 2.2rem}
.gma-lockup__name{
  font-family:var(--font-display);font-weight:800;line-height:1;margin:0;
  font-size:clamp(1.75rem,5.2vw,3.3rem);letter-spacing:.055em;color:#fff}
.gma-lockup__name .gold{color:var(--gold-400)}
.gma-lockup__name .tm{font-size:.3em;vertical-align:1.5em;letter-spacing:0}
.gma-lockup__sub{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;margin:.7rem 0 0;
  font-size:clamp(.68rem,1.55vw,1.02rem);letter-spacing:.048em;line-height:1.35;color:#fff}
.gma-lockup__rule{
  position:relative;display:block;width:min(100%,430px);height:1px;margin:1.15rem auto;
  background:var(--gold-500)}
.gma-lockup__rule::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--gold-500);
  box-shadow:0 0 0 5px var(--navy-800)}
.gma-lockup__promise{
  font-family:var(--font-display);font-weight:500;margin:0;
  font-size:clamp(.98rem,2vw,1.35rem);letter-spacing:-.005em;color:var(--gold-400)}

/* -------------------------------------- 10d. The SOC journey, as stages
   A connected progression: seven nodes on one track, ending at the
   destination — which is the idea the name Manzil carries.               */
.stages{
  --stage-track:rgba(201,163,38,.32);
  --stage-ink:var(--navy-800);
  --stage-node-bg:var(--paper);
  display:grid;grid-template-columns:repeat(7,1fr);gap:0;
  margin:2.8rem 0 0;padding:0;list-style:none;counter-reset:stage}
.stages li{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.85rem;
  text-align:center;padding:0 .25rem}

/* the track, drawn between one node and the previous */
.stages li::before{
  content:"";position:absolute;top:18px;right:50%;width:100%;height:2px;
  background:var(--stage-track)}
.stages li:first-child::before{display:none}

.stages__node{
  position:relative;z-index:1;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--stage-track);background:var(--stage-node-bg);
  font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.04em;
  color:var(--gold-600);
  transition:transform .45s var(--ease-out),border-color .35s var(--ease),
             background-color .35s var(--ease),color .35s var(--ease)}
.stages__label{
  font-family:var(--font-display);font-size:.79rem;font-weight:700;letter-spacing:.01em;
  line-height:1.3;color:var(--stage-ink)}

/* the destination */
.stages li.is-destination .stages__node{
  border-color:var(--gold-500);background:var(--gold-500);color:var(--navy-900);
  box-shadow:0 0 0 5px rgba(201,163,38,.16)}
.stages li.is-destination .stages__label{color:var(--gold-600)}

.stages li:hover .stages__node{transform:translateY(-3px);border-color:var(--gold-500)}

/* on dark sections */
.section--navy .stages,.hero .stages{
  --stage-track:rgba(201,163,38,.4);--stage-ink:#EAF0F8;--stage-node-bg:rgba(255,255,255,.05)}
.section--navy .stages__node,.hero .stages__node{color:var(--gold-400)}
.section--navy .stages li.is-destination .stages__label{color:var(--gold-400)}
.section--navy .stages li.is-destination .stages__node{
  box-shadow:0 0 0 5px rgba(201,163,38,.2);color:var(--navy-900)}

/* stacked as a vertical run on narrow screens */
@media (max-width:760px){
  .stages{grid-template-columns:1fr;gap:0;max-width:340px;margin-inline:auto}
  .stages li{flex-direction:row;align-items:center;gap:1.1rem;text-align:left;padding:.42rem 0}
  .stages li::before{top:auto;bottom:50%;right:auto;left:18px;
    width:2px;height:100%;transform:translateX(-1px)}
  .stages__label{font-size:.9rem}
}

/* ------------------------------------------------- 10e. Founder attribution */
.founder-line{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.45;color:var(--gold-600);
  margin:1.9rem auto 0;max-width:34ch}
.section--navy .founder-line{color:var(--gold-400)}
.founder-cite{margin:1.6rem 0 0;line-height:1.55}
.founder-cite b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--navy-800)}
.founder-cite span{display:block;font-size:.88rem;color:var(--ink-55)}
.section--navy .founder-cite b{color:#fff}
.section--navy .founder-cite span{color:#9DB2CE}

/* ------------------------------------------- 10f. Closing band foot (section 09) */
.closing-foot{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(1.8rem,4vw,3.2rem);align-items:end;text-align:left;
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2.2rem,4vw,3rem);
  border-top:1px solid rgba(255,255,255,.14)}
.closing-foot__value p{color:#B9C9DF;font-size:.94rem;margin-bottom:.9rem}
.closing-foot__value blockquote{
  margin:0;padding-left:1.2rem;border-left:3px solid var(--gold-500);
  font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;color:#EAF0F8}
@media (max-width:700px){
  .closing-foot{text-align:left}
  }

/* --------------------------------------------- 10g. Founder profile hero */
.hero--profile{padding-block:calc(var(--header-h) + clamp(2.4rem,5vw,4rem)) clamp(3.4rem,6vw,5rem)}
.profile{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.profile__portrait{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(201,163,38,.28);background:rgba(255,255,255,.04);
  box-shadow:0 18px 44px rgba(7,21,39,.36)}
.profile__portrait img{width:100%;height:auto;display:block}
.profile__intro h1{color:#fff;margin-bottom:.6rem}
.profile__role{font-family:var(--font-display);font-weight:600;line-height:1.45;
  font-size:clamp(1rem,1.6vw,1.18rem);color:#C7D6EA;margin:0 0 1.4rem}
.profile__promise{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1rem,1.5vw,1.15rem);color:var(--gold-400);margin:0;
  padding-top:1.3rem;border-top:1px solid rgba(201,163,38,.3)}
@media (max-width:820px){
  .profile{grid-template-columns:1fr;gap:2rem}
  .profile__portrait{max-width:320px}
}

/* long-form body copy */
.prose p{font-size:clamp(1rem,1.35vw,1.09rem);line-height:1.78;color:var(--ink-70);
  margin-bottom:1.5rem;max-width:70ch}
.prose p:last-child{margin-bottom:0}

/* portrait card used beside body copy */
.portrait-card{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--paper);box-shadow:var(--shadow-sm)}
.portrait-card img{width:100%;height:auto;display:block}
.portrait-card figcaption{padding:1.15rem 1.3rem;border-top:1px solid var(--line)}
.portrait-card figcaption b{display:block;font-family:var(--font-display);font-size:1rem;
  color:var(--navy-800)}
.portrait-card figcaption span{font-size:.86rem;color:var(--ink-55)}

/* photo in the contact card, in place of the initials avatar */
.contact-card__photo{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;
  border:1px solid rgba(201,163,38,.4)}

/* ------------------------------------------ 10h. Purpose / Vision / Mission */
.creed{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:1.4rem;align-items:start}
.creed__item{padding:2rem 1.8rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--paper);transition:border-color .35s var(--ease)}
.creed__item:hover{border-color:rgba(201,163,38,.42)}
.creed__label{font-family:var(--font-display);font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-600);margin:0 0 1rem}
.creed__text{font-size:1rem;line-height:1.72;color:var(--ink-70);margin:0}

/* --------------------------------------------------- 10h2. Legal identity */
.legal-identity{margin-top:clamp(2.2rem,4vw,3rem);padding:1.5rem 1.7rem;
  border-radius:var(--r-md);background:var(--paper-alt);border:1px solid var(--line);
  border-left:3px solid var(--gold-500)}
.legal-identity__label{font-family:var(--font-display);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-600);margin:0 0 .5rem}
.legal-identity__text{margin:0;font-size:.96rem;line-height:1.65;color:var(--ink-70)}
.legal-identity__text b{color:var(--navy-800)}

/* ------------------------------------------------------ 10i. MANZIL values */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.2rem}
.values__item{display:flex;gap:1.2rem;padding:1.6rem 1.5rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.values__item:hover{border-color:rgba(201,163,38,.4);background:rgba(255,255,255,.06)}
.values__letter{flex:none;display:grid;place-items:center;width:44px;height:44px;
  border-radius:10px;background:rgba(201,163,38,.14);border:1px solid rgba(201,163,38,.3);
  font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:var(--gold-400)}
.values__item h3{font-size:1.02rem;color:#fff;margin:0 0 .35rem}
.values__item p{font-size:.93rem;line-height:1.65;color:#B9C9DF;margin:0}

/* -------------------------------------------------- 10j. Pillar row / chips */
.pillars-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
.pillars-row li{padding:.55rem 1.1rem;border-radius:var(--r-pill);
  border:1px solid rgba(201,163,38,.35);background:rgba(201,163,38,.08);
  font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--gold-600)}
.pillars-row--navy li{color:var(--gold-300)}
.center .pillars-row{justify-content:center}
.chips--wide{max-width:none}

/* --------------------------------------- 10k. SOC Assumption to Confidence */
.arrow-line{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin:1.5rem 0;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.05rem,2vw,1.5rem)}
.arrow-line span{color:var(--ink-55)}
.arrow-line b{color:var(--gold-500);font-size:1.2em;line-height:1}
.arrow-line em{font-style:normal;color:var(--gold-600)}
.section--navy .arrow-line span{color:#8FA5C2}
.section--navy .arrow-line em{color:var(--gold-400)}

/* ------------------------------------------------- 10l. Pillar detail points */
.pillar__lead{font-family:var(--font-display);font-weight:700;color:var(--navy-800);
  margin-bottom:.7rem}
.pillar__points{display:grid;gap:.5rem;margin-top:.2rem}
.pillar__points li{position:relative;padding-left:1.1rem;font-size:.92rem;line-height:1.6;
  color:var(--ink-70)}
.pillar__points li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:1px;transform:rotate(45deg);background:var(--gold-500)}

/* the "looks beyond" list reads as set aside */
.line-list--struck li{color:var(--ink-55);font-weight:500}
.line-list--struck li::before{background:var(--ink-55);opacity:.5}

/* ------------------------------------------------- 10m. Assess/Mature/Assure */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:1.4rem;margin:0;padding:0;list-style:none}
.phases__item{position:relative;padding:2.1rem 1.8rem;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--paper);transition:border-color .35s var(--ease)}
.phases__item:hover{border-color:rgba(201,163,38,.42)}
.phases__num{display:block;font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;color:var(--gold-600);margin-bottom:.9rem}
.phases__item h3{color:var(--navy-800);margin-bottom:.4rem}
.phases__lead{font-family:var(--font-display);font-weight:600;color:var(--navy-700);
  font-size:.98rem;margin-bottom:.8rem}
.phases__item p{font-size:.94rem;line-height:1.65;color:var(--ink-70);margin-bottom:.9rem}
.phases__note{margin:0;padding-top:.9rem;border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--gold-600)}

/* ------------------------------------------------ 10n. Capability table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper)}
.capability-table{width:100%;border-collapse:collapse;min-width:560px;text-align:left}
.capability-table th,.capability-table td{padding:.95rem 1.25rem;
  border-bottom:1px solid var(--line);font-size:.94rem;line-height:1.55;vertical-align:top}
.capability-table thead th{font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);
  background:var(--paper-alt);white-space:nowrap}
.capability-table tbody th{font-family:var(--font-display);font-weight:700;color:var(--navy-800);
  width:36%}
.capability-table td{color:var(--ink-70)}
.capability-table tbody tr:last-child th,.capability-table tbody tr:last-child td{border-bottom:0}
.capability-table tbody tr{transition:background-color .3s var(--ease)}
.capability-table tbody tr:hover{background:var(--paper-alt)}

/* ------------------------------------- 10o. SOC Confidence Index formula */
.index-formula{margin-top:clamp(2.6rem,5vw,3.6rem);padding:clamp(2rem,4vw,2.8rem);
  border-radius:var(--r-lg);border:1px solid rgba(201,163,38,.32);
  background:rgba(201,163,38,.07);text-align:center}
.index-formula__sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem .9rem;margin:0 0 1rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(.86rem,1.5vw,1.05rem);color:#DCE6F4}
.index-formula__sum b{color:var(--gold-400)}
.index-formula__arrow{margin:0 0 .8rem;font-size:1.5rem;line-height:1;color:var(--gold-400)}
.index-formula__result{margin:0 0 1.1rem;font-family:var(--font-display);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  font-size:clamp(1.2rem,3vw,2rem);color:var(--gold-400)}
.index-formula__note{margin:0 auto;font-size:.93rem;line-height:1.68;color:#B9C9DF;max-width:62ch}

/* --------------------------------- 10p. The SOC-GMA proposition, as lines */
.proposition{display:grid;gap:.1rem;margin-top:clamp(1.8rem,3.4vw,2.6rem);max-width:860px}
.proposition__item{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;
  padding:1.05rem 1.3rem;border-radius:var(--r-md);border-bottom:1px solid var(--line);
  transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.proposition__item:last-child{border-bottom:0}
.proposition__item:hover{background:var(--paper);border-color:rgba(201,163,38,.35)}
.proposition__key{flex:none;min-width:7.5em;font-family:var(--font-display);font-weight:800;
  font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-600)}
.proposition__text{flex:1 1 16rem;font-size:clamp(.97rem,1.25vw,1.06rem);line-height:1.6;
  color:var(--ink-70)}
.section--navy .proposition__item{border-bottom-color:rgba(255,255,255,.1)}
.section--navy .proposition__item:hover{background:rgba(255,255,255,.05)}
.section--navy .proposition__key{color:var(--gold-400)}
.section--navy .proposition__text{color:#C3D2E6}

/* ------------------------------- 10q. Assess -> Mature -> Assure, as a flow */
.flow{display:grid;gap:0;margin:clamp(2rem,4vw,2.8rem) 0 0;padding:0;list-style:none;
  justify-items:center}
.flow__step{width:100%;max-width:620px;padding:1.7rem 1.8rem;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--paper);text-align:center;
  transition:border-color .35s var(--ease),box-shadow .4s var(--ease-out)}
.flow__step:hover{border-color:rgba(201,163,38,.45);box-shadow:var(--shadow-sm)}
.flow__step h3{margin:0 0 .35rem;color:var(--navy-800);
  font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:.02em;text-transform:uppercase}
.flow__lead{margin:0 0 .55rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(.98rem,1.3vw,1.1rem);color:var(--gold-600)}
.flow__step p:last-child{margin:0;font-size:clamp(.94rem,1.2vw,1.02rem);line-height:1.65;
  color:var(--ink-70)}
.flow__arrow{display:grid;place-items:center;width:100%;padding:.7rem 0;
  font-size:1.6rem;line-height:1;color:var(--gold-500)}
.section--navy .flow__step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.section--navy .flow__step h3{color:#fff}
.section--navy .flow__step p:last-child{color:#B9C9DF}

/* the sign-off line that closes the Manzil difference */
.closing-tagline{margin:clamp(1.6rem,3vw,2.2rem) auto 0;font-family:var(--font-display);
  font-weight:700;font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:-.01em;
  color:var(--gold-600)}
.section--navy .closing-tagline{color:var(--gold-400)}

/* --------------------------------------------------------- 11. Statement */
.statement{position:relative;text-align:center;padding:clamp(2.6rem,5vw,3.6rem) var(--gutter);
  border-block:1px solid rgba(201,163,38,.28);margin-top:clamp(2.6rem,5vw,3.6rem);
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.35;color:#fff;text-wrap:balance}
.statement em{font-style:normal;color:var(--gold-400)}
.statement--light{color:var(--navy-800);border-color:rgba(11,31,59,.14)}
.statement--light em{color:var(--gold-600)}

/* ------------------------------------------------------- 13. Split feature */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.split--wide{grid-template-columns:1.05fr .95fr}

.flagship{position:relative;padding:clamp(2.4rem,5vw,3.6rem);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,var(--navy-800),var(--navy-500) 58%,var(--navy-700));
  box-shadow:var(--shadow-lg);isolation:isolate}
.flagship img{width:min(100%,470px);margin-inline:auto}
.flagship__foot{margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);
  text-align:center;color:#C3D2E6;font-size:.94rem}

/* ------------------------------------------------------- 14. Pillar cards */
.pillar{position:relative;padding:2.2rem 1.9rem;border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s var(--ease)}
.pillar:hover{border-color:rgba(201,163,38,.42);box-shadow:var(--shadow-sm)}
.pillar__letter{font-family:var(--font-display);font-size:3.6rem;font-weight:800;line-height:.85;
  color:rgba(201,163,38,.3);display:block;margin-bottom:.85rem;
  transition:color .4s var(--ease)}
.pillar:hover .pillar__letter{color:var(--gold-500)}
.pillar h3{color:var(--navy-800);margin-bottom:.5rem}
.pillar p{font-size:.95rem;color:var(--ink-70);margin:0}

/* --------------------------------------------------------- 15. Stat block */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(178px,100%),1fr));gap:1.6rem;margin-top:2.6rem}
.stat{padding:1.4rem 0;border-top:2px solid rgba(201,163,38,.42)}
.stat__num{display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.05rem,4.4vw,2.85rem);line-height:1;color:var(--gold-500);margin-bottom:.45rem}
.stat__label{font-size:.89rem;color:var(--ink-70);line-height:1.55}
.section--navy .stat__label{color:#B9C9DF}
.section--navy .stat__num{color:var(--gold-400)}

/* ----------------------------------------------------- 16. Chips / sectors */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.chip{padding:.6rem 1.15rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);
  font-family:var(--font-display);font-size:.79rem;font-weight:600;letter-spacing:.04em;color:var(--navy-700);
  transition:border-color .35s var(--ease),color .35s var(--ease)}
.chip:hover{border-color:var(--gold-500);color:var(--gold-600)}
.chip--navy{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#DCE6F4}
.chip--navy:hover{background:rgba(201,163,38,.14);border-color:var(--gold-500);color:var(--gold-300)}

.framework-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.6rem;margin-top:1.7rem}
.framework-strip span{font-family:var(--font-display);font-size:.81rem;font-weight:700;letter-spacing:.12em;
  color:var(--ink-55);transition:color .35s var(--ease)}
.framework-strip span:hover{color:var(--gold-600)}
.section--navy .framework-strip span{color:#8FA5C2}
.section--navy .framework-strip span:hover{color:var(--gold-400)}

/* ------------------------------------------------------ 17. Quote / promise */
.promise{position:relative;padding:clamp(2.4rem,5vw,3.4rem);padding-left:clamp(2.1rem,4vw,3rem);border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--navy-500),var(--navy-800));color:#EAF0F8;
  box-shadow:var(--shadow-lg);overflow:hidden}
/* the promise reads as a statement, so it is marked with a gold rule */
.promise::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--gold-500);pointer-events:none}
.promise p{position:relative;font-size:clamp(1.01rem,1.6vw,1.18rem);line-height:1.74;color:#E7EEF8}
.promise p+p{font-size:.98rem;color:#C3D2E6;margin-top:1.2rem}
.promise .eyebrow{color:var(--gold-400)}

blockquote.pull{margin:0;padding:0 0 0 clamp(1.4rem,3vw,2.2rem);border-left:3px solid var(--gold-500);
  font-family:var(--font-display);font-weight:600;font-style:italic;
  font-size:clamp(1.06rem,2vw,1.4rem);line-height:1.6;letter-spacing:-.015em;color:var(--navy-800)}
.section--navy blockquote.pull,.hero blockquote.pull{color:#EAF0F8}
blockquote.pull--center{padding:1.9rem 0 0;border-left:0;border-top:3px solid var(--gold-500);
  text-align:center;max-width:52ch;margin-inline:auto}
.center .quote-cite{justify-content:center}
.quote-cite{display:flex;align-items:center;gap:.85rem;margin-top:1.9rem}
.quote-cite__bar{width:34px;height:2px;background:var(--gold-500);flex:none}
.quote-cite b{display:block;font-family:var(--font-display);font-size:.94rem;color:var(--navy-800)}
.quote-cite span{font-size:.84rem;color:var(--ink-55)}
.section--navy .quote-cite b{color:#fff}
.section--navy .quote-cite span{color:#9DB2CE}

/* ---------------------------------------------------------- 18. Do / Don't */
.contrast{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.4rem;margin-top:2.4rem}
.contrast__col{padding:1.9rem 1.7rem;border-radius:var(--r-lg)}
.contrast__col--no{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.contrast__col--yes{background:rgba(201,163,38,.1);border:1px solid rgba(201,163,38,.32)}
.contrast h3{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.2rem}
.contrast__col--no h3{color:#93A9C6}
.contrast__col--yes h3{color:var(--gold-400)}
.contrast li{display:flex;gap:.8rem;padding:.6rem 0;font-size:.96rem;line-height:1.6;color:#D3DEEE}
.contrast li svg{width:17px;height:17px;flex:none;margin-top:.32em}
.contrast__col--no li svg{color:#7D93B2}
.contrast__col--yes li svg{color:var(--gold-400)}

/* ------------------------------------------------------------ 19. Timeline */
.timeline{position:relative;margin-top:2.6rem;padding-left:2.2rem}
.timeline::before{content:"";position:absolute;left:6px;top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(180deg,var(--gold-500),rgba(201,163,38,.18))}
.timeline li{position:relative;padding:0 0 1.9rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-2.2rem;top:.5rem;width:14px;height:14px;
  border-radius:50%;background:var(--paper);border:2.5px solid var(--gold-500);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.timeline li:hover::before{transform:scale(1.25);box-shadow:0 0 0 5px rgba(201,163,38,.16)}
.timeline h3{font-size:1.05rem;margin-bottom:.35rem;color:var(--navy-800)}
.timeline p{font-size:.95rem;color:var(--ink-70);margin:0}
.section--navy .timeline li::before{background:var(--navy-800)}
.section--navy .timeline h3{color:#fff}
.section--navy .timeline p{color:#B9C9DF}

/* ------------------------------------------------------------- 20. Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);align-items:stretch}

/* The image standing where the enquiry form used to be. Stretching it to the
   details card keeps the two panels level instead of leaving a ragged edge. */
.contact-figure{margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy-800);box-shadow:var(--shadow-lg);min-height:clamp(320px,38vw,480px)}
.contact-figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.contact-card{position:relative;padding:clamp(2rem,4vw,2.6rem);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(155deg,var(--navy-800),var(--navy-500));color:#EAF0F8;box-shadow:var(--shadow-lg)}
.contact-card::before{content:"";position:absolute;width:300px;height:300px;top:-40%;right:-24%;
  border-radius:50%;background:radial-gradient(circle,rgba(201,163,38,.3),transparent 68%);filter:blur(48px)}
.contact-card h2{font-size:clamp(1.45rem,2.4vw,1.85rem);color:#fff}
.contact-card p{color:#C3D2E6;font-size:.97rem;position:relative}
.contact-card__person{display:flex;align-items:center;gap:1rem;margin:1.9rem 0 1.5rem;
  padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.14);position:relative}
.contact-card__avatar{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;
  background:rgba(201,163,38,.16);border:1px solid rgba(201,163,38,.4);
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--gold-400)}
.contact-card__person b{display:block;font-family:var(--font-display);font-size:1rem;color:#fff}
.contact-card__person span{font-size:.84rem;color:#A9BDD9}
.contact-list{display:grid;gap:.55rem;position:relative}
.contact-list a{display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-size:.94rem;color:#EAF0F8;word-break:break-word;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease-out)}
.contact-list a:hover{background:rgba(201,163,38,.14);border-color:rgba(201,163,38,.45);transform:translateX(4px)}
.contact-list svg{width:17px;height:17px;flex:none;color:var(--gold-400)}
.contact-list small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA5C2}

/* -------------------------------------------------------------- 21. Forms */
.form-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.75rem,4vw,2.6rem);box-shadow:var(--shadow-sm)}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(228px,100%),1fr));gap:1.15rem}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-display);font-size:.73rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-70)}
.field label .req{color:var(--gold-600)}
.field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-alt);color:var(--ink);
  font-family:var(--font-body);font-size:.96rem;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{min-height:142px;resize:vertical;line-height:1.65}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%2363718C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-500);
  background:var(--paper);box-shadow:0 0 0 4px rgba(201,163,38,.14)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#C1443A;box-shadow:0 0 0 4px rgba(193,68,58,.1)}
.field__hint{font-size:.77rem;color:var(--ink-55)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.7rem;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.form-note{font-size:.79rem;color:var(--ink-55);line-height:1.6;flex:1 1 240px}
.form-status{margin-top:1.2rem;padding:1rem 1.15rem;border-radius:var(--r-md);font-size:.91rem;line-height:1.65;
  border:1px solid rgba(201,163,38,.34);background:rgba(201,163,38,.09);color:var(--navy-800);display:none}
.form-status.is-shown{display:block;animation:fade-up .5s var(--ease-out) both}
.form-status a{color:var(--gold-600);font-weight:600;text-decoration:underline}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------ 22. CTA band */
.cta-band{position:relative;background:var(--navy-800);color:#fff;overflow:hidden;isolation:isolate;
  padding-block:clamp(4rem,8vw,6rem);text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(201,163,38,.2),transparent 62%)}
.cta-band .btn-row{justify-content:center}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,4vw,2.95rem);margin-bottom:.85rem;text-wrap:balance}
.cta-band p{color:#C3D2E6;font-size:clamp(1.01rem,1.5vw,1.15rem);max-width:54ch;margin-inline:auto}

/* --------------------------------------------------------------- 23. Footer */
.site-footer{background:var(--navy-900);color:#A9BDD9;padding-block:clamp(3.2rem,6vw,4.5rem) 0;font-size:.91rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:2.2rem 2.6rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.09)}
.site-footer .footer-logo{width:min(100%,300px);height:auto;margin-bottom:1.3rem}
.footer-brandline{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:.88rem;line-height:1.55;color:var(--gold-400);max-width:34ch}
.site-footer h4{font-family:var(--font-display);font-size:.71rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold-400);margin-bottom:1.1rem}
.site-footer li{margin-bottom:.62rem}
.site-footer a{transition:color .3s var(--ease),padding-left .35s var(--ease-out);
  display:inline-block;max-width:100%;overflow-wrap:anywhere}
.site-footer a:hover{color:var(--gold-400)}
.footer-links a:hover{padding-left:5px}
.footer-tag{max-width:40ch;line-height:1.7;color:#8FA5C2}
.footer-legal{margin:0;color:#7D93B2;text-align:right}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  padding-block:1.7rem;font-size:.82rem;color:#7D93B2}
.footer-bottom p{margin:0}

/* ------------------------------------------------------------ 24. Progress */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:110;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--gold-600),var(--gold-300));will-change:transform}

/* ------------------------------------------------------------- 25. Ribbon */
.ribbon{background:var(--navy-500);color:#DCE6F4;padding-block:.9rem;font-size:.82rem}
.ribbon__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem 1.5rem;text-align:center}
.ribbon b{color:var(--gold-400);font-family:var(--font-display);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase}

/* ---------------------------------------------------------- 26. Breadcrumb */
.crumbs{font-size:.77rem;color:#8FA5C2;margin-bottom:1.4rem;letter-spacing:.04em}
.crumbs a{color:#B9C9DF;transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--gold-400)}
.crumbs span{margin-inline:.5rem;opacity:.5}

/* ---------------------------------------------------------- 27. Responsive */
@media (max-width:1080px){
  .contact-grid{grid-template-columns:1fr}
  .split--wide{grid-template-columns:1fr}
}
@media (max-width:940px){
  .nav-toggle{display:flex}
  .header__cta{display:none}
  .nav{position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-900);
    padding:1rem var(--gutter) 2rem;max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    border-bottom:1px solid rgba(201,163,38,.3);clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    transition:clip-path .5s var(--ease-out),opacity .3s var(--ease)}
  .nav.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__link{width:100%;padding:1rem .25rem;font-size:.88rem;justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .nav__link::after{display:none}
  .nav__panel{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:0 0 0 .9rem;min-width:0;
    max-height:0;overflow:hidden;
    transition:max-height .45s var(--ease-out),padding-block .45s var(--ease-out)}
  .nav__panel::before{display:none}
  .nav__item--has-panel::after{display:none!important}
  .nav__item.is-open .nav__panel{max-height:340px;padding-block:.35rem .6rem}
  .nav__item.is-open .nav__caret{transform:rotate(180deg)}
  .nav__panel a{color:#C3D2E6;padding:.65rem .5rem;border-left:1.5px solid rgba(201,163,38,.34);
    border-radius:0 var(--r-sm) var(--r-sm) 0}
  .nav__panel a small{color:#8296B3}
  .nav__panel a:hover{background:rgba(255,255,255,.05);color:#fff}
  .nav__mobile-cta{display:block;margin-top:1.4rem}
  .nav__mobile-cta .btn{width:100%}
}
@media (min-width:941px){ .nav__mobile-cta{display:none} }
/* Narrow desktop: the full nav plus the CTA button no longer fit side by side.
   Drop the header button — "Talk to Pascoal" still sits under Contact and on every page. */
@media (min-width:941px) and (max-width:1120px){
  .header__cta{display:none}
  .nav__link{padding-inline:.72rem;font-size:.74rem;letter-spacing:.08em}
  .nav__link::after{left:.72rem;right:.72rem}
}
@media (max-width:640px){
  :root{--header-h:66px}
  .brand img{height:31px}
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%}
  .hero__quote{padding-left:1.05rem}
  .timeline{padding-left:1.8rem}
  .timeline li::before{left:-1.8rem}
  .card,.pillar{padding:1.7rem 1.4rem}
  .q-list li{padding:.95rem .8rem;gap:.8rem}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
    /* let the headline wrap naturally on narrow screens; fade the whole line in */
  .hero h1 .line-mask,.hero h1 .line-mask>span{
    display:inline;overflow:visible;animation:none;opacity:1;transform:none}
  .hero h1{opacity:0;animation:fade-up .95s var(--ease-out) .18s forwards}
  .statement{padding-inline:0}
  .contact-card__person{gap:.8rem}
}

/* --------------------------------------------------- 28. Reduced motion */
/* Below ~380px a nowrap button label is wider than the column it sits in. */
@media (max-width:380px){
  .btn{white-space:normal;padding-inline:1.1rem;font-size:.81rem;line-height:1.3}
  .btn svg{width:13px;height:13px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.line-mask>span,.fade-up{opacity:1;transform:none}
  /* A header that appears and disappears under the pointer is exactly the kind
     of scroll-linked movement this query exists to switch off. */
  .home .site-header{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  .home .brand,.home .header__cta,.hero__lockup,
  .hero--brand .hero__promise .btn-row{opacity:1!important;transform:none!important}
}

/* --------------------------------------------------------------- 29. Print */
@media print{
  .site-header,.progress,.cta-band,.nav-toggle,.hero__bg,.hero__grid,.hero__ridge{display:none!important}
  body{color:#000;background:#fff}
  .section--navy,.hero,.cta-band{background:#fff!important;color:#000!important}
}