/* =========================================================
   Ayisha Piotti — site stylesheet
   Cloned pixel-fidelity from source PDFs, desktop-first (1440)
   ========================================================= */

:root{
  --cream:        #f2f0e8;   /* exact Figma page bg */
  --cream-soft:   #eceadf;
  --white:        #ffffff;
  --ink:          #0d2b2e;   /* exact Figma "Dark Green" */
  --ink-soft:     #16332f;
  --teal:         #0f5257;   /* exact Figma "Light Green" (used as italic/accent color) */
  --teal-deep:    #0c2a2d;
  --sage:         #cfe0c7;   /* exact Figma "Light Green" card fill */
  --sage-border:  #a9c29e;
  --sage-deep:    #4f7a5c;
  --field-bg:     #eaf2e4;   /* pale sage tint used for form field / lock chips */
  --text:         #353535;   /* exact Figma "Body" color */
  --text-muted:   #6b6f66;
  --line:         rgba(13,43,46,.2);   /* exact Figma divider/border color */
  --radius-sm:    8px;
  --radius-md:    15px;
  --radius-lg:    28px;
  --maxw:         1440px;
  --pad:          clamp(20px, 3.5vw, 50px);   /* exact Figma side margin: 50px at 1440 (1340px content) */
  --ease:         cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; min-width:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
section{ padding-top:55px; padding-bottom:55px; position:relative; }
section[id]{ scroll-margin-top:96px; }
@media (max-width:1100px){ section[id]{ scroll-margin-top:78px; } }
@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;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}
/* Source uses 'PP Mori' (Pangram Pangram, commercial/not CDN-available) for
   both headings and body. Inter is the closest freely-licensed substitute
   and is used throughout in its place — one grotesk family, as in the spec,
   rather than the separate display/serif pairing used in the first pass. */
body{
  margin:0;
  padding-top:var(--header-h, 84px);
  background:var(--cream);
  color:var(--text);
  font-family:'PP Mori','Inter', -apple-system, sans-serif;
  font-size:18px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
svg{ max-width:100%; }
h1,h2,h3,h4,p,a,span,li{ overflow-wrap:break-word; word-break:break-word; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:'PP Mori','Inter', sans-serif; font-weight:600; margin:0; color:var(--ink); line-height:1.14; letter-spacing:0; }
p{ margin:0; }
em, i.accent, .accent{ font-family:'PP Mori','Inter', sans-serif; font-style:italic; font-weight:100; color:var(--teal); }
button{ font-family:inherit; cursor:pointer; }
.sq-bullet{ display:inline-block; width:9px; height:9px; background:var(--ink); flex:none; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:15px;
  padding:16px 25px;
  font-size:16px; font-weight:600; letter-spacing:.01em; text-transform:uppercase;
  border-radius:5px;
  border:1px solid transparent;
  transition:transform .35s var(--ease), background .3s ease, color .3s ease, box-shadow .3s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:var(--teal); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(14,43,40,.45); }
.btn-dark:hover svg{ transform:translateX(4px); }
.btn-light{ background:var(--white); color:var(--ink); border-color:var(--line); }
.btn-light:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px); }
.btn-light:hover svg{ transform:translateX(4px); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.4); color:inherit; }
.btn-outline:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* ---------- Header ---------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  margin-bottom:0;
  background-color:rgba(242,239,230,.86);
  background-image:url('../images/hero-fabric-bg.jpg');
  background-size:cover; background-position:top center; background-repeat:no-repeat;
  background-attachment:fixed;
  background-blend-mode:normal;
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transform:translateY(0);
  transition:box-shadow .4s ease, border-color .4s ease, padding .3s ease, transform .35s var(--ease);
}
header.site.scrolled{ box-shadow:0 6px 24px -12px rgba(14,43,40,.25); border-color:var(--line); }

/* WordPress admin toolbar: when a logged-in user views the front end, WP
   pushes the page down 32px (46px on mobile) for its own fixed toolbar.
   Our header is independently fixed and doesn't know about that toolbar,
   so without this it stays pinned at the very top — leaving a gap between
   it and the hero below (whose offset is driven by the header's own
   measured height via --header-h, unaffected by the toolbar). Shifting the
   header down to sit under the toolbar keeps the two flush for admins;
   logged-out visitors (no toolbar) are unaffected. */
body.admin-bar header.site{ top:32px; }
@media (max-width:782px){
  body.admin-bar header.site{ top:46px; }
}
header.site.nav-hidden{ transform:translateY(-100%); }
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px;
  transition:padding .3s ease;
}
header.site.scrolled .wrap{ padding-top:14px; padding-bottom:14px; }
.logo{
  font-family:'Raleway', 'Inter', sans-serif; font-weight:800; font-size:26px;
  letter-spacing:normal; text-transform:uppercase; color:var(--ink);
}
nav.main-nav ul{ display:flex; gap:31px; align-items:center; }
nav.main-nav a{
  font-size:15px; font-weight:600; letter-spacing:.01em; text-transform:uppercase;
  color:var(--ink); position:relative; padding-bottom:4px;
}
nav.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--teal); transition:width .35s var(--ease);
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{ width:100%; }
nav.main-nav a.active{ color:var(--teal); font-style:italic; }
.nav-toggle{ display:none; background:none; border:0; padding:8px; z-index:110; position:relative; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .35s var(--ease), opacity .25s ease; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
body.nav-open{ overflow:hidden; }

/* ---------- Hero shared ---------- */
.hero-band{ background:var(--cream); }
.eyebrow{
  font-size:18px; font-weight:400; line-height:1.5; letter-spacing:.01em; text-transform:uppercase;
  color:var(--ink);
}
.underline-mark{ width:199px; height:1px; background:var(--teal); margin:15px 0 15px; }

/* ---------- Reveal animation ---------- */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].is-visible{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal="scale"].is-visible{ transform:scale(1); }
[data-reveal-group] > *{ transition-delay:calc(var(--i, 0) * 90ms); }

.parallax-img{ will-change:transform; }

/* ---------- Section paddings ---------- */
section{ padding-top:110px; padding-bottom:110px; position:relative; }
.press-media-section{ padding-top:0px; }
section.tight{ /* padding-top:70px; */ padding-bottom:0px; }
.section-alt{ background:var(--cream-soft); }
.section-white{ background:var(--white); }
.formation-section{
  padding-top:30px; padding-bottom:60px;
  background-image:url('../images/hero-fabric-bg.jpg');
  background-size:cover; background-position:top center; background-repeat:no-repeat;
}
.how-i-work-section{ padding-top:55px; }
.credentials-section{ padding-top:40px; }

/* =====================================================
   HOME — Hero
   ===================================================== */
.home-hero{
  padding-top:55px; padding-bottom:0; overflow-x:clip;
  background-image:url('../images/hero-fabric-bg.jpg');
  background-size:cover; background-position:top center; background-repeat:no-repeat;
}
.home-hero .grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center;
}
.home-hero .wordmark{
  display:block; width:100%; height:auto;
  position:absolute; top:145px; left:0; right:0; z-index:0;
  padding:0 var(--pad); pointer-events:none;
}
.home-hero .hero-inner{ position:relative; padding-top:85px; }
.home-hero h1.tagline{ font-size:clamp(32px, 3.85vw, 55px); font-weight:600; line-height:1.2; max-width:670px; }
/* "future." — PP Mori not available (commercial font, see file header note);
   Inter substitutes, matching the rest of the site's italic/accent usage. */
.home-hero h1.tagline em{
  font-family:'PP Mori','Inter',sans-serif;
  font-style:italic;
  font-weight:100;
  font-size:55px;
  line-height:66px;
  letter-spacing:0;
  vertical-align:middle;
}
.home-hero .lede{
  max-width:621px; margin-top:22px; color:var(--text); font-size:18px; line-height:1.39;
}
.home-hero .hero-photo-wrap{
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  height:100%;
}
.home-hero .hero-photo-frame{
  position:relative; width:100%; max-width:560px; aspect-ratio:589/851;
}
.home-hero .hero-photo{
  width:100%; height:100%; object-fit:contain; object-position:bottom center;
}
.hero-seal{
  /* Vector — Figma spec on the 1440 frame, nudged right onto the shoulder */
  position:absolute; width:148px; height:146px; left:1246px; top:348px;
  animation:spin 18s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero-seal svg{ width:100%; height:100%; }

/* Trusted logos */
.logo-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:36px; flex-wrap:wrap; margin-top:56px;
}
.logo-row img{ height:28px; width:auto; object-fit:contain; opacity:.88; filter:grayscale(0%); transition:opacity .3s, transform .3s; }
.logo-row .text-logo{ font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; color:#333; opacity:.85; }
.logo-row > *:hover{ opacity:1; transform:translateY(-2px); }
.logo-row .swisscom{ height:22px; }
.hr-line{ height:1px; background:var(--line); margin-top:44px; }

/* Question band */
.question-band{ display:grid; grid-template-columns:775fr 510fr; gap:16px; padding-top:50px; padding-bottom:70px; align-items:center; }
.question-band h2{ margin-top:17px; font-size:clamp(28px, 3.6vw, 50px); font-weight:600; line-height:1.14; }
.question-band h2 em{
  font-family:'PP Mori','Inter',sans-serif;
  font-style:italic;
  font-weight:100;
  font-size:50px;
  line-height:57px;
  letter-spacing:0;
  vertical-align:middle;
}
.question-band .right p{ color:var(--ink); margin-bottom:22px; font-size:18px; line-height:1.33; }

/* Stat cards */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; }
.stat-card{
  background:var(--sage); border-radius:var(--radius-sm);
  padding:5px 5px 14px; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stat-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(14,43,40,.35); }
.stat-card .top{ background:var(--white); border-radius:var(--radius-sm); padding:20px; }
.stat-card .top .label{ font-size:16px; font-weight:400; text-transform:uppercase; color:var(--ink); line-height:1.06; }
.stat-card .top .row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:30px; }
.stat-card .top .row .label{ font-size:16px; font-weight:600; color:var(--text); }
.stat-card .top .row .num{ font-family:'PP Mori','Inter',sans-serif; font-weight:600; font-size:40px; color:var(--ink); }
.stat-card .bottom{ padding:10px 19px 0; text-align:center; font-size:14px; font-weight:400; text-transform:uppercase; color:rgba(13,43,46,.5); }
.stat-card .top p{ font-size:16px; line-height:1.39; color:var(--ink); margin:0; }

/* Quote portrait section */
.quote-portrait{ text-align:center; position:relative; padding-top:0; padding-bottom:70px; }
/* Pre-composited Figma export: double-glow + photo + fade-to-cream, all
   baked into one transparent PNG — replaces the earlier CSS mask/vignette
   approximation with the real asset (exact, no muddy-halo compromise). */
.quote-portrait .quote-visual{
  width:100%; max-width:1440px; margin:0 auto; display:block;
}
.quote-portrait blockquote{
  position:relative; z-index:1; margin:8px auto 0; max-width:1190px; padding:0 var(--pad);
  font-family:'PP Mori','Inter',sans-serif; font-style:italic; font-weight:600; font-size:clamp(26px,4.8vw,70px);
  color:var(--ink); line-height:1.19;
}

/* Four ways forward */
.ways-grid{ display:grid; grid-template-columns:458px 1fr; gap:99px; align-items:end; margin-top:50px; }
.ways-grid .thumb{ border-radius:var(--radius-md); overflow:hidden; }
.ways-grid .thumb img{ width:100%; object-fit:cover; aspect-ratio:456/417; }
.ways-heading{ font-size:clamp(30px,3.5vw,50px); line-height:1.14; }
.ways-heading em{ font-style:italic; font-weight:100; color:var(--teal); }
.way-item{ display:grid; grid-template-columns:19px 1fr; gap:41px; width:100%; }
.way-item .idx{
  font-family:'PP Mori','Inter',sans-serif; font-weight:600; font-size:18px; line-height:23px;
  color:var(--text); padding-top:8px; align-self:start; white-space:nowrap;
}
.way-item > div{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.way-item h4{ font-size:clamp(20px,1.95vw,28px); font-weight:600; letter-spacing:.01em; text-transform:uppercase; line-height:42px; margin:0; }
.way-item p{ color:var(--text); font-size:18px; line-height:23px; margin:0; }
/* Rule spans only the text column (729 of 789 in the 1440 comp) */
.way-rule{ width:calc(100% - 60px); height:0; border-top:1px solid var(--line); margin-left:auto; flex:none; }

/* Distinctive difference */
.diff-section{
  position:relative; overflow:hidden; isolation:isolate;
  background-color:#F2F0E8;
  background-image:url('../images/home_030_2000x1333.jpeg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-blend-mode:plus-darker, normal;
}
/* Soft ambient glows echoing the Figma "Ellipse 9/10" blurred highlights
   (cx 703/-50 rx823 ry169 and cx 663/885 rx823 ry169 on the 1440x839 frame) */
.diff-section::before, .diff-section::after{
  content:''; position:absolute; left:50%; width:1646px; max-width:220vw; height:338px;
  background:#fff; filter:blur(92px); z-index:0; pointer-events:none;
}
.diff-section::before{ top:-219px; transform:translateX(calc(-50% - 17px)); }
.diff-section::after{ bottom:-215px; transform:translateX(calc(-50% - 57px)); }
.diff-grid{ display:flex; justify-content:space-between; align-items:stretch; gap:52px; margin-top:50px; position:relative; z-index:1; }
.diff-grid > [data-reveal="left"]{ display:flex; flex-direction:column; justify-content:space-between; gap:80px; max-width:553px; }
.diff-text{ display:flex; flex-direction:column; gap:20px; position:relative; z-index:2; }
.diff-cta{ width:210px; height:50px; justify-content:center; box-sizing:border-box; }
.diff-cta svg{ width:19px; height:15px; }
.diff-heading-group{ display:flex; flex-direction:column; gap:13px; isolation:isolate; }
.diff-cards{ display:flex; flex-direction:column; gap:20px; flex:1; }
.diff-row{ display:flex; gap:20px; }
.diff-row--2{ gap:15px; }
.diff-card{
  flex:1; background:var(--sage); border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  min-height:224px; display:flex; flex-direction:column; justify-content:flex-start; gap:16px;
  transition:transform .4s var(--ease), background .4s ease;
}
.diff-card:hover{ transform:translateY(-6px); background:var(--sage-border); }
.diff-card h5{ font-family:'PP Mori','Inter',sans-serif; font-weight:600; font-size:20px; line-height:1.3; letter-spacing:0; text-transform:uppercase; color:var(--ink); display:flex; justify-content:space-between; gap:14px; }
.diff-card p{ font-size:18px; line-height:1.17; color:var(--text); }
.diff-card.wide{ min-height:151px; padding:20px; }

/* Media / press grid */
.press-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:50px; }
.press-grid img{ width:100%; height:230px; object-fit:cover; border-radius:var(--radius-sm); transition:transform .5s var(--ease); }
.press-grid a{ overflow:hidden; border-radius:var(--radius-sm); display:block; }
.press-grid a:hover img{ transform:scale(1.06); }
.press-strip{ display:flex; flex-direction:row; align-items:center; gap:30px; margin-top:50px; }
.press-strip a{ flex:none; width:388px; height:440px; border-radius:8px; overflow:hidden; display:block; }
.press-strip img{ width:100%; height:100%; object-fit:cover; border-radius:8px; transition:transform .5s var(--ease); }
.press-strip a:hover img{ transform:scale(1.05); }
@media (min-width:1101px){
  .press-strip{ max-width:1224px; margin-left:auto; margin-right:auto; }
}

/* Advisory / counsel band */
.counsel-band{ text-align:center; max-width:1126px; margin:0 auto; }
.counsel-band h2{ font-size:clamp(28px,3.6vw,45px); font-weight:600; line-height:1.04; letter-spacing:.01em; }
.counsel-band p{ margin-top:22px; color:var(--text); font-size:18px; max-width:760px; margin-left:auto; margin-right:auto; }
.counsel-band .btn{ margin-top:32px; }

/* Why I do this */
.why-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:start; }
.why-grid p{ color:var(--text); margin-bottom:20px; }
.why-grid blockquote{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(22px,2.6vw,30px); line-height:1.35; margin:26px 0 34px; }
.seal-badge{ width:190px; height:190px; margin-top:20px; }
.seal-badge svg{ animation:spin 24s linear infinite; }
.why-section{
  z-index:1;
  background:var(--white);
}
.seal-badge--overlap{ position:relative; z-index:2; transform:translateY(224px); }

/* Testimonials */
.testi-wrap{ text-align:center; }
.testi-wrap h2{ font-size:clamp(28px,3.4vw,42px); margin-top:8px; }
.testi-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.testi-card{
  background:var(--white); border-radius:var(--radius-sm); padding:30px; text-align:left;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.testi-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px -20px rgba(14,43,40,.3); }
.testi-card p.quote{ font-size:15.5px; color:var(--text); min-height:80px; }
.testi-card hr{ border:none; border-top:1px solid var(--line); margin:20px 0; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-person img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.testi-person strong{ display:block; font-size:14px; }
.testi-person span{ font-size:13px; color:var(--text-muted); }
.dots{ display:flex; justify-content:center; gap:8px; margin-top:36px; }
.dots .dot{ width:8px; height:8px; border-radius:50%; background:var(--sage-border); cursor:pointer; transition:.3s; }
.dots .dot.active{ background:var(--ink); width:22px; border-radius:5px; }

/* Footer */
footer.site{
  background-image:url('../images/hero-fabric-bg.jpg');
  background-size:cover; background-position:top center; background-repeat:no-repeat;
  position:relative; overflow:hidden; box-shadow:0 -13px 0 var(--teal);
}
footer.site .top-rule{ display:none; }
footer.site .fabric{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 400px at 15% 15%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(ellipse 900px 500px at 85% 60%, rgba(255,255,255,.4), transparent 60%);
}
footer.site .foot-top{
  position:relative; z-index:1; padding:80px var(--pad) 20px; display:grid;
  grid-template-columns:1.3fr .7fr .7fr; gap:40px; max-width:var(--maxw); margin:0 auto;
}
.newsletter-input{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(13,43,46,.1); border-radius:8px;
  padding:30px; max-width:713px;
}
.newsletter-input input{
  border:none; background:transparent; outline:none; font-size:16px; line-height:17px; flex:1; color:var(--ink);
}
.newsletter-input button{
  width:20px; height:20px; border-radius:0; background:transparent; border:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:color .3s, transform .3s; flex:none;
}
.newsletter-input button:hover{ color:var(--teal); transform:translateX(3px) translateY(-2px); }
.get-in-touch{ margin-top:65px; }
.get-in-touch .label{ font-size:18px; font-weight:600; text-transform:uppercase; color:var(--ink); line-height:19px; }
.get-in-touch .row{ display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:30px; flex-wrap:wrap; }
.get-in-touch h3{ font-size:25px; font-weight:400; line-height:29px; max-width:433px; }
footer.site h4{ font-size:18px; line-height:19px; text-transform:uppercase; margin-bottom:32px; color:var(--ink); }
footer.site .foot-links li{ margin-bottom:14px; }
footer.site .foot-links a{ font-size:18px; line-height:19px; color:var(--ink); transition:color .25s, padding-left .25s; }
footer.site .foot-links a:hover{ color:var(--teal); padding-left:4px; }
.wordmark-foot{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:1340px; max-width:100%; height:140px; margin:0 auto;
  transform:rotate(0deg); opacity:1;
  font-family:'Poppins',sans-serif; font-weight:800; color:var(--ink);
  font-size:clamp(26px, 9vw, 130px); line-height:1;
  letter-spacing:-.01em; white-space:nowrap;
}
.copyright{ position:relative; z-index:1; text-align:center; font-size:18px; line-height:19px; color:var(--ink); padding:20px 0; }

/* =====================================================
   ABOUT PAGE
   ===================================================== */
.about-hero{
  padding-bottom:60px;
  background-image:url('../images/hero-fabric-bg.jpg');
  background-size:cover; background-position:top center; background-repeat:no-repeat;
}
.about-hero h1{ font-size:clamp(34px,4.6vw,55px); line-height:1.2; max-width:918px; }
.about-hero .underline-mark{ margin:5px 0 0; }
.about-hero p{ max-width:918px; margin-top:39px; font-size:18px; line-height:25px; font-weight:400; color:var(--text); }
/* .about-gallery is the shared row wrapper — used both by the .gallery-row-5
   hero strip (about.html) and by .gallery-row-quad (index.html home gallery).
   It stays a normal, non-breakout container; each row variant does its own
   full-bleed breakout individually below. */
.about-gallery{
  display:flex; flex-direction:column; align-items:center;
  padding:0; margin:0; gap:20px; margin-top:56px;
  width:100%;
}
.gallery-row{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  padding:0; margin:0; gap:20px; width:100%;
}
.about-gallery a{
  flex:1 1 0; min-width:0; height:clamp(140px,22vw,320px);
  overflow:hidden; border-radius:16px; display:block; aspect-ratio:1/1;
}
.about-gallery img{ width:100%; height:100%; object-fit:cover; border-radius:16px; transition:transform .5s var(--ease); }

/* Frame 2147239936 — 5-up hero gallery row. Same full-bleed breakout as
   .about-gallery (a harmless no-op when nested inside it), fixed-size cards,
   uniform gap, 16px radius, object-fit cover. On desktop the cards are sized
   larger than the row can fit and centered, so the row clips and the first/last
   cards are deliberately sliced by the viewport edge — a full-bleed "peek"
   effect. Below 900px it switches to a native horizontal-scroll strip instead,
   so every card stays reachable and fully visible on narrow screens. */
.gallery-row-5{
  display:flex; flex-direction:row; align-items:center;
  gap:20px; padding:0; margin-top:0;
  width:100vw; max-width:100vw;
  margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);
  justify-content:center;
  overflow:hidden;
}
.gallery-row-5 a{
  flex:0 0 420px; width:420px; height:420px;
  border-radius:16px; overflow:hidden; display:block;
}
.gallery-row-5 img{
  width:100%; height:100%; object-fit:cover; border-radius:16px;
  transition:transform .5s var(--ease);
}
.gallery-row-5 a:hover img{ transform:scale(1.07); }

/* Responsive: below 900px every gallery row (plain, -5, or -strip) switches
   from shrink-to-fit/clip to a smooth horizontal scroller — cards keep a
   fixed, legible size and swipe into view instead of being squeezed or cut. */
@media (max-width:900px){
  .gallery-row{
    justify-content:flex-start; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:0 20px 6px; scrollbar-width:none;
  }
  .gallery-row::-webkit-scrollbar{ display:none; }
  .about-gallery a{
    flex:0 0 auto; width:min(70vw,320px); height:min(70vw,320px);
    scroll-snap-align:start;
  }
  .gallery-row-5{
    justify-content:flex-start; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:0 20px 6px; scrollbar-width:none;
  }
  .gallery-row-5::-webkit-scrollbar{ display:none; }
  .gallery-row-5 a{ flex:0 0 320px; width:320px; height:320px; scroll-snap-align:start; }
}
@media (max-width:640px){
  .gallery-row, .gallery-row-5{ gap:14px; }
  .gallery-row-5 a{ flex-basis:240px; width:240px; height:240px; }
}
@media (max-width:420px){
  .about-gallery a{ width:78vw; height:78vw; }
  .gallery-row-5 a{ flex-basis:190px; width:190px; height:190px; }
}

/* Home page gallery — two rows of 4 equal square cards, full-bleed edge to edge,
   same visual language as the about-page hero gallery (uniform tiles, 16px
   radius, object-fit cover, even gap) but sized to fill the row width exactly
   rather than about's fixed-size "peek" cards, so all 4 stay fully visible. */
.gallery-row-quad{
  width:100vw; max-width:100vw;
  margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);
  gap:20px;
}
.gallery-row-quad a{
  flex:1 1 0; min-width:0; width:auto;
  height:clamp(180px,22vw,340px);
  aspect-ratio:auto; border-radius:16px; overflow:hidden;
}
.gallery-row-quad img{ border-radius:16px; }

@media (max-width:900px){
  .gallery-row-quad{
    justify-content:flex-start; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:0 20px 6px; scrollbar-width:none;
  }
  .gallery-row-quad::-webkit-scrollbar{ display:none; }
  .gallery-row-quad a{ flex:0 0 280px; width:280px; height:280px; scroll-snap-align:start; }
}
@media (max-width:640px){
  .gallery-row-quad{ gap:14px; }
  .gallery-row-quad a{ flex-basis:220px; width:220px; height:220px; }
}

/* Press/media grid — two rows (4 photos, then 5), fixed 370px squares,
   8px gap, edge-to-edge full-bleed. Rows are wider than the 1440px frame
   by design, so the outer photos are deliberately clipped by the viewport
   edge (matching the Figma spec exactly) rather than shrunk to fit. */
.press-photo-grid{
  display:flex; flex-direction:column; align-items:center;
  gap:8px; margin-top:56px; width:100%;
}
.press-photo-row{
  display:flex; flex-direction:row; justify-content:center; align-items:flex-start;
  gap:8px; width:100vw; max-width:100vw;
  margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);
  overflow:hidden;
}
.press-photo-row a{ flex:0 0 370px; width:370px; height:370px; display:block; overflow:hidden; }
.press-photo-row img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.press-photo-row a:hover img{ transform:scale(1.06); }
@media (max-width:1500px){
  .press-photo-row{
    justify-content:flex-start; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:0 20px 6px; scrollbar-width:none;
  }
  .press-photo-row::-webkit-scrollbar{ display:none; }
  .press-photo-row a{ scroll-snap-align:start; }
}
@media (max-width:640px){
  .press-photo-row{ gap:8px; }
  .press-photo-row a{ flex-basis:240px; width:240px; height:240px; }
}

.about-gallery a:hover img{ transform:scale(1.07); }

.formation-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; margin-top:70px; }
.formation-grid img{ border-radius:var(--radius-md); width:100%; object-fit:cover; aspect-ratio:3/4; }
.formation-grid img.formation-portrait{ max-width:379px; aspect-ratio:379/489; opacity:1; border-radius:8px; }
.formation-copy{ display:flex; flex-direction:column; gap:24px; }
.formation-heading{ display:flex; flex-direction:column; gap:17px; }
.formation-grid h2{ font-size:clamp(28px,3.4vw,50px); line-height:1.14; }
.formation-text{ display:flex; flex-direction:column; gap:12px; }
.formation-grid p{ font-size:18px; line-height:1.333; color:var(--ink); }

.accordion{ margin-top:0; border-top:1px solid rgba(15,82,87,.5); }
.acc-item{ border-bottom:1px solid rgba(15,82,87,.5); }
.acc-head{
  width:100%; background:none; border:none; text-align:left; padding:30px 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.acc-head h3{ font-size:clamp(26px,3.4vw,50px); line-height:1.04; font-weight:600; text-transform:capitalize; }
.acc-icon{ width:34px; height:34px; position:relative; flex:none; transition:transform .4s var(--ease); }
.acc-icon::before, .acc-icon::after{ content:''; position:absolute; top:50%; left:50%; background:var(--ink); transition:transform .35s var(--ease), opacity .35s; }
.acc-icon::before{ width:26px; height:2px; transform:translate(-50%,-50%); }
.acc-icon::after{ width:2px; height:26px; transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.acc-item.open .acc-icon::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:1; }
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.acc-panel-inner{ padding:0 0 34px; color:var(--ink); font-size:18px; line-height:1.333; max-width:879px; }
.acc-panel-inner p{ margin-bottom:14px; }

.accordion-section{ position:relative; overflow:hidden; background:var(--white); }
@media (min-width:901px){
  .accordion-section .wrap{ padding-right:calc(var(--pad) + 340px); }
}
.accordion-deco{
  position:absolute; top:0; right:0; bottom:0; width:25.7vw; min-width:230px; max-width:370px;
  display:flex; pointer-events:none; z-index:1;
}
.deco-stripe{ flex:1; height:100%; }
.deco-sage{ background:var(--sage); }
.deco-teal{ background:var(--teal); }
.deco-ink{ background:var(--ink); }
.deco-badge{
  position:absolute; left:54%; top:50%; width:240px; height:236px; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
}
.deco-badge svg{ position:absolute; inset:0; width:100%; height:100%; animation:deco-spin 26s linear infinite; }
.deco-ring-track{ fill:none; }
.deco-ring-text{ font-family:'PP Mori','Inter',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.06em; fill:var(--white); text-transform:uppercase; }
.deco-letter{
  position:relative; font-family:Georgia,'Times New Roman',serif; font-size:134px; line-height:1;
  color:var(--white); pointer-events:none;
}
@keyframes deco-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (max-width:900px){ .accordion-deco{ display:none; } }

/* Full-bleed image band — Figma "Group 2147226476": 1440x568 rectangle,
   image as background edge-to-edge, white card floated over it at a fixed
   50px right gutter (matching --pad) and vertically centred. */
.switzerland-section{ padding-top:70px; padding-bottom:0; overflow:hidden; }
.switzerland-strip{ position:relative; width:100%; height:568px; }
.switzerland-bg{
  position:absolute; top:-40px; left:0; right:0; bottom:-40px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.switzerland-inner{ position:relative; height:100%; display:flex; align-items:center; justify-content:flex-end; }
.switzerland-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:24px;
  background:var(--white); border-radius:10px; padding:50px; width:100%; max-width:795px;
  box-shadow:0 4px 134px rgba(0,0,0,.2);
}
.switzerland-card h3{ margin-top:0; font-family:inherit; font-weight:600; font-size:50px; line-height:1.14; color:var(--ink); }
.switzerland-card p{ margin-top:0; color:var(--ink); font-size:18px; line-height:1.333; }

.work-heading{ font-size:clamp(28px,3.6vw,50px); }
.work-grid{
  display:grid; grid-template-columns:575fr 150fr 575fr; grid-template-rows:249px 150px 249px;
  gap:20px; margin-top:50px; max-width:1340px; margin-left:auto; margin-right:auto;
}
.work-card{
  box-sizing:border-box;
  background:var(--white);
  border:1px solid rgba(15,82,87,.2); border-radius:10px; padding:30px;
  display:flex; align-items:flex-start; gap:20px; flex-direction:column;
  position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s, z-index .4s;
}
.work-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -20px rgba(14,43,40,.3); z-index:2; }
.work-card .num{
  position:absolute; top:0; right:20px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:70px; line-height:1.35;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(255,255,255,0) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  opacity:.5;
}
.work-card .icon{
  width:60px; height:60px; border-radius:10px; flex:none;
  background:linear-gradient(180deg,#F4F4F4 0%,#FEFEFE 100%);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.work-card .icon svg{ width:26px; height:26px; }
.work-card .card-body{ display:flex; flex-direction:column; gap:12px; }
.work-card h4{ font-size:35px; line-height:1.343; font-weight:600; color:var(--ink); }
.work-card p{ font-size:18px; line-height:1.389; color:var(--text); margin-top:0; }
.work-decor{ background:linear-gradient(0deg,#CFE0C7 0%,#F8F7F2 100%); }
.work-decor.top{ border-radius:0 0 10px 10px; }
.work-decor.bottom{ border-radius:10px 10px 0 0; }
.work-decor.left{ background:linear-gradient(270deg,#CFE0C7 0%,#F2F0E8 100%); border-radius:0 10px 10px 0; }
.work-decor.right{ background:linear-gradient(90deg,#CFE0C7 0%,#F2F0E8 100%); border-radius:10px 0 0 10px; }
.work-photo{
  width:150px; height:150px; align-self:center; justify-self:center;
  box-sizing:border-box; padding:8px;
  background:#0F5257; border:1px solid #E4E4E4; border-radius:30px;
}
.work-photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:22px; }
@media (max-width:1400px){
  .work-grid{ max-width:94%; grid-template-columns:1fr .28fr 1fr; grid-template-rows:repeat(3,minmax(220px,auto)); }
  .work-card .num{ font-size:56px; }
  .work-card h4{ font-size:28px; }
}
@media (max-width:900px){
  .work-grid{ grid-template-columns:1fr; grid-template-rows:none; }
  .work-decor{ display:none; }
}

.credentials-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-top:35px; align-items:stretch; }
.credentials-grid .stat-card{ display:flex; flex-direction:column; height:100%; }
.credentials-grid .stat-card .top{ flex:1; display:flex; align-items:center; }
.credentials-grid .top p{ font-size:18px; line-height:1.39; color:var(--ink); }

/* =====================================================
   IDEAS PAGE
   ===================================================== */
.ideas-hero-section{
  position:relative; overflow:clip;
  background-image:url('../images/hero-fabric-bg.jpg');
  background-size:cover; background-position:top center; background-repeat:no-repeat;
}
.ideas-hero-section::before{
  content:''; position:absolute; top:0; right:0; width:52%; height:100%;
  background:linear-gradient(155deg, transparent 42%, var(--sage) 42.3%);
  opacity:.55; pointer-events:none; z-index:0;
}
.ideas-hero{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:end; }
.ideas-hero h1{ font-size:clamp(32px,4.2vw,50px); }
.ideas-hero p{ margin-top:20px; color:var(--text); max-width:560px; }
.ideas-hero .underline-mark{ margin:18px 0 18px; }
.ideas-hero .photo-frame{ position:relative; align-self:end; display:flex; justify-content:center; }
.ideas-hero .photo-frame img{ width:100%; max-width:480px; height:auto; object-fit:contain; display:block; }

/* Exact Figma frame: 1440x515, image 360x430 at left:1030 top:85 */
@media (min-width:1101px){
  .ideas-hero-section{ height:515px; padding-top:0; padding-bottom:0; }
  .ideas-hero-section .wrap{ height:100%; }
  .ideas-hero{ display:block; height:100%; padding-top:85px; }
  .ideas-hero > [data-reveal="left"]{ max-width:940px; }
  .ideas-hero h1{ font-size:clamp(32px,3.4vw,46px); max-width:900px; }
  .ideas-hero p{ max-width:900px; }
  .ideas-hero .photo-frame{
    position:absolute; bottom:0; left:1030px; width:360px; height:430px;
    align-self:auto; display:block;
  }
  .ideas-hero .photo-frame img{ width:100%; height:100%; max-width:none; object-fit:contain; }
}

.featured-section{ padding-top:55px; }
.featured-head{ display:flex; align-items:center; justify-content:space-between; margin-top:0; }
.featured-head h2{ font-size:clamp(28px,3.4vw,42px); }
.arrow-btns{ display:flex; gap:10px; }
.arrow-btns button{
  width:44px; height:44px; border-radius:var(--radius-sm); border:none; background:var(--ink); color:var(--cream);
  display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s;
}
.arrow-btns button:hover{ background:var(--teal); transform:translateY(-2px); }

.feature-card{
  margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--white); border-radius:var(--radius-md); overflow:hidden;
}
.feature-card[hidden]{ display:none; }
.feature-card img{ width:100%; height:100%; object-fit:cover; min-height:320px; }
.feature-card .content{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
.badge{ display:inline-block; background:var(--sage); color:var(--ink); font-size:12px; padding:6px 14px; border-radius:999px; width:fit-content; }
.feature-card h3{ font-size:clamp(22px,2.6vw,30px); margin-top:18px; }
.feature-card p{ margin-top:14px; color:var(--text-muted); }
.feature-card .src-link{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); margin-top:26px; padding-top:20px; font-weight:600; font-size:14.5px; color:var(--ink); }

.ideas-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-top:0; flex-wrap:wrap; gap:20px; }
.ideas-toolbar h2{ font-size:clamp(28px,3.4vw,42px); }
.filter-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-pills button{
  padding:10px 20px; border-radius:999px; border:1px solid var(--line); background:transparent;
  font-size:13px; font-weight:600; color:var(--ink); transition:.3s;
}
.filter-pills button.active, .filter-pills button:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.ideas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.idea-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.idea-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px -22px rgba(14,43,40,.35); }
.idea-card .media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.idea-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.idea-card:hover .media img{ transform:scale(1.08); }
.idea-card .media .tag{ position:absolute; top:14px; left:14px; background:var(--white); padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:600; }
.idea-card .media .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.idea-card .media .play span{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease);
}
.idea-card:hover .media .play span{ transform:scale(1.12); }
.idea-card .body{ padding:24px; }
.idea-card h3{ font-size:19px; }
.idea-card p{ margin-top:10px; font-size:14.5px; color:var(--text-muted); }
.idea-card .src{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); margin-top:20px; padding-top:16px; font-size:13.5px; font-weight:600; }
.idea-card[hidden]{ display:none; }

.load-more-wrap{ text-align:center; margin-top:50px; }

/* =====================================================
   IMPACT PAGE
   ===================================================== */
.stories-section{ padding-top:40px; }
.impact-hero{ max-width:1340px; }
.impact-hero h1{ font-weight:600; font-size:clamp(28px,7vw,40px); line-height:1.2; max-width:none; color:var(--ink); white-space:normal; }
.impact-hero h1 em{ font-style:italic; font-weight:100; color:var(--teal); }
@media (min-width:1101px){
  .impact-hero h1{ white-space:nowrap; font-size:clamp(34px,4.6vw,55px); }
}
.impact-hero .underline-mark{ margin:5px 0 0; }
.impact-hero p{ max-width:935px; margin-top:35px; font-size:18px; line-height:1.389; color:var(--text); }
.impact-pullquote{
  max-width:1228px;
  margin-top:35px; font-family:'PP Mori','Inter',sans-serif; /* font-style: italic; */ font-weight:600;
  font-size:30px; line-height:35px; color:#0D2B2E;
}
@media (max-width:1300px){
  .impact-pullquote{ font-size:clamp(20px,2.6vw,30px); line-height:1.17; }
}
.impact-pullquote em{ font-style:italic; font-weight:100; color:var(--teal); }
.impact-hero .about-gallery{ margin-top:56px; }

/* Builder-case cards under "The Question" */
.builder-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:50px; }
.builder-card{
  background:var(--sage); border-radius:var(--radius-sm); padding:5px 5px 14px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.builder-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(14,43,40,.35); }
.builder-card .body{ background:var(--white); border-radius:var(--radius-sm); padding:20px; min-height:165px; }
.builder-card .body p{ font-size:18px; line-height:1.389; color:var(--ink); }
.builder-card .label{ padding:0 19px; text-align:center; font-size:18px; line-height:19px; font-weight:600; text-transform:uppercase; color:var(--teal); }

/* Distinctive Difference — 4-up card row */
.impact-diff-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:50px; position:relative; z-index:1; }
.impact-diff-cards .diff-card{ min-height:261px; padding:20px; gap:46px; }
.impact-diff-cards .diff-card h5{ font-size:20px; }
.impact-diff-cards .diff-card p{ font-size:18px; line-height:1.17; }

/* Four Ways Forward — heading+image stacked left, item list right */
.ways-section{ padding-top:110px; padding-bottom:110px; }
.ways-split{ display:flex; justify-content:space-between; align-items:center; gap:99px; }
.ways-split .col-left{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:130px; width:458px; flex:none; align-self:stretch;
}
.ways-split .ways-intro{ display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.ways-split .ways-intro .eyebrow{ line-height:27px; letter-spacing:0; }
.ways-split .ways-heading{ margin:0; font-weight:600; font-size:clamp(30px,3.2vw,46px); line-height:1.14; }
.ways-split .col-left .thumb{ border-radius:var(--radius-md); overflow:hidden; }
.ways-split .col-left .thumb img{ width:100%; aspect-ratio:456/293; object-fit:cover; border-radius:var(--radius-md); }
.ways-split .col-right{
  flex:1; min-width:0; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-end; gap:32px;
}

/* Impact stats — exact comp metrics (card 215 tall, 15px gutters) */
.impact-stats-row{ gap:15px; margin-top:80px; }
.impact-stats-row .stat-card{ display:flex; flex-direction:column; gap:14px; padding:5px 5px 14px; }
.impact-stats-row .stat-card .top{ padding:20px; }
.impact-stats-row .stat-card .top .label{ font-size:16px; line-height:17px; }
.impact-stats-row .stat-card .top .row{ margin-top:62px; align-items:flex-end; }
.impact-stats-row .stat-card .top .row .label{ font-size:16px; line-height:18px; padding-bottom:5px; }
.impact-stats-row .stat-card .top .row .num{ font-size:48px; line-height:1; }
.impact-stats-row .stat-card .bottom{ padding:0 19px; text-align:left; font-size:14px; line-height:15px; }

/* Selected Impact Stories — header row with nav arrows */
.stories-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  width:100%; gap:24px;
}
.stories-nav{ display:flex; gap:12px; flex-shrink:0; }
.stories-arrow{
  width:52px; height:52px; border-radius:var(--radius-sm); border:none;
  background:var(--ink); color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.stories-arrow svg{ width:22px; height:22px; }
.stories-arrow:hover{ background:var(--teal); }
.stories-arrow:active{ transform:scale(.94); }

/* Selected Impact Stories — scrollable row of portrait cards */
/* Figma: track 2698px = 6 x 433px cards + 5 x 20px gaps, viewport 1340x560 */
.stories-grid{
  display:flex; align-items:center; gap:20px; width:100%; margin:50px 0 0;
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
}
.stories-grid::-webkit-scrollbar{ display:none; }
.impact-story-card{
  position:relative; margin:0; flex:0 0 calc((100% - 40px)/3); scroll-snap-align:start;
  aspect-ratio:433/560; border-radius:15px;
  overflow:hidden; background:var(--ink);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
@media (max-width:900px){ .impact-story-card{ flex-basis:80%; } }
.impact-story-card:hover{ transform:translateY(-6px); box-shadow:0 22px 46px -20px rgba(14,43,40,.45); }
.impact-story-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.impact-story-card:hover img{ transform:scale(1.04); }
.impact-story-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,43,46,0) 41.86%,
    rgba(13,43,46,.815608) 79.16%,
    #0D2B2E 100%);
}
.impact-story-card figcaption{
  position:absolute; left:22px; right:22px; bottom:22px; z-index:2;
  font-size:25px; line-height:33px; font-weight:600; letter-spacing:-.01em; color:var(--white);
}
@media (max-width:1100px){
  .impact-story-card figcaption{ font-size:clamp(19px,2.2vw,25px); line-height:1.32; }
}

.impact-cta{ text-align:center; max-width:760px; margin:90px auto 0; }

/* =====================================================
   CONTACT PAGE
   ===================================================== */
.contact-hero p{ max-width:700px; margin-top:20px; color:var(--text); }
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:0; margin-top:56px; border-radius:var(--radius-md); overflow:hidden; }
.contact-form{ background:var(--white); padding:48px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{
  display:flex; align-items:center; gap:12px; background:var(--field-bg); border:1px solid transparent;
  border-radius:10px; padding:17px 20px; transition:border-color .3s, background .3s;
}
.field:focus-within{ border-color:var(--teal); background:var(--white); }
.field svg{ width:19px; height:19px; flex:none; color:var(--ink); opacity:.85; }
.field input, .field select, .field textarea{
  border:none; background:transparent; outline:none; font-size:15px; width:100%; color:var(--text); font-family:inherit;
}
.field.textarea{ align-items:flex-start; }
.field textarea{ resize:vertical; min-height:90px; }
.privacy-note{ display:flex; gap:16px; align-items:flex-start; margin:22px 0; font-size:14.5px; line-height:1.4; color:var(--text-muted); }
.privacy-note .lock{
  width:60px; height:60px; border-radius:12px; background:var(--field-bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.privacy-note .lock svg{ width:24px; height:24px; }

/* ---------- Contact side panel ---------- */
.contact-side{
  background:var(--ink); color:var(--cream); display:flex; flex-direction:column; justify-content:space-between;
  align-items:flex-start; border-radius:10px;
  position:relative; overflow:hidden; isolation:isolate;
}
.contact-top{ position:relative; width:100%; padding:30px 0 0 30px; flex:1; min-height:380px; }
.contact-heading{ position:relative; z-index:1; max-width:55%; }
.contact-side .label{
  font-size:16px; line-height:17px; font-weight:400; text-transform:uppercase; color:var(--white);
}
.contact-side h3{ color:var(--white); font-weight:600; font-size:clamp(30px,3.6vw,44px); line-height:1.12; margin-top:14px; }
.contact-photo-bleed{
  display:block; position:absolute; right:28px; top:15px; height:calc(100% - 15px); width:auto; max-width:62%;
}
.contact-photo-bleed .photo-glow{
  position:absolute; inset:0; display:block;
  background-image:url('../images/portrait-hero-cutout.png');
  background-repeat:no-repeat; background-size:contain; background-position:top right;
  /* approximates the glowing white outline/halo traced around the cutout in the source design */
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff) drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff)
    drop-shadow(0 0 22px rgba(255,255,255,.4));
}
.contact-photo-bleed img{
  position:relative; display:block; height:100%; width:auto; margin:0 auto;
  object-fit:contain; object-position:top right;
}
.contact-bottom{ width:100%; box-sizing:border-box; padding:0 30px 30px; display:flex; flex-direction:column; gap:35px; margin-top:0; }
.contact-email-box{
  box-sizing:border-box; width:100%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.5); border-radius:10px;
  padding:20px; display:flex; gap:17px; align-items:center;
}
.contact-email-box .ic{
  width:56px; height:56px; border-radius:12px; background:var(--white); color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-email-box .ic svg{ width:24px; height:24px; }
.contact-email-box strong{ display:block; font-size:22px; line-height:1.25; font-weight:600; color:var(--white); }
.contact-email-box span{ font-size:15px; line-height:1.35; color:rgba(255,255,255,.75); }
.social-row{ width:100%; display:flex; flex-direction:column; gap:12px; }
.social-row .label{ display:block; text-transform:none; font-size:18px; line-height:28px; }
.social-icons{ display:flex; flex-wrap:nowrap; gap:clamp(4px,1.2vw,8px); width:100%; }
.social-icons a{
  flex:1 1 0; aspect-ratio:1/1; max-width:54px; border-radius:10px; background:var(--white); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
}
.social-icons a svg{ width:22px; height:22px; }
.social-icons a:hover{ background:var(--sage); color:var(--ink); transform:translateY(-3px); }
.submit-row{ display:flex; justify-content:flex-start; }
.form-success{
  display:none; align-items:center; gap:10px; background:var(--sage); color:var(--ink); border-radius:var(--radius-sm);
  padding:14px 18px; margin-top:16px; font-size:14px; font-weight:600;
}
.form-success.show{ display:flex; }

/* ---------- Scroll progress + back to top ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; background:var(--teal); z-index:200; width:0%; }
.back-to-top{
  position:fixed; right:26px; bottom:26px; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s;
  z-index:150; border:none;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ background:var(--teal); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px){
  .home-hero .grid, .question-band, .ways-grid, .formation-grid, .why-grid, .ideas-hero, .feature-card, .contact-grid{
    grid-template-columns:1fr !important;
  }
  .diff-grid{ flex-direction:column !important; }
  .diff-grid > [data-reveal="left"]{ max-width:none; gap:40px; }
  .ways-split{ flex-direction:column; gap:40px; align-items:stretch; }
  .ways-split .col-left{ width:100%; gap:40px; }
  .ways-split .col-right{ align-items:stretch; gap:24px; }
  .way-item h4{ line-height:1.25; }
  .impact-stats-row{ margin-top:56px; }
  .stat-grid, .impact-stats{ grid-template-columns:repeat(2,1fr); }
  .press-grid{ grid-template-columns:repeat(2,1fr); }
  .testi-track, .ideas-grid, .impact-pillars, .credentials-grid{ grid-template-columns:repeat(2,1fr); }
  .press-strip{ flex-wrap:wrap; justify-content:center; max-width:none; }
  .press-strip a{ width:calc(50% - 15px); height:auto; aspect-ratio:388/440; }
  footer.site .foot-top{ grid-template-columns:1fr 1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .nav-toggle{ display:block; }
  .home-hero .wordmark{ position:static; padding:0; margin-bottom:20px; }
  .home-hero .hero-inner{ padding-top:0; }
  .hero-seal{ width:110px; height:108px; top:auto; left:auto; right:var(--pad); bottom:24px; }
  .seal-badge--overlap{ transform:none; margin-bottom:20px; }

  /* Mobile nav: full-width dropdown panel, animated open/close */
  nav.main-nav{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--cream); border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px -20px rgba(14,43,40,.3);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .45s var(--ease), opacity .3s ease;
  }
  nav.main-nav.open{ max-height:70vh; opacity:1; overflow-y:auto; }
  nav.main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; padding:10px var(--pad) 26px; }
  nav.main-nav li{ width:100%; }
  nav.main-nav a{ display:block; padding:14px 0; width:100%; font-size:16px; }
  nav.main-nav a::after{ display:none; }
  header.site .wrap{ position:relative; flex-wrap:wrap; }
}

/* ---------- Tablet refinements (768–1100px) ---------- */
@media (max-width:1100px) and (min-width:641px){
  .wordmark-foot{ font-size:clamp(40px,7.5vw,90px); }
  .builder-cards, .impact-diff-cards{ grid-template-columns:repeat(2,1fr); }
  .contact-photo-bleed{ max-width:48%; }
}

@media (max-width: 640px){
  .stat-grid, .impact-stats, .press-grid, .testi-track, .ideas-grid, .impact-pillars, .credentials-grid{
    grid-template-columns:1fr 1fr;
  }
  .press-strip{ gap:10px; }
  .press-strip a{ width:calc(50% - 5px); }
  .gallery-row{ gap:10px; }
  .diff-cards{ grid-template-columns:1fr; }
  footer.site .foot-top{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .switzerland-strip{ height:auto; }
  .switzerland-bg{ top:0; bottom:0; }
  .switzerland-inner{ justify-content:center; padding-top:40px; padding-bottom:40px; }
  .switzerland-card{ padding:28px; gap:16px; }
  .switzerland-card h3{ font-size:32px; line-height:1.2; }
  .switzerland-card p{ font-size:16px; }
  section{ padding-top:64px; padding-bottom:64px; }
  section.tight{ padding-top:44px; padding-bottom:44px; }
  .ways-section{ padding-top:64px; padding-bottom:64px; }
  .way-item{ grid-template-columns:19px 1fr; gap:20px; }
  .way-rule{ width:calc(100% - 39px); }
  .impact-stats-row .stat-card .top .row{ margin-top:32px; }
  .builder-cards, .impact-diff-cards{ grid-template-columns:1fr 1fr; }
  .contact-grid{ margin-top:36px; border-radius:var(--radius-sm); }
  .contact-form{ padding:32px 24px; }
  .contact-top{ min-height:280px; padding:24px 24px 0; }
  .contact-heading{ max-width:60%; }
  .contact-photo-bleed{ max-width:52%; right:16px; }
  .contact-bottom{ padding:0 24px 24px; gap:24px; }
  .submit-row{ width:100%; }
  .submit-row .btn{ width:100%; justify-content:center; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px){
  header.site .btn-light{ padding:12px 16px; font-size:13px; gap:8px; }
  header.site .logo{ font-size:20px; }
  .stat-grid, .impact-stats, .press-grid, .testi-track, .ideas-grid, .impact-pillars, .credentials-grid,
  .builder-cards, .impact-diff-cards{
    grid-template-columns:1fr;
  }
  .press-strip a{ width:100%; }
  .diff-row{ flex-direction:column; }
  .about-hero p, .home-hero .lede{ font-size:16px; }
  .switzerland-card{ padding:20px; }
  .contact-grid{ margin-top:28px; }
  .contact-form{ padding:28px 20px; }
  .field-row{ gap:12px; margin-bottom:12px; }
  .field{ padding:14px 16px; gap:10px; }
  .field input, .field select, .field textarea{ font-size:16px; }
  .privacy-note{ gap:12px; margin:18px 0; }
  .privacy-note .lock{ width:48px; height:48px; border-radius:10px; }
  .contact-top{ min-height:auto; padding:24px 20px 20px; }
  .contact-photo-bleed{ display:none; }
  .contact-heading{ max-width:100%; }
  .contact-side h3{ font-size:clamp(26px,7vw,32px); }
  .contact-bottom{ padding:0 20px 20px; gap:20px; }
  .contact-email-box{ flex-wrap:wrap; padding:16px; }
  .social-icons{ flex-direction:row; flex-wrap:nowrap; gap:6px; }
  .social-icons a{ flex:1 1 0; width:auto; aspect-ratio:1/1; height:auto; max-width:40px; }
  .btn{ padding:14px 20px; font-size:14px; white-space:normal; text-align:center; }
  .newsletter-input{ padding:20px; flex-wrap:wrap; }
}

/* =====================================================
   SPEAKING & STRATEGIC PAGE
   ===================================================== */
.speaking-hero{
  padding-bottom:60px;
  background-image:url('../images/hero-fabric-bg.jpg');
  background-size:cover; background-position:top center; background-repeat:no-repeat;
}
.speaking-hero h1{ font-size:clamp(34px,4.6vw,55px); line-height:1.2; max-width:1205px; }
.speaking-hero h1 em{ font-style:italic; font-weight:100; color:var(--teal); }
.speaking-hero .hero-rule{ display:block; width:199px; max-width:100%; height:1px; margin-top:5px; background:var(--teal); }
.speaking-hero p{ max-width:935px; margin-top:35px; font-size:18px; line-height:25px; color:var(--text); }

/* Hero media strip — wide panel photo + narrower stage photo (2:1) */
.speaking-hero-media{ display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-top:56px; }
.speaking-hero-media a{ display:block; height:320px; border-radius:var(--radius-sm); overflow:hidden; }
.speaking-hero-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.speaking-hero-media a:hover img{ transform:scale(1.05); }

/* Centred eyebrow + heading used by the themes / proof / testimonial bands */
.section-head{ text-align:center; max-width:940px; margin:0 auto; }
.section-head .eyebrow{ display:block; }
.section-head h2{ margin-top:12px; font-size:clamp(30px,3.4vw,45px); line-height:1.14; }
.section-head h2 em{ font-style:italic; font-weight:100; color:var(--teal); }

/* Signature themes — 6-col grid: 3 cards (2 cols) then 2 cards (3 cols) */
.themes-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:50px; }
.theme-card{
  grid-column:span 2; background:var(--sage); border:1px solid var(--sage-border);
  border-radius:var(--radius-sm); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.theme-card:nth-child(4), .theme-card:nth-child(5){ grid-column:span 3; }
.theme-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(14,43,40,.35); }
.theme-card .top{ background:var(--white); padding:20px; flex:1; }
.theme-card .top p{ font-size:16px; line-height:1.35; color:var(--ink); }
.theme-card .label{
  padding:14px 20px 16px; font-size:16px; line-height:1.25; font-weight:600;
  text-transform:uppercase; color:var(--ink);
}

/* Formats — full-bleed photo band (Figma export: board artwork with the
   format list set on it). Sits edge to edge between the themes grid and
   the Selected Proof band, exactly as in the source design. */
.formats-section{ padding-top:70px; padding-bottom:0; }
.formats-band{
  display:block; margin:0; position:relative;
  width:100vw; max-width:100vw;
  margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);
}
.formats-band img{ width:100%; height:auto; display:block; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Selected proof — three video cards */
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.proof-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:0 14px 34px -26px rgba(14,43,40,.45);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.proof-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px -22px rgba(14,43,40,.35); }
.proof-card .media{ position:relative; aspect-ratio:16/10; overflow:hidden; display:block; }
.proof-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.proof-card:hover .media img{ transform:scale(1.07); }
.proof-card .media .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.proof-card .media .play span{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease);
}
.proof-card:hover .media .play span{ transform:scale(1.12); }
.proof-card .body{ padding:20px 18px 24px; text-align:center; }
.proof-card h3{ font-size:20px; line-height:1.3; }
.proof-card .sub{ display:block; margin-top:8px; font-size:14px; color:var(--text-muted); }

/* Testimonial band — measured from the Figma frame (1340 content):
   three 372px columns, 82px gutters, 30px inset, no card chrome.
   Divider sits at a fixed offset so all three align regardless of
   quote length; 70px round portrait + name/organisation beside it. */
.speaking-testimonials{ padding-top:80px; }
.speaking-testimonials .testi-track{ gap:82px; margin-top:50px; padding:0 30px; }
.speaking-testimonials .testi-card{ background:transparent; padding:0; border-radius:0; }
.speaking-testimonials .testi-card:hover{ transform:none; box-shadow:none; }
.speaking-testimonials .testi-card p.quote{
  font-size:18px; line-height:24px; color:var(--text); min-height:72px;
}
.speaking-testimonials .testi-card hr{ border-top:1px solid #e9e9e9; margin:33px 0 30px; }
.speaking-testimonials .testi-person{ gap:16px; align-items:center; }
.speaking-testimonials .testi-person > div{ display:flex; flex-direction:column; gap:2px; }
.speaking-testimonials .testi-person strong{ font-size:18px; line-height:24px; font-weight:600; color:var(--ink); }
.speaking-testimonials .testi-person span{ font-size:18px; line-height:24px; color:var(--text); }
.speaking-testimonials .testi-person img.testi-avatar{ width:70px; height:70px; border-radius:50%; object-fit:cover; flex:none; }

@media (max-width:1100px){
  .speaking-hero-media{ grid-template-columns:1fr; }
  .speaking-hero-media a{ height:260px; }
  .themes-grid{ grid-template-columns:repeat(2,1fr); }
  .theme-card, .theme-card:nth-child(4), .theme-card:nth-child(5){ grid-column:span 1; }
  .proof-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1100px){
  .speaking-testimonials .testi-track{ gap:40px; padding:0; }
}
@media (max-width:640px){
  .themes-grid{ grid-template-columns:1fr; }
  .speaking-testimonials .testi-card p.quote{ min-height:0; }
  .proof-grid{ grid-template-columns:1fr; }
  .speaking-hero-media a{ height:210px; }
}