/* Obie Digital site styles (rebuilt from the web-agency template, 25 Oct 2026).
   Order: fonts, the template base (templates/assets/core.css), the web-agency theme (templates/web-agency/style.css),
   then the parts only this site has, at the end. Bump ?v= on every page when this changes. */
@font-face{font-family:"General Sans";src:url(/assets/fonts/general-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url(/assets/fonts/general-sans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url(/assets/fonts/general-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url(/assets/fonts/general-sans-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Shared base for every template. Themes set the tokens and add their own layout.
   Tokens each theme must define: --bg --band --surface --ink --muted --line
   --accent --on-accent --accent-text --font-head --font-body --radius --radius-btn --shadow --shell */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font-body)}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.1;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit}
.body-copy a{text-decoration-color:currentColor;text-underline-offset:3px;text-decoration-thickness:2px}
.body-copy a:hover{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}

.shell{width:min(100% - 32px, var(--shell));margin-inline:auto}
.band{background:var(--band)}
.section{padding-block:clamp(56px,8vw,112px)}
.muted{color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--bg);padding:8px 12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Buttons: one size everywhere, label centred in a fixed box */
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--btn-w,240px);min-height:var(--btn-h,52px);
  padding:0 24px;border-radius:var(--radius-btn);border:2px solid var(--accent);background:var(--accent);color:var(--on-accent);
  font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .3s,background .3s,color .3s}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
@media (hover:hover){.btn:hover{background:transparent;color:var(--accent)}.btn--outline:hover{background:var(--ink);color:var(--bg)}}
.btn:active{transform:scale(1.03)}
@media (max-width:720px){.btn{width:100%}}

/* Placeholder for a real photo or screenshot. Never ship one. */
.ph{position:relative;background:var(--ph,var(--band));border-radius:var(--radius);aspect-ratio:var(--ar,4/3);overflow:hidden}
.ph::after{content:attr(data-label);position:absolute;inset:auto auto 12px 12px;font:600 11px/1 var(--font-body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface);padding:6px 8px;border-radius:4px}

/* Photos: fill their box. Demo photos are Unsplash (free licence); swap for the client's own. */
.cover{width:100%;height:100%;object-fit:cover}
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph:has(> img)::after{display:none}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* Forms */
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:14px}
.field label:has(+ :required)::after{content:" *";color:var(--accent-text)}
.field input,.field select,.field textarea{width:100%;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:calc(var(--radius) / 2);background:var(--bg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.form{display:grid;gap:14px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:660px){.form__row{grid-template-columns:1fr}
  .form .field{grid-template-columns:82px 1fr;align-items:center;gap:10px}
  .form .field--stack{grid-template-columns:1fr}}

/* Accordion (native details, no JS needed) */
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font:600 18px/1.3 var(--font-head);position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);transition:transform .5s cubic-bezier(.45,0,.25,1)}
.acc details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc details p{padding-bottom:18px;margin:0}

/* Tables: full rounded outline; stack to label/value on phones */
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{background:var(--band);font-size:14px}

/* Mobile nav */
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0}
@media (max-width:1180px){
  .nav-toggle{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);
    display:grid;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.45,0,.25,1)}
  .nav.is-open{max-height:80vh;border-bottom:1px solid var(--line)}
  .nav a{padding:14px 16px;border-top:1px solid var(--line)}
}

/* Scroll reveal: content is visible without JS */
@media (prefers-reduced-motion:no-preference){
  .js .reveal:not(.is-in){opacity:0;transform:translateY(14px)}
  .reveal{transition:opacity .6s ease,transform .6s ease}
}

/* Footer and small text links: at least ~40px tall to tap */
footer a{display:inline-block;padding-block:10px}

/* Social links in the footer: 40px round targets, icon in currentColor */
.social{display:flex;gap:4px;align-items:center;margin-left:-10px}
.social a{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;color:inherit}
.social svg{width:20px;height:20px}
@media (hover:hover){.social a:hover{color:var(--accent)}}
footer .shell > .social{margin-left:0}


/* Privacy line under every form button */
.privacy-note{grid-column:1/-1;margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.privacy-note a{color:inherit;text-decoration:underline;padding:0;display:inline}


/* Hover lifts only where hover exists; touch screens get .is-lit when fully in view */
@media (hover:hover){.lift:hover{transform:translateY(-4px) scale(1.012)}}
.lift{transition:transform .3s}
.lift.is-lit{transform:translateY(-4px) scale(1.012)}
/* WEB AGENCY: digital, web and marketing agencies and freelancers selling to small businesses.
   Imagery-led and minimal: big black and near-white blocks, one accent used sparingly, real photos and video.
   Patterns from Rankify, Hawker Studios, Adcelerate and HIVER (October 2026): never their layouts, copy or images.
   Demo business, people, prices, logos, reviews, numbers and the showcase brands are stand-ins. */
:root{
  --bg:#FBFAF8;--band:#F2F0EC;--surface:#FFFFFF;--ink:#0E0F11;--muted:#5C5F66;--line:#E5E2DC;
  --accent:#FF7A1A;--on-accent:#0E0F11;--accent-text:#A84A0A;
  --dark:#0E0F11;--dark-2:#17181B;--on-dark:#F6F4F0;--muted-dark:#A3A6AD;--line-dark:#2A2C31;
  --font-head:"General Sans",sans-serif;--font-body:"General Sans",sans-serif;
  --radius:14px;--radius-btn:999px;--btn-w:0;--btn-h:54px;
  --shadow:0 30px 60px -30px rgb(14 15 17 / .35);--shell:1320px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(24px,5vw,72px);
}
body{font-size:17px}
/* wider side gutters than core.css (16px), so text and buttons sit further from the screen edge */
.shell{width:min(100% - 2 * var(--gutter),var(--shell))}
h1,h2,h3{font-weight:600;letter-spacing:-.035em}
h1{font-size:clamp(48px,7vw,108px);line-height:.92;margin:0}
h2{font-size:clamp(34px,5vw,76px);line-height:.98}
h3{font-size:clamp(22px,1.8vw,28px);letter-spacing:-.02em}
.lead{font-size:clamp(18px,1.4vw,22px);line-height:1.5}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 20px}
/* two-tone headings: the second half quiet */
.quiet{color:var(--muted)}
.dark .quiet{color:var(--muted-dark)}
.dark{background:var(--dark);color:var(--on-dark)}
.dark .muted{color:var(--muted-dark)}
.btn{padding:0 30px}
.btn--ghost{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}
@media (hover:hover){.btn--ghost:hover{background:var(--on-dark);color:var(--ink)}}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ============ Image style (Obie, Oct 2026) ============
   I1 house grade on every photo: less saturation, a touch of contrast, a faint warm wash. Do the same grade in
   Canva or Photopea on the real files and these filters can come off. Portraits stay black and white (I4). */
.ph > img,.hero-media{filter:saturate(.72) contrast(1.05) brightness(1.02)}
.ph:has(> img)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--accent);mix-blend-mode:soft-light;opacity:.14}
/* I2 cut corner: the angle from the top of the "b" (29 degrees), on the lead image of a section only */
.cut{--cut:clamp(56px,8vw,120px);border-radius:0;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% calc(var(--cut) * .554),100% 100%,0 100%)}
/* I3 orange duotone: a photo inside a dark section, once a page at most */
.duo{background:var(--accent)}
.duo > img,.duo > picture > img{filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply}

/* M2 background graphic (ghost print): two see-through layers of the "ob" outline, the back one 45 degrees up and
   right, the front lines heavier than the back. Dark sections only. */
.motif{position:relative;isolation:isolate;overflow:hidden}
.motif::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-12%;bottom:-12%;right:-6%;width:min(62%,880px);
  background:url(/img/motif-ob.svg) right center / contain no-repeat;
}
/* phones: large and anchored bottom right, so it shows below a form and rises above it. The bottom is never cut;
   only the right side runs off the screen. The blog hero fits it top to bottom (the photo may overlap its foot). */
@media (max-width:900px){.motif::before{inset:auto -40% 16px auto;width:125%;height:auto;aspect-ratio:513/631;background-position:right bottom;opacity:.75}
  .art-head.motif::before{top:20px;bottom:20px;width:auto;right:-10%}}

/* Header sits over the dark hero */
/* The header follows the page down (fixed over the home hero, sticky on inner pages) and turns solid once scrolled.
   No transform or backdrop-filter on it: either would trap the fixed phone menu inside the header. */
.top{position:fixed;inset:0 0 auto;z-index:20;color:var(--on-dark);transition:background .3s,box-shadow .3s,transform .35s var(--ease),top .35s var(--ease)}
/* slides up out of the way while scrolling, drops back when the scrolling stops (site.js). It moves by "top", never a
   transform: a transform makes the header the box the fixed phone menu sits in, the closed menu (parked off the right
   edge) then widens the page, and phones zoom out and bounce back. */
.top.is-hidden{top:-110px}
.top.is-stuck{background:rgb(14 15 17 / .96);box-shadow:0 1px 0 var(--line-dark)}
/* only the fixed header shrinks: the sticky one (.top--solid) is in the page flow, so a height change pulls the page back */
.top.is-stuck:not(.top--solid) .shell{min-height:72px}
section[id],#contact-form{scroll-margin-top:72px}
/* phones: the form sits under the contact text; the contact buttons point at #contact-form so they land on the form, with room for the header */
@media (max-width:900px){#contact-form{scroll-margin-top:88px}}
.top .shell{display:flex;align-items:center;gap:40px;min-height:88px;position:relative}
.logo{display:inline-flex;align-items:center;gap:.35em;font:600 24px/1 var(--font-head);letter-spacing:-.035em;text-decoration:none;padding-block:12px;white-space:nowrap}
.logo span{color:var(--accent)}
/* Obie lockup (route A, Oct 2026): the "ob" mark in the accent, "obie" in the site font, "digital" quieter and a little closer */
.logo .mark,.wordmark .mark{height:1.35em;width:auto;flex:none;fill:var(--accent)}
.logo small,.wordmark small{font-size:1em;line-height:inherit;font-weight:500;letter-spacing:-.01em;opacity:.55;margin-left:-.12em}
.nav{display:flex;gap:30px;margin-left:auto;font-weight:500}
.nav a{text-decoration:none}
@media (hover:hover){.nav a:hover{color:var(--accent)}}
.top .btn{min-height:44px;padding:0 22px;font-size:15px}
@media (max-width:1180px){.top .btn{display:none}.nav-toggle{margin-left:auto;color:var(--on-dark)}.nav{background:var(--dark);color:var(--on-dark)}.nav a{border-top-color:var(--line-dark)}}
/* Phone menu: a black panel 90% wide that slides in from the right and pushes the page left (the Adcelerate move), so a
   strip of the page and a menu icon stay visible on the left; tapping the strip closes it. Laid out like Rankify:
   big rows split by thin lines with a chevron, two buttons pinned to the bottom, the ghost print bottom right.
   The logo and the toggle (which turns into a ringed X) stay on top. core.js opens it; site.js locks the page,
   closes it on a link tap or Esc. */
.nav-cta,.nav-back,.nav-close{display:none}
@media (max-width:1180px){
  .top .logo,.nav-toggle{position:relative;z-index:2}
  /* the panel starts 2px left of the page edge it slides with, so no light line shows between them */
  .top .nav{position:fixed;inset:0 0 0 calc(10vw - 2px);z-index:1;display:flex;flex-direction:column;gap:0;max-height:none;overflow:hidden auto;isolation:isolate;
    padding:clamp(76px,13svh,104px) var(--gutter) clamp(16px,3svh,28px);background:var(--dark);transform:translateX(100%);visibility:hidden;
    transition:transform .5s var(--ease),visibility 0s .5s}
  .top .nav.is-open{transform:none;visibility:visible;transition:transform .5s var(--ease);border:0}
  .top .nav::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-30%;bottom:20px;width:95%;aspect-ratio:513/631;
    background:url(/img/motif-ob.svg) right bottom / contain no-repeat;opacity:.75}
  /* sizes follow the screen height (svh) so the links and both buttons fit without scrolling, even on a short phone */
  .top .nav > a{position:relative;display:flex;align-items:center;padding:clamp(11px,2.4svh,22px) 32px clamp(11px,2.4svh,22px) 0;border-top:0;border-bottom:1px solid var(--line-dark);
    font-size:clamp(18px,2.7svh,22px);font-weight:600;letter-spacing:-.02em}
  .top .nav > a:first-of-type{border-top:1px solid var(--line-dark)}
  .top .nav > a::after{content:"";position:absolute;right:6px;width:9px;height:9px;border:solid var(--muted-dark);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
  .nav-cta{display:grid;gap:clamp(8px,1.5svh,12px);margin-top:auto;padding-top:clamp(16px,4svh,40px)}
  .nav-cta .btn{display:flex;width:100%;justify-content:center}
  /* the nav link rule (top border line) also hits these buttons: give them back their own border */
  .top .nav .nav-cta .btn{border:2px solid var(--accent);padding:0 24px}
  .top .nav .nav-cta .btn--ghost{border-color:var(--on-dark)}
  #main,.foot,.top .logo{transition:transform .5s var(--ease)}
  .menu-open #main,.menu-open .foot,.menu-open .top .logo{transform:translateX(-90vw)}
  /* the header bar stays black while the menu is open, so the menu icon in the strip reads */
  .menu-open .top{background:var(--dark);transform:none}
  .nav-back{display:block;position:fixed;inset:0 auto 0 0;z-index:21;width:10vw;border:0;padding:0;background:none;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
  .menu-open .nav-back{opacity:1;visibility:visible;transition:opacity .5s}
  .nav-back span{position:absolute;left:50%;width:20px;margin-left:-10px;height:2px;background:var(--on-dark)}
  .nav-back span:nth-child(1){top:35px}.nav-back span:nth-child(2){top:42px}.nav-back span:nth-child(3){top:49px}
  .nav-toggle{width:48px;height:48px;padding:0;display:grid;place-content:center;border:1px solid transparent;border-radius:50%;transition:border-color .3s}
  .nav-toggle span{margin:2.5px 0;transition:transform .35s var(--ease),opacity .2s}
  /* the panel has its own ringed X top right (added by site.js); the header's menu button hides behind it */
  .menu-open .nav-toggle{visibility:hidden}
  .nav-close{display:grid;place-items:center;position:absolute;top:20px;right:var(--gutter);width:48px;height:48px;padding:0;border:1px solid var(--line-dark);border-radius:50%;background:none;color:var(--on-dark);cursor:pointer}
  .nav-close span{position:absolute;width:20px;height:2px;background:currentColor;transform:rotate(45deg)}
  .nav-close span + span{transform:rotate(-45deg)}
  @media (hover:hover){.nav-close:hover{border-color:var(--accent);color:var(--accent)}}
  .menu-open,.menu-open body{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.top,.top .nav,.nav-toggle span,#main,.foot,.top .logo,.nav-back{transition:none}}
.menu-instant .top,.menu-instant .top .nav,.menu-instant #main,.menu-instant .foot,.menu-instant .top .logo,.menu-instant .nav-back{transition:none}

/* Hero: the photo (or a muted video loop) fills the whole hero; a dark scrim on the left and bottom keeps the copy
   and the tools strip readable, so there is no hard edge between the photo and the page colour */
/* The photo sits right of the copy, starting 45% of the way across the content column, and runs off the right edge.
   --hero-bg matches the photo's own black so the whole hero reads as one background, with no edge where the photo ends.
   Change it to the darkest tone of the client's photo or video. */
.hero{--hero-bg:#050506;--pr:max(var(--gutter),(100% - var(--shell)) / 2);--pl:calc(max(var(--gutter),(100% - var(--shell)) / 2) + .45 * min(100% - 2 * var(--gutter),var(--shell)));
  background:var(--hero-bg);position:relative;min-height:100svh;display:flex;flex-direction:column;padding:140px 0 160px;overflow:hidden}
/* the photo sits inside the same side margins as the text: from 45% of the content column to its right edge */
.hero-media{position:absolute;top:0;bottom:0;left:var(--pl);width:calc(100% - var(--pl) - var(--pr));height:100%;object-fit:cover;object-position:50% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--hero-bg) var(--pl),rgb(5 5 6 / 0) calc(var(--pl) + 10%)),linear-gradient(270deg,var(--hero-bg) var(--pr),rgb(5 5 6 / 0) calc(var(--pr) + 8%))}
/* Home: three columns of client site mockups and Google screens (ad, Maps, Business Profile)
   sliding up and down on a slight angle, partly behind the copy (the showcase's marquee loop, turned vertical).
   Photos keep a light orange wash; ::before is the dark shade (plus a flat 10% for the whole wall, Stephen 25 Oct), ::after darkens the outer edges (a fade, not a blur: a backdrop blur re-blurred the moving wall every frame). */
.hero-wall{position:absolute;top:-25%;bottom:-25%;left:calc(var(--pl) - 24%);right:-14%;transform:rotate(8deg);display:grid;grid-template-columns:repeat(3,1fr);gap:16px;overflow:hidden;pointer-events:none}
.hero-wall .track{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0}
/* runs from CSS, not site.js (the copies are in the HTML), so it is already moving on first paint: starting it from JS made
   the page cross-fade in with a frozen half wall, then jump */
@media (prefers-reduced-motion:no-preference){.hero-wall .track{animation:slide-up var(--speed) linear infinite}}
.hero-wall .row:nth-child(1){--speed:80s}
.hero-wall .row:nth-child(2){--speed:95s}
.hero-wall .row:nth-child(2) .track{animation-name:slide-down;margin-top:-40%}
.hero-wall .row:nth-child(3){--speed:88s}
.hero-wall .tile{width:100%}
.hero-wall .tile::after{content:"";position:absolute;inset:0;background:var(--accent);mix-blend-mode:multiply;opacity:.3}
@keyframes slide-up{to{transform:translateY(-50%)}}
@keyframes slide-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.hero:has(.hero-wall)::before{display:block;background:linear-gradient(rgb(5 5 6 / .1),rgb(5 5 6 / .1)),linear-gradient(90deg,var(--hero-bg) var(--pr),rgb(5 5 6 / .82) calc(var(--pl) - 12%),rgb(5 5 6 / .4) calc(var(--pl) + 10%),rgb(5 5 6 / .32)),linear-gradient(0deg,var(--dark),rgb(5 5 6 / 0) 30%)}
.hero:has(.hero-wall)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--hero-bg);opacity:.85;
  -webkit-mask:radial-gradient(ellipse 48% 62% at 70% 50%,transparent 60%,#000 100%);mask:radial-gradient(ellipse 48% 62% at 70% 50%,transparent 60%,#000 100%)}
/* portrait scenes (the iMac): crop to the screen */
.hero-wall .tile--tall > img{object-position:50% 42%}
@media (max-width:900px){
  .hero:has(.hero-wall){min-height:100svh;justify-content:flex-end;padding-bottom:48px}
  .hero:has(.hero-wall) > .shell{flex:0 0 auto}
  .hero-wall{left:-18%;right:-18%;gap:10px}
  .hero-wall .track{gap:10px}
  .hero-wall .tile{border-radius:10px}
  .hero:has(.hero-wall)::before{background:linear-gradient(rgb(5 5 6 / .1),rgb(5 5 6 / .1)),linear-gradient(180deg,rgb(5 5 6 / .55) 0,rgb(5 5 6 / .35) 18%,rgb(5 5 6 / .78) 36%,rgb(5 5 6 / .94) 58%,var(--hero-bg) 100%)}
  .hero:has(.hero-wall)::after{-webkit-mask:radial-gradient(ellipse 70% 32% at 50% 24%,transparent 55%,#000 100%);mask:radial-gradient(ellipse 70% 32% at 50% 24%,transparent 55%,#000 100%)}
}
.hero > .shell{position:relative;z-index:2;flex:1;display:flex;align-items:center;width:min(100% - 2 * var(--gutter),var(--shell))}
.hero-copy{max-width:calc(45% - 56px)}
.hero h1 .quiet{display:block}
.hero .lead{margin:32px 0 40px;color:#D5D7DC}
.btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){
  .hero{min-height:0;padding:120px 0 72px}
  .hero::before{display:none}
  .hero-copy{max-width:none}
  .hero-media{position:relative;inset:auto;order:2;width:calc(100% - 2 * var(--gutter));margin:48px var(--gutter) 0;height:auto;aspect-ratio:4/3;border-radius:var(--radius)}
}

/* Tools strip: logos drawn in currentColor (white on dark grounds, ink on light), so it sits on any background.
   The JS below clones the list once and loops it. */
.tools{position:relative;overflow:hidden;border-block:1px solid var(--tools-line,var(--line));color:var(--tools-ink,#3A3C41);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.dark .tools{--tools-line:rgb(246 244 240 / .14);--tools-ink:var(--on-dark)}
.tools .track{display:flex;width:max-content;list-style:none;margin:0;padding:0}
.tools li{display:flex;align-items:center;gap:12px;height:96px;padding:0 44px;border-right:1px solid var(--tools-line,var(--line));
  font-weight:600;font-size:17px;white-space:nowrap}
.tools img{width:26px;height:26px;filter:brightness(0)}
.dark .tools img{filter:brightness(0) invert(1)}
.tools-wrap{padding-block:56px 8px}
.tools-wrap p{font-size:14px;color:var(--muted);margin-bottom:20px}
@media (prefers-reduced-motion:no-preference){.track.is-looping{animation:slide var(--speed,45s) linear infinite}.tools.marquee:hover .track{animation-play-state:paused}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes slide-back{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.panel{position:relative;z-index:4;margin-top:-88px}
.panel .card{display:grid;grid-template-columns:repeat(3,1fr);border:0;box-shadow:var(--shadow)}
.panel .card div{padding:28px 32px;border-left:1px solid var(--line)}
.panel .card div:first-child{border-left:0}
.panel b{display:block;font:600 20px/1.2 var(--font-head);letter-spacing:-.02em;margin-bottom:6px}
.panel p{margin:0;color:var(--muted);font-size:16px}
@media (max-width:900px){.panel{margin-top:-40px}.panel .card{grid-template-columns:1fr}.panel .card div{border-left:0;border-top:1px solid var(--line)}.panel .card div:first-child{border-top:0}}

/* Services: big numbered rows with a "from" price. On hover the name slides in, the copy darkens,
   and the arrow button fills with the accent while the arrow nudges forward. */
.head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.head p{margin:0;max-width:34em}
@media (max-width:900px){.head{grid-template-columns:1fr;gap:20px;margin-bottom:36px}}
#services{overflow-x:clip}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.rows a{position:relative;isolation:isolate;display:grid;grid-template-columns:72px 1fr 1.6fr 56px;gap:24px;align-items:center;padding:34px 0;border-bottom:1px solid var(--ink);text-decoration:none}
.rows .n{font-size:14px;color:var(--muted);transition:color .3s}
.rows h3{font-size:clamp(30px,3.6vw,56px);margin:0;transition:transform .45s var(--ease)}
.rows p{margin:0;color:var(--muted);transition:color .3s}
.rows .go{width:52px;height:52px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s}
.rows .go .ico{stroke-width:1.5;transition:transform .45s var(--ease)}
@media (hover:hover){
  .rows a:hover h3,.rows a:focus-visible h3{transform:translateX(14px)}
  .rows a:hover p,.rows a:hover .n{color:var(--ink)}
  .rows a:hover .go,.rows a:focus-visible .go{background:var(--accent)}
  .rows a:hover .go .ico,.rows a:focus-visible .go .ico{transform:translateX(4px)}
}
@media (max-width:900px){.rows a{grid-template-columns:1fr auto;gap:8px 16px;padding:26px 0}.rows .n{grid-column:1 / -1}.rows p{grid-column:1 / -1}.rows .go{grid-row:2;grid-column:2;width:44px;height:44px}}

/* Showcase: a second, visual proof of work. Two rows of four project tiles drifting slowly in opposite directions,
   each brand's colours kept together (the HIVER move). Decorative, so hidden from screen readers. */
#more-work{overflow-x:clip;padding-bottom:clamp(72px,10vw,140px)}
#more-work .head{margin-bottom:clamp(40px,6vw,72px)}
.showcase{position:relative;display:grid;gap:22px;transform:rotate(-3deg) scale(1.05);overflow:hidden}
.showcase .track{display:flex;gap:22px;width:max-content;list-style:none;margin:0;padding:0}
.showcase .row:nth-child(1){--speed:110s}
.showcase .row:nth-child(2){--speed:125s}
.showcase .row:nth-child(2) .track{animation-name:slide-back}
/* tiles sized so the heading and both rows fit on one laptop screen */
.tile{position:relative;flex:0 0 auto;width:clamp(240px,24vw,380px);aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--dark)}
.tile > img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.05) brightness(1.02)}
@media (max-width:900px){.showcase{transform:rotate(-3deg) scale(1.15)}}

/* Case studies: image-led cards, solid tags over the photo */
.work{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.case{grid-column:span 6;text-decoration:none}
.case--wide{grid-column:1 / -1}
.case .ph{--ar:4/3;border-radius:var(--radius)}
.case--wide .ph{--ar:21/9}
.case .tags{position:absolute;left:16px;bottom:16px;z-index:1;display:flex;flex-wrap:wrap;gap:6px}
.case .tags span{background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px}
.case .meta{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-top:16px}
.case h3{margin:0}
.case .meta span{color:var(--muted);font-size:15px}
.case .ph > img{transition:transform .8s var(--ease)}
@media (hover:hover){.case:hover .ph > img{transform:scale(1.04)}}
/* Hover: a dark tint and a one-line project summary over the photo (touch screens keep the plain card) */
.case .sum{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(24px,6%,64px);background:rgb(5 5 6 / .88);color:#fff;opacity:0;transition:opacity .4s var(--ease)}
.case .sum b{font:600 clamp(22px,2.2vw,34px)/1.1 var(--font-head);letter-spacing:-.025em;max-width:22ch}
.case .sum p{margin:0;max-width:52ch;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:#D5D7DC}
.case--wide .sum{padding-right:38%}
@media (hover:hover){.case:hover .sum,.case:focus-visible .sum{opacity:1}}
@media (hover:none){.case .sum{display:none}}
.case .brand{position:absolute;top:16px;right:16px;z-index:3;display:grid;place-items:center;padding:10px 14px;background:#fff;border-radius:12px;opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.case .brand img{height:54px;width:auto;max-width:150px;object-fit:contain}
@media (hover:hover){.case:hover .brand,.case:focus-visible .brand{opacity:1;transform:none}}
@media (hover:none){.case .brand{display:none}}
@media (max-width:900px){.case{grid-column:1 / -1}.case--wide .ph{--ar:4/3}}

/* Me vs a typical agency: the mid-page pitch. Big figures that count up as they scroll in, the comparison table,
   and a secondary (outline) call to action so the accent isn't overused */
.vs-wrap{padding-block:clamp(80px,11vw,160px)}
.stats{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.stats li{border-top:1px solid var(--ink);padding-top:22px}
.stats b{display:block;font:600 clamp(52px,5.6vw,88px)/.9 var(--font-head);letter-spacing:-.05em;margin-bottom:14px;font-variant-numeric:tabular-nums}
.stats span{display:block;font-weight:600;font-size:18px;margin-bottom:4px}
.stats small{display:block;color:var(--muted);font-size:15px;line-height:1.5}
@media (max-width:560px){.stats{gap:20px}}
.vs .btns{margin-top:40px;align-items:center;gap:20px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;padding-block:12px}
.link-arrow .ico{width:20px;height:20px;stroke-width:1.5;transition:transform .35s var(--ease)}
@media (hover:hover){.link-arrow:hover .ico{transform:translateX(4px)}}
.vs{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
/* open table: ink rules like the figures beside it, no outline box; the Fieldwork column lifted onto white */
.vs .tbl{border:0;border-radius:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:none}
.vs .tbl th{background:none;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vs .tbl th,.vs .tbl td{border-bottom:1px solid rgb(14 15 17 / .28)}
.vs .tbl tbody tr:last-child td{border-bottom:0}
.vs .tbl th,.vs .tbl td{padding:24px 24px;font-size:17px}
.vs .tbl td:first-child{font-weight:600}
.vs .tbl td:last-child{color:var(--ink)}
.vs .tbl td:nth-child(2){color:var(--muted)}
.vs .tbl th:last-child,.vs .tbl td:last-child{background:var(--surface)}
.vs .tbl th:last-child{color:var(--ink)}
.vs .tbl td:last-child{font-weight:600}
@media (max-width:900px){.vs{grid-template-columns:1fr;gap:28px}.vs .tbl th,.vs .tbl td{padding:12px 10px;font-size:15px}}

/* One big quote, then a short strip of reviews */
.quote blockquote{margin:0;font:600 clamp(32px,4.8vw,72px)/1.04 var(--font-head);letter-spacing:-.035em;max-width:18em}
.quote blockquote span{color:var(--muted-dark)}
.quote .by{display:flex;gap:14px;align-items:center;margin-top:36px;color:var(--muted-dark)}
.quote .by b{color:var(--on-dark);font-weight:600}
.stars{color:var(--accent);letter-spacing:2px}
.revs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:72px}
.rev{background:var(--dark-2);border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px}
.rev p{margin:12px 0 18px;color:#D5D7DC}
.rev a{display:inline-block;padding-block:10px;font-size:15px;color:var(--muted-dark)}
@media (max-width:900px){.revs{grid-template-columns:1fr}}

/* About: black and white portrait beside the story */
.about{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.about .ph{--ar:4/5}
.about img{filter:grayscale(1) contrast(1.05)}
.about .ph::before{display:none}
.about .ph{background:#fff}
.about .ph > img{object-fit:contain;object-position:50% 100%}
.ticks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.ticks li{padding-left:30px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:14px;height:8px;border:solid var(--accent-text);border-width:0 0 2px 2px;transform:rotate(-45deg)}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:32px}.about .ph{--ar:1/1;max-width:420px}}

/* FAQ + contact */
.ask{display:grid;grid-template-columns:5fr 7fr;gap:64px}
@media (max-width:900px){.ask{grid-template-columns:1fr;gap:28px}}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact .card{padding:clamp(24px,3vw,40px);color:var(--ink)}
.next{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:22px}
.next li{display:grid;grid-template-columns:28px 1fr;gap:16px;align-items:start}
.next .ic{color:var(--on-dark);padding-top:2px}
.next .ic .ico{width:26px;height:26px;stroke-width:1.5}
.next b{display:block;font-weight:600;font-size:18px;margin-bottom:2px}
.next p{margin:0;color:var(--muted-dark);font-size:16px}
.contact .direct{margin-top:36px;padding-top:28px;border-top:1px solid var(--line-dark);display:grid;gap:6px}
.contact .direct a{font:600 clamp(22px,2vw,30px)/1.2 var(--font-head);letter-spacing:-.02em;text-decoration:none}
.hp{position:absolute;left:-9999px}
/* Form: a personal header, tappable service chips, and a send button that names who reads it */
.form-head{display:flex;gap:14px;align-items:center;padding-bottom:18px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.form-head b{display:block;font:600 21px/1.2 var(--font-head);letter-spacing:-.02em}
.form-head span{color:var(--muted);font-size:15px}
.chips{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chips legend{grid-column:1 / -1;font-weight:600;font-size:14px;margin-bottom:10px;padding:0}
.chips legend span{font-weight:400;color:var(--muted)}
.chips[data-required] legend span::before{content:"* ";font-weight:600;color:var(--accent-text)}
.chips label{position:relative;display:flex;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips label span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:6px 8px;text-align:center;line-height:1.2;white-space:nowrap;border:1.5px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;transition:background .2s,border-color .2s,color .2s}
@media (hover:hover){.chips label:hover span{border-color:var(--ink)}}
.chips input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chips input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){.chips{grid-template-columns:repeat(2,1fr)}}
.btn--send{justify-self:start;gap:10px}
.btn--send .ico{width:18px;height:18px;transition:transform .3s var(--ease)}
@media (hover:hover){.btn--send:hover .ico{transform:translateX(4px)}}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:32px}.contact .direct{border-top:0;padding-top:0}}

/* Footer: a second offer for people not ready to talk, four link columns, the logo, then the fine print.
   Grey (--dark-2) so it reads as its own block under a black contact section. */
.foot{background:var(--dark-2);color:var(--on-dark);border-top:1px solid var(--line-dark);overflow:hidden}
.foot a{text-decoration:none}
@media (hover:hover){.foot a:hover{color:var(--accent)}}
.foot-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;padding-block:clamp(56px,8vw,104px) 56px;border-bottom:1px solid var(--line-dark)}
.foot-cta h2{margin:0}
.foot-cta p{color:var(--muted-dark);margin:0 0 24px}
.foot-cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-block:56px}
.foot-cols h3{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:12px}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li a,.foot-cols li span{display:inline-block;padding-block:7px;font-size:17px}
.foot-cols .about-f p{color:var(--muted-dark);max-width:24em;margin:0 0 18px}
.foot .social{margin-left:-10px}
.wordmark{display:flex;align-items:center;gap:.35em;font:600 clamp(40px,5.5vw,80px)/1 var(--font-head);letter-spacing:-.035em;margin:0 0 .5em;white-space:nowrap;user-select:none}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:24px 32px;border-top:1px solid var(--line-dark);font-size:15px;color:var(--muted-dark)}
.foot-base a{display:inline-block;padding-block:10px}
@media (max-width:900px){.foot-cta{grid-template-columns:1fr;gap:28px}.foot-cols{grid-template-columns:1fr 1fr;gap:32px}.foot-cols .about-f{grid-column:1 / -1}}
@media (prefers-reduced-motion:reduce){.case img,.rows h3,.rows .go,.rows .go .ico{transition:none}.showcase{transform:none}}

/* ============ Inner pages: service and article ============ */
/* Header on pages without a photo hero: solid dark bar */
.top--solid{position:sticky;top:0;background:var(--dark)}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted-dark);margin:0 0 28px;padding:0;list-style:none}
.crumbs a{text-decoration:none;color:inherit;padding-block:10px}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}

/* Service hero: dark, type-led, a screenshot overlapping into the next section */
.page-hero{padding:72px 0 clamp(140px,16vw,220px)}
/* Service hero with a picture (HIVER + Rankify): a dimmed dark screen photo fills the hero, copy on the left,
   a results card on the right. Use a photo or muted video of the service's own screen: an Ads dashboard,
   Search Console, a phone showing the client's site. */
.page-hero--media{position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,920px);display:flex;align-items:center;padding:56px 0 96px}
.page-hero--media > picture{display:contents}
.page-hero--media > img,.page-hero--media > picture > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.page-hero--media::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgb(14 15 17 / .97) 0,rgb(14 15 17 / .9) 45%,rgb(14 15 17 / .62) 100%),linear-gradient(0deg,var(--dark) 0,rgb(14 15 17 / 0) 40%)}
.page-hero--media .shell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:center}
.page-hero--media h1{font-size:clamp(44px,5.4vw,84px)}
/* phones: the example card (rankings, Maps phone, ad, site...) is hidden, so the hero is just the copy over the
   orange-tinted photo with a dark shade (Stephen, 25 Oct). */
@media (max-width:1000px){.page-hero--media{min-height:0}.page-hero--media .shell{grid-template-columns:1fr}
  .page-hero--media .shell > div + div{display:none}
  /* first button above the fold: no breadcrumbs (the BreadcrumbList schema stays), buttons before the ticks */
  .page-hero--media{padding:32px 0 56px}
  .page-hero--media .crumbs{display:none}
  .page-hero--media .shell > div:first-child{display:flex;flex-direction:column}
  .page-hero--media .lead{margin:20px 0 24px}
  .page-hero--media .btns{order:1}
  .page-hero.page-hero--media .ticks{order:2;margin:40px 0 0}
  .page-hero--media::before{background:radial-gradient(ellipse 90% 70% at 50% 40%,rgb(14 15 17 / 0) 40%,rgb(14 15 17 / .7) 100%),linear-gradient(180deg,rgb(14 15 17 / .72) 0,rgb(14 15 17 / .8) 60%,var(--dark) 100%)}}
/* Results card: glassy dark panel. DEMO numbers; use a real client's (with permission) or drop the card. */
.result-card{background:rgb(23 24 27 / .82);border:1px solid rgb(246 244 240 / .12);border-radius:var(--radius);padding:clamp(22px,2.4vw,32px);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.result-card .rc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.result-card .rc-head b{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.result-card .rc-head span{font-size:13px;color:var(--muted-dark);border:1px solid var(--line-dark);border-radius:999px;padding:5px 12px}
.result-card ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.result-card li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:13px 16px;border-radius:10px;background:rgb(246 244 240 / .05);font-size:16px}
.result-card li s{color:var(--muted-dark);text-decoration:line-through;font-size:14px}
.result-card li b{min-width:40px;text-align:center;padding:4px 8px;border-radius:8px;background:var(--on-dark);color:var(--ink);font-size:14px}
.result-card .rc-chart{display:flex;align-items:flex-end;gap:6px;height:96px;padding:16px;border-radius:10px;background:rgb(246 244 240 / .05)}
.result-card .rc-chart i{flex:1;border-radius:4px 4px 0 0;background:rgb(246 244 240 / .22)}
.result-card .rc-chart i:nth-last-child(-n+3){background:var(--accent)}
.result-card .rc-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;color:var(--muted-dark)}
.result-card .rc-foot b{color:var(--on-dark)}
.page-hero h1{font-size:clamp(44px,6vw,92px);max-width:13em}
.page-hero .lead{max-width:34em;margin:28px 0 32px;color:#D5D7DC}
.page-hero .ticks{margin:0 0 36px;color:#D5D7DC}
.page-hero .ticks li::before{border-color:var(--accent)}
/* Photo heroes on desktop: heading, buttons and the example card all fit on one laptop screen (Stephen, 25 Oct):
   the hero fills the screen below the header, a smaller heading (3 lines at most), tighter spacing, the card at 82%. */
@media (min-width:1001px){
  .page-hero--media{min-height:min(calc(100svh - 88px),860px);padding:32px 0 48px}
  .page-hero.page-hero--media h1{font-size:clamp(44px,4.6vw,72px)}
  .page-hero--media .crumbs{margin-bottom:18px}
  .page-hero--media .lead{margin:20px 0 24px}
  .page-hero--media .ticks{margin-bottom:28px}
  .page-hero--media .shell > div + div{zoom:.82}
}
@media (min-width:1001px) and (max-height:720px){
  .page-hero--media .shell > div + div{zoom:.72}
}
.page-shot{margin-top:calc(-1 * clamp(110px,13vw,180px));position:relative;z-index:2}
.page-shot .ph{--ar:16/7;box-shadow:var(--shadow)}
.page-shot .ph img{object-position:top}
@media (max-width:720px){.page-shot .ph{--ar:4/3}}

/* Plans: two cards, the monthly one dark */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plan{padding:clamp(28px,3vw,44px);display:flex;flex-direction:column}
.plan .tag{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plan h3{font-size:clamp(28px,2.6vw,40px);margin:12px 0 6px}
.plan .amt{font:600 clamp(40px,4vw,60px)/1 var(--font-head);letter-spacing:-.04em;margin:18px 0 4px}
.plan .per{color:var(--muted);font-size:15px;margin-bottom:24px}
.plan .ticks{margin:0 0 32px}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan--dark{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.plan--dark .tag,.plan--dark .per{color:var(--muted-dark)}
.plan--dark .ticks li::before{border-color:var(--accent)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* Numbered feature rows (Know why) */
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;counter-reset:f}
.feats li{counter-increment:f;display:grid;grid-template-columns:56px 1fr;gap:16px;padding:28px 0;border-top:1px solid var(--line-dark)}
.feats li::before{content:"0" counter(f);font-size:14px;color:var(--muted-dark);padding-top:6px}
.feats b{display:block;font:600 22px/1.2 var(--font-head);letter-spacing:-.02em;margin-bottom:6px}
.feats p{margin:0;color:var(--muted-dark)}
@media (max-width:900px){.feats{grid-template-columns:1fr}}

/* Split: copy beside an image */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split .ph{--ar:5/4}
.split p{max-width:34em}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--ink);padding-top:22px}
.steps li::before{content:"0" counter(s);display:block;font-size:14px;color:var(--muted);margin-bottom:28px}
.steps h3{margin-bottom:10px}
.steps p{margin:0;color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Person strip: small round portrait, the line, a CTA */
.person{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding:clamp(28px,3vw,40px);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.person img{width:96px;height:96px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.person p{margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.45;max-width:40em}
.person small{display:block;color:var(--muted);margin-top:8px;font-size:15px}
@media (max-width:900px){.person{grid-template-columns:1fr;justify-items:start}}

/* Article */
.art-head{padding:72px 0 48px}
.art-head h1{font-size:clamp(40px,5.4vw,84px);max-width:15em;margin-bottom:28px}
.byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted-dark);font-size:15px}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.byline b{color:var(--on-dark);font-weight:600}
.art-pic{margin-top:clamp(-120px,-9vw,-72px)}
.art-pic .ph{--ar:21/9;box-shadow:var(--shadow)}
.art{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:1000px){.art{grid-template-columns:1fr}}
.prose{font-size:19px;line-height:1.7;max-width:42em}
.prose > p:first-child{font-size:clamp(21px,1.8vw,25px);line-height:1.5;color:var(--ink);font-weight:500}
.prose h2{font-size:clamp(30px,3vw,44px);margin:2.2em 0 .5em;scroll-margin-top:24px}
.prose h3{font-size:24px;margin:1.6em 0 .4em}
.prose p,.prose li{color:#3A3C41}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--accent-text)}
.prose a{text-decoration-color:currentColor;text-underline-offset:3px;text-decoration-thickness:2px}
.prose .tbl{margin:1.4em 0;font-size:16px;background:var(--surface)}
.prose .answer{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:0 0 1.2em;font-size:21px;line-height:1.55;color:var(--ink);font-weight:500}
.figure{margin:2em 0;padding:clamp(24px,3vw,40px);border-radius:var(--radius);background:var(--dark);color:var(--on-dark)}
.figure b{display:block;font:600 clamp(56px,7vw,104px)/.9 var(--font-head);letter-spacing:-.05em;margin-bottom:12px}
.figure p{margin:0;color:#D5D7DC;font-size:18px}
.side{position:sticky;top:96px;display:grid;gap:20px}
.toc{border-top:1px solid var(--ink);padding-top:18px}
.toc h2{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:9px 0;text-decoration:none;font-size:15px;line-height:1.35;border-bottom:1px solid var(--line)}
@media (hover:hover){.toc a:hover{color:var(--accent)}}
/* light grey like the FAQ band; black outline button that fills black on hover */
.side-cta{padding:28px;border-radius:var(--radius);background:var(--band);color:var(--ink)}
.side-cta .btn{background:transparent;border-color:var(--ink);color:var(--ink);white-space:nowrap}
@media (hover:hover){.side-cta .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}}
.side-cta h3{font-size:24px;margin-bottom:8px}
.side-cta p{color:var(--muted);font-size:16px;margin-bottom:20px}
@media (max-width:1000px){.side{position:static}}
.author{display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start;margin-top:3em;padding-top:28px;border-top:1px solid var(--line)}
.author img{width:72px;height:72px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.author p{margin:0;font-size:16px;color:var(--muted)}
.author b{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}
.related{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.post{display:block;text-decoration:none}
.post .ph{--ar:16/9}
.post span{display:block;margin-top:16px;font-size:14px;color:var(--muted)}
.post h3{margin-top:6px}
@media (hover:hover){.post:hover h3{color:var(--accent)}}
@media (max-width:720px){.related{grid-template-columns:1fr}}
@media (max-width:560px){.byline .dot{display:none}.byline{gap:6px 14px}}
/* A photo in the middle of an article: house grade, full prose width, short caption */
.art-fig{margin:2.2em 0}
.art-fig .ph{--ar:16/9}
.art-fig figcaption{margin-top:12px;font-size:15px;color:var(--muted)}

/* ============ Obie Digital only (not in the template) ============ */
/* Contact form: messages from form.js under each field and under the button */
.field-error{display:block;margin-top:4px;color:#B42318;font-size:14px;font-weight:500}
.chips .field-error{grid-column:1 / -1}
.field [aria-invalid="true"]{border-color:#B42318}
.form-status{margin:0;font-size:15px}
.form-status:empty{display:none}
.form-status.is-ok{color:#1E7A3C;font-weight:600}
.form-status.is-error{color:#B42318;font-weight:600}
.btn:disabled{opacity:.6;cursor:wait}
/* the FAQ answers can hold links */
.acc details p a,.ticks a,.split p a,.plan a:not(.btn){text-decoration-color:currentColor;text-underline-offset:3px;text-decoration-thickness:2px}
/* home intro under the services rows */
.svc-note{margin:28px 0 0;max-width:46em;color:var(--muted)}
.svc-note a{color:var(--ink);text-decoration-color:currentColor;text-underline-offset:3px;text-decoration-thickness:2px}
/* service pages: the hero has copy only (no demo results card) */
.page-hero--media .shell > div:first-child{max-width:46em}
/* service "what's included" cards: the plan card without a price */
.plan .per{margin:0 0 24px}
/* open comparison table across the full width (website and Google Ads pages) */
.vs--one{grid-template-columns:1fr}
@media (max-width:720px){
  .vs--one .tbl thead{display:none}
  .vs--one .tbl,.vs--one .tbl tbody,.vs--one .tbl tr,.vs--one .tbl td{display:block;width:100%}
  .vs--one .tbl tr{padding:14px 0;border-bottom:1px solid rgb(14 15 17 / .28)}
  .vs--one .tbl tbody tr:last-child{border-bottom:0}
  .vs--one .tbl td{border:0;padding:4px 0}
  .vs--one .tbl td[data-l]::before{content:attr(data-l) ": ";font-weight:500;color:var(--muted)}
  .vs--one .tbl td:last-child{background:none}
}
/* Who I work with: six kinds of business */
.aud{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aud li{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,36px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.aud .n{font-size:14px;color:var(--muted);margin-bottom:24px}
.aud h3{margin-bottom:12px}
.aud p{color:var(--muted);margin-bottom:20px}
.aud .first{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);color:var(--ink);font-weight:600}
.aud .first span{display:block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.aud .link-arrow{margin-top:8px}
@media (max-width:1000px){.aud{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.aud{grid-template-columns:1fr}}
/* Free Maps check: the sample report, one page at a time */
.rep{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.rep-tabs{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--ink)}
.rep-tabs button{width:100%;display:grid;grid-template-columns:44px 1fr 52px;gap:4px 16px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--ink);padding:24px 0;cursor:pointer;color:inherit}
.rep-tabs .n{grid-row:1 / 3;font-size:14px;color:var(--muted);align-self:start;padding-top:8px;transition:color .3s}
.rep-tabs b{font:600 clamp(24px,2.2vw,32px)/1.1 var(--font-head);letter-spacing:-.03em;transition:transform .45s var(--ease)}
.rep-tabs .d{grid-column:2;font-size:15px;line-height:1.5;color:var(--muted);transition:color .3s}
.rep-tabs .go{grid-column:3;grid-row:1 / 3;width:52px;height:52px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s}
.rep-tabs .go .ico{stroke-width:1.5;transition:transform .45s var(--ease)}
.rep-tabs button[aria-selected="true"] b{transform:translateX(14px)}
.rep-tabs button[aria-selected="true"] :is(.d,.n){color:var(--ink)}
.rep-tabs button[aria-selected="true"] .go{background:var(--accent)}
.rep-tabs button[aria-selected="true"] .go .ico{transform:translateX(4px)}
@media (max-width:560px){.rep-tabs button{grid-template-columns:32px 1fr 44px}.rep-tabs .go{width:44px;height:44px}}
.rep-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.rep-cta p{margin:0;font-size:15px;color:var(--muted)}
.rep-view{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:595/842;max-width:520px;width:100%;justify-self:center}
.rep-img{display:none;width:100%;height:100%;object-fit:contain}
.rep-img.on{display:block}
@media (max-width:900px){.rep{grid-template-columns:1fr}}
/* Blog index */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;transition:border-color .3s}
.post-card .ph{--ar:16/9;border-radius:0}
.post-card .ph > img{transition:transform .8s var(--ease)}
@media (hover:hover){.post-card:hover .ph > img{transform:scale(1.04)}}
.post-card .pc-body{flex:1;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px)}
.post-card .post-meta{font-size:14px;color:var(--muted)}
.post-card h2,.post-card h3{font-size:clamp(24px,2vw,30px);letter-spacing:-.02em;margin:10px 0 12px}
.post-card p{color:var(--muted)}
.post-card .more{margin-top:auto;font-weight:600;display:inline-flex;align-items:center;gap:8px}
@media (hover:hover){.post-card:hover{border-color:var(--ink)}.post-card:hover :is(h2,h3){color:var(--accent)}}
@media (max-width:1000px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.posts{grid-template-columns:1fr}}
.table-wrap{margin:1.4em 0;overflow-x:auto}
.table-wrap table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);font-size:16px}
.table-wrap th,.table-wrap td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap th{background:var(--band);font-size:14px}
.table-wrap tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .table-wrap thead{display:none}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap tr{border-bottom:1px solid var(--line)}
  .table-wrap td{border:0;padding:6px 14px}
  .table-wrap td:first-child{padding-top:12px;font-weight:600}
  .table-wrap td:last-child{padding-bottom:12px}
  .table-wrap td:not(:first-child)::before{content:attr(data-l) ": ";color:var(--muted)}
}
.author a{display:inline-block;margin-top:8px;font-weight:600;font-size:15px;color:var(--ink);text-decoration-color:currentColor;text-underline-offset:3px}
/* Privacy, terms: plain reading pages */
.legal code{font-size:.9em;background:var(--band);padding:1px 6px;border-radius:4px}
.page-hero--short{padding:72px 0 64px}
/* 404 */
.oops .btns{margin-top:12px}
.oops .rows{margin-top:72px}
.rev cite{display:block;font-style:normal;font-size:15px;color:var(--muted-dark)}
.contact .direct > span:last-child{font-size:15px}
/* seven nav links: the phone menu takes over below 1180px (was 900px in the template, which had five) */
.nav a{white-space:nowrap}
@media (min-width:1181px) and (max-width:1320px){.nav{gap:22px}.top .shell{gap:28px}}
/* breadcrumbs as one line of links (sync-schema.js reads the text after the last link) */
nav.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted-dark);margin:0 0 28px}
nav.crumbs a{text-decoration:none;padding-block:10px}
nav.crumbs a::after{content:"/";margin-left:8px;opacity:.5}

/* "More from the blog" heading row: the link to all guides sits at the right */
#more .head{grid-template-columns:1fr auto}
/* hero cards on the inner pages (the template's results card): an example of what the page's service shows you */
.result-card li i{font-style:normal;color:var(--muted-dark);font-size:14px;white-space:nowrap}
.result-card li b.up{background:var(--accent);color:var(--on-accent)}
.result-card .rc-bars{display:grid;gap:12px;margin:0 0 18px;padding:16px;border-radius:10px;background:rgb(246 244 240 / .05)}
.result-card .rc-bars div{display:grid;grid-template-columns:120px 1fr 36px;gap:12px;align-items:center;font-size:14px}
.result-card .rc-bars span{color:var(--muted-dark)}
.result-card .rc-bars i{display:block;height:10px;border-radius:5px;background:rgb(246 244 240 / .22)}
.result-card .rc-bars div:first-child i{background:var(--accent)}
.result-card .rc-bars b{text-align:right}
.result-card .rc-score{display:flex;align-items:baseline;gap:8px;margin:0 0 18px;padding:16px;border-radius:10px;background:rgb(246 244 240 / .05)}
.result-card .rc-score b{font:600 52px/1 var(--font-head);letter-spacing:-.04em}
.result-card .rc-score span{color:var(--muted-dark);font-size:15px}
@media (max-width:1000px){.result-card{max-width:520px}}
.foot .quiet{color:var(--muted-dark)}
/* screenshots keep their own colours (no house grade or orange wash) */
.ph.raw > img{filter:none}.ph.raw::before{display:none}
/* ============ Hero visuals: one per inner page, drawn in HTML/CSS (made-up businesses, decorative) ============ */
.hv{position:relative;width:100%;max-width:580px;justify-self:end;font-family:var(--font-body)}
@media (max-width:1000px){.hv{justify-self:start;max-width:520px;margin-top:8px}}
.hv-float{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--dark-2);border:1px solid var(--line-dark);color:var(--on-dark);box-shadow:var(--shadow);font-size:14px;line-height:1.25}
.hv-float b{font:600 26px/1 var(--font-head);letter-spacing:-.03em}
.hv-float small{display:block;color:var(--muted-dark);font-size:13px}
.hv-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgb(255 122 26 / .2);flex:none}

/* Blog: the three guides fanned out */
.hv-stack{position:relative;height:440px}
.hv-card{position:absolute;top:30px;left:50%;width:260px;margin-left:-130px;background:#fff;color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px rgb(0 0 0 / .75)}
.hv-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.hv-card div{padding:14px 16px 18px}
.hv-card small{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.hv-card b{display:block;font:600 18px/1.15 var(--font-head);letter-spacing:-.02em}
.hv-card:nth-child(1){transform:translateX(-150px) rotate(-9deg)}
.hv-card:nth-child(2){transform:translateX(150px) translateY(30px) rotate(8deg)}
.hv-card:nth-child(3){z-index:2;transform:translateY(-6px)}
@media (max-width:560px){.hv-stack{height:380px}.hv-card{width:200px;margin-left:-100px}.hv-card:nth-child(1){transform:translateX(-70px) rotate(-9deg)}.hv-card:nth-child(2){transform:translateX(70px) translateY(30px) rotate(8deg)}}
.hv-stack{max-width:520px;height:400px}.hv-card{width:230px;margin-left:-115px}.hv-card:nth-child(1){transform:translateX(-120px) rotate(-8deg)}.hv-card:nth-child(2){transform:translateX(120px) translateY(26px) rotate(7deg)}
@media (max-width:560px){.hv-stack{height:360px}.hv-card{width:190px;margin-left:-95px}.hv-card:nth-child(1){transform:translateX(-62px) rotate(-8deg)}.hv-card:nth-child(2){transform:translateX(62px) translateY(26px) rotate(7deg)}}
/* "Me vs a typical agency" and the service page tables: the blog table look (rounded outline, thin rules),
   everything on the section's grey except the Obie Digital column, which sits on white */
.vs .tbl{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--band)}
.vs .tbl th{background:var(--band);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.vs .tbl th,.vs .tbl td{border-bottom:1px solid var(--line);padding:20px 22px}
.vs .tbl tbody tr:last-child td{border-bottom:0}
.vs .tbl th:last-child,.vs .tbl td:last-child{background:var(--surface)}
@media (max-width:900px){.vs .tbl th,.vs .tbl td{padding:12px 10px}}
@media (max-width:720px){.vs--one .tbl tr{padding:14px 16px;border-bottom:1px solid var(--line)}.vs--one .tbl td{border:0;padding:4px 0}}
/* one hover and tap colour for every link and button: the brand orange (Stephen, 25 Oct) */
@media (hover:hover){a:not(.btn):not(.case):not(.post-card):not(.logo):not(.rows a):not(.to-top):hover{color:var(--accent)}}
a:not(.btn):not(.case):not(.post-card):not(.logo):not(.rows a):not(.to-top):active{color:var(--accent)}
.btn:active{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn--outline:active,.side-cta .btn:active{background:var(--ink);border-color:var(--ink);color:#fff}
/* the white outline button presses to white (as its hover), never orange (Stephen, 25 Oct) */
.btn--ghost:active{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
/* back to top, bottom right of the footer: the same circle and arrow as the services rows, pointing up, orange on hover */
.foot-base .to-top{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1.5px solid var(--on-dark);border-radius:50%;color:var(--on-dark);transition:background .3s,border-color .3s,color .3s}
.to-top .ico{stroke-width:1.5;transform:rotate(-90deg);transition:transform .45s var(--ease)}
@media (hover:hover){.foot .foot-base .to-top:hover{background:var(--accent);color:var(--ink)}.to-top:hover .ico{transform:rotate(-90deg) translateX(4px)}}
.foot .foot-base .to-top:active{background:var(--accent);color:var(--ink)}
.foot-base{align-items:center;gap:12px 24px}.foot-base > span:first-child{margin-right:auto}
/* Phone frame shared by the hero visuals (Maps check, Who I work with, the website's phone) */
.hv-ph{position:relative;border-radius:46px;padding:12px;background:#1B1C1F;box-shadow:0 50px 100px -30px rgb(0 0 0 / .9),inset 0 0 0 2px #34363C,inset 0 0 0 5px #0B0C0D}
.hv-ph::before{content:"";position:absolute;z-index:3;top:22px;left:50%;width:96px;height:26px;margin-left:-48px;border-radius:999px;background:#000}
.hv-screen{position:relative;overflow:hidden;border-radius:36px;background:#0E0F11;color:#E8EAED;height:100%}
.hv-status{display:flex;justify-content:space-between;padding:16px 26px 8px;font-size:13px;font-weight:600;color:#fff}
.hv-status i{font-style:normal;letter-spacing:2px;opacity:.85}
.hv-home{position:absolute;bottom:8px;left:50%;width:120px;height:5px;margin-left:-60px;border-radius:3px;background:rgb(255 255 255 / .6)}

/* Websites: a dark roofer's site in a browser, scrolled down to the jobs, and the same site on a phone */
.hv-site{margin-bottom:56px}
.hv-browser{background:#121316;border-radius:12px;overflow:hidden;box-shadow:0 40px 80px -30px rgb(0 0 0 / .8),0 0 0 1px #2A2C31;color:#F2F1EE}
.hv-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1E1F23}
.hv-chrome i{width:10px;height:10px;border-radius:50%;background:#3A3C42}
.hv-chrome span{margin-left:12px;flex:1;padding:4px 12px;border-radius:999px;background:#2A2C31;font-size:12px;color:#9A9DA4}
.hv-nav{display:flex;align-items:center;gap:14px;padding:12px 18px;font-size:13px;border-bottom:1px solid #24262A}
.hv-nav b{margin-right:auto;font-weight:600}
.hv-nav span{width:34px;height:6px;border-radius:3px;background:#34363C}
.hv-btn{display:inline-block;font-style:normal;font-weight:600;font-size:12px;padding:7px 12px;border-radius:999px;background:var(--accent);color:var(--ink);white-space:nowrap}
.hv-sec{padding:20px 18px 22px}
.hv-sec small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9A9DA4;margin-bottom:6px}
.hv-sec strong{display:block;font:600 22px/1.1 var(--font-head);letter-spacing:-.03em;margin-bottom:16px}
.hv-jobs{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.hv-job{position:relative;border-radius:10px;overflow:hidden;background:#24262A}
.hv-job img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.85)}
.hv-job span{position:absolute;left:10px;bottom:10px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgb(14 15 17 / .8)}
.hv-jobs .hv-job:first-child{grid-row:span 2;min-height:210px}
.hv-jobs .hv-job:nth-child(2){height:100px}
.hv-quote{display:grid;gap:8px;align-content:center;padding:12px;border-radius:10px;background:#1E1F23;font-size:12px;color:#BFC2C8}
.hv-quote b{color:#fff;font-size:14px}
.hv-site .hv-ph{position:absolute;z-index:2;right:-26px;bottom:-60px;width:168px;height:330px;padding:7px;border-radius:30px}
.hv-site .hv-ph::before{top:13px;width:52px;height:15px;margin-left:-26px}
.hv-site .hv-screen{border-radius:24px;font-size:11px}
.hv-site .hv-screen img{display:block;width:100%;height:120px;object-fit:cover;filter:brightness(.72)}
.hv-site .hv-screen b{display:block;padding:30px 12px 8px;font-weight:600}
.hv-site .hv-screen strong{display:block;padding:10px 12px 6px;font:600 15px/1.1 var(--font-head)}
.hv-site .hv-screen .hv-btn{display:block;margin:6px 12px 0;text-align:center}
.hv-site .hv-screen .hv-btn.line{background:none;border:1.5px solid #F2F1EE;color:#F2F1EE}
.hv-site .hv-float{left:-24px;top:-22px}

/* Google Ads: dark results page with the sponsored ads, then the campaign's numbers */
.hv-ads{margin-bottom:28px}
.hv-serp{padding:20px 22px 22px;background:#202124;border-radius:16px;color:#E8EAED;box-shadow:0 40px 80px -30px rgb(0 0 0 / .8),0 0 0 1px #34363A;font-family:Arial,Helvetica,sans-serif}
.hv-top{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:14px;font-weight:700}
.hv-top img{width:22px;height:22px;filter:brightness(0) invert(1)}
.hv-top span{margin-left:auto;font-weight:400;font-size:12px;color:#BDC1C6;padding:4px 10px;border:1px solid #3C4043;border-radius:999px}
.hv-search{display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:999px;background:#303134;font-size:15px;margin-bottom:20px}
.hv-search svg{width:18px;height:18px;flex:none;fill:none;stroke:#9AA0A6;stroke-width:2.4}
.hv-spon{font-size:13px;font-weight:700;margin-bottom:10px}
.hv-site-line{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.3}
.hv-site-line i{width:26px;height:26px;border-radius:50%;background:#3C2A1E;display:grid;place-items:center;font-style:normal;font-weight:700;color:var(--accent);font-size:12px;flex:none}
.hv-site-line small{display:block;color:#BDC1C6;font-size:12px}
.hv-ad .h4{margin:8px 0 4px;font:400 19px/1.3 Arial,Helvetica,sans-serif;color:#8AB4F8;letter-spacing:0}
.hv-ad p{margin:0 0 10px;font-size:13px;line-height:1.5;color:#BDC1C6}
.hv-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:#8AB4F8}
.hv-ad + .hv-ad{margin-top:18px;padding-top:16px;border-top:1px solid #3C4043;opacity:.6}
.hv-ad + .hv-ad .h4{font-size:16px}
.hv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid #3C4043}
.hv-stats div{padding:12px;border-radius:10px;background:#2A2B2E;font-size:12px;color:#BDC1C6}
.hv-stats b{display:block;margin-top:4px;font:600 22px/1 var(--font-head);color:#fff}
.hv-stats div:last-child b{color:var(--accent)}
.hv-bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:10px;padding:10px 12px;border-radius:10px;background:#2A2B2E}
.hv-bars i{flex:1;border-radius:3px 3px 0 0;background:#4A4D52}
.hv-bars i:nth-last-child(-n+3){background:var(--accent)}
.hv-ads .hv-float{right:-20px;bottom:-26px}

/* Free Maps check: Google Maps in dark mode on a phone, with a business sheet pulled up */
.hv-maps{display:grid;justify-items:center}
.hv-maps .hv-ph{width:330px;height:680px}
.hv-mapview{position:absolute;inset:0 0 auto;height:330px;background:#1D2A35}
.hv-mapview svg{width:100%;height:100%}
.hv-msearch{position:absolute;z-index:2;top:52px;left:14px;right:14px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:999px;background:#303134;font-size:13px;color:#E8EAED;box-shadow:0 4px 14px rgb(0 0 0 / .4)}
.hv-msearch svg{width:16px;height:16px;fill:none;stroke:#9AA0A6;stroke-width:2.4}
.hv-pin{position:absolute;z-index:1;width:26px;height:26px;margin:-26px 0 0 -13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#EA4335;box-shadow:0 3px 8px rgb(0 0 0 / .5)}
.hv-pin b{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(45deg);color:#fff;font-size:11px;font-weight:700}
.hv-pin.me{width:36px;height:36px;margin:-36px 0 0 -18px;background:var(--accent)}
.hv-pin.me b{color:var(--ink);font-size:13px}
.hv-sheet{position:absolute;inset:300px 0 0;padding:10px 18px 24px;border-radius:22px 22px 0 0;background:#202124;font-family:Arial,Helvetica,sans-serif}
.hv-sheet::before{content:"";display:block;width:36px;height:4px;margin:0 auto 12px;border-radius:2px;background:#5F6368}
.hv-sheet .h5{margin:0;font:400 20px/1.2 Arial,Helvetica,sans-serif;color:#E8EAED;letter-spacing:0}
.hv-sheet .meta{margin:4px 0 2px;font-size:13px;color:#BDC1C6}
.hv-sheet .meta b{color:#E8EAED;font-weight:400}.hv-sheet .meta em{font-style:normal;color:#FDD663}
.hv-sheet .open{font-size:13px;color:#81C995;margin-bottom:12px}
.hv-chips{display:flex;gap:6px;margin-bottom:12px}
.hv-chips span{padding:6px 11px;border-radius:999px;border:1px solid #5F6368;font-size:12px;color:#8AB4F8;white-space:nowrap}
.hv-chips span:first-child{background:#8AB4F8;border-color:#8AB4F8;color:#202124}
.hv-thumbs{display:grid;grid-template-columns:1.4fr 1fr;gap:6px;height:118px;margin-bottom:12px}
.hv-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:10px;filter:brightness(.8)}
.hv-thumbs div{display:grid;gap:6px}
.hv-next{padding-top:12px;border-top:1px solid #3C4043;font-size:13px;color:#BDC1C6}
.hv-next b{display:block;color:#E8EAED;font-weight:400;font-size:15px}
.hv-maps .hv-float{right:0;top:120px}

/* Who I work with: a full-size phone with new enquiries arriving */
.hv-who{display:grid;justify-items:center}
.hv-who .hv-ph{width:340px;height:700px;transform:rotate(3deg)}
.hv-who .hv-screen{background:radial-gradient(120% 70% at 80% 0,rgb(255 122 26 / .35),transparent 60%),linear-gradient(170deg,#24262B,#0E0F11 70%)}
.hv-time{text-align:center;color:#fff;font:600 74px/1 var(--font-head);letter-spacing:-.04em;margin-top:26px}
.hv-date{text-align:center;color:rgb(255 255 255 / .75);font-size:15px;margin:6px 0 30px}
.hv-note{display:grid;grid-template-columns:38px 1fr;gap:12px;margin:8px 12px 0;padding:13px 14px;border-radius:20px;background:rgb(246 244 240 / .9);color:var(--ink);font-size:13px;line-height:1.35}
.hv-note i{width:38px;height:38px;border-radius:10px;background:var(--dark);display:grid;place-items:center}
.hv-note i svg{width:22px;height:auto;fill:var(--accent)}
.hv-note b{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.hv-note b small{font-weight:400;color:var(--muted)}
.hv-note span{color:#3A3C41}
.hv-note.old{opacity:.7}
.hv-who .hv-float{left:-20px;bottom:90px}

@media (max-width:560px){
  .hv-site .hv-ph{right:-6px;width:140px;height:280px}.hv-site .hv-float{left:-6px}.hv-jobs .hv-job:first-child{min-height:170px}
  .hv-ads .hv-float{right:-6px}.hv-stats b{font-size:18px}
  .hv-maps .hv-ph,.hv-who .hv-ph{width:290px;height:600px}.hv-maps .hv-float{right:-6px}.hv-who .hv-float{left:-4px}
  .hv-time{font-size:60px}
}

/* Page to page: a short cross-fade while the next page loads (cross-document view transitions). Adds no wait to clicks.
   Chrome, Edge and Safari 18.2+; other browsers just change page. Off for reduced motion. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}