:root{
  --navy:#0F2D3F; --navy-deep:#0A2331; --black-band:#131313;
  --pink:#E84372; --pink-soft:#EF5E87; --white:#fff; --grey:#B8C0C6; --grey-dim:#6E7A82; --cream:#f1f1f0;
  --pad-x: clamp(20px, 6vw, 64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{scroll-behavior:smooth}
body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--white);background:var(--navy);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto}

/* visible focus states everywhere (keyboard nav) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:2px;
}

.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;
}

/* NAV */
nav.top{background:var(--navy);padding:clamp(14px,2vw,24px) var(--pad-x);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.logo{font-weight:800;font-size:26px;letter-spacing:1px;display:flex;align-items:center;gap:18px}
.logo .sep{display:inline-block;width:2px;height:24px;background:var(--pink);margin:0 8px}
.logo-name{font-weight:700;font-size:23px;letter-spacing:.5px;color:var(--white)}
.logo-divider{width:1px;height:26px;background:rgba(255,255,255,.25)}
.logo-gsb{height:25px;width:auto;display:block;opacity:.92}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;background:rgba(10,35,49,.6);padding:9px 16px;margin-bottom:24px;border-left:3px solid var(--pink)}
.hero-eyebrow span{color:var(--white);font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase}
.hero-eyebrow img{height:26px;width:auto;display:block}
.footer-gsb{height:26px;width:auto;display:block;margin-bottom:14px}
.nav-links{display:flex;gap:40px;font-size:17px;font-weight:400;align-items:center}
.nav-links .item{position:relative;padding:6px 0;cursor:pointer}
.nav-links .item:hover{color:var(--pink)}
.nav-links .caret{font-size:11px;margin-left:4px}
.dropdown{display:none;position:absolute;top:100%;left:-20px;background:var(--navy-deep);padding:12px 0;min-width:250px;box-shadow:0 8px 24px rgba(0,0,0,.4);flex-direction:column}
.dropdown a{padding:10px 24px;font-size:15px;display:block;transition:background .15s}
.dropdown a:hover{background:rgba(232,67,114,.15);color:var(--pink)}
.nav-links .item:hover .dropdown,.nav-links .item.open .dropdown{display:flex}
.nav-cta{border:1px solid var(--pink);color:var(--pink);padding:9px 20px;font-size:15px;font-weight:600;letter-spacing:.5px;transition:all .2s}
.nav-cta:hover{background:var(--pink);color:var(--white)}

/* hamburger control — hidden by default (desktop nav shows instead);
   made visible in the dedicated nav breakpoint below */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle-bar{
  display:block;
  width:20px;
  height:2px;
  background:var(--white);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* HERO */
.hero{position:relative;height:clamp(420px,55vw,600px);overflow:hidden}
/* .hero-bg is always the (untransformed) clipping box; the image and
   the zoom animation live on its ::before instead, so the same pair
   works both as an absolute full-bleed overlay (desktop) and as a
   normal block with its own height (mobile stacked layout) without
   duplicating the image/animation rules for each case. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(135deg,rgba(22,36,46,.42) 0%,rgba(12,22,30,.5) 100%),url('../../images/hero.jpg');
  background-size:cover;
  background-position:65% 20%;
  background-blend-mode:multiply;
  transform:scale(1);
}
.hero-slice{position:absolute;inset:0;background:var(--pink);clip-path:polygon(0 0,58% 0,42% 100%,0 100%);z-index:1}
.hero-stripe{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-stripe::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom right,transparent calc(58% - 1px),var(--pink) 58%,var(--pink) calc(58% + 3px),transparent calc(58% + 4px));clip-path:polygon(40% 0,62% 0,44% 100%,22% 100%)}
.hero-content{position:relative;z-index:3;max-width:1280px;margin:0 auto;padding:clamp(56px,10vw,104px) var(--pad-x) 0}
.hero h1{font-weight:900;font-size:clamp(30px,5.5vw,48px);line-height:1.12;max-width:540px;color:#0B0B0B;margin-bottom:18px}
.hero h2{font-weight:800;font-size:clamp(24px,4.5vw,40px);line-height:1.15;max-width:640px;color:var(--white);margin-bottom:22px}
.hero .kick{max-width:520px;color:var(--white);font-weight:300;font-size:clamp(15px,2.2vw,18px);margin-bottom:30px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 34px;border:1px solid var(--white);color:var(--white);font-size:16px;font-weight:500;letter-spacing:.5px;background:transparent;transition:all .2s;cursor:pointer}
.btn:hover{background:var(--pink);border-color:var(--pink)}
.btn.solid{background:var(--pink);border-color:var(--pink)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:var(--white)}
.btn.dark:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn.solid:hover{background:var(--pink-soft);border-color:var(--pink-soft)}

/* PULL QUOTE */
.pullquote{background:var(--navy);padding:clamp(48px,9vw,90px) var(--pad-x);display:flex;justify-content:center}
.pullquote-inner{max-width:1024px}
.pullquote blockquote{font-size:clamp(18px,3vw,25px);font-weight:300;line-height:1.55}
.pullquote blockquote::before{
  content:'\201C';
  display:block;
  color:var(--pink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(40px,8vw,68px);
  font-weight:700;
  line-height:1;
  margin-bottom:-.2em;
}
.pullquote blockquote::after{
  content:'\201D';
  display:block;
  color:var(--pink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(40px,8vw,68px);
  font-weight:700;
  line-height:1;
  text-align:right;
  margin-top:-.26em;
}
.pullquote .attribution{margin-top:28px;color:var(--pink);font-weight:700;letter-spacing:3px;font-size:13px}

/* LOGOS */
.logos-band{background:var(--white);padding:clamp(28px,6vw,44px) var(--pad-x)}
.logos-label{text-align:center;color:var(--grey-dim);font-size:12px;font-weight:700;letter-spacing:3px;margin-bottom:26px;text-transform:uppercase}
.client{height:32px;width:auto;object-fit:contain;filter:grayscale(100%);opacity:.6;transition:opacity .2s}
.client:hover{opacity:1}
/* individual height adjustments for optical balance, not literal size:
   BofA's wordmark+diamond lockup has a lot of built-in whitespace and
   thin strokes, so it reads smaller than the others at a matching pixel
   height; Uber's mark is a solid icon badge, which reads smaller as a
   compact square than the wordmarks read as horizontal type. */
.client-bofa{height:42px}
.client-uber{height:34px}

/* Marquee: a slow, continuous drift on desktop/tablet. The track holds
   four identical logo sets back-to-back (only the first is exposed to
   assistive tech; the rest are aria-hidden and exist purely so the loop
   never runs out of content before it resets). Looping is seamless
   because all four sets share identical width (flex-shrink:0, same
   internal gap mirrored as trailing padding-right) — translateX(-25%)
   moves the track by exactly one set-width, so the instant reset to 0%
   is visually indistinguishable from where the animation just was. */
.logos-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.logos-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:logos-scroll 42s linear infinite;
}
.logos-marquee:hover .logos-track,
.logos-marquee:focus-within .logos-track{
  animation-play-state:paused;
}
.logos-set{
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:28px clamp(24px,5vw,48px);
  padding-right:clamp(24px,5vw,48px);
}
@keyframes logos-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-25%)}
}
@media (prefers-reduced-motion: reduce){
  .logos-track{animation:none;transform:none;width:auto}
  .logos-set[aria-hidden="true"]{display:none}
  .logos-set{flex-wrap:wrap;justify-content:center;padding-right:0}
  .logos-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
}

/* ABOUT */
.about{background:var(--cream);color:var(--navy);padding:clamp(48px,8vw,84px) var(--pad-x)}
.about .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:stretch}
.about .photo{background-image:linear-gradient(rgba(15,45,63,.12),rgba(15,45,63,.28)),url('../../images/about.jpg');background-size:cover;background-position:center top;min-height:clamp(320px,55vw,460px)}
.about h2{color:var(--pink);font-family:'Raleway',sans-serif;font-weight:800;font-size:22px;letter-spacing:4px;margin-bottom:22px}
.about p{color:var(--navy);font-size:18px;line-height:1.65;font-weight:300;margin-bottom:18px}
.about p strong{font-weight:700}

/* WHO I HELP */
.whohelp{background:var(--navy);padding:clamp(48px,8vw,84px) var(--pad-x)}
.whohelp h2{color:var(--pink);font-size:clamp(26px,5vw,42px);font-weight:800;margin-bottom:48px}
.whohelp-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.whohelp-col h3{color:var(--white);font-size:14px;font-weight:700;letter-spacing:6px;margin-bottom:16px}
.whohelp-col p{color:var(--white);font-size:18px;line-height:1.6;font-weight:300}

/* CAPABILITIES — photo-free tiles: brand-colour blocks, not
   photography. Per the handoff brief, the site's photography budget
   is 2-3 images total (hero + about + at most one more), so these
   can no longer carry background photos. */
.capabilities{background:var(--black-band);padding:clamp(48px,8vw,84px) 0 8px}
.capabilities h2{color:var(--pink);font-size:clamp(26px,5vw,42px);font-weight:800;padding:0 var(--pad-x);max-width:calc(1280px + 2 * var(--pad-x));margin:0 auto clamp(28px,5vw,48px)}
.tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding:0 12px;
}
/* 7 tiles in a 3-column grid leaves one on its own row; centre it
   under the middle column rather than leaving it stranded on the left. */
.tiles > .tile:last-child:nth-child(3n+1){grid-column:2}
.tile{
  --tile-ease:cubic-bezier(.4,0,.2,1);
  position:relative;
  min-height:250px;
  overflow:hidden;
  background:var(--navy-deep);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:36px 32px;
  cursor:pointer;
  transition:background-color .3s var(--tile-ease), transform .3s var(--tile-ease), box-shadow .3s var(--tile-ease);
}
/* accent line: short by default, extends on hover/focus. Replaces the
   old static full-width border-top so the same pink rule can animate. */
.tile::before{
  content:'';
  position:absolute;
  top:0; left:0;
  height:3px;
  width:40px;
  background:var(--pink);
  transition:width .3s var(--tile-ease);
}
.tile:hover::before,
.tile:focus-visible::before{ width:100%; }
.tile::after{
  content:'';
  position:absolute;
  top:0; right:0;
  width:0; height:0;
  border-style:solid;
  border-width:0 0 46px 46px;
  border-color:transparent transparent var(--pink) transparent;
  opacity:.16;
  transition:opacity .3s var(--tile-ease);
}
.tile:hover,
.tile:focus-visible{
  background:var(--navy);
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(0,0,0,.22);
}
.tile:hover::after,
.tile:focus-visible::after{ opacity:.32; }
.tile .label{position:relative;z-index:2;color:var(--white);font-weight:800;font-size:24px;line-height:1.15;margin-bottom:14px;transform:translateY(0);transition:color .3s var(--tile-ease), transform .3s var(--tile-ease)}
.tile:hover .label,
.tile:focus-visible .label{ color:var(--pink); transform:translateY(-4px); }
/* fluid: ~17px at phone widths, ~18px at tablet, ~18-20px at desktop -
   subordinate to the 24px label, but no longer small/faint */
.tile .desc{position:relative;z-index:2;color:var(--grey);font-weight:300;font-size:clamp(17px,16.5px + 0.25vw,20px);line-height:1.55;margin:0}
.tile-arrow{
  position:absolute;
  right:28px;
  bottom:22px;
  z-index:2;
  color:var(--pink);
  font-size:20px;
  font-weight:700;
  line-height:1;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .3s var(--tile-ease), transform .3s var(--tile-ease);
}
.tile:hover .tile-arrow,
.tile:focus-visible .tile-arrow{ opacity:1; transform:translateX(0); }
/* touchscreens can't hover, so keep the arrow subtly visible at rest
   rather than hiding the affordance behind an interaction that can't
   happen there */
@media (hover:none){
  .tile-arrow{ opacity:.55; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .tile,.tile::before,.tile::after,.tile .label,.tile-arrow{ transition:none; }
  .tile:hover,
  .tile:focus-visible{ transform:none; box-shadow:none; }
  .tile:hover .label,
  .tile:focus-visible .label{ transform:none; }
  .tile-arrow{ opacity:.55; transform:none; }
}

/* TESTIMONIALS */
.testi{background:var(--navy);padding:clamp(48px,8vw,84px) var(--pad-x)}
.testi h2{color:var(--pink);font-size:clamp(26px,5vw,42px);font-weight:800;margin-bottom:48px}
.testi-layout{display:flex;flex-direction:column;gap:20px}
/* shared quote-panel language: both the featured blockquote and the
   secondary cards use it, so the oversized mark, spacing rhythm, and
   attribution styling stay identical — only size/background differ. */
.testi-featured,
.testi-card{
  position:relative;
  margin:0;
  overflow:visible;
}
.testi-mark{
  position:absolute;
  top:-.28em;
  left:-.06em;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:700;
  color:var(--pink);
  line-height:1;
  user-select:none;
  z-index:0;
}
.testi-featured p:not(.testi-who),
.testi-card p:not(.testi-who){
  position:relative;
  z-index:1;
  color:var(--white);
  font-weight:300;
  margin:0;
}
.testi-who{
  position:relative;
  z-index:1;
  color:var(--pink);
  font-weight:700;
  letter-spacing:.1em;
  font-size:12px;
  text-transform:uppercase;
  margin:0;
}

/* featured quote: full width, larger type, contrasting black-band
   panel so it reads as the strongest testimonial on the page rather
   than one card among equals. */
.testi-featured{
  background:var(--black-band);
  padding:clamp(44px,7vw,64px) clamp(32px,6vw,72px) clamp(36px,5vw,48px);
}
.testi-featured .testi-mark{font-size:clamp(72px,10vw,116px)}
.testi-featured p:not(.testi-who){
  font-size:clamp(21px,2.4vw,27px);
  line-height:1.55;
  max-width:38em;
  margin-top:.2em;
}
.testi-featured .testi-who{margin-top:36px}

/* secondary quotes: smaller, quieter navy-deep panels, three across
   on desktop rather than a mechanical 2x2 grid. */
.testi-secondary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:start;
  gap:20px;
}
.testi-card{
  background:var(--navy-deep);
  padding:clamp(30px,4vw,38px) clamp(26px,3vw,30px) 28px;
}
.testi-card .testi-mark{font-size:clamp(48px,5vw,64px)}
.testi-card p:not(.testi-who){
  font-size:clamp(17px,1.3vw,19px);
  line-height:1.6;
  margin-top:.35em;
}
.testi-card .testi-who{margin-top:28px}
/* a little editorial stagger rather than a perfectly even row */
.testi-secondary .testi-card:nth-child(2){margin-top:22px}

/* INSIGHTS */
.insights{background:var(--black-band);padding:clamp(48px,8vw,84px) var(--pad-x)}
.insights h2{color:var(--pink);font-size:clamp(26px,5vw,42px);font-weight:800;margin-bottom:14px}
.insights .lead{color:var(--grey);font-weight:300;font-size:18px;margin-bottom:46px;max-width:760px}
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ins-card{background:var(--navy-deep);padding:34px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between}
.ins-card h3{color:var(--white);font-size:20px;font-weight:800;margin-bottom:10px}
.ins-card p{color:var(--grey);font-weight:300;font-size:14px;line-height:1.5}
.ins-card .tag{color:var(--pink);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-top:18px}

/* CONTACT */
.contact{background:var(--cream);color:var(--navy);padding:clamp(48px,8vw,84px) var(--pad-x)}
.contact .wrap{max-width:760px}
.contact h2{color:var(--navy);font-size:clamp(26px,5vw,40px);font-weight:800;margin-bottom:12px}
.contact .lead{color:var(--navy);font-size:18px;font-weight:300;margin-bottom:30px}
.toggle{display:inline-flex;border:1px solid var(--navy);margin-bottom:26px}
.toggle button{padding:10px 22px;background:transparent;border:none;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--navy)}
.toggle button.active{background:var(--navy);color:var(--white)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form label{display:block;font-size:13px;font-weight:700;letter-spacing:.5px;margin:16px 0 6px}
form input,form select,form textarea{width:100%;padding:12px 14px;border:1px solid #c9cdd1;font-family:inherit;font-size:15px;background:var(--white);color:var(--navy)}
form textarea{min-height:120px;resize:vertical}
.checks{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:8px}
.checks label{display:flex;align-items:center;gap:8px;font-weight:400;letter-spacing:0;margin:0;font-size:15px;padding:4px 0}
.checks input{width:auto}
form .btn-dark{margin-top:26px;display:inline-block;padding:15px 38px;border:none;background:var(--pink);color:var(--white);font-size:16px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:background .2s}
form .btn-dark:hover{background:var(--pink-soft)}
.row-note{font-size:13px;color:var(--grey-dim);margin-top:14px}

/* FOOTER */
footer{background:var(--navy-deep);padding:clamp(44px,7vw,68px) var(--pad-x) clamp(30px,5vw,40px)}
.footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px}
footer h3{color:var(--grey);font-size:13px;letter-spacing:2px;font-weight:500;margin-bottom:18px}
footer ul{list-style:none}
footer li{color:var(--grey);font-size:15px;padding:4px 0;font-weight:300;cursor:pointer}
footer li:hover{color:var(--pink)}
.sister-note{color:var(--grey);font-size:14px;font-weight:300;line-height:1.6}
.sister-note .pink-link{color:var(--pink);font-weight:500}
.copyright{max-width:1280px;margin:56px auto 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);color:var(--grey-dim);font-size:13px;font-weight:300}

/* =========================================================
   NAV — dedicated hamburger breakpoint. Nav's items need more
   room than the sections do before crowding starts, so this is
   intentionally a different threshold than the 900px content
   breakpoint below (not just reusing it).
   ========================================================= */
@media (max-width: 1024px){
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--navy-deep);
    padding:8px 24px 24px;
    box-shadow:0 12px 24px rgba(0,0,0,.35);
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }
  .nav-links.open{ display:flex; }
  .nav-links .item{ padding:14px 0; }
  .nav-links > .item::after{ display:none; }
  .dropdown{
    position:static;
    box-shadow:none;
    background:transparent;
    padding:4px 0 4px 16px;
    min-width:0;
  }
  .nav-cta{ align-self:flex-start; margin-top:8px; }
}

/* =========================================================
   Content breakpoint — grid/stacking changes that still need a
   hard switch rather than fluid scaling (typography and spacing
   above this point are handled with clamp(), not hard-coded
   per-breakpoint overrides).
   ========================================================= */
@media (max-width:900px){
  /* HERO — stacked composition, not a compressed version of the
     desktop diagonal split. The split only reads correctly when
     there's enough width either side of the cut for both the text
     and a real amount of photo; below this breakpoint that stops
     being true, so mobile gets its own layout instead of a squeezed
     copy of the desktop one:
       1) full-width pink panel (the text), normal document flow
       2) a separate full-width photo block directly beneath it
     Source order in the HTML is already content-first, image-after,
     so this is just switching each piece from the desktop
     absolute-overlay scheme to normal block stacking. */
  .hero{
    height:auto;
    overflow:visible;
    display:block;
  }
  .hero-content{
    position:static;
    z-index:auto;
    max-width:none;
    margin:0;
    background:var(--pink);
    padding:clamp(40px,9vw,56px) var(--pad-x) clamp(32px,7vw,44px);
    /* very subtle angled edge where the pink panel meets the photo,
       standing in for the desktop diagonal split rather than
       reproducing it at a width where it can't work */
    clip-path:polygon(0 0,100% 0,100% 100%,0 96%);
  }
  .hero h1,.hero h2{ max-width:none; }
  .hero-slice,.hero-stripe{ display:none; }
  .hero-bg{
    position:relative;
    inset:auto;
    height:clamp(220px,60vw,320px);
    overflow:hidden;
    margin-top:-1px; /* sits flush under the angled panel edge, no seam */
  }
  .hero-bg::before{ background-position:60% 15%; }

  .about .wrap,.whohelp-grid,.ins-grid{grid-template-columns:1fr;gap:36px}
  .testi-secondary{grid-template-columns:1fr;gap:20px}
  .testi-secondary .testi-card:nth-child(2){margin-top:0}
  .testi-featured .testi-mark{font-size:clamp(56px,16vw,80px)}
  .testi-card .testi-mark{font-size:clamp(40px,11vw,52px)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tiles > .tile:last-child:nth-child(3n+1){grid-column:auto}
  form .row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:30px}

  /* Feature section: stack text above the graphic (DOM order is
     already text-first), and shrink the graphic so it stays a
     supporting element rather than adding a lot of extra height.
     Parallax JS is already gated off below 769px (see main.js), so
     this is a purely static treatment on mobile. */
  .service-feature .wrap{grid-template-columns:1fr;text-align:center}
  .service-feature-graphic{margin-top:8px}
  .service-graphic{max-width:200px}

  /* Below the site's main content breakpoint, a continuous marquee
     stops being usable (too little width for smooth drift, easy to
     trigger sideways scroll) so logos fall back to a clean static
     wrapped row instead of a frozen desktop marquee. */
  .logos-track{animation:none;transform:none;width:auto}
  .logos-set[aria-hidden="true"]{display:none}
  .logos-set{flex-wrap:wrap;justify-content:center;gap:24px 32px;padding-right:0}
  .logos-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
}

/* Small mobile: 2-column tiles get cramped once each tile is
   under ~150px wide — drop to a single column below this. */
@media (max-width:480px){
  .tiles{grid-template-columns:1fr}
  .tiles > .tile:last-child:nth-child(3n+1){grid-column:auto}
}

/* =========================================================
 Tomas refinements
 ========================================================= */

.whohelp h2,
.capabilities h2,
.testi h2,
.insights h2 {
font-family: 'Raleway', sans-serif;
}

/* ---------------------------------------------------------
 Main navigation — 2px pink underline on hover (desktop only;
 the mobile panel above turns this off, a stacked list doesn't
 want an underline sitting under wrapped/short items)
 --------------------------------------------------------- */

.nav-links > .item {
position: relative;
}

.nav-links > .item::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
background: var(--pink);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}

.nav-links > .item:hover::after {
transform: scaleX(1);
}

/* Don't underline the CTA button */
.nav-links .nav-cta::after {
display: none;
}


/* Single diagonal accent line beside the pink hero slice */
.hero-stripe {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}

.hero-stripe::before {
display: none;
}

.hero-stripe::after {
content: '';
position: absolute;
inset: 0;
background: var(--pink);

/* follows the exact angle of the main pink block,
   offset approximately 20px into the image */
clip-path: polygon(
  calc(58% + 20px) 0,
  calc(58% + 23px) 0,
  calc(42% + 23px) 100%,
  calc(42% + 20px) 100%
);
}
/* ---------------------------------------------------------
 HERO IMAGE — slow cinematic zoom, on its own transform layer
 (transform: scale() rather than animating background-size,
 which can't interpolate cleanly between `cover` and a percentage)
 --------------------------------------------------------- */

.hero-bg::before {
  animation: heroZoom 22s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

/* ---------------------------------------------------------
 HERO — one-time entrance for the text and the diagonal accent.
 Slow and deliberate (not a quick snap): long duration, a soft
 decelerating curve, and a slight delay on the text so the
 diagonal accent settles first. Both hold their end state
 (fill-mode both) and never repeat — the background zoom above
 is the only ongoing motion.
 --------------------------------------------------------- */

.hero-content {
  animation: heroContentIn 1.3s cubic-bezier(0.16,1,0.3,1) .15s both;
}

@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-slice,
.hero-stripe {
  animation: heroAccentIn 1s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes heroAccentIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Don't animate for people who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-bg::before,
  .hero-content,
  .hero-slice,
  .hero-stripe {
    animation: none;
  }
  /* belt-and-suspenders: main.js already detaches the feature
     graphic from parallax-vanilla under reduced-motion (and removes
     the pv-container class entirely), this just guarantees no
     transform is ever left applied even if it somehow did */
  .service-feature .pv-block{
    transform: none !important;
  }
}

/* =========================================================
   Thank-you page (thanks.html) — page-specific rules, scoped
   to .thanks-page so they don't leak into other pages sharing
   this stylesheet. Nav sits at the top and the footer at the
   bottom in normal flow; only the message between them is
   centered, in the space left after nav/footer take theirs.
   ========================================================= */
.thanks-page main{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  text-align:center;
  padding:48px 24px;
}
/* scoped to .thanks-content (the confirmation message itself), not
   .thanks-page (the whole body) — the body now also contains the
   shared nav and footer, and their <a> elements were being caught
   by a bare ".thanks-page a" rule meant only for the "back to site"
   button below, giving every nav/footer link a stray border. */
.thanks-content h1{font-weight:800;font-size:38px;margin-bottom:14px}
.thanks-content p{font-weight:300;font-size:18px;color:var(--grey);max-width:480px}
.thanks-content a{display:inline-block;margin-top:28px;color:var(--white);border:1px solid var(--pink);padding:13px 30px;text-decoration:none;font-weight:700}
.thanks-content a:hover{background:var(--pink)}

/* =========================================================
   Service pages (e.g. executive-presence.html) — reuse homepage
   tokens (colors, --pad-x, the clamp() fluid-type approach,
   Raleway headings, the alternating navy/cream/black-band rhythm
   the homepage already uses) for a page shape the homepage
   doesn't have: a restrained intro, an editorial narrative, a
   focus-area breakdown, a testimonial, and a full contact form.
   Classes are named generically (.service-block, .service-focus,
   etc.) rather than around Executive Presence specifically, since
   this page is the template for the other six.
   ========================================================= */

/* HERO — a quieter, distinct echo of the homepage's diagonal
   motif: one soft low-opacity pink wedge from the top-right
   corner (not the bold, full-height, left-side split used on the
   homepage), plus a small pink rule as a typographic accent. */
.service-hero{position:relative;overflow:hidden;background:var(--navy);padding:clamp(64px,10vw,104px) var(--pad-x) clamp(56px,9vw,88px)}
.service-hero::before{
  content:'';
  position:absolute;
  top:0; right:0;
  width:60%;
  height:100%;
  background:var(--pink);
  opacity:.08;
  clip-path:polygon(38% 0,100% 0,100% 100%,68% 100%);
  pointer-events:none;
}
.service-hero .wrap{position:relative;z-index:1;max-width:900px}
.service-hero .eyebrow{color:var(--pink);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.service-hero .rule{display:block;width:56px;height:3px;background:var(--pink);margin:18px 0 24px}
.service-hero h1{color:var(--white);font-family:'Raleway',sans-serif;font-weight:800;font-size:clamp(32px,6vw,52px);line-height:1.1;margin-bottom:20px}
.service-hero .lead{color:var(--grey);font-size:clamp(17px,2.2vw,20px);font-weight:300;line-height:1.6;max-width:600px}

/* INTRO — a single lede paragraph, set slightly larger than body
   copy and marked with a pink rule, like a considered opening
   statement rather than the first of many paragraphs. */
.service-intro{background:var(--cream);padding:clamp(48px,8vw,84px) var(--pad-x)}
.service-intro .wrap{max-width:680px}
.service-intro p{color:var(--navy);border-left:3px solid var(--pink);padding-left:24px;font-size:clamp(19px,2.4vw,22px);line-height:1.65;font-weight:300}

/* BLOCK — a single-column narrative section (e.g. "Who it's
   for"), navy background, alternating with the cream sections
   either side of it for rhythm. Generic on purpose: every future
   service page needs at least one section like this, regardless
   of what it says. */
.service-block{background:var(--navy);padding:clamp(48px,8vw,84px) var(--pad-x)}
.service-block .wrap{max-width:680px}
.service-block h2{color:var(--pink);font-family:'Raleway',sans-serif;font-weight:800;font-size:clamp(24px,4vw,32px);margin-bottom:20px}
.service-block p{color:var(--white);font-size:18px;line-height:1.65;font-weight:300}
/* cream variant, for alternating a narrative block against a dark
   section either side of it (e.g. right after .service-feature) */
.service-block.on-cream{background:var(--cream)}
.service-block.on-cream p{color:var(--navy)}

/* FEATURE — the page's visual centrepiece. A bold, full-width
   black-band block (the one section on the page that uses it,
   deliberately, so it reads as a distinct "moment" rather than
   blending into the navy sections either side): a large white
   editorial statement, a smaller pink accent statement, and an
   abstract "presence radiating outward" graphic — concentric
   rings offset on a diagonal (not a plain bullseye), built from
   plain SVG circles rather than an icon-pack asset. The graphic
   gets a restrained scroll-parallax treatment (assets/js/main.js);
   see the reduced-motion / mobile handling notes there — this is
   the only parallax effect on the page. */
.service-feature{background:var(--black-band);padding:clamp(56px,9vw,96px) var(--pad-x);overflow:hidden}
.service-feature .wrap{max-width:1180px;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,64px);align-items:center}
.service-feature .statement{color:var(--white);font-family:'Raleway',sans-serif;font-weight:800;font-size:clamp(28px,4.4vw,44px);line-height:1.25;margin-bottom:22px}
.service-feature .statement.accent{color:var(--pink);font-size:clamp(19px,2.6vw,24px);font-weight:700;line-height:1.5;margin-bottom:0}
.service-feature-graphic{display:flex;align-items:center;justify-content:center}

/* Shared sizing for every service-page feature graphic (one rule
   instead of repeating width/height/max-width per motif); each page
   also adds its own *-graphic class below for the actual shapes/
   colours, so the graphic itself stays specific to that service
   while sizing behaviour (including the mobile shrink) stays uniform. */
.service-graphic{width:100%;height:auto;max-width:320px;overflow:visible}

/* Executive Presence — "presence radiating outward," diagonally
   offset rings (not a plain bullseye) + a solid dot. */
.presence-graphic .pg-dot{fill:var(--pink)}
.presence-graphic .pg-ring{fill:none;stroke-width:2}
.presence-graphic .pg-ring-1{stroke:var(--pink);opacity:.7}
.presence-graphic .pg-ring-2{stroke:var(--pink);opacity:.4}
.presence-graphic .pg-ring-3{stroke:var(--white);opacity:.2;stroke-width:1.5}
.presence-graphic .pg-ring-4{stroke:var(--white);opacity:.1;stroke-width:1}

/* Keynotes & Speaking — reuses the same ring/dot styling as the
   presence graphic (same visual family), but the circles are
   centred off the left edge instead of diagonally offset, so only
   their right-hand arcs show: voice/sound projecting outward toward
   an audience, rather than presence radiating in place. Needs its
   own overflow:hidden (the shared .service-graphic base is
   overflow:visible, which the other motifs rely on) so the off-frame
   left portion of each circle is actually clipped instead of just
   spilling past the layout. */
.speaking-graphic{overflow:hidden}
.speaking-graphic .pg-dot{fill:var(--pink)}
.speaking-graphic .pg-ring{fill:none;stroke-width:2}
.speaking-graphic .pg-ring-1{stroke:var(--pink);opacity:.7}
.speaking-graphic .pg-ring-2{stroke:var(--pink);opacity:.4}
.speaking-graphic .pg-ring-3{stroke:var(--white);opacity:.2;stroke-width:1.5}
.speaking-graphic .pg-ring-4{stroke:var(--white);opacity:.1;stroke-width:1}

/* Core Communication — two overlapping circles: connection/trust
   between two parties, with a small solid dot marking the overlap. */
.connection-graphic .cg-circle{fill:none;stroke-width:2}
.connection-graphic .cg-circle-1{stroke:var(--pink);opacity:.6}
.connection-graphic .cg-circle-2{stroke:var(--white);opacity:.3}
.connection-graphic .cg-dot{fill:var(--pink)}

/* High-Stakes Presentations — ascending bars building toward a
   marked peak: structure, building up to the moment that matters. */
.structure-graphic .sg-bar{opacity:.8}
.structure-graphic .sg-bar-1{fill:var(--navy-deep)}
.structure-graphic .sg-bar-2{fill:var(--navy-deep)}
.structure-graphic .sg-bar-3{fill:var(--pink);opacity:.55}
.structure-graphic .sg-bar-4{fill:var(--pink);opacity:.85}
.structure-graphic .sg-dot{fill:var(--pink)}

/* Energy & Presence — a four-point spark radiating from a centre
   dot (alternating long/short rays), not a literal sun/burst icon. */
.energy-graphic .eg-ray{stroke:var(--pink);stroke-width:2;opacity:.6}
.energy-graphic .eg-dot{fill:var(--pink)}

/* Team Leadership — a small connected network: two larger "lead"
   nodes, two smaller "team" nodes, linked by thin lines. */
.network-graphic .ng-line{stroke:var(--white);stroke-width:1.5;opacity:.25}
.network-graphic .ng-node{fill:var(--pink);opacity:.55}
.network-graphic .ng-node-lg{opacity:.9}

/* One-to-One Coaching — the simplest motif on the site on purpose:
   two nodes, one connecting line. */
.dialogue-graphic .dg-line{stroke:var(--pink);stroke-width:2;opacity:.5}
.dialogue-graphic .dg-node{fill:none;stroke-width:2}
.dialogue-graphic .dg-node-a{stroke:var(--pink);opacity:.8}
.dialogue-graphic .dg-node-b{stroke:var(--white);opacity:.4}

/* FOCUS — the "what the work focuses on" breakdown. Numbered
   typographic markers instead of icons: large pink Raleway
   numerals, a thin pink top-rule per item, consistent and
   monochrome. auto-fit so this works whether a future page has
   two focus areas or five, not hardcoded to three columns. */
/* black-band here (not navy) is deliberate: .pullquote directly
   below this section is navy, and the two were previously the same
   navy-on-navy, which is why the boundary between "what the work
   focuses on" and the testimonial read as one long undifferentiated
   block with a dead gap in the middle rather than two sections. This
   also keeps a large bottom padding here (where the section visually
   ends) while pullquote supplies its own top padding, rather than
   stacking two full paddings for one is-this-still-the-same-section gap. */
.service-focus{background:var(--black-band);padding:clamp(48px,8vw,84px) var(--pad-x) clamp(28px,5vw,48px)}
.service-focus .wrap{max-width:1100px}
.service-focus h2{color:var(--pink);font-family:'Raleway',sans-serif;font-weight:800;font-size:clamp(24px,4vw,32px);margin-bottom:clamp(32px,5vw,48px)}
.service-focus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
/* same block language as .card (testimonial cards): navy-deep panel
   + solid pink left border, sitting visibly on top of the black-band
   section background, instead of a faint top-rule that read as
   barely-there. Reuses an existing pattern rather than inventing one. */
.service-focus-item{background:var(--navy-deep);border-left:3px solid var(--pink);padding:22px 22px 24px}
.service-focus-item .num{display:block;color:var(--pink);font-family:'Raleway',sans-serif;font-weight:800;font-size:clamp(30px,3.5vw,40px);line-height:1;margin-bottom:14px;opacity:.9}
.service-focus-item .focus-label{display:block;color:var(--white);font-weight:800;font-size:19px;margin-bottom:8px}
.service-focus-item .focus-desc{color:var(--grey);font-weight:300;font-size:16px;line-height:1.55;margin:0}