/* ---------- service page chrome ----------
   A white bar rather than a transparent nav over a hero: this page opens on
   the page ground, so the header has to be its own surface. It bleeds past
   the shell padding and sticks, and the wordmark svg is currentColor so it
   turns black off the body colour with no override. */
body{background:var(--page);color:var(--ink-dark);}

.topbar{
  position:sticky;top:0;z-index:50;
  margin:calc(var(--shell) * -1) calc(var(--shell) * -1) var(--shell);
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.09);
}
/* the bar is sticky, so anchored jumps have to land below it rather than
   underneath it */
.shell > section[id],.shell > footer[id]{scroll-margin-top:6.5rem;}
.nav--light{color:var(--ink-dark);}
.nav--light .nav__logo{color:var(--ink-dark);}
.nav--light .nav__link{
  border-color:transparent;background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:#40404a;font-weight:500;
}
.nav--light .nav__link:hover{background:#F2F2EE;color:var(--ink-dark);}
.nav--light .nav__item.is-open .nav__link{
  background:var(--ink-dark);color:#fff;border-color:transparent;box-shadow:none;
}
.nav--light .callus__label{color:#6b6b73;}
.nav--light .callus__number{color:var(--ink-dark);}
.nav--light .callus:hover .callus__number{color:#5B7A00;}
.nav--light .callus__dot{background:#A8BE22;box-shadow:0 0 0 0 rgba(168,190,34,.6);}
.nav--light .nav__right::before{background:rgba(0,0,0,.13);}
.nav--light .burger{border-color:rgba(0,0,0,.14);background:#fff;}
.nav--light .burger span,
.nav--light .burger span::before,
.nav--light .burger span::after{background:var(--ink-dark);}
.nav--light .drop{
  background:#fff;border-color:rgba(0,0,0,.08);
  box-shadow:0 26px 60px rgba(0,0,0,.16);
}
.nav--light .drop::before{background:#fff;border-left-color:rgba(0,0,0,.08);border-top-color:rgba(0,0,0,.08);}
.nav--light .drop__link:hover{background:#F3F3F0;}
/* lime on white is unreadable, so every accent in the panel shifts olive */
.nav--light .drop__link::before{background:#5B7A00;}
.nav--light .drop__title{color:var(--ink-dark);}
.nav--light .drop__title span:last-child{color:#5B7A00;}
.nav--light .drop__desc{color:#6b6b73;}
.nav--light .drop__foot{color:#5B7A00;border-top-color:rgba(0,0,0,.09);}
.nav--light .drop__link.is-current{background:#F3F3F0;}
.nav--light .drop__link.is-current .drop__title span:last-child{opacity:1;transform:none;}

.btn--ink{background:var(--ink-dark);color:#fff;}
.btn--ink:hover{background:#2b2b33;}
.nav__right .btn{order:2;}

@media (max-width:1180px){
  .nav{gap:1rem;padding:1.25rem var(--edge);}
  .nav__link{padding:.6rem .7rem;font-size:.9375rem;}
}
@media (max-width:1024px){
  .nav__menu,.callus,.nav__right .btn{display:none;}
  .burger{display:flex;}
  .nav__right{margin-left:auto;}
}

/* ---------- hero ---------- */
.phero{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-main);
  min-height:min(54rem,94svh);
  display:flex;align-items:flex-end;
  color:#fff;
}
/* the nav rides the photograph the way it does on the homepage, so the hero
   stacks header then body and the body is pushed to the foot of the frame */
.phero--nav{
  align-items:stretch;flex-direction:column;
  margin-top:calc(var(--shell) * -1);
}
.phero--nav .nav{position:relative;z-index:2;flex:0 0 auto;}
.phero--nav .phero__body{margin-top:auto;}
/* the scrim is built to darken the foot of the frame, where the copy sits.
   The nav is at the top, where the photograph is at its lightest, so it gets
   a wash of its own rather than a bar */
.phero--nav::before{
  content:"";position:absolute;inset:0 0 auto;height:18rem;z-index:1;
  background:linear-gradient(180deg,rgba(var(--scrim),.58),rgba(var(--scrim),0));
  pointer-events:none;
}
.phero__media{
  position:absolute;inset:0;z-index:-2;
  /* both service pages open on the same photograph; a page that wants its
     own sets --hero on the section */
  background-image:var(--hero,url("/img/hero-service-v2.webp"));
  /* the faces sit in the upper middle of the frame, so the crop pulls up
     and the empty foreground is what the copy sits on */
  background-position:var(--hero-pos,50% 30%);background-size:cover;background-repeat:no-repeat;
}
/* one diagonal rather than a vertical and a horizontal crossed over each
   other: the copy sits bottom-left and the faces top-right, so the scrim runs
   the same way and the photograph is only paid for where the type needs it */
.phero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top right,
    rgba(var(--scrim),.95) 0%,
    rgba(var(--scrim),.88) 18%,
    rgba(var(--scrim),.68) 36%,
    rgba(var(--scrim),.4) 55%,
    rgba(var(--scrim),.16) 74%,
    rgba(var(--scrim),0) 92%);
}
.phero__body{
  position:relative;z-index:1;
  /* Laid out exactly like a band: full width, --edge for the inline padding,
     and NO max-width with auto margins. Both together inset the copy twice —
     the percentage in --edge resolves against the section, not this box, so
     at 2560 the centring was applied once by the margins and once by the
     padding and the copy sat 492px in from everything else. */
  width:100%;
  padding:clamp(2.25rem,5vw,4rem) var(--edge);
}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:0 0 1.35rem;
  /* the crop under the breadcrumb lands around rgb(101,89,85), where .7
     white came out at 3.9:1 */
  font-size:.9375rem;color:rgba(255,255,255,.84);
}
.crumbs a{transition:color .16s ease;}
.crumbs a:hover{color:#fff;}
.crumbs [aria-current]{color:#fff;}
.phero h1{
  margin:0;max-width:16ch;
  font-family:var(--font-head);
  font-size:clamp(2.125rem,3.9vw,3.25rem);
  line-height:1.02;letter-spacing:-.042em;font-weight:600;
  text-wrap:balance;
}
.phero__lede{margin:1.5rem 0 0;max-width:46rem;font-size:1.0625rem;line-height:1.6;color:var(--grey-100);}
.phero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin:2.25rem 0 0;}
.phero__call{font-size:.9375rem;color:var(--grey-200);}
.phero__call:hover{color:#fff;}
/* the rating cluster and the proof line ride the bottom of the photograph
   rather than starting a section of their own. The faces are the homepage's
   component, reused as-is; only the diameter changes. */
.phero__rating{
  display:inline-flex;align-items:center;gap:.75rem;
  margin:2.25rem 0 0;
  font-size:.9375rem;color:var(--grey-100);
}
.phero__rating .face{width:2.1rem;height:2.1rem;margin-right:-.55rem;}
.phero__rating .face:last-child{margin-right:0;}
.phero__rating strong{color:#fff;font-weight:600;}
.phero__rating .stars{font-size:.875rem;}
/* one line at three items, wrapping rather than squeezing on a narrow screen */
.phero__proof{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;
  margin:1.5rem 0 0;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:.9375rem;color:var(--grey-100);
}
.phero__proof span{display:inline-flex;align-items:center;gap:.5rem;}
.phero__proof svg{width:1.05rem;height:1.05rem;color:var(--lime);flex:0 0 auto;}

/* ---------- shared light-section furniture ---------- */
.band{
  margin-top:var(--shell);
  padding:clamp(3.5rem,6vw,6rem) var(--edge);
  border-radius:var(--radius-main);
}
.band--paper{background:var(--paper);color:var(--ink-dark);}
.band--dark{
  background:
    radial-gradient(ellipse 70% 60% at 8% 0%, rgba(var(--purple-accent),.24) 0%, rgba(var(--purple-accent),0) 62%),
    #1C1729;
  color:#fff;
}
.band__head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  margin:0 0 clamp(2.5rem,4vw,3.5rem);
  padding-bottom:clamp(1.75rem,3vw,2.5rem);
  border-bottom:1px solid rgba(0,0,0,.11);
}
.band--dark .band__head{border-bottom-color:var(--hairline);}
.band__head h2{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.875rem,3.4vw,3rem);
  line-height:1.06;letter-spacing:-.035em;font-weight:600;
  text-wrap:balance;
}
.band__lede{margin:0;max-width:38rem;font-size:1.0625rem;line-height:1.62;color:#54545a;}
.band--dark .band__lede{color:var(--grey-100);}
@media (max-width:900px){
  .band__head{grid-template-columns:minmax(0,1fr);align-items:start;gap:1.5rem;}
}

/* ---------- what SEO does: the SERP tile, annotated ----------
   Two columns rather than a card grid: the mock search page on one side and
   what each part of it is worth on the other. */
.what{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center;}
.what__art{
  position:relative;overflow:hidden;
  border-radius:1.5rem;
  padding:2.5rem 1.5rem;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(72% 80% at 84% 14%, #FF6FC4 0%, rgba(255,111,196,0) 62%),
    radial-gradient(66% 72% at 12% 26%, #8A5CFF 0%, rgba(138,92,255,0) 60%),
    radial-gradient(86% 74% at 40% 100%, #4B4BE8 0%, rgba(75,75,232,0) 64%),
    linear-gradient(200deg,#3A1C74 0%,#2A1458 100%);
}
.what__art > .ui{width:min(30rem,100%);}
.what__list{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.what__list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;
  padding:1.35rem 0;
  border-top:1px solid rgba(0,0,0,.1);
}
.what__list li:last-child{border-bottom:1px solid rgba(0,0,0,.1);}
.what__n{
  font-family:var(--font-head);
  font-size:.8125rem;font-weight:700;letter-spacing:.04em;color:#8a8a92;
  padding-top:.2rem;
}
.what__list h3{
  margin:0;
  font-family:var(--font-head);
  font-size:1.125rem;font-weight:600;letter-spacing:-.02em;
  text-wrap:balance;
}
.what__list p{margin:.4rem 0 0;font-size:1rem;line-height:1.6;color:#54545a;}
@media (max-width:900px){
  .what{grid-template-columns:minmax(0,1fr);}
}

/* ---------- service tiles ----------
   The homepage channel-picker card, reused: white panel, display-size
   title, grey body, lime chips. A hairline spec sheet read as a list of
   admin rather than a set of things you can buy. */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;}
.tile{
  display:flex;flex-direction:column;
  padding:1.6rem 1.5rem 1.7rem;
  border:1px solid rgba(0,0,0,.09);
  border-radius:1.25rem;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.07);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover{
  transform:translateY(-4px);
  border-color:rgba(0,0,0,.16);
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 20px 44px rgba(0,0,0,.12);
}
/* the artwork leads the card, flush with its top and sides. The card clips
   it, so the image needs no radius of its own */
.tile--art{padding-top:0;overflow:hidden;}
.tile__shot{margin:0 -1.5rem 1.4rem;background:#EBE2FC;}
.tile__shot img{display:block;width:100%;height:auto;}
.tile__ico{display:block;width:2.5rem;height:2.5rem;margin:0 0 1.15rem;}
.tile h3{
  margin:0;
  font-family:var(--font-head);
  font-size:1.4375rem;line-height:1.2;letter-spacing:-.022em;font-weight:700;
  color:var(--ink-dark);text-wrap:balance;
}
.tile p{margin:.6rem 0 0;font-size:1rem;line-height:1.5;color:#4f4f4f;text-wrap:pretty;}
/* the search tile carries artwork and the rest of its row does not, so the
   chips are pushed to the foot of every card. That puts the slack between
   the copy and the chips rather than leaving it below them */
.tile__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:auto 0 0;padding-top:1.35rem;}
.tile__chips span{
  padding:.35rem .7rem;
  border-radius:var(--radius-full);
  background:#E8FCA6;color:#2F3D00;
  font-size:.8125rem;font-weight:600;
}
@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .tiles{grid-template-columns:minmax(0,1fr);}
}

/* ---------- what is included ----------
   A spec sheet, not six identical icon cards: one hairline-separated row per
   deliverable, two up, so the list scans as a list. */
.inc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4.5rem);}
.inc__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;
  padding:1.85rem 0;
  border-top:1px solid rgba(0,0,0,.1);
}
.inc__item:nth-child(-n+2){border-top:0;}
.inc__ico{
  display:flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;flex:0 0 auto;
  border-radius:.85rem;
  background:#EFEAFC;color:#4C1D95;
}
.inc__ico svg{width:1.5rem;height:1.5rem;}
.inc__item h3{
  margin:.2rem 0 0;
  font-family:var(--font-head);
  font-size:1.1875rem;font-weight:600;letter-spacing:-.022em;
  text-wrap:balance;
}
.inc__item p{margin:.5rem 0 0;font-size:1rem;line-height:1.62;color:#54545a;}
.inc__item ul{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;}
.inc__item li{
  padding:.3rem .65rem;border-radius:var(--radius-full);
  border:1px solid rgba(0,0,0,.1);background:#fff;
  font-size:.8125rem;font-weight:500;color:#3f3f46;
}
@media (max-width:860px){
  .inc{grid-template-columns:minmax(0,1fr);}
  .inc__item:nth-child(2){border-top:1px solid rgba(0,0,0,.1);}
}

/* ---------- process ----------
   Steps down the left against a photograph on the right, with the rail and
   its markers drawn inside the steps column. Putting the markers in the
   middle grid track meant aligning them to rows they were not in; drawn on
   each step, every marker lands on its own step by construction. */
.proc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.proc__steps{position:relative;padding-right:4rem;}
/* the connector, behind the markers */
.proc__steps::before{
  content:"";
  position:absolute;right:1.55rem;top:1.1rem;bottom:1.1rem;
  width:1px;background:var(--hairline);
}
.step{position:relative;padding:0 0 clamp(2.25rem,4vw,3.25rem);}
.step:last-child{padding-bottom:0;}
.step__pin{
  position:absolute;top:.1rem;right:0;
  display:flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;
  border-radius:50%;
  background:var(--lime);color:var(--ink-dark);
  box-shadow:0 0 0 5px #1C1729;
}
.step__pin svg{width:.85rem;height:.85rem;}
.step__n{
  margin:0;
  font-size:.875rem;color:var(--grey-200);
}
.step h3{
  margin:.5rem 0 0;
  font-family:var(--font-head);
  font-size:1.3125rem;font-weight:600;letter-spacing:-.024em;color:#fff;
  text-wrap:balance;
}
.step p{margin:.6rem 0 0;max-width:34rem;font-size:1rem;line-height:1.62;color:var(--grey-100);}
.step__when{
  display:inline-flex;align-items:center;
  margin-top:.9rem;padding:.25rem .6rem;
  border-radius:var(--radius-full);
  border:1px solid var(--hairline);
  font-size:.75rem;font-weight:600;color:var(--grey-200);
}

/* the photograph, with the result it produced lapping its bottom-right */
.proc__shot{position:relative;padding:0 0 clamp(3rem,6vw,5rem) 0;}
/* direct child only: the SERP overlay nested inside carries an <img> of its
   own, and an unscoped rule here stretched the Google mark to the frame */
.proc__shot > img{
  display:block;width:100%;height:auto;
  aspect-ratio:4 / 3;object-fit:cover;
  border-radius:1.25rem;
  box-shadow:0 2px 4px rgba(0,0,0,.2), 0 24px 60px rgba(0,0,0,.4);
}
/* 58% wide and pulled 12% past the frame: the lap is deep enough to read as
   one object and shallow enough that no line of the result is clipped */
.proc__serp{
  position:absolute;right:-3%;bottom:0;
  width:min(58%,20rem);
  border-radius:.85rem;
  background:#fff;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.16), 0 20px 44px rgba(0,0,0,.38);
}
.proc__serp .serp{margin:0 .55rem .55rem;}
.proc__serp .ui__gbar{padding:.7rem .7rem .5rem;}
.proc__serpfoot{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem .8rem .65rem;
  border-top:1px solid rgba(0,0,0,.07);
  font-size:.6875rem;color:#5f5f68;
}
.proc__serpfoot b{
  display:inline-flex;align-items:center;gap:.2rem;
  padding:.15rem .4rem;border-radius:.3rem;
  background:#E8FCA6;color:#2F3D00;font-size:.625rem;font-weight:700;
}
.proc__serpfoot span{margin-left:auto;font-weight:600;color:var(--ink-dark);}

@media (max-width:960px){
  .proc{grid-template-columns:minmax(0,1fr);gap:2.75rem;}
  .proc__shot{order:-1;padding-bottom:3.5rem;}
  .proc__steps{padding-right:3.25rem;}
}
@media (max-width:560px){
  /* the photo is only about 270px tall here, so a lapping overlay covers
     most of it. Below this width it drops into flow and laps the bottom
     edge by a margin instead. */
  .proc__shot{padding-bottom:0;}
  .proc__serp{
    position:static;
    width:88%;margin:-1.75rem 0 0 auto;
  }
}

/* ---------- other services ----------
   The art is the homepage's own panel markup, not a picture of it, so the
   tiles cannot drift out of step with the homepage. */
.others__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);}
.ocard{
  display:flex;flex-direction:column;
  border:1px solid rgba(0,0,0,.09);
  border-radius:1.5rem;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.07);
  transition:transform .22s ease, box-shadow .22s ease;
}
.ocard:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.06), 0 22px 50px rgba(0,0,0,.12);}
/* the panel is the homepage component untouched apart from its corners.
   Two cards at this width give the stack the same 592px it gets on the
   homepage, so the tiles render identically: shrinking the stack was what
   made the ad copy wrap a word to a line. */
.ocard .suite__art{
  border-radius:0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.ocard__body{display:flex;flex-direction:column;flex:1 1 auto;padding:1.85rem;}
.ocard__tag{margin:0;font-size:.9375rem;font-weight:500;color:#5B7A00;}
.ocard h3{
  margin:.5rem 0 0;
  font-family:var(--font-head);
  font-size:clamp(1.375rem,2.2vw,1.875rem);
  line-height:1.12;letter-spacing:-.028em;font-weight:700;
  text-wrap:balance;
}
.ocard p{margin:1rem 0 1.5rem;font-size:1rem;line-height:1.62;color:#4f4f4f;}
.ocard__go{
  display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  margin-top:auto;
  font-size:.9375rem;font-weight:700;color:var(--ink-dark);
}
.ocard__go span{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.8rem;height:1.8rem;border-radius:50%;
  background:var(--lime);
  transition:transform .18s ease;
}
.ocard__go svg{width:.9rem;height:.9rem;}
.ocard:hover .ocard__go span{transform:translateX(.2rem);}
@media (max-width:860px){
  .others__grid{grid-template-columns:minmax(0,1fr);}
}

/* ---------- reviews, static ----------
   The homepage runs these on three auto-scrolling rails. A service page has
   one job, so here it is three cards and the proof bar, nothing moving. */
/* the marquee sits on the page ground here, not inside a dark section */
.trust{
  /* the same above the label as below the logos */
  padding:clamp(2rem,3.5vw,3rem) 0;
}
.trust__label{
  margin:0 auto 1.75rem;
  text-align:center;
  font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#6b6b73;
}
.trust .logo img{filter:brightness(0);opacity:.5;}
.trust .marquee{max-width:74rem;margin-inline:auto;}

@media (max-width:640px){
  :root{--shell:.65rem;--radius-main:1.25rem;}
  .phero{min-height:0;}
  .phero__body{padding:2rem 1.35rem;}
  .phero h1{font-size:2.125rem;letter-spacing:-.03em;}
  .phero__lede{font-size:1rem;}
  .phero__actions .btn{width:100%;}
  .phero__call{width:100%;text-align:center;}
  .band{padding:2.75rem 1.35rem 3rem;}
}

/* ---------- comparison table ----------
   A grid, not a <table>: the rows are three cells of fixed roles and the
   DUNK column has to be paintable as a full-height band, which a table
   cell cannot do without a colgroup hack. */
.ct{
  max-width:64rem;margin-inline:auto;
  border:1px solid var(--hairline);
  border-radius:1.25rem;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.ct__row{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,.9fr);
  align-items:center;
  border-top:1px solid rgba(255,255,255,.07);
}
.ct__row:first-child{border-top:0;}
.ct__row > span{padding:1.15rem 1.35rem;}
.ct__row > span:not(:first-child){text-align:center;}
/* the middle column is one continuous band down the table */
.ct__row > span:nth-child(2){background:rgba(var(--purple-accent),.16);}
.ct__head{
  background:rgba(255,255,255,.04);
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey-200);
}
.ct__head > span:nth-child(2){
  background:#5B31C4;color:#fff;
  font-family:var(--font-head);font-size:.9375rem;letter-spacing:.06em;
}
.ct__feat{display:flex;align-items:center;gap:.85rem;font-size:1rem;color:#fff;}
.ct__feat i{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;
  border-radius:.6rem;
  background:rgba(var(--purple-accent),.22);
  color:#C9B6FF;
}
.ct__feat i svg{width:1.15rem;height:1.15rem;}
.ct__yes svg{
  width:1.5rem;height:1.5rem;
  padding:.3rem;box-sizing:content-box;
  border-radius:50%;
  background:var(--lime);color:var(--ink-dark);
}
.ct__no{font-size:.9375rem;color:var(--grey-200);}
@media (max-width:700px){
  .ct__row{grid-template-columns:minmax(0,1fr) 4.5rem 5.5rem;}
  .ct__row > span{padding:.9rem .85rem;}
  .ct__feat{gap:.6rem;font-size:.9375rem;}
  .ct__feat i{display:none;}
}

/* ---------- pricing ----------
   Ported from the supplied proposal rather than re-invented, down to the
   brushed-silver gradient, the 4px dot texture over it, the purple tier
   pill against a right-aligned price, and the featured card's plum wash
   with its lime button and inverted bullets. Variable names are the site's;
   every value is the proposal's. */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:center;}
.pcard{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:24px 22px 26px;
  border-radius:22px;
  background:linear-gradient(150deg,#D9D9DF 0%,#FFFFFF 34%,#FFFFFF 78%,#E9E9EE 100%);
  box-shadow:0 16px 44px rgba(22,22,38,.12);
}
.pcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(22,22,38,.08) .8px, transparent .8px);
  background-size:4px 4px;
}
.pcard > *{position:relative;z-index:1;}
.pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}
.pc-tier{
  margin-top:5px;padding:7px 15px;
  border-radius:999px;
  background:#5B31C4;color:#fff;
  font-size:12.5px;font-weight:700;white-space:nowrap;
}
.pc-price{
  font-family:var(--font-head);
  font-weight:800;line-height:1;
  font-size:clamp(26px,2.5vw,34px);
  letter-spacing:-.02em;
  -webkit-text-stroke:.4px currentColor;
  text-align:right;white-space:nowrap;
}
.pc-price small{
  font-family:var(--font-body);
  font-weight:500;font-size:15px;color:#6b6b73;
  -webkit-text-stroke:0;letter-spacing:0;
}
/* a tier priced after the audit carries a sentence where the others carry a
   number. Declared after .pc-price, or that rule's own font-size and nowrap
   win on equal specificity and clip it to "Priced af". */
.pc-price--tbc{
  font-size:1rem;font-weight:600;line-height:1.3;
  letter-spacing:-.008em;
  -webkit-text-stroke:0;
  white-space:normal;max-width:8.5rem;
}
.pcard--feat .pc-price--tbc{color:#fff;}
.pc-desc{margin:0 0 18px;font-size:15px;line-height:1.6;color:#3A3A4C;}
.pc-desc b{color:var(--ink-dark);font-weight:800;}
.pc-btn{
  display:block;width:100%;
  padding:13px 18px;
  border-radius:12px;
  background:#0A0A0F;color:#fff;
  font-family:var(--font-body);
  font-size:14px;font-weight:800;text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.pc-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(10,10,15,.3);}
.pc-micro{margin:11px 0 20px;text-align:center;font-size:11.5px;line-height:1.5;color:#6b6b73;}
.pc-inc-label{
  margin-bottom:10px;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-dark);
}
.pc-inc{
  flex:1;
  list-style:none;margin:0;padding:17px 16px;
  border-radius:13px;
  background:rgba(228,228,233,.75);
  display:flex;flex-direction:column;gap:11px;
}
.pc-inc li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;font-weight:600;line-height:1.45;color:var(--ink-dark);
}
.pc-ball{width:14px;height:14px;flex-shrink:0;margin-top:2px;}
.pc-ball svg{width:100%;height:100%;display:block;}
.pc-ball .b-fill{fill:#161626;}
.pc-ball .b-seam{stroke:#F1F1F4;stroke-width:1.6;fill:none;}

.pcard--feat{
  padding:32px 22px 34px;
  color:#fff;
  background:
    radial-gradient(ellipse 100% 42% at 32% -4%, rgba(139,92,246,.6) 0%, rgba(139,92,246,0) 55%),
    linear-gradient(180deg,#5B21E6 0%,#2A1258 44%,#14101F 76%,#131022 100%);
  box-shadow:0 30px 70px rgba(21,10,46,.45);
}
.pcard--feat::before{
  opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.08) .8px, transparent .8px);
  background-size:5px 5px;
}
.pcard--feat .pc-tier{background:#fff;color:var(--ink-dark);}
.pcard--feat .pc-price{color:#fff;}
.pcard--feat .pc-price small{color:rgba(255,255,255,.72);}
.pcard--feat .pc-desc{color:rgba(255,255,255,.92);}
.pcard--feat .pc-desc b{color:#fff;}
.pcard--feat .pc-btn{background:var(--lime);color:var(--ink-dark);box-shadow:0 12px 30px rgba(217,233,104,.35);}
.pcard--feat .pc-btn:hover{box-shadow:0 16px 36px rgba(217,233,104,.5);}
.pcard--feat .pc-micro{color:rgba(255,255,255,.75);}
.pcard--feat .pc-inc-label{color:#fff;}
.pcard--feat .pc-inc{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);}
.pcard--feat .pc-inc li{color:#fff;}
.pcard--feat .pc-ball .b-fill{fill:#EDE9FB;}
.pcard--feat .pc-ball .b-seam{stroke:#2A1258;}
.pnote{margin:1.75rem auto 0;max-width:44rem;text-align:center;font-size:.9375rem;line-height:1.6;color:#54545a;}
@media (max-width:860px){
  .pgrid{grid-template-columns:minmax(0,1fr);}
}

/* ---------- a platform tile lapping the process photo ----------
   Same slot as .proc__serp, but the Google Ads tile is wider than a search
   result, so it takes its own width and a plum ground to sit on. */
.proc__tile{
  position:absolute;right:-3%;bottom:0;
  width:min(72%,26rem);
  padding:1rem;
  border-radius:1rem;
  background:linear-gradient(200deg,#3A1C74,#2A1458);
  box-shadow:0 2px 4px rgba(0,0,0,.18), 0 20px 44px rgba(0,0,0,.4);
}
.proc__tile .ui{width:100%;}
@media (max-width:560px){
  .proc__tile{position:static;width:100%;margin:-1.75rem 0 0 auto;}
}

/* ---------- feature cards ----------
   Three tinted cards, each with a circular icon badge, and a mock panel
   pinned to the bottom so the card shows the thing rather than describing
   it. The panels are the same .ui vocabulary the homepage tiles use, so
   they inherit its type scale and row rhythm instead of inventing another. */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:stretch;}
.fcard{
  display:flex;flex-direction:column;
  padding:1.75rem 1.6rem 0;
  border-radius:1.5rem;
  /* the ground the client's supplied panel is drawn on, sampled from it, so
     that card's artwork sits on the card rather than on a patch */
  background:#EFECFB;
  border:1px solid rgba(0,0,0,.05);
  overflow:hidden;
}
.fcard__ico{
  display:flex;align-items:center;justify-content:center;
  width:3.5rem;height:3.5rem;margin:0 0 1.5rem;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.fcard__ico svg{width:1.75rem;height:1.75rem;}
.fcard h3{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.3125rem,1.9vw,1.5rem);
  line-height:1.2;letter-spacing:-.024em;font-weight:600;
  color:var(--ink-dark);text-wrap:balance;
}
.fcard p{margin:.9rem 0 0;font-size:1rem;line-height:1.55;color:#4f4f4f;}
.fcard__ticks{
  list-style:none;margin:1.15rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem .9rem;
}
.fcard__ticks li{
  display:flex;align-items:flex-start;gap:.55rem;
  font-size:.9375rem;line-height:1.35;color:var(--ink-dark);
}
.fcard__ticks svg{flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.1rem;color:#4C1D95;}
/* the panel bleeds off the bottom of the card, which is what stops the
   three cards needing equal amounts of copy to look right */
.fcard__shot{
  margin:auto -1.6rem 0;padding:1.6rem 1.6rem 0;
  display:flex;justify-content:center;
}
.fcard__shot .ui{width:min(20rem,100%);box-shadow:0 10px 26px rgba(0,0,0,.14);}
/* the supplied artwork is a whole panel, so it spans the card and bleeds
   off the bottom the same way the built ones do */
.fcard__shot img{display:block;width:100%;height:auto;}
.fcard__shot--art{padding-inline:0;}
@media (max-width:1000px){
  .feat{grid-template-columns:minmax(0,1fr);}
  .fcard__shot .ui{width:min(24rem,100%);}
}

/* ---------- mini mock panels ----------
   Two more tiles in the .ui family, for the feature cards. Same head, row
   and foot rhythm as the homepage tiles; only the row contents differ. */
.ui__prow{
  display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;
  gap:.6rem;align-items:center;
  padding:.5rem .85rem;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.ui__thumb{
  height:2.4rem;border-radius:.4rem;
  background:linear-gradient(150deg,#E6E1FA,#C9BEF3);
}
.ui__pname{display:grid;min-width:0;}
.ui__pname b{font-weight:600;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui__pname span{color:#8a8a92;font-size:.625rem;}
.ui__pprice{font-weight:700;font-size:.8125rem;font-variant-numeric:tabular-nums;}
.ui__chan{
  display:flex;flex-wrap:wrap;gap:.35rem;
  padding:.7rem .85rem .8rem;
}
.ui__chan span{
  padding:.2rem .5rem;border-radius:.35rem;
  background:#F1F1EE;color:#3f3f46;
  font-size:.625rem;font-weight:600;
}
.ui__chan span.on{background:#E6E1FA;color:#2A1D63;}

/* ---------- certification strip ----------
   White, because every badge is artwork on its own white plate and any
   other ground shows the plates as rectangles. */
.badge{
  margin-top:var(--shell);
  padding:clamp(1.75rem,3vw,2.75rem) var(--edge);
  border-radius:var(--radius-main);
  background:#fff;
}
.badge__row{
  max-width:var(--max);margin-inline:auto;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:clamp(2rem,5vw,4.75rem);
}
.badge__row img{height:5.25rem;width:auto;display:block;object-fit:contain;}
.badge__row img.is-wide{height:2.4rem;}
.badge__row img.is-framed{
  height:3rem;
  border:1px solid rgba(0,0,0,.10);border-radius:6px;
}
@media (max-width:640px){
  .badge__row{gap:1.75rem;}
  .badge__row img{height:3.5rem;}
  .badge__row img.is-wide{height:1.7rem;}
  .badge__row img.is-framed{height:2.25rem;}
}

/* ---------- comparison band ----------
   Its own centred head with the wordmark set inline, and the dot texture
   the proposal puts behind it. */
.ctband{position:relative;isolation:isolate;overflow:hidden;}
.ctband::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:24px 24px;
}
.ct__head-copy{max-width:64rem;margin:0 auto clamp(2.5rem,4vw,3.5rem);text-align:center;}
.ct__head-copy h2{
  display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.875rem,3.4vw,3rem);
  line-height:1.06;letter-spacing:-.035em;font-weight:600;
  text-wrap:balance;
}
.ct__logo{display:inline-flex;align-items:center;}
.ct__logo svg{height:1em;width:auto;display:block;color:#fff;}
.ct__mark svg{height:1.1rem;width:auto;display:block;margin-inline:auto;color:#fff;}
.ct__x svg{
  width:1.5rem;height:1.5rem;
  padding:.3rem;box-sizing:content-box;
  border-radius:50%;
  background:#E0463C;color:#fff;
}

/* ---------- pricing head ---------- */
.plock{
  display:flex;align-items:center;gap:1rem;
  max-width:var(--max);margin:0 auto clamp(1.5rem,2.5vw,2rem);
  padding-bottom:clamp(1.25rem,2vw,1.5rem);
  border-bottom:1px solid rgba(0,0,0,.11);
}
.plock img{height:1.75rem;width:auto;display:block;}
.plock span{
  padding-left:1rem;
  border-left:1px solid rgba(0,0,0,.14);
  font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#54545a;
}
.phead{max-width:var(--max);margin:0 auto clamp(2.25rem,4vw,3rem);}
.phead h2{
  margin:0;max-width:26ch;
  font-family:var(--font-head);
  font-size:clamp(1.875rem,3.4vw,2.75rem);
  line-height:1.06;letter-spacing:-.035em;font-weight:600;
  text-wrap:balance;
}
.phead p{margin:1rem 0 0;max-width:42rem;font-size:1.0625rem;line-height:1.6;color:#54545a;}
.pgrid,.pnote{max-width:var(--max);margin-inline:auto;}

/* ---------- service features ----------
   Eyebrow and heading on the top row, an accordion of features bottom left
   against a photograph bottom right. The label sits in its own cell rather
   than stacked over the heading, which is what keeps it a label. */
.svcs{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem) clamp(2rem,5vw,5rem);
  align-items:start;
}
.svcs__tag{
  display:flex;align-items:center;gap:.6rem;margin:0;
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#54545a;
}
.svcs__tag i{width:.45rem;height:.45rem;border-radius:50%;background:#B9CE2E;flex:0 0 auto;}
.svcs__lead{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.875rem,3.4vw,2.875rem);
  line-height:1.08;letter-spacing:-.035em;font-weight:600;
  color:var(--ink-dark);text-wrap:balance;
}
.svcs__list{border-top:1px solid rgba(0,0,0,.12);}
.sv{border-bottom:1px solid rgba(0,0,0,.12);}
.sv summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;
  cursor:pointer;list-style:none;
  font-family:var(--font-head);
  font-size:clamp(1.25rem,2vw,1.625rem);
  line-height:1.15;letter-spacing:-.026em;font-weight:600;
  color:var(--ink-dark);
}
.sv summary::-webkit-details-marker{display:none;}
.sv summary:focus-visible{outline:2px solid #5B7A00;outline-offset:3px;}
.sv__pm{position:relative;width:1rem;height:1rem;flex:0 0 auto;}
.sv__pm::before,.sv__pm::after{
  content:"";position:absolute;left:0;top:50%;
  width:1rem;height:1.5px;background:var(--ink-dark);
  transition:transform .25s ease;
}
.sv__pm::after{transform:rotate(90deg);}
.sv[open] .sv__pm::after{transform:rotate(0deg);}
.sv[open] summary{padding-bottom:.6rem;}
.sv__body{padding:0 3rem 1.5rem 0;max-width:38rem;font-size:1rem;line-height:1.6;color:#4f4f4f;}
.sv__body p{margin:0;}
.svcs__shot{
  border-radius:1.25rem;
  overflow:hidden;
  aspect-ratio:4 / 5;
  background-image:var(--photo-studio);
  background-size:cover;background-position:50% 40%;
  box-shadow:0 2px 4px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.14);
}
@media (max-width:900px){
  .svcs{grid-template-columns:minmax(0,1fr);}
  .svcs__shot{aspect-ratio:4 / 3;}
}


/* ---------- the three campaign types that carry most accounts ----------
   Three cards on the paper band: the label, the name, the line about it, its
   own button, and a screenshot of the placement itself sitting in a well at
   the foot of the card. The screenshots are the argument, so the card is
   built around giving them room rather than treating them as decoration. */
.majors{text-align:center;}
.majors > h2{
  margin:0 auto;max-width:24ch;
  font-family:var(--font-head);
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:1.06;letter-spacing:-.032em;font-weight:600;
  text-wrap:balance;
}
.majors .tiles{margin-top:clamp(2.25rem,4vw,3.25rem);text-align:left;}
.majors__cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.9rem 1.25rem;
  margin-top:clamp(2rem,3.5vw,2.75rem);
}
.majors__call{font-size:.9375rem;color:rgba(18,18,18,.62);transition:color .16s ease;}
.majors__call:hover{color:var(--ink-dark);}
/* .tiles falls back to two columns, which was right for four tiles and
   orphans the last card at three or nine. --three holds three columns until
   they stop fitting and then goes to one, full width either way, so the cards
   keep the band's own edges. */
@media (max-width:1024px) and (min-width:821px){
  .tiles--three{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:820px){
  .tiles--three{grid-template-columns:minmax(0,1fr);}
}

/* ---------- how we work: the terms, next to the people ----------
   Copy and a ticked list on the left, a portrait photograph on the right with
   two cards lifted off it. The cards carry facts that are awkward to fit in a
   list — the notice period, and what is in the price rather than quoted as an
   extra. */
/* white rather than paper: the panels floated over the photograph carry the
   tint instead, which is the other way round from the rest of the page */
/* No background here. It was #fff, which is the same specificity as
   .band--dark and sits later in the file, so the dark modifier was inert on
   this band and it rendered light whatever the markup said. The band's own
   modifier decides the ground. */
.terms{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(2.5rem,5vw,5rem);align-items:center;
}
.terms__lede{
  margin:1.1rem 0 0;max-width:38rem;
  font-size:1.0625rem;line-height:1.6;color:rgba(18,18,18,.68);
}
.terms > .terms__copy > h2{
  margin:0;max-width:22ch;
  font-family:var(--font-head);
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:1.06;letter-spacing:-.032em;font-weight:600;
  text-wrap:balance;
}
.terms__list{
  display:flex;flex-direction:column;gap:1.5rem;
  margin:2.25rem 0 0;padding:0;list-style:none;
}
.terms__list li{display:flex;gap:.9rem;}
/* a lime tick on a solid purple disc: the two brand colours doing the work
   an outlined circle was doing before */
.terms__tick{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:1.6rem;height:1.6rem;margin-top:.05rem;
  border-radius:50%;
  background:rgb(var(--purple-accent));
  color:#fff;
}
.terms__tick svg{width:.85rem;height:.85rem;}
.terms__tick--sm{width:1.15rem;height:1.15rem;margin-top:0;}
.terms__tick--sm svg{width:.65rem;height:.65rem;}
.terms__list h3{
  margin:0;
  font-family:var(--font-head);
  font-size:1.3125rem;line-height:1.24;letter-spacing:-.018em;font-weight:600;
  text-wrap:balance;
}
.terms__list p{margin:.3rem 0 0;font-size:.9375rem;line-height:1.55;color:rgba(18,18,18,.66);}
.terms__media{position:relative;}
.terms__media > img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-main);
  box-shadow:0 2px 6px rgba(0,0,0,.08), 0 22px 50px rgba(0,0,0,.16);
}
/* ---------- two ad boards, overlapped ----------
   This page argues that the creative is the targeting, and until now it made
   that argument beside a photograph of the studio. Two real story boards make
   it better.

   They are 9:16, so a pair is much taller than it is wide. The container
   carries the aspect ratio and the boards are absolutely positioned inside
   it, because a rotated element still occupies its unrotated box in flow: a
   flex row would leave a gap the width of the tilt and the overlap would be
   impossible.

   The tilt is small on purpose. Past about six degrees a board stops reading
   as something a person scrolled past and starts reading as a sticker.

   One board per client, deliberately: two from the same account reads as one
   campaign rather than as a body of work. Revelectrical behind, Christian
   Jenkins in front. Their accents do not fight, a lime pill and a bone one on
   two dark grounds, and the lime is close enough to this site's own accent to
   look intentional. */
.terms__media--pair .adpair{position:relative;aspect-ratio:1/1.1;}
.terms__media--pair .adpair img{
  /* 54%, not 58%. At 58 the two boards overlap by 16% of the container and
     the front one lands on the back one's headline mid-word, so the first
     hook read "Beautiful garde". The overlap is 8% now and both headlines
     clear it. */
  position:absolute;width:54%;height:auto;
  border-radius:.9rem;
  box-shadow:0 2px 6px rgba(0,0,0,.10), 0 26px 56px rgba(0,0,0,.22);
}
.adpair__back{left:0;top:0;transform:rotate(-5deg);}
.adpair__front{right:0;top:10%;transform:rotate(3.5deg);z-index:1;}

/* The "Agreement, month to month" card is dropped here rather than moved. It
   sits across the top left, which is exactly where both boards carry their
   logo, and it repeats the fourth bullet in the list beside it word for word.
   The "included as standard" card stays, over the foot of the boards. */
.terms__media--pair .terms__float--top{display:none;}

.terms__float{
  position:absolute;z-index:1;
  padding:1rem 1.15rem;
  border-radius:1rem;
  background:#F4F3F0;
  box-shadow:0 2px 6px rgba(0,0,0,.08), 0 16px 38px rgba(0,0,0,.16);
}
.terms__float--top{top:1.75rem;left:-1.75rem;right:30%;}
.terms__float--bottom{bottom:1.75rem;right:-1.75rem;left:34%;}
.terms__label{
  margin:0;
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(18,18,18,.5);
}
.terms__value{
  margin:.35rem 0 0;
  font-family:var(--font-head);
  font-size:1.25rem;line-height:1.15;letter-spacing:-.02em;font-weight:600;
  color:var(--ink-dark);
}
/* the icon chip carries the purple; it is what stops each panel reading as a
   plain paragraph floated over a photograph */
.terms__chip{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;
  border-radius:.7rem;
  background:linear-gradient(160deg,rgba(var(--purple-accent),.16),rgba(var(--purple-accent),.07));
  color:rgb(var(--purple-accent));
}
.terms__chip svg{width:1.2rem;height:1.2rem;}
.terms__chip--sm{width:1.35rem;height:1.35rem;border-radius:.4rem;}
.terms__chip--sm svg{width:.8rem;height:.8rem;}
.terms__float--top{display:flex;align-items:flex-start;gap:.85rem;}
.terms__label--row{display:flex;align-items:center;gap:.5rem;}
/* the notice is the reason the card is here, so it gets a shape of its own
   rather than sitting under the value as small print */
.terms__pill{
  display:inline-block;margin:.5rem 0 0;
  padding:.28rem .6rem;
  border-radius:var(--radius-full);
  background:rgba(var(--purple-accent),.1);
  font-size:.75rem;font-weight:600;
  color:rgb(var(--purple-accent));
}
.terms__mini{
  display:flex;flex-direction:column;gap:.35rem;
  margin:.55rem 0 0;padding:0;list-style:none;
  font-size:.875rem;color:rgba(18,18,18,.74);
}
.terms__mini li{display:flex;align-items:center;gap:.5rem;}
@media (max-width:1000px){
  .terms{grid-template-columns:minmax(0,1fr);}
  /* lifted cards need room to overhang; stacked, they read better in flow */
  .terms__float{position:static;inset:auto;margin-top:1rem;}
  .terms__media{display:flex;flex-direction:column;}
}

/* the same section with the photograph on the other side. The copy stays
   first in the source so a phone still reads heading, list, photograph. */
@media (min-width:1001px){
  .terms--flip{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);}
  .terms--flip .terms__media{order:-1;}
  .terms--flip .terms__float--top{left:30%;right:-1.75rem;}
  .terms--flip .terms__float--bottom{right:34%;left:-1.75rem;}
}

/* ---------- the nine deliverables, on a dark purple ground ----------
   The only dark band on the page that is not .band--dark: that one is set for
   the comparison table's own furniture, so this carries its own ground and its
   own card. The cards sit a step lighter than the band with a purple edge, and
   each icon disc uses the same purple-on-purple as the bullets elsewhere. */
.nine{
  background:
    radial-gradient(ellipse 60% 55% at 12% 0%, rgba(139,92,246,.22) 0%, rgba(139,92,246,0) 60%),
    radial-gradient(ellipse 50% 50% at 92% 8%, rgba(96,64,180,.18) 0%, rgba(96,64,180,0) 60%),
    #17102B;
  color:#fff;
}
.nine .band__head h2{color:#fff;}
.nine .band__lede{color:rgba(255,255,255,.76);}
/* Built rather than washed. These read as the substance of the page, so the
   card carries a solid panel, an icon on its own plate, and body copy at a
   weight you can read on a dark ground — the previous 7.5% white gradient and
   .74 text made the whole section look like placeholder furniture. */
.ncard{
  position:relative;
  display:flex;flex-direction:column;
  padding:1.75rem 1.6rem 1.85rem;
  border:1px solid rgba(255,255,255,.13);
  border-radius:1.25rem;
  background:#221936;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px rgba(0,0,0,.28);
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
/* a purple edge along the top, brighter on hover: the cards needed something
   that reads as structure at a glance rather than another rounded rectangle */
.ncard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,rgba(139,92,246,.9) 0%,rgba(139,92,246,.25) 100%);
  opacity:.7;transition:opacity .2s ease;
}
.ncard:hover{
  transform:translateY(-4px);
  border-color:rgba(139,92,246,.5);
  background:#271C40;
}
.ncard:hover::before{opacity:1;}
/* the icon on its own plate, so the deep purple inside the art has something
   to sit against instead of dissolving into the band */
.ncard__ico{
  display:block;
  width:3.5rem;height:3.5rem;
  margin:0 0 1.25rem;padding:.6rem;
  border-radius:.9rem;
  background:rgba(139,92,246,.16);
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.34);
  box-sizing:border-box;
}
.ncard h3{
  margin:0;
  font-family:var(--font-head);
  font-size:1.4375rem;line-height:1.16;letter-spacing:-.026em;font-weight:700;
  color:#fff;text-wrap:balance;
}
.ncard p{
  margin:.7rem 0 0;
  font-size:1rem;line-height:1.62;color:rgba(255,255,255,.82);text-wrap:pretty;
}
.ncard p b{color:#fff;font-weight:600;}
/* what each one covers, in the same purple as the icon plate rather than the
   lime the light tiles use — a third colour in here would fight both */
.ncard__chips{
  display:flex;flex-wrap:wrap;gap:.45rem;
  margin:auto 0 0;padding-top:1.5rem;
}
.ncard__chips span{
  padding:.34rem .72rem;
  border-radius:var(--radius-full);
  background:rgba(139,92,246,.22);
  border:1px solid rgba(139,92,246,.42);
  font-size:.8125rem;font-weight:600;
  color:#E4DAFF;
}
/* the band's own eyebrow, which sits on the dark ground rather than on paper */
.band__title{display:flex;flex-direction:column;gap:.7rem;}
.band__title h2{margin:0;}
.nine .band__head .eyebrow{color:#C4AEFF;}

/* ---------- the AI Overview mock, floated over the photograph ----------
   A mock of the surface the section is about, rather than another list: the
   sparkle row, an answer with the entities picked out, and the sources it
   cites underneath. Clearly an illustration — the cited domain is a
   placeholder, not a real result. */
.terms__float--wide{left:-1.75rem;right:auto;width:min(30rem,116%);}
.terms--flip .terms__float--wide{right:-1.75rem;left:auto;}
.aiov__top{
  display:flex;align-items:center;gap:.5rem;
  margin:0 0 .7rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(18,18,18,.5);
}
.aiov__spark{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.35rem;height:1.35rem;border-radius:.4rem;
  background:linear-gradient(150deg,rgba(var(--purple-accent),.9),rgba(139,92,246,.75));
  color:#fff;
}
.aiov__spark svg{width:.8rem;height:.8rem;}
.aiov__answer{
  margin:0;
  font-size:.9375rem;line-height:1.55;color:rgba(18,18,18,.82);
}
.aiov__answer b{color:var(--ink-dark);font-weight:600;}
.aiov__cites{
  display:flex;flex-wrap:wrap;gap:.4rem;
  margin:.85rem 0 0;padding-top:.8rem;
  border-top:1px solid rgba(18,18,18,.09);
}
.aiov__cites span{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.26rem .6rem;
  border-radius:var(--radius-full);
  background:rgba(18,18,18,.05);
  font-size:.75rem;font-weight:600;color:rgba(18,18,18,.66);
}
.aiov__cites i{
  width:.5rem;height:.5rem;border-radius:50%;
  background:rgb(var(--purple-accent));flex:0 0 auto;
}
.aiov__cites span:first-child{background:rgba(var(--purple-accent),.12);color:rgb(var(--purple-accent));}
/* the engines this is aimed at, as an eyebrow above the heading */
.ai__engines{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:0 0 1.15rem;
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(18,18,18,.5);
}
.ai__engines-label{flex:0 0 auto;}
.ai__engines img{
  height:1.35rem;width:auto;display:block;
  opacity:.82;
}

/* ---------- a second badge row, for press and partnerships ----------
   Same row as the accreditations, with a label above it and the logos held a
   little smaller: these are wordmarks rather than round badges, so at 4.25rem
   they would tower over the certifications above them. */
.badge--press{background:var(--paper);}
.badge__label{
  max-width:var(--max);margin:0 auto 1.75rem;
  text-align:center;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(18,18,18,.5);
}
.badge--press .badge__row img{height:2.5rem;opacity:.72;transition:opacity .18s ease;}
/* a wordmark that fills its whole box towers over the ones with clear space
   built in, so the widest come down to match by eye rather than by number */
.badge--press .badge__row img.is-wide{height:1.75rem;}
.badge--press .badge__row img:hover{opacity:1;}
@media (max-width:640px){
  .badge--press .badge__row img{height:1.9rem;}
}


/* the PR packages hold five, six and seven deliverables, and .pgrid centres
   its cards — which reads as three cards that failed to line up. Stretched,
   they share a height and the lists simply run to different depths. */
.pgrid--top{align-items:stretch;}
.pgrid--top .pcard{height:100%;}

/* ---------- contact details ---------- */
.cdet{text-align:center;}
.cdet > h2{
  margin:0 auto;max-width:24ch;
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3vw,2.5rem);
  line-height:1.08;letter-spacing:-.03em;font-weight:600;
  text-wrap:balance;
}
.cdet__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem);
  margin-top:clamp(2.25rem,4vw,3rem);
  text-align:left;
}
.cdet__item{padding-top:1.35rem;border-top:2px solid rgb(var(--purple-accent));}
.cdet__item h3{
  margin:0;
  font-family:var(--font-head);
  font-size:1.25rem;line-height:1.2;letter-spacing:-.018em;font-weight:700;
  color:var(--ink-dark);
}
.cdet__item p{margin:.5rem 0 0;font-size:.9375rem;line-height:1.7;color:rgba(18,18,18,.68);}
.cdet__item a{color:var(--ink-dark);text-decoration:underline;text-underline-offset:.18em;}
.cdet__item a:hover{color:rgb(var(--purple-accent));}
@media (max-width:820px){ .cdet__grid{grid-template-columns:minmax(0,1fr);} }


/* ---------- legal pages ----------
   One column at a readable measure. No cards, no grid: it is a document, and
   the only job is that someone can find the paragraph they came for. */
.legal__body{max-width:44rem;margin-inline:auto;}
.legal__block + .legal__block{margin-top:clamp(2rem,3.5vw,2.75rem);}
.legal__block h2{
  margin:0 0 .85rem;
  font-family:var(--font-head);
  font-size:clamp(1.25rem,2vw,1.5rem);
  line-height:1.2;letter-spacing:-.02em;font-weight:700;
  color:var(--ink-dark);
}
.legal__block p{margin:0;font-size:1rem;line-height:1.7;color:rgba(18,18,18,.74);}
.legal__block p + p{margin-top:.9rem;}
/* the "last updated" line the Changes section promises: set apart from the
   body copy rather than reading as another paragraph of policy */
.legal__date{
  margin-top:1.5rem!important;padding-top:1.1rem;
  border-top:1px solid rgba(18,18,18,.12);
  font-size:.9375rem!important;color:rgba(18,18,18,.55)!important;
}
.legal__block ul{margin:.9rem 0 0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.6rem;}
.legal__block li{font-size:1rem;line-height:1.7;color:rgba(18,18,18,.74);}
.legal__block b{color:var(--ink-dark);font-weight:600;}
.legal__block a{color:var(--ink-dark);text-decoration:underline;text-underline-offset:.18em;}
.legal__block a:hover{color:rgb(var(--purple-accent));}

/* four across on the 404, where the details band lists the services instead */
.cdet__grid--four{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1000px){ .cdet__grid--four{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .cdet__grid--four{grid-template-columns:minmax(0,1fr);} }

/* ---------- case study page ----------
   A document with proof in it, so it borrows what already exists: the stat row
   from the testimonials section, .tile for the work blocks, and the band
   furniture. Only the figures and the pull quote are new. */
/* a screenshot is evidence, so it gets a frame and a caption rather than
   bleeding into the band like decoration */
.csfig{margin:clamp(2.25rem,4vw,3.25rem) auto 0;max-width:60rem;}
.csbody .csfig{max-width:none;}
.csfig img{
  display:block;width:100%;height:auto;
  border-radius:1rem;
  border:1px solid rgba(18,18,18,.10);
  box-shadow:0 2px 4px rgba(0,0,0,.05), 0 18px 44px rgba(0,0,0,.10);
}
.csfig figcaption{
  margin:.9rem 0 0;text-align:center;
  font-size:.875rem;line-height:1.55;color:rgba(18,18,18,.55);
}

/* stacked, the AI Overview mock is in normal flow, so the 116% overhang it
   uses when it is absolutely positioned just pushes the page sideways.
   Declared here rather than in the max-width:1000px block above because
   .terms__float--wide is declared after it and would otherwise win. */
@media (max-width:1000px){
  .terms__float--wide,.terms--flip .terms__float--wide{width:auto;left:auto;right:auto;}
}

/* ---------- case study template: a light, centred header ----------
   Case studies do not open on a photo hero the way the service pages do. The
   header sits on paper with the nav in ink over it, everything centred, and
   the photograph below as a wide plate rather than a background. */
.cshero{
  position:relative;
  background:
    radial-gradient(ellipse 62% 58% at 8% 0%, rgba(139,92,246,.20) 0%, rgba(139,92,246,0) 62%),
    radial-gradient(ellipse 50% 52% at 96% 12%, rgba(96,64,180,.16) 0%, rgba(96,64,180,0) 60%),
    #16131F;
  color:#fff;
  border-radius:var(--radius-main);
  overflow:hidden;
  padding-bottom:0;
}
/* the copy and the photograph side by side, so the photograph costs width
   rather than height and the reader gets the story and the numbers without
   scrolling past a plate */
.cshero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:stretch;
  gap:clamp(2rem,4vw,3.5rem);
  padding:clamp(2.25rem,4vw,3.5rem) var(--edge) clamp(2.5rem,4.5vw,4rem);
}
.cshero__body{
  display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;
  padding:0;
}
.cshero .crumbs{justify-content:flex-start;color:rgba(255,255,255,.5);}
.cshero .crumbs a{color:rgba(255,255,255,.66);}
.cshero .crumbs a:hover{color:#fff;}
.cshero .crumbs [aria-current]{color:#fff;font-weight:600;}
/* a pill rather than the lime-square eyebrow: on this ground the eyebrow read
   as a stray dot, and the reference sets the label in a capsule */
.cshero__tag{
  display:inline-block;margin:1.35rem 0 0;
  padding:.42rem .95rem;
  border-radius:var(--radius-full);
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
/* the headline is the result, not the client: it names the outcome and the
   figure inside it, which is what a reader scanning a list of case studies is
   actually looking for */
.cshero h1{
  margin:1.35rem 0 0;
  max-width:20ch;
  font-size:clamp(2.25rem,4.6vw,3.875rem);
  line-height:1.02;letter-spacing:-.032em;
  color:#fff;
  text-wrap:balance;
}
/* the figure inside the headline: the same face as the rest of it, picked out
   in lime. A second typeface here was a mistake — the site has two, and this
   is neither of them. */
.cshero h1 b{
  font-weight:inherit;
  color:var(--lime);
}
.cshero__lede{
  margin:1.25rem 0 0;
  max-width:48ch;
  font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.6;
  color:rgba(255,255,255,.72);
  text-wrap:pretty;
}
.cshero__actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:1.25rem;
  margin-top:1.85rem;
}
.cshero__call{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:.25em;}
.cshero__call:hover{color:#fff;}
/* the photograph as a portrait plate beside the copy, filling the column */
.cshero__plate{
  margin:0;
  border-radius:1.5rem;
  overflow:hidden;
}
.cshero__plate img{
  display:block;width:100%;height:100%;
  min-height:26rem;
  object-fit:cover;
}
/* the headline figures as their own boxes at the foot of the copy column,
   the way the reference sets them, rather than a full-width strip */
.csnums{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
  width:100%;max-width:30rem;
  margin:auto 0 0;padding-top:clamp(2.25rem,4vw,3.25rem);
}
.csnum{
  padding:1.25rem 1.35rem 1.35rem;
  border-radius:1.1rem;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
}
.csnum__n{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.75rem,2.6vw,2.25rem);
  font-weight:700;letter-spacing:-.045em;line-height:.95;
  color:var(--lime);
  font-variant-numeric:tabular-nums;
}
.csnum__l{
  margin:.6rem 0 0;
  font-size:.875rem;line-height:1.35;
  color:rgba(255,255,255,.64);
}
@media (max-width:900px){
  .cshero__grid{grid-template-columns:minmax(0,1fr);}
  .cshero__plate img{height:auto;min-height:0;aspect-ratio:16 / 11;}
  .csnums{max-width:none;}
}
/* the label pill wrapped to two lines at 390 and the stat boxes went to one
   column, which made the header twice as long as it needed to be */
@media (max-width:560px){
  .cshero__tag{font-size:.6875rem;letter-spacing:.08em;padding:.4rem .8rem;}
  .csnums{gap:.65rem;}
  .csnum{padding:1.05rem 1.1rem 1.15rem;}
}
@media (max-width:359px){
  .csnums{grid-template-columns:minmax(0,1fr);}
}

/* ---------- the case study itself: a fact card and a document ----------
   The narrow column holds the account at a glance and stays with the reader on
   a tall screen; the wide column is the write-up, opening on the client's own
   words. Headings in the accent serif so the document reads as editorial
   rather than as more marketing furniture. */
.csdoc{
  margin-top:var(--shell);
  padding:clamp(3rem,5vw,4.5rem) var(--edge);
  border-radius:var(--radius-main);
  background:var(--paper);
  color:var(--ink-dark);
}
.csdoc__grid{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(2rem,4vw,4rem);
}
.csfacts{
  padding:clamp(1.5rem,2.5vw,2rem);
  border:1px solid rgba(18,18,18,.10);
  border-radius:1.5rem;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 14px 34px rgba(0,0,0,.06);
}
.csfacts__name{
  display:flex;flex-direction:column;gap:.15rem;
  margin:0 0 1.5rem;padding-bottom:1.35rem;
  border-bottom:1px solid rgba(18,18,18,.1);
  font-family:var(--font-head);
  font-size:1.375rem;font-weight:700;letter-spacing:-.028em;line-height:1.1;
}
.csfacts__name span{
  font-family:var(--font-body);
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  color:rgba(18,18,18,.55);
}
.csfacts dl{display:flex;flex-direction:column;gap:1.15rem;margin:0;}
.csfacts dt{
  margin:0;
  font-size:.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(18,18,18,.48);
}
.csfacts dd{
  margin:.35rem 0 0;
  font-size:.9375rem;line-height:1.55;
  color:var(--ink-dark);
}
/* the four short facts read as labels; About is a sentence, so it stays body */
.csfacts dl > div:not(:first-child) dd{
  font-family:var(--font-head);
  font-size:1rem;font-weight:600;letter-spacing:-.012em;line-height:1.35;
}
.csfacts__cta{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:1.75rem;padding-top:1.35rem;
  border-top:1px solid rgba(18,18,18,.1);
  width:100%;
  font-weight:700;color:rgb(var(--purple-accent));
}
.csfacts__cta:hover{color:var(--ink-dark);}

/* the write-up fills the column rather than sitting in a measure inside it,
   so it runs out to the container edge. The type steps up a size to keep the
   line length readable at that width. */
.csbody{max-width:none;}
.csbody h2{
  margin:clamp(2.5rem,4vw,3.25rem) 0 0;
  font-family:var(--font-head);
  font-size:clamp(1.625rem,2.6vw,2.125rem);
  font-weight:600;line-height:1.1;letter-spacing:-.028em;
  color:var(--ink-dark);
}
.csbody h2:first-child{margin-top:0;}
.csbody p{
  margin:1.15rem 0 0;
  font-size:1.125rem;line-height:1.75;
  color:rgba(18,18,18,.72);
  text-wrap:pretty;
}
/* the client's own words, first thing in the column */
.csquote{
  margin:0;
  padding:clamp(1.6rem,2.8vw,2.25rem);
  border-radius:1.5rem;
  background:#EDEAE3;
}
.csquote blockquote{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.0625rem,1.6vw,1.25rem);
  line-height:1.5;letter-spacing:-.014em;font-weight:600;
  color:var(--ink-dark);
  text-wrap:pretty;
}
.csquote figcaption{
  margin-top:1.5rem;padding-top:1.35rem;
  border-top:1px solid rgba(18,18,18,.12);
}
.csquote__who{display:flex;flex-direction:column;gap:.1rem;}
.csquote__who b{font-family:var(--font-head);font-size:1rem;font-weight:700;letter-spacing:-.015em;}
.csquote__who span{font-size:.875rem;color:rgba(18,18,18,.6);}

@media (min-width:1101px){
  .csfacts{position:sticky;top:1.5rem;}
}
@media (max-width:1100px){
  .csdoc__grid{grid-template-columns:minmax(0,1fr);}
}


/* the nav sitting on paper rather than on a photograph: the base rules are all
   white-on-dark, so each one is flipped here rather than duplicated above */
.nav--ink .nav__link{
  border-color:rgba(18,18,18,.12);
  background:rgba(18,18,18,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  color:rgba(18,18,18,.78);
}
.nav--ink .nav__link:hover{background:rgba(18,18,18,.09);border-color:rgba(18,18,18,.2);color:var(--ink-dark);}
.nav--ink .callus__label{color:rgba(18,18,18,.56);}
.nav--ink .callus__number{color:var(--ink-dark);}
.nav--ink .callus:hover .callus__number{color:rgb(var(--purple-accent));}
.nav--ink .nav__right::before{background:rgba(18,18,18,.12);}
.nav--ink .btn--white{background:var(--ink-dark);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.14);}
.nav--ink .btn--white:hover{background:rgb(var(--purple-accent));color:#fff;}
.nav--ink .burger{background:rgba(18,18,18,.06);border-color:rgba(18,18,18,.14);}
.nav--ink .burger span,
.nav--ink .burger span::before,
.nav--ink .burger span::after{background:var(--ink-dark);}
.nav--ink .nav__logo{color:var(--ink-dark);}

/* the rebuilt-site plate now sits inside the purple band, so its caption and
   frame have to read on dark rather than on paper */
.nine .csfig figcaption{color:rgba(255,255,255,.62);}
.nine .csfig img{border-color:rgba(255,255,255,.12);}





/* ---------- thank you page ----------
   The same shape the other client sites use: a white centred page rather than
   a hero and a stack of sections. A tick, the confirmation, what happens next
   in a card, then two ways to keep going. Nav sits on the light ground, so it
   takes the ink treatment. */
.ty{
  min-height:100svh;
  display:flex;flex-direction:column;
  border-radius:var(--radius-main);
  background:var(--paper);
  color:var(--ink-dark);
  overflow:hidden;
}
.ty .nav{color:var(--ink-dark);}
.ty .nav__link{
  border-color:rgba(18,18,18,.12);background:rgba(18,18,18,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);color:rgba(18,18,18,.78);
}
.ty .nav__link:hover{background:rgba(18,18,18,.09);color:var(--ink-dark);}
.ty .callus__label{color:rgba(18,18,18,.56);}
.ty .callus__number{color:var(--ink-dark);}
.ty .nav__right::before{background:rgba(18,18,18,.12);}
.ty .btn--white{background:var(--ink-dark);color:#fff;}
.ty .burger{background:rgba(18,18,18,.06);border-color:rgba(18,18,18,.14);}
.ty .burger span,.ty .burger span::before,.ty .burger span::after{background:var(--ink-dark);}
.ty__body{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:clamp(3rem,7vw,6rem) var(--edge) clamp(3.5rem,7vw,6rem);
}
.ty__tick{
  display:flex;align-items:center;justify-content:center;
  width:4.25rem;height:4.25rem;border-radius:50%;
  background:var(--lime);color:var(--ink-dark);
}
.ty__tick svg{width:1.9rem;height:1.9rem;}
.ty h1{
  margin:1.75rem 0 0;max-width:20ch;
  color:var(--ink-dark);
  font-family:var(--font-head);
  font-size:clamp(2rem,4.2vw,3.25rem);
  font-weight:700;line-height:1.04;letter-spacing:-.035em;
  text-wrap:balance;
}
.ty__lede{
  margin:1.1rem 0 0;max-width:52ch;
  font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.65;
  color:rgba(18,18,18,.68);text-wrap:pretty;
}
.ty__lede a{color:var(--ink-dark);text-decoration:underline;text-underline-offset:.25em;}
.ty__card{
  width:100%;max-width:40rem;
  margin:clamp(2.25rem,4vw,3rem) 0 0;
  padding:clamp(1.5rem,3vw,2.25rem);
  border:1px solid rgba(18,18,18,.1);
  border-radius:1.5rem;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 14px 34px rgba(0,0,0,.06);
  text-align:left;
}
.ty__card-title{
  margin:0 0 1.25rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(18,18,18,.5);
}
.ty__steps{
  counter-reset:ty;list-style:none;
  display:flex;flex-direction:column;gap:1.25rem;margin:0;padding:0;
}
.ty__steps li{
  counter-increment:ty;position:relative;padding-left:2.5rem;
  display:flex;flex-direction:column;gap:.3rem;
}
.ty__steps li::before{
  content:counter(ty);position:absolute;left:0;top:-.1rem;
  display:flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;border-radius:50%;
  background:rgba(var(--purple-accent),.1);color:rgb(var(--purple-accent));
  font-family:var(--font-head);font-size:.875rem;font-weight:700;
}
.ty__steps b{font-family:var(--font-head);font-size:1.0625rem;font-weight:700;letter-spacing:-.018em;}
.ty__steps span{font-size:.9375rem;line-height:1.6;color:rgba(18,18,18,.66);}
.ty__actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;
  margin:clamp(2rem,3.5vw,2.75rem) 0 0;
}
.ty .btn--ghost{
  background:#fff;color:var(--ink-dark);
  border:1px solid rgba(18,18,18,.14);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ty .btn--ghost:hover{border-color:rgba(18,18,18,.28);}
.ty__back{margin:1.5rem 0 0;}
.ty__back a{font-size:.9375rem;color:rgba(18,18,18,.6);text-decoration:underline;text-underline-offset:.25em;}
.ty__back a:hover{color:var(--ink-dark);}

/* ---- square sections, here too ----
   global.css squares every section that is a band of the page rather than a
   panel on it. This file loads after it and sets the radius on .band and
   .badge, so the same decision has to be repeated here or the service pages
   keep corners the rest of the site has dropped. */
.band,.badge,.phero,.cshero,.csdoc,.ty,.gal,.faq,.trust{border-radius:0;}
.band.band--dark,.call,.whyus{border-radius:var(--radius-main);}

/* the two white strips, the press titles and the certifications, were
   running one straight into the other, which read as one strip broken in
   half by a grey line. The certifications keep the page's own paper so only
   one of the two is white. */
.badge + .badge{
  background:var(--paper);
  border-top:1px solid rgba(18,18,18,.08);
}

/* the studio rows: this file had the old collage's dark ground and its
   gutters, which squeezed three drifting rows into the left third of a navy
   panel */
.gal{
  background:var(--paper);
  color:var(--ink-dark);
  padding-left:0;padding-right:0;
}

/* the same decision, repeated here because this file sets .band and .badge
   margins after global.css has run */
.band,.badge,.phero,.cshero,.csdoc,.ty,.gal,.faq,.trust,.cases,.voices{margin-top:0;}
.band.band--dark,.call,.whyus{margin-top:var(--shell);}
section.call + section,
section.whyus + section,
section.band--dark + section{margin-top:var(--shell);}
.phero,.cshero{border-radius:var(--radius-main);}

/* ---- review pass ---- */
/* the certification strip: every logo in the same box, as the homepage
   strip does it, rather than each at its own height */
.badge__row{gap:clamp(1.25rem,3vw,2.75rem);}
.badge__row img,.badge__row img.is-wide,.badge__row img.is-framed{
  height:clamp(2.75rem,4vw,3.5rem);width:clamp(6rem,9vw,8.5rem);
  object-fit:contain;border:0;border-radius:0;
}
.badge--press .badge__row img{width:clamp(7rem,11vw,10rem);height:clamp(2rem,3vw,2.75rem);}
/* the floating cards over the terms photograph were hanging past its edge */
.terms__float--top{left:1.25rem;right:auto;max-width:min(70%,22rem);}
.terms__float--bottom{right:1.25rem;left:auto;max-width:min(70%,22rem);}
.terms--flip .terms__float--top{left:auto;right:1.25rem;}
@media (max-width:1024px){
  .terms__float--top,.terms__float--bottom,.terms--flip .terms__float--top{max-width:none;}
}
/* the three price cards were centred on the cross axis, so with three
   different heights their tops landed 9 and 12px apart. They stretch to one
   height and line up. */
.pgrid{align-items:stretch;}
.pcard{height:100%;}

/* ---- the enquiry thank-you page ----
   The generic thank-you page runs a numbered "what happens next" list. This
   one is what the specialist will do on the call, so it is a list of ticks
   rather than steps, and it carries a second block underneath for the people
   who would rather not wait for the call to be arranged. */
.ty__points{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.85rem;}
.ty__points li{
  display:flex;align-items:flex-start;gap:.75rem;
  font-size:1.0625rem;line-height:1.45;color:var(--ink-dark);text-align:left;
}
.ty__points li svg{
  flex:0 0 auto;
  width:1.4rem;height:1.4rem;padding:.32rem;margin-top:.05rem;
  border-radius:50%;
  background:var(--lime);color:var(--ink-dark);
}
.ty__sooner{
  max-width:34rem;margin:clamp(1.75rem,3vw,2.5rem) auto 0;
  padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid rgba(18,18,18,.12);
}
.ty__sooner-title{
  margin:0;
  font-family:var(--font-head);
  font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--ink-dark);
}
.ty__sooner-copy{
  margin:.65rem 0 0;
  font-size:1rem;line-height:1.6;color:#54545a;text-wrap:balance;
}
.ty__sooner .ty__actions{margin-top:1.5rem;}

/* ---- service pages, in line with the homepage ----
   The certification strips were square bands butting the sections either
   side, which is the join the homepage stopped doing. They are their own
   rounded cards on the page ground with the gutter around them, like the
   strip under the strategy call. */
.badge{
  margin:var(--shell) 0 0;
  border-radius:var(--radius-main);
  background:#fff;
}
.badge + .badge{margin-top:var(--shell);border-top:0;background:var(--paper);}
section.badge + section{margin-top:var(--shell);}

/* the terms block sat on the same paper as the section above and below it,
   so the three ran together. It takes its own ground, one step warmer, and
   the photograph sits on it rather than on the page. */
.terms,.band--paper.terms{
  background:
    radial-gradient(ellipse 60% 55% at 88% 8%, rgba(var(--purple-accent),.07) 0%, rgba(var(--purple-accent),0) 66%),
    #ECEAE3;
}
.terms .terms__float{background:#fff;}

/* ---- the service hero copy ----
   The heading was capped at 16ch, which broke "Meta Ads Agency for Small &
   Medium Businesses" across three lines and left the lede running under the
   photograph. The column is wider and the cap is on the column rather than
   the characters, so the heading breaks where the words allow. */
.phero h1{max-width:24ch;}
.phero__lede{max-width:42rem;}
.phero__copy,.phero__in > div:first-child{max-width:none;}
/* This block used to carry a wider scrim on .phero::after. It never rendered:
   the rule sets a background and nothing else, and a pseudo-element with no
   content property is not generated at all. The scrim that actually paints is
   .phero__scrim, and the wash that replaced this one is at the foot of this
   file. */
/* the converted certification strips take the homepage's card treatment; the
   press strip keeps its label above the row */
.accbar--press .acc{padding-top:.75rem;}
.acc__label{
  margin:0;padding:clamp(1.5rem,2.5vw,2rem) var(--gutter) 0;
  text-align:center;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(18,18,18,.5);
}

/* ---- one scale on the service and inner pages too ----
   Six section heads on these pages were still on the size they were built
   at: 40, 44, 46 and 52px against the 48 every head on the homepage takes.
   They are the same rank in the page, so they take the same type. The case
   study's in-article headings and the privacy page's block headings stay
   where they are: those are a rank below a section head, not the same one. */
.band.majors > h2,
.phead h2,
.terms__copy h2,
.terms > .terms__copy > h2,
.whyus__head h2,
.band--paper > h2,
.band > h2{
  font-family:var(--font-head);
  font-size:clamp(2rem,3.4vw,3rem);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:600;
  text-wrap:balance;
}

/* ---- one dark ----
   Four near-blacks were in play across the site: #1C1729 on most dark
   panels, #18181B on the tilted strip, #17102B and #16131F elsewhere. The
   strip and the odd ones take the panel colour, so every dark block on the
   site is the same dark. */
.tilt{
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 66%),
    #1C1729;
}
/* the dark bands' heads sit a hair tighter than the rest; same rank, same
   line */
.band--dark h2,.band.nine h2,.band.ctband h2{line-height:1.08;}
/* the last two off-palette darks: the nine-workstream band and the case
   study hero */
.band.nine,.band.nine.band--dark{
  background:
    radial-gradient(ellipse 70% 60% at 8% 0%, rgba(var(--purple-accent),.24) 0%, rgba(var(--purple-accent),0) 62%),
    #1C1729;
}
.cshero{background-color:#1C1729;}
/* the floating cards swap sides: the top one was landing over the face in
   the photograph and the bottom one over the laptop */
.terms__float--top{left:auto;right:1.25rem;}
.terms__float--bottom{right:auto;left:1.25rem;}
.terms--flip .terms__float--top{left:1.25rem;right:auto;}
.terms--flip .terms__float--bottom{right:1.25rem;left:auto;}
/* the press strip is a card, so it needs the gutter under it as well as
   over it: the tilted strip below was butting straight onto its bottom edge
   and cropping the logo row */
.accbar{margin:var(--shell) 0;}
.accbar + section,.accbar + .tilt{margin-top:0;}
.accbar--press .acc{padding-bottom:clamp(1.5rem,2.5vw,2rem);}
/* the same, after this file's own radius rules have run */
.phero,.cshero{
  margin-left:calc(var(--shell) * -1);
  margin-right:calc(var(--shell) * -1);
  margin-top:0;
  border-radius:0;
}

/* the hero is pulled up over the page gutter so it starts at the top of the
   window: without it a strip of page ground sat above the photograph */
.phero,.cshero{margin-top:calc(var(--shell) * -1);}

/* the same rule, after this file's own margins have run */
.call,.whyus,.band.band--dark,.accbar,.picker{
  margin-top:var(--shell);
  margin-bottom:var(--shell);
}
.call + *,
.whyus + *,
.band.band--dark + *,
.accbar + *,
.picker + *{margin-top:0;}

/* ---- the contact page leads with the enquiry panel ----
   A photograph hero on the page whose whole job is the form pushed the form
   below the fold for no return. The hero is the nav on the site's dark now,
   the panel sits directly under it with the page's own gutter, and the
   breadcrumb rides the top of the panel. */
.phero--bare{
  min-height:0;
  display:block;
  background:#1C1729;
  padding-bottom:0;
}
.phero--bare .nav{position:relative;z-index:2;}
.cta__crumbs{
  max-width:var(--max);margin:0 auto clamp(1.25rem,2vw,1.75rem);
  padding:0 var(--gutter);
}
.cta__crumbs .crumbs{color:rgba(255,255,255,.6);}
.cta__crumbs .crumbs a{color:rgba(255,255,255,.8);}
.cta__crumbs .crumbs a:hover{color:#fff;}
.phero--bare + .cta{margin-top:var(--shell);}
/* the panel's heading is the page's h1 here, so it takes the h2's type */
.cta__panel h1{
  margin:0;max-width:34rem;
  font-family:var(--font-head);
  font-size:clamp(2rem,3.4vw,3rem);
  line-height:1.08;letter-spacing:-.035em;font-weight:600;
  color:var(--ink-dark);text-wrap:balance;
}


/* ---- the logo rows breathe ----
   Five logos in a 1400 card were sitting in the middle third of it. The row
   spreads to the card's own measure and the gap grows with it. */
.accbar .acc{gap:clamp(2rem,5vw,5.5rem);}
.accbar--press .acc{gap:clamp(2.25rem,6vw,6.5rem);}

/* the flipped block put its top card over a face. It goes to the top right,
   which is glass and ceiling in that frame, and stays clear of the card at
   the foot. */
.terms--flip .terms__float--top{left:auto;right:1.25rem;top:1.5rem;bottom:auto;max-width:min(58%,19rem);}
.terms--flip .terms__float--bottom{left:1.25rem;right:auto;bottom:1.5rem;max-width:min(66%,21rem);}

/* ---- the AI engine logos ----
   Each is dark artwork on its own white plate, so on the section's paper
   they read as four mismatched rectangles with seams between them. One white
   pill holds the line and the plates disappear into it. */
.ai__engines{
  display:inline-flex;align-items:center;flex-wrap:wrap;
  gap:.5rem 1.1rem;
  margin:0 0 1.35rem;
  padding:.55rem 1.15rem;
  border-radius:var(--radius-full);
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(18,18,18,.08), 0 1px 2px rgba(0,0,0,.04);
}
.ai__engines img{height:1.15rem;width:auto;display:block;}
/* the first of the ten is the one people have not heard of yet, so it is
   lifted rather than left to blend into a grid of nine others */
.ncard--lead{
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%, rgba(var(--purple-accent),.34) 0%, rgba(var(--purple-accent),0) 62%),
    rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(var(--purple-accent),.45), 0 18px 44px rgba(0,0,0,.28);
}
.ncard--lead::before{opacity:.9;}
.ncard--lead .ncard__ico{background:rgb(var(--purple-accent));color:#fff;}
.ncard--lead h3{color:#fff;}


/* ============================================================
   THE HERO PHOTOGRAPH TAKES THE BRAND'S COLOUR
   ============================================================
   Every service hero opened on a full-bleed photograph in whatever colour the
   room happened to be. The SEO one is a green and yellow office, Google Ads is
   warm brown timber, Meta is something else again: three pages, three colour
   schemes, none of them the site's. Next to the homepage, which is a plum
   ground with one video card on it, they read as a different website, and the
   photograph competed with the headline instead of sitting behind it.

   The fix is the case study hero's treatment applied to the photograph: the
   same two plum radials over the same near-black, with most of the
   photograph's own colour taken out underneath. It is deliberately not a
   different photograph, because the problem was never the subject.

   Two layers rather than one. Desaturating on its own leaves a grey
   photograph, which reads as a mistake. Tinting on its own leaves the
   original hues fighting up through the plum, and a yellow wall under a
   purple wash goes brown. Taking the colour out first is what lets the tint
   be the colour you see. */
.phero__media{
  /* was saturate(.18), which went with a heavy plum wash over the top. The
     wash is a fraction of what it was, so the photograph is a photograph */
  filter:saturate(1) contrast(1.02) brightness(.92);
}
/* The wash rides the scrim, not the media, for one reason: filter applies to
   an element's whole subtree, so a tint painted inside .phero__media would be
   desaturated by the line above along with the photograph. .phero__scrim is a
   sibling, already in the markup on all six pages, and already sits above the
   photograph.

   The numbers are matched to the homepage rather than invented. Sampling its
   hero gives #1C1729 across most of the frame and #2A1459 where the violet
   blooms behind the headline, so that is the ground painted here and that is
   where the bloom is put: bottom left, under the copy, not top left. The
   photograph reads through at about a quarter, which is enough for texture
   and not enough to argue with the type.

   The original diagonal is listed last so it paints underneath everything
   else. It is what holds the contrast under the copy; the plum above it is a
   colour pass over the whole frame, not a legibility layer. */
.phero__scrim{
  /* Legibility only. No colour pass: two neutral gradients, one up from the
     foot and one in from the left, meeting under the copy and gone by the
     middle of the frame. The photograph is the photograph. */
  background:
    linear-gradient(to top,
      rgba(var(--scrim),.76) 0%,
      rgba(var(--scrim),.44) 32%,
      rgba(var(--scrim),.14) 60%,
      rgba(var(--scrim),0) 88%),
    linear-gradient(to right,
      rgba(var(--scrim),.68) 0%,
      rgba(var(--scrim),.40) 30%,
      rgba(var(--scrim),.12) 54%,
      rgba(var(--scrim),0) 74%);
}

/* the light bar again: .phero--nav .nav and .phero--bare .nav both pin the
   nav relative at the same specificity as .nav.is-stuck, and this sheet
   loads second, so the stuck geometry has to be restated here or the bar
   never leaves the flow on an inner page */
.phero .nav.is-stuck,.nav.is-stuck{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:.8rem max(calc(var(--shell) + var(--gutter)), calc((100% - var(--max)) / 2));
}

/* ---- the hero frame, balanced ----
   The body is pushed to the foot of a 54rem frame, so at 1440 there were
   134px of air above the breadcrumb and 64 below it and the hero read as
   bottom-heavy. The frame is shorter and the body sits in the middle of what
   is left of it, so the two gaps are the same. */
.phero--nav{min-height:min(46rem,88svh);}
.phero--nav .phero__body{margin-top:auto;margin-bottom:auto;}

/* ---- contact page ----
   Hero, enquiry block, footer. The block sits on the page ground the way a
   homepage section does: a cream box inset by the page gutter with the white
   card inside it, rather than the homepage's purple field. */
.phero--short{min-height:min(30rem,56svh);}
.cta--paper{
  margin:var(--shell) 0;
  padding:clamp(2.5rem,5vw,5rem) var(--edge);
  border-radius:var(--radius-main);
  background:var(--paper);
}
.cta--paper::before,.cta--paper::after{display:none;}
.cta--paper .cta__panel{box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 60px rgba(0,0,0,.08);}
.cta--paper .cta__panel h2{font-size:clamp(1.9rem,3.2vw,2.6rem);}
@media (max-width:640px){
  .cta--paper{padding:clamp(1.75rem,6vw,2.5rem) var(--gutter);}
}

/* With the wash down to a legibility scrim, a few frames put a laptop screen
   or a lit wall directly behind the type. A soft shadow buys that back
   without darkening the photograph: the heading on the Digital PR hero sat
   at 2.7:1 against the brightest fifth of what is behind it, the breadcrumb
   on the SEO hero at 3.1:1. */
.phero__body .crumbs,.phero h1,.phero__lede{
  text-shadow:0 1px 2px rgba(0,0,0,.42), 0 2px 26px rgba(0,0,0,.42);
}