/* ==========================================================================
   Karl Chevalier: business website
   The creator site's look, toned down for businesses: the same warm paper,
   logo, typefaces and violet, soft glows instead of flat panels, one
   gradient used sparingly, and no black. Kept apart from style.css so a
   change to one half of the site never moves the other.
   ========================================================================== */

/* ---------- 0. FONTS ----------
   The full files are the creator site's (style.css names the same addresses), all
   SIL Open Font License 1.1. They're only fetched for characters the trimmed files
   below don't have. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");
  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:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin.woff2) format("woff2");
  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";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");
  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";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format("woff2");
  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:"JetBrains Mono";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2");
  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}

/* The trimmed files: only the weights and characters these pages use (_build/fonts.py),
   about 64 KB in all instead of 157 KB. Declared after the full files with the same
   weights, so for these characters they win; anything else still comes from the full
   file, which is only downloaded if a page needs it. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/bricolage-grotesque-business.woff2) format("woff2");
  unicode-range:U+20-7E, U+A0, U+A3, U+A9, U+B7, U+C9, U+D7, U+E9, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2192}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/inter-business.woff2) format("woff2");
  unicode-range:U+20-7E, U+A0, U+A3, U+A9, U+B7, U+C9, U+D7, U+E9, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2192}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(../fonts/jetbrains-mono-business.woff2) format("woff2");
  unicode-range:U+20-5A, U+A0, U+A3, U+B7, U+2013-2014, U+2019, U+2026, U+2192}

/* Stand-ins while the fonts load: the system's Arial (or Liberation Sans) resized to
   take the same space as each web font, so text doesn't jump or reflow when the real
   font swaps in. Measured from the font files (October 2026): Bricolage at weight 600
   and optical size 48, Inter at 400 and 600. */
@font-face{font-family:"Bricolage Fallback";font-weight:400 800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:97.15%;ascent-override:95.73%;descent-override:27.79%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");size-adjust:107.49%;ascent-override:90.13%;descent-override:22.44%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:600 800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:101.32%;ascent-override:95.62%;descent-override:23.81%;line-gap-override:0%}

/* ---------- 1. TOKENS ---------- */
:root{
  /* paper and ink: the creator site's */
  --paper:#FCFAF6;
  --paper-2:#FFFFFF;
  --paper-3:#F6F2EB;
  --ink:#191320;
  --ink-2:#4A4152;
  --ink-3:#716879;          /* 5:1 on --paper */
  --line:rgba(25,19,32,.09);
  --line-2:rgba(25,19,32,.15);

  /* the brand violet, and the logo's gradient */
  --violet:#5B3DF5;
  --violet-ink:#3B23C4;
  --violet-rgb:91,61,245;
  --g-violet:linear-gradient(135deg,#5B3DF5 0%,#9B4BF0 52%,#FF5C72 100%);
  --g-text:linear-gradient(115deg,#5B3DF5 0%,#8B3FE8 48%,#E8445E 100%);   /* 3.7:1 or better, for big type */
  --g-panel:linear-gradient(135deg,#4A2FE0 0%,#6A3CF0 42%,#9E48E8 76%,#D9548E 100%);
  --g-tile:linear-gradient(135deg,rgba(91,61,245,.13),rgba(255,92,114,.11));
  --g-wash:linear-gradient(140deg,#F2EEFF 0%,#FAF0F7 55%,#FFF3E9 100%);

  /* each project's own light colour, behind its screenshots */
  --t-mb:linear-gradient(150deg,#FFF5E3 0%,#FDE8CF 60%,#FADDBE 100%);
  --t-pp:linear-gradient(150deg,#F8F4E4 0%,#EEE6C9 100%);
  --t-sb:linear-gradient(150deg,#EFF5E9 0%,#DCE9CF 100%);
  --t-ml:linear-gradient(150deg,#F4EFE7 0%,#E6DCCC 100%);
  --t-kc:linear-gradient(150deg,#F2EEFF 0%,#FCEEF3 100%);
  --t-bk:linear-gradient(150deg,#FBF4DF 0%,#F3E7C4 55%,#E3E9D3 100%);

  /* form feedback only */
  --ok:#17633F; --ok-bg:#E8F4EC;
  --no:#A8231A; --no-bg:#FCEBE9;

  /* type */
  --f-display:"Bricolage Grotesque","Bricolage Fallback","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-body:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-hero:clamp(2.55rem,1.4rem + 3.4vw,3.85rem);
  --t-h1:clamp(2.4rem,1.5rem + 3.4vw,4.3rem);
  --t-h2:clamp(2.05rem,1.4rem + 2.6vw,3.5rem);
  --t-lede:clamp(1.1rem,1.03rem + .35vw,1.3rem);

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --section:clamp(80px,9.5vw,136px);
  --gutter:clamp(18px,4.6vw,48px);
  --maxw:1200px;

  /* shape and depth: warm shadows, as on the creator site (grey reads as dirt on cream) */
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:26px; --r-xl:clamp(26px,3.4vw,40px); --r-pill:999px;
  --sh-1:0 1px 2px rgba(61,40,30,.04),0 2px 10px -4px rgba(61,40,30,.07);
  --sh-2:0 1px 2px rgba(61,40,30,.04),0 16px 34px -14px rgba(61,40,30,.17);
  --sh-3:0 2px 4px rgba(61,40,30,.04),0 30px 64px -24px rgba(61,40,30,.24);
  --sh-frame:0 2px 6px rgba(61,40,30,.06),0 36px 80px -30px rgba(61,40,30,.36);
  --sh-violet:0 40px 90px -40px rgba(91,61,245,.6);

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --fast:.18s;
  --mid:.34s;

  --header-h:80px;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 20px)}
@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{
  font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;
  color:var(--ink-2);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);font-weight:600;line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
p{text-wrap:pretty}
strong,b{font-weight:600;color:var(--ink)}
::selection{background:rgba(var(--violet-rgb),.18)}

:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.on-grad :focus-visible{outline-color:#fff}
.on-grad .formcard :focus-visible{outline-color:var(--violet)}

.skip{position:absolute;left:12px;top:-100px;z-index:100;background:var(--violet);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* gradient words in a headline: big type only */
.grad{background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (forced-colors:active){.grad{background:none;color:CanvasText}}

/* gentle reveals as things scroll into view. Gated on the .js class (set in
   <head>), so without JavaScript, or with reduced motion, everything just shows */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;translate:0 16px;transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:var(--d,0s)}
  .js [data-reveal].in{opacity:1;translate:0 0}
}

/* ---------- 3. LAYOUT ---------- */
@supports (content-visibility:auto){
  main > .section:not(.cfg-sec){content-visibility:auto;contain-intrinsic-block-size:auto 900px}
}
.wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section)}
.section--tint{background:var(--paper-3)}
.section:not(.section--tint):not(.section--ink) + .section:not(.section--tint):not(.section--ink),
.phero + .section:not(.section--tint):not(.section--ink){padding-top:0}

.shead{display:grid;gap:var(--s4);margin-bottom:clamp(40px,5vw,64px);max-width:46rem}
.shead--center{margin-inline:auto;text-align:center;justify-items:center}
.shead--row{max-width:none;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s4) var(--s6)}
.shead--row > div{max-width:44rem;display:grid;gap:var(--s4)}
.shead p{font-size:1.125rem;max-width:36em}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow{position:relative}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--g-violet);box-shadow:0 0 0 4px rgba(var(--violet-rgb),.1)}
/* the pulse: a second dot over the first that grows and fades, as on the creator side.
   Only transform and opacity change, so it costs the browser next to nothing */
.eyebrow::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:rgba(var(--violet-rgb),.55);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .eyebrow::after{animation:ping 2.6s cubic-bezier(.2,.7,.3,1) infinite}
}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.4);opacity:0}}
.h2{font-size:var(--t-h2);line-height:1.02;letter-spacing:-.036em}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--ink-2)}

/* the words above a headline, made part of it so search engines read them as the
   heading ("Web design & development in Manchester"), shown like an eyebrow */
.h1__k{display:flex;width:fit-content;line-height:1.4;text-wrap:wrap}
.phero .h1__k{margin-bottom:var(--s4)}

/* soft light behind an opening: the creator site's wash, quieter */
.aura{position:absolute;inset:calc(-1 * var(--header-h)) 0 0;overflow:hidden;pointer-events:none;z-index:-1}
.aura::before{
  content:"";position:absolute;left:50%;top:-34%;width:min(1500px,190vw);aspect-ratio:1.55;translate:-50% 0;
  background:
    radial-gradient(38% 42% at 24% 34%,rgba(var(--violet-rgb),.13),transparent 70%),
    radial-gradient(42% 40% at 76% 46%,rgba(255,168,75,.15),transparent 70%),
    radial-gradient(30% 30% at 56% 78%,rgba(255,92,114,.07),transparent 70%);
}

/* ---------- 4. BUTTONS AND LINKS ---------- */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  border:1px solid transparent;white-space:nowrap;
  transition:transform var(--fast) var(--ease),box-shadow var(--mid) var(--ease),background-color var(--mid) var(--ease),color var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.btn svg{width:18px;height:18px;flex:none;transition:transform var(--mid) var(--ease)}
.btn:hover svg.btn__go{transform:translateX(3px)}
.btn--primary{background:var(--violet);color:#fff;box-shadow:0 8px 22px -10px rgba(var(--violet-rgb),.75)}
.btn--primary:hover{background:var(--violet-ink);box-shadow:0 16px 36px -14px rgba(var(--violet-rgb),.85);transform:translateY(-1px)}
/* on hover it fills with the logo's violet, dark to light (as on the creator site) */
.btn--ghost{background:rgba(255,255,255,.55);border-color:var(--line-2);color:var(--ink)}
.btn--ghost::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#4A2FE0 0%,#5B3DF5 35%,#9B4BF0 100%);opacity:0;transition:opacity var(--mid) var(--ease)}
.btn--ghost:hover{color:#fff;border-color:transparent;box-shadow:0 12px 28px -12px rgba(var(--violet-rgb),.7)}
.btn--ghost:hover::before{opacity:1}
.btn--light{background:#fff;color:var(--violet-ink);box-shadow:0 14px 34px -16px rgba(25,19,32,.5)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(25,19,32,.55)}
.btn--clear{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38);color:#fff}
.btn--clear:hover{background:rgba(255,255,255,.24)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.94rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;pointer-events:none}

.go{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);
  text-decoration:underline;text-decoration-color:rgba(var(--violet-rgb),.35);text-underline-offset:5px;text-decoration-thickness:1.5px;
  transition:text-decoration-color var(--mid) var(--ease),color var(--mid) var(--ease);
}
.go svg{width:17px;height:17px;flex:none;transition:transform var(--mid) var(--ease)}
.go:hover{color:var(--violet-ink);text-decoration-color:currentColor}
.go:hover svg{transform:translateX(3px)}
.go:hover svg.go__out{transform:translate(2px,-2px)}
.prose a,.lnk{color:var(--violet-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover,.lnk:hover{text-decoration-thickness:2px}

/* ---------- 5. WHO IT'S FOR: the strip above the header ----------
   Two links, never a toggle: the half you're on is marked, the other goes there. */
.aud{background:linear-gradient(90deg,#EFEAFF 0%,#F8EDF8 52%,#FFEEEE 100%);color:var(--ink-2);font-size:.84rem;border-bottom:1px solid rgba(var(--violet-rgb),.08)}
.aud__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:42px}
.aud__switch{display:flex;align-items:center;gap:4px;margin-left:-6px}
.aud__switch a{
  display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:var(--r-pill);
  font-weight:500;color:var(--ink-2);transition:color var(--fast),background-color var(--fast),box-shadow var(--fast);
}
.aud__switch a[aria-current]{color:var(--ink);font-weight:600;background:#fff;box-shadow:var(--sh-1)}
.aud__switch a:not([aria-current]):hover{color:var(--violet-ink);background:rgba(255,255,255,.55)}
.aud__switch svg{width:14px;height:14px;transition:transform var(--mid) var(--ease)}
.aud__switch a:hover svg{transform:translateX(2px)}
.aud__note{display:none;margin:0;color:var(--ink-2)}
@media (min-width:760px){.aud__note{display:block}}

/* ---------- 6. HEADER: the creator site's floating pill ---------- */
.hd{position:sticky;top:0;z-index:50;padding:12px var(--gutter) 0}
.hd__in{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;gap:var(--s4);height:62px;padding:0 9px 0 16px;
  border-radius:var(--r-pill);border:1px solid transparent;
  transition:background-color var(--mid) var(--ease),border-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.hd.is-stuck .hd__in,.hd.is-open .hd__in{
  background:rgba(252,250,246,.84);border-color:var(--line);box-shadow:var(--sh-2);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:1.06rem;letter-spacing:-.03em;color:var(--ink);flex:none}
.brand__mark{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--g-violet);color:#fff;font-size:.86rem;font-weight:700;letter-spacing:-.02em;
  box-shadow:0 4px 12px -4px rgba(var(--violet-rgb),.6);transition:transform var(--mid) var(--ease);
}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)}

.hd__nav{display:none;margin-left:auto}
.hd__nav > ul{display:flex;align-items:center;gap:2px}
.hd__link{
  display:inline-flex;align-items:center;gap:5px;min-height:42px;padding:0 15px;border-radius:var(--r-pill);
  font-size:.94rem;font-weight:500;white-space:nowrap;color:var(--ink-2);transition:color var(--fast),background-color var(--fast);
}
.hd__link:hover,.hd__drop.is-open > .hd__link{color:var(--ink);background:rgba(25,19,32,.05)}
.hd__link[aria-current]{color:var(--violet-ink);font-weight:600;background:rgba(var(--violet-rgb),.08)}
.hd__link svg{width:14px;height:14px;flex:none;transition:transform var(--mid) var(--ease)}
.hd__drop.is-open > .hd__link svg{transform:rotate(180deg)}
.hd__cta{display:none}

/* the Services menu: opens on hover (mouse) or with its button (touch, keyboard) */
.hd__drop{position:relative}
.hd__menu{
  position:absolute;top:calc(100% + 14px);left:50%;width:660px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--sh-3),0 30px 80px -50px rgba(var(--violet-rgb),.5);
  padding:10px;opacity:0;visibility:hidden;transform:translate(-40%,8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s;
}
.hd__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.hd__drop.is-open .hd__menu{opacity:1;visibility:visible;transform:translate(-40%,0);transition-delay:0s}
@media (hover:hover){
  .hd__drop:not(.is-shut):hover .hd__menu{opacity:1;visibility:visible;transform:translate(-40%,0);transition-delay:0s}
  .hd__drop:not(.is-shut):hover > .hd__link{color:var(--ink);background:rgba(25,19,32,.05)}
}
.hd__menu ul{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.hd__menu--web,.hd__menu--seo{width:470px}
.hd__menu--web ul,.hd__menu--seo ul{grid-template-columns:1fr}
.mi{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;transition:background-color var(--fast)}
.mi:hover,.mi[aria-current]{background:var(--paper-3)}
.mi__i{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--g-tile);color:var(--violet)}
.mi__i svg{width:20px;height:20px}
.mi__t{flex:1;min-width:0}
.mi b{display:block;font-size:.98rem;color:var(--ink);line-height:1.3}
.mi__t > span{display:block;font-size:.84rem;line-height:1.45;color:var(--ink-3);margin-top:2px}
/* website redesigns, first in the menu: a soft wash and the logo's gradient on its icon */
.mi--hl{background:var(--g-wash);box-shadow:inset 0 0 0 1px rgba(var(--violet-rgb),.12)}
.mi--hl:hover,.mi--hl[aria-current]{background:var(--g-wash);box-shadow:inset 0 0 0 1px rgba(var(--violet-rgb),.32)}
.mi--hl .mi__i{background:var(--g-violet);color:#fff}
.hd__menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3) var(--s4);margin-top:8px;padding:14px 14px 6px;border-top:1px solid var(--line);font-size:.9rem}
.hd__menu-foot p{color:var(--ink-3)}
.hd__menu-foot .lnk{color:var(--ink-2)}
.hd__menu-foot .lnk:hover{color:var(--violet-ink)}

.hd__burger{
  margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:rgba(255,255,255,.7);
  font-size:.94rem;font-weight:600;color:var(--ink);
}
.hd__burger i{position:relative;width:16px;height:10px}
.hd__burger i::before,.hd__burger i::after{content:"";position:absolute;left:0;right:0;height:1.8px;border-radius:2px;background:currentColor;transition:transform var(--mid) var(--ease),top var(--mid) var(--ease)}
.hd__burger i::before{top:0}
.hd__burger i::after{top:8px}
.hd__burger[aria-expanded="true"] i::before{top:4px;transform:rotate(45deg)}
.hd__burger[aria-expanded="true"] i::after{top:4px;transform:rotate(-45deg)}

/* the phone menu: a floating card under the pill, as on the creator site */
.mnav{
  position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + 8px);
  max-height:calc(100dvh - var(--header-h) - 24px);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-3);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  padding:18px;
}
.mnav[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.mnav{animation:menuIn .32s var(--ease)}}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav__lbl{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:2px 6px 4px}
.mnav__svc{display:grid;margin-bottom:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.mnav__svc a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;padding:0 6px;border-radius:12px;font-size:1rem;font-weight:500;color:var(--ink)}
.mnav__svc a:hover{background:var(--paper-3)}
.mnav__svc a[aria-current]{color:var(--violet-ink);font-weight:600}
.mnav__svc a.mnav__hl{margin-bottom:2px;padding:0 10px;background:var(--g-wash);color:var(--violet-ink);font-weight:600}
.mnav__main a{display:flex;align-items:center;min-height:52px;padding:0 6px;border-radius:12px;font-family:var(--f-display);font-size:1.4rem;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.mnav__main a[aria-current]{color:var(--violet-ink)}
.mnav .btn{margin-top:var(--s4)}
.mnav__more{margin:var(--s4) 6px 0;font-size:.95rem;color:var(--ink-3)}
.mnav__more a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.mnav__more a[aria-current]{color:var(--violet-ink)}
.mnav__aud{margin:var(--s3) 6px 2px;font-size:.92rem;color:var(--ink-2)}
.mnav__aud a{font-weight:600;color:var(--violet-ink);text-decoration:underline;text-underline-offset:4px}

@media (min-width:900px){
  .hd__nav{display:block}
  .hd__cta{display:inline-flex;margin-left:var(--s2)}
  .hd__burger,.mnav{display:none !important}
}
@media (max-width:899.98px){:root{--header-h:74px}}
/* six links and the button: between 900 and 1099px the links sit closer, so none wraps */
@media (min-width:900px) and (max-width:1099.98px){
  .hd__in{gap:var(--s3)}
  .hd__link{padding:0 8px}
  .hd__cta{margin-left:0}
}

/* ---------- 7. FRAMES: a browser window and a phone around real screenshots ---------- */
.frame{background:var(--paper-2);border-radius:14px;box-shadow:var(--sh-frame);overflow:hidden;outline:1px solid rgba(25,19,32,.07);outline-offset:-1px}
.frame__bar{display:flex;align-items:center;gap:10px;height:30px;padding:0 11px;background:#F7F4EF;border-bottom:1px solid var(--line)}
.frame__dots{display:flex;gap:5px;flex:none}
.frame__dots i{width:8px;height:8px;border-radius:50%;background:#DDD6CC}
.frame__url{
  flex:0 1 58%;margin:0 auto;transform:translateX(-14px);height:19px;padding:0 10px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  background:var(--paper-2);border:1px solid var(--line);
  font-size:10.5px;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;
}
.frame__url svg{width:9px;height:9px;flex:none}
.frame__url span{overflow:hidden;text-overflow:ellipsis}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
/* the bezel is a margin on the screen, not padding on the phone: percentage padding on an
   absolutely placed phone would be measured against its container */
.phone{background:#1E1A24;border-radius:15% / 7%;box-shadow:var(--sh-frame)}
.phone img{width:92%;margin:4%;aspect-ratio:360/779;object-fit:cover;object-position:top;border-radius:11.5% / 5.3%}

/* a small floating label on a picture */
.chip{
  display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3);
  font-size:.8rem;line-height:1.3;color:var(--ink-3);text-align:left;
}
.chip b{display:block;font-size:.86rem;color:var(--ink)}
.chip__i{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--g-tile);color:var(--violet)}
.chip__i svg{width:18px;height:18px}
.chip__k{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--g-violet);color:#fff;font-family:var(--f-display);font-weight:700;font-size:.95rem}
.flag{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-family:var(--f-mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}
.flag::before{content:"";width:6px;height:6px;border-radius:50%;background:#2FA36B;box-shadow:0 0 0 3px rgba(47,163,107,.16)}

/* ---------- 8. HOME: HERO ---------- */
.hero{position:relative;isolation:isolate;padding-block:clamp(28px,4.5vw,64px) clamp(36px,4vw,56px)}
.hero + .section{padding-top:clamp(36px,4.5vw,64px)}
.hero__grid{display:grid;gap:clamp(48px,6vw,72px);align-items:center}
.hero .eyebrow{margin-bottom:clamp(18px,2.4vw,26px)}
.hero__h{font-size:var(--t-hero);line-height:.97;letter-spacing:-.042em}
.hero__lede{margin-top:clamp(20px,2.4vw,28px);font-size:var(--t-lede);line-height:1.55;max-width:33em}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(26px,3vw,36px)}
.meet{display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3vw,36px);max-width:30em}
.meet__photo{
  width:54px;height:54px;flex:none;border-radius:50%;padding:2px;background:var(--g-violet);
  box-shadow:0 8px 20px -10px rgba(var(--violet-rgb),.7);
}
.meet__photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid var(--paper)}
.meet p{font-size:.95rem;line-height:1.45}
.meet b{display:block;font-size:1rem}

/* the picture: real designs in a browser and on a phone, with two labels */
.hero__art{position:relative;padding:9% 0 11%}
.hero__art > a{display:block;position:relative;z-index:1;width:89%}
.hero__art .phone{position:absolute;z-index:2;right:0;bottom:0;width:27%}
.hero__art .chip{position:absolute;z-index:3;transition:scale var(--mid) var(--ease),box-shadow var(--mid) var(--ease)}
.hero__art .chip:hover{scale:1.05;box-shadow:var(--sh-3),0 18px 40px -18px rgba(var(--violet-rgb),.45)}
.hero__art .chip--a{left:-4%;bottom:15%}
.hero__art .chip--b{right:2%;top:0}
.hero__art .chip--c{left:-6%;top:2%}
.hero__art .chip--d{left:37%;bottom:0}
.hero__art::before{
  content:"";position:absolute;inset:4% 0 6% 6%;z-index:0;border-radius:40px;
  background:radial-gradient(60% 60% at 60% 40%,rgba(255,179,92,.22),transparent 72%),radial-gradient(50% 50% at 30% 70%,rgba(var(--violet-rgb),.14),transparent 72%);
}
@media (min-width:1080px){
  .hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
}
/* stacked under the words, the picture fills the column: labels stay inside it */
@media (min-width:600px) and (max-width:1079.98px){.hero__art .chip--a,.hero__art .chip--c{left:0}}
@media (max-width:599.98px){
  .hero__art{padding:12% 0 12%}
  .hero__art .chip{font-size:.72rem;padding:7px 10px 7px 7px}
  .hero__art .chip b{font-size:.76rem}
  .hero__art .chip__i,.hero__art .chip__k{width:28px;height:28px;border-radius:9px}
  .hero__art .chip--a{left:0;bottom:18%}
  .hero__art .chip--c{left:0;top:0}
  .hero__art .chip--d{left:auto;right:27%;bottom:-1%}
}
@media (prefers-reduced-motion:no-preference){
  .hero__art .frame{animation:rise 1s var(--ease) both}
  .hero__art .phone{animation:rise 1s var(--ease) .15s both}
  /* in one after another, then a slow bob each, out of step with the others */
  .hero__art .chip{animation:pop .8s var(--ease) var(--in) backwards,bob var(--bob) ease-in-out calc(var(--in) + .8s) infinite}
  .hero__art .chip--a{--in:.5s;--bob:6.2s}
  .hero__art .chip--b{--in:.7s;--bob:5.4s}
  .hero__art .chip--c{--in:.9s;--bob:7s}
  .hero__art .chip--d{--in:1.1s;--bob:5.8s}
}
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes pop{from{opacity:0;scale:.92;translate:0 8px}to{opacity:1;scale:1;translate:0 0}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-.8deg)}}
@keyframes bob2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(7px) rotate(.8deg)}}

/* the facts under the opening */
.facts{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(40px,5vw,64px)}
.facts li{
  display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-size:.92rem;font-weight:500;color:var(--ink-2);
}
.facts svg{width:18px;height:18px;flex:none;color:var(--violet)}

/* ---------- 9. WORK ---------- */
/* the featured project: a big panel in the project's own light colour */
.case{
  position:relative;isolation:isolate;overflow:hidden;display:grid;
  border-radius:var(--r-xl);background:var(--t-mb);
}
.case__body{position:relative;z-index:2;padding:clamp(28px,4.5vw,64px) clamp(24px,4.5vw,64px) 0}
.case__media{position:relative;display:block;min-height:clamp(280px,48vw,560px)}
.case__media .frame{position:absolute;left:clamp(24px,4.5vw,64px);top:clamp(28px,4vw,48px);width:118%;transition:transform .7s var(--ease)}
.case__media .phone{position:absolute;z-index:2;transition:transform .7s var(--ease)}
.case__media .phone--1{left:clamp(14px,2vw,26px);bottom:-8%;width:clamp(96px,17%,170px)}
.case__media .phone--2{left:calc(clamp(14px,2vw,26px) + clamp(96px,17%,170px) + 14px);bottom:-18%;width:clamp(96px,17%,170px)}
@media (hover:hover){
  .case:hover .case__media .frame{transform:translateY(-6px)}
  .case:hover .case__media .phone--1{transform:translateY(-10px)}
  .case:hover .case__media .phone--2{transform:translateY(-14px)}
}
@media (min-width:1000px){
  .case{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
  .case__body{padding-bottom:clamp(28px,4.5vw,64px);align-self:center}
  .case__media{min-height:560px}
  .case__media .frame{left:4%;top:12%;width:122%}
  .case__media .phone--1{left:-2%;bottom:-6%;width:24%}
  .case__media .phone--2{left:24%;bottom:-16%;width:24%}
}
.case__label{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(25,19,32,.66)}
.case__h{margin-top:var(--s3);font-size:clamp(2rem,1.5rem + 2vw,3.2rem);line-height:1;letter-spacing:-.04em}
.case__p{margin-top:var(--s4);color:var(--ink-2);max-width:30em}
.case .tags li{background:rgba(255,255,255,.75)}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s5)}
.tags li{font-size:.8rem;font-weight:500;line-height:1;padding:8px 11px;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2)}
.links{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);margin-top:var(--s6)}

/* the other projects: cards */
.projects{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media (min-width:760px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.projects--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.project{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.project:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.project__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;isolation:isolate}
.project__media .frame{position:absolute;left:9%;top:19%;width:104%;transition:transform .7s var(--ease)}
.project__media .phone{position:absolute;z-index:2;right:7%;bottom:-16%;width:25%;transition:transform .7s var(--ease)}
.project:hover .project__media .frame{transform:translateY(-4px)}
.project:hover .project__media .phone{transform:translateY(-8px)}
.project__body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.4vw,28px)}
.project__label{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.project h3{margin-top:10px;font-size:1.45rem;letter-spacing:-.03em}
.project__body > p:not(.project__label){margin-top:10px;font-size:.98rem;flex:1}
.project .tags{margin-top:var(--s4)}
.project__go{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
/* a lone card: picture beside the words on wider screens */
@media (min-width:760px){
  .projects.projects--1{grid-template-columns:minmax(0,1fr)}
  .projects--1 .project{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .projects--1 .project__media{aspect-ratio:auto;min-height:360px}
  .projects--1 .project__body{align-self:center;padding:clamp(24px,3vw,40px)}
}
.tint-mb{background:var(--t-mb)} .tint-pp{background:var(--t-pp)} .tint-sb{background:var(--t-sb)}
.tint-ml{background:var(--t-ml)} .tint-kc{background:var(--t-kc)} .tint-bk{background:var(--t-bk)}
.case--bk{background:var(--t-bk)} .case--pp{background:var(--t-pp)} .case--sb{background:var(--t-sb)} .case--ml{background:var(--t-ml)} .case--kc{background:var(--t-kc)}

.work-more{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;justify-content:space-between;margin-top:var(--s7);padding:var(--s5) clamp(20px,3vw,32px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line)}
.work-more p{max-width:44em}

/* ---------- 10. SERVICES ---------- */
.svcs{display:grid;gap:var(--s4)}
@media (min-width:640px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1020px){.svcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc{
  position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,32px);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:border-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease),transform var(--mid) var(--ease);
}
.svc:hover{border-color:rgba(var(--violet-rgb),.3);box-shadow:var(--sh-2);transform:translateY(-3px)}
.svc__i{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--g-tile);color:var(--violet);margin-bottom:var(--s5)}
.svc__i svg{width:23px;height:23px}
.svc h3{font-size:1.34rem;letter-spacing:-.025em}
.svc p{margin-top:10px;flex:1;font-size:1rem}
.svc .go{margin-top:var(--s5);font-size:.95rem;text-decoration:none}
.svc .go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.svc:hover .go{color:var(--violet-ink)}
.svc:hover .go svg{transform:translateX(3px)}
/* cards that aren't links (the custom features on /website-redesign/) stay still */
.svcs--plain .svc:hover{border-color:var(--line);box-shadow:var(--sh-1);transform:none}
@media (max-width:639.98px){
  .svc{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:22px}
  .svc__i{width:44px;height:44px;margin:0;grid-row:1}
  .svc h3{align-self:center;grid-row:1;grid-column:2}
  .svc p,.svc .go{grid-column:1 / -1}
  .svc p{margin-top:14px}
  .svc .go{margin-top:16px}
}

/* ---------- 11. ONE PERSON: the panel that says how I work ---------- */
.solo{
  position:relative;isolation:isolate;overflow:hidden;display:grid;gap:clamp(40px,5vw,64px);align-items:center;
  padding:clamp(30px,5.5vw,76px);border-radius:var(--r-xl);background:var(--g-wash);
  border:1px solid rgba(var(--violet-rgb),.08);
}
.solo::before{content:"";position:absolute;z-index:-1;width:60%;aspect-ratio:1;right:-12%;top:-30%;border-radius:50%;background:radial-gradient(circle,rgba(var(--violet-rgb),.14),transparent 65%)}
.solo .h2{margin-top:var(--s4)}
.solo__p{margin-top:var(--s5);font-size:1.125rem;max-width:32em}
.ticks{display:grid;gap:14px;margin-top:var(--s6)}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li > i{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--g-tile);color:var(--violet);margin-top:1px}
.ticks li > i svg{width:15px;height:15px}
.ticks b{display:block}
.solo__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid rgba(var(--violet-rgb),.14)}
.solo__facts dt{font-family:var(--f-display);font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);font-weight:600;line-height:1;letter-spacing:-.04em}
.solo__facts dd{margin-top:8px;font-size:.88rem;line-height:1.4;color:var(--ink-2)}
@media (min-width:1000px){.solo{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}

/* the picture: one person at the centre of every job an agency would split up */
.orbit{position:relative;width:min(100%,470px);aspect-ratio:1;margin-inline:auto}
.orbit__ring{position:absolute;border-radius:50%;border:1px solid rgba(var(--violet-rgb),.16)}
.orbit__ring:nth-child(1){inset:0;border-style:dashed}
.orbit__ring:nth-child(2){inset:16%}
.orbit__ring:nth-child(3){inset:30%;background:radial-gradient(circle,rgba(255,255,255,.7),transparent 70%)}
.orbit__me{
  position:absolute;inset:27%;border-radius:50%;padding:4px;background:var(--g-violet);
  box-shadow:0 26px 60px -24px rgba(var(--violet-rgb),.7);
}
.orbit__me img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 16%;border:4px solid #fff}
.orbit__name{position:absolute;left:50%;top:69%;translate:-50% 0;z-index:2;white-space:nowrap;padding:6px 14px 6px 6px}
.orbit__name .chip__k{width:28px;height:28px;border-radius:9px;font-size:.82rem}
.orbit__name b{font-size:.95rem}
.orbit__role{
  position:absolute;z-index:2;translate:-50% calc(-50% + var(--dy,0px));
  transition:scale var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px 8px 9px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);
  font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap;
}
.orbit__role:hover{scale:1.06;box-shadow:var(--sh-3)}
@media (prefers-reduced-motion:no-preference){
  .orbit__role{animation:bob 5.6s ease-in-out calc(var(--o,0) * -.95s) infinite}
  .orbit__role:nth-of-type(even){animation-name:bob2;animation-duration:6.4s}
  .orbit__ring:nth-child(1){animation:spin 90s linear infinite}
}
@keyframes spin{to{rotate:360deg}}
.orbit__role i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--g-tile);color:var(--violet)}
.orbit__role svg{width:12px;height:12px}
@media (max-width:420px){.orbit__role{font-size:.74rem;padding:6px 10px 6px 7px}.orbit__role i{width:18px;height:18px}}

/* ---------- 12. PROCESS ---------- */
.steps{display:grid;gap:var(--s4)}
.step{position:relative;padding:clamp(24px,2.6vw,30px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.step__n{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--violet-ink)}
.step__n::after{content:"";width:28px;height:2px;border-radius:2px;background:var(--g-violet)}
.step h3{margin-top:var(--s4);font-size:1.3rem;letter-spacing:-.022em}
.step p{margin-top:var(--s2);font-size:1rem}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps--stack{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.steps.steps--stack{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 13. ABOUT (home) ---------- */
.me{display:grid;gap:clamp(48px,6vw,80px);align-items:center}
.me__media{position:relative;max-width:540px;width:100%;margin-inline:auto}
.me__photo{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;background:var(--paper-3);box-shadow:var(--sh-3)}
.me__photo img{width:100%;height:100%;object-fit:cover}
.badge{
  position:absolute;z-index:2;display:grid;gap:2px;padding:13px 17px;border-radius:18px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:var(--sh-3);
  translate:0 var(--dy,0px);transition:scale var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.badge:hover{scale:1.05;box-shadow:var(--sh-3),0 18px 40px -18px rgba(var(--violet-rgb),.45)}
@media (prefers-reduced-motion:no-preference){
  .badge--a{animation:bob 6s ease-in-out infinite}
  .badge--b{animation:bob2 6.8s ease-in-out -2s infinite}
  .badge--c{animation:bob 7.4s ease-in-out -4s infinite}
}
.badge b{font-family:var(--f-display);font-size:1.45rem;line-height:1;letter-spacing:-.03em}
.badge span{font-size:.8rem;line-height:1.35;color:var(--ink-3)}
.badge--a{right:-6%;top:51%}
.badge--b{left:-5%;bottom:8%}
.badge--c{left:-6%;top:-3%}
@media (max-width:520px){.badge--a{right:-2%}.badge--b,.badge--c{left:-2%}.badge{padding:10px 13px}.badge b{font-size:1.2rem}}
.me__copy .h2{margin:var(--s4) 0 var(--s5)}
.me__copy p + p{margin-top:var(--s4)}
.exp{margin-top:var(--s6);padding:var(--s5);border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line)}
.exp__lbl{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.exp__names{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;font-family:var(--f-display);font-size:1.2rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.exp__note{margin-top:10px;font-size:.84rem;color:var(--ink-3)}
@media (min-width:900px){.me{grid-template-columns:minmax(0,6fr) minmax(0,7fr)}}

/* ---------- 14. FAQ ---------- */
.faqs{display:grid;gap:var(--s6)}
.faqs__aside .h2{margin-top:var(--s4)}
.faqs__aside p{margin-top:var(--s4);max-width:24em}
.faqs__aside .go{margin-top:var(--s5)}
@media (min-width:980px){
  .faqs{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(48px,7vw,104px);align-items:start}
  .faqs__aside{position:sticky;top:calc(var(--header-h) + 40px)}
}
.faq{display:grid;gap:10px}
.faq details{border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);transition:box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease)}
.faq details[open]{box-shadow:var(--sh-2);border-color:rgba(var(--violet-rgb),.22)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:20px 22px;font-family:var(--f-display);font-size:1.14rem;font-weight:600;letter-spacing:-.016em;line-height:1.3;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:28px;height:28px;border-radius:50%;
  background:
    linear-gradient(var(--violet),var(--violet)) center/11px 1.8px no-repeat,
    linear-gradient(var(--violet),var(--violet)) center/1.8px 11px no-repeat,
    rgba(var(--violet-rgb),.09);
  transition:transform var(--mid) var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--violet-ink)}
.faq__a{padding:0 22px 22px;max-width:44em}
.faq__a p + p{margin-top:var(--s3)}

/* ---------- 15. CALL TO ACTION AND FORMS ---------- */
/* the closing panel: the logo's violet, with the creator site's rings */
.cta,.band{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);
  background:var(--g-panel);color:rgba(255,255,255,.88);box-shadow:var(--sh-violet);
}
.cta{display:grid;gap:clamp(36px,4vw,56px);padding:clamp(28px,5.5vw,72px)}
.rings{position:absolute;inset:0;z-index:-1;pointer-events:none}
.rings i{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.rings i:nth-child(1){width:min(560px,90%);aspect-ratio:1;left:-14%;top:-44%}
.rings i:nth-child(2){width:min(720px,110%);aspect-ratio:1;right:-22%;bottom:-62%}
.rings i:nth-child(3){width:min(320px,60%);aspect-ratio:1;right:8%;top:-20%;border:0;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%)}
.cta h2,.band h2{color:#fff}
.cta .eyebrow,.band .eyebrow{color:rgba(255,255,255,.82)}
.cta .eyebrow::before,.band .eyebrow::before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.cta .eyebrow::after,.band .eyebrow::after{background:rgba(255,255,255,.7)}
.cta .h2{margin-top:var(--s4)}
.cta__p{margin-top:var(--s5);font-size:1.125rem;max-width:30em}
.cta .ticks li > i{background:rgba(255,255,255,.18);color:#fff}
.cta .ticks span{color:#fff}
.cta__alt{margin-top:var(--s6);font-size:.95rem}
.cta__alt a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45)}
.cta__alt a:hover{text-decoration-color:#fff}
@media (min-width:980px){.cta{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,6vw,88px);align-items:start}}

.band{display:grid;gap:var(--s5);padding:clamp(30px,5vw,60px);align-items:center}
.band h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.7rem);letter-spacing:-.035em}
.band p{margin-top:var(--s3);max-width:34em}
.band__cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media (min-width:900px){.band{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s8)}}

.formcard{background:var(--paper-2);color:var(--ink-2);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);border:1px solid var(--line);box-shadow:var(--sh-3)}
.form{display:grid;gap:18px}
.form__row{display:grid;gap:18px}
@media (min-width:600px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:7px}
.field label,.fset legend{font-size:.92rem;font-weight:600;color:var(--ink)}
.field__opt{font-weight:400;color:var(--ink-3)}
.req{color:var(--violet-ink)}
.field input,.field textarea{
  width:100%;min-height:50px;padding:12px 15px;border-radius:var(--r-sm);
  font:inherit;font-size:1rem;line-height:1.45;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);transition:border-color var(--fast),box-shadow var(--fast),background-color var(--fast);
}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7A7181}
.field input:hover,.field textarea:hover{border-color:rgba(25,19,32,.3)}
.field input:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--violet);box-shadow:0 0 0 4px rgba(var(--violet-rgb),.14)}
.field [aria-invalid="true"]{border-color:var(--no);box-shadow:0 0 0 4px rgba(168,35,26,.1)}
.field__hint{font-size:.86rem;color:var(--ink-3)}
.fset{border:0;padding:0;min-width:0}
.fset legend{margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{
  display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--paper);font-size:.94rem;font-weight:500;color:var(--ink-2);
  transition:border-color var(--fast),background-color var(--fast),color var(--fast);pointer-events:none;
}
.choice span::before{content:"";width:15px;height:15px;border-radius:5px;border:1.5px solid rgba(25,19,32,.35);flex:none;background:center/11px no-repeat;transition:background-color var(--fast),border-color var(--fast)}
.choice:hover span{border-color:rgba(var(--violet-rgb),.4)}
.choice input:checked + span{border-color:var(--violet);background:rgba(var(--violet-rgb),.08);color:var(--violet-ink)}
.choice input:checked + span::before{
  border-color:var(--violet);background-color:var(--violet);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.choice input:focus-visible + span{outline:2px solid var(--violet);outline-offset:2px}
.form__foot{display:grid;gap:14px;align-items:center}
@media (min-width:600px){.form__foot{grid-template-columns:auto 1fr;column-gap:20px}}
.form__small{font-size:.86rem;color:var(--ink-3)}
.form__small a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden}
.msg{display:none;gap:4px;padding:14px 16px;border-radius:var(--r-sm);font-size:.95rem}
.msg b{display:block;color:inherit}
.msg.is-on,.msg--sent:target{display:grid}
.msg--ok{background:var(--ok-bg);color:var(--ok)}
.msg--no{background:var(--no-bg);color:var(--no)}

/* ---------- 16. FOOTER ---------- */
.ft{padding-block:clamp(56px,7vw,88px) var(--s6);border-top:1px solid var(--line)}
.ft__top{display:grid;gap:var(--s7)}
.ft__brand p{margin-top:var(--s4);max-width:22em;font-size:.98rem}
.ft__social{display:inline-flex;align-items:center;gap:9px;margin-top:var(--s5);font-weight:600;font-size:.95rem;color:var(--ink)}
.ft__social svg{width:19px;height:19px}
.ft__social:hover{color:var(--violet-ink)}
.ft__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}
.ft__cols h2{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.ft__cols ul{display:grid;gap:2px}
.ft__cols a,.ft__btn{display:inline-flex;align-items:center;min-height:34px;font-size:.96rem;color:var(--ink-2);text-align:left;line-height:1.35}
.ft__cols a:hover,.ft__btn:hover{color:var(--violet-ink);text-decoration:underline;text-underline-offset:4px}
.ft__cols a[aria-current]{color:var(--ink);font-weight:600}
.ft__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s5);margin-top:clamp(40px,6vw,72px);padding-top:var(--s5);border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-3)}
@media (min-width:720px){.ft__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1040px){.ft__top{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--s8)}}

/* cookie settings: the card "Cookie settings" opens */
.consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:400px;
  padding:20px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-3);
  transform:translateY(calc(100% + 24px));visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s;
}
.consent.is-on{transform:none;visibility:visible;transition-delay:0s}
.consent__h{font-family:var(--f-display);font-size:1.12rem;font-weight:600;color:var(--ink)}
.consent__p{margin-top:8px;font-size:.92rem}
.consent__p a{color:var(--violet-ink);text-decoration:underline;text-underline-offset:3px}
.consent__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ---------- 17. INNER PAGES ---------- */
.phero{position:relative;isolation:isolate;padding-block:clamp(24px,4vw,56px) clamp(56px,7vw,96px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(24px,3.4vw,40px);font-size:.88rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.crumbs a:hover{color:var(--violet-ink);text-decoration-color:currentColor}
.crumbs i{font-style:normal;color:var(--ink-3)}
.phero .eyebrow{margin-bottom:var(--s4)}
.phero__h{font-size:var(--t-h1);line-height:1;letter-spacing:-.042em;max-width:14em}
.phero__lede{margin-top:var(--s5);font-size:var(--t-lede);line-height:1.55;max-width:35em}
.phero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.phero__grid{display:grid;gap:clamp(40px,5vw,64px);align-items:center}
.phero__grid > *{min-width:0}
@media (min-width:980px){.phero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s8)}}
.phero__photo{position:relative;max-width:440px;width:100%;margin-inline:auto}

/* a screenshot beside an inner page's heading, on the project's colour, running off its edge */
.pshot__panel{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);aspect-ratio:6/5;box-shadow:var(--sh-2)}
.pshot__panel .frame{position:absolute;left:10%;top:13%;width:118%}
.pshot__panel .phone{position:absolute;z-index:2;left:4%;bottom:-14%;width:26%}
.pshot figcaption{margin-top:var(--s3);font-size:.9rem;color:var(--ink-3)}

/* the side panel in an inner page's opening */
.note{position:relative;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);background:var(--g-wash);border:1px solid rgba(var(--violet-rgb),.1)}
.note > b{display:block;font-family:var(--f-display);font-size:1.18rem;letter-spacing:-.02em;margin-bottom:6px}
.note p{font-size:1rem}
.note--side{padding:clamp(26px,3vw,38px)}
.note--side > b{font-size:1.3rem;margin-bottom:var(--s2)}
.note--side .ticks{margin-top:var(--s4)}
.note--side .exp__names{margin-top:var(--s4);font-size:1.1rem}
.note__foot{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(var(--violet-rgb),.14);font-size:.92rem !important;color:var(--ink-3)}

/* two columns: a heading that stays put, and what it's about */
.split{display:grid;gap:var(--s6)}
.split + .split{margin-top:clamp(64px,8vw,112px)}
.split__head .h2{font-size:clamp(1.9rem,1.4rem + 2vw,3rem)}
.split__head .eyebrow{margin-bottom:var(--s4)}
.split__head p{margin-top:var(--s4);max-width:26em}
@media (min-width:980px){
  .split{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(48px,7vw,104px);align-items:start}
  .split__head{position:sticky;top:calc(var(--header-h) + 40px)}
}
.prose p + p,.prose p + ul,.prose ul + p,.prose p + .checks,.prose p + .note,.prose p + .goodfor{margin-top:var(--s4)}
.prose > ul:not(.checks):not(.goodfor){display:grid;gap:10px}
.prose > ul:not(.checks):not(.goodfor) li{position:relative;padding-left:26px}
.prose > ul:not(.checks):not(.goodfor) li::before{content:"";position:absolute;left:4px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--violet)}

/* a list of what's included: small cards, two across on wide screens */
.checks{display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:18px 20px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.checks li > i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--g-tile);color:var(--violet)}
.checks li > i svg{width:16px;height:16px}
.checks b{display:block;font-size:1.03rem;line-height:1.4}
.checks span{display:block;margin-top:4px;font-size:.97rem}
@media (min-width:760px){.checks--2{grid-template-columns:1fr 1fr}}

/* side-by-side options (e.g. Shopify or built from scratch) */
.opts{display:grid;gap:var(--s4)}
@media (min-width:760px){.opts{grid-template-columns:1fr 1fr}}
.opt{padding:clamp(24px,2.6vw,32px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.opt__k{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-ink)}
.opt h3{margin-top:10px;font-size:1.34rem}
.opt p{margin-top:10px;font-size:1rem}
.opt ul{display:grid;gap:8px;margin-top:var(--s4)}
.opt li{display:flex;gap:10px;font-size:.98rem}
.opt li svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--violet)}

/* the services overview: one card per service */
.srows{display:grid;gap:var(--s4)}
.srow{display:grid;gap:var(--s4);padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);transition:box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease)}
.srow:hover{box-shadow:var(--sh-2);border-color:rgba(var(--violet-rgb),.28)}
.srow__i{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--g-tile);color:var(--violet)}
.srow__i svg{width:23px;height:23px}
.srow h2{font-size:clamp(1.5rem,1.25rem + .9vw,2rem);letter-spacing:-.03em}
.srow h2 a:hover{color:var(--violet-ink)}
.srow p{max-width:36em}
.srow ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s4)}
.srow li{font-size:.82rem;font-weight:500;padding:7px 11px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper)}
@media (min-width:900px){
  .srow{grid-template-columns:64px minmax(0,4fr) minmax(0,6fr) auto;column-gap:var(--s6);align-items:start}
  .srow .go{white-space:nowrap;margin-top:6px}
}

/* social posts: a row per account. Each tile grows in proportion to its shape (a Reel is
   9:16, a post 4:5), so every tile in a row is the same height. On phones a row scrolls
   sideways, like a feed. Short loops play only while on screen (business.js, "loops") */
.feeds{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(56px,7vw,88px)}   /* minmax(0,…): a row that scrolls sideways mustn't widen the page */
.feed__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5);margin-bottom:var(--s5)}
.feed__who{display:flex;align-items:center;gap:14px}
.feed__av{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:#fff;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--av-ring,rgba(var(--violet-rgb),.35))}
.feed__av--mb{background:#F29A1F;--av-ring:rgba(242,154,31,.4)}
.feed__av--pp{background:#8C7A35;--av-ring:rgba(140,122,53,.4)}
.feed__av--kc{background:var(--g-violet)}
.feed__who h3{font-size:1.3rem;letter-spacing:-.025em}
.feed__who p{font-size:.92rem;color:var(--ink-3);margin-top:2px}
.feed__note{max-width:34em;font-size:.98rem}
.feed__row{display:flex;gap:16px;align-items:flex-start}
.sp{position:relative;margin:0;flex:var(--w) 1 0;min-width:0}
.sp--reel{--w:.5625}.sp--post{--w:.8}.sp--square{--w:1}
.sp__media{position:relative;overflow:hidden;border-radius:18px;background:var(--paper-3);box-shadow:var(--sh-2);aspect-ratio:4/5;isolation:isolate}
.sp--reel .sp__media{aspect-ratio:9/16}
.sp--square .sp__media{aspect-ratio:1}
.sp__media img,.sp__media video{display:block;width:100%;height:100%;object-fit:cover}
.sp__media video{position:absolute;inset:0;z-index:1}
.sp__toggle{
  position:absolute;z-index:2;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--sh-2);
  transition:transform var(--fast) var(--ease),background-color var(--fast);
}
.sp__toggle:hover{transform:scale(1.06);background:#fff}
.sp__toggle svg{width:14px;height:14px}
.sp__toggle .i-play{margin-left:2px}
.sp__toggle[aria-pressed="false"] .i-pause,.sp__toggle[aria-pressed="true"] .i-play{display:none}
.sp figcaption{margin-top:12px;font-size:.86rem;line-height:1.4;color:var(--ink-3)}
.sp figcaption b{display:block;font-size:.92rem;color:var(--ink)}
@media (max-width:759.98px){
  .feed__row{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 20px;scrollbar-width:none}
  .feed__row::-webkit-scrollbar{display:none}
  .sp{flex:none;width:calc(var(--w) * min(400px, 92vw));scroll-snap-align:start}
}

/* three posts fanned out beside an opening */
.fan{position:relative;width:100%;max-width:540px;margin-inline:auto;aspect-ratio:1/1.02}
.fan::before{content:"";position:absolute;inset:8% 4%;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,168,75,.2),rgba(var(--violet-rgb),.12) 45%,transparent 70%)}
.fan .sp{position:absolute}
.fan .sp--a{left:0;top:23%;width:44%;rotate:-7deg;z-index:1}
.fan .sp--b{left:30%;top:0;width:40%;z-index:3}
.fan .sp--c{right:0;top:15%;width:34%;rotate:6deg;z-index:2}
.fan .sp__media{box-shadow:var(--sh-frame)}
@media (prefers-reduced-motion:no-preference){
  .fan .sp--a{animation:fanA .9s var(--ease) both}
  .fan .sp--b{animation:rise .9s var(--ease) .08s both}
  .fan .sp--c{animation:fanC .9s var(--ease) .16s both}
}
@keyframes fanA{from{opacity:0;rotate:0deg;translate:20% 6%}to{opacity:1}}
@keyframes fanC{from{opacity:0;rotate:0deg;translate:-20% 6%}to{opacity:1}}

/* ---------- 18. CASE STUDIES ---------- */
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin-top:clamp(32px,4vw,48px);padding:clamp(20px,2.6vw,28px);border-radius:var(--r-lg);background:rgba(255,255,255,.75);border:1px solid var(--line);box-shadow:var(--sh-1)}
.meta dt{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.meta > div{min-width:0}
.meta dd{margin-top:6px;font-size:1rem;font-weight:500;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.meta dd a{text-decoration:underline;text-decoration-color:rgba(var(--violet-rgb),.35);text-underline-offset:4px}
.meta dd a:hover{color:var(--violet-ink);text-decoration-color:currentColor}
@media (min-width:900px){.meta{grid-template-columns:repeat(4,minmax(0,1fr))}}
.showcase{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);padding:clamp(18px,5vw,64px) clamp(18px,5vw,64px) 0}
.showcase .frame{border-radius:14px 14px 0 0}
.showcase--phones{display:flex;justify-content:center;gap:clamp(12px,3.4vw,44px);padding-bottom:0}
.showcase--phones .phone{width:min(23%,220px);margin-bottom:-10%}
.shots{display:grid;gap:var(--s5)}
@media (min-width:800px){.shots--2{grid-template-columns:1fr 1fr}}
.shot{padding:clamp(14px,2.4vw,24px) clamp(14px,2.4vw,24px) 0;border-radius:var(--r-lg);overflow:hidden}
.shot .frame{border-radius:12px 12px 0 0}
.shot figcaption{padding:var(--s3) 0 var(--s4);font-size:.9rem;color:var(--ink-2)}
.status{display:flex;gap:12px;align-items:flex-start;margin-top:var(--s5);padding:14px 18px;border-radius:var(--r);background:#FFF6E8;border:1px solid rgba(242,154,31,.28);font-size:.95rem;color:var(--ink-2);max-width:44rem}
.status svg{width:20px;height:20px;flex:none;margin-top:2px;color:#C07612}

/* ---------- 19. CONTACT ---------- */
.contact{display:grid;gap:var(--s7)}
@media (min-width:1000px){.contact{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:var(--s8);align-items:start}}
.next{display:grid;gap:10px}
.next li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s3);padding:16px 18px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line)}
.next__n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--g-violet);color:#fff;font-size:.86rem;font-weight:600}
.next b{display:block;line-height:1.4}
.next li > div > span{display:block;margin-top:3px;font-size:.96rem}
.contact__aside .h3{font-size:1.3rem;margin-bottom:var(--s4)}
.aside-links{display:grid;gap:var(--s4);margin-top:var(--s6);justify-items:start}
.aside-note{font-size:.95rem}
@media (min-width:1000px){.contact__aside{position:sticky;top:calc(var(--header-h) + 32px)}}

/* about: how I work, and what I know well */
.pcards{display:grid;gap:var(--s4)}
@media (min-width:640px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1020px){.pcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcards li{padding:clamp(22px,2.4vw,30px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.pcards h3{font-size:1.22rem;letter-spacing:-.02em}
.pcards h3::before{content:"";display:block;width:30px;height:3px;border-radius:3px;margin-bottom:var(--s4);background:var(--g-violet)}
.pcards p{margin-top:8px;font-size:1rem}
.skills{display:flex;flex-wrap:wrap;gap:8px}
.skills li{padding:9px 15px;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);font-size:.95rem;font-weight:500;color:var(--ink)}

/* ---------- 21. THE THREE WEBSITES ---------- */
/* a price: "from £1,495", then the monthly care under it */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.price__from{font-size:.88rem;color:var(--ink-3)}
.price b{font-family:var(--f-display);font-size:2.4rem;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.price__care{flex-basis:100%;margin-top:4px;font-size:.9rem;color:var(--ink-3)}
.price--hero{border-top:0;padding-top:0;margin-top:var(--s5)}
.price--hero b{font-size:2.6rem}

/* the three as cards; the middle one wears the logo's gradient as its edge */
.pkgs{display:grid;gap:var(--s4)}
.pkg{
  position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,32px);
  border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:box-shadow var(--mid) var(--ease),transform var(--mid) var(--ease);
}
.pkg:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.pkg--business{border:1.5px solid transparent;background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box,var(--g-violet) border-box;box-shadow:var(--sh-2),0 30px 60px -40px rgba(var(--violet-rgb),.55)}
.pkg__k{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--violet-ink)}
.pkg__h{margin-top:10px;font-size:clamp(1.8rem,1.5rem + 1vw,2.2rem);letter-spacing:-.04em}
.pkg__h a:hover{color:var(--violet-ink)}
.pkg__d{margin-top:10px;font-size:1rem}
.pkg__list{display:grid;gap:9px;margin-top:var(--s5);flex:1;align-content:start}
.pkg__cta{margin-top:auto}
@media (min-width:900px){
  /* one row of three: each card's parts line up with the others' (subgrid), so the
     prices sit level whatever the length of the words above them */
  .pkgs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0}
  .pkg{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start}
}
.pkg__list li{display:flex;gap:10px;font-size:.96rem;line-height:1.45}
.pkg__list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--violet)}
.pkg__cta{display:grid;gap:var(--s4);justify-items:center;margin-top:var(--s6)}
.pkgs__foot{margin-top:var(--s6);text-align:center;font-size:1rem;color:var(--ink-2)}

/* three real websites, stacked, beside the Websites page's heading. A carousel
   (business.js, "the stack"): the arrows, the dots or a click on a window behind
   bring that one to the front, and it turns over by itself until someone chooses.
   Without JavaScript it's the same picture, standing still. */
.stackc{width:100%;max-width:560px;margin-inline:auto}
.stack{position:relative;width:100%;aspect-ratio:1.18}
.stack .frame{position:absolute;width:74%;transition:left .8s var(--ease),top .8s var(--ease),box-shadow .8s var(--ease)}
.stack .is-back{left:0;top:0;z-index:1}
.stack .is-mid{left:13%;top:15%;z-index:2}
.stack .is-front{left:26%;top:30%;z-index:3}
.stackc.is-live .stack .frame:not(.is-front){cursor:pointer}
.stack::before{content:"";position:absolute;inset:6% 0 0 10%;border-radius:50%;background:radial-gradient(circle,rgba(255,168,75,.2),rgba(var(--violet-rgb),.12) 50%,transparent 72%)}
@media (prefers-reduced-motion:no-preference){
  .stack [data-i="0"]{animation:rise .9s var(--ease) both}
  .stack [data-i="1"]{animation:rise .9s var(--ease) .1s both}
  /* the one coming to the front lifts as it arrives */
  .stack .is-front.is-new{animation:lift .8s var(--ease)}
}
@keyframes lift{40%{scale:1.03}}
.stack__ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:var(--s5);padding-left:26%}
.stack__ctl[hidden]{display:none}
.stack__arr{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line-2);box-shadow:var(--sh-1);color:var(--ink);transition:border-color var(--fast),color var(--fast),transform var(--fast) var(--ease)}
.stack__arr:hover{border-color:rgba(var(--violet-rgb),.45);color:var(--violet-ink)}
.stack__arr:active{transform:scale(.94)}
.stack__arr svg{width:18px;height:18px}
.stack__dots{display:flex;gap:6px}
.stack__dot{position:relative;width:9px;height:9px;border-radius:var(--r-pill);background:rgba(25,19,32,.18);transition:width var(--mid) var(--ease),background-color var(--mid)}
.stack__dot::after{content:"";position:absolute;inset:-12px -4px}   /* a bigger target than it looks */
.stack__dot[aria-pressed="true"]{width:26px;background:var(--violet)}
.stack__cap{flex-basis:100%;display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:.95rem;color:var(--ink-2)}
.stack__cap b{color:var(--ink)}
.stack__cap span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stack__cap svg{width:16px;height:16px;align-self:center;color:var(--violet-ink);transition:transform var(--mid) var(--ease)}
.stack__cap:hover b{color:var(--violet-ink);text-decoration:underline;text-underline-offset:4px}
.stack__cap:hover svg{transform:translateX(3px)}
@media (max-width:599.98px){.stack__ctl{padding-left:0;justify-content:center}.stack__cap{justify-content:center}}

/* the facts strip under an opening */
.pstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:clamp(40px,5vw,64px);border-radius:var(--r-lg);overflow:hidden;background:var(--line);border:1px solid var(--line);box-shadow:var(--sh-1)}
.pstats > div{min-width:0;padding:18px 20px;background:rgba(255,255,255,.86)}
.pstats dt{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.pstats dd{margin-top:6px;font-family:var(--f-display);font-size:clamp(1.15rem,1rem + .5vw,1.4rem);font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
@media (min-width:760px){.pstats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* what each one contains: three tabs (business.js, "tabs"), each a summary card in the
   website's own colour beside its features as small cards, in groups. Without
   JavaScript the three panels simply follow one another. */
.dt{display:grid;gap:var(--s5)}
.dt__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;max-width:640px;border-radius:22px;background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.dt__tabs[hidden]{display:none}
.dt__tab{display:grid;justify-items:start;gap:1px;padding:12px 16px;border-radius:16px;text-align:left;color:var(--ink-2);transition:background-color var(--mid) var(--ease),color var(--mid),box-shadow var(--mid) var(--ease)}
.dt__tab:hover{background:var(--paper-3);color:var(--ink)}
.dt__tab[aria-selected="true"]{background:var(--g-panel);color:#fff;box-shadow:0 12px 26px -14px rgba(var(--violet-rgb),.8)}
.dt__tab b{font-family:var(--f-display);font-size:clamp(1.02rem,.95rem + .4vw,1.25rem);font-weight:600;letter-spacing:-.025em;line-height:1.2;color:inherit}
.dt__n{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;opacity:.75}
.dt__p{font-size:.8rem;opacity:.8}
.dt__panel{display:grid;gap:var(--s4);scroll-margin-top:calc(var(--header-h) + 20px)}
.dt__panel[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.dt.is-live .dt__panel:not([hidden]){animation:rise .6s var(--ease)}}
.dt__side{position:relative;overflow:hidden;isolation:isolate;padding:clamp(24px,3vw,36px);border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--sh-1)}
.dt__h{margin-top:10px;font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem);letter-spacing:-.045em;line-height:1}
.dt__d{margin-top:var(--s3);color:var(--ink-2)}
.dt__count{display:flex;align-items:center;gap:14px;margin-top:var(--s5)}
.dt__count b{font-family:var(--f-display);font-size:3.2rem;font-weight:600;letter-spacing:-.05em;line-height:.9;background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.dt__count span{font-size:.9rem;line-height:1.35;color:var(--ink-2)}
.dt__side .price{border-top-color:rgba(25,19,32,.1)}
.dt__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s5)}
.dt__body{display:grid;gap:var(--s5);align-content:start}
.dt__lead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-weight:600;color:var(--ink)}
.dt__lead a{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid rgba(var(--violet-rgb),.25);box-shadow:var(--sh-1);font-weight:500;color:var(--ink-2);transition:border-color var(--fast),color var(--fast)}
.dt__lead a:hover{border-color:var(--violet);color:var(--violet-ink)}
.dt__lead a svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--violet);color:#fff;flex:none}
.dt__grp{padding:clamp(18px,2.4vw,26px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.dt__gh{display:flex;align-items:center;gap:12px;font-size:1.2rem;letter-spacing:-.02em;margin-bottom:var(--s4)}
.dt__gi{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--g-tile);color:var(--violet)}
.dt__gi svg{width:19px;height:19px}
.dt__gn{margin-left:auto;min-width:30px;height:26px;padding:0 9px;border-radius:var(--r-pill);display:grid;place-items:center;background:rgba(var(--violet-rgb),.08);font-family:var(--f-mono);font-size:.74rem;font-weight:600;color:var(--violet-ink)}
.dt__items{display:grid;gap:8px}
@media (min-width:640px){.dt__items{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dt__items li{position:relative;padding:13px 14px 13px 46px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line);transition:border-color var(--fast),background-color var(--fast)}
.dt__items li:hover{border-color:rgba(var(--violet-rgb),.3);background:#fff}
.dt__items li::before{
  content:"";position:absolute;left:13px;top:14px;width:22px;height:22px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3DF5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat,rgba(var(--violet-rgb),.1);
}
.dt__items b{display:block;font-size:.97rem;line-height:1.35}
.dt__items span{display:block;margin-top:3px;font-size:.88rem;line-height:1.45;color:var(--ink-3)}
@media (min-width:1000px){
  .dt__panel{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s5);align-items:start}
  .dt__side{position:sticky;top:calc(var(--header-h) + 32px)}
}
@media (max-width:519.98px){.dt__tabs{gap:4px;padding:5px}.dt__tab{padding:10px 8px}.dt__tab b{font-size:.95rem;white-space:nowrap}.dt__p{font-size:.72rem}}

/* side by side: a table that scrolls sideways on a phone, its first column held still */
.cmp{overflow-x:auto;overscroll-behavior-x:contain;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.cmp table{width:100%;min-width:640px;border-collapse:collapse;font-size:.95rem}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.cmp tbody th,.cmp tfoot th{position:sticky;left:0;z-index:1;text-align:left;font-weight:500;color:var(--ink-2);background:var(--paper-2);width:44%;min-width:220px}
.cmp thead th{font-family:var(--f-display);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);padding-top:20px}
.cmp thead th a:hover{color:var(--violet-ink)}
.cmp thead th span{display:block;margin-top:2px;font-family:var(--f-body);font-size:.82rem;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.cmp .yes svg{width:18px;height:18px;margin-inline:auto;color:var(--violet)}
.cmp .no{color:var(--ink-3)}
.cmp .val{font-weight:600;color:var(--ink)}
.cmp tfoot th,.cmp tfoot td{border-bottom:0;background:var(--paper-3);font-weight:600;color:var(--ink)}
.cmp tbody tr:hover > *{background:#FBF9FF}
.cmp__note{margin-top:var(--s4);font-size:.9rem;color:var(--ink-3)}

/* Website Care's three levels, as a short list */
.carelevels{display:grid;gap:var(--s3)}
.carelevel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--s4);padding:18px 22px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.carelevel > b{font-family:var(--f-display);font-size:1.2rem;letter-spacing:-.02em}
.carelevel > span{grid-column:1;font-size:.9rem;color:var(--ink-3)}
.carelevel p{grid-column:2;grid-row:1 / span 2;text-align:right;font-size:.88rem;color:var(--ink-3)}
.carelevel p b{display:block;font-family:var(--f-display);font-size:1.6rem;letter-spacing:-.03em;line-height:1.1}
.carelevels__note{margin-top:var(--s2);font-size:.9rem;color:var(--ink-3)}

/* ---------- 22. A WEBSITE'S OWN PAGE ---------- */
.goodfor{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.goodfor li{padding:8px 14px;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);font-size:.92rem;font-weight:500;color:var(--ink)}

/* what's included: groups of ticked lines */
.incl-grps{display:grid;gap:var(--s4)}
.incl-grp{padding:clamp(22px,3vw,36px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.incl-grp__h{font-size:1.35rem;letter-spacing:-.022em;margin-bottom:var(--s5)}
.incl{display:grid;gap:12px}
@media (min-width:760px){.incl{grid-template-columns:1fr 1fr;column-gap:var(--s6)}}
.incl li{position:relative;padding-left:32px;font-size:.98rem;line-height:1.5}
.incl li::before{
  content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3DF5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat,rgba(var(--violet-rgb),.1);
}

/* the extras and their prices */
.xtras{display:grid;gap:10px}
.xtras li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:start;padding:16px 20px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.xtra__t b{display:block;font-size:1rem;color:var(--ink)}
.xtra__t span{display:block;margin-top:3px;font-size:.93rem;color:var(--ink-2)}
.xtra__p{font-size:.95rem;font-weight:600;color:var(--violet-ink);white-space:nowrap;text-align:right}
.xtras__note{margin-top:var(--s4);font-size:.92rem;color:var(--ink-3)}
@media (max-width:479.98px){.xtras li{grid-template-columns:minmax(0,1fr)}.xtra__p{text-align:left}}

/* the care that comes with a website */
.carebox{position:relative;overflow:hidden;isolation:isolate;padding:clamp(26px,4.5vw,56px);border-radius:var(--r-xl);background:var(--g-wash);border:1px solid rgba(var(--violet-rgb),.1)}
.carebox::before{content:"";position:absolute;z-index:-1;width:46%;aspect-ratio:1;right:-10%;top:-40%;border-radius:50%;background:radial-gradient(circle,rgba(var(--violet-rgb),.13),transparent 65%)}
.carebox__hd{display:grid;gap:var(--s5)}
@media (min-width:900px){.carebox__hd{grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--s8)}}
.carebox__k{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--violet-ink)}
.carebox h3{margin-top:10px;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);letter-spacing:-.04em}
.carebox__hd p:not(.carebox__k){margin-top:10px;max-width:34em}
.carebox__pr b{display:block;font-family:var(--f-display);font-size:3.2rem;font-weight:600;letter-spacing:-.05em;line-height:1}
.carebox__pr span{display:block;margin-top:8px;font-size:.9rem;color:var(--ink-3);max-width:15em}
.carebox .ticks{margin-top:var(--s6)}
@media (min-width:760px){.carebox .ticks{grid-template-columns:1fr 1fr;column-gap:var(--s6)}}
.carebox > .go{margin-top:var(--s6)}

/* the other two websites, at the foot of a website's page */
.othr__in{display:grid;gap:var(--s4)}
@media (min-width:760px){.othr__in{grid-template-columns:1fr 1fr}}
.othr__a{display:grid;gap:4px;padding:22px 26px;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);transition:border-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease),transform var(--mid) var(--ease)}
.othr__a:hover{border-color:rgba(var(--violet-rgb),.3);box-shadow:var(--sh-2);transform:translateY(-2px)}
.othr__k{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.othr__a b{font-family:var(--f-display);font-size:1.6rem;font-weight:600;letter-spacing:-.035em}
.othr__a > span:last-child{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--violet-ink)}
.othr__a svg{width:16px;height:16px;transition:transform var(--mid) var(--ease)}
.othr__a:hover svg{transform:translateX(3px)}

/* Website Care's opening: a website I look after, and what happens to it */
.carehero{position:relative;margin:0}
.carehero .pshot__panel .frame{left:9%;top:11%}
.carehero__chips{position:absolute;z-index:3;left:-2%;bottom:9%;display:grid;gap:8px;justify-items:start}
.carehero__chips li{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:var(--sh-2);font-size:.84rem;font-weight:600;color:var(--ink)}
.carehero__chips svg{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(47,163,107,.14);color:#1E7A4C;flex:none}
.carehero__msg{position:absolute;z-index:3;right:-2%;top:-4%}
@media (prefers-reduced-motion:no-preference){
  .carehero__chips li{animation:pop .7s var(--ease) both}
  .carehero__chips li:nth-child(2){animation-delay:.12s}
  .carehero__chips li:nth-child(3){animation-delay:.24s}
  .carehero__chips li:nth-child(4){animation-delay:.36s}
  .carehero__msg{animation:pop .8s var(--ease) .6s both}
}
@media (max-width:599.98px){
  .carehero__chips{left:3%;bottom:5%}
  .carehero__chips li{font-size:.76rem;padding:6px 11px 6px 6px}
  .carehero__chips svg{width:20px;height:20px}
  .carehero__msg{right:3%;top:-6%;font-size:.74rem}
}

/* ---------- 23. GET STARTED: THE BUILDER ---------- */
.phero--slim{padding-bottom:clamp(20px,3vw,36px)}
.phero__alt{margin-top:var(--s4);font-size:1rem;color:var(--ink-2)}
.cfg-sec{padding-top:clamp(4px,1.6vw,20px) !important}
.cfg{display:grid;gap:var(--s6);align-items:start}
@media (min-width:1040px){.cfg{grid-template-columns:minmax(0,1fr) 370px;column-gap:clamp(28px,3vw,44px)}}
.cfg__steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);min-width:0}
.cfg__aside{min-width:0}
@media (min-width:1040px){.cfg__aside{position:sticky;top:calc(var(--header-h) + 24px)}}

@supports (content-visibility:auto){.cfg__steps > .qstep:nth-child(n+4){content-visibility:auto;contain-intrinsic-block-size:auto 560px}}
.qstep{padding:clamp(20px,3vw,34px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);scroll-margin-top:calc(var(--header-h) + 20px)}
.qstep__hd{display:grid;grid-template-columns:38px minmax(0,1fr);gap:var(--s4);align-items:start;margin-bottom:var(--s5)}
.qstep__n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper-3);border:1px solid var(--line-2);font-weight:600;font-size:.95rem;color:var(--ink-2);transition:background-color var(--mid),color var(--mid),border-color var(--mid)}
.qstep.is-done .qstep__n,.qstep__n--tick{background:var(--g-violet);color:#fff;border-color:transparent}
.qstep__n svg{width:17px;height:17px}
.qstep__t{display:block;font-family:var(--f-display);font-size:clamp(1.35rem,1.2rem + .6vw,1.65rem);font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.qstep__s{display:block;margin-top:6px;font-size:.97rem;color:var(--ink-2)}
.fset__opts{display:flex;flex-wrap:wrap;gap:8px}
.qstep .formcard{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.qstep .field textarea{min-height:104px}
.choice input[type="radio"] + span::before{border-radius:50%}
.choice input[type="radio"]:checked + span::before{background-image:radial-gradient(circle,#fff 0 3px,transparent 3.5px)}
.reveal-panel{display:none;margin-top:var(--s4)}
.reveal-panel.is-on{display:block}

/* step 1: the three websites */
.picks{display:grid;gap:12px}
@media (min-width:700px){.picks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pick{position:relative;display:block;cursor:pointer}
.pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick__b{position:relative;display:flex;flex-direction:column;height:100%;padding:18px;border-radius:var(--r);border:1.5px solid var(--line-2);background:var(--paper);transition:border-color var(--fast),box-shadow var(--fast),background-color var(--fast)}
.pick:hover .pick__b{border-color:rgba(var(--violet-rgb),.45)}
.pick input:checked + .pick__b{border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(var(--violet-rgb),.12),var(--sh-2)}
.pick input:focus-visible + .pick__b{outline:2px solid var(--violet);outline-offset:3px}
.pick__tick{position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff center/12px no-repeat}
.pick input:checked + .pick__b .pick__tick{border-color:var(--violet);background-color:var(--violet);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.pick__k{padding-right:28px;font-family:var(--f-mono);font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pick__nm{margin-top:8px;font-family:var(--f-display);font-size:1.45rem;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.pick__d{margin-top:4px;flex:1;font-size:.92rem;color:var(--ink-2)}
.pick__pr{margin-top:12px;font-family:var(--f-display);font-size:1.3rem;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.pick__pr em{font-style:normal;font-family:var(--f-body);font-size:.84rem;font-weight:500;letter-spacing:0;color:var(--ink-3)}

/* step 2: page sizes */
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.seg{grid-template-columns:repeat(4,minmax(0,1fr))}}
.seg label{position:relative;display:block;cursor:pointer}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg__b{display:grid;gap:2px;padding:14px 12px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--paper);text-align:center;transition:border-color var(--fast),box-shadow var(--fast),background-color var(--fast)}
.seg label:hover .seg__b{border-color:rgba(var(--violet-rgb),.45)}
.seg__t{font-size:1.02rem;font-weight:600;color:var(--ink)}
.seg__p{font-size:.85rem;color:var(--ink-3)}
.seg input:checked + .seg__b{border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(var(--violet-rgb),.12)}
.seg input:checked + .seg__b .seg__p{color:var(--violet-ink);font-weight:600}
.seg input:focus-visible + .seg__b{outline:2px solid var(--violet);outline-offset:3px}

/* what's already included: closed until opened */
.qstep--incl{padding:0;overflow:hidden}
.incd__sum{list-style:none;cursor:pointer;display:grid;grid-template-columns:38px minmax(0,1fr);gap:6px var(--s4);align-items:center;padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,34px)}
.incd__sum::-webkit-details-marker{display:none}
.incd__txt{display:block}
.incd__txt .qstep__s{margin-top:2px}
.incd__go{grid-column:2;justify-self:start;font-size:.94rem;font-weight:600;color:var(--violet-ink);text-decoration:underline;text-underline-offset:4px}
@media (min-width:640px){.incd__sum{grid-template-columns:38px minmax(0,1fr) auto}.incd__go{grid-column:3;justify-self:end}}
.incd[open] .incd__show,.incd:not([open]) .incd__hide{display:none}
.incd__sum:hover .qstep__t{color:var(--violet-ink)}
.incd__grp{padding:0 clamp(20px,3vw,34px) var(--s5)}
.incd__grp[hidden]{display:none}
.incd__h{padding-top:var(--s4);margin-bottom:var(--s4);border-top:1px solid var(--line);font-size:1.1rem}
.incd .incl li{font-size:.93rem}

/* step 3: the extras */
.feats{display:grid;gap:10px}
@media (min-width:700px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.feat{position:relative;display:block;cursor:pointer}
.feat > input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.feat__b{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:start;height:100%;padding:15px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--paper);transition:border-color var(--fast),box-shadow var(--fast),background-color var(--fast)}
.feat:hover .feat__b{border-color:rgba(var(--violet-rgb),.45)}
.feat__box{width:20px;height:20px;margin-top:2px;border-radius:6px;border:1.5px solid rgba(25,19,32,.35);background:#fff center/12px no-repeat}
.feat > input:checked + .feat__b{border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(var(--violet-rgb),.1)}
.feat > input:checked + .feat__b .feat__box{border-color:var(--violet);background-color:var(--violet);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.feat > input:focus-visible + .feat__b{outline:2px solid var(--violet);outline-offset:3px}
.feat__nm{font-size:.98rem;font-weight:600;line-height:1.35;color:var(--ink)}
.feat__d{display:block;margin-top:4px;font-size:.88rem;font-weight:400;line-height:1.45;color:var(--ink-2)}
.feat__pr{font-size:.92rem;font-weight:600;color:var(--violet-ink);white-space:nowrap}
.feat--qty{grid-column:1 / -1;cursor:default}
.feat--on,.feat--on > input{cursor:default}
.feat--on:hover .feat__b{border-color:var(--violet)}
.feat--qty .feat__b{grid-template-columns:minmax(0,1fr) auto}
.feat--qty .field{margin-top:10px;max-width:380px}
.field select{
  width:100%;min-height:46px;padding:10px 42px 10px 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191320' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/15px no-repeat;
  -webkit-appearance:none;appearance:none;font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer;
}
.field select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(var(--violet-rgb),.14)}
@media (max-width:479.98px){.feat__b{grid-template-columns:22px minmax(0,1fr)}.feat__pr{grid-column:2}.feat--qty .feat__b{grid-template-columns:minmax(0,1fr)}.feat--qty .feat__pr{grid-column:1}}

/* step 4: the charity discount */
.charity{padding:16px 18px;border-radius:var(--r);background:var(--g-wash);border:1px solid rgba(var(--violet-rgb),.14)}
.charity .tick{font-size:.95rem}
.charity .reveal-panel{margin-top:var(--s4)}
.sum__row--off dd{color:var(--ok)}

/* step 6 */
.callout{padding:18px 20px;border-radius:var(--r);background:var(--g-wash);border:1px solid rgba(var(--violet-rgb),.12)}
.callout__t{margin-bottom:6px;font-family:var(--f-display);font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.callout p:not(.callout__t){font-size:.95rem}

/* the order summary */
.sum{padding:clamp(22px,2.6vw,28px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-3);scroll-margin-top:calc(var(--header-h) + 20px)}
.sum__ttl{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sum__lines{margin-top:var(--s3)}
.sum__line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.sum__line-t{font-family:var(--f-display);font-size:1.55rem;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.sum__line-s{font-size:.9rem;color:var(--ink-3);text-align:right}
.sum__feats{display:grid;gap:6px;margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--line-2);font-size:.9rem}
.sum__feats li{display:flex;justify-content:space-between;gap:var(--s3)}
.sum__feats li span:last-child{flex:none;font-weight:600;color:var(--ink);white-space:nowrap}
.sum__feats--incl li span:last-child{font-weight:500;color:var(--ok)}
.sum__more{display:inline-block;margin-top:var(--s3);font-size:.88rem;font-weight:600;color:var(--violet-ink);text-decoration:underline;text-underline-offset:3px}
.sum__totals{display:grid;gap:6px;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.sum__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);font-size:.95rem}
.sum__row[hidden]{display:none}   /* the charity line, until the box is ticked */
.sum__row dd{font-weight:600;color:var(--ink)}
.sum__row--total dt{font-size:1.05rem;font-weight:600;color:var(--ink)}
.sum__row--total dd{font-family:var(--f-display);font-size:2.2rem;letter-spacing:-.045em;line-height:1}
.sum__care{margin-top:var(--s4);padding:14px 16px;border-radius:var(--r-sm);background:rgba(var(--violet-rgb),.06);border:1px solid rgba(var(--violet-rgb),.12)}
.sum__care-hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);font-weight:600;color:var(--ink)}
.sum__care-pr{color:var(--violet-ink);white-space:nowrap}
.sum__care-pr small{font-size:.8rem;font-weight:500}
.sum__care p{margin-top:4px;font-size:.84rem;color:var(--ink-2)}
.sum__agree{display:grid;gap:12px;margin-top:var(--s5)}
.tick{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:.9rem;line-height:1.45;color:var(--ink-2);cursor:pointer}
.tick input{position:absolute;left:0;top:0;width:22px;height:22px;margin:0;opacity:0;cursor:pointer}
.tick__box{width:22px;height:22px;border-radius:6px;border:1.5px solid rgba(25,19,32,.4);background:#fff center/13px no-repeat;transition:background-color var(--fast),border-color var(--fast),box-shadow var(--fast)}
.tick input:checked + .tick__box{border-color:var(--violet);background-color:var(--violet);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.tick input:focus-visible + .tick__box{outline:2px solid var(--violet);outline-offset:2px}
.tick small{display:block;margin-top:3px;font-size:.8rem;color:var(--ink-3)}
.tick a{color:var(--violet-ink);text-decoration:underline;text-underline-offset:3px}
.tick.is-missing .tick__box{border-color:var(--no);box-shadow:0 0 0 4px rgba(168,35,26,.12)}
.sum #checkout{margin-top:var(--s5)}
.sum__fine{margin-top:var(--s3);font-size:.8rem;color:var(--ink-3)}
.sum__fine a{text-decoration:underline;text-underline-offset:2px}
.sum .msg{margin-top:var(--s4)}
.msg__btn{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* on phones: the total, kept in reach while the summary is off screen */
.sumbar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:10px 10px 10px 18px;border-radius:20px;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:var(--sh-3);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateY(calc(100% + 24px));transition:transform .35s var(--ease);
}
.sumbar.is-on{transform:none}
.sumbar[hidden]{display:none}
.sumbar__b{display:grid;min-width:0;line-height:1.2}
.sumbar__lbl{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sumbar__pr{font-family:var(--f-display);font-size:1.45rem;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.sumbar__care{font-size:.76rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1039.98px){body:has(.sumbar:not([hidden])) .ft{padding-bottom:110px}}
@media (min-width:1040px){.sumbar{display:none !important}}
@media (min-width:1080px){.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* after paying */
.win__flag{margin-bottom:var(--s5)}
.track{display:grid;max-width:46rem}
.track li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s4);padding-bottom:var(--s5)}
.track li::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;border-radius:2px;background:var(--line-2)}
.track li:last-child::before{content:none}
.track__dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);background:var(--paper-2)}
.track__s--now .track__dot{border-color:transparent;background:var(--g-violet);box-shadow:0 0 0 5px rgba(var(--violet-rgb),.15)}
.track h3{font-size:1.2rem;letter-spacing:-.02em}
.track__when{margin-top:2px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-ink)}
.track p:not(.track__when){margin-top:6px;font-size:.98rem}

/* the page for addresses that don't exist */
.nf{min-height:56vh}
.nf__links{display:grid;gap:14px;margin-top:var(--s6)}

/* ---------- 24. THE TERMS ---------- */
.draftnote{margin-top:var(--s6);max-width:46rem;padding:18px 22px;border-radius:var(--r);background:#FFF6E8;border:1px solid rgba(242,154,31,.32)}
.draftnote b{display:block;font-family:var(--f-display);font-size:1.12rem;color:var(--ink)}
.draftnote p{margin-top:6px;font-size:.95rem}
.draftnote ul{display:grid;gap:6px;margin-top:10px}
.draftnote li{position:relative;padding-left:18px;font-size:.92rem}
.draftnote li::before{content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;border-radius:50%;background:#C07612}
.legal{display:grid;gap:clamp(22px,3vw,34px)}
@media (min-width:1000px){.legal{grid-template-columns:250px minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start}
  .ltoc{position:sticky;top:calc(var(--header-h) + 24px);max-height:calc(100vh - var(--header-h) - 48px);overflow-y:auto}}
.ltoc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.ltoc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.ltoc summary::-webkit-details-marker{display:none}
.ltoc summary::after{content:"";width:8px;height:8px;flex:none;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--fast)}
.ltoc[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.ltoc ol{display:grid;gap:1px;padding:0 8px 10px}
.ltoc a{display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:4px;padding:7px 10px;border-radius:10px;font-size:.86rem;line-height:1.35;color:var(--ink-2);transition:background-color var(--fast),color var(--fast)}
.ltoc a span{font-family:var(--f-mono);font-size:.66rem;color:var(--ink-3);padding-top:2px}
.ltoc a:hover{background:var(--paper-3);color:var(--ink)}
.ltoc a.is-on{background:rgba(var(--violet-rgb),.09);color:var(--violet-ink)}
.ldoc{display:grid;gap:clamp(16px,2.2vw,22px);max-width:50em;min-width:0}
/* the privacy policy: its summary cards, and what's collected, why and for how long */
.glance{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.glance li{display:grid;gap:6px;align-content:start;padding:18px 20px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.glance b{font-family:var(--f-display);font-size:1.04rem;font-weight:600;letter-spacing:-.022em;line-height:1.2}
.glance span{font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.glance a{font-family:var(--f-mono);font-size:.72rem;color:var(--violet-ink,var(--violet));white-space:nowrap;border-bottom:1px solid rgba(var(--violet-rgb),.3)}
.ldata{display:grid;gap:14px}
.lsec > .ldata{margin-top:18px}
.ldata article{padding:clamp(16px,2.4vw,22px);border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.ldata h3{font-family:var(--f-display);font-size:1.1rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;scroll-margin-top:calc(var(--header-h) + 24px)}
.ldata dl{display:grid;gap:12px;margin-top:14px}
.ldata dl div{display:grid;gap:3px}
@media (min-width:640px){.ldata dl div{grid-template-columns:8.5em minmax(0,1fr);gap:16px}}
.ldata dt{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:5px}
.ldata dd{font-size:.93rem;line-height:1.62;color:var(--ink-2)}
/* the terms are one long document: each clause section is laid out only near the screen */
@supports (content-visibility:auto){.lsec{content-visibility:auto;contain-intrinsic-block-size:auto 1400px}}
.lsec{padding:clamp(22px,3.4vw,38px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);scroll-margin-top:calc(var(--header-h) + 20px)}
.lsec > * + *{margin-top:12px}
.lsec__h{display:flex;align-items:baseline;gap:14px;font-size:clamp(1.45rem,1.2rem + 1.2vw,1.95rem);letter-spacing:-.03em}
.lsec__n{flex:none;font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;color:var(--violet);transform:translateY(-3px)}
.lsec > h3{display:flex;align-items:baseline;gap:10px;margin-top:28px;font-size:1.1rem;letter-spacing:-.02em;line-height:1.3;scroll-margin-top:calc(var(--header-h) + 20px)}
.lsec > h3 + *{margin-top:8px}
.cl{flex:none;min-width:2.9em;font-family:var(--f-mono);font-size:.72rem;font-weight:500;color:var(--ink-3)}
.lsec p,.lsec li{font-size:.98rem;line-height:1.7;color:var(--ink-2)}
.lsec a:not(.btn){color:var(--violet-ink);text-decoration:underline;text-decoration-color:rgba(var(--violet-rgb),.35);text-underline-offset:3px}
.lsec a:not(.btn):hover{text-decoration-color:currentColor}
.lsec ul,.lsec ol{display:grid;gap:7px}
.lsec ul li{position:relative;padding-left:22px}
.lsec ul li::before{content:"";position:absolute;left:5px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--violet);opacity:.55}
.lalpha{counter-reset:la}
.lalpha li{position:relative;padding-left:32px;counter-increment:la}
.lalpha li::before{content:"(" counter(la,lower-alpha) ")";position:absolute;left:0;top:0;font-family:var(--f-mono);font-size:.76rem;line-height:2.3;color:var(--ink-3)}
.lsum{padding:16px 20px;border-radius:var(--r);background:var(--g-wash);border:1px solid rgba(var(--violet-rgb),.16)}
.lsec > .lsum{margin-top:18px}
.lsum > * + *{margin-top:8px}
.lsum__t{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--violet-ink)}
.lsec .lsum p,.lsec .lsum li{font-size:.94rem;color:var(--ink)}
.ltbl-wrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper-2)}
.lsec > .ltbl-wrap{margin-top:16px}
.ltbl{width:100%;border-collapse:collapse;font-size:.92rem}
.ltbl th,.ltbl td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.ltbl thead th{background:var(--paper-3);font-family:var(--f-mono);font-size:.64rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.ltbl td:first-child{width:50%;color:var(--ink)}
.ltbl tbody tr:last-child > *{border-bottom:0}
.lform{padding:clamp(18px,2.6vw,24px);border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--paper)}
.lsec > .lform{margin-top:16px}
.lform > * + *{margin-top:12px}
.lform dl{display:grid;gap:16px;margin-top:18px}
.lform dt{font-size:.88rem;color:var(--ink-2)}
.lform dd{min-height:1.9em;border-bottom:1px solid var(--ink-3)}
.lsec .lform__note{font-size:.82rem;color:var(--ink-3)}
.lend{padding:4px 6px;font-size:.9rem;color:var(--ink-3)}
.lend a{color:var(--violet-ink);text-decoration:underline}
@media print{.ltoc,.draftnote,.phero__cta,.aura{display:none !important}.legal{display:block}.lsec,.lsum,.lform,.ltbl-wrap,.glance li,.ldata article{box-shadow:none;background:#fff;border-color:#bbb}.glance li,.ldata article{break-inside:avoid}}

/* ---------- 25. WEBSITES FOR A TRADE ---------- */
.story{max-width:46rem;margin-top:var(--s6)}
.story .status{margin-top:var(--s5)}
/* the website that fits, with the extras that usually go with it */
.fit{display:grid;gap:var(--s5);padding:clamp(24px,3.4vw,44px);border-radius:var(--r-xl);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-2)}
@media (min-width:980px){.fit{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4vw,56px);align-items:start}}
.fit__main p:not(.pkg__k):not(.price):not(.fit__also){margin-top:10px}
.fit__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s5)}
.fit__also{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);font-size:.95rem}
.fit__lbl{margin-bottom:var(--s3);font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
/* the other trades, at the foot of each */
.othr2__list{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s4)}
/* the trades, as cards in each project's colour */
.trades{display:grid;gap:var(--s4)}
/* each group's cards share the row, however many there are (2, 3 or 4) */
@media (min-width:640px){.trades{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.trade{position:relative;display:grid;gap:8px;align-content:start;padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease)}
.trade:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.trade__k{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:rgba(25,19,32,.66)}
.trade__h{font-family:var(--f-display);font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.trade__p{font-size:1rem;color:var(--ink-2)}
.trade__off{margin-left:8px;padding:3px 8px;border-radius:var(--r-pill);background:var(--violet);color:#fff;letter-spacing:.08em}
.trade__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.trade__tags li{padding:5px 9px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);font-size:.78rem;font-weight:500;color:var(--ink-2)}
.trade__go{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s3);font-weight:600;color:var(--ink)}
.trade__go svg{width:17px;height:17px;transition:transform var(--mid) var(--ease)}
.trade:hover .trade__go{color:var(--violet-ink)}
.trade:hover .trade__go svg{transform:translateX(3px)}
/* the trades as a strip of links (homepage) */
.tradestrip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:var(--s6)}
.tradestrip p{margin-right:var(--s2);font-weight:600;color:var(--ink)}
.tradestrip a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);font-size:.94rem;font-weight:500;color:var(--ink);transition:border-color var(--fast),color var(--fast)}
.tradestrip a:hover{border-color:rgba(var(--violet-rgb),.4);color:var(--violet-ink)}
.tradestrip .tradestrip__all{gap:8px;background:transparent;border-color:transparent;box-shadow:none;font-weight:600;color:var(--violet-ink);text-decoration:underline;text-underline-offset:4px}
.tradestrip__all svg{width:16px;height:16px}
.goodfor a{color:inherit;text-decoration:underline;text-decoration-color:rgba(var(--violet-rgb),.35);text-underline-offset:3px}
.goodfor a:hover{color:var(--violet-ink)}
@media (min-width:720px) and (max-width:1039.98px){.ft__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the industries hub: groups of cards, with links to each group under the heading */
.igrp{scroll-margin-top:calc(var(--header-h) + 20px)}
.igrp + .igrp{margin-top:clamp(56px,7vw,96px)}
.igrp__h{margin-bottom:var(--s5);font-size:clamp(1.5rem,1.25rem + 1vw,2.1rem);letter-spacing:-.03em}
.igrp__jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s6)}
.igrp__jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:var(--sh-1);font-size:.92rem;font-weight:500;color:var(--ink);transition:border-color var(--fast),color var(--fast)}
.igrp__jump a:hover{border-color:rgba(var(--violet-rgb),.4);color:var(--violet-ink)}

/* who an industry page is for: one card for each kind of business */
.kinds{display:grid;gap:var(--s4)}
@media (min-width:700px){.kinds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.kinds{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kind{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease)}
.kind:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(var(--violet-rgb),.25)}
.kind__n{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--violet-ink)}
.kind__n::after{content:"";width:24px;height:2px;border-radius:2px;background:var(--g-violet)}
.kind h3{margin-top:var(--s3);font-size:1.25rem;letter-spacing:-.022em}
.kind > p:not(.kind__n){margin-top:8px;font-size:.98rem;flex:1}
.kind .tags{margin-top:var(--s4)}

/* the opening picture: the homepage's (.hero__art, section 8), a website in a browser and on a
   phone with labels floating round it. A client's website, a concept, or an example made up
   for the page (none carries a "Live website" or "Concept" tag). Wider than the usual phero column, so the
   labels have room: side by side from 1080px, like the homepage, and stacked below that */
.iart{margin:0}
.iart figcaption{margin-top:var(--s2);font-size:.9rem;color:var(--ink-3);max-width:42em}
/* on a phone there's room for three labels: Karl's goes, as the caption says it too */
@media (max-width:599.98px){.iart .chip--b{display:none}}
.hero__art > .hero__win{display:block;position:relative;z-index:1;width:89%}
@media (min-width:980px) and (max-width:1079.98px){.phero__grid--art{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1080px){.phero__grid--art{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);column-gap:clamp(40px,4.5vw,72px)}}
@media (max-width:1079.98px){.phero__grid--art .iart{max-width:720px}}

/* the charity discount: the three websites, before and after */
.cdisc{display:grid;gap:var(--s4)}
@media (min-width:860px){.cdisc{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cdisc__c{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,32px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.cdisc__c:nth-child(2){border:1.5px solid transparent;background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box,var(--g-violet) border-box;box-shadow:var(--sh-2)}
.cdisc__pr{display:flex;align-items:baseline;gap:12px;margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.cdisc__was{font-size:1.05rem;color:var(--ink-3);text-decoration:line-through}
.cdisc__pr b{font-family:var(--f-display);font-size:2.6rem;font-weight:600;letter-spacing:-.045em;line-height:1}
.cdisc__off{align-self:flex-start;margin-top:var(--s3);padding:5px 11px;border-radius:var(--r-pill);background:var(--ok-bg);font-size:.84rem;font-weight:600;color:var(--ok)}
.cdisc__care{margin-top:var(--s3);margin-bottom:var(--s5);font-size:.9rem;color:var(--ink-3);flex:1}
.price--hero s{color:var(--ink-3)}

/* ---------- 26. THE FREE 15-MINUTE CHAT ----------
   The link under a page's main buttons (common.py, chat()): Karl's face, the offer and an
   arrow. Every one leads to the enquiry form's chat box (enquiry_form()), already ticked. */
.chat{
  display:flex;width:fit-content;max-width:100%;align-items:center;gap:12px;margin-top:var(--s5);
  padding:6px 18px 6px 6px;border-radius:var(--r-pill);background:rgba(255,255,255,.62);
  border:1px solid rgba(var(--violet-rgb),.2);box-shadow:var(--sh-1);color:var(--ink);text-decoration:none;
  transition:border-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease),transform var(--mid) var(--ease);
}
.hero .chat{margin-top:clamp(22px,2.6vw,30px)}
.chat:hover{border-color:rgba(var(--violet-rgb),.5);box-shadow:var(--sh-2),0 14px 30px -18px rgba(var(--violet-rgb),.6);transform:translateY(-2px)}
.chat--static{padding-right:22px}
.chat--static:hover{border-color:rgba(var(--violet-rgb),.2);box-shadow:var(--sh-1);transform:none}
.chat:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.chat__ph{width:46px;height:46px;flex:none;border-radius:50%;padding:2px;background:var(--g-violet)}
.chat__ph img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid var(--paper)}
.chat__t{display:grid;gap:1px;min-width:0;line-height:1.3}
.chat__t b{font-size:1rem;font-weight:600}
.chat__t span{font-size:.86rem;color:var(--ink-3)}
.chat .btn__go{width:18px;height:18px;flex:none;color:var(--violet);transition:transform var(--mid) var(--ease)}
.chat:hover .btn__go{transform:translateX(3px)}

/* its box at the top of the enquiry form, ticked by ?service=chat (business.js) */
.chatopt{
  position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 18px;border-radius:var(--r);background:var(--g-wash);border:1px solid rgba(var(--violet-rgb),.18);
  cursor:pointer;transition:border-color var(--fast),box-shadow var(--fast);
}
.chatopt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chatopt__box{
  width:22px;height:22px;margin-top:1px;border-radius:7px;border:1.5px solid rgba(25,19,32,.35);
  background:#fff center/14px no-repeat;pointer-events:none;transition:background-color var(--fast),border-color var(--fast);
}
.chatopt__t{pointer-events:none}
.chatopt__t b{display:block;font-family:var(--f-display);font-size:1.1rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.chatopt__t span{display:block;margin-top:3px;font-size:.9rem;line-height:1.45;color:var(--ink-3)}
.chatopt:hover{border-color:rgba(var(--violet-rgb),.45)}
.chatopt:has(input:checked){border-color:var(--violet);box-shadow:0 0 0 4px rgba(var(--violet-rgb),.12)}
.chatopt input:checked ~ .chatopt__box{
  border-color:var(--violet);background-color:var(--violet);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.chatopt input:focus-visible ~ .chatopt__box{outline:2px solid var(--violet);outline-offset:2px}

/* ---------- 27. ABOUT: WORKING WITH ME, AND THE PHOTOS ----------
   Photos of Karl from his own camera roll (_build/about_photos.py): one tall, two wide. */
.about2{display:grid;gap:clamp(40px,5vw,64px);align-items:center}
@media (min-width:960px){
  .about2{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,6vw,88px)}
  .about2 .amos{order:-1}
}
.about2__copy .h2{margin:var(--s4) 0 var(--s5)}
.about2__copy p + p{margin-top:var(--s4)}
.amos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,16px);max-width:560px;width:100%;margin:0 auto}
.amos figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3);box-shadow:var(--sh-2)}
.amos figure:first-child{grid-row:span 2}
.amos figure:not(:first-child){aspect-ratio:4/3}
.amos img{display:block;width:100%;height:100%;object-fit:cover}
.amos figure:nth-child(3) img{object-position:30% 50%}
.amos__cap{grid-column:1 / -1;margin-top:4px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:center}

/* ---------- 28. WEBSITE REDESIGNS (/websites/redesign/, 22 October 2026) ----------
   Built around what Karl does: an audit and proposal, then the build, migration included.
   The opening is the industry pages' (a website with labels round it, section 25). Three real
   proposals are shown as sneak previews: pictures made, blurred, by _build/proposals/shoot.sh, and
   opened bigger in a dialog (business.js, "the proposal previews"). */

/* the experience behind it, in place of a client logo strip */
.cred{display:grid;gap:14px 40px;align-items:center;margin-top:clamp(48px,6vw,80px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.cred__k b{display:block;font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.02em}
.cred__k span{display:block;margin-top:2px;font-size:.92rem;color:var(--ink-3)}
.cred__names{display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(24px,4vw,56px)}
.cred__names li{font-family:var(--f-display);font-size:clamp(1.3rem,1rem + 1.1vw,1.85rem);font-weight:600;letter-spacing:-.035em;color:rgba(25,19,32,.56)}
@media (min-width:900px){.cred{grid-template-columns:auto minmax(0,1fr)}}

/* what a redesign can do (four cards), and why it deserves to be taken seriously */
@media (min-width:1020px){.svcs--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.serious{margin-top:var(--s5);padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.serious__k{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-ink)}
.serious ul{display:grid;gap:var(--s5);margin-top:var(--s5)}
.serious li{display:grid;gap:6px;padding-left:18px;border-left:2px solid rgba(var(--violet-rgb),.22)}
.serious b{font-family:var(--f-display);font-size:1.18rem;line-height:1.25;letter-spacing:-.02em}
.serious span{font-size:.98rem}
@media (min-width:860px){.serious ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}}

/* the proposals: each one's pages fanned out over a soft wash, cut off by the card's edge */
.props{display:grid;gap:var(--s5)}
@media (min-width:1080px){.props{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prop{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.prop__media{overflow:hidden;padding:clamp(18px,2.4vw,26px) clamp(18px,2.4vw,26px) 0;background:var(--g-wash)}
.prop__fan{position:relative;max-width:400px;aspect-ratio:1/.8;margin:0 auto}
.prop__pg{
  position:absolute;top:5%;width:56%;display:block;overflow:hidden;border-radius:6px;background:#fff;
  box-shadow:0 2px 6px rgba(61,40,30,.08),0 18px 36px -16px rgba(61,40,30,.4);transition:transform .5s var(--ease);
}
.prop__pg img{display:block;width:100%;height:auto}
.prop__pg--1{left:2%;z-index:4;transform:rotate(-5deg)}
.prop__pg--2{left:15%;z-index:3;transform:rotate(-1.5deg) translateY(3%)}
.prop__pg--3{left:28%;z-index:2;transform:rotate(2deg) translateY(5%)}
.prop__pg--4{left:41%;z-index:1;transform:rotate(5.5deg) translateY(7%)}
@media (hover:hover){
  .prop__fan:hover .prop__pg--1{transform:rotate(-7deg) translate(-4%,-2%)}
  .prop__fan:hover .prop__pg--2{transform:rotate(-2.5deg) translate(-1%,1%)}
  .prop__fan:hover .prop__pg--3{transform:rotate(3deg) translate(3%,4%)}
  .prop__fan:hover .prop__pg--4{transform:rotate(7.5deg) translate(6%,6%)}
}
.prop__body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.6vw,30px)}
.prop__k{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.prop__h{margin-top:10px;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;letter-spacing:-.025em}
.prop__list{display:grid;gap:8px;margin-top:var(--s4);flex:1}
.prop__list li{display:flex;gap:10px;font-size:.95rem;line-height:1.45}
.prop__list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--violet)}
.prop__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-3)}
/* between a phone and three across, each proposal lies on its side: the pages beside the words */
@media (min-width:760px) and (max-width:1079.98px){
  .prop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .prop__media{display:flex;align-items:flex-end}
  .prop__fan{width:100%}
}
.props__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4) var(--s6);margin-top:var(--s5);padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px);border-radius:var(--r-lg);background:var(--g-wash);border:1px solid rgba(var(--violet-rgb),.12)}
.props__cta p{font-size:1.05rem}

/* a proposal page, bigger: a dialog over a dark backdrop, with the other pages a step away */
.pvd{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(16px,3vw,32px) clamp(68px,8vw,96px);border:0;background:transparent;overflow:auto}
.pvd[open]{display:grid;place-items:center}
.pvd::backdrop{background:rgba(21,16,29,.88)}
.pvd figure{display:grid;justify-items:center;gap:var(--s3);margin:0}
.pvd img{width:auto;height:auto;max-width:min(100%,760px);max-height:calc(100dvh - 120px);border-radius:8px;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.pvd figcaption{max-width:40em;font-size:.88rem;text-align:center;color:rgba(255,255,255,.78)}
.pvd__btn{position:fixed;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;transition:background-color var(--fast)}
.pvd__btn:hover{background:rgba(255,255,255,.26)}
.pvd__btn svg{width:22px;height:22px}
.pvd__x{top:16px;right:16px}
.pvd__prev,.pvd__next{top:50%;margin-top:-24px}
.pvd__prev{left:12px}
.pvd__next{right:12px}
.pvd :focus-visible{outline-color:#fff}
@media (max-width:599.98px){
  .pvd{padding:72px 12px 84px}
  .pvd__prev,.pvd__next{top:auto;bottom:18px;margin-top:0}
  .pvd__prev{left:calc(50% - 60px)}
  .pvd__next{right:calc(50% - 60px)}
}

/* how it works: five steps, each marked proposal or fixed price */
.plan{display:grid;gap:12px}
.plan__step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px;align-items:start;padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.plan__n{grid-row:span 2;min-width:1.5em;font-family:var(--f-display);font-size:2.2rem;font-weight:600;line-height:1;letter-spacing:-.04em}
.plan__step h3{font-size:1.28rem;letter-spacing:-.022em}
.plan__step p{margin-top:6px;font-size:.98rem}
.plan__tag{grid-column:2;justify-self:start;margin-top:10px;padding:5px 10px;border-radius:var(--r-pill);background:var(--ok-bg);font-family:var(--f-mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.plan__tag--paid{background:rgba(var(--violet-rgb),.08);color:var(--violet-ink)}
@media (min-width:600px){
  .plan__step{grid-template-columns:auto minmax(0,1fr) auto}
  .plan__n{grid-row:auto}
  .plan__tag{grid-column:3;grid-row:1;margin-top:2px}
}
.plan__me{margin-top:var(--s5)}

/* the migration: a dark band, with what usually goes wrong beside how it's handled */
.section--ink{
  background:
    radial-gradient(60% 55% at 88% 0%,rgba(91,61,245,.34),transparent 70%),
    radial-gradient(45% 50% at 0% 100%,rgba(255,92,114,.14),transparent 70%),
    #15101D;
  color:rgba(255,255,255,.72);
}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .eyebrow,.section--ink .shead p{color:rgba(255,255,255,.74)}
.section--ink :focus-visible{outline-color:#fff}
.section--ink .lnk{color:#fff}
/* its heading's second sentence on a line of its own, in a lighter gradient that reads on the dark */
.section--ink .h2 .grad{display:block;width:fit-content;background-image:linear-gradient(115deg,#C2B3FF 0%,#E2A8FF 50%,#FF9EAF 100%)}
.fixes__hd{display:none}
.fixes ul{display:grid;gap:10px}
.fixes li{display:grid;overflow:hidden;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.fixes li > p{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;font-size:.98rem;line-height:1.45}
.fixes li i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.fixes li i svg{width:13px;height:13px}
.fixes__bad{color:var(--ink-2)}
.fixes__bad i{background:var(--no-bg);color:var(--no)}
.fixes__good{border-top:1px solid var(--line);background:linear-gradient(100deg,rgba(91,61,245,.05),rgba(255,92,114,.035));color:var(--ink);font-weight:500}
.fixes__good i{background:var(--g-tile);color:var(--violet)}
@media (min-width:860px){
  .fixes__hd{display:grid;grid-template-columns:1fr 1fr;padding:0 20px 12px;font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .section--ink .fixes__hd{color:rgba(255,255,255,.62)}
  .fixes__hd span:last-child{padding-left:21px}
  .fixes li{grid-template-columns:1fr 1fr}
  .fixes__good{border-top:0;border-left:1px solid var(--line)}
}

/* custom development: the detail under each card, and the payments panel */
.svc .svc__spec{flex:none;margin-top:var(--s4);padding-top:14px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.64rem;font-weight:500;letter-spacing:.12em;line-height:1.7;text-transform:uppercase;color:var(--violet-ink)}
.payrow{display:grid;gap:var(--s5);margin-top:var(--s5);padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1)}
.payrow__h h3{font-size:1.34rem;letter-spacing:-.025em}
.payrow__h p{margin-top:8px;font-size:.97rem;max-width:32em}
.payrow .goodfor{margin-top:0;align-content:center}
.payrow .goodfor li{background:var(--paper);box-shadow:none}
@media (min-width:980px){.payrow{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s7);align-items:center}}

/* ---------- 20. SMALL SCREENS AND PREFERENCES ---------- */
@media (max-width:599.98px){
  .btn{min-height:50px}
  .hero__cta .btn,.phero__cta .btn{flex:1 1 auto;white-space:normal;text-align:center;padding-block:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}
@media print{
  .aud,.hd,.ft,.cta,.band,.consent{display:none !important}
  body{background:#fff}
  /* every section drawn when printing (the terms PDF is made by printing the terms page) */
  main > .section,.lsec,.cfg__steps > .qstep{content-visibility:visible !important}
  .js [data-reveal]{opacity:1 !important;translate:none !important}
}