@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/gf/fraunces-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:"Fraunces";font-style:italic;font-weight:500 800;font-display:swap;src:url(/fonts/gf/fraunces-italic-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;font-display:swap;src:url(/fonts/gf/inter-400.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:500;font-display:swap;src:url(/fonts/gf/inter-500.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:600;font-display:swap;src:url(/fonts/gf/inter-600.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}
:root{
--parchment:#f5eedf;--surface:#fbf7ee;--hairline:#d9cfb8;--sand:#e9dcc6;
--navy:#0c3459;--ink:#10202f;--muted:#4a5560;--on-dark:#c9d4de;
--blue:#0070ba;--blue-deep:#005e9c;--tan:#c69c6d;--brown:#8c6238;--sky:#9fd3e8;--error:#a63f2a;
--line:#857a65;
--display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
--text:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--container:1240px;--pad:clamp(20px,5vw,32px);--section:clamp(56px,8vw,104px);
--r-md:14px;--r-lg:20px;--r-xl:28px;--pill:999px;
--lift:0 12px 32px rgba(12,52,89,.10);
color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:92px}
body{margin:0;background:var(--parchment);color:var(--ink);font:400 1rem/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:var(--blue-deep);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--parchment)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;color:var(--navy);letter-spacing:-.015em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0}
.icon{width:20px;height:20px;flex:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;padding:.75rem 1.1rem;border-radius:var(--pill);background:var(--navy);color:var(--parchment);font:600 .875rem/1 var(--text);text-decoration:none}
.skip-link:focus{top:12px}
[data-scroll-sentinel]{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.container{width:min(100% - 2 * var(--pad),var(--container));margin-inline:auto}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(28px,4vw,48px)}
.section--sand{background:var(--sand)}
/* Type: Fraunces sets the voice (one italic accent word per headline);
Inter reads. Display 44→84 and h1 40→68: largest ≤ 2.5× smallest. */
.display{font-size:clamp(2.75rem,1.55rem + 5vw,5.25rem);line-height:.98;letter-spacing:-.025em}
.h1{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.25rem);line-height:1.02;letter-spacing:-.02em}
.h2{font-size:clamp(2rem,1.35rem + 2.6vw,3.375rem);line-height:1.04;letter-spacing:-.02em}
.h3{font-size:clamp(1.5rem,1.3rem + .8vw,1.875rem);line-height:1.12;letter-spacing:-.01em}
.h4{font-size:1.3125rem;line-height:1.22;font-weight:600;letter-spacing:-.005em}
.accent{font-style:italic;font-weight:700;color:var(--brown)}
.on-dark .accent{color:var(--tan)}
.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.55;max-width:54ch}
.muted{color:var(--muted)}
.label{font:600 .75rem/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,4vw,52px)}
.section-head > div{max-width:46rem}
.section-head p{margin-top:16px;color:var(--muted);font-size:1.0625rem;max-width:58ch}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--navy);text-decoration:none}
.text-link:hover{color:var(--blue-deep);text-decoration:underline}
.text-link .icon{width:18px;height:18px}
.on-dark .text-link{color:var(--parchment)}
/* Buttons: pills. Blue is the action; tan is the action on a dark tile. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border:0;border-radius:var(--pill);font:600 .9375rem/1.1 var(--text);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
.btn .icon{width:18px;height:18px}
.btn--primary{background:var(--blue);color:var(--surface)}
.btn--primary:hover{background:var(--navy);color:var(--surface)}
.btn--accent{background:var(--tan);color:var(--navy)}
.btn--accent:hover{background:var(--parchment);color:var(--navy)}
.btn--ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn--ghost:hover{background:var(--sand);color:var(--navy)}
.on-dark .btn--ghost{color:var(--parchment);box-shadow:inset 0 0 0 1.5px var(--parchment)}
.on-dark .btn--ghost:hover{background:var(--parchment);color:var(--navy)}
.btn--lg{min-height:56px;padding:0 30px;font-size:1rem}
.btn--sm{min-height:38px;padding:0 16px;font-size:.8125rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta-note{margin-top:12px;font-size:.9375rem;color:var(--muted)}
.on-dark .cta-note{color:var(--on-dark)}
.on-dark .cta-note a{color:var(--parchment)}
@media (max-width:519px){.cta-row .btn{width:100%}}
.reassure{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;padding:0;list-style:none;font-size:.9375rem;color:var(--muted)}
.reassure li{display:flex;align-items:center;gap:6px}
.reassure .icon{width:16px;height:16px;color:var(--blue)}
.on-dark .reassure{color:var(--on-dark)}
.on-dark .reassure .icon{color:var(--tan)}
/* Chips, badges, the Google rating. */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--pill);background:var(--sand);color:var(--navy);font:600 .8125rem/1.2 var(--text)}
.chip .icon{width:16px;height:16px}
.chip--sky{background:var(--sky)}
.chip--tan{background:var(--tan)}
.chip--navy{background:var(--navy);color:var(--parchment)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--pill);background:var(--navy);color:var(--parchment);font:700 .6875rem/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase}
.badge--tan{background:var(--tan);color:var(--navy)}
.badge--sky{background:var(--sky);color:var(--navy)}
.rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--ink);font-size:.9375rem;text-decoration:none}
.rating .stars{display:inline-flex;gap:2px;color:var(--brown)}
.rating .stars .icon{width:18px;height:18px}
.rating b{font-weight:600;color:var(--navy)}
a.rating:hover{color:var(--navy);text-decoration:underline}
/* Cards and colour-block tiles (20 px). One accent per tile. */
.card{position:relative;border-radius:var(--r-lg);padding:28px;background:var(--surface);border:1px solid var(--hairline);overflow:hidden}
.card--lift{box-shadow:var(--lift)}
.tile{position:relative;border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);overflow:hidden}
.tile--navy{background:var(--navy);color:var(--parchment)}
.tile--navy :is(h2,h3,h4){color:var(--parchment)}
.tile--tan{background:var(--tan);color:var(--ink)}
.tile--sky{background:var(--sky);color:var(--ink)}
.tile--sand{background:var(--sand);color:var(--ink)}
.tile > :not(.seal){position:relative;z-index:1}
.seal{position:absolute;right:-52px;bottom:-60px;width:300px;height:auto;opacity:.12;pointer-events:none;user-select:none}
.seal--dark{filter:brightness(0);opacity:.07}
/* Header: parchment, the logo, a pill nav, one blue button. */
.site-header{position:sticky;top:0;z-index:50;background:var(--parchment);border-bottom:1px solid transparent;transition:border-color 160ms ease}
.site-header.scrolled{border-bottom-color:var(--hairline)}
.header-inner{display:flex;align-items:center;gap:16px;min-height:68px}
@media (min-width:960px){.header-inner{min-height:78px}}
.brand{display:flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;flex:none}
.brand:hover{color:var(--navy)}
.brand-logo{display:block;width:42px;height:42px;flex:none;object-fit:contain}
.brand-mark{font:700 1.625rem/1 var(--display);letter-spacing:-.02em}
.brand-name{font:600 .875rem/1.15 var(--text);color:var(--navy)}
.brand-name small{display:block;font:500 .6875rem/1.3 var(--text);color:var(--muted)}
@media (max-width:519px){.brand-name{display:none}.brand-logo{width:36px;height:36px}}
.primary-nav{display:none}
.primary-nav ul{display:flex;gap:4px;list-style:none;padding:0}
.primary-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:var(--pill);color:var(--navy);font:500 .9375rem/1 var(--text);text-decoration:none}
.primary-nav a:hover{background:var(--sand)}
.primary-nav a[aria-current="page"]{background:var(--navy);color:var(--parchment)}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.header-login{display:none;padding:10px 12px;color:var(--navy);font:600 .9375rem/1 var(--text);text-decoration:none}
.header-login:hover{text-decoration:underline;color:var(--navy)}
.header-cta{min-height:44px;padding:0 20px;font-size:.875rem}
.header-cta .label-short{display:none}
@media (max-width:519px){.header-cta .label-long{display:none}.header-cta .label-short{display:inline}}
@media (max-width:359px){.header-cta{display:none}}
.menu-button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:0;border-radius:var(--pill);background:transparent;box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy);font:600 .875rem/1 var(--text);cursor:pointer}
.menu-button .icon{width:18px;height:18px}
.menu-button .close{display:none}
.menu-button[aria-expanded="true"] .open{display:none}
.menu-button[aria-expanded="true"] .close{display:block}
.site-menu{background:var(--parchment);border-top:1px solid var(--hairline);max-height:calc(100dvh - 68px);overflow-y:auto}
.site-menu[hidden]{display:none}
.site-menu ul{list-style:none;padding:8px 0 0}
.site-menu .menu-link{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-bottom:1px solid var(--hairline);color:var(--navy);font:700 1.375rem/1.1 var(--display);text-decoration:none}
.site-menu .menu-link[aria-current="page"]{color:var(--blue-deep)}
.menu-actions{display:grid;gap:10px;padding:20px 0 24px}
.menu-actions .btn{width:100%}
@media (min-width:960px){
.primary-nav{display:block;margin-left:20px}
.header-login{display:inline-flex;align-items:center}
.menu-button,.site-menu{display:none!important}
}
.header-minimal .header-inner{justify-content:space-between}
.header-contact{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--pill);box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy);font:600 .875rem/1 var(--text);text-decoration:none}
.header-contact:hover{background:var(--sand);color:var(--navy)}
@media (max-width:519px){.header-contact .label{display:none}}
/* Hero (ported from the Studio pages): the promise left; on the right the primary piece — a navy tile with a
real print on our press, and an example release card — in front of a
collage of tilted photo cards, doodles, the shop's sticker and a few
floating facts (Bonfire's layered hero, in ARK's colours). The collage
settles in once on load and drifts at its own depths as the page scrolls
(site.js); both stop for prefers-reduced-motion. */
.hero{position:relative;overflow:hidden;padding-block:clamp(28px,5vw,64px) var(--section)}
.hero-grid{display:grid;gap:36px;align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.hero .lead{margin-top:22px}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:22px}
.hero-art{position:relative;width:100%;max-width:560px;justify-self:center;padding:40px 0 112px}
.hero-tile{position:relative;z-index:2;width:min(76%,380px);margin-inline:auto;border-radius:var(--r-xl);background:var(--navy);padding:14px;overflow:hidden;box-shadow:var(--lift)}
.hero-photo{position:relative;z-index:1;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--sand)}
.hero-photo picture{height:100%}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-tag{position:absolute;z-index:2;top:26px;left:26px}
.release-card{position:absolute;z-index:4;left:0;bottom:6px;width:min(86%,340px);rotate:-2deg;display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 14px;align-items:center;border-radius:18px;background:var(--surface);color:var(--ink);padding:14px;box-shadow:var(--lift)}
.release-card picture{grid-row:span 2;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--sand)}
.release-card picture img{width:100%;height:100%;object-fit:cover}
.rc-title{font:700 1.0625rem/1.2 var(--display);color:var(--navy)}
.rc-meta{font-size:.8125rem;color:var(--muted)}
.rc-keep{grid-column:1 / -1;display:flex;justify-content:space-between;gap:12px;margin-top:8px;padding-top:10px;border-top:1px solid var(--hairline);font-size:.875rem}
.rc-keep b{color:var(--navy)}
.rc-bar{grid-column:1 / -1;height:8px;border-radius:var(--pill);background:var(--sand);overflow:hidden}
.rc-bar span{display:block;height:100%;border-radius:var(--pill);background:var(--blue);transform-origin:left center}
.rc-run{grid-column:1 / -1;font-size:.8125rem;color:var(--muted)}
/* The collage: photo cards behind the tile, doodles, chips and the sticker
in front of it. Placed in % of the stage so it scales with it. */
.collage{position:absolute;inset:0;pointer-events:none}
.collage--back{z-index:1}
.collage--front{z-index:3}
.cl{position:absolute;display:block;overflow:hidden;border-radius:18px;background:var(--surface);border:6px solid var(--surface);box-shadow:var(--lift)}
.cl picture{height:100%}
.cl img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.cl--a{top:0;left:0;width:30%;aspect-ratio:4/5;rotate:-8deg}
.cl--b{top:8%;right:0;width:26%;aspect-ratio:1;rotate:7deg}
.cl--c{bottom:13%;right:-3%;width:27%;aspect-ratio:4/5;rotate:9deg;opacity:.82}
.cl--d{bottom:27%;left:-2%;width:22%;aspect-ratio:1;rotate:-12deg;opacity:.66}
.doodle{position:absolute;display:block;pointer-events:none}
.doodle svg{display:block;width:100%;height:auto;overflow:visible}
.doodle path{stroke-dasharray:1;stroke-dashoffset:0}
.cl-burst{top:0;left:31%;width:58px;color:var(--tan)}
.cl-loop{bottom:3%;right:4%;width:118px;color:var(--sky)}
.cl-strokes{top:58%;left:10%;width:60px;color:var(--brown)}
.sticker{position:absolute;top:-2%;right:20%;display:block;width:104px;height:104px}
.sticker svg{display:block;width:100%;height:100%;overflow:visible}
.sticker-disc{fill:var(--tan)}
.sticker-core{fill:var(--parchment)}
.sticker-text{font:700 10px/1 var(--text);letter-spacing:.04em;fill:var(--navy)}
.float-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--lift);font:600 .8125rem/1.2 var(--text);color:var(--navy);white-space:nowrap}
.float-chip .icon{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--sand)}
.fc-a{top:38%;left:-4%}
.fc-b{top:70%;right:-6%}
@media (max-width:959px){
.hero-art{max-width:470px;padding:28px 0 150px}
.hero-tile{width:min(72%,340px)}
.cl--b,.cl--d,.cl-loop,.fc-b{display:none}
.cl--a{width:28%}
.cl--c{width:26%;bottom:22%}
.sticker{width:84px;height:84px;right:8%}
.fc-a{top:44%;left:-2%}
.release-card{left:4%;width:92%}
}
@media (max-width:519px){.fc-a,.cl-strokes{display:none}}
/* The accent word's hand-drawn underline. */
.swash{position:relative;display:inline-block}
.swash-line{position:absolute;left:-3%;bottom:-.14em;width:106%;height:auto;overflow:visible;fill:none;stroke:var(--tan);stroke-width:5;stroke-linecap:round}
.swash-line path{stroke-dasharray:1;stroke-dashoffset:0}
/* Load: the collage settles in, doodles draw on, once. The tile and the
photo don't animate (the largest paint stays immediate). */
@keyframes settle{from{opacity:0;scale:.86;translate:0 18px}}
@keyframes draw{from{stroke-dashoffset:1}}
.hero-art [data-depth]{animation:settle .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 90ms + 150ms)}
.hero-art .doodle path{animation:draw 1.1s ease-out backwards;animation-delay:calc(var(--i,0) * 90ms + 500ms)}
.swash-line path{animation:draw .9s ease-out .6s backwards}
/* The one explanatory motion: the run bar fills to 18 of 24, showing the rule. */
@keyframes fill{from{transform:scaleX(0)}}
.hero-art .rc-bar span{animation:fill 1s cubic-bezier(.2,.7,.2,1) 1.3s backwards}
/* Who it's for, as a moving strip once site.js has wired its pause button
(a still, wrapped list before that and for reduced motion). */
.ticker{display:flex;align-items:center;gap:14px 20px;padding-block:18px;border-block:1px solid var(--hairline)}
.ticker .label{flex:none;color:var(--muted)}
.ticker-window{flex:1;min-width:0;overflow:hidden}
.ticker-track{display:flex;flex-wrap:wrap;gap:8px 0;margin:0;padding:0;list-style:none}
.ticker-track > li{margin-right:8px}
.ticker-track > [aria-hidden="true"]{display:none}
.ticker.is-live .ticker-track{flex-wrap:nowrap;width:max-content;animation:ticker 48s linear infinite}
.ticker.is-live .ticker-track > [aria-hidden="true"]{display:inline-flex}
.ticker.is-live:hover .ticker-track,.ticker.is-live:focus-within .ticker-track,.ticker.is-paused .ticker-track{animation-play-state:paused}
@keyframes ticker{to{translate:-50% 0}}
.ticker-toggle{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy);cursor:pointer}
.ticker-toggle:hover{background:var(--sand)}
.ticker-toggle .icon{width:18px;height:18px}
.ticker-toggle .i-play,.ticker-toggle[aria-pressed="true"] .i-pause{display:none}
.ticker-toggle[aria-pressed="true"] .i-play{display:block}
@media (max-width:519px){.ticker .label{display:none}}
/* Section doodles: a mark peeking from behind a grid's corner. */
.doodled{position:relative}
.doodled > :not(.doodle){position:relative;z-index:1}
.section-doodle{z-index:0}
.section-doodle--burst{top:-30px;left:-26px;width:80px;color:var(--tan)}
.section-doodle--loop{right:-6px;bottom:-44px;width:120px;color:var(--sky)}
.section-doodle--strokes{top:-24px;right:-12px;width:66px;color:var(--brown);z-index:2}
@media (max-width:719px){.section-doodle--burst{left:-10px;width:60px}.section-doodle--strokes{right:-4px;width:52px}}
main{overflow-x:clip}
/* Appear: cards rise into place the first time they scroll into view
(site.js adds .motion and .is-in; without it everything simply shows). */
.motion [data-appear]{transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
.motion [data-appear]:not(.is-in){opacity:0;translate:0 26px}
.motion .doodle[data-appear] path{transition:stroke-dashoffset 1.2s ease .25s}
.motion .doodle[data-appear]:not(.is-in) path{stroke-dashoffset:1}
@media print{.motion [data-appear]{opacity:1!important;translate:none!important}}
@media (prefers-reduced-motion:reduce){
.hero-art [data-depth],.hero-art .doodle path,.hero-art .rc-bar span,.swash-line path,.ticker-track{animation:none!important}
.motion [data-appear]:not(.is-in){opacity:1;translate:none}
.motion .doodle[data-appear]:not(.is-in) path{stroke-dashoffset:0}
}
/* Use-case tiles: one colour each, rotating. */
.uses{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));padding:0;list-style:none}
.use{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden}
.use img{width:100%;aspect-ratio:4/3;object-fit:cover}
.use-body{display:grid;gap:10px;align-content:start;flex:1;padding:22px 24px 26px}
.use h3{font-size:1.5rem;color:inherit}
.use p{font-size:.9375rem}
.use .text-link{color:inherit;margin-top:4px}
.use--tan{background:var(--tan);color:var(--ink)}
.use--sky{background:var(--sky);color:var(--ink)}
.use--navy{background:var(--navy);color:var(--parchment)}
.use--sand{background:var(--sand);color:var(--ink)}
.use--tan h3,.use--sky h3,.use--sand h3{color:var(--navy)}
/* Steps: an editorial list with coloured numbers. */
.steps{display:grid;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 20px;align-items:start;padding:24px 0;border-bottom:1px solid var(--hairline)}
@media (min-width:900px){.step{grid-template-columns:76px minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:center}}
.step-num{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;font:700 1.75rem/1 var(--display);color:var(--navy);background:var(--tan)}
.step:nth-child(4n+2) .step-num{background:var(--sky)}
.step:nth-child(4n+3) .step-num{background:var(--blue);color:var(--surface)}
.step:nth-child(4n+4) .step-num{background:var(--navy);color:var(--parchment)}
.step h3{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem)}
.step p{grid-column:2;color:var(--muted)}
@media (min-width:900px){.step p{grid-column:auto}}
/* The rule block: a navy tile with big numbers. */
.rule{display:grid;gap:32px}
@media (min-width:960px){.rule{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}}
.rule p{margin-top:18px;max-width:52ch;color:var(--on-dark)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;padding:0;list-style:none}
.stats li{padding:20px 0 4px;border-top:1px solid rgba(245,238,223,.24)}
.stat-figure{display:block;font:700 clamp(2.5rem,1.9rem + 2.4vw,3.75rem)/1 var(--display);letter-spacing:-.025em;color:var(--parchment)}
.stat-label{display:block;margin-top:8px;font:600 .75rem/1.35 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark)}
/* Real work, in colour. */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;list-style:none}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery li{border-radius:var(--r-lg);overflow:hidden;background:var(--sand)}
.gallery img{width:100%}
/* Proof: the shop's Google rating, reviews, contact. */
.proof{display:grid;gap:20px}
@media (min-width:960px){.proof{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:stretch}}
.score{display:grid;gap:14px;align-content:start}
.score-figure{font:700 clamp(4rem,3rem + 4vw,6rem)/.95 var(--display);letter-spacing:-.03em;color:var(--navy)}
.score .stars{display:inline-flex;gap:4px;color:var(--brown)}
.score .stars .icon{width:26px;height:26px}
.quotes{display:grid;gap:14px;padding:0;list-style:none}
.quote blockquote{margin:0;font:500 1.1875rem/1.5 var(--display);color:var(--navy)}
.quote figure{margin:0}
.quote figcaption{margin-top:12px;font-size:.875rem;color:var(--muted)}
.proof-text{margin:12px 0 22px;color:var(--muted)}
.product-note{margin:0 0 28px}
.product-group + .product-group{margin-top:48px}
.product-group h2{margin-bottom:16px}
.checklist{display:grid;gap:14px;padding:0;list-style:none}
.checklist li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.checklist .icon{width:22px;height:22px;color:var(--blue);margin-top:1px}
.checklist b{display:block;font-weight:600;color:var(--navy)}
.checklist small{display:block;margin-top:2px;font-size:.9375rem;color:var(--muted)}
.on-dark .checklist .icon{color:var(--tan)}
.on-dark .checklist b{color:var(--parchment)}
.on-dark .checklist small{color:var(--on-dark)}
.on-dark .checklist a{color:var(--parchment)}
/* Features: small cards with a blue icon. */
.features{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));padding:0;list-style:none}
.feature{display:grid;gap:10px;align-content:start}
.feature .icon{width:30px;height:30px;color:var(--blue)}
.feature p{color:var(--muted);font-size:.9375rem}
/* Split: a photo beside copy. */
.split{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.photo{margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--sand)}
.photo img{width:100%;height:100%;object-fit:cover}
/* Columns of cards. */
.cols{display:grid;gap:18px}
@media (min-width:860px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.col{display:grid;gap:12px;align-content:start}
.col > .icon{width:32px;height:32px;color:var(--blue)}
.dot-list{display:grid;gap:8px;margin-top:6px;padding:0;list-style:none}
.dot-list li{position:relative;padding-left:22px}
.dot-list li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--brown)}
/* Tables: rounded, hairlined. */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--hairline);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.9375rem;font-variant-numeric:tabular-nums}
.table th,.table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
.table thead th{background:var(--parchment);font:600 .75rem/1.3 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.table tbody th{font-weight:600;color:var(--navy)}
.table tbody tr:last-child :is(th,td){border-bottom:0}
.table .num{text-align:right}
.compare :is(td,th):first-child{width:28%}
/* FAQ. */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;cursor:pointer;list-style:none;font:600 clamp(1.125rem,1.05rem + .4vw,1.3125rem)/1.3 var(--display);color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{width:22px;height:22px;color:var(--blue)}
.faq .i-minus{display:none}
.faq details[open] .i-plus{display:none}
.faq details[open] .i-minus{display:block}
.faq .answer{padding:0 0 24px;max-width:64ch}
.faq .answer p + p{margin-top:12px}
.faq-group + .faq-group{margin-top:48px}
.faq-group h2{margin-bottom:16px}
/* Page hero (inner pages). */
.page-hero{padding-block:clamp(32px,5vw,72px) clamp(32px,4vw,56px)}
.page-hero .lead{margin-top:20px}
/* Closing: the navy tile, the tan button. */
.closing{display:grid;gap:28px;padding:clamp(32px,5vw,64px)}
@media (min-width:960px){.closing{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:48px}}
.closing p{margin-top:16px;max-width:48ch;color:var(--on-dark)}
.closing .cta-row{margin-top:0}
/* Footer: parchment over a hairline. */
.site-footer{border-top:1px solid var(--hairline);padding-block:56px 28px}
.footer-grid{display:grid;gap:32px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.footer-grid{grid-template-columns:1.5fr repeat(3,minmax(0,1fr))}}
.footer-about{grid-column:1 / -1}
@media (min-width:900px){.footer-about{grid-column:auto}}
.footer-about p{margin-top:14px;max-width:30em;color:var(--muted)}
.site-footer h2{font:600 .75rem/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.site-footer ul{display:grid;gap:8px;margin-top:14px;padding:0;list-style:none}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover{color:var(--navy);text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:44px;padding-top:20px;border-top:1px solid var(--hairline);font-size:.875rem;color:var(--muted)}
.footer-minimal{padding-top:28px}
.footer-minimal .footer-bottom{margin-top:0;border-top:0;padding-top:0}
/* Phone sticky CTA (paid page). */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:var(--parchment);border-top:1px solid var(--hairline)}
.sticky-cta .btn{flex:none}
.sticky-cta small{font-size:.8125rem;color:var(--muted)}
.sticky-cta[hidden]{display:none}
@media (max-width:959px){.has-sticky{padding-bottom:92px}}
@media (min-width:960px){.sticky-cta{display:none!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
/* Header: the services menu is a <details> (works without JS; site.js closes
it on outside click and Escape). */
.nav-menu{position:relative}
.nav-menu > summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;border-radius:var(--pill);color:var(--navy);font:500 .9375rem/1 var(--text);cursor:pointer;list-style:none}
.nav-menu > summary::-webkit-details-marker{display:none}
.nav-menu > summary .icon{width:14px;height:14px;transition:rotate 160ms ease}
.nav-menu[open] > summary .icon{rotate:180deg}
.nav-menu > summary:hover,.nav-menu[open] > summary{background:var(--sand)}
.nav-menu[data-current] > summary{background:var(--navy);color:var(--parchment)}
.nav-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:60;display:grid;gap:2px;min-width:290px;padding:10px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--lift)}
.nav-panel a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--navy);font:500 .9375rem/1.2 var(--text);text-decoration:none}
.nav-panel a .icon{width:20px;height:20px;color:var(--blue)}
.nav-panel a:hover{background:var(--sand)}
.nav-panel a[aria-current="page"]{background:var(--sand);font-weight:600}
.header-phone{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--pill);color:var(--navy);font:600 .9375rem/1 var(--text);text-decoration:none}
.header-phone .icon{width:18px;height:18px;color:var(--blue)}
.header-phone:hover{background:var(--sand);color:var(--navy)}
@media (min-width:1180px){.header-phone{display:inline-flex}}
.header-call{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy)}
.header-call .icon{width:20px;height:20px}
@media (min-width:960px){.header-call{display:none}}
.site-menu .menu-group{padding:18px 0 6px;color:var(--muted)}
.site-menu .menu-sub{display:flex;align-items:center;gap:12px;min-height:50px;border-bottom:1px solid var(--hairline);color:var(--navy);font:600 1.0625rem/1.2 var(--text);text-decoration:none}
.site-menu .menu-sub .icon{width:20px;height:20px;color:var(--blue)}
/* The local proof strip under a hero: rating, address, hours, call/text. */
.local-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:16px 0;border-block:1px solid var(--hairline);font-size:.9375rem;color:var(--ink)}
.local-strip > *{display:inline-flex;align-items:center;gap:8px}
.local-strip .icon{width:18px;height:18px;color:var(--blue)}
.local-strip a{color:var(--navy);font-weight:600;text-decoration:none}
.local-strip a:hover{text-decoration:underline}
.local-strip .rating{font-weight:400}
/* Hero order card (in place of the Studio's release card). */
.order-card{position:absolute;z-index:4;left:0;bottom:6px;width:min(88%,350px);rotate:-2deg;display:grid;gap:10px;border-radius:18px;background:var(--surface);color:var(--ink);padding:16px 18px;box-shadow:var(--lift)}
.order-card .oc-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 1.0625rem/1.2 var(--display);color:var(--navy)}
.order-card ol{display:grid;gap:8px;margin:0;padding:0;list-style:none;font-size:.875rem}
.order-card li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.order-card li .icon{width:20px;height:20px;color:var(--blue)}
.order-card li b{color:var(--navy);font-weight:600}
@media (max-width:959px){.order-card{left:4%;width:92%}}
/* Page heroes with a photo (services, local pages). */
.page-hero .hero-grid{align-items:center}
.page-hero .eyebrow{margin-bottom:14px;color:var(--brown)}
.hero-photo-card{margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--sand);box-shadow:var(--lift);aspect-ratio:4/3}
.hero-photo-card picture,.hero-photo-card img{width:100%;height:100%;object-fit:cover}
.hero-photo-card figcaption{padding:10px 14px;font-size:.8125rem;color:var(--muted);background:var(--surface)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none;font-size:.875rem;color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:6px;color:var(--hairline)}
.crumbs a{color:var(--muted)}
/* Migrated page content. */
.prose{max-width:72ch}
.prose--wide{max-width:none}
.prose > * + *{margin-top:16px}
.prose h2{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.625rem);line-height:1.08;margin-top:8px}
.prose h3{font-size:1.375rem;line-height:1.2;margin-top:28px}
.prose h4{font-size:1.125rem;margin-top:22px}
.prose p,.prose li{color:var(--ink)}
.prose ul,.prose ol{display:grid;gap:8px;padding-left:22px}
.prose ul li::marker{color:var(--brown)}
.prose .kicker,.kicker{font:600 .75rem/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--brown)}
.prose .kicker + h2,.prose .kicker + h3{margin-top:8px}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 0 0 1px var(--hairline)}
.prose th,.prose td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
.prose thead th{background:var(--parchment);font:600 .75rem/1.3 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.prose tbody tr:last-child :is(th,td){border-bottom:0}
.prose .table-scroll{overflow-x:auto}
.card-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:24px}
.card-grid article{display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--hairline)}
.section--sand .card-grid article{background:var(--parchment)}
.card-grid article h3,.card-grid article h4{margin:0;font-size:1.25rem}
.card-grid article p{color:var(--muted);font-size:.9375rem}
.card-grid article:nth-child(4n+1){border-top:4px solid var(--tan)}
.card-grid article:nth-child(4n+2){border-top:4px solid var(--sky)}
.card-grid article:nth-child(4n+3){border-top:4px solid var(--blue)}
.card-grid article:nth-child(4n+4){border-top:4px solid var(--navy)}
.img-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:24px}
.img-grid img{width:100%;border-radius:var(--r-lg)}
.block-split{display:grid;gap:36px;align-items:start}
@media (min-width:960px){.block-split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px}}
.aside-stack{display:grid;gap:16px}
/* Service tiles (home): one colour each, rotating; icon, name, line, link. */
.service-tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:0;list-style:none}
.service-tiles > li{display:contents}
.service-tile{display:grid;gap:10px;align-content:start;min-height:210px;padding:24px;border-radius:var(--r-lg);text-decoration:none;color:var(--ink);transition:translate 160ms ease,box-shadow 160ms ease}
.service-tile:hover{translate:0 -3px;box-shadow:var(--lift);color:var(--ink)}
.service-tile .icon{width:34px;height:34px;color:var(--navy)}
.service-tile h3{font-size:1.5rem;color:var(--navy)}
.service-tile p{font-size:.9375rem}
.service-tile .text-link{margin-top:auto;color:var(--navy)}
.service-tile:nth-child(4n+1){background:var(--tan)}
.service-tile:nth-child(4n+2){background:var(--sky)}
.service-tile:nth-child(4n+3){background:var(--sand)}
.service-tile:nth-child(4n+4){background:var(--navy);color:var(--parchment)}
.service-tile:nth-child(4n+4) :is(h3,.icon,.text-link){color:var(--parchment)}
.service-tile:nth-child(4n+4):hover{color:var(--parchment)}
/* Quote band: the embedded quote form on a surface card beside what happens next. */
.quote-band{display:grid;gap:28px}
@media (min-width:1020px){.quote-band{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}}
.quote-frame{border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--lift);overflow:hidden}
.quote-frame iframe{display:block;width:100%;height:760px;border:0}
@media (max-width:767px){.quote-frame iframe{height:680px}}
.quote-next{display:grid;gap:18px;align-content:start}
.quote-next .checklist{margin-top:6px}
.quote-alt{padding:18px 20px;border-radius:var(--r-lg);background:var(--sand)}
.quote-alt b{display:block;color:var(--navy)}
.quote-alt a{font-weight:600}
/* Reviews: real Google reviews the owner published, with source and date. */
/* Areas: local pages as pill links. */
.areas{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.areas a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--hairline);color:var(--navy);font:500 .9375rem/1 var(--text);text-decoration:none}
.areas a:hover{background:var(--sand)}
.areas a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--parchment)}
.area-groups{display:grid;gap:32px}
.area-groups h3{margin-bottom:14px}
/* The owner: photo, words, credentials. */
.owner{display:grid;gap:32px;align-items:center}
@media (min-width:960px){.owner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px}}
.owner .photo{aspect-ratio:4/5}
.photo picture{height:100%}
.owner .signature{width:160px;height:auto;margin-top:6px;opacity:.85}
.owner blockquote{margin:18px 0 0;font:500 1.25rem/1.5 var(--display);color:var(--navy)}
/* Gallery lightbox (a native <dialog>; site.js opens it). */
.gallery a{display:block}
.gallery a:focus-visible{outline-offset:-3px}
.lightbox{width:min(96vw,1100px);max-height:92vh;padding:0;border:0;border-radius:var(--r-lg);background:var(--ink);color:var(--parchment)}
.lightbox::backdrop{background:rgba(16,32,47,.82)}
.lightbox img{width:100%;max-height:82vh;object-fit:contain}
.lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;font-size:.875rem}
.lightbox-bar button{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--parchment);color:var(--navy);cursor:pointer}
/* Thank-you and quote pages: a narrow centred column. */
.narrow{max-width:760px;margin-inline:auto}
.next-steps{counter-reset:step;display:grid;gap:14px;padding:0;list-style:none}
.next-steps li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.next-steps li::before{content:counter(step);display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--tan);color:var(--navy);font:700 1.25rem/1 var(--display)}
.next-steps b{display:block;color:var(--navy)}
/* The quick-answer callout (comparison and hub pages). */
.callout{padding:22px 26px;border-radius:var(--r-lg);background:var(--sky);color:var(--ink)}
.callout p{font-size:1.0625rem}
/* Spacing: about a third less, and no doubled gap where two neighbouring
sections share a ground. */
:root{--section:clamp(40px,5vw,72px)}
.section--tight{padding-block:clamp(14px,2.2vw,24px)}
.section--tight + .section--tight{padding-top:0}
.section:not(.section--sand) + .section:not(.section--sand),.section--sand + .section--sand{padding-top:0}
.hero{padding-block:clamp(20px,3.5vw,44px) clamp(28px,4vw,56px)}
.page-hero{padding-block:clamp(22px,3.5vw,44px) clamp(18px,2.5vw,32px)}
.section-head{margin-bottom:clamp(20px,2.8vw,36px)}
.closing{padding:clamp(28px,4vw,52px)}
.step{padding:18px 0}
.faq summary{padding:18px 0}
.faq .answer{padding-bottom:18px}
.hero-art{padding:32px 0 84px}
@media (max-width:959px){.hero-art{padding:24px 0 132px}}
/* Photos keep their own proportions: no forced aspect ratios or cover-crops
(the decorative collage cards included). */
.hero-photo,.hero-photo-card,.owner .photo,.photo,.cl{aspect-ratio:auto!important}
.hero-photo picture,.hero-photo-card picture,.photo picture,.cl picture{height:auto}
.hero-photo img,.hero-photo-card img,.photo img,.cl img{height:auto!important;object-fit:contain}
.gallery,.img-grid{display:block;columns:2 200px;column-gap:14px}
@media (min-width:900px){.gallery{columns:3 220px}}
.gallery li,.img-grid > *{break-inside:avoid;margin:0 0 14px}
.gallery img,.img-grid img{height:auto}
.gallery li{background:transparent}
.gallery img,.img-grid img{border-radius:var(--r-lg)}
/* The CTA band between sections. */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding:18px 24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--hairline)}
.section--sand .cta-band{background:var(--parchment)}
.cta-band p{max-width:60ch;color:var(--muted)}
.cta-band p b{color:var(--navy);font-weight:600}
.cta-band-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
@media (max-width:519px){.cta-band-actions .btn{width:100%}}
/* Header: room for "See Your Price Instantly" from laptop width down to phones. */
@media (min-width:960px) and (max-width:1179px){.site-header .brand-name{display:none}.primary-nav a,.nav-menu > summary{padding:0 11px}}
@media (max-width:659px){.site-header .brand-name{display:none}}
@media (max-width:519px){.header-cta{padding:0 14px}.menu-button{padding:0 12px}.menu-button .menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media (min-width:440px) and (max-width:519px){.header-cta .label-long{display:inline}.header-cta .label-short{display:none}}
@media (max-width:519px){.header-call{display:none}}
@media (max-width:399px){.header-call{display:none}}
@media (max-width:359px){.header-cta{display:inline-flex}.brand-mark{display:none}}
.sticky-cta .btn{flex:1}
/* The lead offer tile: tan colour block, offer left, two items, one action. */
.offer{display:grid;gap:18px 32px;align-items:center;padding:clamp(22px,3vw,32px);border-radius:var(--r-lg);background:var(--tan);color:var(--ink)}
@media (min-width:960px){.offer{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto}}
.offer .kicker{color:var(--navy)}
.offer h2{margin:6px 0 8px}
.offer h2 .accent{color:var(--navy)}
.offer-main p:last-child{max-width:52ch}
.offer-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.offer-list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.offer-list .icon{width:26px;height:26px;color:var(--navy)}
.offer-list b{display:block;color:var(--navy)}
.offer-list small{display:block;font-size:.875rem}
.offer-cta .btn{white-space:normal}
.offer-flag{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:7px 14px 7px 8px;border-radius:var(--pill);background:var(--tan);color:var(--navy);font:600 .875rem/1.2 var(--text)}
.offer-flag .icon{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--parchment)}
/* Reviews ticker: two offset rows drifting in opposite directions. */
.reviews-block{display:grid;gap:24px}
.reviews-head{display:grid;justify-items:center;gap:12px;text-align:center}
.reviews-head .muted{max-width:56ch}
.rating-line{display:inline-flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);font-size:.9375rem;text-decoration:none}
.rating-line .stars{display:inline-flex;gap:4px;color:var(--brown)}
.rating-line .stars .icon{width:20px;height:20px}
.rating-line b{color:var(--navy);font-weight:600}
a.rating-line:hover{text-decoration:underline;color:var(--navy)}
.rt{position:relative;display:grid;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rt-row{overflow-x:auto;scrollbar-width:none;padding-block:2px}
.rt-row::-webkit-scrollbar{display:none}
.rt-track{display:flex;gap:16px;width:max-content;margin:0;padding:0 16px 0 0;list-style:none}
.rt-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;width:min(80vw,360px);flex:none;padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--hairline)}
.section--sand .rt-card{background:var(--parchment)}
.rt-av{width:44px;height:44px;border-radius:50%;object-fit:cover}
img.rt-av{background:var(--sand)}
span.rt-av{display:grid;place-items:center;color:#fff;font:600 1.125rem/1 var(--text)}
.rt-av--t0{background:var(--blue)}
.rt-av--t1{background:var(--brown)}
.rt-av--t2{background:var(--navy)}
.rt-body{display:grid;gap:12px;min-width:0}
.rt-text{margin:0;min-height:4.5em;font-size:.9375rem;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rt-foot{display:flex;align-items:center;gap:10px;margin:0;font-size:.875rem;line-height:1.3}
.rt-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:700}
.rt-g{flex:none;width:20px;height:20px;margin-left:auto}
.rt-src{flex:none;display:inline-flex;margin:-4px -4px -4px auto;padding:4px;border-radius:50%}
.rt-src .rt-g{margin-left:0}
.rt-src:hover{background:var(--parchment)}
.rt-src:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.rt:not(.is-live) .rt-card[aria-hidden="true"]{display:none}
.rt:not(.is-live){-webkit-mask-image:none;mask-image:none}
.rt.is-live .rt-row{overflow:hidden}
.rt.is-live .rt-track{animation:rt-scroll var(--rt-dur,48s) linear infinite}
.rt.is-live .rt-row--b .rt-track{animation-direction:reverse;margin-left:-188px}
.rt.is-live:hover .rt-track,.rt.is-live:focus-within .rt-track,.rt.is-paused .rt-track{animation-play-state:paused}
.rt.is-live .rt-row:focus-within .rt-track{animation:none}
@keyframes rt-scroll{to{transform:translateX(-50%)}}
.rt-toggle{justify-self:center}
.rt-stars{display:none}
.rt--rated .rt-stars{display:inline-flex;flex:none;gap:1px;color:var(--brown)}
.rt-stars .icon{width:12px;height:12px}
.rt-note{margin:0;text-align:center;font-size:.8125rem;color:var(--muted)}
.rt-maps{color:#5e5e5e;font-weight:400;white-space:nowrap}
.reviews-actions{justify-content:center;align-items:center;margin-top:0}
@media (prefers-reduced-motion:reduce){.rt-track{animation:none!important}}
.ways{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ways .checklist{margin-bottom:22px}