@charset "UTF-8";
/* ============================================================
   PrimeStart — production stylesheet
   Consolidated from the 7 approved reference designs.

   Order:
     1. Fonts (self-hosted)
     2. Design tokens
     3. Reset + base
     4. Typography
     5. Layout utilities
     6. Buttons + icons
     7. Site header + navigation
     8. Mobile navigation
     9. Sticky CTA
    10. Shared components
    11. FAQ
    12. Final CTA
    13. Footer
    14. Motion
    15. Responsive

   Values are taken verbatim from the approved pages. Where two
   pages used different values for the SAME class, the majority
   value is the base and the outlier becomes a modifier — each
   such case is marked RECONCILED.
   ============================================================ */

/* ============================================================
   1. FONTS — self-hosted, never Google Fonts
   ============================================================ */
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   2. DESIGN TOKENS — locked palette, do not alter
   ============================================================ */
:root{
  --paper:#FAF7F1;
  --white:#FFFFFF;
  --ink:#12212F;
  --ink-2:#2B3B4B;
  --muted:#5C6C7B;
  --line:#E6E0D6;
  --line-2:#F0EBE2;
  --orange:#D9620E;
  --orange-dk:#B44E08;
  --amber:#F0A03C;
  --wash:#FBF1E4;

  /* dark-section support colours, extracted from the approved pages */
  --ink-deep:#0D1926;
  --on-dark:#E7EDF3;
  --on-dark-2:#D6E0E8;
  --on-dark-muted:#A3B5C4;
  --on-dark-dim:#93A5B4;
  --on-dark-faint:#8298A9;

  --w:1200px;
  --pad:36px;
  --hdr:84px;

  --fh:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;   /* structure */
  --fb:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;      /* reading   */
}

/* ============================================================
   3. RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:17px;line-height:1.65;letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
}
body.nav-open{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0}

/* Accessibility: skip link (added in production — absent from mockups) */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;font-family:var(--fh);font-weight:700;
  padding:14px 22px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4{margin:0;font-family:var(--fh)}
h1{font-size:clamp(38px,4.3vw,56px);font-weight:800;line-height:1.045;letter-spacing:-0.042em}
h2{font-size:clamp(30px,3.25vw,43px);font-weight:700;line-height:1.09;letter-spacing:-0.035em}
h3{font-size:23px;font-weight:700;line-height:1.22;letter-spacing:-0.028em}

/* The design uses a smaller sub-heading inside h2 sections. It is marked up as
   an h3 so the document outline never skips a level, and carries .as-h4 to
   keep the exact visual weight the approved design used for an h4. Every
   selector that used to target h4 targets .as-h4 instead - in this file and in
   the generated page stylesheets. */
h4,.as-h4{font-size:17.5px;font-weight:700;line-height:1.35;letter-spacing:-0.022em}
/* same idea one level up: an h2 that must look like an h3 */
.as-h3{font-size:23px;font-weight:700;line-height:1.22;letter-spacing:-0.028em}

/* RECONCILED — h1 max size varied by page (60/56/52). Base is 56px;
   these modifiers reproduce the other two exactly. */
.h1-lg{font-size:clamp(40px,4.55vw,60px);line-height:1.035}
.h1-sm{font-size:clamp(36px,4vw,52px);line-height:1.06;letter-spacing:-0.04em}

.lede{color:var(--muted);font-size:18.5px;line-height:1.6;max-width:52ch}
h3 + p{margin-top:12px}
p + .btn,p + .btns,.lede + .btn,ul + .btn{margin-top:26px}

.eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:24px;
  font-family:var(--fh);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--orange);
}
.eyebrow::before{content:"";width:30px;height:2px;border-radius:2px;background:var(--orange);flex:none}
/* Most eyebrows are two or three words and never wrap. A longer one can be
   wrapped in a <span> so its lines balance instead of leaving a short tail -
   the plain text form is an anonymous flex item, which text-wrap cannot reach. */
.eyebrow > span{text-wrap:balance}

.link-u{
  font-family:var(--fh);font-size:16px;font-weight:600;color:var(--orange);
  letter-spacing:-0.018em;border-bottom:1px solid rgba(217,98,14,.35);padding-bottom:2px;
}
.link-u:hover{border-bottom-color:var(--orange)}

/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.sec{padding:112px 0}
.sec-sm{padding:76px 0}
.rule{border-top:1px solid var(--line)}
.band{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* phone-only content: hidden here, shown by assets/css/mobile.css (≤640px) */
.m-only{display:none}

.head{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end;margin-bottom:60px}
.head h2{max-width:15ch}          /* RECONCILED — London pages used 16ch (.head-wide) */
.head-wide h2{max-width:16ch}
.head .lede{padding-bottom:5px}
.head-solo{max-width:32ch;margin-bottom:48px}   /* RECONCILED — 30ch/32ch/36ch across pages */
.head-solo-narrow{max-width:30ch}
.head-solo-wide{max-width:36ch}
.head-solo h2 + .lede,.head-solo .lede{margin-top:18px}
/* The ways out of an empty search result. A dead end used to offer only "back
   to the homepage", which asks somebody who has already said what they wanted
   to start again. */
.idx-ways{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0}

/* dark sections — RECONCILED: pages 1-2 used .growth, pages 3+ used .dark.
   One class now; .growth kept only as a legacy alias during migration. */
.dark,.growth{background:var(--ink);color:var(--on-dark)}
.dark h2,.dark h3,.dark h4,
.growth h2,.growth h3,.growth h4{color:#fff}
.dark .lede,.growth .lede{color:var(--on-dark-muted)}
.dark .tick{color:var(--amber)}

/* ============================================================
   6. BUTTONS + ICONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 26px;border-radius:6px;font-family:var(--fh);
  font-weight:700;font-size:16px;letter-spacing:-0.022em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 1px 2px rgba(180,78,8,.28)}
.btn-primary:hover{background:var(--orange-dk)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#1D3145}
.btn-ghost{background:transparent;border-color:#DCD4C7;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--white)}
.btn-ghost-dk{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost-dk:hover{border-color:#fff;background:rgba(255,255,255,.07)}
/* outlined in the primary orange: a secondary action that still belongs to the brand */
.btn-outline{background:transparent;border-color:var(--orange);color:var(--orange-dk)}
.btn-outline:hover{background:var(--orange);color:#fff}
.btn-lg{padding:17px 32px;font-size:17px}
.btn-sm{padding:11px 19px;font-size:15px}
.btn:disabled{background:#E7DFD2;color:#9C9284;box-shadow:none;cursor:not-allowed}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}

/* the SEO member price beside a standard add-on price (20% off, from primestart_member_price()) */
.member-price{display:block;margin-top:5px;font-family:var(--fh);font-size:13.5px;font-weight:700;letter-spacing:-0.015em;color:var(--orange-dk)}
.member-price::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin:0 7px 2px 0}

.tick{width:17px;height:17px;flex:none;color:var(--orange)}
.cross{width:17px;height:17px;flex:none;color:#B9B0A2}
.dot{width:6px;height:6px;border-radius:50%;background:#C9D0D7;flex:none;margin-top:9px}

/* ============================================================
   7. SITE HEADER + NAVIGATION
   ============================================================ */
header.site{
  position:sticky;top:0;z-index:80;background:rgba(250,247,241,.94);
  -webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,background-color .2s ease;
}
header.site.stuck{border-bottom-color:var(--line);background:rgba(250,247,241,.985)}
header.site .wrap{display:flex;align-items:center;gap:36px;height:var(--hdr)}

/* Between roughly 1200px and 1330px the six navigation labels, the telephone
   number, the sign-in and the button need more room than the page has, and
   .head-cta was pushed past the viewport - 11px of horizontal overflow on
   every page at 1280. Tightening the two gaps recovers 25px and nothing else
   moves. (Found 9 September 2026 while measuring the homepage.) */
@media (min-width:1041px) and (max-width:1330px){
  header.site .wrap{gap:26px}
  nav.main,nav.main ul{gap:19px}
}

.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo img{height:32px;width:auto}
.logo .mark{width:31px;height:31px;border-radius:9px;background:var(--orange);display:grid;place-items:center;flex:none}
.logo .mark span{
  display:block;width:11px;height:11px;background:#fff;border-radius:2px;
  transform:rotate(45deg) translateY(-1px);clip-path:polygon(0 0,100% 0,100% 100%);
}
.logo .word{font-family:var(--fh);font-weight:800;font-size:21.5px;letter-spacing:-0.05em}

nav.main{display:flex;gap:24px;align-self:stretch}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:24px}
nav.main > ul > li{display:flex;align-items:center;gap:4px}
nav.main > ul > li > a{
  display:inline-block;white-space:nowrap;
  font-family:var(--fh);font-size:15px;font-weight:600;letter-spacing:-0.022em;
  color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
nav.main > ul > li > a:hover{color:var(--ink);border-bottom-color:var(--orange)}
nav.main > ul > li > a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--orange)}
nav.main .has-mega:hover > a,
nav.main .has-mega.open > a{color:var(--ink);border-bottom-color:var(--orange)}

/* --- mega menu: chevron button (keyboard + touch), panel below the header --- */
.mega-toggle{
  display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer;margin-top:1px;
  transition:color .15s ease,background-color .15s ease,transform .2s ease;
}
.mega-toggle:hover,.has-mega:hover .mega-toggle{color:var(--ink);background:var(--wash)}
.mega-toggle[aria-expanded="true"]{color:var(--orange);transform:rotate(180deg)}
.mega-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.mega{
  position:absolute;left:0;right:0;top:100%;z-index:81;
  background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 30px 50px -30px rgba(18,33,47,.35);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .22s var(--ease),visibility 0s linear .18s;
}
.has-mega:hover .mega,
.has-mega.open .mega{opacity:1;visibility:visible;transform:none;transition-delay:.06s,.06s,0s}
.has-mega:hover .mega{transition-delay:.12s,.12s,0s}
/* the list item is stretched to the header's full height, so there is no
   gap between the label and the panel for the pointer to fall through */
.has-mega{position:static}
/* (header.site .wrap sets the flex row for the bar; the panel's own .wrap
   must not inherit it, hence the header-scoped selectors here) */
header.site .mega-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:0;height:auto;align-items:stretch;padding:0 var(--pad)}
header.site .mega-in-wide{grid-template-columns:repeat(4,1fr)}
.mega-feature{
  padding:32px 36px 32px 0;margin-right:36px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;
}
.mega-feature .eyebrow{margin-bottom:12px}
.mega-price{display:flex;align-items:baseline;gap:8px;margin:0 0 14px}
.mega-price b{font-family:var(--fh);font-size:38px;font-weight:800;letter-spacing:-0.045em;line-height:1;color:var(--ink)}
.mega-price span{font-size:14px;color:var(--muted)}
nav.main .mega-lines{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.mega-lines li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-2)}
.mega-lines .tick{flex:none;margin-top:3px;color:var(--orange)}
.mega-feature-ctas{display:flex;align-items:center;gap:18px;margin-top:auto;flex-wrap:wrap}
.mega-more{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:-0.018em;color:var(--ink)}
.mega-more i,.mega-all i,.mega-foot-main i{font-style:normal;display:inline-block;transition:transform .2s var(--ease)}
.mega-more:hover i,.mega-all a:hover i,.mega-foot-main:hover i{transform:translateX(4px)}
.mega-col{padding:32px 24px 32px 0}
.mega-col + .mega-col{padding-left:8px}
.mega-h{
  /* display:block because .mega-h moved from <h3> to <span> (7 Sept 2026):
     the header must not emit headings above the page's own <h1>. A span is
     inline, so without this the label would sit on the links' line and the
     14px margin below would not apply. */
  display:block;
  font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;
}
nav.main .mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-col li a{
  display:block;padding:6px 0;font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.018em;
  color:var(--ink);border-bottom:0;line-height:1.3;
}
.mega-col li a small{display:block;font-family:var(--fb);font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:2px}
.mega-col li a:hover{color:var(--orange-dk)}
/* industry links carry a small photograph of the trade (owner request, 4 Sept 2026; revert by removing the thumb) */
.mega-col li a.has-thumb{display:flex;align-items:center;gap:11px;padding:4px 0}
.mega-thumb{width:28px;height:28px;border-radius:7px;object-fit:cover;flex:none;background:var(--wash);box-shadow:0 0 0 1px rgba(18,33,47,.06);transition:transform .2s var(--ease)}
.mega-col li a.has-thumb:hover .mega-thumb{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.mega-thumb{transition:none}}
.mega-all{margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.mega-all a{color:var(--orange-dk)}
.mega-foot{
  grid-column:1/-1;display:flex;align-items:center;gap:28px;
  border-top:1px solid var(--line);padding:16px 0 18px;
}
.mega-foot-main{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em;color:var(--orange-dk)}
.mega-foot-alt{font-size:14px;color:var(--muted)}
.mega-foot-alt:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .mega,.mega-toggle,.mega-more i,.mega-all i,.mega-foot-main i{transition:none}
}

.head-cta{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none}
.head-phone{display:flex;align-items:center;gap:10px;white-space:nowrap}
.head-phone .ico{
  width:34px;height:34px;border-radius:50%;background:var(--wash);
  display:grid;place-items:center;flex:none;color:var(--orange);
}
.head-phone .t{display:block;font-size:12px;color:var(--muted);line-height:1.2;letter-spacing:0}
.head-phone .n{
  display:block;font-family:var(--fh);font-size:15px;font-weight:700;
  letter-spacing:-0.025em;line-height:1.3;
}
.head-phone:hover .n{color:var(--orange)}
.head-div{width:1px;height:30px;background:var(--line);flex:none}
/* existing customers: a quiet sign-in link beside the primary action */
.head-login{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--fh);font-size:14px;font-weight:600;letter-spacing:-0.015em;color:var(--ink-2);
  min-height:36px;padding:0 2px;
}
.head-login svg{color:var(--muted);flex:none;transition:color .15s ease}
.head-login:hover{color:var(--orange-dk)}
.head-login:hover svg{color:var(--orange)}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;
  background:var(--white);cursor:pointer;padding:0;place-items:center;align-content:center;
  grid-auto-rows:max-content;flex:none;
}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transform-origin:center;transition:transform .22s ease,opacity .18s ease}
.burger span + span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* ============================================================
   8. MOBILE NAVIGATION
   Rebuilt 5 September 2026, second pass. The first rebuild was one
   calm column, but that read as twelve identical rows in a list
   1,010px long inside a 706px panel, with Get started below the
   fold. Now: the two products lead with room to breathe, the other
   ten destinations sit in a two-column grid that halves the height
   and can be scanned, and contact plus the actions are pinned so
   only the middle scrolls. The panel never shows a price.
   ============================================================ */
.mobile-nav{
  display:none;position:fixed;left:0;right:0;top:var(--hdr);bottom:0;z-index:70;
  background:var(--paper);overflow:hidden;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .2s ease,transform .22s ease;
}
.mobile-nav.open{opacity:1;transform:none;pointer-events:auto}
.mobile-nav ul{list-style:none;margin:0;padding:0}

/* the panel is a column: the middle scrolls, the foot stays put */
.m-in{display:flex;flex-direction:column;height:100%;min-height:0}
.m-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px var(--pad) 18px;
}
.m-foot{
  flex:none;border-top:1px solid var(--line);background:var(--white);
  padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom,0px));
}

/* section labels */
.m-k{
  margin:0 0 10px;font-family:var(--fh);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.m-k + .m-list{margin-bottom:26px}

/* --- the two products, as cards: the first thing under a thumb --- */
.m-list-plans{display:grid;gap:10px}
.m-list-plans a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:72px;padding:14px 16px;border-radius:14px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(18,33,47,.05),0 14px 26px -20px rgba(18,33,47,.55);
}
.m-row{display:flex;flex-direction:column;gap:3px;min-width:0}
.m-row-name{font-family:var(--fh);font-size:19px;font-weight:800;letter-spacing:-0.035em;line-height:1.15}
.m-row-note{font-size:14px;color:var(--muted);line-height:1.4}
.m-list-plans a[aria-current="page"]{border-color:rgba(217,98,14,.45)}
.m-list-plans a[aria-current="page"] .m-row-name{color:var(--orange-dk)}
.m-go{
  flex:none;width:9px;height:9px;border-right:2px solid var(--orange);border-top:2px solid var(--orange);
  transform:rotate(45deg);margin-right:3px;
}

/* --- everything else: one column, the whole row a target --- */
.m-links{border-top:1px solid var(--line)}
.m-links a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;min-height:56px;padding:8px 2px;
  border-bottom:1px solid var(--line);
  font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.025em;
  line-height:1.25;color:var(--ink);
}
.m-links .m-go{border-color:var(--line);border-right-width:2px;border-top-width:2px;width:8px;height:8px}
.m-links a[aria-current="page"]{color:var(--orange-dk)}
.m-links a[aria-current="page"] .m-go{border-right-color:var(--orange);border-top-color:var(--orange)}

/* --- pinned foot: two real actions, then three quiet utilities --- */
.m-actions{display:grid;gap:9px}
.m-actions .btn{width:100%;padding:15px;min-height:52px;font-size:16px}
.m-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.m-quick a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:52px;padding:4px 2px;border-radius:10px;
  font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.015em;
  color:var(--ink-2);text-align:center;
}
.m-quick a:hover{background:rgba(18,33,47,.05);color:var(--ink)}
.m-ci{color:var(--orange);flex:none}

/* short phones: tighten rather than scroll */
@media (max-height:720px){
  .m-body{padding-top:10px}
  .m-list-plans a{min-height:66px;padding:12px 14px}
  .m-row-name{font-size:18px}
  .m-row-note{font-size:13.5px}
  .m-k + .m-list{margin-bottom:20px}
  .m-links a{min-height:52px;font-size:16.5px}
  .m-quick a{min-height:50px;font-size:12px}
}
/* ============================================================
   9. STICKY CTA (mobile conversion bar)
   ============================================================ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(18,33,47,.5);
  padding:10px var(--pad);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(115%);transition:transform .24s ease;
}
/*
 * site.js dismisses this bar with `bar.hidden = true`, and its comment says
 * that keeps it out of the tab order rather than merely out of sight. That
 * was only true above the mobile breakpoint: the phone rule below sets
 * `display:block`, which beats the browser's own `hidden` styling, so a
 * dismissed bar stayed in the accessibility tree and in the tab order while
 * sitting 115% below the viewport. Nothing visible, but a keyboard or screen
 * reader user could land in an off-screen bar. Same trap as .co-win on the
 * checkout; found by tools/qa/hidden-display-guard.ps1.
 */
.sticky-cta[hidden]{display:none}
.sticky-cta.on{transform:none}
.sticky-cta .in{display:flex;align-items:center;gap:14px;max-width:var(--w);margin:0 auto}
.sticky-cta .pr{font-family:var(--fh);font-size:19px;font-weight:800;letter-spacing:-0.042em;line-height:1.05;flex:none}
.sticky-cta .pr small{display:block;font-family:var(--fb);font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:3px}
.sticky-cta .btn{flex:1;padding:14px 16px;min-height:48px}
.sticky-cta .in.sticky-two{display:flex}
.sticky-cta .in.sticky-compact{display:none}
.sticky-plan{flex-direction:column;gap:2px;line-height:1.2;padding:10px 12px}
.sticky-plan b{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:-0.02em}

/* ============================================================
   10. SHARED COMPONENTS
   ============================================================ */

/* --- price display --- */
.amount{display:flex;align-items:baseline;gap:2px;font-family:var(--fh);letter-spacing:-0.055em}
.amount .cur{font-size:27px;font-weight:700;transform:translateY(-15px)}
.amount .num{font-size:58px;font-weight:800;line-height:.9}
.amount .per{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:-0.022em;margin-left:9px}
.dark .amount,.growth .amount{color:#fff}
.dark .amount .per,.growth .amount .per{color:#9DB0BF}

/* --- browser frame website preview --- */
.frame{
  border-radius:10px;overflow:hidden;border:1px solid rgba(18,33,47,.1);
  background:#fff;box-shadow:0 26px 54px -30px rgba(18,33,47,.45);
}
.dark .frame,.growth .frame{border-color:rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.chrome{height:36px;background:#E8E3DA;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #D8D2C7}
.chrome i{width:9px;height:9px;border-radius:50%;background:#C5BEB2;flex:none}
.chrome .url{
  margin-left:10px;background:#F8F6F2;border:1px solid #DCD6CB;border-radius:4px;
  font-size:11px;color:#7A736C;padding:3px 11px;flex:1;max-width:280px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shot{position:relative;aspect-ratio:16/10;background:#fff;overflow:hidden}
.shot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.stand{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.v-nav{height:34px;flex:none;display:flex;align-items:center;gap:16px;padding:0 22px;border-bottom:1px solid #EEEBE5;font-size:10px;color:#77808A;font-weight:500}
.v-logo{font-family:var(--fh);font-weight:800;font-size:11.5px;letter-spacing:.06em;color:var(--brand);margin-right:auto}
.v-btn{background:var(--brand);color:#fff;padding:4px 9px;border-radius:3px;font-size:9px;font-weight:600}
.v-hero{flex:1;display:flex;align-items:center;padding:0 22px;color:#fff;position:relative;background:linear-gradient(115deg,var(--brand) 0%,var(--brand-2) 100%)}
.v-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 78% 15%,rgba(255,255,255,.2),transparent 60%)}
.v-copy{position:relative;z-index:1;max-width:62%}   /* RECONCILED — homepage used 60% */
.v-h{font-family:var(--fh);font-size:19px;font-weight:700;line-height:1.16;letter-spacing:-0.035em}
.v-p{font-size:10.5px;opacity:.82;margin-top:7px;max-width:30ch;line-height:1.45}
.v-cta{display:inline-block;margin-top:13px;background:#fff;color:#1A1A1A;font-family:var(--fh);font-size:9.5px;font-weight:700;padding:6px 13px;border-radius:3px}
.v-cards{flex:none;height:28%;display:flex;gap:10px;padding:11px 22px;background:#FBFAF8;border-top:1px solid #EEEBE5}
.v-cards div{flex:1;border:1px solid #EDE9E2;border-radius:4px;background:#fff}

.frame.sm .chrome{height:26px;padding:0 10px;gap:5px}
.frame.sm .chrome i{width:6px;height:6px}
.frame.sm .chrome .url{font-size:9px;padding:2px 8px;margin-left:6px}
.frame.sm .shot{aspect-ratio:16/9}   /* RECONCILED — page 2 used 16/11 (.frame.sm.tall) */
.frame.sm.tall .shot{aspect-ratio:16/11}
.frame.sm .v-nav{height:22px;padding:0 14px;font-size:8px;gap:10px}
.frame.sm .v-logo{font-size:8.5px}
.frame.sm .v-btn{font-size:7px;padding:3px 6px}
.frame.sm .v-hero{padding:0 14px}
.frame.sm .v-h{font-size:12px}
.frame.sm .v-p{display:none}
.frame.sm .v-cta{font-size:7.5px;padding:4px 9px;margin-top:8px}
.frame.sm .v-cards{height:22%;padding:6px 14px;gap:6px}

.work-meta{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.work-meta h3{font-size:20px}
.work-meta .ind{font-size:14.5px;color:#93A6B6}

/* Placeholder labelling — design stand-ins must never read as real work */
.is-placeholder{position:relative}
.placeholder-note{
  margin-top:14px;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:-0.012em;
  color:#9A8F7E;background:#F2ECE1;border-radius:4px;padding:5px 10px;display:inline-block;
}
/* inside the portfolio caption row the badge sits inline, not stacked */
.work-meta .placeholder-note{margin-top:0}
.dark .placeholder-note,.work .placeholder-note{color:#B9C6D1;background:rgba(255,255,255,.08)}

/* --- grouped hairline lists --- */
.groups{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.groups > div{padding:32px 44px 36px 0;border-bottom:1px solid var(--line)}  /* RECONCILED — page 2 used 34px */
.groups > div:nth-child(2n){padding-left:44px;padding-right:0;border-left:1px solid var(--line)}
.groups h3{margin-bottom:4px;font-size:21px}
.groups ul{list-style:none;margin:16px 0 0;padding:0}
.groups li{display:flex;gap:11px;padding:6px 0;font-size:15.5px;line-height:1.5;align-items:flex-start;color:var(--ink-2)}
.g-lbl{font-family:var(--fh);font-size:13.5px;font-weight:700;letter-spacing:-0.018em;color:var(--orange);display:block;margin-bottom:12px}
.groups-note{margin-top:34px;font-size:15px;color:var(--muted);max-width:74ch;line-height:1.6}

/* --- two-column bordered panel --- */
.duo{border:1px solid var(--line);border-radius:14px;background:var(--white);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.duo-col{padding:38px 40px 34px}
.duo-col + .duo-col{border-left:1px solid var(--line)}
.duo-col .plan-name{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.025em;color:var(--ink-2);margin-bottom:14px}
.duo-col ul{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line-2)}
.duo-col li{display:flex;gap:11px;padding:9px 0;font-size:15.5px;line-height:1.5;align-items:flex-start}
.duo-col.duo-active{position:relative;box-shadow:inset 0 3px 0 0 var(--orange)}
.svc-best{color:var(--muted);font-size:16px;line-height:1.55;margin-top:12px}
.active-badge{
  display:inline-block;margin:-6px 0 14px;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:-0.012em;
  color:var(--orange);background:var(--wash);border-radius:100px;padding:5px 13px;
}

/* --- fact rows --- */
.facts{border-top:1px solid var(--line);background:#FBF9F5;margin:0}
.duo .facts{grid-column:1/-1}
.fact{display:grid;grid-template-columns:230px 1fr;gap:32px;padding:19px 40px;border-bottom:1px solid var(--line-2)}
.fact:last-child{border-bottom:0}
.fact dt{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.fact dd{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}

/* --- commit / isn't pair --- */
.honest{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.honest-col{border:1px solid var(--line);border-radius:14px;background:var(--white);padding:32px 34px}
.honest-col.no{background:#FBF9F5}
.honest-col h3{font-size:19px;margin-bottom:16px}
.honest-col ul{list-style:none;margin:0;padding:0}
.honest-col li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15.5px;line-height:1.5;border-bottom:1px solid var(--line-2)}
.honest-col li:last-child{border-bottom:0}
.honest-col.no li{color:var(--muted)}

/* --- mini list --- */
.mini-list{list-style:none;margin:26px 0 0;padding:0}
.mini-list li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:16px;line-height:1.5;color:var(--ink-2)}

/* --- trust strip --- */
.trust-strip{padding:34px 0}
.trust-wrap{display:flex}
.trust-item{flex:1;display:flex;align-items:center;gap:14px;padding:0 30px}
.trust-item:first-child{padding-left:0}
.trust-item:last-child{padding-right:0}
.trust-item + .trust-item{border-left:1px solid var(--line)}
.trust-icon{width:38px;height:38px;border-radius:50%;background:var(--wash);color:var(--orange);display:grid;place-items:center;flex:none}
.trust-item b{display:block;font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.trust-item span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}

/* --- chips --- */
.area-chip{
  font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.015em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:100px;padding:9px 17px;background:var(--white);
}
.area-chip-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink);transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.area-chip-link i{font-style:normal;color:var(--orange)}
.area-chip-link:hover{border-color:var(--orange);color:var(--orange-dk);background:var(--wash)}
.area-chip-region{color:var(--orange-dk);background:var(--wash);border-color:#F2DFC6;font-weight:700}
.area-chips,.trade-chips,.area-region-chips{display:flex;flex-wrap:wrap;gap:10px}
.area-region-chips{gap:11px;margin-bottom:16px}

/* --- WordPress trust note --- */
.wp-note{
  border:1px solid var(--line);border-radius:12px;background:var(--white);
  padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
}
.wp-note .as-h4{margin-bottom:7px}
.wp-note p{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:74ch}
.wp-note .mark-lg{width:44px;height:44px;border-radius:12px;background:var(--wash);color:var(--orange);display:grid;place-items:center;flex:none}
.dark .wp-note{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.dark .wp-note p{color:var(--on-dark-muted)}
.dark .wp-note .mark-lg{background:rgba(255,255,255,.08);color:var(--amber)}

/* --- steps --- */
/* numbered circle used by the condensed step lists (London page).
   Scoped deliberately: the homepage uses .step-marker instead, and an
   unscoped .step-n here collided with it. */
.steps-mini .step-n{
  width:34px;height:34px;border-radius:50%;background:var(--white);border:2px solid var(--orange-dk);color:var(--orange-dk);
  display:grid;place-items:center;font-family:var(--fh);font-weight:800;font-size:15px;margin-bottom:16px;
}

/* --- flow rows --- */
.flow{border-top:1px solid var(--line)}
.flow-row{display:grid;grid-template-columns:250px 1fr;gap:60px;padding:30px 0 32px;border-bottom:1px solid var(--line)}
.flow-n{font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:-0.015em;color:var(--orange);display:block;margin-bottom:10px}
.flow-row h3{max-width:16ch;font-size:21px}
.flow-row p{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:62ch}
.flow-row p + p{margin-top:14px}
.flow-cta{margin-top:44px;display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.flow-cta span{font-size:15px;color:var(--muted)}

/* --- DIY comparison table --- */
.diy-table{border-top:1px solid var(--line)}
.diy-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.diy-row > div{padding:22px 36px 22px 0;font-size:16.5px;line-height:1.5}
.diy-row > div:last-child{padding-left:36px;padding-right:0;border-left:1px solid var(--line);font-family:var(--fh);font-weight:600;letter-spacing:-0.022em}
.diy-row .a{color:var(--muted)}
.diy-cap{display:grid;grid-template-columns:1fr 1fr;padding-bottom:14px}
.diy-cap span{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:-0.02em;color:var(--ink-2)}
.diy-cap span:last-child{padding-left:36px}
.diy-close{margin-top:52px;font-family:var(--fh);font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-0.038em;max-width:26ch;line-height:1.14}

/* ============================================================
   10b. PORTFOLIO — scrolling website previews
   ============================================================ */
.frame-scroll .shot{aspect-ratio:16/10;overflow:hidden;position:relative}
.frame-scroll .page{
  position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;
  background:#fff;will-change:transform;
  transition:transform var(--dur,3.2s) cubic-bezier(.33,0,.2,1);
}
.frame-scroll .shot-real{position:absolute;inset:0;width:100%;height:auto;object-fit:cover;object-position:top center}
.frame-scroll:hover .page,.frame-scroll:focus-within .page{transform:translateY(var(--shift,0px))}

/* generated page bands */
.v-band{flex:none;padding:16px 22px;border-top:1px solid #EEEBE5;background:#fff}
.v-cards3{display:flex;gap:10px}
.v-card{flex:1;border:1px solid #EDE9E2;border-radius:5px;padding:10px;background:#FCFBF9}
.v-card b{display:block;font-family:var(--fh);font-size:8.5px;font-weight:700;color:#3B4650;margin-bottom:7px}
.v-card i{display:block;height:3px;border-radius:2px;background:#EDE9E2;margin-bottom:4px}
.v-card i:last-child{width:60%}
.v-split{display:flex;gap:14px;align-items:center}
.v-fig{flex:0 0 42%;height:74px;border-radius:5px;background:linear-gradient(125deg,var(--brand),var(--brand-2));opacity:.9}
.v-txt{flex:1}
.v-txt b{display:block;height:7px;width:55%;border-radius:3px;background:#D9D4CB;margin-bottom:8px}
.v-txt i{display:block;height:3px;border-radius:2px;background:#EDE9E2;margin-bottom:5px}
.v-txt i:last-of-type{width:70%}
.v-pill{display:inline-block;margin-top:8px;height:14px;width:64px;border-radius:3px;background:var(--brand)}
.v-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#FBFAF8}
.v-gal div{height:52px;border-radius:4px;background:linear-gradient(140deg,var(--brand),var(--brand-2));opacity:.82}
.v-gal div:nth-child(2){opacity:.62}
.v-gal div:nth-child(3){opacity:.74}
.v-gal div:nth-child(4){opacity:.55}
.v-list b{display:block;height:7px;width:40%;border-radius:3px;background:#D9D4CB;margin-bottom:10px}
.v-list i{display:block;height:3px;border-radius:2px;background:#EDE9E2;margin-bottom:7px}
.v-list i:nth-child(3){width:88%}
.v-list i:nth-child(4){width:76%}
.v-list i:last-child{width:64%}
.v-quote{background:#FBFAF8;text-align:center}
.v-quote i{display:block;height:4px;border-radius:2px;background:#E4DFD6;margin:0 auto 6px;width:72%}
.v-quote i:nth-child(2){width:56%}
.v-quote span{display:inline-block;margin-top:6px;height:5px;width:76px;border-radius:3px;background:#D9D4CB}
.v-ctaband{background:linear-gradient(120deg,var(--brand),var(--brand-2));text-align:center;padding:22px}
.v-ctaband b{display:block;height:8px;width:46%;margin:0 auto 10px;border-radius:3px;background:rgba(255,255,255,.85)}
.v-cta2{display:inline-block;height:16px;width:80px;border-radius:3px;background:#fff}
.v-foot{flex:none;display:flex;gap:10px;padding:14px 22px 20px;background:#12212F}
.v-foot span{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.v-foot span:first-child{flex:2}

@media (pointer:coarse){
  .frame-scroll .shot{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .frame-scroll .page{position:relative;transition:none}
  .frame-scroll:hover .page{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .frame-scroll .page{transition:none!important}
  .frame-scroll:hover .page,.frame-scroll:focus-within .page{transform:none!important}
}

/* --- project card --- */
.project-meta{margin-top:20px}
.project-meta h3,.project-name{font-size:20px;font-family:var(--fh);font-weight:700;line-height:1.22;letter-spacing:-0.028em}
.project-ind{margin-top:5px;font-family:var(--fh);font-size:14px;font-weight:600;letter-spacing:-0.018em;color:var(--orange-dk)}
.dark .project-ind,.work .project-ind{color:var(--amber)}
.project-sum{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:46ch}
.dark .project-sum,.work .project-sum{color:var(--on-dark-muted)}
.project-foot{margin-top:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.project-plan{
  font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.015em;
  color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:5px 13px;background:var(--white);
}
.dark .project-plan,.work .project-plan{color:var(--amber);border-color:rgba(240,160,60,.4);background:transparent}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 32px}
.work-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:44px 32px}

/* ============================================================
   10c. REVIEWS
   ============================================================ */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{
  margin:0;background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:30px 30px 26px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(18,33,47,.04);
}
.review-stars{display:flex;gap:3px;margin-bottom:16px}
.review-stars svg{width:16px;height:16px;fill:var(--amber)}
.review blockquote{margin:0;flex:1}
.review blockquote p{font-size:16px;line-height:1.62;color:var(--ink-2)}
.review figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.review-who{display:block;font-family:var(--fh);font-weight:700;font-size:15.5px;letter-spacing:-0.025em;color:var(--ink)}
.review-biz{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.dark .review{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.dark .review blockquote p{color:var(--on-dark-2)}
.dark .review-who{color:#fff}
.dark .review-biz{color:var(--on-dark-muted)}
.dark .review figcaption{border-top-color:rgba(255,255,255,.12)}

/* ============================================================
   10d. FINDER — search + filter (industries, locations)
   ============================================================ */
.finder{margin-top:8px}
.finder-search{position:relative;max-width:560px}
.finder-search svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#98A4AE;pointer-events:none}
.finder-search input{
  width:100%;font-family:var(--fb);font-size:17px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:16px 22px 16px 52px;outline:0;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.finder-search input::placeholder{color:#98A4AE}
.finder-search input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(217,98,14,.12)}
.finder-filters{display:flex;flex-wrap:wrap;gap:2px 26px;margin-top:24px}

/* ---------- the filter row: one pattern, everywhere ----------
   Third attempt, 9 September 2026. It was an outlined white pill that filled
   with ink when chosen; then a soft wash pill that lifted onto paper. The
   owner did not like either, and on a page like Industries - eleven
   categories wrapping onto two lines, above a directory of image cards - the
   reason is plain: eleven boxes stacked above a wall of boxes is eleven boxes
   too many, whatever colour they are.

   So no boxes. A row of words, the way an editorial section index is set:
   quiet muted labels, the chosen one in ink with a short orange rule beneath
   it. It takes a third of the height, competes with nothing below it, and the
   state is unmistakable. One pattern still - FAQ topics, Industries
   categories, blog categories and location regions all read from here. */
.finder-chip,
.post-cats a,
.loc-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fh);font-size:15px;font-weight:600;letter-spacing:-0.015em;
  padding:7px 1px 9px;border:0;border-bottom:2px solid transparent;border-radius:0;
  background:none;color:var(--muted);cursor:pointer;
  transition:color .16s ease,border-color .16s ease;
}
.finder-chip:hover,
.post-cats a:hover,
.loc-chip:hover{color:var(--ink);border-bottom-color:var(--line)}
.finder-chip:focus-visible,
.post-cats a:focus-visible,
.loc-chip:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}
.finder-chip[aria-pressed="true"],
.post-cats a[aria-current=page],
.loc-chip.is-on{color:var(--ink);font-weight:700;border-bottom-color:var(--orange)}
/* Category marks (owner, 9 September 2026). Quiet until the category is the
   one being read, then they take the accent with the label. */
.cat-i{flex:none;color:var(--muted);transition:color .16s ease}
.finder-chip:hover .cat-i{color:var(--ink-2)}
.finder-chip[aria-pressed="true"] .cat-i{color:var(--orange)}
.finder-count{margin-top:20px;font-size:14.5px;color:var(--muted)}
.finder-empty{
  margin-top:28px;padding:34px;border:1px dashed var(--line);border-radius:14px;
  text-align:center;color:var(--muted);font-size:16px;
}
.finder-empty b{display:block;font-family:var(--fh);color:var(--ink);font-size:18px;margin-bottom:8px}
[data-hidden="1"]{display:none!important}

/* --- industry cards: moved to page-industries.css (hub-only) --- */

/* --- location cards --- */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.loc-card{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.loc-card:hover{border-color:#CFC7B9;transform:translateY(-2px);box-shadow:0 18px 34px -24px rgba(18,33,47,.4)}
.loc-art{
  display:block;height:88px;position:relative;
  background:
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(125deg,#12212F,#33506B);
}
.loc-card-featured .loc-art{background:
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(125deg,#B44E08,#D9620E)}
.loc-body{display:block;padding:20px 22px 22px}
.loc-name{display:block;font-family:var(--fh);font-weight:700;font-size:19px;letter-spacing:-0.03em;color:var(--ink)}
.loc-region{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.loc-blurb{display:block;margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.loc-links{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.loc-tag{
  font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:-0.012em;
  color:var(--orange-dk);background:var(--wash);border:1px solid #F2DFC6;border-radius:100px;padding:4px 11px;
}

/* ============================================================
   10e. FORMS
   ============================================================ */
.ps-form-wrap{max-width:720px}
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ps-field{display:flex;flex-direction:column}
.ps-field-wide{grid-column:1/-1}
.ps-label,.ps-form label.ps-label{
  font-family:var(--fh);font-size:13.5px;font-weight:700;letter-spacing:-0.012em;
  color:var(--ink-2);margin-bottom:8px;display:block;
}
.ps-label em{font-style:normal;font-weight:500;color:var(--muted)}
.ps-form input[type=text],.ps-form input[type=email],.ps-form input[type=tel],.ps-form textarea{
  font-family:var(--fb);font-size:16px;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:9px;padding:13px 16px;width:100%;outline:0;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ps-form textarea{resize:vertical;min-height:130px;line-height:1.6}
.ps-form input:focus,.ps-form textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(217,98,14,.12)}
.ps-form .ps-field-err input[type=text],.ps-form .ps-field-err input[type=email],.ps-form .ps-field-err input[type=tel],.ps-form .ps-field-err input[type=url],
.ps-form .ps-field-err textarea,.ps-field-err input,.ps-field-err textarea{border-color:#B3261E;background:#FEF7F6}
.ps-err{display:block;margin-top:7px;font-size:13.5px;color:#B3261E}
.ps-choices{display:flex;flex-wrap:wrap;gap:9px}
.ps-choice{position:relative}
.ps-choice input{position:absolute;opacity:0;width:0;height:0}
.ps-choice span{
  display:inline-block;font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.018em;
  color:var(--ink-2);background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:10px 18px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.ps-choice input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.ps-choice input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
.ps-check{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.55;color:var(--ink-2);cursor:pointer}
.ps-check input{position:absolute;opacity:0;width:0;height:0}
.ps-box{
  width:22px;height:22px;border-radius:6px;border:1.5px solid #CFC7B9;background:#fff;
  display:grid;place-items:center;flex:none;margin-top:1px;transition:background-color .15s ease,border-color .15s ease;
}
.ps-box svg{width:13px;height:13px;opacity:0;transition:opacity .15s ease}
.ps-check input:checked + .ps-box{background:var(--orange);border-color:var(--orange)}
.ps-check input:checked + .ps-box svg{opacity:1}
.ps-check input:focus-visible + .ps-box{outline:2px solid var(--orange);outline-offset:2px}
.ps-check a{color:var(--orange-dk);border-bottom:1px solid rgba(180,78,8,.35)}
.ps-submit{margin-top:26px}
.ps-foot{margin-top:14px;font-size:13.5px;color:var(--muted)}
.ps-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ps-note{border-radius:12px;padding:22px 24px;margin-bottom:26px}
.ps-note h3{font-size:18px;margin-bottom:6px}
.ps-note p{font-size:15.5px;line-height:1.6}
.ps-note a{color:inherit;border-bottom:1px solid currentColor}
.ps-note-ok{background:#F1F7F1;border:1px solid #CBE0CB;color:#1F4620}
.ps-note-warn{background:var(--wash);border:1px solid #F2DFC6;color:#7A4A12}
.ps-note-err{background:#FEF7F6;border:1px solid #F0CFCC;color:#8C1D18}

/* London plan comparison - "or", never a "+" between two prices */
.mc-plus{
  display:block;text-align:center;font-family:var(--fh);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 0;
}
.mc-clarify{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted)}

/* ============================================================
   10b. CROSS-PAGE COMPONENTS
   Promoted to shared use because more than one page now needs them:
   .formula, .f-cell, .f-op and .tline, .tchoice (plus their variants)
   started on page-growth.css; .extras-grid and .extra-item started on
   page-pricing.css. Kept byte-identical to those originals so growth.php
   and pricing.php are unaffected; only their page sheets still carry
   their own copy.
   ============================================================ */
.formula{border:1px solid var(--line);border-radius:14px;background:var(--white); display:grid;grid-template-columns:1fr auto 1fr auto 1.15fr;align-items:center}
.f-cell{padding:34px 32px}
.f-cell .k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.f-cell h3{font-size:20px;margin-bottom:8px}
.f-cell p{font-size:15px;color:var(--muted);line-height:1.5}
.f-op{font-family:var(--fh);font-size:24px;font-weight:700;color:#C6BFB2;padding:0 6px;text-align:center}
.f-total{background:#FBF9F5;border-left:1px solid var(--line);align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.f-total .amount .num{font-size:50px}
.f-total .note{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:-0.022em;color:var(--orange);margin-top:10px}

.bridge{max-width:640px}
.bridge-flow{margin-top:20px;font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.012em;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.bridge-flow span{color:#C6BFB2}

.tline{border:1px solid var(--line);border-radius:14px;background:var(--white); display:grid;grid-template-columns:1fr auto 1fr auto 1.5fr;align-items:stretch}
.tline-stage{padding:32px 28px}
.tline-n{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:12px}
.tline-stage h3{font-size:19px;margin-bottom:8px}
.tline-stage p{color:var(--muted);font-size:15px;line-height:1.55}
.tline-arrow{align-self:center;color:#C6BFB2;font-family:var(--fh);font-size:20px;font-weight:700;padding:0 2px}
.tline-end{background:#FBF9F5;border-left:1px solid var(--line)}
.tline-choices{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.tchoice{display:flex;flex-direction:column;gap:2px;padding:13px 16px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.tchoice-k{font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink-2)}
.tchoice-v{font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:-0.028em;color:var(--orange-dk);margin-top:3px}
.tchoice-t{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.tline-note{margin-top:24px;font-size:14.5px;color:var(--muted);line-height:1.6;max-width:78ch}

.extras-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.extra-item{padding:22px 40px 22px 0;border-bottom:1px solid var(--line)}
.extra-item:nth-child(2n){padding-left:40px;padding-right:0;border-left:1px solid var(--line)}
.extra-item dt{font-family:var(--fh);font-weight:700;font-size:15.5px;letter-spacing:-0.02em;color:var(--ink);margin-bottom:6px}
.extra-item dd{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.extra-item dt a{color:inherit;border-bottom:1px solid var(--line);text-decoration:none}
.extra-item dt a:hover{color:var(--orange-dk);border-color:var(--orange-dk)}
.extra-price{display:inline-block;font-family:var(--fh);font-weight:700;color:var(--orange-dk);margin-right:6px}

/* Small two/three-row label+value fact strip, used inside hero side cards. */
.fact-rows{margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line-2)}
.fact-rows div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.fact-rows div:last-child{border-bottom:0}
.fact-rows dt{color:var(--muted);font-size:14.5px}
.fact-rows dd{margin:0;font-family:var(--fh);font-weight:700;letter-spacing:-0.02em;color:var(--ink);font-size:15px;text-align:right}

.final-plans{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:0 auto;max-width:760px}
.fp-col{flex:1;min-width:230px;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:28px 26px;text-align:center;background:rgba(255,255,255,.03)}
.fp-col.fp-active{border-color:rgba(217,98,14,.5);background:rgba(217,98,14,.08)}
.fp-name{display:block;font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:-0.02em;color:#A3B5C4;margin-bottom:10px}
.fp-badge{display:inline-block;margin-bottom:10px;font-family:var(--fh);font-size:11.5px;font-weight:700;color:var(--amber);background:rgba(240,160,60,.12);border-radius:100px;padding:4px 11px}
.fp-price{display:block;font-family:var(--fh);font-size:24px;font-weight:800;letter-spacing:-0.03em;color:#fff;margin-bottom:20px}
.fp-col .btn{width:100%}

@media (max-width:1040px){
  .formula,.tline{grid-template-columns:1fr}
  .f-op,.tline-arrow{padding:8px 0;text-align:left}
  .f-total{border-left:0;border-top:1px solid var(--line)}
  .tline-end{border-left:0;border-top:1px solid var(--line)}
  .extras-grid{grid-template-columns:1fr}
  .extra-item:nth-child(2n){padding-left:0;border-left:0}
  .extra-item{padding-right:0}
  .final-plans{flex-direction:column;max-width:360px;margin-left:auto;margin-right:auto}
}

/* ============================================================
   11. FAQ
   ============================================================ */
.faq-wrap{display:grid;grid-template-columns:330px 1fr;gap:80px;align-items:start}
.faq-list{border-top:1px solid var(--line)}
details.q{border-bottom:1px solid var(--line)}
details.q summary{
  list-style:none;cursor:pointer;padding:23px 46px 23px 0;position:relative;
  font-family:var(--fh);font-size:19px;font-weight:700;letter-spacing:-0.03em;line-height:1.35;
}
details.q summary::-webkit-details-marker{display:none}
/* The FAQ was the one disclosure control on the site with no keyboard focus
   state, while .m-acc-btn and .foot-grp-btn both had one. Invisible until
   someone tabs to it, so nothing about the resting design changes. */
details.q summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
details.q summary::after{
  content:"";position:absolute;right:6px;top:31px;width:12px;height:12px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .18s ease;
}
details.q[open] summary::after{transform:rotate(225deg);top:34px}
details.q .a{padding:0 60px 26px 0;color:var(--muted);font-size:16.5px;max-width:66ch;line-height:1.6}
.faq-side .card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:28px}
.faq-side .as-h4{margin-bottom:10px;font-size:18px}
.faq-side p{color:var(--muted);font-size:15.5px;margin-bottom:18px;line-height:1.55}
.contact-line{display:block;font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.025em;padding:9px 0;border-bottom:1px solid var(--line-2)}
.contact-line:last-of-type{border-bottom:0}
.faq-side .btn{margin-top:20px;width:100%}
.faq-more{margin-top:34px}

/* ============================================================
   12. FINAL CTA
   ============================================================ */
.final{background:var(--ink);color:#fff;text-align:center;padding:120px 0}
.final h2{font-size:clamp(32px,3.8vw,52px);max-width:19ch;margin:0 auto 22px;color:#fff}
.final p{color:var(--on-dark-muted);font-size:19px;max-width:52ch;margin:0 auto 34px}
/* A line that follows the buttons is a footnote to them, not another lede.
   .final p above sets margin:0 auto 34px, which outranked every page trying
   to space its own trailing line, so Pricing and Locations both had one sat
   flush against the button row with 34px of nothing under it (owner, 9
   September 2026). One rule, everywhere it happens. */
.final .btns + p{margin:34px auto 0;font-size:15px}
.final .btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.final .sub{font-size:14.5px;color:var(--on-dark-faint);margin-top:30px;max-width:60ch;margin-left:auto;margin-right:auto}
.final-facts{
  display:flex;justify-content:center;flex-wrap:wrap;margin:0 auto 34px;
  border:1px solid rgba(255,255,255,.15);border-radius:10px;overflow:hidden;max-width:900px;
}
.final-facts div{flex:1;min-width:200px;padding:18px 20px;border-left:1px solid rgba(255,255,255,.15)}
.final-facts div:first-child{border-left:0}
.final-facts dt{font-size:13px;color:var(--on-dark-faint);margin-bottom:5px}
.final-facts dd{margin:0;font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.03em;color:#fff}

/* ============================================================
   13. FOOTER
   ============================================================ */
/* Rebuilt 5 September 2026: statement band, brand + five link groups, the
   places row, the legal bar. Navy ground, hairlines, no prices, one CTA. */
footer.site{background:var(--ink-deep);color:var(--on-dark-dim);font-size:15px;padding:0;border-top:1px solid rgba(255,255,255,.08)}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site a{transition:color .15s ease}

/* 1. the statement band */
.foot-say{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding:64px 0 52px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-say-h{margin:0;font-family:var(--fh);font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-0.035em;line-height:1.08;color:#fff;max-width:22ch}
.foot-say-h span{color:var(--orange)}
.foot-say-p{margin:14px 0 0;font-size:16.5px;line-height:1.55;color:var(--on-dark-dim);max-width:52ch}

/* 2. brand + link groups */
.foot-top{display:grid;grid-template-columns:minmax(220px,1.15fr) minmax(0,4fr);gap:48px 64px;padding:56px 0 48px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .logo .word{color:#fff}
.foot-brand > p{margin:18px 0 0;font-size:14.5px;line-height:1.6;max-width:30ch}
.foot-contact{margin-top:22px;display:grid;gap:4px}
.foot-contact a{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);color:#E4ECF2;font-weight:700;font-size:15px;letter-spacing:-0.02em;padding:4px 0;min-height:32px}
.foot-contact .foot-ci{color:var(--amber);flex:none}
.foot-contact a:hover{color:#fff}
/* The large "Client login for existing customers" button was removed from
   the brand column on 9 September 2026 (owner review). The route is still in
   the Client Platform column and in the legal bar, which is where a returning
   customer looks for it; the button was a third copy competing with the two
   real calls to action in the band above. The contact list now closes the
   column, so it needs a floor of its own. */
.foot-contact{margin-bottom:4px}
.foot-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 28px}
footer.site .foot-col .as-h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-col li{padding:0}
.foot-col a{display:inline-flex;align-items:center;gap:7px;padding:6px 0;font-size:14.5px;line-height:1.35;color:#B7C4CF}
.foot-col a:hover{color:#fff}
.foot-col .foot-lock-i{color:var(--amber);flex:none}
.foot-col .foot-all{margin-top:8px}
.foot-col .foot-all a{font-family:var(--fh);font-weight:700;letter-spacing:-0.018em;color:#fff}
.foot-col .foot-all i{font-style:normal;display:inline-block;color:var(--amber);transition:transform .2s var(--ease)}
.foot-col .foot-all a:hover i{transform:translateX(4px)}

/* 3. every location, as a labelled hairline row */
.foot-places{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 36px;align-items:baseline;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-places-l{font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;color:var(--amber);white-space:nowrap}   /* Orange, per the owner (9 September 2026). Amber rather than --orange: this is an 11.5px label on ink, where --orange lands near 3.7:1 and fails AA, while amber clears 7:1 - and amber is already the site's orange for small text on dark (every dark-hero eyebrow uses it). */
.foot-places-list{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:4px}
.foot-places-list li{display:inline-flex;align-items:center;font-size:13.5px;line-height:1.6}
.foot-places-list li + li::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#4E6072;margin:0 11px;flex:none}
.foot-places-list a{color:#9FB0BE}
.foot-places-list a:hover{color:#fff}

/* 4. the legal bar */
.foot-bottom{padding:24px 0 36px;display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;font-size:13.5px;color:#8FA1B1}
.foot-bottom .legal{display:flex;gap:6px 22px;flex-wrap:wrap;align-items:center}
.foot-bottom .legal a{color:#9FB0BE}
.foot-bottom .legal a:hover{color:#fff}
.foot-bottom .legal-login{display:inline-flex;align-items:center;gap:6px;color:#DDE6EE}
.foot-bottom .legal-login .foot-lock-i{color:var(--amber)}
.foot-note{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 34px;font-size:13px;color:#6D8090;line-height:1.6;max-width:88ch}

/* ============================================================
   14. MOTION
   ============================================================ */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.rise-1{animation-delay:.05s}
.rise-2{animation-delay:.1s}
.rise-3{animation-delay:.15s}
.rise-4{animation-delay:.2s}
.rise-5{animation-delay:.25s}
.rise-6{animation-delay:.3s}

/* --- motion system: shared primitives for the hero and body scenes ---
   A scene (data-scene) has a start state and a finished state. Before
   JavaScript takes over, animated parts (data-s) are hidden only when the
   document has the .js class; if the runtime never initialises they fade
   in by themselves after 2.6s, so nothing can stay hidden. Without JS the
   markup already shows the finished state. */
:root{
  --ease:cubic-bezier(.2,.7,.2,1);          /* settle: decelerates into place */
  --ease-io:cubic-bezier(.65,0,.35,1);      /* travel: smooth both ends */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* arrive: long soft tail */
}
.js [data-scene]:not(.is-live) [data-s]{opacity:0;animation:psFallback .5s var(--ease) 2.6s forwards}
@keyframes psFallback{to{opacity:1}}
[data-scene].is-live [data-s]{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .62s var(--ease)}
[data-scene].is-live [data-s].on{opacity:1;transform:none}
[data-scene].is-live [data-s].s-scale{transform:scale(.94)}
[data-scene].is-live [data-s].s-scale.on{transform:none}
[data-scene].is-live [data-s].s-left{transform:translateX(-10px)}
[data-scene].is-live [data-s].s-left.on{transform:none}
[data-scene].is-live [data-s].s-fade{transform:none}
[data-scene].is-done [data-s]{opacity:1;transform:none}
/* a tick that draws itself */
.ps-tick path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--ease-out) .05s}
.on > .ps-tick path,.ps-tick.on path,.is-done .ps-tick path,html:not(.js) .ps-tick path{stroke-dashoffset:0}
/* a line that fills */
.ps-line{position:relative;overflow:hidden}
.ps-line::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:0 0;transform:scaleX(0);transition:transform .8s var(--ease-io)}
.ps-line.vert::after{transform:scaleY(0)}
.ps-line.on::after{transform:none}
/* typing: the visible text is decoration; the real text sits beside it for AT */
.ps-type{white-space:nowrap;overflow:hidden}
.ps-type.typing::after,.ps-type.caret::after{content:"";display:inline-block;width:1.5px;height:1.05em;background:currentColor;margin-left:2px;vertical-align:-0.16em;animation:psBlink 1s steps(1,end) infinite}
.ps-type.typing::after{animation:none;opacity:1}
@keyframes psBlink{50%{opacity:0}}
/* a soft attention ring, used once when something is chosen */
@keyframes psRing{0%{box-shadow:0 0 0 0 rgba(217,98,14,.38)}100%{box-shadow:0 0 0 14px rgba(217,98,14,0)}}
.ps-ring{animation:psRing .9s var(--ease) 1}
/* a cursor that travels to a target (position set by JS) */
.ps-cursor{position:absolute;z-index:5;width:18px;height:18px;pointer-events:none;opacity:0;transition:opacity .35s var(--ease),transform .75s var(--ease-io);will-change:transform}
.ps-cursor svg{display:block;width:18px;height:18px;filter:drop-shadow(0 2px 3px rgba(18,33,47,.35))}
.ps-cursor.on{opacity:1}
.ps-cursor.press svg{transform:scale(.86);transition:transform .12s ease}
/* a gentle working pulse for "in progress" indicators */
@keyframes psPulse{0%,100%{opacity:1}50%{opacity:.35}}
.ps-pulse{animation:psPulse 1.4s ease-in-out infinite}
/* progress dots for a scanning state */
@keyframes psScan{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.ps-scan{position:relative;overflow:hidden}
.ps-scan::before{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(217,98,14,.28),transparent);animation:psScan 1.3s var(--ease-io) infinite}
/* screen-reader description of what a scene shows */
.ps-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  [data-scene] [data-s]{opacity:1!important;transform:none!important}
  .ps-tick path{stroke-dashoffset:0!important}
  .ps-line::after{transform:none!important}
  .ps-scan::before{display:none}
  .ps-cursor{display:none}
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  /* six nav items plus the full phone block no longer fit, but the number and
     the login stay visible (owner, 10 Sept 2026: both were missing on an iPad).
     Compacted: no "Talk to us" label and no icon disc until the nav folds away. */
  .head-phone .t,.head-phone .ico{display:none}
  .head-phone .n{font-size:14px}
  .head-login{font-size:13.5px}
  .head-div{height:24px}
  nav.main{gap:20px}
  nav.main > ul{gap:20px}
  header.site .wrap{gap:24px}
  .head-cta{gap:12px}
}
@media (max-width:1140px){
  /* the last 100px before the nav folds (an iPad mini in landscape is 1133):
     the login keeps its icon and its accessible name, drops its word */
  .head-login span{display:none}
  .head-login svg{width:18px;height:18px}
  nav.main{gap:16px}
  nav.main > ul{gap:16px}
  header.site .wrap{gap:18px}
  .head-cta{gap:10px}
}
@media (max-width:1040px){
  :root{--hdr:74px}
  nav.main{display:none}
  /* tablet: the nav has folded into the menu, so the phone gets its label
     and icon back beside the login, the button and the burger */
  .head-phone .ico{display:grid}
  .head-phone .t{display:block}
  .head-phone .n{font-size:15px}
  .head-login{font-size:14px}
  .head-login span{display:inline}
  .head-login svg{width:13px;height:13px}
  .head-div{height:30px}
  .burger{display:grid}
  .mobile-nav{display:block}
  .head-cta{gap:14px}
  .sticky-cta{display:block}
  .head{grid-template-columns:1fr;gap:20px;align-items:start}
  .groups{grid-template-columns:1fr}
  .groups > div{padding-right:0}
  .groups > div:nth-child(2n){padding-left:0;border-left:0}
  .honest{grid-template-columns:1fr}
  .flow-row{grid-template-columns:1fr;gap:14px}
  .flow-row h3{max-width:none}
  .trust-wrap{flex-direction:column;gap:18px}
  .trust-item{padding:0!important;border-left:0!important}
  .wp-note{grid-template-columns:1fr;gap:16px}
  .faq-wrap{grid-template-columns:1fr;gap:48px}
}

/* Tablet band (901-1040px): a heading stays beside its own lede.
   These splits are text next to text, so collapsing them at 1040 added
   height to every section for no gain. Restored to 900px, then genuinely
   stacked below. Placed here, not at the end of the file, so the phone
   rules further down still win at <=640px. Heroes are excluded: frozen.

   .faq-wrap is deliberately NOT here. It is declared in the London page
   templates but did not appear in the rendered output of any page checked, so
   a tablet rule for it could not be verified against anything on screen. It
   was left on its existing behaviour rather than shipped as a guess. */
@media (max-width:1040px){
  .head{grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:40px}
}
@media (max-width:900px){
  .head{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:40px}
}
@media (max-width:1040px){
  .work-grid{grid-template-columns:1fr 1fr}
  .reviews-grid{grid-template-columns:1fr 1fr}
  .loc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo-col + .duo-col{border-left:0;border-top:1px solid var(--line)}
  .work-grid,.work-grid-2{grid-template-columns:1fr;gap:44px}
  .reviews-grid{grid-template-columns:1fr}
  .ps-grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  /* small tablet and large phone in landscape: number and login, compact */
  .head-phone .t,.head-phone .ico{display:none}
  .head-phone .n{font-size:14px}
  .head-login span{display:none}
  .head-login svg{width:18px;height:18px}
  .head-div{height:24px}
  .head-cta{gap:12px}
}
@media (max-width:640px){
  /* phone: the number and the login live in the menu and the sticky bar */
  .head-phone,.head-div,.head-login{display:none}
}
@media (max-width:640px){
  .loc-grid{grid-template-columns:1fr}
  .finder-search input{font-size:16px;padding:14px 18px 14px 48px}
  .review{padding:24px 22px 22px}
  .ps-note{padding:18px 20px}
}
/* Tablet section rhythm. Most of the page's multi-column grids collapse to a
   single column at 1040px, but until this block the section padding held the
   full desktop 112px all the way down to 821px. So an iPad at 834 or 1024 got
   the phone's stacked layout with the desktop's whitespace, and every page ran
   a third longer than its own desktop version. This steps the rhythm down at
   the same width the columns collapse. It must stay ABOVE the 820px block
   below, which is narrower and has to win where both match. */
@media (max-width:1040px){
  .sec{padding:88px 0}
  .sec-sm{padding:66px 0}
  .final{padding:96px 0}
}
@media (max-width:820px){
  :root{--pad:22px}
  body{font-size:16px}
  .sec{padding:76px 0}
  .sec-sm{padding:60px 0}
  .final{padding:88px 0}
  .duo-col{padding:30px 24px}
  .honest-col{padding:26px 24px}
  .fact{grid-template-columns:1fr;gap:5px;padding:18px 24px}
  .diy-row{grid-template-columns:1fr}
  .diy-row > div{padding:16px 0}
  .diy-row > div:last-child{border-left:0;padding-left:0;padding-top:0;padding-bottom:20px}
  .diy-cap{display:none}
  .final-facts div{border-left:0;border-top:1px solid rgba(255,255,255,.15)}
  .final-facts div:first-child{border-top:0}
}
@media (max-width:430px){
  .final .btns .btn,.flow-cta .btn,.hero-ctas .btn{width:100%}
  .amount .num{font-size:46px}
  .eyebrow{font-size:11.5px;letter-spacing:.13em}
  .eyebrow::before{width:22px}
  .sticky-cta .pr{font-size:17.5px}
  .sticky-cta .btn{font-size:15px;padding:13px 12px}
}
@media (max-width:400px){
  .head-cta .btn{display:none}
  .sticky-cta .pr small{display:none}
  .sticky-cta .in.sticky-two{display:none}
  .sticky-cta .in.sticky-compact{display:flex}
}

/* ============================================================
   16. PAGE LAYOUTS — main site (Phase 2)
   ============================================================ */

/* --- the dark first screen -------------------------------------------
   The homepage hero rebuilt on 9 September 2026 put the navigation and the
   hero inside one dark composition, and the owner approved it that day.
   Three more pages now open the same way - Pricing, Get Started and the
   Client Platform - so the ground, its two washes and the header's light
   treatment are defined here once instead of three times over in three page
   stylesheets.

   Two classes, deliberately kept apart. body.ps-dark-top turns the header
   light: it has to hang off the body, because the header is rendered before
   any page markup and cannot know what the page below it looks like.
   .hero-dark paints the ground. Neither needs to know about the other, and
   a page can be given the pair by adding one body class and one hero class.

   The homepage adds the full-screen height (100svh) on top of this; the
   three inner pages take their natural height. That difference is the
   point: a homepage is arrived at, and an inner page is being read by
   somebody who is already here and wants the content under the fold.
   --------------------------------------------------------------------- */
/* THE TRANSITION (owner, 9 September 2026). The dark theme below applies
   only while the dark hero is still behind the bar. Once it has passed,
   site.js puts .ps-hero-dark-past on <html> and every rule here stops
   matching, so the header falls back to the ordinary paper header defined
   further up this file - no second header element, no display:none toggle,
   no duplicate navigation. One header wearing one of two themes.

   The selector is written as :not(...) rather than as a second block of
   overrides precisely so the light state is the SAME rules the rest of the
   site already uses. A light theme reconstructed out of overrides is how
   two headers quietly drift apart.

   Nothing that affects layout is themed: only background, colour, border and
   the backdrop filter. Height, padding, the logo's box, the nav's spacing
   and the button's dimensions are identical in both states, so the change
   cannot move anything. See the transition declarations on header.site.  */
html:not(.ps-hero-dark-past) body.ps-dark-top header.site{
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;
}
html:not(.ps-hero-dark-past) body.ps-dark-top header.site.stuck{
  background:rgba(13,25,38,.94);border-bottom-color:rgba(255,255,255,.10);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
}
html:not(.ps-hero-dark-past) body.ps-dark-top header.site .logo .word{color:#fff}
html:not(.ps-hero-dark-past) body.ps-dark-top nav.main > ul > li > a{color:var(--on-dark-2)}
html:not(.ps-hero-dark-past) body.ps-dark-top nav.main > ul > li > a:hover,
html:not(.ps-hero-dark-past) body.ps-dark-top nav.main > ul > li > a[aria-current="page"],
html:not(.ps-hero-dark-past) body.ps-dark-top nav.main .has-mega:hover > a,
html:not(.ps-hero-dark-past) body.ps-dark-top nav.main .has-mega.open > a{color:#fff;border-bottom-color:var(--amber)}
html:not(.ps-hero-dark-past) body.ps-dark-top .mega-toggle{color:var(--on-dark-faint)}
html:not(.ps-hero-dark-past) body.ps-dark-top .mega-toggle:hover,
html:not(.ps-hero-dark-past) body.ps-dark-top .has-mega:hover .mega-toggle{color:#fff;background:rgba(255,255,255,.10)}
html:not(.ps-hero-dark-past) body.ps-dark-top .mega-toggle[aria-expanded="true"]{color:var(--amber)}
html:not(.ps-hero-dark-past) body.ps-dark-top .head-phone .t{color:var(--on-dark-faint)}
html:not(.ps-hero-dark-past) body.ps-dark-top .head-phone .n{color:#fff}
html:not(.ps-hero-dark-past) body.ps-dark-top .head-phone .ico{background:rgba(255,255,255,.10);color:var(--amber)}
html:not(.ps-hero-dark-past) body.ps-dark-top .head-div{background:rgba(255,255,255,.18)}
html:not(.ps-hero-dark-past) body.ps-dark-top .head-login{color:var(--on-dark-2)}
html:not(.ps-hero-dark-past) body.ps-dark-top .head-login svg{color:var(--on-dark-faint)}
html:not(.ps-hero-dark-past) body.ps-dark-top .head-login:hover{color:#fff}
html:not(.ps-hero-dark-past) body.ps-dark-top .head-login:hover svg{color:var(--amber)}
/* the burger is a white tile with ink bars: on the dark bar both disappear */
html:not(.ps-hero-dark-past) body.ps-dark-top .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
html:not(.ps-hero-dark-past) body.ps-dark-top .burger span{background:#fff}
html:not(.ps-hero-dark-past) body.ps-dark-top .burger[aria-expanded="true"]{background:rgba(255,255,255,.16)}
/* the mega panel keeps its paper face; only the join to the dark bar changes */
html:not(.ps-hero-dark-past) body.ps-dark-top header.site .mega{border-top-color:rgba(255,255,255,.12)}

/* The transition between the two themes. Only colour properties are listed,
   so nothing here can move anything: no layout shift, no CLS, no menu jump
   when the theme flips. 180ms reads as deliberate without becoming an
   animation anybody notices. */
body.ps-dark-top header.site,
body.ps-dark-top header.site .logo .word,
body.ps-dark-top nav.main > ul > li > a,
body.ps-dark-top .mega-toggle,
body.ps-dark-top .head-phone .t,
body.ps-dark-top .head-phone .n,
body.ps-dark-top .head-phone .ico,
body.ps-dark-top .head-div,
body.ps-dark-top .head-login,
body.ps-dark-top .head-login svg,
body.ps-dark-top .burger,
body.ps-dark-top .burger span{
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
/* Somebody who has asked for less motion still needs a header that is
   legible against whatever is behind it. They get the change, without the
   fade. */
@media (prefers-reduced-motion:reduce){
  body.ps-dark-top header.site,
  body.ps-dark-top header.site .logo .word,
  body.ps-dark-top nav.main > ul > li > a,
  body.ps-dark-top .mega-toggle,
  body.ps-dark-top .head-phone .t,
  body.ps-dark-top .head-phone .n,
  body.ps-dark-top .head-phone .ico,
  body.ps-dark-top .head-div,
  body.ps-dark-top .head-login,
  body.ps-dark-top .head-login svg,
  body.ps-dark-top .burger,
  body.ps-dark-top .burger span{transition:none}
}

/* The ground itself. The depth is two very wide radial washes and a 3px
   diagonal grain at 2% - no blobs, no noise texture file, nothing that costs
   a request. The negative top margin lifts the section under the sticky
   header so the two read as one surface. */
.hero-dark{
  position:relative;isolation:isolate;overflow:clip;
  margin-top:calc(var(--hdr) * -1);
  padding:calc(var(--hdr) + 74px) 0 86px;
  border-bottom:0;
  background:var(--ink-deep);color:var(--on-dark);
}
.hero-dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(112% 74% at 82% 6%,rgba(217,98,14,.16),transparent 56%),
    radial-gradient(96% 70% at 6% 98%,rgba(43,59,75,.62),transparent 60%);
}
.hero-dark::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
}
.hero-dark h1,.hero-dark h2,.hero-dark h3{color:#fff}
.hero-dark .eyebrow{color:var(--amber)}
.hero-dark .eyebrow::before{background:var(--amber)}
.hero-dark .hero-sub{color:var(--on-dark-2)}
.hero-dark .link-u{color:var(--on-dark-2);border-bottom-color:rgba(255,255,255,.3)}
.hero-dark .link-u:hover{color:#fff;border-bottom-color:var(--amber)}

/* The three things that are true, under a hairline: the closing move of the
   approved homepage hero, shared so each dark hero does not restate it.
   The homepage keeps .hx-facts alongside this for its own animation delay. */
.dk-facts{
  list-style:none;margin:22px 0 0;padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.14);display:grid;gap:8px;max-width:36em;
}
.dk-facts li{
  display:flex;align-items:center;
  font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.015em;line-height:1.4;color:var(--on-dark-2);
}
.dk-facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);margin-right:12px;flex:none}

/* The dark hero's own breathing room on smaller screens. The homepage sets
   its own, because its hero is a full screen and measures its padding from
   the bottom of the header rather than from the content. */
@media (max-width:1040px){
  .hero-dark{padding:calc(var(--hdr) + 52px) 0 68px}
}
@media (max-width:640px){
  .hero-dark{padding:calc(var(--hdr) + 34px) 0 50px}
}

/* --- the standard page hero -------------------------------------------
   ONE hero for every page except the homepage (owner, 9 September 2026).
   The markup is template-parts/layout/page-hero.php; this is the size.

   --hero-row is the whole point. Every page's hero is this tall whether its
   copy fills the space or not, so moving between pages never moves the fold.
   It is a min-height rather than a height because a page whose statement
   genuinely runs longer must be allowed to grow rather than have its own
   words clipped - but nothing may set it per page, and no page stylesheet
   may give .hero-std its own padding. The owner's words were "same size for
   all pages to keep it consistent", then "you can make it a tad bigger, but
   the size you choose has to be consistent throughout": 400px of content row
   against the 267px the Get Started hero happened to have, which is the
   "tad" and gives the right-hand frame a shape a photograph can live in.
   ---------------------------------------------------------------------- */
/* THE NUMBER. 520px, measured rather than guessed.
   With the row at 400px it was a floor almost nothing touched: the content
   rows across the fourteen live pages ran from 400 to 765, which is not one
   hero at one height, it is fourteen heroes with a shared minimum. 520 is
   the height the ordinary content pages reach naturally once they carry a
   statement, a sentence, two buttons and three facts, so it binds nearly
   everywhere; the variants below are then tuned so the longest pages come
   DOWN to it rather than pushing past it.
   Change this one value and every page moves together. */
:root{--hero-row:520px}

/* Ink, then paper (MASTER SPECIFICATION v1.0, 9 September 2026). The ground,
   its two washes and the grain all come from .hero-dark, which the component
   adds alongside this class - the same ground the homepage stands on, so the
   two can never drift. This block therefore sets only what is geometric: the
   padding under the sticky bar, the two-column row, the frame. It must never
   set a background of its own again. */
.hero-std{
  overflow:clip;
  padding:calc(var(--hdr) + 62px) 0 74px;
  border-bottom:0;
}
.hero-std-in{
  display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:40px 64px;
  align-items:center;min-height:var(--hero-row);
}
/* the rare page with nothing to show on the right: the copy keeps the
   measure it would have had, rather than running the full 1200px */
.hero-std-solo .hero-std-in{grid-template-columns:minmax(0,760px)}

.hero-std h1{
  margin:0 0 20px;max-width:15ch;
  font-size:clamp(38px,4.05vw,54px);font-weight:800;line-height:1.04;letter-spacing:-0.045em;text-wrap:balance;
}
/* colour comes from .hero-dark (white statement, muted-on-dark sentence);
   nothing here may name a colour, or the paper values would win on ink */
.hero-std .hero-sub{margin:0;max-width:46ch;font-size:18.5px;line-height:1.58;text-wrap:pretty}
/* Where a page has written a shorter sentence for the phone, both are in the
   markup and this chooses. .hero-sub-d is only added when a short one exists,
   so a page with one sentence is unaffected. */
.hero-std .hero-sub-m{display:none}
.hero-std .hero-ctas{margin:30px 0 0;margin-bottom:0}

/* the three things that are true, on a hairline, marked in amber - the
   homepage's own closing move, on the same ground */
.hero-std-facts{
  list-style:none;margin:26px 0 0;padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.14);display:grid;gap:8px;max-width:36em;
}
.hero-std-facts li{
  display:flex;align-items:center;
  font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.015em;line-height:1.4;color:var(--on-dark-2);
}
.hero-std-facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);margin-right:12px;flex:none}

/* The frame. 520 wide, and exactly as tall as the row, so every page's
   illustration is composed into the same rectangle: that is what makes
   twelve different pictures read as one family. The photograph rules stay
   for the one day a page needs one; no standard hero uses one now. */
.hero-std-art{position:relative;min-width:0}
.hero-std-photo{position:relative;margin:0;border-radius:20px;aspect-ratio:16/11;overflow:hidden}
.hero-std-photo::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
.hero-std-photo img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.hero-std-cap{margin:26px 0 0;font-size:12.5px;line-height:1.45;color:var(--on-dark-faint);max-width:38ch}

/* --- the illustration family (inc/illustrations.php) ---
   Every composition is laid out inside .ill-stage, a 520 by 400 canvas that
   matches the frame, with each object absolutely placed. One vocabulary:
   plate, site, badge, chip, path, bars, map. One stroke weight, one corner
   radius per object size, one palette. The objects arrive with the copy's
   own "rise" and then rest; under reduced motion they are simply there. */
.ill{position:relative;width:100%}
.ill-stage{position:relative;height:400px;width:100%}
.ill-stage > *{position:absolute;animation:rise .7s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.2s + var(--i,0) * .07s)}

/* plate - the panel. Translucent on ink; solid paper when it is "the site". */
/* Solid, not translucent. The cards overlap the site mock by design, and a
   see-through card laid over a website's footer put two sets of text on top
   of each other (seen on the Websites hero, 9 September 2026). A solid plate
   a shade lighter than the ground reads as a layer in front of it. */
.ill-card{
  padding:16px 18px;border-radius:14px;
  background:#16283A;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px -36px rgba(0,0,0,.9);color:var(--on-dark-2);
}
.ill-card b{display:block;font-family:var(--fh);font-size:13.5px;font-weight:700;letter-spacing:-0.02em;color:#fff}
.ill-card ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.ill-card li{display:flex;align-items:center;gap:9px;font-size:12.5px;line-height:1.3}
.ill-card li::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;background:var(--orange);
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10.5 8 14.5 16 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:destination-out;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10.5 8 14.5 16 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat,linear-gradient(#000,#000);mask-composite:exclude}
.ill-card-k{display:block;margin-top:12px;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-faint)}

/* site - the real mock, held to a width the frame can carry */
.ill-site{width:372px}
.ill-sm{box-shadow:0 3px 8px rgba(0,0,0,.34),0 48px 84px -34px rgba(0,0,0,.8)}
.ill-sm .sm-hero{height:132px}
.ill-sm .sm-hero-copy b{font-size:15px}
.ill-sm .sm-hero-copy p,.ill-sm .sm-areas{display:none}
.ill-site--sm{width:300px}
.ill-site--sm .ill-sm .sm-hero{height:104px}
.ill-site--sm .ill-sm .sm-services{display:none}
.ill-site--main{left:0;top:18px;--i:0}
.ill-site--back{left:0;top:0;--i:0}

/* badge - a trade in a round plate */
.ill-badge{
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--amber);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.8);
}
.ill-badge svg{width:56%;height:56%}
.ill-badge--sm{width:44px;height:44px}
.ill-badge--md{width:60px;height:60px}
.ill-badge--lg{width:96px;height:96px;left:0;top:26px;--i:1;background:rgba(217,98,14,.16);border-color:rgba(240,160,60,.5)}
.ill-badges{display:flex;gap:10px}

/* chip - one word of state */
.ill-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:100px;
  font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.8);
}
/* The "Looked after" chip belongs to the website it is about, so it sits on
   that site's top-right corner rather than adrift at the frame edge (owner,
   9 September 2026). Its dot flashes three times as the page settles and
   then rests - long enough to be noticed, finite so it never nags. */
.ill-chip--live{background:#fff;color:var(--ink);left:250px;top:0;--i:2}
.ill-chip--live i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(217,98,14,.2)}
.ill-chip--live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--orange);opacity:0;animation:illLiveFlash 1.5s ease-out .7s 3 both}
@keyframes illLiveFlash{0%{transform:scale(.5);opacity:.9}70%{transform:scale(2.3);opacity:0}100%{transform:scale(2.3);opacity:0}}
.ill-chip--amber{background:var(--amber);color:var(--ink);right:0;top:24px;--i:3}
.ill-chip--ink{background:var(--ink);color:var(--on-dark-2);border:1px solid rgba(255,255,255,.16);box-shadow:none;padding:5px 10px;font-size:11px}

/* the website kind: site, chip, and the ticks card breaking its corner */
.ill--website .ill-card--ticks{right:0;bottom:6px;width:224px;--i:3}

.ill-field{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:9px;background:var(--paper);color:var(--ink);font-size:13px}
.ill-field svg{width:16px;height:16px;color:var(--muted);flex:none}
.ill-bars{display:flex;align-items:flex-end;gap:8px;height:84px;margin-top:16px;padding:0 4px}
.ill-bars i{flex:1;height:calc(var(--h) * 100%);border-radius:5px 5px 2px 2px;background:var(--orange);opacity:.55}
.ill-bars i:last-child{opacity:1;background:var(--amber)}
.ill-bars i:nth-last-child(2){opacity:.8}
/* the pricing kind: a till that rings the price up by itself.
   One beat every .42s, starting .9s in so the hero's own copy has landed
   first. Every animation fills `both`, so each digit holds where it lands and
   the till ends at rest showing the figure. --n is the number of keystrokes,
   set on the element, so the ending beats stay in step whatever the price. */
.ill-till{--beat:.42s;--lead:.9s;left:50%;top:8px;width:314px;margin-left:-157px;--i:0}
.ill-till-body{
  position:relative;padding:18px 18px 20px;border-radius:20px 20px 8px 8px;
  background:linear-gradient(180deg,#FFFDF9,var(--paper));
  box-shadow:0 40px 70px -38px rgba(0,0,0,.95),inset 0 1px 0 #fff;
}
.ill-till-screen{
  position:relative;padding:16px 18px 14px;border-radius:12px;
  background:#0C1A26;box-shadow:inset 0 2px 10px rgba(0,0,0,.55);min-height:86px;
  display:grid;align-content:center;gap:6px;
}
.ill-till-fig{
  display:flex;align-items:baseline;
  font-family:var(--fh);font-size:40px;font-weight:800;letter-spacing:-0.05em;line-height:1;
  color:var(--amber);font-variant-numeric:tabular-nums;min-height:40px;
}
.ill-till-sym{font-style:normal;margin-right:1px}
.ill-till-fig b{
  font-weight:800;opacity:0;
  animation:tillDigit .18s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--lead) + var(--i) * var(--beat));
}
.ill-till-cap{
  font-style:normal;font-family:var(--fh);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(240,160,60,.7);opacity:0;
  animation:tillDigit .3s ease-out both;
  animation-delay:calc(var(--lead) + (var(--n) + 1) * var(--beat));
}
@keyframes tillDigit{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* the keypad, and one flash laid over each key as it is struck */
/* --kg and --kh are shared with the flash overlay below, which has to place
   itself over a key without joining the grid - an explicitly positioned grid
   item shunts the auto-placed keys around it, which is exactly what it did. */
.ill-till-keys{--kg:7px;--kh:32px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kg);margin-top:14px}
.ill-till-keys span{
  display:grid;place-items:center;height:var(--kh);border-radius:8px;
  background:rgba(18,33,47,.06);box-shadow:inset 0 -2px 0 rgba(18,33,47,.07);
  font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.ill-till-hit{
  position:absolute;
  width:calc((100% - var(--kg) * 2) / 3);height:var(--kh);
  left:calc((var(--c) - 1) * (((100% - var(--kg) * 2) / 3) + var(--kg)));
  top:calc((var(--r) - 1) * (var(--kh) + var(--kg)));
  display:grid;place-items:center;border-radius:8px;background:var(--orange);
  font-family:var(--fh);font-style:normal;font-size:12.5px;font-weight:800;color:#fff;
  opacity:0;animation:tillHit .38s ease-out both;
  animation-delay:calc(var(--lead) + var(--i) * var(--beat) - .06s);
}
@keyframes tillHit{
  0%{opacity:0;transform:scale(1.06)}
  16%{opacity:1;transform:scale(.93)}
  52%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}
.ill-till-key{
  display:grid;place-items:center;height:44px;margin-top:8px;border-radius:10px;
  background:var(--orange);color:#fff;box-shadow:0 3px 0 var(--orange-dk);
  font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  animation:tillTotal .5s ease-out both;
  animation-delay:calc(var(--lead) + var(--n) * var(--beat));
}
@keyframes tillTotal{
  0%{background:var(--orange);box-shadow:0 3px 0 var(--orange-dk)}
  22%{background:var(--orange-dk);box-shadow:0 0 0 var(--orange-dk);transform:translateY(3px)}
  100%{background:var(--ink);box-shadow:0 3px 0 #0A131C;transform:none}
}
.ill-till-base{height:14px;margin:0 12px;border-radius:0 0 12px 12px;background:rgba(255,255,255,.14)}
@media (prefers-reduced-motion:reduce){
  .ill-many span{animation:none;background:rgba(240,160,60,.16);border-color:rgba(240,160,60,.55);color:var(--amber)}
  .ill-till-fig b,.ill-till-cap{animation:none;opacity:1;transform:none}
  .ill-till-hit{animation:none;opacity:0}
  .ill-till-key{animation:none;background:var(--ink);box-shadow:0 3px 0 #0A131C}
}

/* the work kind: one website, presented on a design board.
   Nothing here cycles, nothing hovers, nothing glows. Three objects - board,
   desktop, phone - and the negative space around them, which is doing as much
   work as they are. The only motion is the entrance .ill-stage already gives
   every child. */
.ill-board{
  left:26px;top:0;width:456px;height:330px;--i:0;
  border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
}
/* crop marks: the restrained orange detail, and the only orange here */
.ill-crop{position:absolute;width:16px;height:16px}
.ill-crop--tl{left:-1px;top:-1px;border-left:2px solid var(--orange);border-top:2px solid var(--orange);border-radius:20px 0 0 0}
.ill-crop--br{right:-1px;bottom:-1px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);border-radius:0 0 20px 0}
.ill-desk{left:0;top:36px;width:376px;--i:1}
.ill-desk .ill-sm{box-shadow:0 34px 64px -30px rgba(0,0,0,.85)}
.ill-desk .ill-sm .sm-hero{height:150px}
.ill-desk .ill-sm .sm-areas{display:none}
.ill-desk .sm-nav > span:nth-child(n+4){display:none}
.ill-hand{right:8px;bottom:12px;width:134px;--i:2}
.ill-hand .ill-smp{width:134px;box-shadow:0 30px 58px -26px rgba(0,0,0,.9)}

/* the industries kind: the directory, named - and every tile a real route */
.ill-dir{left:0;top:8px;width:100%;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;--i:0}
.ill-dir li{min-width:0;display:flex}
.ill-dir-t{
  flex:1;text-decoration:none;
  transition:background-color .16s ease,border-color .16s ease;
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;min-width:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  animation:rise .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.2s + var(--i,0) * .045s);
}
.ill-dir-t .ill-badge{position:static;flex:none;width:30px;height:30px;background:rgba(240,160,60,.14);border-color:rgba(240,160,60,.3);color:var(--amber)}
.ill-dir-t em{font-style:normal;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.015em;color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ill-dir-more{background:rgba(240,160,60,.1);border-color:rgba(240,160,60,.34);justify-content:center;gap:7px}
.ill-dir-more b{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:-0.03em;color:var(--amber)}
.ill-dir-more em{color:var(--amber);opacity:.85}
.ill-dir-t:hover{background:rgba(255,255,255,.11);border-color:rgba(240,160,60,.55)}
.ill-dir-t:hover em{color:#fff}
.ill-dir-t:hover .ill-badge{background:rgba(240,160,60,.24);border-color:rgba(240,160,60,.55)}
.ill-dir-t:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ill-dir-more:hover{background:rgba(240,160,60,.2)}
.ill-dir-more:hover em{color:var(--amber);opacity:1}

@media (prefers-reduced-motion:reduce){
  .ill-till-key,.ill-dir-t{animation:none}
  .ill-till-fig,.ill-till-screen em{transition:none}
}

/* the process kind: six nodes on one path */
.ill-path{left:0;top:0;width:100%;height:100%;--i:0}
.ill-path-on{stroke-dasharray:900;stroke-dashoffset:900;animation:illDraw 1.6s .4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes illDraw{to{stroke-dashoffset:0}}
.ill-steps{list-style:none;margin:0;padding:0;left:0;top:0;width:100%;height:100%;animation:none}
.ill-step{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;animation:rise .6s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.5s + var(--i) * .16s)}
.ill-step i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);border:2px solid var(--orange);font-family:var(--fh);font-size:14px;font-weight:800;color:#fff;font-style:normal}
.ill-step b{font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--on-dark-2);white-space:nowrap}
.ill-step.is-end i{background:var(--orange);width:48px;height:48px}
.ill-step.is-end i svg{width:22px;height:22px}
.ill-step:nth-child(1){left:14px;top:40px}
.ill-step:nth-child(2){left:120px;top:20px}
.ill-step:nth-child(3){left:236px;top:130px}
.ill-step:nth-child(4){left:330px;top:150px}
.ill-step:nth-child(5){left:404px;top:230px}
.ill-step:nth-child(6){left:450px;top:212px}

/* the faq kind: a stack of questions, the front one answered */
.ill-qs{left:0;top:40px;width:420px;height:300px;animation:none}
.ill-q{
  position:absolute;left:calc(var(--i,3) * 14px);top:calc(var(--i,3) * 18px);width:calc(100% - var(--i,3) * 28px);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  font-family:var(--fh);font-size:14px;font-weight:700;color:var(--on-dark-2);
  animation:rise .6s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.2s + var(--i,3) * .1s);
}
.ill-q i{width:12px;height:12px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(45deg);margin-right:4px}
.ill-q--open{--i:3;top:120px;left:0;width:100%;grid-template-rows:auto auto;background:var(--paper);color:var(--ink);box-shadow:0 40px 70px -40px rgba(0,0,0,.95)}
.ill-q--open i{border-color:var(--orange-dk);transform:rotate(225deg);margin-top:6px}
.ill-q--open em{grid-column:1/-1;font-style:normal;font-family:var(--fb);font-weight:400;font-size:13.5px;line-height:1.5;color:var(--muted);padding-top:10px;border-top:1px solid var(--line)}
.ill--faq .ill-badge--lg{left:auto;right:0;top:0;--i:5}

/* ---------- the location kinds: the map plate and its pins ----------
   The pins pulse (owner, 9 September 2026). One cycle is 3.4s: the ring
   breathes out and fades, the named dot beats gently inside it, and the
   unnamed pins breathe in and out on a stagger so the map is alive without
   anything blinking. transform-box:fill-box is what lets an SVG circle scale
   about its own centre rather than the viewBox origin. */
.ill-map{left:0;top:0;width:100%;--i:0;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);overflow:visible}
.ill-map svg{display:block;width:100%;height:auto}
.ill-map-label{position:absolute;left:50%;top:44%;transform:translate(-50%,-140%);padding:7px 12px;border-radius:100px;background:#fff;color:var(--ink);font-family:var(--fh);font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 14px 30px -16px rgba(0,0,0,.8)}
.ill-card--float{right:16px;bottom:0;width:280px;--i:2}
.ill-pin,.ill-pin-halo{transform-box:fill-box;transform-origin:50% 50%}
.ill-pin{animation:illPinBreathe 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * .5s)}
.ill-pin--big{animation:illPinBeat 3.4s ease-in-out infinite}
.ill-pin-halo{animation:illPinRing 3.4s cubic-bezier(.3,0,.45,1) infinite}
@keyframes illPinBreathe{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes illPinBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes illPinRing{0%{transform:scale(.5);opacity:0}18%{opacity:.85}100%{transform:scale(1.5);opacity:0}}

/* the location kind: the map, and the listing a customer finds on it */
.ill--location .ill-map{width:90%;top:4px}
.ill-listing{
  right:0;bottom:16px;width:250px;--i:2;
  padding:15px 16px 14px;border-radius:16px;background:var(--paper);
  box-shadow:0 34px 66px -34px rgba(0,0,0,.95);
}
.ill-listing-top{display:flex;align-items:center;gap:11px}
.ill-listing-mark{width:34px;height:34px;border-radius:9px;flex:none;background:linear-gradient(140deg,var(--orange),var(--amber))}
.ill-listing-id b{display:block;font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:-0.025em;color:var(--ink)}
.ill-listing-id em{display:block;margin-top:1px;font-style:normal;font-size:12px;color:var(--muted)}
.ill-listing-where{display:flex;align-items:center;gap:7px;margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.ill-listing-where svg{width:15px;height:15px;flex:none;color:var(--orange)}
.ill-listing-tag{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink-2)}
.ill-listing-tag i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--orange);box-shadow:0 0 0 3px rgba(217,98,14,.18)}


/* the seo kind: the results page itself, and what the month buys.
   The card is the theme's own .gsr component (further down this file), so
   the search page in this hero and the one on the trade pages are the same
   drawing. Only the scale changes here - it is being read at 346px, not at
   full section width. */
.ill-gsr{left:0;top:2px;width:346px;--i:0;border-color:rgba(255,255,255,.14)}
.ill-gsr .gsr-head{padding:14px 15px 0}
.ill-gsr .gsr-field{height:40px;gap:10px;padding:0 12px 0 13px}
.ill-gsr .gsr-mag{width:17px;height:17px}
.ill-gsr .gsr-q{font-size:14px}
.ill-gsr .gsr-go{width:18px;height:18px}
.ill-gsr .gsr-x{height:18px}
.ill-gsr .gsr-tabs{gap:16px;padding:10px 15px 0 26px;font-size:11.5px}
.ill-gsr .gsr-tabs span{padding-bottom:7px;border-bottom-width:2px}
.ill-gsr .gsr-body{padding:11px 15px 14px}
.ill-gsr .gsr-local-h{padding:8px 12px 7px;font-size:13px}
.ill-gsr .gsr-local-h small{font-size:11px}
.ill-gsr .gsr-map{height:60px}
.ill-gsr .gsr-pin{width:22px;height:22px}
.ill-gsr .gsr-biz li{padding:8px 12px 8px 30px}
.ill-gsr .gsr-biz li::before{left:9px;top:10px;width:15px;height:15px;font-size:8.5px}
.ill-gsr .gsr-biz b{font-size:13px}
.ill-gsr .gsr-biz em{font-size:11.5px}
/* the other local results: present, unnamed, not competitors we invented */
.ill-gsr-blank{display:block}
.ill-gsr-blank i{display:block;width:58%;height:8px;border-radius:4px;background:#E8EAED}
.ill-gsr-blank i + i{margin-top:7px}
.ill-gsr-blank i.is-short{width:36%}
.ill--seo .ill-card--month{right:0;top:190px;width:212px;--i:2}
.ill-card--month li::before{background:var(--amber)}

/* the industry kind: this trade's site, and the card that names the trade */
.ill-site--trade{left:0;top:6px;width:352px;--i:0}
.ill-site--trade .sm-nav > span:nth-child(n+4){display:none}
.ill-trade{
  right:0;bottom:0;width:238px;--i:2;
  padding:15px 16px 14px;border-radius:16px;background:var(--paper);
  box-shadow:0 34px 66px -34px rgba(0,0,0,.95);
}
.ill-trade-top{display:flex;align-items:center;gap:11px}
.ill-trade-top .ill-badge{position:static;flex:none;background:rgba(217,98,14,.14);border-color:rgba(217,98,14,.28);color:var(--orange-dk)}
.ill-trade-id b{display:block;font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:-0.025em;line-height:1.2;color:var(--ink)}
.ill-trade-id em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;line-height:1.3;color:var(--muted)}
.ill-trade-list{list-style:none;margin:12px 0 0;padding:11px 0 0;border-top:1px solid var(--line);display:grid;gap:7px}
.ill-trade-list li{display:flex;align-items:center;gap:9px;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.ill-trade-list li::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;background:var(--orange)}

/* the about kind: five suppliers, converging on one */
.ill-many{left:0;top:70px;width:150px;display:grid;gap:12px;--i:0}
/* Each one switches on in turn and stays on (owner, 9 September 2026): a
   flash of solid orange as it takes, then it settles into the accent and
   holds - `both` fill is what makes "stays orange" true rather than a loop. */
.ill-many span{
  padding:9px 13px;border-radius:100px;text-align:center;
  font-family:var(--fh);font-size:12.5px;font-weight:600;letter-spacing:-0.01em;
  color:var(--on-dark-muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  animation:illSwitchOn .5s ease-out both;
  animation-delay:calc(.95s + var(--i,0) * .5s);
}
@keyframes illSwitchOn{
  0%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--on-dark-muted)}
  32%{background:var(--orange);border-color:var(--orange);color:#fff}
  100%{background:rgba(240,160,60,.16);border-color:rgba(240,160,60,.55);color:var(--amber)}
}
.ill-converge{left:150px;top:70px;width:132px;height:232px;--i:1}
.ill-one{
  right:0;top:92px;width:238px;--i:2;
  padding:16px 17px 15px;border-radius:16px;background:var(--paper);
  box-shadow:0 34px 66px -34px rgba(0,0,0,.95);
}
.ill-one-top{display:flex;align-items:center;gap:10px}
.ill-one-mark{width:28px;height:28px;border-radius:8px;flex:none;background:var(--orange);display:inline-flex;align-items:center;justify-content:center}
.ill-one-mark svg{width:16px;height:16px}
.ill-one-top b{font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
.ill-one-k{display:block;margin-top:10px;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--orange-dk)}
.ill-one ul{list-style:none;margin:11px 0 0;padding:11px 0 0;border-top:1px solid var(--line);display:grid;gap:7px}
.ill-one li{display:flex;align-items:center;gap:9px;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.ill-one li::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;background:var(--orange)}

/* the work kind: one website, hung and labelled like a picture */
/* The mock's height is set by its own internals, not by its width, so the
   exhibit is shortened at the hero image - which is also the part a smaller
   frame can afford to lose - to leave the label its clear air beneath. */

/* the editorial kind: one article, open, beside its topics */
.ill-topics{left:0;top:86px;width:126px;display:grid;gap:10px;--i:0}
.ill-topics span{
  padding:8px 12px;border-radius:100px;text-align:center;
  font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:-0.01em;
  color:var(--on-dark-2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
}
.ill-post{
  right:0;top:30px;width:344px;--i:1;
  padding:20px 22px 18px;border-radius:18px;background:var(--paper);
  box-shadow:0 40px 70px -38px rgba(0,0,0,.95);
}
.ill-post-k{display:inline-flex;padding:4px 10px;border-radius:100px;background:rgba(217,98,14,.12);font-family:var(--fh);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-dk)}
.ill-post > b{display:block;margin-top:13px;font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:-0.035em;line-height:1.12;color:var(--ink)}
.ill-post-l{display:block;height:8px;border-radius:4px;background:var(--line);margin-top:11px}
.ill-post-l:first-of-type{margin-top:18px}
.ill-post-l.is-short{width:56%}
.ill-post-m{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .ill-chip--live i::after{animation:none}
  .ill-stage > *,.ill-step,.ill-q,.ill-pin,.ill-pin--big,.ill-pin-halo{animation:none}
  .ill-path-on{animation:none;stroke-dashoffset:0}
  .ill-pin-halo{opacity:.55}
}

/* the copy arrives once and rests, as it does on the homepage */
.hero-std .eyebrow,.hero-std h1,.hero-std .hero-sub,.hero-std .hero-ctas,
.hero-std-facts,.hero-std-art{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.hero-std h1{animation-delay:.05s}
.hero-std .hero-sub{animation-delay:.1s}
.hero-std .hero-ctas{animation-delay:.15s}
.hero-std-facts{animation-delay:.2s}
.hero-std-art{animation-delay:.15s}

/* --- controlled variants ---
   One component, six emphases. Every one keeps --hero-row, the 520px frame,
   the left alignment and the type system: what a variant may change is
   emphasis, never geometry. That is the line between a site that feels
   deliberately designed and one that quietly grows six hero systems again
   under different names. */

/* product - the two flagship commercial pages.
   These carry the longest statements on the site ("Pay monthly web design
   for your business. Custom-built, hosted and looked after for you."), so
   the variant does the opposite of what it first did: it WIDENS the measure
   and eases the size, instead of setting the biggest type on the longest
   words. At 57px on a 15ch measure those two heroes ran to 723 and 753px
   against a 520px row. They are still the most emphatic statements on the
   site; they are simply no longer the tallest. */
.hero-std--product h1{font-size:clamp(34px,3.1vw,42px);max-width:20ch;line-height:1.06;letter-spacing:-0.04em}
.hero-std--product .hero-sub{font-size:17px;max-width:50ch}

/* editorial - the blog. Quieter: a lighter statement, a longer measure, and
   the picture loses the ink shelf, because the shelf is a sales device and
   this page is not selling anything. */
.hero-std--editorial h1{font-size:clamp(34px,3.4vw,44px);font-weight:700;letter-spacing:-0.038em;max-width:18ch}
.hero-std--editorial .hero-sub{font-size:17.5px;max-width:52ch}

/* task - contact and request-a-call. Terse on purpose: the visitor came to
   do something, so the statement is smaller and the sentence is shorter. */
.hero-std--task h1{font-size:clamp(34px,3.5vw,46px);max-width:16ch}
.hero-std--task .hero-sub{max-width:42ch}

/* location - the place pages. Their headlines are long by design: each one
   is a sentence about that specific place ("One street here holds two
   different shopping streets...") and rewriting 172 of them to fit a
   15-character measure would throw away the only thing that makes them
   local. So the variant does the accommodating instead - a smaller
   statement on a much wider measure - which is what the owner meant by
   using constraints to hold the consistency rather than forcing every
   location to write to the same length. */
.hero-std--location h1{font-size:clamp(26px,2.35vw,34px);max-width:28ch;line-height:1.12;letter-spacing:-0.032em}
.hero-std--location .hero-sub{font-size:17px;max-width:52ch}

/* industry - the trade pages. Their headlines are short and punchy, so they
   keep close to the content scale; only the measure widens a little, because
   a trade headline is usually a two-part line. */
.hero-std--industry h1{font-size:clamp(32px,3.3vw,44px);max-width:17ch}
.hero-std--industry .hero-sub{font-size:17px;max-width:50ch}

@media (max-width:1180px){
  .hero-std-in{grid-template-columns:minmax(0,1fr) 440px;gap:36px 48px}
  .hero-std h1{font-size:clamp(36px,3.9vw,48px)}
  .hero-std--product h1{font-size:clamp(36px,3.9vw,50px)}
  .hero-std--editorial h1{font-size:clamp(32px,3.2vw,40px)}
}
/* One column. The height stops being fixed here: stacked, a forced 400px row
   would only add empty paper above and below the two things in it. */
@media (max-width:1040px){
  .hero-std{padding:calc(var(--hdr) + 52px) 0 66px}
  .hero-std-in,.hero-std-solo .hero-std-in{grid-template-columns:minmax(0,1fr);gap:38px;min-height:0}
  .hero-std h1{max-width:18ch}
  .hero-std-photo{aspect-ratio:16/9;max-width:620px}
}
/* The phone composition. The statement and its sentence come first, then the
   picture, then the buttons and the facts - the same order the Pricing hero
   takes, and for the same reason: on one column the visual belongs with the
   words it illustrates, not stranded above the actions. The shelf shrinks to
   8px, because at this size a 14px offset reads as a printing error. */
@media (max-width:640px){
  .hero-std{padding:calc(var(--hdr) + 30px) 0 44px}
  .hero-std-in{gap:0}
  .hero-std-copy{display:contents}
  .hero-std .eyebrow{order:1}
  .hero-std h1{order:2;max-width:none;font-size:clamp(29px,8vw,36px);letter-spacing:-0.038em;margin-bottom:12px}
  .hero-std .hero-sub{order:3;font-size:16.5px;max-width:none;margin-bottom:26px}
  /* the phone sentence replaces the desktop one, where a page wrote one */
  .hero-std .hero-sub-d{display:none}
  .hero-std .hero-sub-m{display:block}
  .hero-std-art{order:4}
  .hero-std .hero-ctas{order:5;margin-top:26px}
  .hero-std-facts{order:6;margin-top:22px}
  .hero-std-photo{border-radius:16px;aspect-ratio:3/2;max-width:none}
  .hero-std-photo::after,.hero-std-photo img{border-radius:16px}
  /* ---------- illustrations on a phone: reflow, do not shrink ----------
     Every composition is drawn on a 520x400 canvas, and until now a phone got
     that canvas scaled to 0.68 and then 0.61 - which is fine for a picture and
     wrong for anything with words in it. At 0.61 the process labels were about
     seven pixels tall and the trade card's second line was unreadable (owner,
     9 September 2026: "the mobile pages ain't all done, the hero's").

     So on a phone the canvas stops being a canvas. The stage becomes a plain
     stack at full width, every child returns to the flow at its natural size,
     and each kind says below how it wants to sit when it cannot overlap. The
     type is then the same size it is everywhere else on the page, which is the
     only way it is readable. */
  .ill{height:auto;overflow:visible}
  .ill-stage{position:relative;width:100%;height:auto;transform:none;display:grid;gap:14px;align-content:start}
  .ill-stage > *{position:static;inset:auto;width:auto;max-width:100%;margin-left:0;margin-right:0;transform:none}
  .ill-stage .ill-site{width:100%}
  .ill-stage .ill-card,.ill-stage .ill-listing,.ill-stage .ill-trade,.ill-stage .ill-one,.ill-stage .ill-post{width:auto}

  /* website: the site, the state, the promise */
  .ill--website .ill-chip--live{justify-self:start}

  /* seo: the search page, then the month */
  .ill--seo .ill-gsr{width:100%}

  /* pricing: the till fills the column */
  .ill--pricing .ill-till{width:100%;margin-left:0}

  /* process: the path cannot survive a narrow column, so the steps become the
     list they always were - two columns of numbered moments, left-aligned. */
  .ill--process .ill-path{display:none}
  .ill-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ill-step{position:static;flex-direction:row;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
  .ill-step i{width:30px;height:30px;font-size:12.5px;flex:none}
  .ill-step.is-end i{width:30px;height:30px}
  .ill-step.is-end i svg{width:16px;height:16px}
  .ill-step b{font-size:13px}

  /* faq: the stack unstacks */
  .ill-qs{display:grid;gap:9px}
  .ill-q{position:static;width:auto}
  .ill--faq .ill-badge--lg{display:none}

  /* about: the five, then the one. The curves have nothing to join across a
     single column, so they go. */
  .ill--about .ill-converge{display:none}
  .ill-many{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

  /* work: the board frames the desktop, the phone still overlaps its corner */
  .ill--work{padding:0}
  .ill--work .ill-stage{padding:12px 10px 14px}
  .ill--work .ill-board{position:absolute;inset:0;height:auto;width:auto}
  .ill--work .ill-desk{width:100%}
  .ill--work .ill-desk .ill-sm .sm-hero{height:118px}
  .ill--work .ill-hand{position:absolute;right:-2px;bottom:8px;width:98px}
  .ill--work .ill-hand .ill-smp{width:98px}

  /* location and the hub: the map, then the card that reads it */
  .ill-map{position:relative}
  .ill--location .ill-map{width:100%;top:auto}

  /* editorial: the topics run as a row above the article */
  .ill-topics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
@media (max-width:400px){
  .ill-steps{grid-template-columns:1fr}
  .ill-many{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Between the two-column and the phone widths the frame is at least as wide
   as the canvas, so the canvas simply sits at its natural size. From 1040
   down to 1180 the frame is 440px, and the canvas scales to it. */
@media (min-width:1041px) and (max-width:1180px){
  .ill{height:338px}
  .ill-stage{width:520px;transform:scale(.846);transform-origin:0 0}
}

/* --- shared hero variants --- */
.hero-about .wrap,.hero-ind .wrap,.hero-loc .wrap,
.hero-faq .wrap,.hero-service .wrap{display:grid;grid-template-columns:1fr .78fr;gap:76px;align-items:end}
.hero-work{overflow:clip}
.hero-work .wrap{display:grid;grid-template-columns:1fr 1.02fr;gap:60px;align-items:center}
.hero-industry .wrap{display:grid;grid-template-columns:1fr .92fr;gap:70px;align-items:center}
.hero-work,.hero-about,.hero-ind,.hero-loc,.hero-faq,.hero-industry,.hero-service{
  padding:82px 0 84px;border-bottom:1px solid var(--line);
}
.hero-work h1,.hero-about h1,.hero-ind h1,.hero-loc h1,.hero-faq h1,.hero-industry h1,.hero-service h1{margin-bottom:24px;max-width:16ch}
.hero-work .hero-sub,.hero-about .hero-sub,.hero-ind .hero-sub,.hero-loc .hero-sub,
.hero-faq .hero-sub,.hero-industry .hero-sub,.hero-service .hero-sub{font-size:19px;color:var(--muted);max-width:48ch;line-height:1.6;margin-bottom:30px}

/* --- Our Work --- */
.work-facts{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--white);overflow:hidden}
.work-facts div{display:flex;justify-content:space-between;gap:20px;padding:16px 24px;border-bottom:1px solid var(--line-2)}
.work-facts div:last-child{border-bottom:0}
.work-facts dt{font-size:14.5px;color:var(--muted)}
.work-facts dd{margin:0;font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.025em}
.work-hint{margin-bottom:26px;font-size:14.5px;color:var(--muted)}
@media (pointer:coarse){.work-hint{display:none}}

/* --- About --- */
.about-quote{margin:0;padding:34px 36px;border-left:3px solid var(--orange);background:var(--white);border-radius:0 14px 14px 0}
.about-quote p{font-family:var(--fh);font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-0.032em;line-height:1.25}
.about-model{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.about-model p{color:var(--muted);font-size:17px;line-height:1.65;margin-top:18px;max-width:46ch}
.about-link{margin-top:24px}
.about-plans{display:grid;gap:18px}
.about-plan{border:1px solid var(--line);border-radius:14px;background:var(--white);padding:28px 30px}
.about-plan-active{box-shadow:inset 0 3px 0 0 var(--orange)}
.about-plan .amount{margin:10px 0 12px}
.about-plan .amount .num{font-size:46px}
.about-plan p{color:var(--muted);font-size:15.5px;line-height:1.55;margin-bottom:18px;max-width:44ch}

/* --- Get Started: styles live in page-get-started.css --- */

/* --- Contact --- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:76px;align-items:start}
.contact-intro h1{margin-bottom:20px;max-width:15ch}
.contact-direct{margin-top:32px;display:grid;gap:12px}
.contact-direct-item{
  display:flex;align-items:center;gap:15px;background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:18px 20px;transition:border-color .15s ease;
}
.contact-direct-item:hover{border-color:#CFC7B9}
.contact-ico{width:40px;height:40px;border-radius:50%;background:var(--wash);color:var(--orange-dk);display:grid;place-items:center;flex:none}
.contact-k{display:block;font-size:12.5px;color:var(--muted)}
.contact-v{display:block;font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.028em;margin-top:2px}
.contact-aside{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.contact-aside p{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.6}
.contact-form{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:40px 42px;box-shadow:0 1px 2px rgba(18,33,47,.04),0 26px 56px -34px rgba(18,33,47,.32)}
.contact-form h2{font-size:clamp(24px,2.4vw,30px)}
.contact-form-lede{margin:12px 0 28px;color:var(--muted);font-size:15.5px}

/* --- Request a call --- */
.call-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:76px;align-items:start}
.call-points{list-style:none;margin:30px 0 0;padding:0}
.call-points li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:16px;color:var(--ink-2)}
.call-now{margin-top:34px;padding:26px 28px;border-radius:14px;background:var(--ink);color:#fff}
.call-now-k{font-size:13.5px;color:var(--on-dark-muted)}
.call-now-v{display:block;margin-top:6px;font-family:var(--fh);font-size:26px;font-weight:800;letter-spacing:-0.04em;color:#fff}
.call-now-sub{margin-top:10px;font-size:14.5px;color:var(--on-dark-muted)}
.call-now-sub a{color:var(--amber);border-bottom:1px solid rgba(240,160,60,.4)}
.call-form{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:40px 42px;box-shadow:0 1px 2px rgba(18,33,47,.04),0 26px 56px -34px rgba(18,33,47,.32)}
.call-form h2{font-size:clamp(24px,2.4vw,30px);margin-bottom:24px}
.call-plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* Three plans (8 September 2026). Both rules that stack this grid on a phone
   are either later in the cascade or higher in specificity, so the variant
   cannot survive onto a small screen — checked rather than assumed, because a
   variant class outranking a stacking rule has caught two sessions tonight. */
.call-plans-3{grid-template-columns:repeat(3,1fr);gap:16px}
.call-plans-3 .call-plan{padding:24px 22px}
.call-plan{border:1px solid var(--line);border-radius:14px;background:var(--white);padding:26px 28px;transition:border-color .15s ease,transform .15s ease}
.call-plan:hover{border-color:#CFC7B9;transform:translateY(-2px)}
.call-plan-active{box-shadow:inset 0 3px 0 0 var(--orange)}
.call-plan .plan-name{display:block;font-family:var(--fh);font-size:14.5px;font-weight:700;color:var(--ink-2);letter-spacing:-0.025em}
.call-plan-price{display:block;margin-top:10px;font-family:var(--fh);font-size:28px;font-weight:800;letter-spacing:-0.04em}
.call-plan-price small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:-0.02em}
.call-plan-note{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

/* --- Finder bar shared --- */
.finder-bar{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.finder-bar .finder-search{flex:1 1 320px}
.finder-bar .finder-count{margin-top:0}

/* --- Industries hub --- */
.ind-hero-side{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px 34px}
.ind-hero-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ind-hero-n{font-family:var(--fh);font-size:60px;font-weight:800;letter-spacing:-0.05em;line-height:1;margin-top:8px}
.ind-hero-t{margin-top:8px;color:var(--ink-2);font-size:16px;line-height:1.5}
.ind-hero-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);font-size:14.5px;color:var(--muted);line-height:1.55}
/* .ind-feature* moved to page-industries.css (hub-only) */

/* --- Locations hub --- */
.loc-hero-side{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px 32px}
.loc-hero-k{font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.loc-hero-t{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.6}
.london-panel{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.london-copy h2{font-size:clamp(34px,3.6vw,46px);margin-bottom:16px}
.london-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.london-areas{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:30px 32px}
.london-areas-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.london-areas-note{margin-top:20px;font-size:14px;color:var(--muted);line-height:1.55}
.loc-ind{margin-top:64px;padding-top:56px;border-top:1px solid var(--line)}
.loc-ind .head{margin-bottom:36px}
.loc-ind .head h2{max-width:22ch}

/* --- FAQ page --- */
.faq-group{margin-top:44px}
.faq-group:first-child{margin-top:24px}
.faq-group-h{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dk);margin-bottom:6px}

/* --- Industry pages: gardeners --- */
.hero-industry-preview{position:relative}
.hero-preview-cap{margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.5}
.season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.season{border:1px solid var(--line);border-radius:14px;background:var(--white);padding:26px 24px}
.season-k{display:block;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dk);margin-bottom:12px}
.season h3{font-size:18px;margin-bottom:14px}
.season ul{list-style:none;margin:0;padding:0}
.season li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:15px;color:var(--ink-2)}
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ba{margin:0}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.ba-img{position:relative;display:block;height:170px}
.ba-before{background:linear-gradient(150deg,#6E6A57,#8C8873)}
.ba-after{background:linear-gradient(150deg,#2E4A34,#6E9152)}
.ba-tag{
  position:absolute;left:10px;bottom:10px;font-family:var(--fh);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(18,33,47,.55);
  border-radius:4px;padding:4px 9px;
}
.ba figcaption{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.55}
.ind-split{display:grid;grid-template-columns:1fr .85fr;gap:70px;align-items:center}
.quote-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px 32px;box-shadow:0 22px 48px -32px rgba(18,33,47,.34)}
.quote-card-k{display:block;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.quote-mock{margin-top:18px;display:grid;gap:10px}
.quote-row{display:block;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:14px 16px}
.quote-row i{display:block;height:6px;width:40%;border-radius:3px;background:#DDD7CC}
.quote-row-tall{padding-bottom:34px}
.quote-chiprow{display:flex;gap:8px;flex-wrap:wrap}
.quote-chiprow em{
  font-style:normal;font-family:var(--fh);font-size:13px;font-weight:600;color:var(--ink-2);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;background:var(--paper);
}
.quote-btn{display:block;text-align:center;background:var(--orange);color:#fff;font-family:var(--fh);font-weight:700;font-size:15px;border-radius:8px;padding:14px}
.quote-card-note{margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* --- Industry pages: plumbers --- */
.phone-split{display:grid;grid-template-columns:.72fr 1.28fr;gap:66px;align-items:center}
.phone-mock{justify-self:center;width:280px;border-radius:32px;border:9px solid #12212F;background:#12212F;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.phone-screen{border-radius:24px;overflow:hidden;background:#fff}
.phone-bar{display:flex;align-items:center;gap:8px;background:#EFEBE3;padding:9px 12px}
.phone-bar span{width:7px;height:7px;border-radius:50%;background:#C5BEB2}
.phone-bar em{font-style:normal;font-size:10px;color:#7A736C;background:#fff;border-radius:4px;padding:3px 9px;flex:1}
.phone-hero{background:linear-gradient(140deg,#1F3350,#41628F);padding:20px 16px 22px;color:#fff}
.phone-hero b{display:block;font-family:var(--fh);font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.03em}
.phone-hero i{display:block;font-style:normal;font-size:11px;opacity:.8;margin-top:6px}
.phone-call{display:block;margin-top:14px;background:var(--orange);color:#fff;text-align:center;font-family:var(--fh);font-weight:700;font-size:13px;border-radius:7px;padding:11px}
.phone-rows{padding:6px 16px}
.phone-rows span{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #F0EBE2;font-size:12px;color:#2B3B4B}
.phone-rows span:last-child{border-bottom:0}
.phone-rows i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.phone-areas{padding:14px 16px 20px;background:#FBF9F5}
.phone-areas b{display:block;font-family:var(--fh);font-size:11px;font-weight:700;color:#2B3B4B;margin-bottom:9px}
.phone-areas i{display:block;height:5px;border-radius:3px;background:#E4DFD6;margin-bottom:6px}
.phone-areas i:last-child{width:62%}
.phone-points{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.phone-n{display:block;font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--orange-dk);margin-bottom:10px}
.phone-point p{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.55}

/* --- Industry growth blocks --- */
.growth-split{display:grid;grid-template-columns:1.05fr .95fr;gap:66px;align-items:center}
.search-var{color:var(--amber);font-style:italic}
.growth-aside{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:32px 34px}
.growth-aside .amount{color:#fff}
.growth-aside .amount .per{color:#9DB0BF}
.growth-aside-note{margin-top:10px;color:var(--on-dark-muted);font-size:15px;line-height:1.5}
.growth-aside .mini-list li{color:var(--on-dark-2)}
.growth-aside .btn{margin-top:22px;width:100%}
.growth-honest{margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);color:var(--on-dark-muted);font-size:14.5px;line-height:1.65;max-width:88ch}

/* --- Additional service pages --- */
.service-price{margin-top:22px;font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.022em;color:var(--ink)}
.service-price-tbc{font-weight:600;color:var(--muted)}
.service-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px 34px}
.service-card .mini-list{margin-top:16px}

/* Every converted page's own hero-ctas is byte-identical on this rule
   (display:flex;gap:13px;flex-wrap:wrap), only the margin varies slightly -
   the hero-service family (Services/SEO Boost/Logo Design/Google Ads/
   Additional Pages) uses this shared copy instead of a page-specific one. */
.hero-ctas{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:32px}

/* ============================================================
   17. RESPONSIVE — Phase 2 layouts
   ============================================================ */
@media (max-width:1040px){
  .hero-work .wrap,.hero-about .wrap,.hero-ind .wrap,.hero-loc .wrap,
  .hero-faq .wrap,.hero-service .wrap,.hero-industry .wrap{grid-template-columns:1fr;gap:48px}
  .about-model,.contact-grid,.call-grid,.london-panel,.ind-split,.phone-split,.growth-split{grid-template-columns:1fr;gap:44px}
  .ind-feature-grid,.call-plans,.phone-points{grid-template-columns:1fr;gap:22px}
  .season-grid{grid-template-columns:1fr 1fr}
  .ba-grid{grid-template-columns:1fr 1fr}
  .contact-form,.call-form{padding:32px 28px}
}
@media (max-width:820px){
  .hero-work,.hero-about,.hero-ind,.hero-loc,.hero-faq,.hero-industry,.hero-service{padding:56px 0 60px}
  .season-grid,.ba-grid{grid-template-columns:1fr}
  .about-quote{padding:26px 24px}
  .contact-form,.call-form{padding:26px 22px}
  .ind-hero-n{font-size:48px}
  .finder-bar{gap:14px}
}
@media (max-width:430px){
  .london-actions .btn{width:100%}
  .phone-mock{width:100%;max-width:280px}
}

/* --- footer, responsive (desktop rules live in section 13) --- */
@media (max-width:1200px){
  .foot-top{grid-template-columns:minmax(200px,1fr) minmax(0,3.2fr);gap:44px 40px}
  .foot-cols{gap:32px 22px}
}
@media (max-width:1040px){
  .foot-say{grid-template-columns:1fr;gap:24px;padding:52px 0 44px}
  .foot-top{grid-template-columns:1fr;gap:40px;padding:44px 0 40px}
  .foot-brand > p{max-width:48ch}
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-places{grid-template-columns:1fr;gap:10px}
}
@media (max-width:640px){
  /* the phone footer: statement (no CTAs, the owner's decision), brand and
     contact, every link group as a tap-to-open row (site.js module 6), the
     places row as a compact wrapped list, then the legal bar. Nothing is
     removed from the DOM. */
  .foot-say{padding:40px 0 32px;gap:0}
  .foot-say-h{font-size:26px;max-width:none}
  .foot-say-p{font-size:15px;margin-top:10px}
  .foot-top{gap:22px;padding:32px 0 8px;border-bottom:0}
  .foot-brand > p{margin-top:14px;font-size:14px}
  .foot-contact{margin-top:14px}
  .foot-cols{display:block;border-top:1px solid rgba(255,255,255,.12)}
  .foot-col{border-bottom:1px solid rgba(255,255,255,.12)}
  footer.site .foot-col .as-h4{margin:0;padding:0;border-bottom:0;letter-spacing:.02em;text-transform:none;font-size:15px}
  .foot-grp-btn{
    display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:52px;
    padding:14px 0;background:none;border:0;text-align:left;cursor:pointer;
    font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em;color:#fff;
  }
  .foot-grp-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .foot-grp-btn .m-acc-chev{width:8px;height:8px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(45deg) translateY(-2px);flex:none;margin-right:4px;transition:transform .2s ease}
  .foot-col.open .foot-grp-btn .m-acc-chev{transform:rotate(-135deg) translateY(2px)}
  .foot-col ul{padding-bottom:12px}
  .foot-col a{padding:7px 0;font-size:15px}
  .foot-col .foot-all{margin-top:4px}
  /* without JavaScript the groups simply show in full */
  html:not(.js) footer.site .foot-col .as-h4{padding:14px 0 8px}
  .foot-places{padding:18px 0;gap:8px}
  .foot-places-list li + li::before{margin:0 9px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 0 28px}
  .foot-bottom .legal{gap:8px 16px}
  /* The thirty town links were the single largest readability failure on
     every page: thirty anchors at 13px, and the 44px minimum in mobile.css
     silently did nothing because an inline element ignores min-height.
     They stay inline, which WCAG 2.2 allows for links inside a run of
     text, but each one now has a real box, real separation and type that
     can be read outdoors. Specificity here deliberately beats mobile.css. */
  .foot-places .foot-places-list{row-gap:0}
  .foot-places .foot-places-list li{font-size:14.5px;line-height:1.5}
  .foot-places .foot-places-list a{display:inline-block;min-height:0;padding:12px 0}
  .foot-bottom .legal,.foot-bottom .foot-copy,.foot-bottom .legal a{font-size:14.5px}
  .foot-bottom .legal a{display:inline-block;min-height:0;padding:11px 0}
}
@media (prefers-reduced-motion:reduce){.foot-col .foot-all i{transition:none}}

/* ============================================================
   18. HOMEPAGE — step markers + terms strip
   ============================================================ */

/* --- step marker: one circle holding the label and the number --- */
.step-marker{
  display:grid;place-content:center;justify-items:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--white);border:2px solid var(--orange);
  margin-bottom:18px;line-height:1;
}
.step-marker em{
  font-style:normal;font-family:var(--fh);font-size:8.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk);
}
.step-marker b{
  display:block;margin-top:4px;font-family:var(--fh);font-size:18px;font-weight:800;
  letter-spacing:-0.03em;color:var(--orange-dk);
}

/* --- pricing information strip beneath the two plan cards --- */
.terms-strip{
  grid-column:1/-1;margin:0;
  border-top:1px solid var(--line);background:#FBF9F5;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.terms-block{padding:32px 44px 34px;border-left:1px solid var(--line)}
.terms-block:first-child{border-left:0}
.terms-block dt{
  font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.terms-block dd{margin:0}
.terms-main{
  display:block;font-family:var(--fh);font-size:20px;font-weight:700;
  letter-spacing:-0.03em;line-height:1.25;color:var(--ink);
}
.terms-sub{display:block;margin-top:11px;font-size:14px;line-height:1.6;color:var(--muted);max-width:40ch}
.terms-rows{display:grid;gap:10px}
.terms-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:10px;border-bottom:1px solid var(--line-2);
}
.terms-row:last-child{border-bottom:0;padding-bottom:0}
.terms-row em{font-style:normal;font-size:15px;color:var(--muted)}
.terms-row b{
  font-family:var(--fh);font-size:18px;font-weight:700;letter-spacing:-0.028em;
  color:var(--ink);white-space:nowrap;
}

@media (max-width:1120px){
  /* tablet: three columns still read well, they just need less side padding */
  .terms-block{padding:30px 28px 32px}
  .terms-sub{max-width:100%}
}
@media (max-width:900px){
  /* below this three columns would be too narrow, so stack with room to breathe */
  .terms-strip{grid-template-columns:1fr}
  .terms-block{border-left:0;border-top:1px solid var(--line);padding:28px 34px 30px}
  .terms-block:first-child{border-top:0}
  .terms-sub{max-width:60ch}
}
@media (max-width:820px){
  .terms-block{padding:26px 24px 28px}
  .step-marker{width:52px;height:52px;margin-bottom:16px}
  .step-marker b{font-size:17px}
}
@media (max-width:430px){
  .terms-row{gap:14px}
  .terms-row b{font-size:17px}
  .terms-main{font-size:19px}
}

/* ============================================================
   19. SITE-WIDE ELEVATION — photography in previews, industry
       tiles, the value stack. Shared by the homepage, sales pages,
       About, Locations and the industry pages.
   ============================================================ */

/* --- portfolio previews: photographed hero and gallery bands --- */
.v-hero-photo{background-size:cover;background-position:center}
.v-hero-photo::after{background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 60%)}
.v-photo{background-size:cover;background-position:center}
.v-gal .v-photo,.v-fig.v-photo{opacity:1}

/* --- industry photograph tiles --- */
.istrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.istrip-item{
  position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;
  background:#E9E3D8;color:#fff;isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease;
}
.istrip-item img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .55s ease}
.istrip-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,25,38,0) 42%,rgba(13,25,38,.82) 100%)}
.istrip-item:hover{transform:translateY(-3px);box-shadow:0 24px 44px -28px rgba(18,33,47,.55)}
.istrip-item:hover img{transform:scale(1.045)}
.istrip-item:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.istrip-cap{
  position:absolute;left:18px;right:16px;bottom:15px;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--fh);font-weight:700;font-size:17px;letter-spacing:-0.025em;line-height:1.2;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.istrip-cap i{font-style:normal;opacity:.85;flex:none;transition:transform .2s ease}
.istrip-item:hover .istrip-cap i{transform:translateX(3px)}
.istrip-sm .istrip-cap{font-size:15px;left:14px;right:12px;bottom:12px}
.istrip-foot{margin-top:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.istrip-foot p{color:var(--muted);font-size:15.5px;max-width:64ch;line-height:1.6}
.dark .istrip-foot p{color:var(--on-dark-muted)}

/* --- value stack: chips that add up to one price --- */
.vsum{
  border:1px solid var(--line);border-radius:16px;background:var(--white);
  padding:24px 30px 26px;box-shadow:0 1px 2px rgba(18,33,47,.04);
}
.vsum-k{
  display:block;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.vsum-row{display:flex;align-items:center;gap:24px}
.vsum-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:9px;flex:1 1 auto;min-width:0}
.vsum-items li{
  font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:8px 14px;white-space:nowrap;
}
.vsum-items .vsum-op{background:none;border:0;padding:0 8px;color:#C6BFB2;font-size:16px}
.vsum-total{display:flex;align-items:center;gap:14px;flex:none;padding-left:24px;border-left:1px solid var(--line)}
.vsum-eq{font-family:var(--fh);font-size:24px;font-weight:700;color:#C6BFB2}
.vsum-price{display:flex;align-items:baseline;gap:4px;font-family:var(--fh);letter-spacing:-0.045em;line-height:1}
.vsum-price b{font-size:34px;font-weight:800}
.vsum-price small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:-0.02em}
.vsum-total em{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:6px;white-space:nowrap}
.dark .vsum{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.dark .vsum-k{color:var(--on-dark-muted)}
.dark .vsum-items li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dark .vsum-items .vsum-op{background:none;border:0;color:#5D7182}
.dark .vsum-total{border-left-color:rgba(255,255,255,.14)}
.dark .vsum-eq{color:#5D7182}
.dark .vsum-price b{color:#fff}
.dark .vsum-price small,.dark .vsum-total em{color:var(--on-dark-muted)}

/* --- "what happens after you send this": small numbered list on contact forms --- */
.after-send{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.after-send li{display:grid;grid-template-columns:30px 1fr;gap:4px 14px;align-items:start}
.after-send span{
  grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--white);border:2px solid var(--orange);color:var(--orange-dk);
  font-family:var(--fh);font-weight:800;font-size:13px;
}
.after-send b{font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);line-height:1.35;padding-top:4px}
.after-send em{font-style:normal;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* --- "you / us" and "urgent / planned" pair (was page-websites only) --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.split-col{border:1px solid var(--line);border-radius:12px;padding:32px 34px;background:var(--white)}
.split-col.mine{background:var(--ink);border-color:var(--ink);color:#D6E0E8}
.split-col h3{margin-bottom:5px}
.split-col.mine h3{color:#fff}
.split-col .sub{font-size:14.5px;color:var(--muted);margin-bottom:18px}
.split-col.mine .sub{color:#93A6B6}
.split-col ul{list-style:none;margin:0;padding:0}
.split-col li{display:flex;gap:11px;padding:10px 0;font-size:16px;line-height:1.5;align-items:flex-start;border-bottom:1px solid var(--line-2)}
.split-col.mine li{border-bottom-color:rgba(255,255,255,.1)}
.split-col li:last-child{border-bottom:0}
.split-col.mine .dot{background:var(--amber)}

/* --- photograph + "what this website needs" cards --- */
.needs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.needs{margin:0;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.needs img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;display:block}
.needs-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.needs h3{font-size:19px;margin-bottom:10px}
.needs ul{list-style:none;margin:0;padding:0}
.needs li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:15px;line-height:1.5;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.needs li:last-child{border-bottom:0}
.needs .link-u{margin-top:auto;padding-top:18px;align-self:flex-start}

/* --- photograph grid (industry page galleries) --- */
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.photo-grid .photo-fig{aspect-ratio:4/3;border-radius:14px}

/* --- the five pages of a site, as a numbered row --- */
.sitemap{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:none}
.sitemap-page{border:1px solid var(--line);border-radius:14px;background:var(--white);padding:22px 22px 24px}
.sitemap-n{display:block;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dk)}
.sitemap-page h3{font-size:17.5px;margin:10px 0 8px}
.sitemap-page p{font-size:14.5px;color:var(--muted);line-height:1.55}
.sitemap-foot{margin-top:28px}

/* ============================================================
   20. CREATIVE PASS — signature compositions and polish
   ============================================================ */

/* --- interaction polish: buttons lift a pixel, links underline in --- */
.btn{transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary:hover{box-shadow:0 10px 22px -12px rgba(180,78,8,.6)}
.link-u{border-bottom:0;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;transition:background-size .2s ease}
.link-u:hover{background-size:100% 2px}
.eyebrow::before{transition:width .25s ease}

/* --- hero facts: a short tick list beneath hero CTAs --- */
.hero-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;max-width:52ch}
.hero-facts li{display:flex;align-items:center;gap:9px;font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.018em;color:var(--ink-2)}

/* --- "one clear choice": two products, an "or", typographic prices --- */
.choice{display:grid;grid-template-columns:1fr 72px 1fr;align-items:start}
.choice-col{border-top:1px solid var(--line);padding-top:26px}
.choice-col-main{border-top:3px solid var(--orange);padding-top:24px}
.choice-k{display:block;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk);margin-bottom:14px}
.choice-name{font-size:clamp(22px,2.2vw,28px);letter-spacing:-0.03em;line-height:1.15;margin:0 0 16px}
.choice-price{display:flex;align-items:baseline;gap:2px;font-family:var(--fh);font-weight:800;letter-spacing:-0.055em;line-height:.95;font-size:clamp(54px,6.4vw,88px);color:var(--ink)}
.choice-price .cur{font-size:.42em;font-weight:700;align-self:flex-start;margin-top:.22em}
.choice-price small{font-size:clamp(15px,1.3vw,18px);font-weight:600;letter-spacing:-0.02em;color:var(--muted);margin-left:10px}
.choice-line{margin-top:18px;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:40ch}
.choice-line b{font-family:var(--fh);font-weight:700;color:var(--ink)}
.choice-facts{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line-2)}
.choice-facts li{padding:11px 0;border-bottom:1px solid var(--line-2);font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.choice-facts b{font-family:var(--fh);font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.choice-cta{margin-top:26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.choice-or{align-self:stretch;position:relative;display:flex;justify-content:center;padding-top:26px}
.choice-or::before{content:"";position:absolute;top:26px;bottom:0;left:50%;width:1px;background:var(--line)}
.choice-or span{
  position:sticky;top:120px;margin-top:180px;width:44px;height:44px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--fh);font-weight:700;font-size:15px;color:var(--muted);z-index:1;
}
.band .choice-or span,.white .choice-or span{background:var(--white)}
.choice-foot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted);line-height:1.6;max-width:84ch}
.choice-foot b{font-family:var(--fh);color:var(--ink)}

/* --- hero scene: the product as the visual (browser + phone + facts) --- */
.scene{position:relative;padding:26px 0 46px 46px}
.scene-frame{position:relative;z-index:1}
.scene-chip{
  position:absolute;left:0;top:0;z-index:3;background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px 13px;box-shadow:0 18px 40px -22px rgba(18,33,47,.5);font-family:var(--fh);
}
.scene-chip b{display:block;font-size:23px;font-weight:800;letter-spacing:-0.045em;line-height:1;color:var(--ink)}
.scene-chip b small{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:-0.01em}
.scene-chip span{display:block;margin-top:5px;font-family:var(--fb);font-size:12.5px;color:var(--muted)}
.scene-phone{position:absolute;left:0;bottom:0;z-index:2;width:156px;border-radius:22px;border:6px solid #12212F;background:#12212F;box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
.scene-phone-screen{border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;height:262px}
.scene-phone-bar{display:flex;gap:4px;padding:7px 9px;background:#EFEBE3;flex:none}
.scene-phone-bar i{width:5px;height:5px;border-radius:50%;background:#C5BEB2}
/* the page inside the phone is taller than the screen and scrolls on hover (site.js) */
.scene-phone-view{position:relative;flex:1;overflow:hidden}
.scene-phone-page{position:absolute;left:0;right:0;top:0;transform:translateY(0);transition:transform var(--dur,3s) cubic-bezier(.33,0,.2,1);will-change:transform}
.scene-phone-gal{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:2px 10px 6px}
.scene-phone-gal i{display:block;aspect-ratio:4/3;border-radius:4px;background-size:cover;background-position:center;background-color:#E9E4DA}
.scene-phone-cta{margin:4px 10px 8px;padding:11px 10px;border-radius:7px;background:#12212F;color:#fff;text-align:center;font-family:var(--fh)}
.scene-phone-cta b{display:block;font-size:10px;font-weight:700;letter-spacing:-0.02em}
.scene-phone-cta span{display:inline-block;margin-top:6px;background:var(--orange);font-size:8.5px;font-weight:700;padding:5px 9px;border-radius:5px}
.scene-phone-foot{display:flex;gap:6px;padding:4px 10px 12px}
.scene-phone-foot i{display:block;height:5px;border-radius:3px;background:#E6E1D7;flex:1}
.scene-phone-foot i:last-child{flex:.5}
@media (pointer:coarse){
  .scene-phone-view{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .scene-phone-page{position:relative;transition:none;transform:none!important;will-change:auto}
}
@media (prefers-reduced-motion:reduce){
  .scene-phone-page{transition:none!important;transform:none!important;will-change:auto}
}
.scene-phone-hero{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;color:#fff;font-family:var(--fh)}
.scene-phone-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,33,47,.05),rgba(18,33,47,.78))}
.scene-phone-hero b{position:relative;font-size:10.5px;line-height:1.25;letter-spacing:-0.02em}
.scene-phone-hero span{position:relative;margin-top:6px;align-self:flex-start;background:var(--orange);font-size:9px;font-weight:700;padding:5px 9px;border-radius:5px}
.scene-phone-rows{padding:4px 10px 8px}
.scene-phone-rows span{display:block;font-size:9px;color:#2B3B4B;padding:6px 0;border-bottom:1px solid #F0EBE2;font-family:var(--fb)}
.scene-phone-rows span:last-child{border-bottom:0}
.scene-toast{
  position:absolute;right:-12px;bottom:22px;z-index:3;
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px 16px 10px 10px;
  box-shadow:0 18px 40px -22px rgba(18,33,47,.5);
}
.scene-toast-head{display:flex;align-items:center;gap:10px}
.scene-toast i{width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-style:normal;font-family:var(--fh);font-weight:800;font-size:13px;flex:none}
.scene-toast b{display:block;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.scene-toast em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px}
/* status lines that tick in once a site build completes (Websites hero) */
.scene-status{list-style:none;margin:9px 0 0;padding:9px 0 0 2px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}
.scene-status li{display:flex;align-items:center;gap:7px;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:-0.015em;color:var(--ink-2)}
.scene-status .ps-tick{width:15px;height:15px;color:var(--orange);flex:none}
.scene-toast-status{padding-right:14px}

@media (min-width:1201px){
  /* the scene bleeds towards the viewport edge so the product feels bigger than the grid */
  .scene-bleed{margin-right:calc(-1 * ((100vw - var(--w)) / 2 + var(--pad) - 28px))}
}
@media (max-width:1040px){
  .scene{padding:26px 0 46px 34px}
}
@media (max-width:900px){
  .choice{grid-template-columns:1fr}
  .choice-or{padding:0;height:64px;align-items:center;justify-content:flex-start;gap:16px}
  .choice-or::before{left:0;right:0;top:50%;bottom:auto;height:1px;width:auto}
  .choice-or span{position:static;margin:0}
  .choice-col-main{margin-top:0}
}
@media (max-width:640px){
  /* on a phone the browser preview alone tells the story; the mock phone would cover it */
  .scene{padding:22px 0 30px 0}
  .scene-phone{display:none}
  .scene .v-nav span:not(.v-logo):not(.v-btn){display:none}
  .scene .v-logo,.scene .v-btn{white-space:nowrap}
  .scene-chip{padding:10px 13px;left:10px;top:-8px}
  .scene-chip b{font-size:19px}
  .scene-toast{right:-8px;bottom:16px;padding:8px 12px 8px 8px}
  .scene-toast em{display:none}
  .choice-price{font-size:clamp(46px,13vw,58px)}
}

/* --- editorial photo split: photograph beside copy --- */
.photo-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.photo-split-rev > .photo-fig{order:2}
.photo-fig{margin:0;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#E9E3D8}
.photo-fig img{width:100%;height:100%;object-fit:cover;display:block}
.photo-fig figcaption{
  position:absolute;left:16px;bottom:14px;z-index:1;font-family:var(--fh);font-size:12.5px;font-weight:700;
  letter-spacing:-0.012em;color:#fff;background:rgba(13,25,38,.62);border-radius:100px;padding:6px 12px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.photo-split h2{margin-bottom:18px}
.photo-split p{color:var(--muted);font-size:17px;line-height:1.65;max-width:50ch}
.photo-split p + p{margin-top:14px}
.photo-split .mini-list{margin-top:22px}

@media (max-width:1040px){
  .istrip{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .photo-split{grid-template-columns:1fr;gap:34px}
  .photo-split-rev > .photo-fig{order:0}
  .needs-grid{grid-template-columns:1fr 1fr}
  .sitemap{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
}
@media (max-width:820px){
  .needs-grid{grid-template-columns:1fr;gap:16px}
  .photo-grid{grid-template-columns:1fr 1fr;gap:12px}
  .sitemap{grid-template-columns:1fr 1fr;gap:12px}
  .split-col{padding:26px 24px}
  .vsum{padding:20px 20px 22px}
  .vsum-row{flex-direction:column;align-items:stretch;gap:18px}
  .vsum-total{padding-left:0;border-left:0;padding-top:16px;border-top:1px solid var(--line)}
  .dark .vsum-total{border-top-color:rgba(255,255,255,.14)}
  .vsum-total em{white-space:normal}
}
@media (max-width:640px){
  .sitemap{grid-template-columns:1fr}
  .photo-grid .photo-fig figcaption{font-size:11.5px;left:10px;bottom:10px}
  .istrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .istrip-cap{font-size:15px;left:14px;right:12px;bottom:12px}
  .vsum-items li{font-size:13.5px;padding:7px 12px}
  .vsum-items .vsum-op{padding:0 6px}
}
/* --- quiet motion on the form and FAQ pages (motion.js + hero-forms.js / hero-faq.js) --- */
/* where a message goes (contact form header) */
.mj{display:flex;align-items:center;gap:10px;margin:18px 0 26px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.mj-node{display:flex;align-items:center;gap:8px;flex:none;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.015em;color:var(--muted);transition:color .35s var(--ease)}
.mj-node i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:1.5px solid var(--line);color:#98A4AE;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.mj-node i svg{width:14px;height:14px}
.mj-node.on{color:var(--ink)}
.mj-node.on i{background:var(--orange);border-color:var(--orange);color:#fff}
.mj-line{flex:1;height:2px;background:var(--line);border-radius:2px}
.mj-line::after{background:var(--orange)}
.mj[data-scene].is-live .mj-node[data-s]{transform:none;opacity:1}
@media (max-width:480px){
  .mj-node b{display:none}
  .mj-node.on b{display:inline}
}
/* the three steps after a call request light up in order */
.after-send-live li{position:relative}
.after-send-live li span{transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.after-send-live li::before{content:"";position:absolute;left:14px;top:34px;bottom:-16px;width:2px;background:var(--line-2);border-radius:2px}
.after-send-live li:last-child::before{display:none}
.after-send-live li::after{content:"";position:absolute;left:14px;top:34px;bottom:-16px;width:2px;background:var(--orange);border-radius:2px;transform:scaleY(0);transform-origin:0 0;transition:transform .5s var(--ease-io)}
.after-send-live li:last-child::after{display:none}
.after-send-live.is-live li{opacity:.5;transition:opacity .4s var(--ease)}
.after-send-live.is-live li.on,.after-send-live.is-done li{opacity:1}
.after-send-live li.on span{background:var(--orange);color:#fff}
.after-send-live li.on::after{transform:none}
.after-send-live.is-done li span{background:var(--white);color:var(--orange-dk)}
.after-send-live.is-done li::after{transform:none}
/* FAQ: example questions type into the empty search box */
.finder-ghost{position:absolute;left:52px;top:50%;transform:translateY(-50%);right:22px;font-family:var(--fb);font-size:17px;color:#98A4AE;pointer-events:none;text-overflow:ellipsis}
.finder-search.ghosting input::placeholder{color:transparent}
/* FAQ: answers open smoothly instead of snapping */
details.q .a{overflow:hidden}
details.q.animating .a{transition:height .38s var(--ease),padding .38s var(--ease),opacity .32s var(--ease)}
details.q summary::after{transition:transform .32s var(--ease),top .32s var(--ease)}
.mj-node.on .ps-tick path{stroke-dashoffset:0}
/* a scene's changing text must never re-balance the grid it sits in */
[data-scene]{min-width:0}
.after-send-live.is-live li{opacity:.62}

/* ============================================================
   21. MOTION CORRECTION PASS — shared components
       the value ledger (static), the Google-style search page,
       the detailed site mock-up and its phone. Used by more than
       one page, so they live here rather than in page CSS.
   ============================================================ */

/* --- value ledger: an itemised statement that totals to one price --- */
.ledger{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.ledger-intro .eyebrow{margin-bottom:18px}
.ledger-h{font-size:clamp(28px,3vw,38px);letter-spacing:-0.035em;line-height:1.12;max-width:14ch}
.ledger-lede{margin-top:18px;color:var(--muted);font-size:17px;line-height:1.6;max-width:40ch}
.ledger-intro .btn{margin-top:28px}
.ledger-body{border-top:2px solid var(--ink)}
.ledger-group{padding:20px 0 6px;border-bottom:1px solid var(--line)}
.ledger-g{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dk);margin:0 0 4px}
.ledger-lines{list-style:none;margin:0;padding:0}
.ledger-lines li{display:grid;grid-template-columns:34px 1fr auto;gap:0 14px;align-items:start;padding:11px 0;border-top:1px solid var(--line-2)}
.ledger-lines li:first-child{border-top:0}
.ledger-n{font-family:var(--fh);font-size:12.5px;font-weight:700;color:#B3AA9C;letter-spacing:.02em;padding-top:3px}
.ledger-what b{font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.022em;color:var(--ink)}
.ledger-what em{display:block;font-style:normal;font-size:14px;color:var(--muted);line-height:1.5;margin-top:2px}
.ledger-inc{display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink-2);white-space:nowrap;padding-top:2px}
.ledger-inc svg{width:16px;height:16px;color:var(--orange)}
.ledger-total{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:22px;border-top:2px solid var(--ink);margin-top:-1px}
.ledger-total-k b{display:block;font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.022em}
.ledger-total-k em{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:5px;line-height:1.5}
.ledger-total-v{text-align:right;flex:none}
.ledger-price{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--fh);letter-spacing:-0.05em;line-height:1}
.ledger-price b{font-size:clamp(40px,4.2vw,54px);font-weight:800;color:var(--ink)}
.ledger-price small{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:-0.02em}
.ledger-total-v em{display:block;font-style:normal;font-family:var(--fh);font-size:14px;font-weight:700;color:var(--orange-dk);letter-spacing:-0.015em;margin-top:8px}
/* wide: the three groups side by side beneath the heading */
.ledger-wide{grid-template-columns:1fr;gap:40px}
.ledger-wide .ledger-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.ledger-wide .ledger-intro .eyebrow{grid-column:1/-1;margin-bottom:0}
.ledger-wide .ledger-h{max-width:18ch}
.ledger-wide .ledger-lede{margin-top:0;max-width:52ch}
.ledger-wide .ledger-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ledger-wide .ledger-group{border-bottom:0;padding:22px 32px 18px 0}
.ledger-wide .ledger-group + .ledger-group{border-left:1px solid var(--line);padding-left:32px}
.ledger-wide .ledger-group:last-child{padding-right:0}
.ledger-wide .ledger-lines li{grid-template-columns:30px 1fr}
.ledger-wide .ledger-inc{grid-column:2;justify-self:start;margin-top:6px}
/* compact: no meanings under the items, the number and name carry it */
.ledger-compact .ledger-lines li{padding:9px 0;align-items:center}
.ledger-compact .ledger-n{padding-top:0}
.ledger-compact .ledger-inc{padding-top:0}
.ledger-compact .ledger-group{padding:16px 0 4px}
.ledger-wide.ledger-compact .ledger-lines li{grid-template-columns:30px 1fr auto}
.ledger-wide.ledger-compact .ledger-inc{grid-column:auto;justify-self:end;margin-top:0}
@media (max-width:1040px){
  .ledger{grid-template-columns:1fr;gap:36px}
  .ledger-h{max-width:20ch}
  .ledger-lede{max-width:56ch}
  .ledger-wide .ledger-intro{grid-template-columns:1fr;gap:14px}
}
@media (max-width:860px){
  .ledger-wide .ledger-groups{grid-template-columns:1fr}
  .ledger-wide .ledger-group{padding:20px 0 6px;border-bottom:1px solid var(--line)}
  .ledger-wide .ledger-group + .ledger-group{border-left:0;padding-left:0}
  .ledger-wide .ledger-lines li{grid-template-columns:34px 1fr auto}
  .ledger-wide .ledger-inc{grid-column:auto;margin-top:0}
}
@media (max-width:640px){
  .ledger-total{flex-direction:column;align-items:flex-start;gap:14px}
  .ledger-total-v{text-align:left}
  .ledger-lines li{grid-template-columns:30px 1fr auto;gap:0 10px}
  .ledger-inc span{display:none}
}

/* --- Google-style search page: familiar, not a copy ---
   The illustration uses a system sans (Arial) so it reads as a real results
   page seen on a screen, while the page around it stays in Manrope/Inter.
   Nothing here is a logo; nothing implies a position. */
.gsr{
  --gf:Arial,"Helvetica Neue",Helvetica,sans-serif;--gblue:#1A0DAB;--gtab:#1A73E8;--gtext:#202124;--gmuted:#4D5156;--gline:#DADCE0;--gsoft:#70757A;
  position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 1px 2px rgba(18,33,47,.04),0 30px 60px -34px rgba(18,33,47,.45);
  font-family:var(--gf);color:var(--gtext);
}
.gsr-head{position:relative;padding:18px 20px 0;z-index:5}
.gsr-field{
  display:flex;align-items:center;gap:12px;height:46px;padding:0 14px 0 16px;border:1px solid var(--gline);border-radius:24px;background:#fff;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease),border-radius .2s var(--ease);
}
.gsr-field.focus{box-shadow:0 1px 6px rgba(32,33,36,.28);border-color:transparent}
.gsr-field.open{box-shadow:0 1px 6px rgba(32,33,36,.28);border-color:transparent;border-radius:24px 24px 0 0}
.gsr-mag{width:20px;height:20px;color:#9AA0A6;flex:none}
.gsr-q{flex:1;min-width:0;font-size:16px;color:var(--gtext);white-space:nowrap;overflow:hidden;display:flex;align-items:baseline;gap:5px}
.gsr-q .ps-type{display:inline}
.gsr-end{display:flex;align-items:center;gap:12px;flex:none}
.gsr-x{width:1px;height:22px;background:var(--gline)}
.gsr-go{width:22px;height:22px;color:#4A7BD1;flex:none}
.gsr-sugg{
  list-style:none;margin:0;position:absolute;left:20px;right:20px;top:64px;z-index:6;background:#fff;border-radius:0 0 24px 24px;
  box-shadow:0 4px 6px rgba(32,33,36,.28);padding:6px 0 12px;opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .28s var(--ease);
}
.gsr-sugg::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--gline)}
.gsr-sugg.on{opacity:1;transform:none}
.gsr-sugg li{display:flex;align-items:center;gap:14px;padding:7px 18px;font-size:15px;color:var(--gtext);white-space:nowrap;overflow:hidden}
.gsr-sugg li svg{width:16px;height:16px;color:#9AA0A6;flex:none}
.gsr-sugg li b{font-weight:700}
.gsr-sugg li.hi{background:#F1F3F4}
.gsr-tabs{display:flex;gap:22px;padding:11px 20px 0 34px;border-bottom:1px solid var(--gline);font-size:13px;color:#5F6368}
.gsr-tabs span{padding:0 0 8px;border-bottom:3px solid transparent;white-space:nowrap}
.gsr-tabs span.on{color:var(--gtab);border-bottom-color:var(--gtab)}
.gsr-body{position:relative;padding:12px 20px 16px}
.gsr-stat{font-size:12.5px;color:var(--gsoft);margin:0 0 12px}
/* local businesses block */
.gsr-local{border:1px solid var(--gline);border-radius:12px;overflow:hidden;margin-bottom:12px;background:#fff}
.gsr-local-h{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 8px;font-size:14.5px;font-weight:700}
.gsr-local-h small{font-size:12px;font-weight:400;color:var(--gsoft)}
.gsr-map{position:relative;height:72px;background:#E9EBEE;overflow:hidden;
  background-image:
    linear-gradient(0deg,rgba(255,255,255,.9) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(255,255,255,.9) 1.5px,transparent 1.5px),
    linear-gradient(28deg,transparent 46%,rgba(255,255,255,.95) 46%,rgba(255,255,255,.95) 49%,transparent 49%),
    linear-gradient(112deg,transparent 58%,rgba(255,255,255,.95) 58%,rgba(255,255,255,.95) 61.5%,transparent 61.5%);
  background-size:52px 52px,52px 52px,100% 100%,100% 100%}
.gsr-map::after{content:"";position:absolute;left:8%;top:8%;width:34%;height:40%;border-radius:6px;background:#D7E4CF;opacity:.8}
.gsr-pin{position:absolute;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg) scale(0);background:#D93025;border:2px solid #fff;box-shadow:0 3px 6px rgba(0,0,0,.25);transform-origin:50% 100%;transition:transform .45s var(--ease-out)}
.gsr-pin::after{content:attr(data-l);position:absolute;inset:0;display:grid;place-items:center;transform:rotate(45deg);color:#fff;font-size:10px;font-weight:700;font-family:var(--gf)}
.gsr-pin.on{transform:rotate(-45deg) scale(1)}
.gsr-pin.you{background:#1A73E8}
.gsr-biz{list-style:none;margin:0;padding:0}
.gsr-biz li{position:relative;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:9px 14px 9px 34px;border-top:1px solid var(--gline);align-items:center;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.gsr-biz li::before{content:attr(data-l);position:absolute;left:11px;top:11px;width:17px;height:17px;border-radius:50%;background:#D93025;color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center}
.gsr-biz li.you::before{background:#1A73E8}
.gsr-biz b{font-size:14px;font-weight:600;line-height:1.3;grid-column:1}
.gsr-biz .gsr-rate,.gsr-biz em{grid-column:1}
.gsr-rate{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gmuted);line-height:1.4}
.gsr-stars{color:#E8A33C;font-size:11.5px;letter-spacing:1px;line-height:1}
.gsr-biz em{display:block;font-style:normal;font-size:12px;color:var(--gmuted);line-height:1.4}
.gsr-open{color:#188038;font-style:normal}
.gsr-acts{grid-column:2;grid-row:1/4;display:flex;gap:6px;align-self:center}
.gsr-act{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border:1px solid var(--gline);border-radius:16px;font-size:12px;color:var(--gtab);white-space:nowrap;background:#fff;transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.gsr-act svg{width:13px;height:13px}
.gsr-act.hit{background:#E8F0FE;box-shadow:0 0 0 2px rgba(26,115,232,.35)}
.gsr-biz li.hi{background:#F8F9FA}
/* an annotation in PrimeStart's own voice, laid over the page */
.gsr-you{position:absolute;right:12px;top:-9px;z-index:2;font-family:var(--fh);font-size:10.5px;font-weight:700;letter-spacing:-0.005em;color:var(--orange-dk);background:var(--wash);border:1px solid #EED9BC;border-radius:100px;padding:2px 9px;white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity .35s var(--ease),transform .4s var(--ease)}
.gsr-biz li.you .gsr-you{right:12px;top:-9px}
.gsr-res .gsr-you{left:0;right:auto;top:-12px}
.on > .gsr-you,.is-done .gsr-you{opacity:1;transform:none}
/* organic and sponsored results */
.gsr-res{position:relative;padding:10px 0 9px}
.gsr-res + .gsr-res{border-top:1px solid #F1F3F4}
.gsr-src{display:flex;align-items:center;gap:10px}
.gsr-fav{width:26px;height:26px;border-radius:50%;background:#F1F3F4;border:1px solid var(--gline);display:grid;place-items:center;font-size:11px;font-weight:700;color:#5F6368;flex:none}
.gsr-src b{display:block;font-size:13.5px;font-weight:400;color:var(--gtext);line-height:1.2}
.gsr-src em{display:block;font-style:normal;font-size:12px;color:var(--gmuted);margin-top:1px}
.gsr-title{display:block;font-size:17.5px;color:var(--gblue);line-height:1.3;margin:5px 0 2px;letter-spacing:0;transition:text-decoration-color .2s}
.gsr-snip{font-size:13px;line-height:1.5;color:var(--gmuted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gsr-snip b{font-weight:700;color:var(--gtext)}
.gsr-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:7px;font-size:13px;color:var(--gblue)}
.gsr-spon{display:block;font-size:13px;font-weight:700;color:var(--gtext);margin-bottom:8px}
.gsr-ad{padding:12px 14px 12px;margin:0 -14px;border-radius:12px;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.gsr-ad.hit,.gsr-res.hit{background:#F8F9FA}
.gsr-ad.hit .gsr-title,.gsr-res.hit .gsr-title{text-decoration:underline}
/* a PrimeStart note that explains what a block of the page means */
.gsr-note{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:-0.01em;color:var(--orange-dk);background:var(--wash);border:1px solid #EED9BC;border-radius:8px;padding:5px 10px}
.gsr-note i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none;font-style:normal}
.gsr-note-alt{color:var(--ink-2);background:var(--paper);border-color:var(--line)}
.gsr-note-alt i{background:var(--ink-2)}
/* the website opening in front of the results */
.gsr-site{position:absolute;right:-26px;bottom:-54px;width:64%;z-index:4;transform:translateY(18px) scale(.98);opacity:0;transition:opacity .45s var(--ease),transform .6s var(--ease-out);pointer-events:none}
.gsr-site.on,.is-done .gsr-site{opacity:1;transform:none}
.gsr-site .sm{box-shadow:0 30px 60px -26px rgba(18,33,47,.6)}
.gsr-toast{position:absolute;left:14px;bottom:-14px;z-index:5;display:flex;align-items:center;gap:11px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px 14px 10px 10px;box-shadow:0 18px 40px -22px rgba(18,33,47,.5);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .5s var(--ease-out)}
.gsr-toast.on,.is-done .gsr-toast{opacity:1;transform:none}
.gsr-toast i{width:30px;height:30px;border-radius:9px;background:var(--orange);color:#fff;display:grid;place-items:center;flex:none;font-style:normal}
.gsr-toast i svg{width:15px;height:15px}
.gsr-toast b{display:block;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.gsr-toast em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px}
.gsr .ps-cursor{left:0;top:0}
/* the whole page keeps one height while its parts arrive */
.gsr-body [data-s]{transition-duration:.5s}
/* without JavaScript the finished page shows in full */
html:not(.js) .gsr-site,html:not(.js) .gsr-toast,html:not(.js) .gsr-you{opacity:1;transform:none}
html:not(.js) .gsr-pin{transform:rotate(-45deg) scale(1)}
.sm-cta{transition:box-shadow .3s var(--ease)}
.sm-cta.hit{box-shadow:0 0 0 3px rgba(255,255,255,.55)}
@media (max-width:640px){
  .gsr{border-radius:14px}
  .gsr-head{padding:14px 14px 0}
  .gsr-field{height:42px}
  .gsr-q{font-size:15px}
  .gsr-sugg{left:14px;right:14px;top:56px}
  .gsr-tabs{padding-left:22px;gap:18px}
  .gsr-tabs span:nth-child(n+4){display:none}
  .gsr-body{padding:12px 14px 16px}
  .gsr-title{font-size:17px}
  .gsr-map{height:70px}
  .gsr-biz li{padding-left:32px}
  .gsr-acts{grid-row:auto;grid-column:1/-1;margin-top:6px}
  .gsr-site{position:relative;right:auto;bottom:auto;width:100%;margin-top:12px;transform:translateY(12px)}
  .gsr-toast{position:relative;left:auto;bottom:auto;margin-top:10px}
}

/* --- the detailed website mock-up (browser) and its phone --- */
.sm{position:relative;border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(18,33,47,.12);box-shadow:0 34px 70px -34px rgba(18,33,47,.5);font-family:var(--fb);color:#2B3B4B;--b:#2B3B4B;--b2:#4A5F72}
.sm-chrome{height:34px;background:#EDEAE4;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid #DDD7CC}
.sm-chrome i{width:9px;height:9px;border-radius:50%;background:#C9C2B5;flex:none}
.sm-url{margin-left:10px;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #DDD7CC;border-radius:6px;font-size:11px;color:#6A737C;padding:4px 10px;flex:1;max-width:300px;white-space:nowrap;overflow:hidden;min-width:0}
.sm-url svg{color:#3E8E5A;flex:none}
.sm-page{position:relative;background:#fff}
.sm-nav{height:38px;display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid #EEEBE5;font-size:10.5px;color:#5C6C7B;font-weight:500;position:relative}
.sm-logo{font-family:var(--fh);font-weight:800;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--b);margin-right:auto;white-space:nowrap;transition:color .6s var(--ease)}
.sm-call{margin-left:auto;background:var(--b);color:#fff;font-family:var(--fh);font-weight:700;font-size:9.5px;padding:5px 10px;border-radius:4px;font-style:normal;white-space:nowrap;transition:background .6s var(--ease)}
.sm-hero{position:relative;height:196px;display:flex;align-items:center;padding:0 22px;color:#fff;overflow:hidden;isolation:isolate;background:#E9E4DA}
.sm-photo{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.8s var(--ease-out)}
.sm-photo-next{opacity:0}
.sm-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(13,25,38,.78) 0%,rgba(13,25,38,.52) 46%,rgba(13,25,38,.1) 100%);z-index:1;transition:opacity .6s var(--ease)}
.sm-hero-copy{position:relative;z-index:2;max-width:64%}
.sm-hero-copy small{display:block;font-family:var(--fh);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:7px}
.sm-hero-copy b{display:block;font-family:var(--fh);font-size:19px;font-weight:700;line-height:1.14;letter-spacing:-0.03em}
.sm-hero-copy p{font-size:10.5px;line-height:1.45;opacity:.86;margin-top:7px;max-width:34ch}
.sm-btns{display:flex;gap:6px;margin-top:12px}
.sm-cta{background:#fff;color:#12212F;font-family:var(--fh);font-size:9.5px;font-weight:700;padding:6px 12px;border-radius:4px;white-space:nowrap}
.sm-cta2{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;font-family:var(--fh);font-size:9.5px;font-weight:700;padding:6px 12px;border-radius:4px;white-space:nowrap}
.sm-band{padding:14px 18px;border-top:1px solid #EEEBE5;position:relative}
.sm-band > b{display:block;font-family:var(--fh);font-size:10.5px;font-weight:700;letter-spacing:-0.02em;color:#12212F;margin-bottom:8px}
.sm-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sm-cards span{border:1px solid #EDE9E2;border-radius:6px;overflow:hidden;background:#FBFAF8;min-width:0}
.sm-cards i{display:block;height:34px;background:linear-gradient(135deg,var(--b),var(--b2));opacity:.88;transition:background .6s var(--ease)}
.sm[style*="--photo"] .sm-cards i{background:linear-gradient(0deg,rgba(18,33,47,.18),rgba(18,33,47,.18)),var(--photo) center/cover;opacity:1}
.sm[style*="--photo"] .sm-cards span:nth-child(2) i{background-position:20% 30%}
.sm[style*="--photo"] .sm-cards span:nth-child(3) i{background-position:80% 40%}
.sm[style*="--photo"] .sm-cards span:nth-child(4) i{background-position:50% 80%}
.sm-cards em{display:block;font-style:normal;font-family:var(--fh);font-size:8.5px;font-weight:700;color:#2B3B4B;padding:6px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-areas{padding-top:11px;padding-bottom:12px;background:#FBFAF8}
.sm-pills{display:flex;gap:6px;flex-wrap:wrap}
.sm-pills span{font-size:8.5px;color:#2B3B4B;border:1px solid #E6E0D6;background:#fff;border-radius:100px;padding:3px 8px;white-space:nowrap}
.sm-foot{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--b);color:#fff;font-size:8.5px;position:relative;transition:background .6s var(--ease)}
.sm-foot b{font-family:var(--fh);font-weight:700;font-size:9.5px;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-foot span{width:30px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);flex:none}
.sm-foot em{font-style:normal;opacity:.8;white-space:nowrap}
/* every changing field fades between values when the trade swaps */
.sm [data-f],.smp [data-f]{transition:opacity .28s var(--ease)}
.sm.swapping [data-f]:not(.sm-photo),.smp.swapping [data-f]:not(.smp-hero){opacity:0}
/* compact: navigation and hero only (inside the search page) */
.sm-compact .sm-services,.sm-compact .sm-areas,.sm-compact .sm-foot{display:none}
.sm-compact .sm-hero{height:150px;padding:0 16px}
.sm-compact .sm-hero-copy b{font-size:14.5px}
.sm-compact .sm-hero-copy p{display:none}
.sm-compact .sm-nav{height:30px;padding:0 14px;font-size:9px;gap:10px}
.sm-compact .sm-nav span:nth-child(n+5){display:none}
.sm-compact .sm-chrome{height:28px}
/* wire: the unbuilt structure - grey bars where the content will go */
.sm-lbl{position:absolute;left:8px;top:7px;z-index:3;font-family:var(--fh);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dk);background:var(--wash);border:1px dashed #E5B27C;border-radius:4px;padding:2px 6px;opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.sm.wire .sm-lbl{opacity:1}
.sm.wire{--wb:#E4DFD5}
.sm.wire .sm-photo,.sm.wire .sm-hero::before{opacity:0}
.sm.wire .sm-hero{background:#F4F1EB}
.sm.wire .sm-hero-copy small,.sm.wire .sm-hero-copy b,.sm.wire .sm-hero-copy p,.sm.wire .sm-cta,.sm.wire .sm-cta2,.sm.wire .sm-nav > span,.sm.wire .sm-logo,.sm.wire .sm-call,.sm.wire .sm-band > b,.sm.wire .sm-cards em,.sm.wire .sm-pills span,.sm.wire .sm-foot b,.sm.wire .sm-foot em{color:transparent;background:var(--wb);border-color:transparent;border-radius:4px}
.sm.wire .sm-hero-copy b{background:linear-gradient(var(--wb),var(--wb)) no-repeat 0 0/92% 100%}
.sm.wire .sm-cards i{background:var(--wb);opacity:1}
.sm.wire .sm-foot{background:#F4F1EB}
.sm.wire .sm-foot span{background:var(--wb)}
.sm.wire .sm-nav{border-bottom-style:dashed}
.sm.wire .sm-band{border-top-style:dashed}
.sm.wire .sm-hero,.sm.wire .sm-nav,.sm.wire .sm-band,.sm.wire .sm-foot{outline:1px dashed #E5B27C;outline-offset:-1px}
.sm .sm-hero-copy small,.sm .sm-hero-copy b,.sm .sm-hero-copy p,.sm .sm-cta,.sm .sm-cta2,.sm .sm-nav > span,.sm .sm-logo,.sm .sm-call,.sm .sm-band > b,.sm .sm-cards em,.sm .sm-pills span,.sm .sm-foot b,.sm .sm-foot em,.sm .sm-cards i,.sm .sm-foot,.sm .sm-hero{transition:color .5s var(--ease),background-color .6s var(--ease),border-color .5s var(--ease),outline-color .4s var(--ease)}
@media (max-width:640px){
  .sm-nav{padding:0 12px;gap:10px;font-size:10px}
  .sm-hero{padding:0 16px}
}
/* the phone */
.smp{width:150px;border-radius:24px;border:6px solid #12212F;background:#12212F;box-shadow:0 30px 60px -28px rgba(0,0,0,.55);--b:#2B3B4B;--b2:#4A5F72;font-family:var(--fb)}
.smp-screen{border-radius:18px;overflow:hidden;background:#fff;height:268px;display:flex;flex-direction:column}
.smp-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 12px 4px;font-family:var(--fh);font-size:8px;font-weight:700;color:#12212F}
.smp-bar i{font-style:normal}
.smp-bar i:last-child{width:14px;height:6px;border-radius:2px;border:1px solid #12212F}
.smp-nav{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #EEEBE5}
.smp-nav b{font-family:var(--fh);font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .6s var(--ease)}
.smp-nav span{width:14px;height:8px;border-top:1.5px solid #2B3B4B;border-bottom:1.5px solid #2B3B4B;flex:none}
.smp-hero{position:relative;flex:1;min-height:104px;background-size:cover;background-position:center;background-color:#E9E4DA;display:flex;align-items:flex-end;padding:10px;color:#fff;font-family:var(--fh);transition:background-image .6s var(--ease)}
.smp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,33,47,.05),rgba(18,33,47,.8))}
.smp-hero b{position:relative;font-size:10.5px;line-height:1.25;letter-spacing:-0.02em}
.smp-rows{padding:5px 10px 4px}
.smp-rows span{display:block;font-size:8.5px;color:#2B3B4B;padding:5px 0;border-bottom:1px solid #F0EBE2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smp-rows span:last-child{border-bottom:0}
.smp-call{margin:4px 10px 10px;padding:8px;border-radius:6px;background:var(--orange);color:#fff;text-align:center;font-family:var(--fh);font-size:9px;font-weight:700}

/* ============================================================
   22. TERM TIMELINE — month 1, the minimum term, after month 18, your choice
   (primestart_term_timeline(); used on Home and the location pages)
   ============================================================ */
.term-tl{margin-top:8px}
.term-tl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;border:1px solid var(--line);border-radius:18px;background:var(--white);overflow:hidden}
.term-tl-step{padding:30px 28px 30px;border-right:1px solid var(--line);position:relative}
.term-tl-step:last-child{border-right:0}
.term-tl-when{
  display:inline-block;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);margin-bottom:16px;
}
.term-tl-h{display:block;font-family:var(--fh);font-size:20px;font-weight:800;letter-spacing:-0.03em;line-height:1.2;margin-bottom:12px}
.term-tl-step p{font-size:15px;line-height:1.58;color:var(--muted);margin:0}
.term-tl-step.is-key{background:var(--wash)}
.term-tl-step.is-key::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--orange)}
.term-tl-step.is-key .term-tl-h{color:var(--ink)}
.term-tl-note{margin-top:20px;font-size:14px;color:var(--muted);line-height:1.6;max-width:78ch}

@media (max-width:1040px){
  .term-tl-steps{grid-template-columns:1fr 1fr}
  .term-tl-step:nth-child(2){border-right:0}
  .term-tl-step:nth-child(1),.term-tl-step:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .term-tl-steps{grid-template-columns:1fr}
  .term-tl-step{border-right:0;border-bottom:1px solid var(--line);padding:22px 20px}
  .term-tl-step:last-child{border-bottom:0}
  .term-tl-h{font-size:18px}
}

/* ============================================================
   23. LOCATION POSTCARDS — real photographs of places, linking to their pages
   (primestart_location_postcards(); Home and the Locations hub)
   ============================================================ */
.loc-postcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.loc-postcard{
  position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 18px 36px -24px rgba(18,33,47,.45);
}
.loc-postcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.loc-postcard:hover img{transform:scale(1.05)}
.loc-postcard span{
  position:absolute;left:10px;bottom:10px;font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:-0.02em;
  color:var(--ink);background:rgba(255,255,255,.92);border-radius:100px;padding:5px 11px;
}
.loc-postcard:nth-child(2),.loc-postcard:nth-child(4){transform:translateY(18px)}
@media (max-width:1040px){
  .loc-postcards{grid-template-columns:repeat(4,1fr)}
  .loc-postcard:nth-child(2),.loc-postcard:nth-child(4){transform:none}
}
@media (max-width:640px){.loc-postcards{grid-template-columns:1fr 1fr;gap:10px}}
@media (prefers-reduced-motion:reduce){.loc-postcard img{transition:none}}


/* ============================================================
   PHONE, SECOND PASS (5 September 2026) — shared furniture

   Three things that appear on every page and were measured under the
   system's floors: the logo and the menu's alternate action fell short
   of a 44px target, the mobile menu's group keys and the sign-in note
   sat at 11 and 12.5px, and the Request a call panel's supporting
   lines sat at 13 to 14px. None of this is visible above 640px.
   ============================================================ */
@media (max-width:640px){
  header.site .logo,.foot-brand .logo{display:inline-flex;align-items:center;min-height:44px}
  .m-nav .m-k{font-size:12.5px}
  .m-quick a{font-size:12px}
  /* Request a call: the panel is the page, so its supporting lines
     have to read as easily as the headline above them. */
  .call-plan-price small,.call-plan .call-plan-note,.ps-label em{font-size:14.5px;line-height:1.5}
  .call-sec li span{font-size:14.5px}
  .call-now .call-now-v{min-height:44px;display:inline-flex;align-items:center}
}
/* The town links become the footer's sixth tap-to-open group on a phone
   (site.js, footerGroups). Closed it is one row like the others; open it
   holds all thirty links at a full 44px each. */
@media (max-width:640px){
  footer.site .foot-places.foot-grp{display:block;padding:0;gap:0;border-top:1px solid rgba(255,255,255,.12)}
  footer.site .foot-places.foot-grp .foot-places-l{display:block;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit}
  footer.site .foot-places.foot-grp .foot-grp-btn{width:100%}
  footer.site .foot-places.foot-grp .foot-places-list{padding:2px 0 12px}
  /* .foot-places-list carries display:flex, which outranks the browser's
     own [hidden]{display:none}, so the closed group stayed 479px tall. */
  footer.site .foot-places.foot-grp .foot-places-list[hidden]{display:none}
}

/* ------------------------------------------------------------
   The phone homepage header carries one action, not two
   (owner, 5 September 2026)

   The homepage hero already has "Start my website" with "Talk to
   someone first" beneath it. A second orange Get started sitting
   directly above them made the first viewport busier for no gain.

   It is hidden for the whole page, not just the first screen, because
   the persistent action after the hero is already the sticky bottom bar
   (template-parts/layout/sticky-cta.php), which reveals on scroll,
   names both plans and sits in thumb reach. Showing a header button as
   well would be the second competing primary call to action the owner
   asked to remove. Inner pages are untouched: a visitor landing
   straight on Websites or Pricing may have no other purchase action in
   view. Note a pre-existing rule already hides .head-cta .btn below
   400px site-wide, so on most phones this button never appeared anyway.
   ------------------------------------------------------------ */
@media (max-width:640px){
  body.home .head-get{display:none}
}

/* ==========================================================================
   THE THREE PRODUCTS
   Rendered by primestart_three_products() in inc/components.php. It lives in
   the shared sheet rather than a page sheet because the owner's rule is that
   EVERY locality hub and EVERY borough hub shows all three products with
   current prices - 685 canonical localities and 33 boroughs. Three products
   copied into a template is three products that will one day be two on a page
   nobody reopens.

   Follows the pricing page's language rather than inventing a card: a rule
   above each column, no boxes, the figure set in the display face with
   tabular numerals, and the combined product marked by taking the orange rule
   rather than by a coloured panel. The brief asks for the strongest offer to
   be obvious and for badges not to be overused; one eyebrow and one rule is
   the whole of the emphasis.

   MOBILE IS A DIFFERENT LAYOUT, NOT A NARROWER ONE. The brief is explicit
   that a visitor at 390px must be able to compare 49.99, 399.99 and 349.99
   without endless scrolling, and that a desktop pricing table squeezed onto a
   phone does not count. Below 640px each product becomes a name-and-figure
   row with its term underneath, so all three sit within a screen; the
   descriptions come back on .tp-full, used on the pages whose job is to
   explain one product rather than to offer a choice.
   ========================================================================== */


/* Retargeted 8 September 2026 from three products to two: standalone SEO's
   middle card is gone, so the surviving pair gets its own two-column rule
   rather than stretching across a grid built for three. */






/* margin-top:auto lines the three calls to action up whatever the prose does. */



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

@media (max-width:640px){

    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"flag flag" "name price" "term term" "cta cta";
    align-items:baseline;
    gap:2px 14px;
    padding-top:16px;
    margin-top:18px;
  }

  /* Hidden rather than removed: .tp-full restores them below. */

  /* Full width and 48px tall, so every product is an equally easy tap. */

}

/* The full treatment, for a page explaining one product rather than offering
   a choice between three. */
@media (max-width:640px){
}

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

/* ============================================================
   The two products, as two panels (inc/components.php,
   primestart_two_products). REBUILT 9 September 2026 under the MASTER
   SPECIFICATION - screenshot 08 marked "Two ways to buy PrimeStart" RED.
   Two hairline columns did not make a choice feel like a choice. This is
   the pattern the design research kept returning to for exactly-two-plan
   pricing: the first plan on paper, the fuller plan on ink, so the eye
   sees that the second contains the first before it reads a word.
   ============================================================ */
.tp-head{max-width:46rem;margin:0 0 34px}
.tp-h{margin:0 0 10px}
.tp-lede{margin:0;color:var(--muted);font-size:17px;line-height:1.6;max-width:52ch}
.tp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch;max-width:60rem}
.tp-card{
  position:relative;display:flex;flex-direction:column;padding:32px 32px 30px;border-radius:18px;
  background:var(--white);border:1px solid var(--line);box-shadow:0 24px 50px -38px rgba(18,33,47,.35);
}
.tp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tp-name{margin:0;font-family:var(--fh);font-size:24px;font-weight:800;letter-spacing:-0.025em;line-height:1.2;color:var(--ink)}
.tp-place{font-weight:500;color:var(--muted)}
.tp-flag{
  margin:0;padding:6px 11px;border-radius:100px;background:var(--wash);border:1px solid #EBD8BE;white-space:nowrap;
  font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dk);
}
.tp-need{margin:12px 0 0;font-size:14.5px;line-height:1.45;color:var(--muted)}
.tp-price{display:flex;align-items:baseline;gap:10px;margin:14px 0 0;flex-wrap:wrap}
.tp-price b{font-family:var(--fh);font-size:clamp(40px,3.8vw,52px);font-weight:800;letter-spacing:-0.055em;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
.tp-price span{font-size:15px;color:var(--muted)}
.tp-line{margin:16px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:40ch}
.tp-term{margin:auto 0 0;padding-top:20px;font-size:14px;line-height:1.5;color:var(--muted)}
.tp-cta{align-self:flex-start;margin-top:14px}
.tp-cta i{margin-left:.45em;font-style:normal}
/* the fuller plan, on ink */
.tp-card-best{background:var(--ink);border-color:var(--ink)}
.tp-card-best .tp-name,.tp-card-best .tp-price b{color:#fff}
.tp-card-best .tp-need,.tp-card-best .tp-price span,.tp-card-best .tp-term{color:var(--on-dark-muted)}
.tp-card-best .tp-line{color:var(--on-dark-2)}
.tp-card-best .tp-flag{background:rgba(240,160,60,.16);border-color:rgba(240,160,60,.45);color:var(--amber)}
.tp-note{margin:30px 0 0;max-width:74ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
@media (max-width:820px){.tp-grid{grid-template-columns:1fr;max-width:none}}
@media (max-width:640px){
  .tp-card{padding:26px 22px 24px}
  .tp-top{flex-wrap:wrap}
  .tp-cta{width:100%}
}

/* ============================================================
   FAQ: topics as sections, questions in columns (MASTER SPECIFICATION,
   screenshot 03 RED across the list). The finder above is unchanged; this
   only changes how a topic's questions are laid out once it is found.
   ============================================================ */
.faq-page--cols .faq-group{padding-top:44px;margin-top:44px;border-top:1px solid var(--ink)}
/* The first topic head used to sit almost against the filter chips above it
   (owner, 9 September 2026: "the Website / 9 questions area sits too close to
   the hero buttons"). The list gets its own start. */
.faq-page--cols{margin-top:54px}
.faq-page--cols .faq-group:first-child{padding-top:0;margin-top:0;border-top:0}
.faq-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}
.faq-page--cols .faq-group-h{margin:0;font-size:22px;font-weight:800;letter-spacing:-0.03em;text-transform:none;color:var(--ink)}
.faq-group-n{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.faq-list--cols{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}
.faq-list--cols details.q{break-inside:avoid}
@media (max-width:900px){.faq-list--cols{grid-template-columns:1fr}}
@media (max-width:640px){
  .faq-page--cols .faq-group{padding-top:30px;margin-top:30px}
  .faq-page--cols .faq-group-h{font-size:19px}
}

/* Tablets and small laptops, 901-1040px. The first pass stacked the hero
   here, which put a 400px illustration under the copy and ran the hero to
   900-1040px on a 1024 screen (Playwright, 9 September 2026). Keeping two
   columns with the canvas scaled to a 380px frame holds the hero to the
   same shape it has on a desktop, and roughly halves its height. */
@media (min-width:901px) and (max-width:1040px){
  .hero-std{padding:calc(var(--hdr) + 48px) 0 60px}
  .hero-std-in,.hero-std-solo .hero-std-in{grid-template-columns:minmax(0,1fr) 380px;gap:32px 40px;min-height:0}
  .hero-std h1{max-width:16ch;font-size:clamp(32px,3.6vw,42px)}
  .hero-std--product h1{font-size:clamp(30px,3.3vw,38px)}
  .ill{height:292px}
  .ill-stage{width:520px;transform:scale(.73);transform-origin:0 0}
}