:root{
    --cream:#F3EADC; --navy:#004268; --cyan:#27BCD8; --yellow:#FBE499;
    --f:'Barlow','Helvetica Neue',Arial,sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--f);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
  p{margin:0} h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.05}
  a{color:var(--navy);text-decoration:none}
  img{max-width:100%}
  .wrap{max-width:1440px;margin:0 auto}
  .pad{padding-left:88px;padding-right:88px}

  /* the Barlow range doing different jobs */
  .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:20px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .eyebrow::before{content:"";width:42px;height:6px;background:var(--cyan);flex:none}
  .lead{font-size:22px;font-weight:400;line-height:1.5}
  .tagline{display:inline-block;font-size:clamp(24px,2.3vw,35px);font-weight:500;font-style:italic;letter-spacing:-.01em;line-height:1.12;background:var(--yellow);padding:8px 18px;margin-left:-18px}

  .btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;background:var(--navy);color:#FFFFFF;font-size:17px;font-weight:700;border:2px solid var(--navy)}
  .btn:hover{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
  .btn-lg{height:62px;padding:0 34px;font-size:18px}
  .btn-out{background:transparent;color:var(--navy)}
  .btn-out:hover{background:var(--navy);color:#FFFFFF}

  header{position:sticky;top:0;z-index:50;background:#FFFFFF;border-bottom:2px solid var(--navy)}
  nav{height:132px;display:flex;align-items:center;justify-content:space-between;gap:20px}
  .links{display:flex;align-items:center;gap:36px}
  .links a{font-size:18px;font-weight:600}
  .links a.dim{font-weight:500;opacity:.7}
  .links a.btn{color:#FFFFFF;opacity:1}

  /* hero */
  .hero{position:relative;overflow:hidden}
  .motion{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .blob{position:absolute;border-radius:50%;filter:blur(105px);will-change:transform}
  .b1{width:780px;height:780px;left:-210px;top:-250px;background:rgba(39,188,216,.30);animation:d1 26s ease-in-out infinite}
  .b2{width:580px;height:580px;left:30%;top:12%;background:rgba(251,228,153,.60);animation:d2 32s ease-in-out infinite}
  .b3{width:660px;height:660px;left:2%;bottom:-330px;background:rgba(39,188,216,.20);animation:d3 29s ease-in-out infinite}
  @keyframes d1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(150px,80px,0) scale(1.12)}}
  @keyframes d2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-130px,110px,0) scale(.94)}}
  @keyframes d3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-160px,-100px,0) scale(1.15)}}
  .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(243,234,220,.55) 0%,rgba(243,234,220,.34) 45%,rgba(243,234,220,.92) 100%)}
  .hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 46%;align-items:center;min-height:800px}
  .hero-copy{padding:70px 60px 70px 88px;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
  h1{font-size:clamp(30px,3.05vw,46px)}
  .portrait{position:relative;align-self:stretch;min-height:800px;overflow:hidden}
  .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
  .actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}

  .sec{padding:120px 0}
  .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:start}
  .head-rule{padding-bottom:54px;border-bottom:2px solid var(--navy)}
  h2{font-size:clamp(28px,2.9vw,46px)}
  .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:54px}
  .card{border:2px solid var(--navy);border-top:8px solid var(--cyan);padding:32px 30px 38px;display:flex;flex-direction:column}
  .chip{align-self:flex-start;background:var(--cyan);color:var(--navy);font-size:17px;font-weight:800;letter-spacing:.1em;padding:5px 12px}
  .card h3{font-size:23px;font-weight:700;margin-top:0}
  .card p{font-size:18px;line-height:1.58;margin-top:12px}

  .deep{background:var(--navy);padding:104px 0;position:relative;overflow:hidden}
  .deep .glow{position:absolute;width:900px;height:900px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(39,188,216,.26),transparent 62%)}
  .deep .inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
  .deep .eyebrow{color:var(--cyan)}
  .deep .eyebrow::before{background:var(--yellow)}
  .deep h2{color:#FFFFFF;max-width:none;font-weight:500;font-size:clamp(32px,3.7vw,56px);line-height:1.08;letter-spacing:-.01em}

  .founder{display:grid;grid-template-columns:420px minmax(0,1fr);gap:74px;align-items:center}
  .fimg{overflow:hidden;aspect-ratio:4/5;border:2px solid var(--navy)}
  .fimg img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
  .poc{color:var(--navy);border-left:4px solid var(--navy);padding:2px 0 2px 24px;margin-top:30px}
.tag{display:inline-block;background:var(--yellow);color:var(--navy);font-size:16px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:7px 13px}
.markline{font-weight:400;letter-spacing:-.005em;line-height:1.62;margin-left:-14px}
.markline span{background:var(--yellow);padding:5px 14px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.poc .p1{font-size:25px;font-weight:700;line-height:1.24;letter-spacing:-.015em;margin:15px 0 0}
.poc .p1 em{font-style:italic;font-weight:900}
.poc .p2{font-size:18px;font-weight:400;line-height:1.5;margin:12px 0 0}
  .roles{display:flex;flex-direction:column;margin-top:30px}
  .role{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--cyan);font-size:18px;font-weight:600}
  .role em{font-style:italic;font-weight:400}

  .ctabox{background:var(--yellow);padding:86px 64px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}

  footer{background:#FFFFFF;border-top:2px solid var(--navy);padding:62px 0 40px;color:var(--navy)}
  footer a{color:var(--navy);font-size:18px;font-weight:500}
  footer a:hover{text-decoration:underline;text-underline-offset:4px}
  .fcols{display:flex;flex-wrap:wrap;gap:78px;align-items:flex-start;justify-content:space-between}
.fcols > .brandblock{flex:0 0 auto;min-width:260px}
.fcols > .fcol{min-width:150px}
  .fcol{display:flex;flex-direction:column;gap:12px}
  .fcol .t{font-size:18px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
  .ftag{font-size:23px;font-weight:400;margin-top:20px;color:var(--navy);line-height:1.5;white-space:nowrap}
  .ftag span{background:var(--yellow);padding:5px 13px;margin-left:-13px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .fbot{display:flex;justify-content:space-between;gap:20px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(0,66,104,.28);font-size:16px;font-weight:400;opacity:.78}

  .note{background:var(--navy);color:var(--yellow);padding:14px 88px;font-size:16px;font-weight:600}

  /* ---- narrower windows: the photo stays BESIDE the text and gets small ---- */
  @media (max-width:1180px){
    .pad{padding-left:32px;padding-right:32px}
    .note{padding:14px 32px}
    .hero-in{grid-template-columns:minmax(0,1fr) 30%;align-items:center;min-height:0;gap:36px;padding:56px 32px}
    .hero-copy{padding:0}
    .portrait{align-self:center;min-height:0;aspect-ratio:4/5;border:2px solid var(--navy)}
    .portrait img{object-position:50% 0}
    .two,.cards,.founder,.fcols{grid-template-columns:1fr;gap:34px}
    .founder{grid-template-columns:260px minmax(0,1fr);gap:36px;align-items:start}
    .sec{padding:72px 0}
    .ctabox{padding:56px 28px}
  }
  @media (max-width:760px){
    .links a:not(.btn){display:none}
    nav{height:80px}
    .hero-in{grid-template-columns:minmax(0,1fr) 34%;gap:24px;padding:40px 24px}
    .pad{padding-left:24px;padding-right:24px}
    .note{padding:12px 24px;font-size:14px}
    .founder{grid-template-columns:1fr;gap:26px}
    .fimg{max-width:260px}
    .tagline{margin-left:0}
  }

/* ---------- inner pages ---------- */
.pagetop{padding-top:96px;padding-bottom:0}
.pagehead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:70px;align-items:end}
.promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:56px}
.promise{border:2px solid var(--navy);border-top:8px solid var(--cyan);padding:32px 30px 36px}
.promise .row{display:flex;align-items:center;gap:16px}
.promise h3{font-size:24px;font-weight:700;margin:0}
.promise p{font-size:18px;line-height:1.58;margin-top:16px}
.group{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;padding:48px 0;border-bottom:2px solid var(--navy)}
.group:last-of-type{border-bottom:0}
.gtitle{font-size:22px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;margin:0;line-height:1.24}
.gtitle::before{content:"";display:block;width:46px;height:5px;background:var(--cyan);margin-bottom:18px}
.items{display:flex;flex-direction:column;gap:26px}
.iname{font-size:21px;font-weight:700}
.item p{font-size:18px;line-height:1.58;margin-top:8px;max-width:78ch}
.edu{margin-top:40px;padding-top:32px;border-top:2px solid var(--navy);display:flex;flex-direction:column;gap:10px;font-size:18px;line-height:1.5}
.edu .t{font-size:19px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.bgrow{display:grid;grid-template-columns:330px minmax(0,1fr);gap:56px;padding:19px 0;border-bottom:1px solid var(--cyan)}
.bgrow:last-of-type{border-bottom:0}
.bgtitle{font-size:20px;font-weight:700;line-height:1.3}
.bgorg{font-size:17px;font-weight:400;font-style:italic;margin-top:4px}
.bgrow p{font-size:18px;line-height:1.58}
.routes{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.routes.center{justify-content:center;margin-top:12px}
.btn-yel{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn-yel:hover{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.btn-line{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.btn-line:hover{background:var(--cyan);color:var(--navy)}
.contacthero{display:grid;grid-template-columns:400px minmax(0,1fr);gap:64px;align-items:start}
@media (max-width:1180px){
  .pagehead,.promises,.group,.bgrow,.contacthero{grid-template-columns:1fr;gap:28px}
  .bgrow{gap:9px;padding:15px 0}
  .pagetop{padding-top:56px}
  .contacthero{grid-template-columns:240px minmax(0,1fr);gap:32px}
}
@media (max-width:760px){ .contacthero{grid-template-columns:1fr} .fimg{max-width:260px} .ftag{white-space:normal} .fcols{gap:40px} }

/* linkedin icon button */
.social{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border:2px solid var(--cyan);margin-top:30px;transition:background .18s ease}
.social svg{width:25px;height:25px;fill:var(--cyan);display:block;transition:fill .18s ease}
.social:hover{background:var(--cyan)}
.social:hover svg{fill:var(--navy)}

.deep.tight{padding:62px 0}
.deep.tight .inner{gap:22px}

/* ---------- services: same cream treatment as home ---------- */
.wash{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wash .blob{filter:blur(110px)}
.wash .w1{width:720px;height:720px;left:-180px;top:-260px;background:rgba(39,188,216,.26);animation:d1 26s ease-in-out infinite}
.wash .w2{width:560px;height:560px;left:46%;top:-120px;background:rgba(251,228,153,.52);animation:d2 32s ease-in-out infinite}
.wash .w3{width:600px;height:600px;right:-160px;top:120px;background:rgba(39,188,216,.16);animation:d3 29s ease-in-out infinite}
.wash .veil{background:linear-gradient(180deg,rgba(243,234,220,.50) 0%,rgba(243,234,220,.72) 55%,rgba(243,234,220,1) 100%)}
.washed{position:relative}
.washed > .wrap{position:relative;z-index:1}

.modular{position:relative;padding:104px 0}

.modular .group{grid-template-columns:230px minmax(0,1fr);gap:54px;padding:48px 0;border-bottom:2px solid var(--navy)}
.modular .group:last-of-type{border-bottom:0;padding-bottom:0}
.modular .items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 44px}
.modular .item{border-top:4px solid var(--cyan);padding-top:16px}
.modular .iname{font-size:20px}
.modular .item p{font-size:17px;line-height:1.55;max-width:none}
@media (max-width:1180px){
  .modular .group{grid-template-columns:1fr;gap:20px;padding:34px 0}
  .modular .items{grid-template-columns:1fr;gap:24px}
  }

/* yellow as the emphasis colour: highlight a phrase, or flag the one thing to read */
.hl{background:var(--yellow);padding:2px 10px;margin-left:-4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.eyebrow.gold::before{background:var(--yellow)}

/* ---- motion: desktop drifts, phones hold still ----
   These sit last and use !important so they beat the
   two-class rules (.wash .w1 etc.) that set the animations. */
@media (max-width:760px){
  .blob{animation:none !important}
}
@media (prefers-reduced-motion:reduce){
  .blob{animation:none !important}
}

/* ---- scroll reveal (desktop only; .rv is added by site.js) ---- */
.rv{opacity:0;transform:translateY(22px);
    transition:opacity .72s cubic-bezier(.22,.7,.3,1),transform .72s cubic-bezier(.22,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (max-width:760px){
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ---- mobile header: keep the links, stack the call to action ----
   Three centred rows (logo / links / button) so it survives a 320px
   phone. Not sticky here, because a 150px bar eats too much screen. */
@media (max-width:760px){
  header{position:static}
  header nav{height:auto;flex-wrap:wrap;justify-content:center;gap:11px;padding:13px 0}
  header nav > a{display:flex;justify-content:center;width:100%}
  header nav > a img{height:40px !important}
  .links{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
  .links a:not(.btn){display:inline-flex;font-size:16px;font-weight:600}
  .links a.btn{width:100%;justify-content:center;height:50px;font-size:16px;white-space:nowrap}
}

/* ---- phones: let the footer brand block shrink ----
   It was flex:0 0 auto, so it kept its max-content width and pushed
   the page wider than the screen on a 320-360px phone. */
@media (max-width:760px){
  .fcols > .brandblock{flex:1 1 100%;min-width:0;max-width:100%}
  .ftag{font-size:20px;white-space:normal}
}

/* ================= phones: home hero and contact hero ================= */
@media (max-width:760px){
  /* Flatten .hero-copy so its children become items of .hero-in.
     That lets the photo sit between the copy and the button. */
  .hero-in{display:flex;flex-direction:column;align-items:center;
           text-align:center;gap:20px;padding:34px 24px 40px}
  .hero-copy{display:contents}

  .hero-in .eyebrow{justify-content:center;flex-wrap:wrap;gap:10px;
                    font-size:14px;letter-spacing:.1em;line-height:1.35}
  .hero-in .eyebrow::before{width:30px;height:4px}
  .hero-in h1{font-size:30px;line-height:1.14}
  .hero-in .tagline{margin-left:0;font-size:24px}
  .hero-in .lead{max-width:none !important;font-size:18px}

  .hero-in .portrait{order:5;width:min(300px,80%);margin:4px auto 0;
                     aspect-ratio:4/5;align-self:center}
  .hero-in .actions{order:6;justify-content:center;width:100%;margin-top:2px}
  .hero-in .actions .btn{width:100%;max-width:320px}

  /* Contact: photo below the founder copy but above Education.
     Flattening the copy column lets the photo slot in between. */
  .contacthero{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .contacthero > div:not(.fimg){display:contents}
  .contacthero > .fimg{order:-1;align-self:center;width:min(280px,78%);max-width:none;margin:0 0 22px}
}

/* Contact: centre the one call to action on phones. */
@media (max-width:760px){
  .contacthero .routes{justify-content:center;width:100%}
  .contacthero .routes .btn{width:100%;max-width:320px}
}

/* Home page Leadership: centre Serge's photo on phones. */
@media (max-width:760px){
  .founder > .fimg{width:min(260px,72%);max-width:none;margin-left:auto;margin-right:auto}
}

/* A headline meant to run as one line across the column.
   Sized off the viewport so it still fits as the window narrows. */
.markline.wide{font-size:clamp(20px,2.35vw,34px);line-height:1.5}
@media (max-width:1180px){ .markline.wide{font-size:clamp(17px,2.55vw,28px);line-height:1.55} }
@media (max-width:760px){ .markline.wide{font-size:22px;line-height:1.6} }

/* ================= logo at double size =================
   Scoped away from phones: the phone header is a three-row stack with an
   auto height, and a fixed height here was clipping it. */
@media (min-width:1181px){
  header nav > a img{height:104px !important}
  footer .brandblock img{height:104px !important}
}
@media (min-width:761px) and (max-width:1180px){
  header nav{height:112px}
  header nav > a img{height:86px !important}
  footer .brandblock img{height:86px !important}
}

/* ================= services: four promises, four colours =================
   The brief asked for white type on light blue. That pair measures 2.27:1,
   well under the 4.5:1 WCAG AA minimum, so the text would be hard to read
   on a laptop screen in daylight. These keep four distinct boxes and all
   pass: navy/white 10.6, cream/navy 8.9, yellow/navy 8.4, cyan/navy 4.7. */
.promise{border:2px solid var(--navy);border-top:8px solid var(--navy);padding:32px 30px 36px}
.promise h3,.promise p{color:inherit}

.promise.p-navy{background:var(--navy);color:#FFFFFF;border-color:var(--navy)}
.promise.p-navy .chip{background:var(--cyan);color:var(--navy)}

.promise.p-cream{background:#FFFFFF;color:var(--navy);border-color:var(--navy);border-top-color:var(--cyan)}
.promise.p-cream .chip{background:var(--cyan);color:var(--navy)}

.promise.p-gold{background:var(--yellow);color:var(--navy);border-color:var(--navy);border-top-color:var(--navy)}
.promise.p-gold .chip{background:var(--navy);color:var(--yellow)}

.promise.p-cyan{background:var(--cyan);color:var(--navy);border-color:var(--navy);border-top-color:var(--navy)}
.promise.p-cyan .chip{background:var(--navy);color:var(--cyan)}

/* ================= services: group titles as filled labels =================
   Cyan text on cream measures 1.9:1 and yellow text on cream 1.1:1, so the
   colours cannot carry the words themselves. Used as a filled block behind
   navy or white type, the same three colours differentiate the groups and
   stay readable. */
.gtitle{display:inline-block;padding:9px 15px;background:var(--navy);color:#FFFFFF}
.gtitle::before{display:none}
.gtitle.g-cyan{background:var(--cyan);color:var(--navy)}
.gtitle.g-gold{background:var(--yellow);color:var(--navy)}

/* ================= services: every item is its own box ================= */
.modular .items{gap:24px 24px}
.modular .item{border:2px solid var(--navy);border-top:6px solid var(--cyan);
               background:#FFFFFF;padding:22px 22px 26px}
.modular .group:last-of-type{padding-bottom:0}
.pick{max-width:74ch}
.pick strong{font-weight:700}

/* an inline link that still reads as a link on cream */
.inlink{color:var(--navy);text-decoration:underline;text-decoration-thickness:2px;
        text-underline-offset:3px;text-decoration-color:var(--cyan)}
.inlink:hover{background:var(--yellow)}

/* two buttons side by side on Contact */
.routes{gap:16px}

/* The group label is a grid item, so it was stretching to the row's full
   height and rendering as a tall colour bar. Pin it to the top. */
.modular .group{align-items:start}
.gtitle{align-self:start;justify-self:start}

/* ================= the brand lockup in the hero =================
   The logo sits above "Mass tort operations for law firms" as the first
   thing on the page. With a large mark here, the one in the sticky bar
   steps back so the two don't compete a hundred pixels apart. */
.herologo{height:150px;display:block;margin:0 0 6px}
@media (min-width:1181px){
  header nav{height:104px}
  header nav > a img{height:72px !important}
  footer .brandblock img{height:88px !important}
}
@media (min-width:761px) and (max-width:1180px){
  .herologo{height:112px}
  header nav{height:92px}
  header nav > a img{height:62px !important}
  footer .brandblock img{height:74px !important}
}
@media (max-width:760px){
  .herologo{height:96px;margin:0 auto 4px}
  header nav{height:auto !important}
  header nav > a img{height:58px !important}
  footer .brandblock img{height:64px !important}
}

/* ================= nav spread across the full ribbon =================
   The links were bunched against the right edge. Letting the group take the
   remaining width and distribute puts About next to the logo and the button
   at the far edge. Scoped to min-width so it cannot override the phone
   layout, which stacks these into centred rows. */
@media (min-width:761px){
  header nav .links{flex:1;justify-content:space-between;gap:28px;margin-left:64px}
}

/* ================= the two portraits, substantially bigger =================
   Doubling the WIDTH (420 to 840) would leave about 350px for the heading,
   paragraph and the roles list beside it, which is too narrow for the role
   rows to sit title-left / company-right. These roughly double the AREA
   instead: ~1.5x on each edge, which reads as twice the picture while the
   text column keeps a workable measure. */
@media (min-width:1181px){
  .founder{grid-template-columns:620px minmax(0,1fr);gap:58px}
  .contacthero{grid-template-columns:600px minmax(0,1fr);gap:54px}
}


/* ================= readability: size, not weight =================
   Body copy is navy on cream at 8.9:1, far above the 4.5:1 minimum, so
   contrast was never the problem. Bold body text reads SLOWER, because the
   thickened strokes close up the counters and flatten the word shapes the
   eye uses to recognise words at a glance. The levers that actually help
   are size and line spacing, so those go up instead of the weight. */
.lead{font-size:24px;line-height:1.56}
.card p,.promise p,.item p,.bgrow p{font-size:19px;line-height:1.6}
.poc .p2{font-size:19px;line-height:1.55}
@media (max-width:1180px){ .lead{font-size:21px} }

/* ================= the hero button, lower and louder ================= */

                    letter-spacing:.01em;box-shadow:10px 10px 0 var(--cyan)}

@media (max-width:1180px){

}
@media (max-width:760px){

}

/* ================= the Our Services button, between hero and How we work ====
   It sat at the foot of the hero copy column, which left an awkward gap
   between the tagline and the button while the photo ran on beside it.
   Standing on its own it belongs to neither block and introduces the next. */
.ctastrip{background:var(--cream);padding:52px 0 0}
.ctastrip + .sec{padding-top:56px}
.cta-big{height:84px;padding:0 54px;font-size:23px;font-weight:700;letter-spacing:.01em;
         box-shadow:10px 10px 0 var(--cyan)}
.cta-big::after{content:"\2192";margin-left:16px;font-size:.95em;line-height:1}
.cta-big:hover{box-shadow:10px 10px 0 var(--navy)}
@media (max-width:1180px){
  .ctastrip{padding:36px 0 0}
  .ctastrip + .sec{padding-top:40px}
  .cta-big{height:68px;padding:0 36px;font-size:20px;box-shadow:7px 7px 0 var(--cyan)}
}
@media (max-width:760px){
  .ctastrip{padding:26px 0 0}
  .ctastrip .wrap{display:flex;justify-content:center}
  .cta-big{height:58px;padding:0 26px;font-size:17px;box-shadow:5px 5px 0 var(--cyan)}
}

/* ================= another step up: labels and body copy ================= */
.eyebrow{font-size:23px;letter-spacing:.11em}
.eyebrow::before{width:48px;height:7px}
.fcol .t{font-size:20px}
.edu .t{font-size:21px}
.tag{font-size:17px}

.lead{font-size:26px;line-height:1.54}
.card p,.promise p,.item p,.bgrow p{font-size:20px;line-height:1.58}
.poc .p2{font-size:20px;line-height:1.54}
.role{font-size:19px}
.edu{font-size:19px}
.iname{font-size:22px}
.modular .iname{font-size:21px}
.bgtitle{font-size:21px}
.bgorg{font-size:18px}
@media (max-width:1180px){
  .eyebrow{font-size:19px}
  .eyebrow::before{width:38px;height:6px}
  .lead{font-size:22px}
}
@media (max-width:760px){
  .hero-in .eyebrow{font-size:16px}
  .lead{font-size:20px}
}

/* At tablet width the hero paragraphs ran to ~83 characters a line. Past
   about 75 the eye loses its place returning to the next line, so cap the
   measure rather than shrink the type. */
@media (max-width:760px){
  .hero-in .lead{max-width:64ch !important}
}

/* The hero label needed 630px and had exactly 630px, so rounding broke it
   onto a second line. Give the copy column a little more room and hold the
   label on one line at desktop widths, where it now fits with margin. */
@media (min-width:1181px){
  .hero-copy{padding-right:40px}
  .hero-in{grid-template-columns:minmax(0,1fr) 44%}
  .hero-in .eyebrow{white-space:nowrap}
}

/* The modular service boxes were still carrying their own smaller sizes,
   which overrode the site-wide increase. Match the promise cards exactly:
   24px titles, 20px body. */
.modular .iname{font-size:24px;font-weight:700;line-height:1.2}
.modular .item p{font-size:20px;line-height:1.58;margin-top:12px}
@media (max-width:1180px){
  .modular .iname{font-size:21px}
  .modular .item p{font-size:19px}
}

/* ================= Contact hero: photo matched to the copy =================
   The photo was 750px tall against a 634px text column, so 116px of it hung
   below the copy with empty page beside it. Letting it fill the row height
   instead squares off the block. The crop is anchored to the top so the
   head stays put and the trim comes off the bottom. */
@media (min-width:1181px){
  .contacthero{align-items:stretch}
  .contacthero > .fimg{aspect-ratio:auto;height:100%;align-self:stretch}
  .contacthero > .fimg img{height:100%;object-position:50% 0}
}

/* ================= footer: columns no longer marooned =================
   With the LinkedIn column gone there are only two blocks left, and
   space-between threw the remaining one 760px away against the right edge,
   which read as a missing column. Sit them next to each other instead. */
footer .fcols{justify-content:flex-start;gap:150px}
@media (max-width:900px){ footer .fcols{gap:44px} }

/* The previous attempt set the photo to 100% height, but a block with an
   image inside still reports that image's height, so the photo kept driving
   the row and nothing changed. Taking the image out of flow with absolute
   positioning leaves the frame with no content height, so the TEXT column
   sets the row and the photo fills whatever that comes to. */
@media (min-width:1181px){
  .contacthero > .fimg{position:relative;height:auto;min-height:0;overflow:hidden}
  .contacthero > .fimg img{position:absolute;inset:0;width:100%;height:100%;
                           object-fit:cover;object-position:50% 12%}
}

/* .pagetop carries no bottom padding because another section always followed
   it. On Contact it is now the last one, so the photo ran into the footer. */
section.pagetop:last-of-type{padding-bottom:104px}
@media (max-width:1180px){ section.pagetop:last-of-type{padding-bottom:64px} }

/* ================= About: one bio block beside the portrait =================
   With the short roles list gone, a 620px portrait stood beside three lines
   of text and left a large void. Folding the background and education into
   the same column gives the photo something to stand next to. The job rows
   stack inside the narrower column rather than keeping their two-column
   title/description split. */
.founder{align-items:start}
.bio{margin-top:40px}
.bio .head-rule{padding-bottom:26px}
.bio .markline.wide{font-size:clamp(19px,1.5vw,24px);line-height:1.55}
.bio .bgrow{grid-template-columns:1fr;gap:6px;padding:16px 0}
.bio .edu{margin-top:30px;padding-top:26px}

/* Leadership with no portrait: the two-column grid has nothing to hold on
   the left, so the bio runs as a single column at a readable measure. */
.founder.solo{display:block}
.founder.solo .bio{margin-top:44px}
.founder.solo .bio .bgrow{grid-template-columns:330px minmax(0,1fr);gap:56px;padding:19px 0}
.founder.solo .bio .markline.wide{font-size:clamp(20px,2.35vw,34px);line-height:1.5}
@media (max-width:1180px){
  .founder.solo .bio .bgrow{grid-template-columns:1fr;gap:9px;padding:15px 0}
}

/* ================= Services page head =================
   The two columns were bottom-aligned, so the one-line headline dropped to
   the foot of a row whose height came from the four-line paragraph, leaving
   a gap under the eyebrow. Top-align them, with a nudge on the paragraph so
   its first line sits on the headline's cap height rather than above it. */
.pagehead{align-items:start}
.pagehead .lead{padding-top:10px}
@media (max-width:1180px){ .pagehead .lead{padding-top:0} }

/* The headline and its paragraph now stack rather than sitting side by side,
   so the supporting line reads as a continuation of the promise rather than
   a separate column. Measure capped so it does not run the full 1264px. */
.pagehead{display:block}
.pagehead .lead{padding-top:0;margin-top:24px;max-width:60ch;padding-bottom:0}

/* ================= footer spans the full width =================
   One narrow stacked column left most of the bar empty whichever way it was
   aligned. Laying the links out in a row gives the right-hand block real
   width, so the brand holds one edge and the links the other. */
/* Applied from 901px rather than 1181px: between those widths the links were
   still left-aligned, leaving ~495px of empty bar to their right. Below 901px
   the brand and the link row together exceed the available width, so there
   the footer stacks instead. */
@media (min-width:901px){
  footer .fcols{justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
  footer .fcol{flex-direction:row;align-items:center;gap:46px;min-width:0}
  footer .fcol .t{margin-bottom:0}
  footer .fcol a{font-size:19px}
}

/* Phone footer: the 60px gap meant for side-by-side columns left a hole
   between the tagline and the links once they stack. */
@media (max-width:760px){
  footer .fcols{gap:30px}
  footer{padding:44px 0 32px}
}



/* ================= phone tap targets =================
   The nav and footer links measured 26-30px tall. 44px is the minimum for a
   fingertip to hit reliably, so the touch area grows without the text moving:
   the extra height is padding around the same type. */
@media (max-width:760px){
  header .links a:not(.btn){min-height:44px;display:inline-flex;align-items:center}
  footer .fcol a{min-height:44px;display:inline-flex;align-items:center}
  .contacthero .inlink{padding:3px 0}
}