/* surbhirawat.com — the live site's look: white pages, EB Garamond, mono labels,
   navy bands, blue square buttons. Tokens first; every colour comes from these. */
:root{
  --cream:#FFFFFF;      /* page background */
  --paper:#F7F8FA;      /* soft sections, cards */
  --beige:#F1F3F6;      /* softer sections */
  --sand:#E6E8EC;       /* hairlines */
  --hair2:#D5D9DF;
  --ink:#141414;        /* headings */
  --body:#33332F;       /* paragraph text */
  --muted:#6E6D69;      /* labels */
  --faint:#A3A6AC;      /* the grey second half of headlines */
  --navy:#1D2B40;       /* dark bands, footer */
  --navy2:#35455C;      /* lines on navy */
  --navytext:#B7C4D4;   /* text on navy */
  --slate:#2A4E86;      /* blue: buttons, links, numbered labels */
  --slate-d:#1D2B40;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gut:clamp(20px,5vw,100px);
  --maxw:1440px;
  --navh:72px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 16px)}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;line-height:1.02}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
figure{margin:0}
em{font-style:italic}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:10px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-block:clamp(64px,8vw,112px)}
.sec--tight{padding-block:clamp(44px,5vw,72px)}
.sec--paper{background:var(--paper)}
.sec--beige{background:var(--beige)}
.sec--navy{background:var(--navy);color:#fff}
.sec--slate{background:var(--slate);color:#fff}
.sec--line{border-top:1px solid var(--sand)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,36px)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.stack{display:flex;flex-direction:column;gap:20px}
.row-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- type ---------- */
.kicker{display:block;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:0.18em;
        text-transform:uppercase;color:var(--slate)}
.sec--navy .kicker,.sec--slate .kicker{color:var(--navytext)}
.display,.h1,.h2,.h3,.h4{font-family:var(--serif);font-weight:400}
.display{font-size:clamp(48px,7.2vw,104px);line-height:0.98;letter-spacing:-0.02em}
.h1{font-size:clamp(42px,5.8vw,80px);line-height:1;letter-spacing:-0.015em}
.h2{font-size:clamp(34px,4.2vw,56px);line-height:1.04}
.h3{font-size:clamp(26px,2.5vw,34px);line-height:1.08}
.h4{font-size:24px;line-height:1.15}
.accent{font-style:italic;color:var(--slate)}
.sec--navy .accent,.sec--slate .accent{color:var(--navytext)}
.quiet{font-style:italic;color:var(--slate)}
.lede{font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:var(--body);max-width:62ch}
.sec--navy .lede,.sec--slate .lede{color:var(--navytext)}
.prose{font-size:17px;line-height:1.7;color:var(--body);max-width:68ch}
.sec--navy .prose{color:var(--navytext)}
.small{font-size:15px;line-height:1.6;color:var(--body)}
.sec--navy .small{color:var(--navytext)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
      color:var(--muted);line-height:1.5}
.sec--navy .mono{color:var(--navytext)}
.strong{font-weight:600;color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
     padding:0 26px;border-radius:999px;background:var(--slate);color:#fff;font-family:var(--sans);
     font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;
     transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn:hover{background:var(--slate-d)}
.btn--dark{background:var(--navy)}
.btn--dark:hover{background:#121b26}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:var(--cream);color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--line-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--line-light:hover{background:#fff;color:var(--ink)}
.btn--sm{min-height:42px;padding:0 20px;font-size:14px}
.txtlink{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:15px;
         color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:2px;line-height:1.3}
.txtlink:hover{color:var(--slate)}
.sec--navy .txtlink{color:#fff}
.monolink{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink)}
.monolink:hover{color:var(--slate)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,240,230,.94);
     backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);
     border-bottom:1px solid var(--sand)}
.nav__in{display:flex;align-items:center;gap:20px;min-height:var(--navh)}
.nav__mark{font-family:var(--serif);font-size:28px;line-height:1;color:var(--ink);letter-spacing:-0.01em;margin-right:auto}
.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav__links a{font-size:15px;color:var(--ink);opacity:.82;padding:6px 0;border-bottom:1px solid transparent}
.nav__links a:hover{opacity:1}
.nav__links a[aria-current="page"]{opacity:1;border-bottom-color:var(--ink)}
.nav__cta{margin-left:clamp(8px,1.5vw,20px)}
.nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;
             background:none;border:1px solid var(--sand);border-radius:999px;cursor:pointer;color:var(--ink);font-size:18px}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:22px 0 0}
.crumb a:hover{color:var(--ink)}
.crumb [aria-current]{color:var(--ink)}

/* ---------- photo hero (home) ---------- */
.phero{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
       min-height:min(calc(100vh - var(--navh)),900px);border-bottom:1px solid var(--sand)}
.phero__copy{display:flex;flex-direction:column;justify-content:center;gap:28px;
             padding:clamp(56px,7vw,110px) clamp(28px,5vw,80px) clamp(40px,5vw,72px) max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
.phero__copy .display{font-size:clamp(48px,6.1vw,92px)}
.phero__copy .display .accent{display:block}
.phero__now{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:32px}
.phero__now::before{content:"";width:56px;height:1px;background:var(--sand)}
.phero__img{position:relative;background:var(--beige);overflow:hidden}
.phero__img picture,.phero__img img{position:absolute;inset:0;width:100%;height:100%}
.phero__img img{object-fit:cover;object-position:50% 30%}

/* ---------- inner page hero ---------- */
.pagehero{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px)}
.pagehero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.pagehero__copy{display:flex;flex-direction:column;gap:24px}
.pagehero__img{aspect-ratio:4/5;overflow:hidden;background:var(--beige)}
.pagehero__img--wide{aspect-ratio:5/4}
.pagehero__img picture,.pagehero__img img{width:100%;height:100%}
.pagehero__img img{object-fit:cover;object-position:50% 25%}
.pagehero--solo .pagehero__copy{max-width:900px}

/* ---------- stat bar ---------- */
.statbar{background:var(--navy);color:#fff}
.statbar__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:clamp(30px,3.5vw,44px)}
.statbar__cell{display:flex;flex-direction:column;gap:10px;padding:0 clamp(16px,2.5vw,36px);border-left:1px solid var(--navy2)}
.statbar__cell:first-child{padding-left:0;border-left:0}
.statbar__fig{font-family:var(--serif);font-size:clamp(34px,3.6vw,50px);line-height:1}
.statbar__lab{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--navytext);line-height:1.5}

/* ---------- section heads ---------- */
.shead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;
       padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--sand);margin-bottom:clamp(32px,4vw,52px)}
.sec--navy .shead{border-bottom-color:var(--navy2)}
.shead__l{display:flex;flex-direction:column;gap:14px;max-width:760px}
.shead__note{max-width:40ch;color:var(--body);font-size:16px}
.sec--navy .shead__note{color:var(--navytext)}
.shead--plain{border-bottom:0;padding-bottom:0}

/* ---------- three ways / columns with rules ---------- */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cols > *{padding:0 clamp(20px,3vw,44px);border-left:1px solid var(--sand);display:flex;flex-direction:column;gap:14px}
.cols > *:first-child{padding-left:0;border-left:0}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sec--navy .cols > *{border-left-color:var(--navy2)}
a.colcard:hover .h3{color:var(--slate)}
.colcard .txtlink{margin-top:auto;align-self:flex-start}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center}
.about__img{aspect-ratio:4/5;overflow:hidden}
.about__img picture,.about__img img{width:100%;height:100%}
.about__img img{object-fit:cover;object-position:40% 30%}

/* ---------- featured work + list ---------- */
.feature{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;
         padding-bottom:clamp(36px,4vw,56px);border-bottom:1px solid var(--sand)}
.feature__img{aspect-ratio:1/1;overflow:hidden;background:var(--beige)}
.feature__img picture,.feature__img img{width:100%;height:100%}
.feature__img img{object-fit:cover}
.feature__stats{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);padding-top:20px;border-top:1px solid var(--sand)}
.fstat{display:flex;flex-direction:column;gap:6px}
.fstat__fig{font-family:var(--serif);font-size:clamp(30px,2.8vw,40px);line-height:1}
.worklist > *{display:grid;grid-template-columns:minmax(150px,0.3fr) minmax(0,1fr) 130px;gap:clamp(16px,3vw,48px);
              align-items:baseline;padding:clamp(22px,2.5vw,32px) 0;border-bottom:1px solid var(--sand)}
.worklist__name{font-family:var(--serif);font-size:clamp(28px,2.6vw,38px);line-height:1.05}
.worklist a:hover .worklist__name{color:var(--slate)}
.worklist__tag{white-space:nowrap;text-align:right}

/* ---------- media block (navy on-camera, etc.) ---------- */
.media{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(32px,5vw,88px);align-items:center}
.media__img{aspect-ratio:1/1;overflow:hidden}
.media__img picture,.media__img img{width:100%;height:100%}
.media__img img{object-fit:cover}

/* ---------- cards ---------- */
.card{background:var(--paper);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;
      border:1px solid var(--sand)}
.sec--paper .card{background:var(--cream)}
.sec--paper .card--rule,.sec--navy .card--rule{background:transparent}
.card--rule{border:0;border-top:2px solid var(--ink);background:transparent;padding:22px 0 0}
.sec--navy .card--rule{border-top-color:var(--navytext)}
a.card{transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--ink)}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);gap:clamp(28px,4vw,64px);
     background:var(--paper);padding:clamp(28px,3.5vw,52px);border-top:3px solid var(--slate)}
.svc:nth-child(even){border-top-color:var(--navy)}
.svc + .svc{margin-top:clamp(16px,2vw,24px)}
.svc__main{display:flex;flex-direction:column;gap:14px}
.svc__problem{font-weight:600;color:var(--ink);font-size:17px}
.svc__list li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--sand);font-size:15.5px;color:var(--body)}
.svc__list li::before{content:"";position:absolute;left:0;top:20px;width:12px;height:1px;background:var(--slate)}
.svc__terms{margin-top:16px}

/* ---------- process steps (eight weeks, lifecycle) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.5vw,36px)}
.steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.step{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--sand);position:relative}
.sec--navy .step{border-top-color:var(--navytext)}
.step--dot::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--slate)}
.step--dot:nth-child(even)::before{background:var(--navy)}

/* ---------- tool groups ---------- */
.toolgroup ul{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.toolgroup li{font-size:16px;color:var(--ink)}

/* ---------- CTA band ---------- */
.ctaband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px}
.ctaband__copy{display:flex;flex-direction:column;gap:14px;max-width:760px}
.ctaband .lede{color:rgba(255,255,255,.82)}

/* ---------- timeline (speaking) ---------- */
.tl > li{display:grid;grid-template-columns:110px minmax(180px,0.42fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);
         padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--sand);align-items:start}
.tl > li:last-child{border-bottom:1px solid var(--sand)}
.tl__year{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;color:var(--slate);padding-top:6px}
.tl__img{aspect-ratio:3/2;overflow:hidden;background:var(--navy)}
.tl__img picture,.tl__img img{width:100%;height:100%}
.tl__img img{object-fit:cover}
.tl__tile{width:100%;height:100%;display:flex;align-items:flex-end;padding:18px;color:#fff;
          font-family:var(--serif);font-size:clamp(28px,3vw,40px);line-height:1}
.tl__tile--slate{background:var(--slate)}
.tl__body{display:flex;flex-direction:column;gap:8px}

/* ---------- list rows (episodes, rules) ---------- */
.lrows > *{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:20px;align-items:center;
           padding:22px 0;border-top:1px solid var(--sand)}
.lrows > *:last-child{border-bottom:1px solid var(--sand)}

/* ---------- newsletter hero + signup ---------- */
.nlhero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:clamp(32px,5vw,80px);align-items:center}
.signup{background:var(--paper);color:var(--ink);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:16px}
.signup--flat{background:transparent;padding:0}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14px;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{min-height:50px;padding:10px 14px;border:1px solid #CFC4B3;border-radius:10px;
  background:#fff;font-family:var(--sans);font-size:16px;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 3px rgba(91,115,144,.18)}
.field textarea{min-height:140px;resize:vertical;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid #CFC4B3;
      border-radius:999px;font-size:15px;cursor:pointer;background:#fff}
.chip input{accent-color:var(--slate)}
.chip:has(input:checked){border-color:var(--ink);background:var(--beige)}
fieldset{margin:0;padding:0;border:0}
legend{padding:0;margin-bottom:12px;font-size:14px;font-weight:500;color:var(--ink)}
.hp{position:absolute;left:-9999px}
.formnote{font-size:13px;color:var(--muted)}
.alert{padding:12px 16px;border-left:3px solid var(--slate);background:var(--beige);font-size:15px;color:var(--ink)}
.nlform{display:flex;flex-direction:column;gap:14px}
.nlform .btn{width:100%}

/* ---------- form success dialog ---------- */
.success-dialog{width:min(520px,calc(100vw - 32px));max-width:none;padding:0;border:1px solid var(--sand);
  background:var(--cream);color:var(--ink);box-shadow:0 28px 80px rgba(0,0,0,.24)}
.success-dialog::backdrop{background:rgba(20,20,20,.66);backdrop-filter:blur(3px)}
.success-dialog[open]{animation:success-dialog-in .2s ease-out both}
.success-dialog__inner{padding:clamp(28px,6vw,44px);border-top:4px solid var(--slate)}
.success-dialog__kicker{display:block;margin-bottom:16px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--slate)}
.success-dialog__title{margin:0 0 12px;font-family:var(--serif);font-size:42px;font-weight:400;line-height:1.05}
.success-dialog__message{max-width:38ch;margin:0 0 26px;color:var(--body);font-size:17px;line-height:1.55}
.success-dialog form{display:flex;justify-content:flex-end}
@keyframes success-dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:480px){.success-dialog__title{font-size:34px}}
@media (prefers-reduced-motion:reduce){.success-dialog[open]{animation:none}}

/* ---------- work page ---------- */
.engage{display:grid;grid-template-columns:minmax(220px,0.36fr) minmax(0,1fr);gap:clamp(24px,3.5vw,56px);
        background:var(--paper);padding:clamp(22px,3vw,40px);border-left:3px solid var(--slate)}
.engage:nth-child(even){border-left-color:var(--navy)}
.engage + .engage{margin-top:clamp(16px,2vw,24px)}
.engage__img{aspect-ratio:4/5;overflow:hidden;background:var(--beige)}
.engage__img picture,.engage__img img{width:100%;height:100%}
.engage__img img{object-fit:cover;object-position:50% 25%}
.engage__main{display:flex;flex-direction:column;gap:14px}
.engage__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px}
.engage__stats{display:flex;flex-wrap:wrap;gap:clamp(18px,2.5vw,36px);padding:16px 0;border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}

/* case study cards */
.ccards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.ccards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--sand);transition:border-color .15s}
.ccard:hover{border-color:var(--ink)}
.ccard:hover .h4{color:var(--slate)}
.ccard__img{aspect-ratio:16/10;overflow:hidden;background:var(--beige);border-bottom:1px solid var(--sand)}
.ccard__img picture,.ccard__img img{width:100%;height:100%}
.ccard__img img{object-fit:cover;object-position:50% 20%}
.ccard__tile{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:20px;
             background:var(--navy);color:#fff}
.ccard__tile .ccard__fig{font-family:var(--serif);font-size:clamp(44px,4.4vw,64px);line-height:1}
.ccard__tile--slate{background:var(--slate)}
.ccard__body{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,26px);flex:1}
.ccard__stats{display:flex;gap:22px;margin-top:auto;padding-top:14px;border-top:1px solid var(--sand)}
.ccard__stats .fstat__fig{font-size:26px}
.ccard--wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.ccard--wide .ccard__img{aspect-ratio:auto;min-height:100%;border-bottom:0;border-right:1px solid var(--sand)}
.ccard--wide .ccard__body{padding:clamp(22px,2.6vw,36px)}
.ccard--wide .h4{font-size:clamp(28px,2.6vw,36px)}

/* ---------- case study ---------- */
.cs-hero{padding-block:clamp(28px,3.5vw,48px) clamp(40px,5vw,72px)}
.cs-hero__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,0.75fr);gap:clamp(32px,5vw,80px);align-items:start}
.cs-hero__copy{display:flex;flex-direction:column;gap:22px}
.glance{background:var(--paper);border:1px solid var(--sand);padding:clamp(20px,2.4vw,30px)}
.glance__row{display:flex;flex-direction:column;gap:4px;padding:13px 0;border-bottom:1px solid var(--sand)}
.glance__row:first-of-type{padding-top:6px}
.glance__row:last-child{border-bottom:0;padding-bottom:0}
.glance__v{font-size:15px;line-height:1.5;color:var(--ink)}
.cs-cover{margin-top:clamp(36px,4vw,56px);aspect-ratio:21/9;overflow:hidden;background:var(--beige);border:1px solid var(--sand)}
.cs-cover picture,.cs-cover img{width:100%;height:100%}
.cs-cover img{object-fit:cover;object-position:50% 30%}
.cs-cover--contain{background:#fff}
.cs-cover--contain img{object-fit:contain;padding:clamp(12px,2vw,28px)}
.cs-strip{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.cs-strip__img{aspect-ratio:4/5;overflow:hidden;background:var(--beige)}
.cs-strip__img picture,.cs-strip__img img{width:100%;height:100%}
.cs-strip__img img{object-fit:cover;object-position:50% 35%}
.cs-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start}
.toc{position:sticky;top:calc(var(--navh) + 32px);display:flex;flex-direction:column;gap:2px}
.toc .mono{margin-bottom:12px}
.toc a{font-size:14px;line-height:1.35;color:var(--muted);padding:8px 0 8px 14px;border-left:1px solid var(--sand)}
.toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.cs-body{min-width:0}
.cs-block{padding-block:clamp(36px,4.5vw,64px);border-top:1px solid var(--sand)}
.cs-block:first-child{border-top:0;padding-top:0}
.cs-block__head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(20px,2.5vw,32px);max-width:760px}
.cs-block .h2{font-size:clamp(32px,3.6vw,48px)}
.cs-paras{display:flex;flex-direction:column;gap:18px}
.cs-paras .prose:first-child{font-size:clamp(18px,1.5vw,20px);color:var(--ink)}
.cs-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.cs-step{background:var(--paper);border:1px solid var(--sand);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:10px}
.cs-step__k{font-family:var(--mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate);line-height:1.5}
.cs-step__v{font-size:15.5px;line-height:1.6;color:var(--body)}
.cs-steps--odd .cs-step:last-child{grid-column:1/-1}
.cs-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,24px);align-items:start}
.cs-fig{display:flex;flex-direction:column;gap:12px}
.cs-fig__frame{background:#fff;border:1px solid var(--sand);padding:clamp(8px,1vw,14px);box-shadow:0 18px 40px -28px rgba(30,42,56,.45)}
.cs-fig figcaption{font-size:14px;line-height:1.5;color:var(--muted)}
.cs-why{background:var(--navy);color:#fff;padding:clamp(28px,3.5vw,52px);margin-top:clamp(8px,1vw,16px)}
.cs-why .h2{color:#fff}
.cs-why__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,36px);margin-top:clamp(24px,3vw,36px)}
.cs-why__item{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--navy2)}
.cs-why__item .h4{color:#fff;font-size:22px}
.cs-why__item p{font-size:15px;line-height:1.6;color:var(--navytext)}
.cs-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.cs-next a{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,34px);background:var(--paper);border:1px solid var(--sand)}
.cs-next a:hover{border-color:var(--ink)}
.cs-next a:hover .h3{color:var(--slate)}
.cs-next a:last-child{text-align:right;align-items:flex-end}

/* ---------- carousel ---------- */
.car__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px}
.car__nav{display:flex;align-items:center;gap:12px}
.car__count{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:var(--muted)}
.car__btn{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
          border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:18px;cursor:pointer}
.car__btn:hover{background:var(--ink);color:#fff}
.car__stage{background:var(--navy);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.car__stage picture{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.car__stage img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.car__cap{margin-top:14px;min-height:48px;font-size:15px;line-height:1.5;color:var(--body)}
.car__thumbs{margin-top:8px;display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.car__thumb{flex:0 0 auto;width:96px;height:68px;padding:0;overflow:hidden;cursor:pointer;background:var(--beige);
            border:1px solid var(--sand);opacity:.5;transition:opacity .15s}
.car__thumb img{width:100%;height:100%;object-fit:cover}
.car__thumb[aria-current="true"]{border:2px solid var(--slate);opacity:1}
.car__thumb:hover{opacity:.85}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#fff}
.foot__in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,0.5fr));gap:clamp(28px,4vw,56px);
          padding-block:clamp(56px,6vw,88px)}
.foot__big{font-family:var(--serif);font-size:clamp(42px,5vw,68px);line-height:1;margin-bottom:28px}
.foot__big em{color:var(--navytext)}
.foot__col h2{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;
              color:var(--navytext);margin-bottom:16px}
.foot__col li{margin-bottom:10px;font-size:15px}
.foot__col a{color:#fff;opacity:.86}
.foot__col a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.foot__base{border-top:1px solid var(--navy2);padding-block:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
            font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--navytext)}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .nav__links{display:none}
  .nav__links.is-open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--sand);padding:8px var(--gut) 18px;box-shadow:0 18px 30px -24px rgba(0,0,0,.35)}
  .nav__links.is-open a{padding:14px 0;font-size:17px;border-bottom:1px solid var(--sand);opacity:1}
  .nav__links.is-open a[aria-current="page"]{color:var(--slate)}
  .nav__toggle{display:inline-flex}
  .nav__in{position:relative}
  .steps--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs-layout{grid-template-columns:1fr}
  .toc{display:none}
}
@media (max-width:960px){
  .phero{grid-template-columns:1fr;min-height:0}
  .phero__copy{padding:clamp(40px,7vw,64px) var(--gut) 40px}
  .phero__img{aspect-ratio:4/5;max-height:80vh}
  .pagehero__grid,.about,.media,.feature,.nlhero,.cs-hero__grid,.svc,.engage{grid-template-columns:1fr}
  .pagehero__img{max-height:70vh;aspect-ratio:4/5}
  .about__img,.media__img{max-width:560px}
  .engage__img{max-width:420px;aspect-ratio:4/3}
  .statbar__in{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .statbar__cell:nth-child(3){padding-left:0;border-left:0}
  .cols,.cols--4{grid-template-columns:1fr;gap:28px}
  .cols > *{padding:0;border-left:0}
  .cols > * + *{padding-top:28px;border-top:1px solid var(--sand)}
  .sec--navy .cols > * + *{border-top-color:var(--navy2)}
  .grid4,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3,.ccards,.cs-why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccard--wide{grid-column:1/-1}
  .tl > li{grid-template-columns:1fr;gap:14px}
  .tl__img{max-width:420px}
  .foot__in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__in > :first-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .grid2,.grid3,.grid4,.steps,.steps--5,.ccards,.ccards--2,.cs-steps,.cs-why__grid,.cs-next{grid-template-columns:1fr}
  .ccard--wide{display:flex}
  .ccard--wide .ccard__img{aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--sand)}
  .cs-steps--odd .cs-step:last-child{grid-column:auto}
  .worklist > *{grid-template-columns:1fr;gap:8px}
  .worklist__tag{text-align:left}
  .lrows > *{grid-template-columns:40px minmax(0,1fr);}
  .lrows > * > :last-child{grid-column:2}
  .cs-next a:last-child{text-align:left;align-items:flex-start}
  .cs-strip{grid-template-columns:1fr 1fr}
  .cs-strip__img:first-child{grid-column:1/-1;aspect-ratio:4/3}
  .foot__in{grid-template-columns:1fr 1fr}
  .nav__cta{display:none}
  .phero__copy .display{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
@media print{
  .nav,.foot,.car__nav,.car__thumbs,.toc{display:none}
  body{background:#fff}
}


/* =====================================================================
   Live-site look. These rules restyle every component above into the
   original surbhirawat.com visual language.
   ===================================================================== */
body{font-size:19px;line-height:1.55}
h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4{font-weight:500;letter-spacing:-0.02em}
.display{font-size:clamp(40px,7vw,84px);line-height:1.02}
.h1{font-size:clamp(34px,5.4vw,62px);line-height:1.04}
.h2{font-size:clamp(28px,4vw,48px);line-height:1.05}
.h3{font-size:clamp(24px,2.6vw,34px);line-height:1.08}
.h4{font-size:clamp(22px,2vw,26px);line-height:1.12}
.accent,.quiet{font-style:normal;color:var(--faint)}
.sec--navy .accent,.sec--slate .accent,.cs-why .accent,.foot .accent{color:#7F8FA6}
.kicker{font-size:12px;font-weight:500;letter-spacing:0.06em;color:var(--muted)}
.kicker--blue,.cs-step__k,.tl__year{color:var(--slate);font-weight:600}
.mono{font-size:11px;letter-spacing:0.08em}
.lede{font-size:clamp(18px,1.6vw,20px);line-height:1.5}
.prose{font-size:clamp(17px,1.5vw,19px);line-height:1.55}
.small{font-size:17px;line-height:1.5}
.sec{border-top:1px solid var(--sand)}
.sec--navy,.sec--slate{border-top:0}
.statbar__fig,.fstat__fig,.ccard__fig,.tl__tile,.foot__big{font-weight:400}

/* buttons: square, mono, uppercase */
.btn{border-radius:0;min-height:52px;padding:0 26px;font-family:var(--mono);font-size:12px;font-weight:600;
     letter-spacing:0.06em;text-transform:uppercase;background:var(--slate);color:#fff}
.btn:hover{background:var(--navy);color:#fff}
.btn--dark{background:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--soft,#F7F8FA);color:var(--ink)}
.btn--line-light{border-color:rgba(255,255,255,.6)}
.btn--sm{min-height:40px;padding:0 16px;font-size:11px}
.txtlink{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
         border-bottom:0;padding-bottom:0;color:var(--ink)}
.txtlink:hover{color:var(--slate)}
.monolink{font-size:12px;letter-spacing:0.06em;font-weight:600}

/* nav */
.nav{background:rgba(255,255,255,0.94);border-bottom:1px solid var(--sand)}
.nav__mark{font-size:24px;font-weight:500;letter-spacing:-0.02em}
.nav__links a{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);opacity:1}
.nav__links a:hover{color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:transparent}
.nav__toggle{border-radius:0;border-color:var(--hair2)}
.crumb{font-size:12px;letter-spacing:0.06em}

/* home hero: copy left, photo right, inside the page width */
.phero{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vw,80px) var(--gut);min-height:0;border-bottom:0;
       grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.phero__copy{padding:0;gap:22px}
.phero__copy .display{font-size:clamp(40px,7vw,84px)}
.phero__copy .display .accent{display:inline}
.phero__now{margin-top:6px;padding-top:0}
.phero__now::before{display:none}
.phero__img{aspect-ratio:4/5;background:var(--paper)}
.pagehero{padding-block:clamp(32px,5vw,64px) clamp(48px,6vw,80px)}
.pagehero__img{background:var(--paper)}

/* cards and blocks */
.card,.ccard,.cs-step,.glance,.svc,.engage,.cs-next a{border-color:var(--sand);border-radius:0}
.card{background:var(--paper);border:0}
.sec--paper .card{background:#fff}
.sec--paper .ccard,.sec--paper .cs-step{background:#fff}
.card--rule{background:transparent!important;border-top:1px solid var(--ink)}
.ccard{background:#fff}
.ccard:hover,.cs-next a:hover,a.card:hover{border-color:var(--slate)}
.ccard:hover .h4,.cs-next a:hover .h3{color:var(--slate)}
.svc{background:#fff;border:1px solid var(--sand);border-top:2px solid var(--slate)}
.svc:nth-child(even){border-top-color:var(--navy)}
.engage{background:#fff;border:1px solid var(--sand);border-left:2px solid var(--slate)}
.glance{background:#fff}
.cs-fig__frame{box-shadow:none}
.cs-why{background:var(--navy)}
.step--dot::before{background:var(--slate)}
.step--dot:nth-child(even)::before{background:var(--navy)}
.car__btn{border-radius:0}
.car__stage{background:var(--beige)}

/* forms: underline fields, as on the live site */
.field label,legend{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;
  padding:8px 0;font-family:var(--serif);font-size:19px}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:none;border-bottom-color:var(--slate)}
.chip{border-radius:0;border-color:var(--hair2);font-size:17px}
.chip:has(input:checked){background:var(--paper)}
.signup{background:#fff;border:1px solid var(--sand)}
.sec--navy .signup{border:0}
.formnote{font-size:15px}
.alert{background:var(--paper)}

/* footer: navy with the wave, as on the live site */
.wave{display:block;width:100%;height:auto;margin-top:-1px}
.foot__in{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,0.6fr))}
.foot__mark{font-family:var(--serif);font-size:clamp(34px,5vw,56px);line-height:1;color:#fff;font-weight:500;letter-spacing:-0.02em}
.foot__tag{margin-top:14px;color:var(--navytext);max-width:38ch}
.foot__col h2{font-size:11px;font-weight:600;letter-spacing:0.1em;margin-bottom:14px}
.foot__col li{font-size:18px}
.foot__col a{color:var(--navytext);opacity:1}
.foot__col a:hover{color:#fff;text-decoration:none}
.foot__base{font-size:11px;letter-spacing:0.08em}
@media (max-width:960px){ .foot__in{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ body{font-size:18px} .foot__in{grid-template-columns:1fr 1fr} }

/* case study data tables */
.cs-table{overflow-x:auto;border-top:1px solid var(--ink)}
.cs-table table{width:100%;border-collapse:collapse;min-width:560px}
.cs-table th,.cs-table td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--sand);
  font-size:16px;line-height:1.45;color:var(--body)}
.cs-table thead th{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.cs-table tbody th{font-weight:600;color:var(--ink)}
.cs-note{margin-top:14px;font-size:15px;line-height:1.5;color:var(--muted);max-width:75ch}

/* metric-led case study cards (no photos) */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.picks--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pick{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,32px);background:var(--paper);border-top:2px solid var(--slate);transition:background .15s}
.pick:nth-child(even){border-top-color:var(--navy)}
.pick:hover{background:var(--beige)}
.pick:hover .h3{color:var(--slate)}
.pick__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px;margin-top:auto;padding-top:18px;border-top:1px solid var(--hair2)}
.pick .fstat__fig{font-size:clamp(26px,2.4vw,34px)}
.pick .txtlink{margin-top:6px}
.sec--paper .pick{background:#fff}
.sec--paper .pick:hover{background:var(--beige)}
.pick--wide{grid-column:span 2}
@media (max-width:960px){ .picks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .picks,.picks--2{grid-template-columns:1fr} .pick--wide{grid-column:auto} }

.tl__img img{object-position:50% 30%}
.cs-figs .cs-fig__frame img{width:100%}

.tl > li.tl--wide .tl__body{grid-column:2 / -1}
.tl > li.tl--wide .tl__wideimg{grid-column:2 / -1}
@media (max-width:960px){ .tl > li.tl--wide .tl__body,.tl > li.tl--wide .tl__wideimg{grid-column:auto} }

/* case study: the 30-second summary */
.tldr{margin-top:clamp(32px,4vw,52px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.tldr__item{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,28px);background:var(--paper);border-top:2px solid var(--slate)}
.tldr__k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate)}
.tldr__v{font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--ink)}
.tldr__item--result{background:var(--navy);border-top-color:var(--navy)}
.tldr__item--result .tldr__k{color:var(--navytext)}
.tldr__item--result .tldr__v{color:#fff;font-weight:500}
@media (max-width:960px){ .tldr{grid-template-columns:1fr} }

/* =====================================================================
   Typography: Instrument Serif headlines, Geist body (from the last
   design), on the live site's layout and colours.
   ===================================================================== */
:root{
  --serif:'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body{font-family:var(--sans);font-size:17px;line-height:1.6}
h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em}
.display{font-size:clamp(46px,7.4vw,96px);line-height:1}
.h1{font-size:clamp(40px,5.8vw,72px);line-height:1.02}
.h2{font-size:clamp(32px,4.2vw,54px);line-height:1.04}
.h3{font-size:clamp(26px,2.6vw,36px);line-height:1.06}
.h4{font-size:clamp(22px,2vw,27px);line-height:1.1}
.lede{font-size:clamp(17px,1.4vw,19px);line-height:1.6}
.prose{font-size:17px;line-height:1.7}
.small{font-size:15.5px;line-height:1.6}
.nav__mark,.foot__mark{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em}
.nav__mark{font-size:28px}
.statbar__fig,.fstat__fig,.ccard__fig,.tl__tile,.worklist__name{font-family:var(--serif);font-weight:400}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:17px}
.chip{font-size:15px}
.glance__v,.cs-step__v,.cs-table th,.cs-table td{font-size:15px}
.foot__col li{font-size:16px}
@media (max-width:640px){ body{font-size:16px} }
@media (max-width:960px){
  .cs-hero .wrap{display:flex;flex-direction:column}
  .cs-hero__grid{display:contents}
  .cs-hero__copy{order:1}
  .tldr{order:2;margin-top:28px}
  .cs-hero .glance{order:3;margin-top:28px}
}

.statbar__in{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
@media (max-width:960px){ .statbar__in{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* =====================================================================
   Mobile and tablet pass
   ===================================================================== */
.nav__mobile{display:none}
/* comfortable tap areas for text links and the logo */
.nav__mark{display:inline-flex;align-items:center;min-height:44px}
.monolink,.txtlink{display:inline-flex;align-items:center;min-height:44px}
.glance__v a,.cs-note a{display:inline-block;padding-block:6px}

@media (max-width:1120px){
  .nav__links.is-open .nav__mobile{display:block;color:var(--slate);font-weight:600}
  .nav__links.is-open{left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));padding-left:var(--gut);padding-right:var(--gut);
    max-height:calc(100vh - var(--navh));overflow-y:auto}
  .nav__links.is-open a{font-size:14px;padding:16px 0}
}
@media (max-width:960px){
  /* home hero: stack, photo full width under the copy */
  .phero{grid-template-columns:1fr;gap:32px;padding-top:32px}
  .phero__img{aspect-ratio:4/5;max-height:72vh}
  .pagehero__grid{gap:32px}
  .shead{gap:14px}
  .tl > li{padding:24px 0}
  .tl__img{max-width:none;aspect-ratio:16/10}
}
@media (max-width:640px){
  :root{--gut:20px}
  .sec{padding-block:clamp(48px,12vw,64px)}
  .display{font-size:clamp(40px,11.5vw,52px)}
  .h1{font-size:clamp(34px,10vw,44px)}
  .h2{font-size:clamp(30px,8.6vw,38px)}
  .h3{font-size:26px}
  .row-btns .btn{width:100%}
  .phero__img{aspect-ratio:4/5}
  .statbar__in{row-gap:24px}
  .statbar__fig{font-size:clamp(32px,9vw,40px)}
  .shead{margin-bottom:28px;padding-bottom:20px}
  .shead .monolink{align-self:flex-start}
  .about__img,.media__img{max-width:none}
  .cs-strip{grid-template-columns:1fr 1fr}
  .cs-strip__img:first-child{grid-column:1/-1;aspect-ratio:4/3}
  .ctaband .btn{width:100%}
  .foot__base{flex-direction:column;gap:6px}
  /* case study tables become stacked rows: each row a small card */
  .cs-table{overflow:visible;border-top:0}
  .cs-table table{min-width:0}
  .cs-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cs-table tr{display:block;padding:14px 0;border-top:1px solid var(--sand)}
  .cs-table tbody tr:last-child{border-bottom:1px solid var(--sand)}
  .cs-table th,.cs-table td{display:block;border:0;padding:3px 0}
  .cs-table tbody th{font-size:16px;margin-bottom:4px}
  .cs-table td{display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);gap:12px}
  .cs-table td::before{content:attr(data-label);font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
  .tldr__item{padding:20px}
  .pick{padding:22px}
  .card{padding:22px}
  .svc{padding:22px}
  .engage{padding:20px}
  .cs-why{padding:24px 20px}
  .cs-step{padding:18px}
  .glance{padding:20px}
}

/* =====================================================================
   Contact page: kept in the previous design (cream, boxed fields,
   rounded buttons), as requested.
   ===================================================================== */
.contactpg{--c-cream:#F7F0E6;--c-paper:#FFFDF9;--c-sand:#E6D9C6;--c-ink:#1E2A38;--c-body:#3D4654;--c-slate:#5B7390;--c-slate-d:#465C77}
.contactpg .crumb,.contactpg .pagehero{background:var(--c-cream)}
.contactpg .crumb ol{padding-top:22px}
.contactpg .pagehero{border-bottom:1px solid var(--c-sand)}
.contactpg .display{color:var(--c-ink)}
.contactpg .accent{font-style:italic;color:var(--c-slate)}
.contactpg .kicker{color:var(--c-slate);letter-spacing:0.18em;font-weight:400}
.contactpg .lede{color:var(--c-body)}
.contactpg .sec{background:var(--c-paper);border-top:0}
.contactpg .field label,.contactpg legend{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--c-ink)}
.contactpg .field input,.contactpg .field select,.contactpg .field textarea{min-height:50px;padding:10px 14px;border:1px solid #CFC4B3;border-radius:10px;background:#fff;font-family:var(--sans);font-size:16px;color:var(--c-ink)}
.contactpg .field textarea{min-height:140px}
.contactpg .field input:focus,.contactpg .field select:focus,.contactpg .field textarea:focus{border-color:var(--c-slate);box-shadow:0 0 0 3px rgba(91,115,144,.18)}
.contactpg .chip{min-height:42px;padding:0 16px;border:1px solid #CFC4B3;border-radius:999px;background:#fff;font-size:15px}
.contactpg .chip input{accent-color:var(--c-slate)}
.contactpg .chip:has(input:checked){border-color:var(--c-ink);background:#F2E7D8}
.contactpg .btn{border-radius:999px;background:var(--c-slate);font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;min-height:50px}
.contactpg .btn:hover{background:var(--c-slate-d)}
.contactpg .glance{background:transparent;border:1px solid var(--c-sand)}
.contactpg .glance__row{border-bottom-color:var(--c-sand)}
.contactpg .alert{background:#F2E7D8;border-left-color:var(--c-slate)}
.contactpg .formnote{font-size:13px}
@media (max-width:640px){ .contactpg .btn{width:auto} }
a.glance__v{display:inline-block;padding-block:10px}

/* homepage case studies: three on phones, the rest behind "see all" */
.picks__more{display:none}
@media (max-width:640px){
  .picks--home .pick:nth-child(n+4){display:none}
  .picks__more{display:block;margin-top:20px}
  .picks__more .btn{width:100%}
}

/* ---------- career climb (work page) ---------- */
.climb{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);align-items:end}
.climb__step{display:flex;flex-direction:column;gap:14px;min-width:0}
.climb__when{color:var(--slate)}
.climb__role{margin:6px 0 4px}
.climb__where{color:var(--muted);margin:0}
.climb__bar{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:clamp(14px,1.4vw,20px);
  min-height:calc(120px + var(--i) * 52px);background:var(--navy);color:#fff;border-top:3px solid var(--slate)}
.climb__step:nth-child(odd) .climb__bar{background:#22324a}
.climb__step--now .climb__bar{background:var(--slate);border-top-color:var(--navy)}
.climb__fig{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,40px);line-height:1}
.climb__lab{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.45;color:rgba(255,255,255,.78)}
/* Narrow screens: read bottom to top, "Now" at the top, each bar wider than the one below. */
@media (max-width:960px){
  .climb{display:flex;flex-direction:column-reverse;align-items:stretch;gap:22px}
  .climb__step{align-items:flex-start}
  .climb__step{gap:10px;width:100%}
  .climb__bar{min-height:0;width:calc(52% + var(--i) * 9.6%)}
}
@media (max-width:640px){
  .climb__bar{width:calc(62% + var(--i) * 7.6%)}
  .climb__lab{font-size:12px}
}

/* ---------- AI stack (MarTech page) ---------- */
.aistack{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);
  background:var(--navy);color:#fff;padding:clamp(24px,3.5vw,48px)}
.aistack .kicker{color:rgba(255,255,255,.7)}
.aistack .h3{color:#fff;margin:10px 0 12px}
.aistack .accent{color:#9FB6DB}
.aistack .small{color:rgba(255,255,255,.8)}
.aistack__groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.aistack__k{color:rgba(255,255,255,.7)}
.aistack__chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.aistack__chips li{border:1px solid rgba(255,255,255,.28);padding:7px 12px;font-size:15px;line-height:1.2}
@media (max-width:960px){ .aistack{grid-template-columns:1fr} }
@media (max-width:640px){ .aistack__groups{grid-template-columns:1fr} }