/* ============================================================
   ESM Creative — stylesheet
   Palette: red #ef0914 / black #050607 / paper #f7f7f7
   ============================================================ */

:root{
  --red:#ef0914;
  --black:#050607;
  --ink:#111;
  --white:#fff;
  --paper:#f7f7f7;
  --line:#ddd;
  --muted:#666;
  --page:min(1440px, calc(100vw - 80px));
  --gutter:max(40px, 50vw - 720px);
  color-scheme:light;
}
:root[data-theme=dark]{
  --paper:#101112;
  --white:#171819;
  --ink:#f5f5f5;
  --line:#323335;
  --muted:#a6a6a6;
  color-scheme:dark;
}

/* --- reset ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
ul,ol,menu{list-style:none}
a{color:inherit;text-decoration:none}
b,strong{font-weight:bolder}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit;background:transparent;border-radius:0}
textarea{resize:vertical}
::placeholder{opacity:1}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:#fff}

/* --- brand + header ---------------------------------------- */
.brand{font-size:39px;font-weight:900;line-height:1;letter-spacing:-.075em}
.brand span{color:var(--red)}
.brand-inverse{color:#fff}

.site-header{
  display:flex;align-items:center;justify-content:space-between;
  height:80px;padding:0 var(--gutter);
  background:#fff;color:#050505;border-bottom:1px solid #eee;
}
.site-header nav{display:flex;gap:42px}
.site-header nav a{font-size:12px;font-weight:750}
.head-actions{display:flex;align-items:center;gap:14px}
.book-button{background:#050505;color:#fff;border-radius:4px;padding:13px 24px;font-size:12px;font-weight:750}
.theme-button{width:42px;height:42px;background:#fff;border:1px solid #bbb;border-radius:7px;cursor:pointer}
.menu{display:none;background:0 0;border:0;font-weight:750;cursor:pointer}

/* --- buttons ----------------------------------------------- */
.cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:35px;
  min-height:50px;padding:0 24px;border-radius:4px;
  background:var(--red);color:#fff;font-size:12px;font-weight:800;
}
.cta-outline{background:#0000004d;border:1px solid #fff6}
.cta:hover{filter:brightness(.92)}

/* --- home hero --------------------------------------------- */
.home-hero{
  min-height:550px;color:#fff;
  background:#090a0b url(assets/esm-studio-hero.webp) 50%/cover no-repeat;
}
.hero-inner{display:flex;align-items:center;width:var(--page);min-height:550px;margin:auto}
.hero-content{padding:45px 0}
.hero-eyebrow{
  display:block;margin:0 0 20px;color:var(--red);
  font-size:11px;font-weight:850;letter-spacing:.16em;
}
/* Two words, so it can carry more weight than the old four-line headline */
.hero-content h1{margin:0;font-size:clamp(58px,7vw,104px);line-height:1;letter-spacing:-.05em}
.hero-content h1 em{color:var(--red);font-style:normal}
.hero-content p{margin:24px 0 30px;max-width:620px;font-size:16px;font-weight:550;line-height:1.6}
.hero-buttons{display:flex;gap:18px}

/* --- trust strip ------------------------------------------- */
.trust{background:#fff;color:#111;border-bottom:1px solid #ddd;padding:18px var(--gutter)}
.trust p{margin:0 0 18px;font-size:9px;text-align:center;text-transform:uppercase;letter-spacing:.1em}
.trust>div{display:flex;align-items:center;justify-content:space-between;gap:28px}
.trust span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:750;white-space:nowrap}
.trust span i{color:var(--red);font-size:8px;font-style:normal;font-weight:900}
.trust-dark{background:#0d0e0f;color:#fff;border-color:#252525}

/* --- section headings -------------------------------------- */
.section-intro>span,.red-label{
  display:block;color:var(--red);font-size:11px;font-weight:850;line-height:1;letter-spacing:.04em;
}
.section-intro h2{margin:7px 0 6px;font-size:24px;line-height:1.06;letter-spacing:-.03em}
.section-intro p{max-width:330px;margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.section-intro.inverse h2{color:#fff}
.section-intro.inverse p{color:#c3c3c3}

/* --- comparison -------------------------------------------- */
.comparison{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:var(--white);border-bottom:1px solid var(--line);
}
.compare-half{min-height:315px;padding:38px var(--gutter)}
.compare-half:first-child{border-right:1px solid var(--line);padding-right:55px}
.compare-half:last-child{padding-left:55px}
.versus{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:#050505;color:#fff;font-size:12px;font-weight:900;
}
.journey-flow{display:flex;align-items:center;margin:38px 0 22px}
.journey-item{position:relative;flex:1;text-align:center}
.journey-item .mini-icon{margin:auto}
.journey-item small{display:block;margin-top:8px;font-size:10px;font-weight:700}
.journey-item>b{position:absolute;top:17px;right:-12px;color:#777;font-size:23px;font-weight:400}
.journey-flow.esm .journey-item>b{color:var(--red)}
.journey-result{display:block;font-size:12px;text-align:center}
.mini-icon{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid;border-radius:50%;font-size:17px;font-style:normal;
}

/* The 330px cap that suits the other sections is too narrow here: the right
   half's intro wraps to a second line, shunting its icon row below the left
   half's. Free the width so it sits on one line, and pin both icon rows to
   the bottom of their column so the two sides stay level at any width even
   if the copy changes later. */
.comparison .section-intro p{max-width:none}
.compare-half{display:flex;flex-direction:column}
.compare-half .journey-flow{margin-top:auto}

/* --- referral band ----------------------------------------- */
.referral-band{
  display:grid;background:#070809;color:#fff;
  grid-template-columns:minmax(300px,360px) minmax(0,1fr);
  grid-template-rows:auto 1fr;align-items:start;
  row-gap:25px;column-gap:56px;padding:60px var(--gutter);
}
.referral-band>.section-intro{grid-area:1/1}
.ref-benefits{grid-area:2/1;display:flex;flex-direction:column;gap:15px;padding-top:20px}
.ref-benefits>span{font-size:12px;line-height:1.45}
.ref-benefits .cta{align-self:flex-start;min-height:38px;margin-top:4px;padding:0 17px}
.referral-gallery{
  grid-area:1/2/3;justify-self:stretch;width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}

/* --- 9:16 concept thumbnails -------------------------------- */
.ref-thumb{
  position:relative;overflow:hidden;width:100%;min-height:0;aspect-ratio:9/16;
  border:1px solid #333;border-radius:13px;color:#fff;
  /* Two layers: the still on top, a branded gradient underneath. If the
     still is missing the gradient shows through, so a card never renders
     as a flat grey box. */
  background-color:#202020;
  background-image:url(assets/design-reference.webp),
                   linear-gradient(155deg,#26272a 0%,#101113 55%,#2b0d10 100%);
  background-repeat:no-repeat,no-repeat;
}
.ref-1{background-position:32% center,center;background-size:auto 100%,cover}
.ref-2{background-position:47% center,center;background-size:auto 100%,cover}
.ref-3{background-position:62% center,center;background-size:auto 100%,cover}
.ref-4{background-position:78% center,center;background-size:auto 100%,cover}
.ref-5{background-position:20% center,center;background-size:auto 100%,cover}
.ref-6{background-position:90% center,center;background-size:auto 100%,cover}
.ref-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(#0000 45%,#000000d9)}
.play{
  position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid #fff;border-radius:50%;font-size:12px;
}
/* Cover label — names the clip over its poster frame, then clears on play */
.ref-thumb strong{
  position:absolute;bottom:10px;left:12px;right:10px;z-index:2;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:12px;font-weight:800;letter-spacing:-.01em;
  text-shadow:0 1px 12px #000000b3;
}
/* the six-up strip runs narrow, so ease the label down a step there */
.referral-gallery .ref-thumb strong{font-size:11px}
.ref-thumb strong::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--red);flex:none;
}

/* --- studio process ---------------------------------------- */
.studio-strip{
  display:grid;grid-template-columns:300px 1fr;gap:40px;
  padding:30px var(--gutter);
  background:var(--white);border-bottom:1px solid var(--line);
}
.process-row{display:grid;grid-template-columns:repeat(5,1fr)}
.process-step{position:relative;padding:0 26px;text-align:left}
.process-step .mini-icon{width:38px;height:38px}
.process-step>b{display:block;margin:8px 0 3px;font-size:11px}
.process-step small{display:block;color:var(--muted);font-size:9px;line-height:1.35}
.process-arrow{position:absolute;top:16px;right:-5px;color:var(--muted);font-size:24px;font-style:normal}

/* --- work band (home) -------------------------------------- */
/* Same two-column shape as the Referral Ads band above: intro and styles on
   the left, the grid on the right. Keeps the tiles a sensible size instead of
   stretching them across the full page. */
.work-band{
  display:grid;background:#070809;color:#fff;
  /* Text column matches the Referral Ads band above; the video column is
     capped so the tiles stay watchable on a laptop. The leftover sits between
     them, so both blocks align to the page edges rather than leaving a gap
     stranded on one side. */
  grid-template-columns:minmax(280px,360px) minmax(0,660px);
  justify-content:space-between;
  grid-template-rows:auto 1fr;align-items:start;
  row-gap:25px;column-gap:56px;padding:60px var(--gutter);
}
.work-band>.section-intro{grid-area:1/1}
.work-styles{grid-area:2/1;display:flex;flex-direction:column;gap:11px;padding-top:18px}
.work-styles>span{font-size:11px}
.work-styles a:not(.cta){text-decoration:underline;text-underline-offset:3px;text-decoration-color:#555}
.work-styles a:not(.cta):hover{text-decoration-color:var(--red)}
.work-styles .cta{align-self:flex-start;min-height:38px;margin-top:4px;padding:0 17px}
/* Two formats, two tiles — a two-column grid fills the space instead of
   leaving an empty third column. */
.work-cards{
  grid-area:1/2/3;justify-self:stretch;width:100%;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
}
.work-cards article{overflow:hidden;padding:0 0 12px;border:1px solid #333;border-radius:8px}
.work-cards .ref-thumb{border:0;border-radius:0}
.work-cards article>p{margin:10px 0 0;padding:0 12px;color:#bbb;font-size:10px;font-weight:700}

/* --- industries -------------------------------------------- */
.industry-section,.pricing-section{background:var(--white);padding:85px var(--gutter)}
/* Number above the headline, not beside it — otherwise the headline is
   indented 100px from the grid it introduces, which reads as broken on
   wide screens. Matches the pillars section. */
.industry-section>.section-intro,.pricing-section>.section-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  align-items:end;column-gap:56px;margin-bottom:38px;
}
.industry-section>.section-intro>span,.pricing-section>.section-intro>span{grid-column:1;grid-row:1}
.industry-section>.section-intro h2,.pricing-section>.section-intro h2{
  grid-column:1;grid-row:2;margin:6px 0 0;font-size:44px;
}
.industry-section>.section-intro p,.pricing-section>.section-intro p{
  grid-column:2;grid-row:2;justify-self:end;margin:0;
}
.industry-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.industry-grid a{
  position:relative;min-height:160px;padding:24px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.industry-grid span{color:var(--red);font-size:9px;font-weight:800}
.industry-grid h3{margin:55px 0 0;font-size:clamp(17px,2vw,28px);letter-spacing:-.035em;
  line-height:1.15;overflow-wrap:break-word;padding-right:26px}
.industry-grid b{position:absolute;top:20px;right:20px;color:var(--red)}

/* --- pricing ------------------------------------------------ */
.package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.package .pkg-line{display:block;margin:0 0 4px;font-size:13px;font-weight:800}
.package .pkg-note,.pkg-card .pkg-note{
  display:block;margin:14px 0 20px;color:var(--muted);
  font-size:10px;line-height:1.45;font-style:italic;
}
.pkg-card .pkg-note{font-size:11px;margin:16px 0 22px}
.package.featured .pkg-note{color:#b9b9b9}
.pricing-close{
  margin-top:36px;padding:32px;border:1px solid var(--line);border-radius:10px;background:var(--paper);
}
.pricing-close h3{margin:0 0 10px;font-size:22px;line-height:1.25;letter-spacing:-.03em}
.pricing-close p{margin:0;max-width:780px;color:var(--muted);font-size:12px;line-height:1.65}
.package{
  position:relative;display:flex;flex-direction:column;min-height:350px;padding:24px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
}
.package.featured{background:#08090a;color:#fff}
.package .most{
  position:absolute;top:14px;right:14px;padding:5px 7px;
  background:var(--red);font-size:8px;font-weight:800;
}
.package>p{font-size:11px;font-weight:800}
.package h3{margin:15px 0;font-size:35px}
.package h3 small{color:var(--muted);font-size:11px}
.package ul{margin:0;padding:18px 0;border-top:1px solid var(--line)}
.package li{padding:6px 0;font-size:11px;line-height:1.45}
.package .cta{margin-top:auto}

/* --- final banner + footer ---------------------------------- */
.final-banner{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:70px var(--gutter);color:#fff;
  background:linear-gradient(#ef0914d6,#ef0914d6),url(assets/esm-studio-hero-v2.webp) 50% 46%/cover no-repeat;
  background-color:var(--red);
}
.final-banner span{font-size:9px;font-weight:800;letter-spacing:.1em}
.final-banner h2{margin:10px 0 0;font-size:48px;line-height:1;text-shadow:0 2px 24px #3200002e}
.final-banner .cta{background:#fff;color:#111;box-shadow:0 12px 34px #46000026}

.new-footer{display:grid;grid-template-columns:2fr 1fr 1fr;padding:55px var(--gutter);background:#050607;color:#fff}
.new-footer>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.new-footer p{max-width:340px;color:#888;font-size:12px;line-height:1.5}
.new-footer b{color:#777;font-size:9px;text-transform:uppercase}
.new-footer a:not(.brand){color:#bbb;font-size:12px}
.new-footer small{
  grid-column:1/-1;margin-top:35px;padding-top:25px;
  border-top:1px solid #252525;color:#666;
}

/* --- work page ---------------------------------------------- */
.work-hero{
  background:#070809 url(assets/esm-studio-hero-v2.webp) 50%/cover no-repeat;
  color:#fff;padding:110px var(--gutter);
}
.work-hero>span{color:var(--red);font-size:10px;font-weight:850;letter-spacing:.08em}
.work-hero h1{max-width:800px;margin:18px 0;font-size:clamp(52px,7vw,96px);line-height:.94;letter-spacing:-.055em}
.work-hero p{max-width:560px;color:#c4c4c4;line-height:1.55}
.work-library{background:var(--white);padding:72px var(--gutter)}
.work-library + .work-library{border-top:1px solid var(--line)}
.work-library:nth-of-type(odd){background:var(--paper)}
.work-library-heading{margin-bottom:34px}
.work-library-heading .section-intro p{max-width:520px}
.work-library-heading>p{max-width:390px;color:var(--muted);font-size:12px;line-height:1.45}
.work-library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.work-library-grid article{padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:12px}

.work-library-grid article>p{margin:12px 0 0;color:var(--muted);font-size:11px;font-weight:700}

/* --- resources page ----------------------------------------- */
.resources-hero{background:#070809;color:#fff;padding:110px var(--gutter)}
.resources-hero>span{color:var(--red);font-size:10px;font-weight:850;letter-spacing:.08em}
.resources-hero h1{margin:18px 0;font-size:clamp(52px,7vw,96px);line-height:.94;letter-spacing:-.055em}
.resources-hero p{max-width:560px;color:#c4c4c4;line-height:1.55}
.resources-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding:75px var(--gutter);background:var(--white);
}
.resources-grid>a{
  display:flex;flex-direction:column;min-height:280px;padding:28px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
}
.resources-grid span{color:var(--red);font-size:10px;font-weight:850}
.resources-grid h2{margin:45px 0 12px;font-size:28px;letter-spacing:-.04em}
.resources-grid p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.resources-grid b{margin-top:auto;font-size:11px}

/* ============================================================
   Free Referral Ad™ landing page
   ============================================================ */
.new-landing{background:#f7f7f7;color:#111}
.lp-dark{background:#060708;color:#fff}
.lp-header{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;padding:0 var(--gutter);border-bottom:1px solid #191a1c;
}
.chat-link{padding:9px 14px;border:1px solid #555;border-radius:4px;font-size:10px;font-weight:700}
.chat-link span{margin-left:10px}

.lp-hero{
  display:grid;align-items:center;
  width:var(--page);min-height:430px;margin:auto;
}
.lp-copy h1{margin:14px 0 18px;font-size:clamp(43px,4.4vw,68px);line-height:1.04;letter-spacing:-.04em}
.lp-copy h1 em{color:var(--red);font-style:normal}
.lp-copy>p{font-size:15px;line-height:1.5;max-width:620px}
.lp-copy>.cta{min-width:360px;margin-top:16px}


.benefit-row{
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:20px var(--gutter);border-top:1px solid #222;
}
.benefit-row>div{display:flex;align-items:center;justify-content:center;gap:12px}
.benefit-row .mini-icon{width:30px;height:30px;font-size:12px}
.benefit-row span{font-size:9px;font-weight:700;line-height:1.25}

.lp-main{display:grid;grid-template-columns:1fr 480px;gap:45px;padding:35px var(--gutter) 25px}
.lp-content>h2{margin:8px 0 27px;font-size:26px}
.lp-process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lp-process>div{position:relative;padding-left:52px}
.lp-process .mini-icon{position:absolute;top:0;left:0;width:40px;height:40px}
.lp-process b{font-size:18px}
.lp-process h3{margin:7px 0 5px;font-size:11px}
.lp-process p{margin:0;color:#555;font-size:9px;line-height:1.35}
.lp-process>div>i{position:absolute;top:20px;right:-12px;color:#777;font-style:normal}

.sample-head{display:flex;align-items:center;justify-content:space-between;margin:38px 0 12px}
.sample-head a{font-size:9px}
.lp-samples{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-samples .ref-thumb{min-height:0}

.faq-label{margin-top:35px}
.lp-faq{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:12px}
.lp-faq details{background:#fafafa;border:1px solid #ccc;border-radius:4px}
.lp-faq summary{display:flex;justify-content:space-between;padding:12px 11px;font-size:12px;list-style:none;cursor:pointer}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq details[open] summary span{transform:rotate(180deg)}
.lp-faq summary span{transition:transform .2s}
.lp-faq details p{margin:0;padding:0 11px 11px;color:#666;font-size:10px}

.lp-main aside{position:relative}
.claim-form{
  position:sticky;top:20px;padding:30px;
  background:#fafafa;border:1px solid #ccc;border-radius:8px;
}
.claim-form h3{margin:10px 0 4px;font-size:17px;line-height:1.35}
.claim-form>small{font-size:10px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.fields input,.fields textarea,.fields select,.file{
  width:100%;min-height:43px;padding:12px;
  background:#050505;color:#fff;border:0;border-radius:4px;font-size:11px;
}
.fields select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 16px) 19px,calc(100% - 11px) 19px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fields input::placeholder,.fields textarea::placeholder{color:#fff}
.fields .wide{grid-column:1/-1}
.file{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.file input{display:none}
.file b{padding:7px 10px;border:1px solid #777;border-radius:3px}
.claim-form>button{
  display:flex;align-items:center;justify-content:center;gap:20px;
  width:100%;height:50px;border:0;border-radius:4px;
  background:var(--red);color:#fff;font-size:12px;font-weight:800;cursor:pointer;
}
.claim-form>p{color:#777;font-size:9px;text-align:center}

.lp-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--gutter);background:#fff;border-top:1px solid #ddd;
}
.lp-footer span,.lp-footer>a{font-size:10px}

/* ============================================================
   Responsive
   ============================================================ */
@media (width <= 1050px){
  .site-header nav{display:none}
  .site-header nav.open{
    display:flex;flex-direction:column;padding:25px;z-index:10;
    position:absolute;top:80px;left:0;right:0;background:#fff;
  }
  .menu{display:block}
  .comparison{grid-template-columns:1fr}
  .compare-half:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .versus{top:50%}
  .referral-band,.work-band{grid-template-rows:auto auto auto;grid-template-columns:1fr 1fr;column-gap:35px}
  .ref-benefits,.work-styles{grid-area:1/2;padding-top:0}
  .referral-gallery,.work-cards{grid-area:2/1/auto/-1;width:100%;max-width:none;margin-top:22px;
    grid-template-columns:repeat(3,1fr)}
  .studio-strip{grid-template-columns:1fr}
  .package-grid{grid-template-columns:1fr 1fr}
  .pricing-close{padding:24px}
  .work-library-grid{grid-template-columns:repeat(2,1fr)}
  .lp-main{grid-template-columns:1fr}
  .claim-form{position:static}
    }

@media (width <= 700px){
  :root{--page:calc(100vw - 36px)}
  .site-header,.lp-header{height:68px;padding:0 18px}
  .site-header nav.open{top:68px}
  .brand{font-size:30px}
  .book-button,.theme-button{display:none}
  .home-hero,.hero-inner{min-height:600px}
  .home-hero{background-position:65%}
  .hero-content h1{font-size:54px}
  .hero-eyebrow{font-size:10px;margin-bottom:14px}
  .hero-content p br{display:none}
  .hero-buttons{flex-direction:column;align-items:flex-start}
  /* The row is wider than the phone. It used to be clipped, which hid
     Vision Care and Mental Health entirely — now it scrolls sideways.
     Scrollbar is suppressed; the cut-off item is the affordance. */
  .trust{padding:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .trust::-webkit-scrollbar{display:none}
  .trust>div{gap:35px;width:max-content;padding-right:18px}
  .compare-half{padding:45px 18px !important}
  .versus{display:none}
  /* The row and its arrows stay on mobile. The labels were squeezed onto one
     line at ~85px each — so size them up and let them wrap word-by-word
     instead. Items align to the top so the icons stay on one line while the
     captions run to two or three.
     margin-top has to beat `.compare-half .journey-flow{margin-top:auto}`:
     auto collapses to 0 in a single column, so the intro copy was butting
     straight into the first icon with no gap at all. */
  .comparison .section-intro p{margin-top:12px;line-height:1.55}
  .comparison .journey-flow{align-items:flex-start;margin-top:34px}
  .comparison .journey-item small{font-size:12px;line-height:1.25;max-width:7ch;margin:8px auto 0}
  .comparison .journey-item>b{right:-8px;font-size:19px}
  .referral-band,.work-band{grid-template-rows:auto auto auto;grid-template-columns:1fr;padding:45px 18px}
  .referral-band>.section-intro,.work-band>.section-intro{grid-area:1/1}
  .ref-benefits,.work-styles{grid-area:2/1;padding-top:16px}
  .referral-gallery,.work-cards{grid-area:3/1;margin-top:20px}
  .referral-gallery,.lp-samples,.work-cards{grid-template-columns:1fr 1fr}
  /* Two-up tiles are too narrow for 'Professional / B2B Services' on one
     line, so let it wrap here and lift the bubbles clear of it. */
  .ref-thumb strong{white-space:normal;font-size:10px;line-height:1.15;align-items:flex-start}
  .ref-thumb strong::before{margin-top:3px}
  .studio-strip{padding:40px 18px}
  .process-row{grid-template-columns:1fr}
  .process-step{min-height:60px;padding:12px 0 12px 55px}
  .process-step .mini-icon{position:absolute;left:0}
  .process-arrow{display:none}
  .work-hero{padding:80px 18px}
  .work-library{padding:60px 18px}
  .work-library-heading{display:block}
  .work-library-grid{grid-template-columns:1fr 1fr;gap:12px}
  .industry-section,.pricing-section{padding:65px 18px}
  .industry-section>.section-intro,.pricing-section>.section-intro{display:block}
  .industry-section>.section-intro h2,.pricing-section>.section-intro h2{font-size:35px}
  .industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .industry-grid a{min-height:0;padding:18px}
  .industry-grid h3{margin:34px 0 0;padding-right:18px}
  .industry-grid b{top:16px;right:16px}
  .package-grid{grid-template-columns:1fr}
  .final-banner{flex-direction:column;align-items:flex-start;gap:30px;padding:55px 18px}
  .final-banner h2{font-size:37px}
  .new-footer{grid-template-columns:1fr;gap:30px;padding:50px 18px}
  .lp-hero{grid-template-columns:1fr;min-height:auto;padding:65px 0 35px}
  /* Line breaks are positioned for the desktop measure; at this width they
     produce six ragged lines. Let the text wrap on its own instead. */
  .lp-copy h1{font-size:38px}
  .lp-copy h1 br{display:none}
  .lp-copy>.cta{min-width:0}
      /* Two columns at this size. Centring each cell puts every icon at a
     different x, because the labels are all different widths — so align
     them to the start of the cell instead and the icons form two clean
     vertical lines. */
  .benefit-row{grid-template-columns:1fr 1fr;gap:20px 14px;padding:22px 18px}
  .benefit-row>div{justify-content:flex-start;align-items:flex-start}
  .benefit-row .mini-icon{flex:none}
  .lp-main{padding:35px 18px}
  .lp-process{grid-template-columns:1fr 1fr;gap:30px 15px}
  .lp-process>div>i{display:none}
  .lp-samples{grid-template-columns:1fr 1fr}
  .lp-faq,.fields{grid-template-columns:1fr}
  .fields input{grid-column:1/-1}
  .lp-footer{flex-wrap:wrap;gap:20px;padding:25px 18px}
  .resources-hero{padding:80px 18px}
  .resources-grid{grid-template-columns:1fr;padding:55px 18px}
  .resources-grid>a{min-height:230px}
}

/* --- form success state -------------------------------------- */
.success{padding:70px 25px;border:1px solid #ccc;border-radius:8px;text-align:center}
.success>b{
  display:grid;place-items:center;width:50px;height:50px;margin:auto;
  background:var(--red);color:#fff;border-radius:50%;
}
.success h3{margin:18px 0 8px;font-size:28px}
.success p{color:#666}

/* ============================================================
   Video
   ============================================================ */

/* --- Header background videos -------------------------------
   The <video> sits behind the copy; the ::after scrim keeps the
   white text legible over whatever footage is dropped in. The
   existing background-image on each hero stays as the fallback
   for browsers that block autoplay or when no file is present. */
.home-hero,.work-hero,.resources-hero,.lp-dark{position:relative;overflow:hidden;isolation:isolate}
.hero-video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.home-hero::after,.work-hero::after,.resources-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#000000cc,#00000073 55%,#00000026);
}
/* The landing hero carries copy on the left and the phone mock on the right,
   so it needs a heavier, more even scrim than the other three. */
.lp-dark::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#000000e6,#000000b3 60%,#00000099);
}

/* --- 9:16 concept videos ------------------------------------ */
.ref-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  background:#202020;
}
.ref-thumb .play{cursor:pointer;background:#00000059;color:#fff;transition:opacity .25s,transform .15s}
.ref-thumb .play:hover{transform:translate(-50%,-50%) scale(1.08)}

/* While a clip is playing, drop the sample overlay out of the way */
.ref-thumb.playing::after,
.ref-thumb.playing strong{opacity:0;transition:opacity .3s}
.ref-thumb.playing .play{opacity:0}
.ref-thumb.playing:hover .play{opacity:1}

/* A thumb with no video file yet keeps the original still framing */
.ref-thumb:not([data-has-video]) .ref-video{display:none}

/* ---- Video lightbox ---------------------------------------------
   A 9:16 reel is unwatchable at tile size, so a click opens it here:
   sized to the viewport height, sound on, native controls for scrubbing. */
.vbox{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,28px);
  padding:clamp(12px,3vw,40px);
  background:#000000f0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.vbox[hidden]{display:none}
html.vbox-open{overflow:hidden}          /* stop the page scrolling behind it */

.vbox-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.vbox-video{
  width:auto;height:min(78vh,calc(100vw * 16 / 9));
  max-width:100%;aspect-ratio:9/16;
  border-radius:12px;background:#000;
  box-shadow:0 24px 70px #000000b3;
}
.vbox-cap{
  max-width:min(90vw,420px);text-align:center;
  color:#bdbdbd;font-size:12px;line-height:1.45;
}

.vbox-close,.vbox-nav{
  display:grid;place-items:center;flex:none;
  background:#ffffff14;color:#fff;border:1px solid #ffffff2e;border-radius:50%;
  cursor:pointer;transition:background .18s,transform .15s;
}
.vbox-close{position:absolute;top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);
  width:42px;height:42px;font-size:22px;line-height:1;z-index:2}
.vbox-nav{width:46px;height:46px;font-size:26px;line-height:1;padding-bottom:3px}
.vbox-close:hover,.vbox-nav:hover{background:#ffffff2b;transform:scale(1.07)}
.vbox-close:focus-visible,.vbox-nav:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.vbox-nav[hidden]{display:none}

@media (max-width:700px){
  .vbox{gap:4px;padding:10px}
  .vbox-video{height:min(70vh,calc(100vw * 16 / 9))}
  .vbox-nav{width:38px;height:38px;font-size:21px}
  .vbox-cap{font-size:11px}
}

@media (prefers-reduced-motion: reduce){
  .vbox-close,.vbox-nav{transition:none}
  .vbox-close:hover,.vbox-nav:hover{transform:none}
}

@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
}

/* ============================================================
   Package pages (/packages/*)
   ============================================================ */
.pkg-hero{
  display:grid;grid-template-columns:1fr minmax(0,500px);gap:60px;align-items:center;
  background:#050607;color:#fff;padding:90px var(--gutter);
}
.pkg-hero h1{margin:16px 0 12px;font-size:clamp(48px,6vw,84px);line-height:.95;letter-spacing:-.05em}
.pkg-price{font-size:44px;line-height:1;letter-spacing:-.04em}
.pkg-price small{color:#9a9a9a;font-size:12px;letter-spacing:0}
.pkg-hero>div:first-child>p{margin:20px 0 0;max-width:440px;color:#c4c4c4;font-size:14px;line-height:1.6}

/* The card stays literally white — it sits on a permanently dark hero,
   so it must not follow the dark-theme tokens. */
.pkg-card{background:#fff;color:#111;border-radius:10px;padding:34px}
.pkg-card>span{color:var(--red);font-size:10px;font-weight:850;letter-spacing:.12em}
.pkg-card h2{margin:12px 0 20px;font-size:30px;line-height:1.1;letter-spacing:-.035em}
.pkg-card ul{margin:0 0 26px;padding-top:18px;border-top:1px solid #ddd}
.pkg-card li{padding:7px 0;font-size:12px}
.pkg-card .cta{width:100%;justify-content:center;gap:14px;min-height:54px}
.pkg-card .cta + .cta{margin-top:10px}
.cta-ghost{background:0 0;color:#111;border:1px solid #ccc}
.cta-ghost:hover{background:#f1f1f1;filter:none}

.pkg-steps{display:grid;grid-template-columns:300px 1fr;gap:50px;
  background:var(--white);padding:80px var(--gutter)}
.pkg-steps h2{margin:8px 0 0;font-size:34px;line-height:1.08;letter-spacing:-.04em}
.pkg-step-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.pkg-step{border-top:1px solid var(--line);padding-top:14px}
.pkg-step b{color:var(--red);font-size:10px;font-weight:850}
.pkg-step h3{margin:10px 0 6px;font-size:15px}
.pkg-step p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}

.pkg-faq{display:grid;grid-template-columns:1fr 1fr;gap:60px;
  background:var(--paper);padding:80px var(--gutter)}
.pkg-faq h2{font-size:38px;line-height:1.08;letter-spacing:-.04em}
.pkg-faq details{border-top:1px solid var(--line)}
.pkg-faq summary{display:flex;justify-content:space-between;gap:20px;
  padding:16px 0;font-size:13px;font-weight:700;list-style:none;cursor:pointer}
.pkg-faq summary::-webkit-details-marker{display:none}
.pkg-faq summary span{color:var(--red);transition:transform .2s}
.pkg-faq details[open] summary span{transform:rotate(45deg)}
.pkg-faq details p{margin:0;padding:0 0 18px;color:var(--muted);font-size:12px;line-height:1.55}

/* Flat red banner — no photograph behind it on these pages */
.final-banner.flat{background:var(--red);background-image:none}
.final-banner.flat h2{font-size:38px;text-shadow:none}

.pkg-footer{background:#050607;color:#fff;border-top:0}
.pkg-footer span{color:#666}
.pkg-footer>a:not(.brand){color:#888}

@media (width <= 1050px){
  .pkg-hero{grid-template-columns:1fr;gap:40px}
  .pkg-steps{grid-template-columns:1fr;gap:32px}
  .pkg-step-row{grid-template-columns:1fr 1fr;gap:24px}
  .pkg-faq{grid-template-columns:1fr;gap:30px}
}
@media (width <= 700px){
  .pkg-hero{padding:60px 18px}
  .pkg-hero h1{font-size:46px}
  .pkg-card{padding:26px}
  .pkg-steps,.pkg-faq{padding:56px 18px}
  .pkg-step-row{grid-template-columns:1fr}
  .pkg-faq h2,.pkg-steps h2{font-size:30px}
}

/* ============================================================
   Book a call (/book-a-call)
   ============================================================ */
.call-page{background:var(--paper);color:var(--ink)}
.call-hero{padding:70px var(--gutter) 0;text-align:center}
.call-hero>span{color:var(--red);font-size:10px;font-weight:850;letter-spacing:.16em}
.call-hero h1{margin:18px 0 14px;font-size:clamp(38px,4.6vw,54px);line-height:1.08;letter-spacing:-.04em}
.call-hero>p{margin:0 auto;max-width:520px;color:var(--muted);font-size:15px;line-height:1.55}

/* Desktop: form and calendar side by side across the site's full content
   measure. Mobile stacks them, form first. */
/* Single centred column, on a wider measure than the original 700px. */
.call-body{width:min(900px, 100vw - 80px);margin:0 auto;padding:38px 0 80px}
.call-wrap{max-width:700px;margin:0 auto;padding:34px var(--gutter) 70px}
/* ---- Cal.com scheduler ------------------------------------------
   The widget renders in its own iframe, so its internals can't be styled
   from here. What we control is the frame around it: same card treatment
   as the form it replaced, so the page still reads as ours. Brand colour
   is passed into the widget via cssVarsPerTheme in book-a-call.html. */
.cal-frame{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:10px;overflow:hidden;
}
.cal-inline{
  width:100%;
  /* Tall enough for the month grid without an inner scrollbar, capped so it
     never runs past a short laptop viewport. */
  height:clamp(620px,78vh,780px);
  overflow:auto;
}
.cal-fallback{margin:26px 18px;color:var(--muted);font-size:14px;line-height:1.6;text-align:center}
.cal-fallback a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

@media (max-width:700px){
  .cal-frame{padding:6px;border-radius:10px}
  .cal-inline{height:clamp(560px,80vh,720px)}
}

.call-form{
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:34px;
}
.call-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.call-fields label{display:block;font-size:11px;font-weight:700;margin-bottom:6px}
.call-fields .wide{grid-column:1/-1}
.call-form input[type=text],.call-form input[type=email],.call-form input[type=tel],.call-form textarea{
  width:100%;padding:12px;font-size:13px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;
}
.call-form input::placeholder,.call-form textarea::placeholder{color:var(--muted);opacity:.75}
.call-form textarea{min-height:110px}

/* Pill choices — the radio itself is hidden, the label is the control */
.pill-group{border:0;padding:0;margin:0}
.pill-group>span{display:block;font-size:11px;font-weight:700;margin-bottom:8px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{cursor:pointer}
.pills input{position:absolute;opacity:0;width:0;height:0}
.pills span{
  display:inline-block;padding:9px 17px;font-size:12px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  transition:background .15s,border-color .15s,color .15s;
}
.pills label:hover span{border-color:var(--muted)}
.pills input:checked + span{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.pills input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}

.call-form>button{
  width:100%;height:50px;margin-top:22px;
  background:var(--red);color:#fff;border:0;border-radius:8px;
  font-size:13px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.call-form>button:hover{filter:brightness(.93)}

@media (width <= 700px){
  .call-hero{padding:52px 18px 0}
  .call-body{padding:28px 0 56px}
  .call-wrap{padding:26px 18px 50px}
  .call-form{padding:24px}
  .call-fields{grid-template-columns:1fr}
}


/* ============================================================
   Help page (/help)
   ============================================================ */
.help-billing{display:grid;grid-template-columns:300px 1fr;gap:50px;
  background:var(--white);padding:70px var(--gutter)}
.help-billing-card{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:30px;max-width:560px;
}
.help-billing-card h3{margin:0 0 8px;font-size:20px;letter-spacing:-.03em}
.help-billing-card p{margin:0 0 20px;color:var(--muted);font-size:12px;line-height:1.6}
.help-billing-card small{display:block;margin-top:16px;color:var(--muted);font-size:10px;line-height:1.5}
@media (width <= 1050px){ .help-billing{grid-template-columns:1fr;gap:28px} }
@media (width <= 700px){ .help-billing{padding:50px 18px} .help-billing-card{padding:24px} }

.ref-thumb::after,.ref-thumb strong{transition:opacity .3s}


/* Referral Ads™ as an explainer rather than a second gallery: intro and
   benefits on the left, the argument on the right where the tiles used to be. */
.referral-band.explainer{grid-template-rows:auto 1fr;align-items:start}
.ref-explain{grid-area:1/2/3;align-self:center;max-width:820px;justify-self:start}
.ref-explain p{margin:0;color:#d4d4d4;font-size:19px;line-height:1.6;letter-spacing:-.015em}
@media (width <= 1050px){
  .referral-band.explainer .ref-benefits{grid-area:1/2}
  .referral-band.explainer .ref-explain{grid-area:2/1/auto/-1;margin-top:6px;max-width:none}
}
/* Single column here, so the benefits must come back to column 1 — the
   1050px rule above outranks the generic stacking rule and would otherwise
   leave a phantom second column. */
@media (width <= 700px){
  .referral-band.explainer .ref-benefits{grid-area:2/1}
  .referral-band.explainer .ref-explain{grid-area:3/1;margin-top:4px}
  .ref-explain p{font-size:15px}
}


/* ============================================================
   Website add-on band + scope blocks
   ============================================================ */
.addon-band{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  margin-top:20px;padding:28px 32px;
  background:#070809;color:#fff;border-radius:10px;
}
.addon-band h3{margin:10px 0 8px;font-size:24px;letter-spacing:-.03em}
.addon-band p{margin:0;max-width:620px;color:#c4c4c4;font-size:12px;line-height:1.6}
.addon-band .cta{flex:none}

.site-terms p{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.6;max-width:640px}
.site-terms ul{margin:0;padding:0}
.site-terms li{padding:7px 0;border-top:1px solid var(--line);font-size:12px;line-height:1.5}
.oos-line{margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.6;max-width:420px}
.oos-list{margin:0;padding:0}
.oos-list li{padding:9px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.oos-own{margin:22px 0 0;padding:16px;background:var(--white);border:1px solid var(--line);
  border-radius:8px;font-size:11px;line-height:1.6;color:var(--ink)}

@media (width <= 1050px){
  .package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .addon-band{flex-direction:column;align-items:flex-start;gap:22px}
}
@media (width <= 700px){
  .package-grid{grid-template-columns:1fr}
  .addon-band{padding:24px 20px}
  .addon-band h3{font-size:20px}
}


/* ============================================================
   The ESM System — three pillars
   ============================================================ */
.pillars-section{
  background:var(--white);padding:76px var(--gutter);
  border-bottom:1px solid var(--line);
}
/* The number sits ABOVE the headline rather than beside it, so the headline
   starts on the same left edge as the reel and the add-ons below. The
   pricing/industries pattern puts the number in its own column, which
   indents the headline 100px away from the content it introduces — fine
   where a grid follows immediately, wrong here. */
.pillars-section>.section-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  align-items:end;column-gap:56px;margin-bottom:34px;
}
.pillars-section>.section-intro>span{grid-column:1;grid-row:1}
.pillars-section>.section-intro h2{grid-column:1;grid-row:2;margin:6px 0 0;font-size:44px}
.pillars-section>.section-intro p{grid-column:2;grid-row:2;justify-self:end;margin:0}
.pillar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pillar{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:26px;
}
.pillar-num{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em}
.pillar-tag{display:block;margin:14px 0 6px;color:var(--red);font-size:11px;font-weight:850;letter-spacing:.06em}
.pillar h3{margin:0 0 12px;font-size:26px;letter-spacing:-.04em}
.pillar p{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.6}
.pillar ul{margin:0 0 20px;padding:14px 0 0;border-top:1px solid var(--line)}
.pillar li{padding:5px 0;font-size:11px}
.pillar-link{margin-top:auto;font-size:11px;font-weight:800}
.pillar-link span{color:var(--red)}
.pillar-link:hover{text-decoration:underline;text-underline-offset:3px}

@media (width <= 1050px){
  .pillars-section{padding:60px var(--gutter)}
  .pillars-section>.section-intro{grid-template-columns:1fr;align-items:start;gap:6px}
  .pillars-section>.section-intro h2,
  .pillars-section>.section-intro p{grid-column:1;grid-row:auto;justify-self:start}
  .pillars-section>.section-intro h2{font-size:32px}
  .pillars-section>.section-intro p{justify-self:start}
  .pillar-grid{grid-template-columns:1fr}
}
@media (width <= 700px){
  .pillars-section{padding:52px 18px}
  .pillar{padding:22px}
  .pillar h3{font-size:22px}
}

/* Seven analysis checks rather than five */
.benefit-row.seven{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.benefit-row.seven span{font-size:8px}
@media (width <= 1050px){ .benefit-row.seven{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} }
@media (width <= 700px){ .benefit-row.seven{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} }


/* ============================================================
   Service pages, services overview, about
   ============================================================ */
.svc-feature{
  display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  column-gap:56px;row-gap:20px;
  background:var(--white);padding:70px var(--gutter);
}
.svc-lead{margin:0;max-width:760px;font-size:20px;line-height:1.6;letter-spacing:-.015em}

.svc-lists{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  background:var(--paper);padding:70px var(--gutter);
  border-top:1px solid var(--line);
}
.svc-lists ul{margin:16px 0 0;padding:0}
.svc-lists li{padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.svc-lists p{margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.65}
.about-cols p{font-size:16px;color:var(--ink)}

/* ---- Service page: sample clips ---------------------------------
   Only the advertising page carries these. .work-cards is positioned for
   the homepage grid, so its grid-area is reset here where there is no
   parent grid to place it into. */
.svc-samples{
  background:var(--white);padding:56px var(--gutter);border-top:1px solid var(--line);
}
.svc-samples .section-intro{margin-bottom:26px}
.svc-samples .section-intro p{max-width:620px;color:var(--muted);font-size:13px;line-height:1.7}
.svc-samples .work-cards{
  grid-area:auto;justify-self:auto;
  /* There are exactly two tiles here. The homepage rules push .work-cards to
     three columns below 1050px, so the count is pinned explicitly rather than
     inherited, at every width. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:520px;margin:0 0 24px;gap:16px;
}
.svc-samples .cta{display:inline-flex}

.svc-note-cta{display:flex;flex-wrap:wrap;gap:10px;flex:none}
.svc-note-cta .cta{flex:none}

@media (max-width:700px){
  .svc-samples{padding:52px 18px}
  .svc-samples .work-cards{max-width:none;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-note-cta{width:100%}
  .svc-note-cta .cta{flex:1 1 auto;justify-content:center}
}

.svc-note{
  display:flex;align-items:center;justify-content:space-between;gap:44px;
  background:var(--white);padding:56px var(--gutter);border-top:1px solid var(--line);
}
.svc-note p{margin:0;max-width:680px;color:var(--muted);font-size:13px;line-height:1.7}
.svc-note .cta{flex:none}
.svc-note.diagnose{display:block;background:var(--paper)}
.svc-note.diagnose h2{margin:10px 0 12px;font-size:34px;letter-spacing:-.04em}
.svc-note.diagnose p{max-width:760px;font-size:15px;color:var(--muted)}

.svc-journey{background:var(--white);padding:70px var(--gutter);border-top:1px solid var(--line)}
.svc-journey .journey-flow{margin:34px 0 0}
/* .journey-item>b is the arrow rule from the homepage comparison — absolute,
   23px. It outranks a bare .journey-svc, so the service label has to match its
   specificity and reset the positioning. */
.journey-item>b.journey-svc{
  position:static;display:block;margin:6px 0 0;
  color:var(--muted);font-size:10px;font-weight:700;letter-spacing:0;
}
.svc-journey .journey-item>b.journey-svc{display:block}
.pillar-grid.four-up{grid-template-columns:repeat(4,minmax(0,1fr))}
.cap-note{margin-top:auto;color:var(--muted);font-size:10px;font-style:italic}

@media (width <= 1050px){
  .svc-feature{grid-template-columns:1fr}
  .svc-lists{grid-template-columns:1fr;gap:38px}
  .svc-note{flex-direction:column;align-items:flex-start;gap:24px}
  .pillar-grid.four-up{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (width <= 700px){
  .svc-feature,.svc-lists,.svc-note,.svc-journey{padding:52px 18px}
  .svc-lead{font-size:17px}
  .pillar-grid.four-up{grid-template-columns:1fr}
  .svc-journey .journey-flow{flex-direction:column;align-items:flex-start;gap:20px}
  .svc-journey .journey-item{text-align:left;display:flex;align-items:center;gap:14px}
  .svc-journey .journey-item .mini-icon{margin:0}
  .svc-journey .journey-item>b{display:none}
}


/* Advertising is the product; the other two are add-ons — the cards should say so */
.pillar-badge{
  display:inline-block;margin:12px 0 0;padding:4px 9px;border-radius:3px;
  background:var(--red);color:#fff;font-size:8px;font-weight:850;letter-spacing:.12em;
}
.pillar-badge.addon{background:0 0;color:var(--muted);border:1px solid var(--line)}

/* Add-ons presented as a pair beneath the tiers, not as peer products */
.addon-row{
  display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  gap:40px;align-items:start;margin-top:32px;padding-top:32px;border-top:1px solid var(--line);
}
.addon-head p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.addon-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:24px;
  display:flex;flex-direction:column}
.addon-card h3{margin:10px 0 8px;font-size:20px;letter-spacing:-.03em}
.addon-card h3 em{color:var(--red);font-style:normal;font-size:15px}
.addon-card p{margin:0 0 16px;color:var(--muted);font-size:12px;line-height:1.6}
.addon-card .pillar-link{margin-top:auto}

@media (width <= 1050px){ .addon-row{grid-template-columns:1fr;gap:24px} }
@media (width <= 700px){ .addon-grid{grid-template-columns:1fr} }


/* ---- Section 02 --------------------------------------------------
   One headline, then the work: a six-wide reel of real ads carries the
   whole section. The add-ons live in the pricing section, priced. */
/* The reel. Six 9:16 tiles — the same thumbs as /work, so the lightbox
   in main.js picks them up with no extra wiring. */
.engine-reel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.engine-reel .ref-thumb{border-radius:10px}
.engine-reel .ref-thumb strong{font-size:9px}
.reel-link{display:inline-flex;margin-top:26px}

.addon-head{margin:38px 0 14px}

@media (max-width:1050px){
  .engine-reel{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .engine-reel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}



/* Four pricing cards now: free entry + three advertising tiers */
.package-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.package.free{background:0 0;border-style:dashed}
.package.free h3{font-size:35px}
.package .cta + .cta{margin-top:8px}
.cta-white{
  background:var(--white);color:var(--ink);border:1px solid var(--line);
  font-weight:750;
}
.cta-white:hover{background:var(--paper);filter:none}
.package.featured .cta-white{background:0 0;color:#fff;border-color:#4a4a4a}
.package.featured .cta-white:hover{background:#1a1b1c}
@media (width <= 1050px){ .package-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (width <= 700px){ .package-grid{grid-template-columns:1fr} }


/* ============================================================
   Service page: reputation modules
   Ported from the ESM Reviews micro-site. The comparison table is the
   free analysis in miniature; the panel is the monthly report. Both
   carry sample figures and say so on-page.
   ============================================================ */
.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;
}

.rep-compare,.rep-panel{background:var(--white);padding:64px var(--gutter);border-top:1px solid var(--line)}
.rep-flow{background:var(--paper);padding:64px var(--gutter);border-top:1px solid var(--line)}
.rep-compare>.section-intro,.rep-flow>.section-intro,.rep-panel>.section-intro{margin-bottom:26px}
.rep-compare>.section-intro p,.rep-flow>.section-intro p,.rep-panel>.section-intro p{
  max-width:620px;font-size:13px;line-height:1.7;
}
.rep-note{display:block;margin-top:14px;color:var(--muted);font-size:11px;line-height:1.6;max-width:640px}

/* -- comparison table -- */
.cmp-wrap{overflow-x:auto}
.cmp{width:100%;min-width:620px;border-collapse:collapse;text-align:left}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}
.cmp thead th{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:750;border-bottom:1px solid var(--ink);
}
.cmp tbody th{font-weight:700}
.cmp td{font-variant-numeric:tabular-nums;color:var(--muted)}
.cmp tbody tr.is-you{background:var(--paper)}
.cmp tbody tr.is-you th{color:var(--red);padding-left:34px;position:relative}
.cmp tbody tr.is-you th::before{content:"\2605";position:absolute;left:15px;color:var(--red)}
.cmp tbody tr.is-you td{color:var(--ink);font-weight:650}

/* -- four-step flow -- */
.flow-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0}
.flow-row li{background:var(--white);border:1px solid var(--line);padding:22px 20px}
.flow-row b{display:block;font-size:11px;letter-spacing:.14em;color:var(--red);font-weight:800}
.flow-row h3{margin:13px 0 8px;font-size:17px;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.flow-row p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}

/* -- monthly report panel: always dark, to match the brand renders -- */
.rdash{background:var(--black);color:#fff;padding:22px;max-width:920px;border:1px solid #26272b}
.rdash-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px}
.rdash-head>div{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700}
.rdash-head small{font-size:9px;letter-spacing:.14em;color:#8a8b90;white-space:nowrap}
.g-mark{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:#fff;color:#4285f4;font-weight:900;font-size:14px;flex:none;
}
.rdash-metrics,.rdash-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rdash-metrics>div,.rdash-foot>div,.rdash-chart{background:#0d0e10;border:1px solid #26272b}
.rdash-metrics>div{padding:15px;display:flex;flex-direction:column}
.rdash-metrics span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8d8e93}
.rdash-metrics strong{font-size:30px;letter-spacing:-.04em;margin:9px 0 4px;font-variant-numeric:tabular-nums}
.rdash-metrics small{font-size:10px;color:var(--red)}
.rdash-chart{margin-top:8px;padding:16px}
.rdash-chart-head{display:flex;justify-content:space-between;font-size:10px;color:#96979c}
.rdash-chart-head strong{color:var(--red)}
.rdash-bars{height:130px;display:flex;align-items:flex-end;gap:6px;border-bottom:1px solid #28292d;padding-top:10px}
.rdash-bars i{flex:1;background:linear-gradient(180deg,var(--red),#5c1116);min-height:6px}
.rdash-axis{display:flex;justify-content:space-between;font-size:9px;color:#65666b;margin-top:8px}
.rdash-foot{margin-top:8px}
.rdash-foot>div{padding:13px;display:flex;flex-direction:column}
.rdash-foot span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#77787d}
.rdash-foot b{font-size:17px;margin-top:7px}
.rdash-foot .ok{color:var(--red)}

@media (width <= 900px){ .flow-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (width <= 620px){
  .flow-row{grid-template-columns:1fr}
  .rdash-metrics,.rdash-foot{grid-template-columns:1fr}
  .rdash-head{flex-direction:column;align-items:flex-start;gap:8px}
}


/* ---- Section 01, paired with its render ---------------------------
   This was a 761px full-bleed band — 22% of the advertising page — with no
   headline, caption or link. Sat beside the copy it costs half the scroll
   and reads as evidence for the sentence instead of decoration. */
.svc-feature.paired{
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;column-gap:56px;row-gap:30px;
}
.svc-feature.paired .svc-feature-copy{min-width:0}
.svc-feature.paired .section-intro{margin-bottom:16px}
.svc-feature.paired .svc-lead{max-width:none;font-size:17px;line-height:1.65}
.svc-feature-art{display:block;min-width:0;line-height:0}
.svc-feature-art img{width:100%;height:auto;border-radius:10px}
@media (width <= 900px){
  .svc-feature.paired{grid-template-columns:minmax(0,1fr)}
  .svc-feature.paired .svc-lead{font-size:16px}
}


/* ---- Currency toggle ---------------------------------------------
   Only rendered when every product has both a USD and a CAD Payment
   Link, so there is never a currency on screen we cannot charge. */
.cur-toggle{
  display:inline-flex;width:max-content;border:1px solid var(--line);
  border-radius:999px;overflow:hidden;background:var(--white);
}
/* The pricing intro is a 2-column grid with an empty top-right cell. Left to
   auto-placement the toggle landed there stretched to the full 400px column,
   floating above the paragraph. Pin it: top-right, baseline with the number. */
.pricing-section>.section-intro>.cur-toggle{
  grid-column:2;grid-row:1;justify-self:end;align-self:end;
}
/* The shared 330px cap squeezed this into four tight lines inside a 400px
   column. Let it use the column and open the leading up. */
.industry-section>.section-intro p,
.pricing-section>.section-intro p{max-width:none;font-size:13px;line-height:1.8}

.pkg-hero .cur-toggle{margin-top:14px}
.cur-toggle button{
  padding:5px 14px;font-size:10px;font-weight:800;letter-spacing:.1em;
  color:var(--muted);cursor:pointer;transition:background .15s,color .15s;
}
.cur-toggle button[aria-pressed=true]{background:var(--red);color:#fff}
.cur-toggle button:not([aria-pressed=true]):hover{color:var(--ink)}
.pkg-hero .cur-toggle{background:0 0;border-color:#3a3b3d}
.pkg-hero .cur-toggle button{color:#9a9b9f}
.pkg-hero .cur-toggle button:not([aria-pressed=true]):hover{color:#fff}


/* The intro grid's second column is a rigid 400px, so as the page narrows the
   headline column is what shrinks: at 800px the h2 had 249px and wrapped to
   five lines while the paragraph beside it had 400px. Stack them well before
   that, and re-cap the paragraph — `max-width:none` is only safe inside the
   400px column. */
@media (width <= 1080px){
  .industry-section>.section-intro,.pricing-section>.section-intro{display:block}
  .industry-section>.section-intro h2,.pricing-section>.section-intro h2{max-width:20ch}
  .industry-section>.section-intro p,.pricing-section>.section-intro p{
    max-width:560px;margin-top:16px;
  }
  .pricing-section>.section-intro>.cur-toggle{margin-top:20px}
}