/* The Partners: shared site styles. Used by every page. Design tokens are at the top (:root). */
/* =====================================================================
   0. DESIGN TOKENS (edit here first)
   ===================================================================== */
:root{
  /* Brand colors (from the brand guidelines) */
  --cream:#f9f7f2;          /* page background */
  --cream-deep:#f3efe6;     /* alternate section background */
  --white:#ffffff;          /* cards */
  --navy:#163157;           /* primary: text, buttons, dark sections */
  --navy-deep:#0e1f34;      /* darkest navy: footer, heavy contrast */
  --navy-soft:#3d5478;      /* body text on light (AA on cream) */
  --gold:#ddb479;           /* accent: lines, highlights, on-navy text */
  --bronze:#ad8652;         /* accent for shapes and large text only */
  --bronze-text:#7d5d30;    /* bronze for SMALL text (passes AA) */
  --peach:#ffdaa9;          /* soft highlight fills */
  --muted-text:#6a6969;     /* secondary text (passes AA) */
  --line:rgba(22,49,87,.10);/* hairlines and borders */
  --line-strong:rgba(22,49,87,.22);

  /* Type (Tajawal) */
  --font:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-body:1.0625rem;
  --fs-small:.9rem;
  --fs-eyebrow:.78rem;
  --fs-h1:clamp(2.4rem,5.4vw,4rem);
  --fs-h2:clamp(1.8rem,3.4vw,2.6rem);
  --fs-h3:1.25rem;

  /* Layout */
  --wrap:1160px;
  --gutter:24px;
  --section-y:clamp(72px,9vw,120px);

  /* Shape */
  --r-card:20px;
  --r-small:12px;
  --r-pill:999px;
  --shadow-card:0 1px 2px rgba(22,49,87,.04),0 12px 32px -18px rgba(22,49,87,.28);
  --shadow-lift:0 2px 4px rgba(22,49,87,.05),0 24px 48px -22px rgba(22,49,87,.38);

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* =====================================================================
   1. BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{
  margin:0; background:var(--cream); color:var(--navy);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;line-height:1.15;text-wrap:balance;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
:focus-visible{outline:3px solid var(--navy); outline-offset:3px; border-radius:6px;}
.skip-link{
  position:absolute; inset-inline-start:16px; top:-60px; z-index:100;
  background:var(--navy); color:var(--cream); padding:12px 18px; border-radius:var(--r-small);
  text-decoration:none; font-weight:700;
}
.skip-link:focus{top:12px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);}
@media (max-width:640px){ :root{--gutter:18px;} }

.section{padding-block:var(--section-y);}
.section--alt{background:var(--cream-deep); border-block:1px solid var(--line);}
.section--navy{background:var(--navy); color:var(--cream);}

.kicker{
  display:inline-block; font-size:var(--fs-eyebrow); letter-spacing:.12em; text-transform:uppercase;
  font-weight:800; color:var(--bronze-text); margin-bottom:14px;
}
.section--navy .kicker{color:var(--gold);}
.section-head{max-width:60ch; margin-bottom:clamp(36px,5vw,60px);}
.section-head h2{font-size:var(--fs-h2); font-weight:800; margin-bottom:14px;}
.section-head p{color:var(--navy-soft); font-size:1.08rem;}
.section--navy .section-head p{color:rgba(249,247,242,.78);}
.section-head--center{margin-inline:auto; text-align:center;}

/* Buttons: primary = bold text with an arrow (same as the navbar link). Secondary = quiet text with a gold underline. */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:8px 0; cursor:pointer;
  color:var(--navy); font:inherit; font-weight:800; font-size:1.02rem; text-decoration:none;
  transition:color .2s;
}
.btn .icon{width:22px; height:22px; flex:none; transition:transform .25s var(--ease);}
.btn:hover{color:var(--bronze-text);}
.btn:hover .icon{transform:translateX(5px);}
[dir="rtl"] .btn .icon{transform:scaleX(-1);}
[dir="rtl"] .btn:hover .icon{transform:scaleX(-1) translateX(5px);}
.btn--ghost{
  font-weight:600; font-size:.98rem; color:var(--navy-soft);
  padding:6px 0 5px; border-bottom:1.5px solid var(--gold);
  transition:color .2s, border-color .2s;
}
.btn--ghost .icon{width:18px; height:18px;}
.btn--ghost:hover{color:var(--navy); border-bottom-color:var(--bronze);}
.btn--gold{color:var(--gold);}
.btn--gold:hover{color:var(--cream);}
.section--navy .btn{color:var(--gold);}
.section--navy .btn:hover{color:var(--cream);}
.section--navy .btn--ghost{color:rgba(249,247,242,.82); border-bottom-color:rgba(221,180,121,.6);}
.section--navy .btn--ghost:hover{color:var(--cream); border-bottom-color:var(--gold);}
.btn:focus-visible{outline:2px solid var(--bronze); outline-offset:6px; border-radius:4px;}
.link-arrow{display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; color:var(--navy);}
.link-arrow .icon{width:18px;height:18px;transition:transform .2s var(--ease);}
.link-arrow:hover .icon{transform:translateX(4px);}
[dir="rtl"] .link-arrow .icon{transform:scaleX(-1);}

/* Scroll reveal (fade + rise). Visible by default without JS. */
html.js [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s);}
html.js [data-reveal].in{opacity:1; transform:none;}

/* =====================================================================
   2. NAV  (SECTION 0)
   ===================================================================== */
.nav{position:sticky; top:0; z-index:50; background:rgba(249,247,242,.92); backdrop-filter:blur(12px);}
.nav .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding-block:16px;}
.brand{display:flex; align-items:center; text-decoration:none;}
.brand img{display:block; height:44px; width:auto;}
.nav-links{display:flex; gap:36px; font-size:.95rem;}
.nav-links a{display:block; padding:6px 0; text-decoration:none; color:var(--navy); font-weight:700; transition:color .2s;}
.nav-links a:hover{color:var(--bronze-text);}
.nav-actions{display:flex; align-items:center; justify-content:flex-end; gap:12px;}
.nav-cta{display:inline-flex; align-items:center; gap:8px; padding:6px 0; color:var(--navy); font-weight:700; font-size:.95rem; text-decoration:none; transition:color .2s;}
.nav-cta .icon{width:20px; height:20px; transition:transform .25s var(--ease);}
.nav-cta:hover{color:var(--bronze-text);}
.nav-cta:hover .icon{transform:translateX(4px);}
[dir="rtl"] .nav-cta .icon{transform:scaleX(-1);}
[dir="rtl"] .nav-cta:hover .icon{transform:scaleX(-1) translateX(4px);}
.nav-toggle{display:none; background:none; border:1.5px solid var(--line-strong); border-radius:12px; width:44px; height:44px; cursor:pointer; color:var(--navy); align-items:center; justify-content:center;}
@media (max-width:900px){
  .nav .wrap{display:flex; justify-content:space-between;}
  .nav-toggle{display:inline-flex;}
  .nav-links{
    position:absolute; inset-inline:0; top:100%; flex-direction:column; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line); padding:8px var(--gutter) 18px;
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 6px; border-radius:0; border-bottom:1px solid var(--line);}
}
/* Phones: the Start a Partnership link lives inside the menu instead of squeezing the bar. */
.nav-links-cta{display:none;}
@media (max-width:640px){
  .nav-cta{display:none;}
  .nav-links .nav-links-cta{display:block;}
  .nav-links .nav-links-cta a{display:flex; align-items:center; justify-content:space-between; color:var(--bronze-text); font-weight:800; border-bottom:0; padding-top:18px;}
  .nav-links .nav-links-cta .icon{width:20px; height:20px;}
}

/* =====================================================================
   3. HERO  (SECTION 1)
   ===================================================================== */
.hero{position:relative; padding-block:clamp(56px,8vw,104px) clamp(64px,8vw,96px); overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(760px 420px at 92% 0%, rgba(255,218,169,.55), transparent 65%),
    radial-gradient(520px 320px at 0% 100%, rgba(221,180,121,.18), transparent 70%);
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,72px); align-items:center;}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr;} }
h1{font-size:var(--fs-h1); font-weight:900; letter-spacing:-.015em; margin-bottom:24px; max-width:15ch;}
/* Wave underline: one soft, thin wave under the highlighted word. It draws left to right once the word is typed. */
h1 em{font-style:normal; color:var(--navy); position:relative; display:inline-block; padding-inline:.02em;}
h1 em::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.2em; height:.24em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1);
}
.hero-title.draw em::after{clip-path:inset(0 0 0 0);}
@media (prefers-reduced-motion:reduce){ h1 em::after{clip-path:none; transition:none;} }
/* Typed headline: two lines of height are reserved so nothing below jumps while text is typed and deleted */
.hero-title{min-height:2.3em; text-wrap:wrap;}
.caret{display:inline-block; width:.07em; height:.82em; margin-inline-start:.06em; background:var(--gold); vertical-align:-.06em; animation:caretBlink 1.05s steps(1) infinite;}
.caret.typing{animation:none;}
@keyframes caretBlink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){ .caret{display:none;} }
.hero-sub{font-size:clamp(1.08rem,1.7vw,1.25rem); color:var(--navy-soft); max-width:50ch; margin-bottom:36px;}
.hero-ctas{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:34px;}
.cta-sep{width:1.5px; height:24px; background:var(--line-strong); flex:none;}
/* The underline under the secondary button draws left to right, holds, wipes away and loops. */
.btn--ghost{position:relative; border-bottom:0; padding:6px 0;}
.btn--ghost::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1.5px; pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--bronze));
  clip-path:inset(0 100% 0 0);
  animation:ctaLine 6s cubic-bezier(.65,0,.25,1) infinite;
}
@keyframes ctaLine{
  0%{clip-path:inset(0 100% 0 0);}
  18%,64%{clip-path:inset(0 0 0 0);}
  82%,100%{clip-path:inset(0 0 0 100%);}
}
@media (prefers-reduced-motion:reduce){ .btn--ghost::after{animation:none; clip-path:none;} }
@media (max-width:380px){ .cta-sep{display:none;} }
.hero-points{display:flex; flex-wrap:wrap; gap:10px 26px; font-size:var(--fs-small); font-weight:700; color:var(--navy-soft);}
.hero-points li{display:flex; align-items:center; gap:8px;}
.hero-points .icon{width:22px;height:22px;flex:none;color:var(--bronze);stroke-width:1.8;}
@media (min-width:900px){ .hero-points{flex-wrap:nowrap; gap:10px 22px;} .hero-points li{white-space:nowrap;} }

/* Hero visual: decorative "engagement board" built in pure CSS (no images) */
.board{position:relative; padding:12px 12px 34px;}
.board-card{
  background:var(--white); border:1px solid var(--line); border-radius:24px;
  padding:26px 26px 52px; box-shadow:var(--shadow-lift);
}
.board-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
.board-title{font-weight:800; font-size:1.02rem;}
.board-chip{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--bronze-text); background:rgba(221,180,121,.28); padding:5px 11px; border-radius:var(--r-pill);}
/* The free-weeks highlight: the extra two weeks at the start, on us */
.free-block{
  position:relative; margin-bottom:24px; padding:22px 22px 20px; border-radius:18px;
  background:linear-gradient(135deg, rgba(221,180,121,.34), rgba(255,218,169,.5));
  border:1px solid rgba(173,134,82,.4);
}
.free-tag{display:inline-block; margin-bottom:10px; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); background:var(--navy); padding:5px 11px; border-radius:var(--r-pill);}
.free-big{font-size:clamp(1.7rem,3vw,2.15rem); font-weight:900; letter-spacing:-.01em; line-height:1.1; color:var(--navy); margin-bottom:8px;}
.free-sub{font-size:.95rem; color:var(--navy-soft); line-height:1.45; max-width:30ch;}
.track-bar{display:grid; grid-template-columns:repeat(6,1fr); gap:6px;}
.seg{display:block; height:12px; border-radius:var(--r-pill); background:rgba(22,49,87,.1);}
.seg.free{background:var(--gold);}
html.js .board .seg{transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease); transition-delay:var(--d,.3s);}
html.js .board.in .seg{transform:scaleX(1);}
html.js .board.in .seg.free{animation:freeGlow 2.6s ease-in-out 1.6s infinite;}
@keyframes freeGlow{0%,100%{box-shadow:0 0 0 0 rgba(221,180,121,0);} 50%{box-shadow:0 0 0 5px rgba(221,180,121,.35);}}
.track-labels{display:grid; grid-template-columns:2fr 4fr; gap:6px; margin-top:10px; font-size:.84rem; font-weight:700; color:var(--muted-text);}
.track-labels span:first-child{color:var(--bronze-text);}
.float{
  position:absolute; background:var(--navy); color:var(--cream); border-radius:18px; padding:14px 18px;
  box-shadow:var(--shadow-lift); display:flex; align-items:center; gap:12px; font-size:.86rem; line-height:1.3;
}
.float b{display:block; font-size:.95rem;}
.float small{color:rgba(249,247,242,.7);}
.float--a{inset-inline-start:-6px; bottom:-22px;}
.float--b{inset-inline-end:-4px; top:-10px; background:var(--peach); color:var(--navy);}
.float--b small{color:var(--navy-soft);}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:grid;place-items:center;font-weight:900;font-size:.9rem;flex:none;}
.float--b .avatar{background:var(--navy); color:var(--gold);}
@media (max-width:520px){ .float--a{inset-inline-start:0;} .float--b{inset-inline-end:0;} }

/* =====================================================================
   4. PROOF STRIP  (SECTION 2)
   ===================================================================== */
.proof{padding-block:clamp(44px,6vw,68px); border-block:1px solid var(--line); background:var(--white);}
.proof-label{font-size:var(--fs-eyebrow); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-text); font-weight:700; margin-bottom:22px; text-align:center;}
/* Market tabs: text tabs in the navbar style; the active one gets the same gold wave as the hero headline */
.market-tabs{display:none; justify-content:center; flex-wrap:wrap; gap:6px clamp(18px,4vw,44px); margin-bottom:34px;}
.proof.tabs-on .market-tabs{display:flex;}
.market-tab{
  position:relative; background:none; border:0; cursor:pointer; font:inherit; font-weight:800; font-size:1.12rem;
  color:var(--muted-text); padding:8px 2px 14px; display:inline-flex; align-items:center; gap:8px; transition:color .2s;
}
.market-tab:hover{color:var(--navy);}
.market-tab[aria-selected="true"]{color:var(--navy);}
.market-tab .tab-count{font-size:.72rem; font-weight:800; color:var(--bronze-text); background:rgba(221,180,121,.28); padding:2px 8px; border-radius:var(--r-pill);}
.market-tab::after{
  content:""; position:absolute; inset-inline:-2px; bottom:4px; height:auto; aspect-ratio:14.7/1; pointer-events:none; /* same proportions as the hero wave */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .6s cubic-bezier(.65,0,.25,1);
}
.market-tab[aria-selected="true"]::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) infinite;}
.market-tab:focus-visible{outline:2px solid var(--bronze); outline-offset:4px; border-radius:6px;}
.market-panel{display:block;}
.market-panel + .market-panel{margin-top:40px;}
.market-panel > h2{font-size:1.1rem; font-weight:800; margin-bottom:16px; text-align:center;}
.proof.tabs-on .market-panel > h2{display:none;}
.proof.tabs-on .market-panel[hidden]{display:none;}
.client-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:18px;}
.client{
  flex:1 1 300px; max-width:368px; display:flex; flex-direction:column; gap:12px; text-align:start;
  background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:22px 22px 20px;
  transition:translate .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.client:hover{translate:0 -4px; box-shadow:var(--shadow-card); border-color:var(--gold);}
.client-head{display:flex; align-items:center; gap:14px;}
.client-logo{box-sizing:border-box; height:72px; min-width:72px; border-radius:16px; background:var(--navy); color:var(--gold); display:grid; place-items:center; font-weight:900; font-size:1.1rem; letter-spacing:.02em; flex:none; overflow:hidden;}
.client-logo img{display:none; height:54px; width:auto; max-width:124px; object-fit:contain;}
.client-logo.has-img{background:var(--logo-bg,var(--white)); border:1px solid var(--line); padding:8px 12px;}
.client-logo.has-img img{display:block;}
.client-logo.has-img span{display:none;}
.client-name{font-size:1.12rem; font-weight:800; color:var(--navy); line-height:1.2;}
.client-sector:empty{display:none;}
.client-sector{font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze-text); margin-top:3px;}
.client-did{font-size:.97rem; color:var(--navy-soft); line-height:1.5;}
.client-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
.client .chips{display:flex; flex-wrap:wrap; gap:6px;}
.client .link-arrow{font-size:.9rem; color:var(--navy);}
.client .link-arrow:hover{color:var(--bronze-text);}
html.js .proof.tabs-on .market-panel:not([hidden]) .client{animation:clientIn .5s var(--ease) both; animation-delay:calc(var(--i,0)*.07s);}
@keyframes clientIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .market-tab::after{transition:none;} html.js .proof.tabs-on .market-panel:not([hidden]) .client{animation:none;} }

/* Every gold wave under a heading draws, holds, wipes away and draws again. */
@keyframes waveLoop{
  0%{clip-path:inset(0 100% 0 0);}
  20%,68%{clip-path:inset(0 0 0 0);}
  88%,100%{clip-path:inset(0 0 0 100%);}
}
@media (prefers-reduced-motion:reduce){ mark::after{animation:none !important; clip-path:none !important;} .market-tab::after{animation:none !important;} }

/* =====================================================================
   5. THESIS: the position statement beside a "your team" board  (SECTION 3)
   Mirrors the hero: same wave underline, same card language, text and card swap sides.
   ===================================================================== */
.thesis{padding-block:clamp(72px,9vw,120px);}
.thesis-grid{display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,72px); align-items:start;}
@media (min-width:941px){ .thesis-grid{grid-template-columns:.92fr 1.08fr;} .thesis-card-wrap{order:-1;} }
/* The statement sits at the top and follows the scroll while the taller card passes. */
@media (min-width:941px){ .thesis-copy{position:sticky; top:110px;} }
.thesis-text{font-size:clamp(1.9rem,3.7vw,3rem); font-weight:900; line-height:1.18; letter-spacing:-.015em; max-width:17ch; text-wrap:balance; margin-bottom:30px;}
.thesis-text mark{background:none; color:var(--navy); position:relative; display:inline-block; padding-inline:.02em;}
.thesis-text mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.2em; height:.24em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .8s;
}
.thesis-copy.in .thesis-text mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .thesis-text mark::after{clip-path:none;}
.thesis-card-wrap{position:relative; padding:0 12px 34px;}
.team-card{background:var(--white); border:1px solid var(--line); border-radius:24px; padding:26px 26px 52px; box-shadow:var(--shadow-lift);}
.team-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.team-title{font-weight:800; font-size:1.02rem;}
.team-list{display:block;}
.team-row{display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line);}
.team-ico{width:40px; height:40px; border-radius:12px; background:rgba(221,180,121,.28); color:var(--bronze-text); display:grid; place-items:center; flex:none;}
.team-ico .icon{width:21px; height:21px; stroke-width:1.8;}
.team-name{font-weight:700; color:var(--navy); flex:1;}
.team-ok{width:24px; height:24px; border-radius:50%; background:var(--gold); color:var(--navy-deep); display:grid; place-items:center; flex:none;}
.team-ok .icon{width:14px; height:14px; stroke-width:3;}
.team-note{margin-top:4px; padding-top:14px; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted-text); font-weight:600;}
.thesis-card-wrap .float--a{inset-inline-start:-6px; bottom:-4px;}
html.js .team-row{opacity:0; transform:translateX(-14px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i)*.09s + .25s);}
html.js .thesis-card-wrap.in .team-row{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html.js .team-row{opacity:1; transform:none; transition:none;}
  .thesis-text mark::after{clip-path:none; transition:none;}
}

/* =====================================================================
   6. PARTNERSHIP MODEL: four index cards  (SECTION 4)
   ===================================================================== */
.model-head h2 mark{background:none; color:inherit; position:relative; display:inline-block;}
.model-head h2 mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.18em; height:.22em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .6s;
}
.model-head.in h2 mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .model-head h2 mark::after{clip-path:none;}
/* The four promises as one written agreement: a raised white card with four clauses, like the hero card. */
.promise{max-width:1040px; margin-inline:auto; background:var(--white); border:1px solid var(--line); border-top:5px solid var(--gold); border-radius:24px; box-shadow:var(--shadow-lift); overflow:hidden;}
.promise-top{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:20px clamp(20px,3vw,32px); border-bottom:1px solid var(--line);}
.promise-brand{display:flex; align-items:center; gap:12px; font-weight:800; color:var(--navy);}
.promise-brand img{height:28px; width:auto;}
.promise-top .board-chip{white-space:nowrap;}
.clauses{display:grid; grid-template-columns:1fr 1fr;}
.clause{
  display:grid; grid-template-columns:auto 1fr; gap:4px 20px; align-items:start; padding:clamp(24px,3vw,34px) clamp(20px,3vw,32px);
  transition:background .25s;
}
.clause:nth-child(odd){border-inline-end:1px solid var(--line);}
.clause:nth-child(-n+2){border-bottom:1px solid var(--line);}
.clause:hover{background:rgba(221,180,121,.1);}
.clause-ico{grid-row:span 3; width:56px; height:56px; border-radius:16px; background:rgba(221,180,121,.28); color:var(--bronze-text); display:grid; place-items:center; transition:background .25s, color .25s;}
.clause-ico .icon{width:27px; height:27px; stroke-width:1.8;}
.clause:hover .clause-ico{background:var(--navy); color:var(--gold);}
.clause-num{font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-text);}
.clause h3{font-size:1.2rem; font-weight:800; margin-bottom:4px;}
.clause p{color:var(--navy-soft); font-size:.98rem;}
.promise-foot{display:flex; justify-content:space-between; align-items:center; gap:14px 24px; flex-wrap:wrap; padding:18px clamp(20px,3vw,32px); border-top:1px solid var(--line); background:rgba(221,180,121,.1);}
.promise-sum{font-weight:700; color:var(--navy-soft); font-size:.95rem;}
@media (max-width:760px){
  .clauses{grid-template-columns:1fr;}
  .clause:nth-child(odd){border-inline-end:0;}
  .clause:not(:last-child){border-bottom:1px solid var(--line);}
  .clause-ico{width:48px; height:48px;}
}
@media (prefers-reduced-motion:reduce){ .model-head h2 mark::after{clip-path:none; transition:none;} .clause, .clause-ico{transition:none;} }

/* =====================================================================
   7. HOW IT WORKS (navy band)  (SECTION 5)
   Continues the hero: copy with the gold wave on one side, the white "first month" card on the other,
   then a four-step timeline whose gold line draws itself.
   ===================================================================== */
.process-top{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; margin-bottom:clamp(52px,7vw,88px);}
@media (max-width:940px){ .process-top{grid-template-columns:1fr;} }
.process-copy{margin-bottom:0;}
.process-copy h2{max-width:16ch; line-height:1.15; text-wrap:balance;}
.process-copy p{margin-bottom:26px;}
.process-copy h2 mark{background:none; color:inherit; position:relative; display:inline-block;}
.process-copy h2 mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.18em; height:.22em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .7s;
}
.process-copy.in h2 mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .process-copy h2 mark::after{clip-path:none;}

.weeks{background:var(--white); color:var(--navy); border-radius:24px; padding:26px; box-shadow:var(--shadow-lift);}
.weeks-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.weeks-title{font-weight:800; font-size:1.02rem;}
.weeks-bar{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:16px;}
.week{
  border-radius:14px; padding:14px 6px 12px; text-align:center; background:rgba(22,49,87,.07);
  font-weight:800; font-size:.86rem; line-height:1.2; color:var(--navy);
}
.week small{display:block; font-weight:600; font-size:.64rem; color:var(--muted-text); margin-top:5px; letter-spacing:.04em; text-transform:uppercase;}
.week--free{background:var(--gold); color:var(--navy-deep);}
.week--free small{color:var(--navy-deep); opacity:.85;}
html.js .week{opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i)*.09s);}
html.js .weeks.in .week{opacity:1; transform:none;}
html.js .weeks.in .week--free{animation:freeGlow 2.6s ease-in-out 1.6s infinite;}
.weeks-legend{display:flex; flex-wrap:wrap; gap:8px 26px; font-size:.86rem; font-weight:700; color:var(--navy-soft);}
.weeks-legend span{display:flex; align-items:center; gap:9px;}
.weeks-legend i{width:14px; height:14px; border-radius:5px; display:block; border:1.5px solid rgba(22,49,87,.3);}
.weeks-legend i.free{background:var(--gold); border-color:var(--gold);}
@media (max-width:620px){ .weeks-bar{grid-template-columns:repeat(3,1fr);} }

.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.tl-step{position:relative; text-align:center;}
.tl-node{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin:0 auto 22px; position:relative; z-index:1;
  background:var(--navy-deep); border:2px solid var(--gold); color:var(--gold);
}
.tl-node .icon{width:24px; height:24px; stroke-width:1.8;}
.tl-step--free .tl-node{background:var(--gold); color:var(--navy-deep);}
/* Each node sits in the middle of its column; the line runs from the edge of one node to the edge of the next. */
.tl-step::before, .tl-step::after{content:""; position:absolute; top:27px; left:calc(50% + 34px); width:calc(100% - 40px); height:2px; background:rgba(221,180,121,.3);}
.tl-step:last-child::before, .tl-step:last-child::after{display:none;}
.tl-step::after{background:var(--gold); transform:scaleX(0); transform-origin:left;}
.tl-num{font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
.tl-step h3{font-size:var(--fs-h3); font-weight:800; margin-bottom:8px;}
.tl-step p{color:rgba(249,247,242,.78); font-size:.98rem; max-width:32ch; margin-inline:auto;}
html.js .tl-step{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i)*.18s);}
html.js .timeline.in .tl-step{opacity:1; transform:none;}
html.js .timeline.in .tl-step::after{transform:scaleX(1); transition:transform .8s cubic-bezier(.65,0,.25,1); transition-delay:calc(var(--i)*.35s + .35s);}
.step-tag{display:inline-block; margin-top:14px; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-deep); background:var(--gold); padding:4px 10px; border-radius:var(--r-pill);}
@media (max-width:940px){
  .timeline{grid-template-columns:1fr; gap:34px;}
  .tl-step{padding-inline-start:84px; min-height:56px; text-align:start;}
  .tl-step p{max-width:none; margin-inline:0;}
  .tl-node{position:absolute; left:0; top:0; margin:0;}
  .tl-step::before, .tl-step::after{top:60px; bottom:-30px; left:27px; right:auto; width:2px; height:auto;}
  .tl-step::after{transform:scaleY(0); transform-origin:top;}
  html.js .timeline.in .tl-step::after{transform:scaleY(1);}
}
@media (prefers-reduced-motion:reduce){
  html.js .tl-step{opacity:1; transform:none; transition:none;}
  html.js .tl-step::after, html.js .timeline.in .tl-step::after{transform:none; transition:none;}
  .process-copy h2 mark::after{clip-path:none; transition:none;}
}

/* =====================================================================
   8. VENDOR vs PARTNER  (SECTION 6)
   ===================================================================== */
/* A side-by-side grid: what a typical vendor does vs. how The Partners works. The Partners column is a raised card,
   like the hero card. Under 820px each row becomes its own small card. */
.versus-head h2 mark{background:none; color:inherit; position:relative; display:inline-block;}
.versus-head h2 mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.18em; height:.22em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .6s;
}
.versus-head.in h2 mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .versus-head h2 mark::after{clip-path:none;}
.versus{display:grid; grid-template-columns:200px 1fr 1.1fr; grid-template-rows:auto repeat(4,auto); position:relative; max-width:1040px; margin-inline:auto;}
.vs-row{display:contents;}
.vs-h, .vs-label, .vs-cell{grid-row:var(--r,1);}
.vs-h--blank, .vs-label{grid-column:1;}
.vs-h--them, .vs-cell--them{grid-column:2;}
.vs-h--us, .vs-cell--us{grid-column:3;}
.vs-back{grid-column:3; grid-row:1 / 6; background:var(--white); border:1px solid var(--line); border-top:5px solid var(--gold); border-radius:24px; box-shadow:var(--shadow-lift); margin:-6px 0 -10px;}
.vs-h{padding:6px 28px 22px; font-weight:800; font-size:1.05rem; position:relative; z-index:1; display:flex; align-items:flex-end; gap:10px;}
.vs-h--them{color:var(--muted-text);}
.vs-h--us{color:var(--navy); padding-top:22px; align-items:center;}
.vs-h--us img{height:26px; width:auto;}
.vs-label, .vs-cell{position:relative; z-index:1; padding:24px 28px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px;}
.vs-label{align-items:center; font-weight:800; color:var(--navy); padding-inline-start:4px;}
.vs-ico{width:42px; height:42px; border-radius:12px; background:rgba(221,180,121,.28); color:var(--bronze-text); display:grid; place-items:center; flex:none;}
.vs-ico .icon{width:21px; height:21px; stroke-width:1.8;}
.vs-cell--them{color:var(--muted-text);}
.vs-cell--us{color:var(--navy); font-weight:700;}
.vs-no, .vs-ok{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none;}
.vs-no{background:rgba(163,90,74,.13); color:#a35a4a;}
.vs-ok{background:var(--gold); color:var(--navy-deep);}
.vs-no .icon, .vs-ok .icon{width:13px; height:13px; stroke-width:3;}
.vs-cell > span:last-child{flex:1 1 0; min-width:0;}
.vs-cell::before{display:none;}
html.js .vs-label, html.js .vs-cell{opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i)*.12s + .15s);}
html.js .versus.in .vs-label, html.js .versus.in .vs-cell{opacity:1; transform:none;}
html.js .vs-ok{transform:scale(0); transition:transform .4s cubic-bezier(.3,1.5,.5,1); transition-delay:calc(var(--i)*.12s + .5s);}
html.js .versus.in .vs-ok{transform:scale(1);}
@media (max-width:820px){
  .versus{grid-template-columns:1fr; grid-template-rows:none; max-width:560px;}
  .vs-h, .vs-label, .vs-cell{grid-row:auto; grid-column:auto;}
  .vs-back, .vs-row.vs-row--head{display:none;}
  .vs-row{display:block; background:var(--white); border:1px solid var(--line); border-radius:20px; padding:20px 20px 8px; margin-bottom:16px; box-shadow:var(--shadow-card);}
  .vs-label, .vs-cell{padding:12px 0; flex-wrap:wrap;}
  .vs-label{border-top:0; padding-top:0;}
  .vs-cell::before{display:block; flex:0 0 100%; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-text); content:attr(data-label);}
  .vs-cell--them::before{color:var(--muted-text);}
  .vs-cell .vs-no, .vs-cell .vs-ok{margin-top:0;}
}
@media (prefers-reduced-motion:reduce){
  html.js .vs-label, html.js .vs-cell, html.js .vs-ok{opacity:1; transform:none; transition:none;}
  .versus-head h2 mark::after{clip-path:none; transition:none;}
}

/* =====================================================================
   9. SERVICES  (SECTION 7)
   ===================================================================== */
/* Copy stays in view on the left while the services scroll on the right. A raised white card for the full
   service (like the hero card), then a quiet list: icon, name, one line, arrow. */
.services-split{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,5vw,72px); align-items:start;}
@media (max-width:940px){ .services-split{grid-template-columns:1fr;} }
.services-copy{position:sticky; top:110px; margin-bottom:0;}
@media (max-width:940px){ .services-copy{position:static;} }
.services-copy h2{max-width:13ch; line-height:1.15; text-wrap:balance;}
.services-copy p{margin-bottom:26px;}
.services-copy h2 mark{background:none; color:inherit; position:relative; display:inline-block;}
.services-copy h2 mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.18em; height:.22em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .6s;
}
.services-copy.in h2 mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .services-copy h2 mark::after{clip-path:none;}
.service-full{
  display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:center; text-decoration:none; margin-bottom:14px;
  background:var(--white); border:1px solid var(--line); border-top:5px solid var(--gold); border-radius:24px; padding:26px 28px 24px;
  box-shadow:var(--shadow-lift); transition:transform .3s var(--ease);
}
.service-full:hover{translate:0 -4px;}
.service-full .service-icon{margin:0; width:60px; height:60px; border-radius:18px; grid-row:span 2;}
.service-full h3{font-size:1.3rem; font-weight:800; margin-bottom:6px;}
.service-full p{color:var(--navy-soft); font-size:.98rem; margin:0;}
.service-full .link-arrow{grid-column:2; margin-top:10px; font-size:.92rem;}
.service-full:hover .link-arrow .icon{transform:translateX(4px);}
@media (max-width:560px){ .service-full{grid-template-columns:1fr;} .service-full .service-icon{grid-row:auto;} .service-full .link-arrow{grid-column:1;} }
.service-icon{width:48px; height:48px; border-radius:14px; background:var(--navy); color:var(--gold); display:grid; place-items:center; flex:none;}
.service-icon .icon{width:24px; height:24px; stroke-width:1.8;}
.svc-list{display:block;}
.svc{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; text-decoration:none; min-width:0;
  padding:20px 20px; border-top:1px solid var(--line); border-radius:18px; border-top-left-radius:0; border-top-right-radius:0;
  transition:background .25s, box-shadow .25s, transform .25s var(--ease);
}
.svc:first-child{border-top:0;}
.svc .svc-ico{width:46px; height:46px; border-radius:14px; background:rgba(221,180,121,.28); color:var(--bronze-text); display:grid; place-items:center; transition:background .25s, color .25s;}
.svc .svc-ico .icon{width:22px; height:22px; stroke-width:1.8;}
.svc h3{font-size:1.08rem; font-weight:800; margin:0 0 3px; color:var(--navy); display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;}
.svc p{margin:0; color:var(--navy-soft); font-size:.95rem; line-height:1.45;}
.svc .svc-go{width:22px; height:22px; color:var(--bronze); transition:transform .25s var(--ease), color .25s;}
.svc:hover{background:var(--white); box-shadow:var(--shadow-card); border-radius:18px; translate:4px 0;}
.svc:hover .svc-ico{background:var(--navy); color:var(--gold);}
.svc:hover .svc-go{transform:translateX(4px); color:var(--navy);}
.svc .badge{margin:0; align-self:auto;}
@media (max-width:560px){ .svc{grid-template-columns:auto 1fr; padding-inline:12px;} .svc .svc-go{display:none;} }
.badge{display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--bronze-text); background:rgba(173,134,82,.15); padding:4px 10px; border-radius:var(--r-pill); margin-bottom:12px; align-self:flex-start;}
.service-featured-tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--navy);color:var(--cream);padding:4px 11px;border-radius:var(--r-pill);margin-bottom:10px;}
@media (prefers-reduced-motion:reduce){ .services-copy h2 mark::after{clip-path:none; transition:none;} .svc, .service-full{transition:none;} }

/* =====================================================================
   10. WORK: client cards  (SECTION 8)
   ===================================================================== */
.work-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:1040px){ .work-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:580px){ .work-grid{grid-template-columns:1fr;} }
.work-card{
  display:flex; flex-direction:column; text-decoration:none; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.work-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift);}
.work-thumb{
  aspect-ratio:16/10; display:grid; place-items:center; position:relative;
  background:linear-gradient(135deg, var(--navy), var(--navy-soft)); color:var(--cream);
  font-weight:900; font-size:1.5rem; letter-spacing:.02em; text-align:center; padding:16px;
}
.work-thumb::after{content:""; position:absolute; inset:auto 0 0 0; height:5px; background:var(--gold);}
.work-thumb--b{background:linear-gradient(135deg,#7d5d30,#ad8652);}
.work-thumb--c{background:linear-gradient(135deg,#0e1f34,#163157);}
.work-thumb--d{background:linear-gradient(135deg,#3d5478,#527abb);}
.work-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.work-meta{font-size:var(--fs-eyebrow); letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--bronze-text);}
.work-body h3{font-size:var(--fs-h3); font-weight:800;}
.work-body p{color:var(--navy-soft); font-size:.97rem;}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:8px;}
.chip{font-size:.74rem; font-weight:700; color:var(--navy-soft); background:rgba(22,49,87,.07); padding:5px 11px; border-radius:var(--r-pill);}
.work-foot{margin-top:46px; text-align:center;}

/* =====================================================================
   11. INDUSTRIES  (SECTION 9)
   ===================================================================== */
.industries-head h2 mark{background:none; color:inherit; position:relative; display:inline-block;}
.industries-head h2 mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.18em; height:.22em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .6s;
}
.industries-head.in h2 mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .industries-head h2 mark::after{clip-path:none;}
/* Five tiles. A gold line draws across the top of each as it appears; on hover the icon plate turns navy. */
.industries{display:flex; flex-wrap:wrap; justify-content:center; gap:16px;}
.industry{
  position:relative; flex:0 0 calc(33.333% - 11px); min-width:0; text-decoration:none; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:30px 22px 26px;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease);
}
@media (max-width:760px){ .industry{flex-basis:100%;} }
.industry::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--gold),var(--bronze));
  transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.65,0,.25,1); transition-delay:calc(var(--n,0)*.1s + .3s);
}
.industry.in::before{transform:scaleX(1);}
html:not(.js) .industry::before{transform:none;}
.industry:hover{translate:0 -5px; border-color:var(--gold); box-shadow:var(--shadow-card);}
.industry-ico{width:52px; height:52px; border-radius:15px; background:rgba(221,180,121,.28); color:var(--bronze-text); display:grid; place-items:center; margin-bottom:18px; transition:background .25s, color .25s;}
.industry-ico .icon{width:26px; height:26px; stroke-width:1.8;}
.industry:hover .industry-ico{background:var(--navy); color:var(--gold);}
.industry h3{font-size:1.05rem; font-weight:800; margin-bottom:8px;}
.industry p{font-size:.92rem; color:var(--navy-soft); line-height:1.5;}
@media (prefers-reduced-motion:reduce){ .industries-head h2 mark::after{clip-path:none; transition:none;} .industry::before{transform:none; transition:none;} }

/* =====================================================================
   12. THREE MARKETS  (SECTION 10)
   ===================================================================== */
.markets-head h2 mark{background:none; color:inherit; position:relative; display:inline-block;}
.markets-head h2 mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.18em; height:.22em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .6s;
}
.markets-head.in h2 mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .markets-head h2 mark::after{clip-path:none;}
/* Three cards, each with a ten-segment bar like the hero card: one segment per service available there. */
.markets{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
@media (max-width:860px){ .markets{grid-template-columns:1fr; max-width:520px; margin-inline:auto;} }
.market{
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-top:5px solid rgba(221,180,121,.5);
  border-radius:24px; padding:28px 28px 26px; box-shadow:var(--shadow-card);
}
.market--home{border-top-color:var(--gold); box-shadow:var(--shadow-lift);}
@media (min-width:861px){ .market--home{position:relative; top:-10px;} }
.market-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px;}
.market h3{font-size:1.6rem; font-weight:900; letter-spacing:-.01em;}
.market-city{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--bronze-text); background:rgba(221,180,121,.28); padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap;}
.market p{color:var(--navy-soft); font-size:.98rem; margin-bottom:22px;}
.market-meter{margin-top:auto; padding-top:20px; border-top:1px solid var(--line);}
.market-bar{display:grid; grid-template-columns:repeat(10,1fr); gap:5px; margin-bottom:12px;}
.mseg{display:block; height:10px; border-radius:var(--r-pill); background:var(--gold);}
.mseg--off{background:transparent; border:1.5px dashed rgba(22,49,87,.28);}
html.js .market .mseg{transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); transition-delay:calc(var(--k)*.06s + .35s);}
html.js .market.in .mseg{transform:scaleX(1);}
.market-count{display:flex; align-items:baseline; gap:8px; font-weight:700; font-size:.92rem; color:var(--navy-soft);}
.market-count b{font-size:1.7rem; font-weight:900; color:var(--navy); line-height:1;}
.market-note{margin-top:34px; text-align:center; color:var(--muted-text); font-size:var(--fs-small);}
.market-note i{display:inline-block; width:18px; height:8px; border-radius:var(--r-pill); border:1.5px dashed rgba(22,49,87,.35); vertical-align:middle; margin-inline-end:8px;}
@media (prefers-reduced-motion:reduce){ .markets-head h2 mark::after{clip-path:none; transition:none;} html.js .market .mseg{transform:none; transition:none;} .market--home{top:0;} }

/* =====================================================================
   13. FOUNDER  (SECTION 11)
   ===================================================================== */
.founder{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(32px,6vw,80px); align-items:center;}
@media (max-width:820px){ .founder{grid-template-columns:1fr; text-align:center;} .founder-links{justify-content:center;} .founder-facts{justify-content:center;} .founder p{margin-inline:auto;} }
.founder-media{position:relative; max-width:340px; width:100%; margin-inline:auto;}
.founder-media::before{content:""; position:absolute; inset:16px -16px -16px 16px; border:2px solid var(--gold); border-radius:28px; z-index:0;}
.founder-photo{
  position:relative; z-index:1; aspect-ratio:1; border-radius:28px; overflow:hidden; background:#1b1e23; box-shadow:var(--shadow-lift);
}
.founder-photo img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:820px){ .founder-media{max-width:300px;} .founder-media::before{inset:12px -12px -12px 12px;} }
.founder h2{font-size:var(--fs-h2); font-weight:800; margin-bottom:6px;}
.founder-role{font-weight:800; color:var(--bronze-text); letter-spacing:.06em; text-transform:uppercase; font-size:.84rem; margin-bottom:18px;}
.founder p{color:var(--navy-soft); max-width:58ch; margin-bottom:14px;}
.founder-facts{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px;}
.founder-links{display:flex; gap:20px; flex-wrap:wrap; align-items:center;}
/* The founder band is navy: his studio photo has a dark background, so it sits naturally on it. */
.section--navy .founder-role{color:var(--gold);}
.section--navy .founder p{color:rgba(249,247,242,.82);}
.section--navy .founder-facts .chip{background:rgba(249,247,242,.1); color:var(--cream);}
.section--navy .founder .link-arrow{color:var(--cream);}
.section--navy .founder .link-arrow:hover{color:var(--gold);}
.section--navy .founder-photo{box-shadow:0 24px 48px -22px rgba(0,0,0,.6);}

/* =====================================================================
   14. INSIGHTS  (SECTION 12)
   ===================================================================== */
.insights-top{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,52px);}
.insights-head{margin-bottom:0;}
.insights-head h2 mark{background:none; color:inherit; position:relative; display:inline-block;}
.insights-head h2 mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.18em; height:.22em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .6s;
}
.insights-head.in h2 mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .insights-head h2 mark::after{clip-path:none;}
/* One large navy card for the lead piece, two quieter white cards beside it. */
.posts{display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:1fr 1fr; gap:20px;}
@media (max-width:900px){ .posts{grid-template-columns:1fr; grid-template-rows:auto;} }
.post{
  position:relative; display:flex; flex-direction:column; gap:12px; background:var(--white); border:1px solid var(--line); border-radius:24px;
  padding:28px 28px 24px; text-decoration:none; box-shadow:var(--shadow-card); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.post:hover{translate:0 -5px; box-shadow:var(--shadow-lift); border-color:var(--gold);}
.post-cat{font-size:var(--fs-eyebrow); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-text);}
.post h3{font-size:1.2rem; font-weight:800; line-height:1.3; color:var(--navy);}
.post p{color:var(--navy-soft); font-size:.97rem;}
.post--lead{grid-row:span 2; background:var(--navy); border-color:var(--navy); color:var(--cream); padding:clamp(28px,4vw,44px); justify-content:flex-start; gap:16px; min-height:340px;}
@media (max-width:900px){ .post--lead{grid-row:auto; min-height:0; padding-bottom:80px;} .post--lead .post-meta{margin-top:6px;} .post--lead::after{bottom:6px; height:38px;} }
.post--lead:hover{border-color:var(--gold);}
.post--lead .post-cat{color:var(--gold);}
.post--lead h3{font-size:clamp(1.55rem,2.8vw,2.15rem); line-height:1.18; letter-spacing:-.01em; color:var(--cream); max-width:18ch;}
.post--lead p{color:rgba(249,247,242,.8); font-size:1.02rem; max-width:44ch;}
.post--lead .post-meta{color:var(--gold); border-color:rgba(221,180,121,.5);}
.post--lead::after{
  content:""; position:absolute; inset-inline:-4% -4%; bottom:30px; height:70px; pointer-events:none; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 70 6, 150 4, 232 18 S 390 36, 464 22' fill='none' stroke='%23ddb479' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.post-meta{
  align-self:flex-start; margin-top:auto; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bronze-text); border:1.5px solid rgba(173,134,82,.45); padding:4px 11px; border-radius:var(--r-pill);
}
@media (prefers-reduced-motion:reduce){ .insights-head h2 mark::after{clip-path:none; transition:none;} }

/* =====================================================================
   15. FAQ  (SECTION 13)
   ===================================================================== */
/* The questions sit on the left, the copy and a button stay in view on the right (the mirror of Services). */
.faq-wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,6vw,80px); align-items:start;}
@media (max-width:900px){ .faq-wrap{grid-template-columns:1fr;} }
@media (min-width:901px){ .faq-copy{order:2;} }
.faq-wrap .section-head{margin-bottom:0; position:sticky; top:110px;}
@media (max-width:900px){ .faq-wrap .section-head{position:static;} }
.faq-copy h2{max-width:13ch; line-height:1.15; text-wrap:balance;}
.faq-copy p{margin-bottom:26px;}
.faq-copy h2 mark{background:none; color:inherit; position:relative; display:inline-block;}
.faq-copy h2 mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.18em; height:.22em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .6s;
}
.faq-copy.in h2 mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .faq-copy h2 mark::after{clip-path:none;}
.faq{counter-reset:q;}
.faq details{
  counter-increment:q; background:var(--white); border:1px solid var(--line); border-radius:18px; margin-bottom:12px;
  transition:border-color .2s, box-shadow .25s;
}
.faq details:hover{border-color:rgba(173,134,82,.55);}
.faq details[open]{border-color:var(--gold); box-shadow:var(--shadow-card), inset 4px 0 0 var(--gold);}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 22px 20px 24px; font-weight:800; font-size:1.05rem;
  display:flex; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:counter(q,decimal-leading-zero); flex:none; width:26px; font-size:.78rem; font-weight:800; letter-spacing:.06em; color:var(--bronze-text);}
.faq summary::after{
  content:""; flex:none; margin-inline-start:auto; width:24px; height:24px; border-radius:50%;
  background:
    linear-gradient(var(--navy),var(--navy)) center/10px 2px no-repeat,
    linear-gradient(var(--navy),var(--navy)) center/2px 10px no-repeat,
    var(--peach);
  transition:transform .25s var(--ease), background-color .25s;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:focus-visible{outline:2px solid var(--bronze); outline-offset:-2px; border-radius:18px;}
.faq-a{padding:0 24px 22px 66px; color:var(--navy-soft); max-width:62ch;}
.faq details[open] .faq-a{animation:faqIn .35s var(--ease);}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
@media (max-width:560px){ .faq summary{padding-inline:16px; gap:12px;} .faq-a{padding-inline:16px;} }
@media (prefers-reduced-motion:reduce){ .faq-copy h2 mark::after{clip-path:none; transition:none;} .faq details[open] .faq-a{animation:none;} }

/* =====================================================================
   16. QUALIFYING FORM / FINAL CTA  (SECTION 14)
   ===================================================================== */
.cta{position:relative;}
.cta-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,80px); align-items:start;}
@media (max-width:940px){ .cta-grid{grid-template-columns:1fr;} }
.cta-copy h2{font-size:var(--fs-h2); font-weight:800; margin-bottom:16px; max-width:14ch; line-height:1.15; text-wrap:balance;}
.cta-copy h2 mark{background:none; color:inherit; position:relative; display:inline-block;}
.cta-copy h2 mark::after{
  content:""; position:absolute; inset-inline:-.05em; bottom:-.18em; height:.22em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 464 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ddb479'/%3E%3Cstop offset='1' stop-color='%23ad8652'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 22 C 70 6, 150 4, 232 18 S 390 36, 461 22' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .6s;
}
.cta-copy.in h2 mark::after{animation:waveLoop 6.4s cubic-bezier(.65,0,.25,1) .6s infinite;}
html:not(.js) .cta-copy h2 mark::after{clip-path:none;}
@media (prefers-reduced-motion:reduce){ .cta-copy h2 mark::after{clip-path:none; transition:none;} }
.cta-copy > p{color:var(--navy-soft); font-size:1.08rem; margin-bottom:26px; max-width:46ch;}
.cta-list{display:grid; gap:16px;}
.cta-list li{display:flex; gap:14px; align-items:center; font-weight:700; color:var(--navy);}
.cta-list .icon{width:42px; height:42px; padding:10px; border-radius:12px; flex:none; background:rgba(221,180,121,.28); color:var(--bronze-text); stroke-width:1.8;}
.form-card{background:var(--white); border:1px solid var(--line); border-top:5px solid var(--gold); border-radius:24px; padding:clamp(24px,4vw,40px); box-shadow:var(--shadow-lift);}
.form-progress{display:none; align-items:center; gap:12px; margin-bottom:22px; font-weight:800; font-size:.86rem; color:var(--muted-text); letter-spacing:.04em; text-transform:uppercase;}
html.js .form-progress{display:flex;}
.form-progress-bar{flex:1; height:6px; border-radius:var(--r-pill); background:rgba(22,49,87,.1); overflow:hidden;}
.form-progress-bar i{display:block; height:100%; width:50%; background:var(--gold); border-radius:inherit; transition:width .4s var(--ease);}
.field{display:grid; gap:7px; margin-bottom:18px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
@media (max-width:560px){ .field-row{grid-template-columns:1fr; gap:0;} }
label,legend{font-weight:700; font-size:.92rem; padding:0;}
.req{color:#a8321f;}
.field-hint{font-size:.8rem; font-weight:500; color:var(--muted-text);}
input[type=text],input[type=email],input[type=tel],select{
  width:100%; font:inherit; font-size:1rem; color:var(--navy); background:var(--cream);
  border:1.5px solid var(--line-strong); border-radius:var(--r-small); padding:14px 16px; min-height:50px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23163157' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-inline-end:42px;}
[dir="rtl"] select{background-position:left 16px center;}
input:focus,select:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(22,49,87,.14); background:var(--white);}
fieldset{border:0; padding:0; margin:0 0 18px; min-width:0;}
.choices{display:grid; gap:10px; margin-top:8px;}
.choice{position:relative;}
.choice input{position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0;}
.choice span{display:flex; gap:12px; align-items:center; padding:14px 16px; border:1.5px solid var(--line-strong); border-radius:var(--r-small); background:var(--cream); font-weight:500; transition:border-color .2s, background .2s, box-shadow .2s;}
.choice span::before{content:""; width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); flex:none; transition:all .2s;}
.choice input:checked + span{border-color:var(--navy); background:var(--white); box-shadow:0 0 0 3px rgba(22,49,87,.1);}
.choice input:checked + span::before{border-color:var(--navy); background:radial-gradient(var(--navy) 45%, transparent 50%);}
.choice input:focus-visible + span{outline:3px solid var(--navy); outline-offset:2px;}
.form-actions{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px;}
.form-actions .btn{min-width:0;}
.btn--text{background:none; border:0; color:var(--navy-soft); font-weight:700; cursor:pointer; padding:10px 4px; font:inherit; text-decoration:underline; text-underline-offset:3px;}
.form-note{margin-top:18px; font-size:.84rem; color:var(--muted-text);}
html.js .form-step[hidden]{display:none;}
.hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden;}
.form-result{text-align:center; padding:12px 4px;}
.form-result[hidden]{display:none;}
.form-result .tick{width:64px;height:64px;border-radius:50%;background:var(--peach);display:grid;place-items:center;margin:0 auto 20px;}
.form-result .tick .icon{width:30px;height:30px;color:var(--navy);stroke-width:2.6;}
.form-result h3{font-size:1.5rem; font-weight:800; margin-bottom:10px;}
.form-result p{color:var(--navy-soft); max-width:42ch; margin:0 auto 22px;}
.form-result .choices{max-width:420px; margin-inline:auto; text-align:start;}
.choice-sub{margin-inline-start:auto; font-style:normal; font-size:.84rem; font-weight:600; color:var(--muted-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.result-demo{margin-top:20px; font-size:.78rem; color:var(--muted-text); background:rgba(22,49,87,.05); padding:8px 12px; border-radius:8px; display:inline-block;}

/* =====================================================================
   17. FOOTER  (SECTION 15)
   ===================================================================== */
.footer{background:var(--navy-deep); color:rgba(249,247,242,.82); padding-block:clamp(56px,7vw,84px) 32px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1.6fr .9fr; gap:40px; margin-bottom:clamp(36px,5vw,56px);}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr; gap:34px;} }
.footer .brand{margin-bottom:16px;}
.footer .brand img{height:56px;}
.footer-about{max-width:34ch; font-size:.95rem; color:rgba(249,247,242,.7); margin-bottom:22px;}
/* Social links: one joined bar. Every cell is the same size and every icon is the same size, centred. */
.footer-social{display:inline-flex; margin-bottom:22px; border:1px solid transparent; border-radius:14px; overflow:hidden;}
.footer .footer-social li{margin:0; display:flex;}
.footer .footer-social a{
  display:flex; align-items:center; justify-content:center; width:54px; height:50px; padding:0; background-image:none;
  color:var(--gold); box-shadow:inset -1px 0 0 rgba(221,180,121,.25); /* the divider is a shadow so it never shifts the icon off centre */
  transition:background-color .25s, color .25s;
}
.footer-social li:last-child a{box-shadow:none;}
.footer .footer-social a:hover{background-color:var(--gold); color:var(--navy-deep);}
.footer .footer-social a:focus-visible{outline:2px solid var(--gold); outline-offset:-3px;}
.footer-social .icon{display:block; width:22px; height:22px; fill:currentColor; stroke:none;}
.footer h3{color:var(--gold); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; font-weight:800;}
.footer li{margin-bottom:11px;}
.footer-services ul{columns:2; column-gap:28px;}
.footer-services li{break-inside:avoid;}
@media (max-width:520px){ .footer-services ul{columns:1;} }
.footer li a{
  text-decoration:none; font-size:.95rem; transition:color .2s;
  background:linear-gradient(var(--gold),var(--gold)) 0 100% / 0 1px no-repeat; padding-bottom:2px; transition:color .2s, background-size .3s var(--ease);
}
.footer li a:hover{color:var(--gold); background-size:100% 1px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px; padding-top:26px; border-top:1px solid rgba(249,247,242,.14); font-size:.85rem; color:rgba(249,247,242,.62);}
.footer-bottom ul{display:flex; gap:22px;}
.footer-bottom li{margin:0;}
.footer-bottom .to-top{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; color:rgba(249,247,242,.82); font-size:.85rem; transition:color .2s;}
.footer-bottom .to-top .icon{width:18px; height:18px; transform:rotate(-90deg); transition:transform .25s var(--ease);}
.footer-bottom .to-top:hover{color:var(--gold);}
.footer-bottom .to-top:hover .icon{transform:rotate(-90deg) translateX(4px);}


/* =====================================================================
   18. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js [data-reveal], html.js .week, html.js .board .seg{opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;}
  .pillar,.service,.work-card,.post,.industry,.btn{transition:none;}
}

/* Shows what the visitor was reading when they came to the form (set from the address, e.g. ?service=paid-media). */
.form-context{display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:6px 14px; border-radius:var(--r-pill); background:rgba(221,180,121,.28); color:var(--bronze-text); font-size:.82rem; font-weight:800; letter-spacing:.04em;}
.form-context[hidden]{display:none;}


/* Once an element has finished revealing (site.js adds .rd), hover gets quick, undelayed transitions. */
html.js [data-reveal].rd{
  transition:opacity .3s, transform .3s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), border-radius .3s var(--ease);
  transition-delay:0s;
}


/* Cursor ring: a small gold ring that follows a real mouse and grows over links and buttons.
   It sits over the normal cursor and is only created for devices with a mouse and no reduced-motion setting. */
.cursor-ring{position:fixed; left:0; top:0; width:36px; height:36px; pointer-events:none; z-index:9999; opacity:0; transition:opacity .25s; will-change:transform;}
.cursor-ring.on{opacity:1;}
.cursor-ring::before{content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(173,134,82,.85); box-shadow:0 0 0 1px rgba(249,247,242,.35); transition:transform .25s var(--ease), background-color .25s, border-color .25s;}
.cursor-ring.hot::before{transform:scale(1.7); background:rgba(221,180,121,.22); border-color:rgba(173,134,82,.6);}
.cursor-ring.down::before{transform:scale(.8);}
.cursor-ring.hot.down::before{transform:scale(1.35);}
.cursor-ring.text{opacity:0;}

/* footer contact lines */
.icon--fill{fill:currentColor; stroke:none;}
.footer .footer-contact{margin:0 0 18px; padding:0; list-style:none;}
.footer .footer-contact li{margin:0 0 8px;}
.footer .footer-contact a{display:inline-flex; align-items:center; gap:10px; word-break:break-word;}
.footer .footer-contact .icon{width:18px; height:18px; color:var(--gold); flex:none;}


/* ---------- phones: copy blocks and the footer are centred ---------- */
@media (max-width:640px){
  .thesis-copy, .services-copy, .process-copy, .faq-copy, .insights-head, .section-head{text-align:center;}
  .thesis-text, .services-copy h2, .process-copy h2, .faq-copy h2{margin-inline:auto;}
  .services-copy p, .process-copy p, .faq-copy p, .section-head p{margin-inline:auto;}
  .insights-top{justify-content:center; text-align:center;}
  .founder-facts{justify-content:center;}
  .founder-links{justify-content:center;}
  .footer{text-align:center;}
  .footer-grid > div:first-child{display:flex; flex-direction:column; align-items:center;}
  .footer-about{margin-inline:auto;}
  .footer-bottom{flex-direction:column; justify-content:center; text-align:center;}
  .footer-bottom ul{justify-content:center;}
}

/* ---------- tablets (iPad portrait): centred brand block, then the link lists in one three-column row ---------- */
@media (min-width:641px) and (max-width:900px){
  .footer-grid{grid-template-columns:2fr 1fr; gap:36px 40px;}
  .footer-grid > div:first-child{grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; text-align:center;}
  .footer-about{margin-inline:auto;}
}

/* the wave on the lead article sits low enough to clear the read-time tag on phones and tablets (placed after the base rule so it wins) */
@media (max-width:900px){ .post--lead::after{bottom:8px; height:40px;} }
.form-error{margin-top:14px; padding:12px 14px; border-radius:12px; background:#fdecea; color:#8a1f17; font-weight:600; font-size:.95rem;}