/* Gilbey. — service pages.
   Shared by the four service subpages. There is no services landing page:
   the Services nav tab just opens the dropdown. base.css carries the
   chrome (tokens, type, buttons, nav, footer, reveal, image slots); this file
   is only the furniture those five pages have in common.                     */
/* ---- Wide layouts -------------------------------------------------------
   These pages are mostly one column of text, which left a dead right half on
   a desktop screen. From 900px up the heading and its supporting copy sit
   side by side instead, so a section uses the width it has.                 */
/* nowrap: the hero aside narrows to ~315px on a mid-size window and the
   longest label ("Start with the external audit") broke onto two lines.
   The button is 315px flat out, which still fits the narrowest column it
   ever gets, so it can simply refuse to wrap. */
.page-hero__cta{margin-top:clamp(26px,3vw,40px);white-space:nowrap}
/* on a 341px phone the column is 290px and the 315px button hangs 25px off
   the edge, so below 420px it trims its padding and type rather than wrap */
@media (max-width:420px){
  .page-hero__cta{padding-left:18px;padding-right:18px;font-size:15px}
}
/* Below 400px even the trimmed button is too wide for the longest label
   ("Talk to us about your quiet night" measured 308px in a 316px gutter). Now
   that html clips horizontal overflow, an over-wide button would be sliced
   rather than merely hanging out, so here it is allowed to wrap after all. */
@media (max-width:400px){
  .page-hero__cta{white-space:normal;text-align:center}
}

@media (min-width:900px){
  /* the grid lives on the inner wrap now — .page-hero holds the image layer */
  .page-hero__inner{
    display:grid;grid-template-columns:1.05fr .95fr;
    gap:clamp(30px,5vw,80px);align-items:end;
  }
  .page-hero h1{grid-column:1;margin-bottom:0;max-width:none}
  .page-hero__aside{grid-column:2}
  .page-hero .lede{max-width:46ch}
  .page-hero__cta{margin-top:clamp(22px,2.4vw,32px)}
}

/* ---- Jump links ---- */
.jumps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(28px,3.4vw,44px);
}
.jumps a{
  display:block;background:var(--paper);padding:18px 20px 22px;
  transition:background .18s var(--ease),transform .35s var(--spring);
}
.jumps a:hover{background:var(--pink-soft);transform:translateY(-2px)}
.jumps b{
  display:block;font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(15.5px,1.4vw,19px);line-height:1.2;
}
.jumps span{display:block;margin-top:5px;font-size:13px;color:var(--ink-45)}

/* ---- Shared service section furniture ---- */
.svc__head{margin-bottom:clamp(30px,4vw,52px)}
.svc__head h2{max-width:16ch}
@media (min-width:900px){
  .svc__head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:end}
  .svc__head .lede{max-width:44ch}
}
.svc__head h2{font-size:clamp(30px,4vw,54px);margin-bottom:.3em}
.svc__head .lede{max-width:52ch}
.svc__head .lede strong{color:var(--ink);font-weight:700}
.svc__foot{
  margin:clamp(26px,3.2vw,40px) 0 0;max-width:70ch;
  font-size:clamp(16px,1.3vw,19px);line-height:1.65;color:var(--ink-70);
}
.svc__foot strong{color:var(--ink);font-weight:700}
.svc__foot a,.svc__price a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:3px}
.svc .btn{margin-top:clamp(22px,2.6vw,32px)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:start}
/* h2 as well as h3: "The job." was removed, so these headings had to step
   up a level to keep the outline from jumping h1 -> h3 */
/* h2 as well as h3: "The job." was removed from the Marketing Management page,
   so its column headings stepped up a level to stop the outline jumping
   h1 -> h3. Both render identically. */
.cols h3,.cols h2{
  font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(19px,1.9vw,26px);margin:0 0 .6em;
}
.cols p{margin:0 0 1em;font-size:clamp(16px,1.3vw,18.5px);line-height:1.65;color:var(--ink-70)}
.cols p:last-child{margin-bottom:0}
.cols strong{color:var(--ink);font-weight:700}
.svc__price{font-size:16px;color:var(--ink-70)}
@media (max-width:820px){.cols{grid-template-columns:1fr}}

/* ---- Ticks (same list style as the homepage comparison) ---- */
.ticks{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:14px}
.ticks li{position:relative;padding-left:30px;font-size:16px;line-height:1.55;color:var(--ink-70)}
.ticks li::before{
  content:'\2713';position:absolute;left:0;top:0;color:var(--pink-ink);font-weight:700;
}

/* ---- Audit sections (marketing-audits.html) ----
   One section each for the external and internal audit: a head carrying the
   name and the price, then "What it is" beside "How it works".              */
.audit-sec__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,60px);
  margin-bottom:clamp(28px,3.4vw,44px);
}
.audit-sec__head > div:first-child{flex:1 1 auto}
.audit-sec__head .btn{margin-top:clamp(20px,2.4vw,30px)}
.audit-sec__cat{margin:0;width:clamp(120px,17vw,230px);flex:0 0 auto}
.audit-sec__cat img{width:100%;height:auto;display:block}
@media (max-width:700px){
  .audit-sec__head{flex-direction:column;align-items:flex-start}
  .audit-sec__cat{width:min(46vw,190px);align-self:flex-end;margin-top:-10px}
}
.audit-sec__tag{
  margin:0;font-family:var(--display);font-weight:900;
  font-size:clamp(14px,1.2vw,16.5px);letter-spacing:-.02em;
  color:var(--pink-ink);
}
.audit-sec__head h2{font-size:clamp(30px,4vw,54px);margin:.2em 0 .25em}
.audit-sec__fig{
  margin:0;font-family:var(--display);font-weight:900;letter-spacing:-.04em;line-height:1;
  font-size:clamp(30px,3.6vw,48px);
}
.audit-sec__fig small{
  display:block;margin-top:10px;font-family:var(--body);font-weight:500;
  font-size:13.5px;letter-spacing:0;color:var(--ink-45);
}
.audit-sec__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:start}
.audit-sec__cols h3{
  font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(19px,1.9vw,26px);margin:0 0 .7em;
}
.audit-sec__cols > div > p{margin:0 0 1.4em;font-size:16px;line-height:1.65;color:var(--ink-70)}
.audit-sec__cols strong{color:var(--ink);font-weight:700}
@media (max-width:820px){.audit-sec__cols{grid-template-columns:1fr}}

/* numbered steps */
.steps-list{list-style:none;counter-reset:s;margin:0 0 clamp(22px,2.6vw,32px);padding:0;display:grid;gap:18px}
.steps-list li{
  counter-increment:s;position:relative;padding-left:46px;
  font-size:16px;line-height:1.6;color:var(--ink-70);
}
.steps-list li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:-.02em;
  color:var(--ink);background:var(--pink);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
}
.steps-list b{color:var(--ink);font-weight:700}

/* the locked CTA: greyed and padlocked, but it does open the explanation */
.btn--locked{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;font:inherit;font-weight:700;font-size:15px;
  background:var(--paper-2);color:var(--ink-45);
  border:2px dashed var(--line);cursor:pointer;user-select:none;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.btn--locked:hover{border-color:var(--pink);color:var(--ink);background:var(--pink-soft)}
.btn__lock{width:17px;height:17px;flex:0 0 auto}
.audit-sec__gate{
  margin:16px 0 0;max-width:42ch;
  font-size:13.5px;line-height:1.6;color:var(--ink-45);
}
.audit-sec__foot{margin-top:clamp(30px,3.6vw,48px)}
.audit-sec__more{margin:16px 0 0;font-size:14.5px}
.audit-sec__more a{
  color:var(--pink-ink);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
}
.audit-sec__more a:hover{color:var(--ink)}

/* the external audit reads as one centred column: the name, the asterisk that
   qualifies it, the CTA, then the detail underneath. Lists stay left-aligned
   inside a centred block, because centred bullets are unreadable.           */
.audit-sec--mid .audit-sec__head{flex-direction:column;align-items:center;text-align:center}
.audit-sec--mid .audit-sec__head > div:first-child{flex:0 1 auto}
.audit-sec--mid .audit-sec__cat{order:-1;align-self:center;margin-bottom:clamp(2px,.8vw,12px)}
.audit-sec--mid .audit-sec__cols{max-width:960px;margin-inline:auto;text-align:center}
.audit-sec--mid .audit-sec__cols > div > p{margin-inline:auto;max-width:50ch}
.audit-sec--mid .ticks,
.audit-sec--mid .steps-list{display:inline-grid;text-align:left;max-width:46ch}
.audit-sec--mid .audit-sec__foot{text-align:center}
.astr{color:var(--pink-ink);font-weight:900}
h2 .astr{font-size:.46em;vertical-align:super;line-height:0;margin-left:.06em}
.audit-sec__note{
  margin:0 0 4px;font-size:14px;line-height:1.6;color:var(--ink-45);
}

/* the closing summary: the two audits in one breath, then the one link out */
.summary{
  margin-top:clamp(34px,4.4vw,64px);padding-top:clamp(28px,3.4vw,44px);
  border-top:2px solid var(--ink);
}
.summary p{max-width:56ch}
@media (min-width:900px){
  /* one gap value was spacing the paragraphs 80px apart — rows are their own */
  .summary{
    display:grid;grid-template-columns:.8fr 1.2fr;
    column-gap:clamp(30px,5vw,80px);row-gap:clamp(14px,1.8vw,24px);align-items:start;
  }
  .summary h3{grid-column:1;grid-row:1;margin:0}
  .summary__copy{grid-column:2;grid-row:1/span 2}
  .summary__cat{grid-column:1;grid-row:2;justify-self:start;margin:0}
  .summary p{max-width:52ch}
}
.summary h3{
  font-family:var(--display);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(24px,2.8vw,38px);margin:0 0 .5em;
}
.summary p{margin:0 0 1em;font-size:clamp(16.5px,1.4vw,19px);line-height:1.6;color:var(--ink-70)}
.summary strong{color:var(--ink);font-weight:700}
.summary__cta{margin:clamp(18px,2.2vw,28px) 0 0}
.summary__cta a{
  font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(19px,2vw,27px);color:var(--ink);
  background-image:linear-gradient(var(--pink),var(--pink));
  background-repeat:no-repeat;background-position:0 88%;background-size:100% 34%;
  transition:background-size .35s var(--ease);
}
.summary__cta a:hover{background-size:100% 100%}
.summary__copy p:last-child{margin-bottom:0}
.summary__cat{margin:clamp(22px,3vw,34px) 0 0;width:clamp(140px,19vw,225px)}
.summary__cat img{width:100%;height:auto;display:block}

/* ---- Portfolio grid ---- */
.shots{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);
  margin-bottom:clamp(30px,4vw,52px);
}
.shots__item{margin:0;overflow:hidden;background:var(--paper)}
.shots__item img{transition:transform .6s var(--ease)}
.shots__item:hover img{transform:scale(1.04)}
.shots__item--wide{grid-column:span 2}
@media (max-width:760px){
  .shots{grid-template-columns:1fr 1fr}
  .shots__item--wide{grid-column:span 2}
}

/* ---- Enquiry form: same as the homepage's ---- */
.partner__form textarea{
  background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.28);
  color:var(--paper);padding:11px 2px;font-size:16px;font-family:var(--body);
  transition:border-color .2s var(--ease);resize:vertical;
}
.partner__form textarea::placeholder{color:rgba(255,255,255,.3);opacity:1}
.partner__form textarea:focus{outline:none;border-bottom-color:var(--pink)}

/* ---- Clients (social-media-management.html) ----
   A row of client chips over one live Instagram frame. Instagram's own
   /{handle}/embed endpoint needs no key, so the grid is the real thing.     */
.client-tabs{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:clamp(24px,3vw,38px);
}
.client-tab{
  border:2px solid var(--line);background:var(--paper);cursor:pointer;
  padding:12px 18px 13px;text-align:left;font:inherit;
  transition:border-color .2s var(--ease),transform .35s var(--spring),background .2s var(--ease);
}
.client-tab:hover{transform:translateY(-2px);border-color:var(--pink)}
.client-tab b{
  display:block;font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(15px,1.3vw,18px);line-height:1.15;color:var(--ink);
}
.client-tab span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-45)}
.client-tab.is-on{background:var(--pink);border-color:var(--pink)}
.client-tab.is-on span{color:rgba(33,33,33,.62)}

.client-stage__frame{
  position:relative;max-width:520px;min-height:640px;
  border:1px solid var(--line);background:var(--paper);
}
.client-stage__frame iframe{
  display:block;width:100%;height:640px;border:0;
}
.client-stage__frame iframe[hidden]{display:none}

/* the facade: what stands in for the embed until someone asks for it */
.client-stage__play{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:0;background:var(--paper-2);cursor:pointer;font:inherit;
  transition:background .2s var(--ease);
}
.client-stage__play:hover{background:var(--pink-soft)}
.client-stage__play[hidden]{display:none}
.client-stage__icon svg{width:44px;height:44px;color:var(--pink-ink)}
.client-stage__play b{
  font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(17px,1.6vw,21px);color:var(--ink);
}
.client-stage__play span[data-client-handle]{font-size:13.5px;color:var(--ink-45)}

/* a cat either side of the section */
.clients__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,60px);
  margin-bottom:clamp(26px,3.2vw,42px);
}
.clients__head .lede{max-width:46ch;margin:0 0 1em}
.clients__head .lede:last-child{margin-bottom:0}
.clients__head .lede strong{color:var(--ink);font-weight:700}
.clients__cat{margin:0;width:clamp(110px,15vw,210px);flex:0 0 auto}
.clients__cat img{width:100%;height:auto;display:block}
.svc__cat{
  float:right;width:clamp(110px,15vw,200px);margin:0 0 20px clamp(20px,3vw,44px);
}
.svc__cat img{width:100%;height:auto;display:block}
@media (max-width:700px){
  .clients__head{flex-direction:column;align-items:flex-start}
  .clients__cat{width:min(42vw,170px);align-self:flex-end}
  .svc__cat{float:none;width:min(42vw,170px);margin:0 0 18px auto}
}
.client-stage__note{
  margin:14px 0 0;font-size:13.5px;color:var(--ink-45);
}
.client-stage__note a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){
  .client-tabs{gap:8px}
  .client-tab{padding:10px 14px 11px}
  .client-stage__frame iframe{height:560px}
}

/* external audit carries no price line, just the terms under it */
.audit-sec__fig--none{font-size:0;margin-top:14px}
.audit-sec__fig--none small{margin-top:0;font-size:14px}

/* ---- The gate (marketing-management.html) ----
   One statement, set large, with a lot of air around it. The point is that it
   reads as a door you have to earn, not a section of a brochure.           */
.gate-sec{padding:clamp(72px,10vw,150px) 0}
.gate-sec__inner{max-width:none}
@media (min-width:900px){
  .gate-sec__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,84px);align-items:start}
  .gate-sec__lead{grid-column:1;grid-row:1/span 3;margin:0}
  .gate-sec__body{grid-column:2;max-width:46ch}
  .gate-sec .btn{grid-column:2;justify-self:start}
}
.gate-sec__lead{
  font-family:var(--display);font-weight:900;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(34px,5.4vw,74px);color:var(--paper);margin:0 0 .55em;
  max-width:18ch;
}
.gate-sec__body{
  max-width:52ch;margin:0 0 1.1em;
  font-size:clamp(16.5px,1.4vw,19.5px);line-height:1.65;color:rgba(255,255,255,.72);
}
.gate-sec__body strong{color:var(--paper);font-weight:700}
.gate-sec .btn{margin-top:clamp(18px,2.4vw,30px)}

.section--ink .cols h3,.section--ink .cols h2{color:var(--paper)}
.section--ink .cols p{color:rgba(255,255,255,.72)}
.section--ink .cols strong{color:var(--paper)}
.section--ink .svc__head .lede strong{color:var(--paper)}

/* ---- About Jonny + the photography model (photography.html) ---- */
.about{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.about__shot{margin:0}
.about__shot img{width:100%;height:auto;display:block}
.about__copy h2{font-size:clamp(28px,3.6vw,48px);margin:0 0 .5em}
.about__copy p{margin:0 0 1.1em;font-size:clamp(16.5px,1.4vw,19px);line-height:1.65;color:var(--ink-70)}
.about__copy p:last-child{margin-bottom:0}
.about__copy strong{color:var(--ink);font-weight:700}
@media (max-width:760px){
  .about{grid-template-columns:1fr}
  .about__shot{max-width:320px}
}

.model{max-width:none}
.model h2{max-width:14ch}
.model p{max-width:58ch}
@media (min-width:900px){
  .model{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
  .model h2{grid-column:1;grid-row:1/span 4;margin:0}
  .model p{grid-column:2;max-width:56ch}
}
.model h2{font-size:clamp(28px,3.6vw,48px);margin:0 0 .6em}
.model p{margin:0 0 1.2em;font-size:clamp(16.5px,1.4vw,19px);line-height:1.7;color:var(--ink-70)}
.model p:last-child{margin-bottom:0}
.model strong{color:var(--ink);font-weight:700}
.model a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:3px}

/* ---- Legal pages ---- */
.legal{max-width:68ch;margin-bottom:clamp(40px,5vw,72px)}
.legal:last-child{margin-bottom:0}
.legal h2{font-size:clamp(28px,3.4vw,44px);margin:0 0 .7em}
.legal h3{
  font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(17px,1.6vw,21px);margin:1.8em 0 .5em;
}
.legal h3:first-of-type{margin-top:0}
.legal p{margin:0 0 1em;font-size:16px;line-height:1.7;color:var(--ink-70)}
.legal a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:3px}
.legal__stamp{margin-top:2em;font-size:13.5px;color:var(--ink-45)}

/* ---- Community impact ----
   One page, one row per organisation. Spark's logo is supplied white, so it
   sits on a charcoal tile rather than being recoloured — it is their mark,
   not ours to restyle.                                                      */
.orgs{display:grid;gap:clamp(30px,3.8vw,54px)}
.org{
  display:grid;grid-template-columns:clamp(150px,19vw,220px) 1fr;
  gap:clamp(24px,4vw,64px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(28px,3.6vw,48px);
}
.org:first-child{border-top:0;padding-top:0}
/* no backing: the two white marks were recoloured to ink so they stand on
   the page as themselves, rather than sitting in a charcoal box */
.org__logo{margin:0;display:grid;align-items:center}
.org__logo img{width:100%;height:auto;display:block}
/* each kicker takes that organisation's own colour, so the line above the
   name matches the logo beside it. Set per article as --org-accent. */
.org__kicker{
  margin:0 0 .5em;font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(14px,1.2vw,16.5px);color:var(--org-accent,var(--pink-ink));
}
.org__link a{--sweep:var(--org-accent,var(--pink))}
.org__copy h3{
  font-family:var(--display);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(24px,2.8vw,38px);margin:0 0 .55em;
}
.org__copy p{margin:0 0 1.1em;font-size:clamp(16px,1.35vw,18.5px);line-height:1.65;color:var(--ink-70)}
/* after .org__copy p, so the accent is not overridden by it */
.org__copy p.org__kicker{color:var(--org-accent,var(--pink-ink));font-size:clamp(14px,1.2vw,16.5px)}
.org__copy strong{color:var(--ink);font-weight:700}
.org__link{margin:0}
.org__link a{
  font-weight:700;font-size:15.5px;color:var(--ink);
  background-image:linear-gradient(var(--sweep,var(--pink)),var(--sweep,var(--pink)));
  background-repeat:no-repeat;background-position:0 92%;background-size:100% 2px;
  transition:background-size .3s var(--ease);
}
.org__link a:hover{background-size:100% 34%}
.org__link a:hover .btn__arrow{transform:translateX(4px)}
/* the closing block gets a cat floated in from the left */
.community__cat{
  float:left;width:clamp(120px,15vw,210px);
  margin:0 clamp(24px,3.4vw,52px) 18px 0;
}
.community__cat img{width:100%;height:auto;display:block}
.community__cat .img-slot.is-empty::after,
.community__cat.is-empty::after{
  border-color:rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.65);
}
@media (max-width:700px){
  .org{grid-template-columns:1fr;gap:20px}
  .org__logo{max-width:200px}
  .community__cat{float:none;width:min(42vw,170px);margin:0 0 18px}
}

/* ---- Legal pages ---- */
.legal{max-width:68ch;margin-bottom:clamp(40px,5vw,72px)}
.legal:last-child{margin-bottom:0}
.legal h2{font-size:clamp(28px,3.4vw,44px);margin:0 0 .7em}
.legal h3{
  font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(17px,1.6vw,21px);margin:1.8em 0 .5em;
}
.legal h3:first-of-type{margin-top:0}
.legal p{margin:0 0 1em;font-size:16px;line-height:1.7;color:var(--ink-70)}
.legal a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:3px}
.legal__stamp{margin-top:2em;font-size:13.5px;color:var(--ink-45)}

/* ---- Community impact ----
   Hub: a card per organisation. Subpage: logo beside what we do for them.   */
.page-hero__eyebrow{margin:0 0 .6em}
.page-hero__eyebrow a{
  font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(14px,1.2vw,16.5px);color:var(--pink-ink);
}
.page-hero__eyebrow a:hover{text-decoration:underline;text-underline-offset:3px}

.org-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.org-card{
  display:block;background:var(--paper);padding:clamp(24px,2.8vw,36px);
  transition:background .18s var(--ease);
}
.org-card:hover{background:var(--pink-soft)}
.org-card__logo{display:block;max-width:170px;margin-bottom:clamp(18px,2.2vw,28px)}
.org-card__logo img{width:100%;height:auto;display:block}
.org-card__kicker{
  display:block;font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:14px;color:var(--pink-ink);
}
.org-card b{
  display:block;margin:.35em 0 .9em;
  font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(20px,2.1vw,27px);line-height:1.15;color:var(--ink);
}
.org-card__go{display:block;font-weight:700;font-size:14.5px;color:var(--ink)}
.org-card:hover .btn__arrow{transform:translateX(4px)}

.org-page{display:grid;grid-template-columns:clamp(170px,24vw,300px) 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.org-page__logo{margin:0}
.org-page__logo img{width:100%;height:auto;display:block}
.org-page__copy h2{font-size:clamp(26px,3vw,40px);margin:0 0 .6em}
.org-page__copy p{margin:0 0 1.1em;font-size:clamp(16.5px,1.4vw,19px);line-height:1.7;color:var(--ink-70)}
.org-page__copy p:last-child{margin-bottom:0}
.org-page__copy strong{color:var(--ink);font-weight:700}
.org__pending{color:var(--ink-45);font-style:italic}
@media (max-width:760px){
  .org-page{grid-template-columns:1fr;gap:22px}
  .org-page__logo{max-width:220px}
}

/* ---- "What is a marketing audit?" (marketing-audits.html) ---- */
.explainer h2{font-size:clamp(30px,4.2vw,58px);margin:0 0 .5em}
.explainer__copy p{
  margin:0 0 1.2em;font-size:clamp(16.5px,1.4vw,19.5px);line-height:1.7;color:var(--ink-70);
  max-width:58ch;
}
.explainer__copy p:last-child{margin-bottom:0}
.explainer__copy strong{color:var(--ink);font-weight:700}
.explainer--next{
  margin-top:clamp(34px,4.4vw,64px);padding-top:clamp(30px,3.8vw,52px);
  border-top:1px solid var(--line);
}
.explainer__copy .ticks{margin:0 0 1.4em;max-width:58ch}

/* the second block sits under the first but starts at the left of the page,
   so the section steps back out to the grid edge rather than staying in the
   right-hand column */
.explainer__second{margin-top:clamp(28px,3.4vw,44px);max-width:62ch}
.explainer__second p{
  margin:0 0 1.2em;font-size:clamp(16.5px,1.4vw,19.5px);line-height:1.7;color:var(--ink-70);
}
.explainer__second p:last-child{margin-bottom:0}
.explainer__second strong{color:var(--ink);font-weight:700}
.explainer__second .ticks{margin:0 0 1.4em}
.explainer__second .ticks li{font-size:clamp(15.5px,1.3vw,18px);line-height:1.6}
.explainer__second .btn{margin-top:clamp(6px,1vw,12px)}
.explainer__copy .ticks li{font-size:clamp(15.5px,1.3vw,18px);line-height:1.6}
@media (min-width:900px){
  .explainer{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
  .explainer h2{margin:0}
  .explainer__copy p{max-width:54ch}
  .explainer__copy .ticks{max-width:54ch}
  .explainer__second{grid-column:1/-1}

  /* flipped: copy on the left, the question set against the right of the page */
  .explainer--flip{grid-template-columns:1.15fr .85fr}
  .explainer--flip h2{grid-column:2;grid-row:1;text-align:right}
  .explainer--flip .explainer__copy{grid-column:1;grid-row:1}
}

/* in-page jumps: marked with the brand sweep so they read as links without
   turning the paragraph blue */
.jump{
  color:var(--ink);font-weight:700;
  background-image:linear-gradient(var(--pink),var(--pink));
  background-repeat:no-repeat;background-position:0 92%;background-size:100% 2px;
  transition:background-size .3s var(--ease);
}
.jump:hover,.jump:focus-visible{background-size:100% 36%}

/* ---- Modal (audits page) ---- */
.modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__veil{position:absolute;inset:0;background:rgba(33,33,33,.58);opacity:0;transition:opacity .3s var(--ease)}
.modal__card{
  position:relative;width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;
  background:var(--paper);color:var(--ink);
  padding:clamp(26px,3.4vw,42px) clamp(22px,3vw,38px) clamp(22px,2.8vw,32px);
  box-shadow:0 26px 70px rgba(33,33,33,.3);
  opacity:0;transform:translateY(20px);
  transition:opacity .35s var(--ease),transform .5s var(--spring);
}
.modal.is-in .modal__veil{opacity:1}
.modal.is-in .modal__card{opacity:1;transform:none}
.modal__card h2{font-size:clamp(27px,3.4vw,40px);margin:0 0 .5em}
.modal__lede{margin:0 0 1em;font-size:16px;line-height:1.6;color:var(--ink-70)}
.modal__x{
  position:absolute;top:8px;right:10px;width:54px;height:54px;
  border:0;background:transparent;color:var(--ink);font-size:40px;line-height:1;
  cursor:pointer;border-radius:50%;transition:background .2s var(--ease),transform .3s var(--spring);
}
.modal__x:hover{background:var(--pink-soft);transform:rotate(90deg)}
.modal__form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(18px,2.2vw,26px)}
.modal__form .field label{color:var(--ink-45)}
.modal__form .field input,.modal__form .field textarea{
  background:transparent;border:0;border-bottom:2px solid var(--line);
  color:var(--ink);padding:11px 2px;font-size:16px;font-family:var(--body);resize:vertical;
  transition:border-color .2s var(--ease);
}
.modal__form .field input::placeholder,.modal__form .field textarea::placeholder{color:rgba(33,33,33,.32);opacity:1}
.modal__form .field input:focus,.modal__form .field textarea:focus{outline:none;border-bottom-color:var(--pink)}
.modal__form .form-status{color:var(--ink-70)}
.modal__form .form-status[data-state='err']{color:var(--pink-ink)}
.modal__form .form-status[data-state='ok']{color:#1f8a4c}
@media (max-width:560px){.modal{padding:12px}.modal__form{grid-template-columns:1fr}}

/* ---- Case study (attic-case-study.html) ---------------------------------
   The client's lockup and the headline numbers, then the write-up below.    */
.cs-head{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(16px,2.4vw,30px)}
.cs-head__logo{display:block;width:clamp(120px,15vw,180px);flex:0 0 auto}
.cs-head__logo img{width:100%;height:auto;display:block}
.cs-head__who b{
  display:block;font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(19px,1.9vw,26px);line-height:1.15;
}
.cs-head__who > span{display:block;margin-top:5px;font-size:15px;color:var(--ink-45)}
.cs-head__date{margin:0 0 0 auto;font-size:13.5px;color:var(--ink-45)}

.cs-stats{
  list-style:none;margin:clamp(28px,3.6vw,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px);
}
.cs-stats li{border-top:2px solid var(--ink);padding-top:14px}
.cs-stats b{
  display:block;font-family:var(--display);font-weight:900;letter-spacing:-.045em;line-height:1;
  font-size:clamp(34px,4.6vw,64px);
}
.cs-stats span{display:block;margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--ink-70)}
@media (max-width:640px){
  .cs-stats{grid-template-columns:1fr}
  .cs-head__date{margin-left:0;width:100%}
}

.cs-shot{margin:0 0 clamp(26px,3.4vw,44px);max-width:760px}
.cs-shot img{width:100%;height:auto;display:block}

/* ---- Social pricing guide (social-media-management.html) -----------------
   Two sets of controls on the left, the figure and a track on the right. It
   is a guide, so the number is deliberately soft-edged, not a quote.        */
.calc{
  display:grid;gap:clamp(26px,3.6vw,56px);align-items:start;
  padding:clamp(24px,3vw,40px);background:var(--paper);border:2px solid var(--ink);
}
@media (min-width:900px){.calc{grid-template-columns:1.15fr .85fr}}

.calc__controls{display:grid;gap:clamp(22px,2.8vw,34px)}
.calc__group{margin:0;padding:0;border:0;min-width:0}
.calc__group legend{
  padding:0;margin:0 0 14px;
  font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(17px,1.6vw,21px);color:var(--ink);
}
.calc__hint{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-45);max-width:48ch}

.calc__chips{display:flex;flex-wrap:wrap;gap:9px}
.calc__chip{
  font:inherit;font-weight:700;font-size:14.5px;cursor:pointer;
  padding:10px 17px;border:2px solid var(--line);background:var(--paper);color:var(--ink-45);
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease),transform .3s var(--spring);
}
.calc__chip:hover{border-color:var(--ink);color:var(--ink)}
.calc__chip.is-on{background:var(--pink);border-color:var(--pink);color:var(--ink);transform:translateY(-2px)}

.calc__seg{display:grid;gap:9px}
.calc__segbtn{
  font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;text-align:left;
  padding:13px 17px;border:2px solid var(--line);background:var(--paper);color:var(--ink-70);
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.calc__segbtn:hover{border-color:var(--ink);color:var(--ink)}
.calc__segbtn.is-on{border-color:var(--ink);background:var(--ink);color:var(--paper);font-weight:700}

.calc__out{display:flex;flex-direction:column;justify-content:flex-start}
.calc__figure{
  margin:0;display:flex;align-items:baseline;gap:.4em;
  font-family:var(--display);font-weight:900;letter-spacing:-.045em;line-height:1;
  font-size:clamp(46px,6.4vw,86px);
}
.calc__figure small{
  font-family:var(--body);font-weight:500;letter-spacing:0;
  font-size:clamp(14px,1.2vw,16px);color:var(--ink-45);
}
.calc__track{
  position:relative;height:8px;margin:clamp(20px,2.4vw,30px) 0 0;
  background:var(--paper-2);border:2px solid var(--ink);
}
.calc__fill{
  position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pink);
  transition:width .45s var(--ease);
}
.calc__pin{
  position:absolute;top:50%;left:0;width:20px;height:20px;background:var(--ink);
  border:3px solid var(--paper);border-radius:50%;
  transform:translate(-50%,-50%);
  transition:left .45s var(--spring);
}
.calc__scale{
  display:flex;justify-content:space-between;margin-top:11px;
  font-size:12.5px;color:var(--ink-45);
}
.calc__read{
  margin:clamp(18px,2.2vw,26px) 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-70);
  max-width:38ch;
}
.calc__ask{margin-top:clamp(20px,2.4vw,28px);align-self:flex-start}

/* the rules behind the number, in the space under the controls: this is the
   reasoning, not another control, so it sits on the tint and is numbered */
.calc__how{
  grid-column:1/-1;margin-top:clamp(2px,.8vw,10px);
  padding-top:clamp(20px,2.4vw,28px);border-top:2px solid var(--ink);
}
.calc__how h3{
  margin:0 0 14px;font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(16px,1.45vw,19px);color:var(--ink);
}
.calc__rules{
  list-style:none;counter-reset:cr;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,34px);
}
@media (max-width:760px){.calc__rules{grid-template-columns:1fr;gap:14px}}
.calc__rules li{
  counter-increment:cr;position:relative;padding-left:30px;
  font-size:13.5px;line-height:1.6;color:var(--ink-70);
}
.calc__rules li::before{
  content:counter(cr);position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink);color:var(--ink);
  font-family:var(--display);font-weight:900;font-size:11.5px;
}
.calc__rules b{color:var(--ink);font-weight:700}
/* deliberately reads as small print, because that is what it is */
.calc__small{
  margin:clamp(16px,2vw,22px) 0 0;max-width:46ch;
  font-size:12.5px;line-height:1.65;color:var(--ink-45);
}
.calc__figure .astr{font-size:.34em;vertical-align:super;line-height:0;margin-left:.04em}
.calc.is-idle .calc__ask{opacity:.55;pointer-events:none}
.modal__pick{
  margin:0 0 clamp(18px,2.2vw,26px);padding:14px 18px;
  background:var(--pink-soft);border-left:3px solid var(--pink);
  font-size:15px;line-height:1.55;color:var(--ink);font-weight:600;
}

/* ---- A short call to action band ---- */
.cta-band{text-align:center}
.cta-band h2{font-size:clamp(28px,3.8vw,52px);margin:0 0 .45em;color:var(--paper)}
.cta-band p{
  margin:0 auto clamp(20px,2.6vw,30px);max-width:min(52ch,100%);
  font-size:clamp(16px,1.35vw,18.5px);line-height:1.65;color:rgba(255,255,255,.72);
}

/* the pricing head is centred, because the calculator under it is symmetrical */
/* .svc__head goes two-column at 860px — the centred variant stays one */
.svc__head--mid{text-align:center;display:block}
.svc__head--mid h2{max-width:none}
.svc__head--mid .lede{max-width:58ch;margin-inline:auto}

/* the mix is a one-of-three choice, so it carries radio dots — without them it
   read as a static list rather than something you pick from */
.calc__group legend span{font-family:var(--body);font-weight:500;font-size:14px;color:var(--ink-45);letter-spacing:0}
.calc__segbtn{display:flex;align-items:flex-start;gap:13px}
.calc__dot{
  flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%;
  border:2px solid var(--line);background:var(--paper);position:relative;
  transition:border-color .16s var(--ease);
}
.calc__dot::after{
  content:'';position:absolute;inset:3px;border-radius:50%;background:var(--pink);
  transform:scale(0);transition:transform .22s var(--spring);
}
.calc__segbtn:hover .calc__dot{border-color:var(--ink)}
.calc__segbtn.is-on .calc__dot{border-color:var(--paper)}
.calc__segbtn.is-on .calc__dot::after{transform:scale(1)}
.calc__segtxt{display:block}
.calc__segtxt b{display:block;font-weight:700}
.calc__segtxt small{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--ink-45)}
.calc__segbtn.is-on .calc__segtxt small{color:rgba(255,255,255,.6)}

/* nothing picked: show the range, and drop the pin rather than park it at £500 */
.calc.is-idle .calc__figure{font-size:clamp(30px,4.2vw,52px)}
.calc.is-idle .calc__fill{background:var(--paper-2);border-right:0}
.calc.is-idle .calc__pin{opacity:0}
.calc__pin{transition:left .45s var(--spring),opacity .2s var(--ease)}

/* LinkedIn on its own is a fixed package, so the content mix stops applying */
.calc__lock{display:none;margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--ink-45);max-width:46ch}
.calc.is-fixed .calc__lock{display:block}
.calc.is-fixed .calc__seg{opacity:.38;pointer-events:none}

/* ---- Croxtons case study: the visuals -----------------------------------
   All of these are drawn from figures Jonny supplied. Nothing here is an
   illustrative shape with an invented number attached — if a figure is not
   known, the element does not exist.                                       */
.cs-stats--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cs-stats--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.cs-stats--4{grid-template-columns:1fr}}

/* the pilot: copy beside the seat grid */
.pilot{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
@media (min-width:920px){.pilot{grid-template-columns:1fr 1fr}}
.pilot__panel h3{
  font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(19px,1.9vw,26px);margin:0 0 .7em;
}
.pilot__panel p{margin:0 0 1.3em;font-size:16px;line-height:1.65;color:var(--ink-70)}
.pilot__panel strong{color:var(--ink);font-weight:700}

.pilot__viz{margin:0;padding:clamp(20px,2.4vw,30px);background:var(--paper);border:2px solid var(--ink)}
.pilot__viz figcaption{
  font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(16px,1.4vw,19px);margin-bottom:16px;
}
/* 60 seats, every one of them filled */
.seatgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(5px,.7vw,9px)}
@media (max-width:520px){.seatgrid{grid-template-columns:repeat(10,1fr)}}
.seat{aspect-ratio:1;border-radius:50%;background:var(--pink);display:block}

/* sold out ten days before the night */
.runway{margin-top:clamp(26px,3vw,38px)}
.runway__track{position:relative;height:10px;background:var(--paper-2);border:2px solid var(--ink)}
.runway__fill{position:absolute;inset:0 auto 0 0;width:62%;background:var(--pink)}
.runway__flag{
  position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);
  background:var(--ink);color:var(--paper);padding:7px 12px 8px;white-space:nowrap;
  display:block;text-align:center;
}
.runway__flag b{
  display:block;font-family:var(--display);font-weight:900;letter-spacing:-.02em;font-size:13px;
}
.runway__flag span{display:block;font-size:10.5px;color:rgba(255,255,255,.7);margin-top:2px}
.runway__scale{display:flex;justify-content:space-between;margin-top:30px;font-size:12px;color:var(--ink-45)}

/* what the night actually took */
.payoff{margin-top:clamp(34px,4.4vw,60px);padding-top:clamp(28px,3.4vw,44px);border-top:2px solid var(--ink)}
.payoff__lead{margin:0 0 clamp(22px,2.8vw,34px);font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--ink-70);max-width:62ch}
.payoff__lead strong{color:var(--ink);font-weight:700}
.payoff__bars{display:flex;align-items:flex-end;gap:clamp(20px,3vw,44px);height:190px}
.payoff__bar{flex:0 1 190px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.payoff__fill{display:block;height:var(--h);background:var(--pink-soft);border:2px solid var(--ink);border-bottom:0}
.payoff__fill--full{background:var(--pink)}
.payoff__bar b{
  display:block;margin-top:12px;font-family:var(--display);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(22px,2.4vw,32px);line-height:1;
}
.payoff__bar span:last-child{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-45)}
.payoff__note{margin:clamp(20px,2.4vw,28px) 0 0;font-size:16px;color:var(--ink-70)}

/* the two results cards */
.results{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(34px,4.4vw,60px)}
@media (min-width:820px){.results{grid-template-columns:1fr 1fr}}
.results__card{margin:0;padding:clamp(22px,2.6vw,32px);background:var(--paper-2);border:2px solid var(--ink)}
.results__card figcaption{
  font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(16px,1.4vw,19px);margin-bottom:clamp(18px,2.2vw,26px);
}
.results__note{margin:clamp(16px,2vw,22px) 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-70)}
.results__note strong{color:var(--ink);font-weight:700}

.uplift{position:relative;display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,34px);height:150px}
.uplift__col{flex:0 1 110px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.uplift__bar{display:block;height:var(--h);background:var(--paper);border:2px solid var(--ink);border-bottom:0}
.uplift__bar--on{background:var(--pink)}
.uplift__col b{display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--ink-45)}
.uplift__delta{
  position:absolute;right:0;top:0;
  font-family:var(--display);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--pink-ink);
}

.rank{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rank__place{
  font-family:var(--display);font-weight:900;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(64px,8vw,116px);
}
.rank__place sup{font-size:.38em;vertical-align:super;letter-spacing:-.02em}
.rank__of{font-size:clamp(16px,1.5vw,20px);color:var(--ink-70);font-weight:600}

/* public figures move, so the page says when they were taken */
.results__stamp{margin:clamp(18px,2.2vw,26px) 0 0;font-size:13px;color:var(--ink-45)}

/* the photo of the night */
.cs-shot figcaption{
  margin-top:16px;font-size:14.5px;line-height:1.65;color:var(--ink-70);max-width:62ch;
}
.cs-shot figcaption strong{color:var(--ink);font-weight:700}
.cs-shot{max-width:900px}

/* ---- Send It 100 case study --------------------------------------------- */

/* a full-width photo between sections */
.bleed{margin:0;display:block}
.bleed img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
@media (max-width:700px){.bleed img{aspect-ratio:4/3}}

/* what we walked into: three problems, stated plainly */
.hurdles{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);
}
@media (max-width:820px){.hurdles{grid-template-columns:1fr}}
.hurdles li{
  padding:clamp(20px,2.2vw,28px);background:var(--paper);
  border-left:4px solid var(--pink);
}
.hurdles b{
  display:block;font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(17px,1.5vw,21px);line-height:1.2;margin-bottom:.5em;
}
.hurdles span{display:block;font-size:15px;line-height:1.6;color:var(--ink-70)}

.freebie{
  margin-top:clamp(28px,3.4vw,44px);padding:clamp(24px,3vw,38px);
  background:var(--ink);color:var(--paper);
}
.freebie__lead{
  margin:0;max-width:56ch;
  font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:1.2;
  font-size:clamp(20px,2.4vw,32px);
}
.freebie__lead strong{color:var(--pink);font-weight:900}

/* the four moves */
.moves{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
@media (max-width:760px){.moves{grid-template-columns:1fr}}
.move{padding:clamp(22px,2.4vw,30px);border:2px solid var(--ink);background:var(--paper)}
.move__num{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--pink);color:var(--ink);margin-bottom:14px;
  font-family:var(--display);font-weight:900;letter-spacing:-.03em;font-size:15px;
}
.move h3{
  font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(18px,1.7vw,23px);margin:0 0 .55em;
}
.move p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-70)}
.move strong{color:var(--ink);font-weight:700}

/* one dot per hundred residents — 100 dots, because the number is 10,000 */
.reach{
  margin:clamp(30px,3.8vw,52px) 0 0;padding:clamp(22px,2.6vw,32px);
  background:var(--paper-2);border:2px solid var(--ink);
}
.reach figcaption{
  font-family:var(--display);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(16px,1.4vw,19px);margin-bottom:16px;
}
.reach__grid{display:grid;grid-template-columns:repeat(20,1fr);gap:clamp(4px,.55vw,7px);max-width:620px}
@media (max-width:560px){.reach__grid{grid-template-columns:repeat(10,1fr)}}
.reach__dot{aspect-ratio:1;border-radius:50%;background:var(--pink);display:block}
.reach__note{margin:14px 0 0;font-size:13px;color:var(--ink-45)}

/* two photographs, side by side */
.gallery{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(14px,1.8vw,24px);
  align-items:start;margin-top:clamp(30px,3.8vw,52px);
}
@media (max-width:760px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;display:block}

/* ---- Long-form case study -----------------------------------------------
   One column of prose at a comfortable measure, broken up by photographs
   that break out wider than the text. Reading, not a dashboard.           */
.longform .wrap{max-width:1180px}
/* the hero already leaves 104px under its own content — a full section's worth
   of padding on top of that put 233px between the CTA and the first line */
.longform{padding-top:clamp(16px,2vw,30px)}
/* the section's opening heading sits tight to the hero, not a section apart */
.longform > .wrap > *:first-child{margin-top:0}
.longform > .wrap > p{
  /* one size, one weight, one measure — no lead paragraph, no bold runs */
  max-width:min(680px,100%);margin-inline:auto;
  margin-block:0 1.25em;
  font-size:clamp(17px,1.5vw,19px);line-height:1.75;color:var(--ink-70);
}

.longform h2{
  max-width:min(680px,100%);margin-inline:auto;
  margin-block:clamp(38px,4.6vw,66px) .55em;
  font-size:clamp(26px,3vw,42px);
}

/* the photographs sit wider than the measure, so the page breathes */
.lf-shot{
  margin:clamp(32px,4vw,56px) auto;max-width:980px;
}
.lf-shot img{width:100%;height:auto;display:block}
/* an empty slot draws its placeholder with ::after, which would otherwise land
   under the caption — flex order puts the box back above it */
.lf-shot.img-slot{display:flex;flex-direction:column}
.lf-shot.img-slot::after{order:1}
.lf-shot.img-slot figcaption{order:2}
.lf-shot figcaption{
  margin:14px auto 0;max-width:min(620px,100%);
  font-size:14px;line-height:1.6;color:var(--ink-45);
  border-left:3px solid var(--pink);padding-left:14px;
}
.lf-stamp{
  max-width:min(680px,100%);margin:clamp(30px,3.6vw,48px) auto 0;
  font-size:13px;color:var(--ink-45);
}
@media (max-width:820px){
  .lf-lead{max-width:none}
}

/* a long-form page leads with the headline across the full width, not in a
   column — a service-page hero would break a two-line title into five */
@media (min-width:900px){
  .page-hero--wide .page-hero__inner{display:block}
  .page-hero--wide h1{max-width:none;margin-bottom:.3em}
  .page-hero--wide .page-hero__aside{max-width:62ch}
}

/* the one-client-per-comp-set note: small print, but it is a positioning line
   as much as a caveat, so it keeps a pink rule rather than fading away */
.compset{
  margin:clamp(20px,2.4vw,28px) 0 0;padding:14px 0 0;
  border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.65;color:var(--ink-45);max-width:52ch;
}

/* ======================================================================
   PACKAGE CARDS
   Used by digital-asset-pack.html and websites.html. Lived inline on the
   first of those until the second needed it; a component on two pages
   belongs here rather than copied into both.
   ====================================================================== */
/* ---- The three packages -------------------------------------------------
   Cards rather than the pricing page's list, because these are meant to be
   compared and picked between, and a row of three invites that in a way a
   stacked list does not. */
.packs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(24px,3vw,34px);
}
@media (max-width:860px){.packs{grid-template-columns:1fr;gap:14px}}

.pack{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  padding:clamp(22px,2.3vw,30px);
  background:#fff;border:1px solid var(--line);border-radius:20px;
  cursor:default;
  transition:transform .34s var(--spring), box-shadow .3s var(--ease),
             border-color .22s var(--ease);
}
/* the accent grows from the left rather than fading in: movement reads as
   "this one is selected" in a way opacity does not */
.pack__bar{
  position:absolute;top:0;left:0;right:0;height:3px;background:var(--pink);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--spring);
}
.pack__tier{
  margin:0 0 .85em;font-family:var(--body);font-weight:700;font-size:11px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-45);
  transition:color .22s var(--ease);
}
.pack__fig{
  margin:0 0 .18em;font-family:var(--display);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(40px,4.4vw,58px);line-height:1;color:var(--ink);
  transform-origin:left center;
  transition:transform .34s var(--spring), color .22s var(--ease);
}
.pack__name{
  margin:0 0 .5em;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(15px,1.3vw,17.5px);line-height:1.25;color:var(--ink);
}
.pack__note{
  margin:0 0 clamp(14px,1.6vw,20px);font-size:14.5px;line-height:1.6;color:var(--ink-70);
}
.pack__list{
  list-style:none;margin:auto 0 0;padding:clamp(13px,1.5vw,17px) 0 0;
  border-top:1px solid var(--line);
  display:grid;gap:7px;
  transition:border-color .22s var(--ease);
}
.pack__list li{
  position:relative;padding-left:19px;font-size:13.5px;line-height:1.5;color:var(--ink-70);
}
.pack__list li::before{
  content:'';position:absolute;left:0;top:.46em;width:7px;height:7px;border-radius:50%;
  background:var(--line);transition:background .22s var(--ease),transform .3s var(--spring);
}

/* hover and keyboard focus do the same thing — the cards carry tabindex so a
   keyboard gets the state too, and :focus-visible keeps it off mouse clicks */
.pack:hover,.pack:focus-visible{
  transform:translateY(-7px);
  border-color:var(--pink);
  box-shadow:0 20px 44px rgba(33,33,33,.13);
  outline:none;
}
.pack:hover .pack__bar,.pack:focus-visible .pack__bar{transform:scaleX(1)}
.pack:hover .pack__tier,.pack:focus-visible .pack__tier{color:var(--pink-ink)}
.pack:hover .pack__fig,.pack:focus-visible .pack__fig{transform:scale(1.06)}
.pack:hover .pack__list li::before,
.pack:focus-visible .pack__list li::before{background:var(--pink);transform:scale(1.25)}

/* a light sweeps across once, the same gesture the nav panel uses */
.pack::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,150,182,.16),transparent);
  transform:translateX(-120%);
}
.pack:hover::after,.pack:focus-visible::after{animation:pack-sheen .9s var(--ease) 1}
@keyframes pack-sheen{
  0%{transform:translateX(-120%);opacity:0}
  14%{opacity:1}
  100%{transform:translateX(120%);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .pack,.pack__bar,.pack__fig,.pack__list li::before{transition:none}
  .pack:hover,.pack:focus-visible{transform:none}
  .pack:hover .pack__fig,.pack:focus-visible .pack__fig{transform:none}
  .pack:hover::after,.pack:focus-visible::after{animation:none}
}

/* ======================================================================
   LOCKED MENU GROUP
   Preferred Supplier Solutions is not open to the general public, so the
   items carry a padlock and read muted. They are still links: clicking any
   of them goes to the waiting list, which is the only thing you can
   actually do with them.
   ====================================================================== */
.nav__sub--locked a{color:var(--ink-45)}
.nav__sub--locked a::before{
  content:'';flex:0 0 auto;width:11px;height:12px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2014'%20fill='none'%20stroke='#000'%20stroke-width='1.6'%3E%3Crect%20x='1.6'%20y='6'%20width='8.8'%20height='7.2'%20rx='1.7'%20fill='#000'%20stroke='none'/%3E%3Cpath%20d='M4%206V4.2a2%202%200%200%201%204%200V6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2014'%20fill='none'%20stroke='#000'%20stroke-width='1.6'%3E%3Crect%20x='1.6'%20y='6'%20width='8.8'%20height='7.2'%20rx='1.7'%20fill='#000'%20stroke='none'/%3E%3Cpath%20d='M4%206V4.2a2%202%200%200%201%204%200V6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.nav__sub--locked a:hover{color:var(--pink-ink)}
.nav__join a{color:var(--pink-ink)!important;font-weight:700}
.nav__join a::before{display:none}