/* ═══════════════════════════════════════════════════════════════════════════
   BAKERY ON O'CONNELL
   Direction 03 "Rows" carried across a four page site, with direction 01's
   shopfront photograph as the hero.

   Every menu item and price on this site is transcribed from the bakery's own
   printed menu boards. Nothing is invented.

   One stylesheet serves all four pages. Sections are in the order a visitor
   needs them: what it is, when it is open, where it is, then the food.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bricolage Grotesque';src:url('fonts/BricolageGrotesque.woff2') format('woff2');
  font-weight:300 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Work Sans';src:url('fonts/WorkSans.woff2') format('woff2');
  font-weight:300 800;font-style:normal;font-display:swap;}

:root{
  --ink:#1C1614;        /* the warm brown ground */
  --ink-2:#151110;      /* darker band: marquee, footer, top bar when stuck */
  --warm:#241C18;       /* the one ground shift, used once per page */
  --cream:#F3ECE2;
  --muted:#ACA298;      /* 7.0:1 on the ground */
  --red:#D2452B;        /* headings and large type */
  --red-deep:#B33520;   /* fills that carry text, white on this clears AA */
  --red-lite:#F26A50;   /* small labels, clears AA where --red does not */
  --rule:rgba(243,236,226,.15);
  --gut:clamp(20px,5vw,72px);
  --maxw:1320px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:clamp(16px,1.05vw,17.5px);line-height:1.65;
  overflow-x:hidden;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3{margin:0;font-family:'Bricolage Grotesque',Georgia,serif;font-weight:400;}
p{margin:0 0 1em;}
a{color:inherit;}
a:focus-visible{outline:3px solid var(--red-lite);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--cream);color:var(--ink);
  padding:12px 18px;z-index:200;font-weight:700;}
.skip:focus{left:8px;top:8px;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ═══ TOP BAR ═══════════════════════════════════════════════════════════════
   Fixed, so the phone number follows you down every page. Transparent over the
   hero photograph, solid once you scroll past it. */
.pagetop{position:fixed;top:0;left:0;right:0;z-index:60;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  transition:background-color .3s ease;}
.pagetop.is-stuck{background:var(--ink-2);border-bottom:1px solid var(--rule);}
.pagetop.is-stuck .ticker{display:none;}
.pagetop.is-stuck .topbar{border-bottom:0;padding-top:9px;padding-bottom:9px;}
.pagetop.is-stuck .brand img{width:46px;height:46px;}
[id]{scroll-margin-top:96px;}

.ticker{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 30px;margin:0;
  background:rgba(21,17,16,.55);padding:10px var(--gut);
  font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--cream);}
.ticker-open{color:var(--red-lite);}

.topbar{display:flex;align-items:center;gap:30px;padding:14px var(--gut);
  border-bottom:1px solid rgba(243,236,226,.16);}
.brand{margin-right:auto;display:block;}
.brand img{width:60px;height:60px;object-fit:contain;
  transition:width .3s ease,height .3s ease;}
.nav{display:flex;gap:26px;}
.nav a{text-decoration:none;font-size:14.5px;color:var(--cream);transition:color .25s ease;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--red-lite);}
.topcall{text-decoration:none;font-weight:600;font-size:15px;color:#fff;
  background:var(--red-deep);padding:12px 20px;border-radius:2px;
  font-variant-numeric:tabular-nums;transition:background-color .25s ease;}
.topcall:hover{background:var(--red);}
@media (max-width:1080px){.nav{display:none;}}

/* ═══ HERO ══════════════════════════════════════════════════════════════════
   Full screen photograph, type centred over it. */
.hero{position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;min-height:100vh;min-height:100svh;overflow:hidden;}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 44%;}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,17,16,.80) 0%,rgba(21,17,16,.52) 34%,
    rgba(21,17,16,.62) 62%,rgba(21,17,16,.92) 100%);}
.hero-inner{position:relative;z-index:2;padding:130px var(--gut) 0;max-width:920px;}
.kicker{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--red-lite);font-weight:600;margin:0 0 16px;}
.hero h1{font-size:clamp(40px,5.6vw,84px);line-height:1.02;letter-spacing:-1px;margin:0 0 18px;}
.hero h1 em{font-style:normal;color:var(--red-lite);}
.hero-sub{font-size:clamp(16.5px,1.35vw,20px);max-width:52ch;margin:0 auto 26px;}

/* Shorter banner for the inner pages, so they are not four identical
   full-screen photographs in a row. */
.banner{position:relative;display:flex;align-items:flex-end;
  min-height:clamp(340px,46vh,460px);overflow:hidden;}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.banner::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,17,16,.80) 0%,rgba(21,17,16,.36) 44%,
    rgba(21,17,16,.94) 100%);}
.banner-inner{position:relative;z-index:2;padding:0 var(--gut) clamp(30px,4vw,52px);
  max-width:var(--maxw);margin:0 auto;width:100%;}
.banner h1{font-size:clamp(34px,4.8vw,68px);line-height:1.04;letter-spacing:-.8px;margin:0 0 10px;}
.banner p{color:var(--cream);max-width:56ch;margin:0;font-size:17px;}

.btn{display:inline-block;text-decoration:none;background:var(--red-deep);color:#fff;
  font-weight:600;font-size:15px;padding:15px 28px;border-radius:2px;
  border:2px solid var(--red-deep);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;}
.btn:hover{background:var(--red);border-color:var(--red);}
.btn-ghost{background:transparent;color:var(--cream);border-color:rgba(243,236,226,.45);}
.btn-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}

@media (prefers-reduced-motion:no-preference){
  .kicker,.hero h1,.hero-sub,.hero .btn{opacity:0;transform:translateY(16px);
    animation:rise .75s cubic-bezier(.16,.84,.34,1) forwards;}
  .kicker{animation-delay:.06s;}
  .hero h1{animation-delay:.16s;}
  .hero-sub{animation-delay:.28s;}
  .hero .btn{animation-delay:.38s;}
}
@keyframes rise{to{opacity:1;transform:none;}}

/* ═══ OPEN AND WHERE ════════════════════════════════════════════════════════
   Plain type on the ground rather than a row of stat boxes. */
.band{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,4.8vw,72px) var(--gut);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,84px);
  border-bottom:1px solid var(--rule);text-align:center;}
.band-half+.band-half{border-left:1px solid var(--rule);padding-left:clamp(28px,5vw,84px);}
.band-label{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--red-lite);font-weight:600;margin:0 0 10px;}
.band-big{font-family:'Bricolage Grotesque',Georgia,serif;font-size:clamp(26px,3vw,42px);
  line-height:1.12;color:var(--cream);margin:0 0 10px;}
.band-note{color:var(--muted);margin:0 auto 12px;max-width:40ch;font-size:16px;}
.band-link{color:var(--cream);text-decoration:underline;text-underline-offset:4px;font-size:16px;}
.band-link:hover{color:var(--red-lite);}
@media (max-width:780px){
  .band{grid-template-columns:1fr;gap:26px;}
  .band-half+.band-half{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:26px;}
}

/* ═══ SECTION HEADS ═════════════════════════════════════════════════════════ */
.sec{padding:clamp(50px,6vw,88px) var(--gut);}
.sec-head{max-width:var(--maxw);margin:0 auto clamp(26px,3vw,44px);text-align:center;}
.sec-head h2{font-size:clamp(30px,3.8vw,54px);line-height:1.04;letter-spacing:-.6px;margin:0 0 12px;}
.sec-head p{color:var(--muted);max-width:56ch;margin:0 auto;font-size:17px;}

/* ═══ THE ALTERNATING ROWS ══════════════════════════════════════════════════
   Photo one side, words the other, flipping each time. Each row carries what is
   actually in that part of the cabinet, which fills the column and answers the
   question a person scanning the page has. */
.rows{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;
  gap:clamp(22px,2.8vw,42px);}
.row{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,54px);align-items:center;}
.row:nth-child(even){direction:rtl;}
.row:nth-child(even)>*{direction:ltr;}
.row img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.row-txt h3{font-size:clamp(22px,2.2vw,32px);line-height:1.06;margin:0 0 8px;}
.row-txt>p{color:var(--muted);margin:0 0 16px;max-width:44ch;font-size:16.5px;}
.row-list{list-style:none;margin:0 0 16px;padding:0;max-width:34ch;
  display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
.row-list li{font-size:15px;color:var(--cream);padding:7px 0;border-top:1px solid var(--rule);}
.row-meta{font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--red-lite);font-weight:600;margin:0;}
@media (max-width:780px){
  .row,.row:nth-child(even){grid-template-columns:1fr;direction:ltr;}
}

/* ═══ THE MARQUEE ═══════════════════════════════════════════════════════════
   Uniform tiles cropped to fill, so sizes are even and nothing is stretched.
   The gap sits on each tile as a right margin, which keeps the two duplicated
   sets exactly equal in width. That is what makes the halfway shift land on the
   start of the second set and loop without a jump. */
.marquee{background:var(--ink-2);overflow:hidden;margin:clamp(18px,2.4vw,34px) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.marquee-track{display:flex;width:max-content;will-change:transform;}
.marquee-set{display:flex;}
.marquee figure{margin:0 14px 0 0;flex:none;width:clamp(148px,14.5vw,206px);}
.marquee img{width:100%;aspect-ratio:4/5;object-fit:cover;}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:slide 64s linear infinite;}
}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-33.3333%);}}

/* ═══ KNOWN FOR ═════════════════════════════════════════════════════════════ */
.known{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(22px,3vw,48px);}
.known article{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(16px,2vw,28px);
  align-items:center;}
.known img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.known h3{font-size:clamp(20px,2vw,28px);margin:0 0 8px;}
.known p{color:var(--muted);margin:0;font-size:16px;}
@media (max-width:900px){.known{grid-template-columns:1fr;}}
@media (max-width:520px){.known article{grid-template-columns:1fr;}}

/* ═══ SPLIT (catering teaser, about, socials) ═══════════════════════════════ */
.split{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(26px,4vw,68px);align-items:center;}
.split-flip{direction:rtl;}
.split-flip>*{direction:ltr;}
.split h2{font-size:clamp(28px,3.4vw,48px);line-height:1.04;letter-spacing:-.6px;margin:0 0 14px;}
.split-txt p{color:var(--muted);max-width:46ch;}
.split-shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.split-shots img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.split-one img{width:100%;aspect-ratio:4/3;object-fit:cover;}
@media (max-width:860px){.split,.split-flip{grid-template-columns:1fr;direction:ltr;}}

.warmband{background:var(--warm);}

/* ═══ SOCIALS ═══════════════════════════════════════════════════════════════ */
.handle{font-family:'Bricolage Grotesque',Georgia,serif;color:var(--red-lite) !important;
  font-size:clamp(22px,2.4vw,34px);margin:14px 0 14px !important;}
.socials-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 !important;}
.socials-links a{text-decoration:none;font-size:14.5px;color:var(--cream);
  border:1px solid rgba(243,236,226,.32);padding:9px 16px;border-radius:2px;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;}
.socials-links a:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}
.socials-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.socials-shots img{width:100%;aspect-ratio:4/5;object-fit:cover;}

/* ═══ THE MENU BOARDS ═══════════════════════════════════════════════════════
   Transcribed from the bakery's own printed boards and set as real text rather
   than a photograph of a sign, so it is readable on a phone and findable in a
   search. Prices sit in the right margin the way a printed list sets them. */
.menu-wrap{max-width:var(--maxw);margin:0 auto;}
.menu-block{margin-bottom:clamp(40px,5vw,72px);}
.menu-block>h2{font-size:clamp(28px,3.4vw,46px);line-height:1.04;margin:0 0 6px;}
.menu-block>.menu-note{color:var(--muted);margin:0 0 24px;max-width:60ch;font-size:16px;}
.menu-cols{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(26px,4vw,60px);row-gap:clamp(26px,3vw,44px);}
@media (max-width:980px){.menu-cols{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.menu-cols{grid-template-columns:1fr;}}

.menu-group h3{font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--red-lite);font-family:'Work Sans',sans-serif;font-weight:700;
  margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--red);}
.menu-list{list-style:none;margin:0;padding:0;}
.menu-list li{padding:9px 0;border-bottom:1px solid var(--rule);}
.menu-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.menu-line b{font-weight:500;color:var(--cream);font-size:16px;}
.menu-line span{color:var(--cream);font-variant-numeric:tabular-nums;flex:none;
  font-size:15.5px;font-weight:600;}
.menu-list em{display:block;font-style:normal;color:var(--muted);font-size:14px;
  margin-top:3px;line-height:1.45;}
.menu-sub{color:var(--muted);font-size:14.5px;margin:10px 0 0;}
.menu-deal{border:1px solid var(--rule);padding:16px 18px;margin-top:14px;}
.menu-deal b{display:block;color:var(--cream);font-weight:600;margin-bottom:5px;}
.menu-deal p{margin:0;color:var(--muted);font-size:14.5px;}

/* ═══ NOTES AND FACTS ═══════════════════════════════════════════════════════ */
.notes{max-width:var(--maxw);margin:0 auto;}
.notes h2{font-size:clamp(26px,3.2vw,42px);margin:0 0 20px;}
.notes dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 clamp(20px,4vw,52px);
  border-top:1px solid var(--rule);}
.notes dt{font-size:12.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--red-lite);padding:16px 0;font-weight:600;
  border-top:1px solid var(--rule);}
.notes dd{margin:0;padding:16px 0;color:var(--muted);
  border-top:1px solid var(--rule);}
.notes dl{border-top:0;border-bottom:1px solid var(--rule);}
@media (max-width:640px){
  .notes dl{grid-template-columns:1fr;}
  .notes dt{padding-bottom:2px;border-bottom:0;}
}

/* ═══ FIND US ═══════════════════════════════════════════════════════════════ */
.find{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,68px);align-items:start;}
.find h2{font-size:clamp(28px,3.4vw,48px);line-height:1.04;margin:0 0 18px;}
.find-addr{font-size:19px;line-height:1.5;margin:0 0 8px;}
.find-line{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--red-lite);margin:0 0 14px;font-weight:600;}
.find-tel{margin:0 0 14px;}
.find-tel a{font-family:'Bricolage Grotesque',Georgia,serif;font-size:30px;color:var(--cream);
  text-decoration:none;font-variant-numeric:tabular-nums;}
.find-tel a:hover{color:var(--red-lite);}
@media (max-width:860px){.find{grid-template-columns:1fr;}}

/* ═══ FOOTER ════════════════════════════════════════════════════════════════ */
.foot{background:var(--ink-2);padding:clamp(34px,4vw,56px) var(--gut) 26px;
  padding-bottom:max(26px,env(safe-area-inset-bottom));border-top:1px solid var(--rule);}
.foot-cols{max-width:var(--maxw);margin:0 auto 22px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:24px;font-size:15px;line-height:1.6;color:var(--muted);}
.foot-cols p{margin:0;}
.foot-cols b{font-family:'Bricolage Grotesque',Georgia,serif;font-weight:400;color:var(--cream);
  font-size:19px;display:block;margin-bottom:6px;}
.foot-cols a{color:var(--cream);text-decoration:none;}
.foot-cols a:hover{color:var(--red-lite);text-decoration:underline;text-underline-offset:3px;}
.foot-nav a{display:block;padding:2px 0;}
.foot-fine{max-width:var(--maxw);margin:0 auto;font-size:13px;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:16px;}
@media (max-width:860px){.foot-cols{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr;gap:18px;}}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;transform:none;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}

/* Good to know was removed from the home page, so Find us is no longer half a
   two column grid. It keeps the left column width rather than stretching the
   phone number across the full measure. */
.find-solo{grid-template-columns:minmax(0,560px);}


/* == V8 SIGNWRITER ==========================================================
   A high contrast face needs size and air or the thin strokes disappear, so the
   headings run large and the sections breathe. Closest of the set to the
   lettering on their own hanging sign. */
.hero h1{font-size:clamp(44px,6.6vw,102px);letter-spacing:-1px;line-height:.98;}
.sec{padding:clamp(58px,7vw,110px) var(--gut);}
.sec-head h2{font-size:clamp(34px,4.8vw,70px);}
.split h2,.find h2{font-size:clamp(32px,4.2vw,60px);}
.row-txt h3{font-size:clamp(24px,2.8vw,40px);}
.band-big{font-size:clamp(30px,3.2vw,46px);}
.rows{gap:clamp(28px,3.4vw,54px);}
.btn,.topcall{border-radius:0;}

.vbadge-disabled{position:fixed;left:14px;bottom:14px;z-index:200;margin:0;
  background:var(--red-deep);color:#fff;font-family:system-ui,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  padding:7px 12px;border-radius:2px;pointer-events:none;}

/* == HERO SCRIM, REBUILT AGAINST MEASURED CONTRAST ==========================
   The first attempt put a vignette on the corners and left the centre clear,
   which is backwards: the type sits in the centre. Measured, the brightest
   tenth of the headline band was 2.6:1, below even the 3:1 large text floor.
   Three layers now, innermost first:
     1. a soft plate directly behind the type, doing most of the work
     2. a corner vignette, so the frame still closes in
     3. a vertical scrim for the top bar and the hand off to the ground below
   Re-measured after each change rather than eyeballed. */
.hero-img{filter:brightness(.72) saturate(1.04);}
.hero::after{
  background:
    radial-gradient(78% 58% at 50% 46%, rgba(21,17,16,.72) 0%, rgba(21,17,16,.52) 52%, rgba(21,17,16,0) 100%),
    radial-gradient(120% 92% at 50% 45%, rgba(21,17,16,0) 34%, rgba(21,17,16,.50) 100%),
    linear-gradient(180deg, rgba(21,17,16,.82) 0%, rgba(21,17,16,.42) 26%, rgba(21,17,16,.50) 62%, rgba(21,17,16,.95) 100%);
}


/* == RHYTHM PASS, SECOND CUT ================================================
   The neon band is gone. Catering keeps the colour break but at a much lower
   volume, the texture is dialled up so it actually reads, and the nav centres. */

/* ── texture, more obvious ──────────────────────────────────────────────────
   Two layers. A fine woven ruling, and a real noise field generated by the
   browser rather than a downloaded grain image, so it costs nothing to serve.
   Held low enough that it reads as paper stock rather than as an effect. */
body{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    repeating-linear-gradient(180deg, rgba(243,236,226,.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.030) 0 1px, transparent 1px 4px);
  background-attachment:fixed;
}

/* ── catering, dialled right down ──────────────────────────────────────────
   The bright red read as a warning band rather than an invitation. This is a
   deep oxblood, closer to the awning timber than to the accent, so it still
   breaks the brown without shouting. */
.redband{background:var(--warm);}
.redband .split-txt h2{color:#F7EFE6;}
.redband .split-txt p{color:rgba(247,239,230,.86);}
.redband .band-link{color:#F7EFE6;text-decoration-color:rgba(247,239,230,.55);}
.redband .band-link:hover{color:#fff;text-decoration-color:#fff;}
.redband .btn{background:#F7EFE6;color:#5E2317;border-color:#F7EFE6;}
.redband .btn:hover{background:transparent;color:#F7EFE6;border-color:#F7EFE6;}

/* ── centred nav ───────────────────────────────────────────────────────────
   Logo left, phone right, links pinned to the true centre of the bar rather
   than floating wherever the flex row leaves them. */
@media (min-width:1081px){
  .topbar{position:relative;}
  .nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
  .brand{margin-right:0;}
  .topcall{margin-left:auto;}
}

@font-face{font-family:'Caveat';src:url('fonts/Caveat.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;}

/* == REVIEWS ================================================================
   The score does the heavy lifting, because 4.6 from 1,534 is a number no new
   business can fake and no competitor on the street can match. The quotes are
   set as type rather than as cards, at different sizes, ruled apart. Real names,
   complete sentences, nothing trimmed mid thought. */
.reviews{max-width:var(--maxw);margin:0 auto;padding:clamp(52px,6.4vw,96px) var(--gut);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(30px,5vw,80px);
  border-top:1px solid var(--rule);}
.rev-num{font-family:'Bricolage Grotesque',Georgia,serif;font-size:clamp(64px,8vw,124px);line-height:.86;
  margin:0 0 8px;color:var(--cream);font-variant-numeric:tabular-nums;}
.rev-stars{color:var(--red-lite);font-size:19px;letter-spacing:4px;margin:0 0 10px;}
.reviews h2{font-family:'Public Sans',sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.4px;color:var(--muted);margin:0 0 14px;}
/* The one handwritten line on the site. Used once, as an aside, never as a
   system. Any more than this and it reads as a craft market stall. */
.rev-hand{font-family:'Caveat',cursive;font-size:clamp(20px,2vw,27px);line-height:1.2;
  color:var(--red-lite);margin:0;max-width:22ch;transform:rotate(-1.4deg);}

.rev-quotes blockquote{margin:0;padding:0 0 20px;border-bottom:1px solid var(--rule);}
.rev-quotes blockquote+blockquote{padding-top:20px;}
.rev-quotes p{margin:0 0 8px;color:var(--cream);}
.rev-quotes blockquote:nth-child(1) p{font-size:clamp(18px,1.7vw,23px);line-height:1.42;}
.rev-quotes blockquote:nth-child(2) p{font-size:16.5px;color:var(--muted);}
.rev-quotes blockquote:nth-child(3) p{font-size:clamp(17px,1.5vw,20px);}
.rev-quotes cite{font-style:normal;font-size:13px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);}
.rev-src{margin:18px 0 0;font-size:15px;}
.rev-src a{color:var(--cream);text-decoration:underline;text-underline-offset:4px;}
.rev-src a:hover{color:var(--red-lite);}
@media (max-width:820px){.reviews{grid-template-columns:1fr;gap:28px;}}

/* == CUSTOMER LINES, HANDWRITTEN ============================================
   Reviews without a reviews section. Two of the six rows carry one real
   published line each, in the hand face, at the foot of the column. Rows with
   no genuine matching quote get nothing rather than something invented, which
   is also why they do not all have one. */
.row-quote{
  font-family:'Caveat',cursive;font-size:clamp(19px,1.8vw,25px);line-height:1.25;
  color:var(--red-lite);margin:14px 0 0;max-width:26ch;transform:rotate(-.8deg);
}
.row-quote span{
  display:block;font-family:'Public Sans',sans-serif;font-size:11.5px;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);
  margin-top:6px;transform:rotate(.8deg);
}
/* the rating, as an aside rather than a section */
.band-hand{
  font-family:'Caveat',cursive;font-size:clamp(19px,1.9vw,26px);
  color:var(--red-lite);margin:6px 0 12px;transform:rotate(-1.2deg);
}

/* == THE FOLLOW STRIP =======================================================
   The page needed one loud colour block and catering was the wrong place for
   it, because a red band there reads as though catering is the main offer.
   A follow strip can be as loud as it likes without misleading anybody.
   Same seamless loop maths as the photo marquee: two identical sets, shifted
   by exactly half the track. */
.tickerstrip{background:var(--red-deep);overflow:hidden;padding:0;}
.ts-track{display:flex;width:max-content;will-change:transform;}
.ts-set{display:flex;align-items:center;}
.tickerstrip span{
  font-family:'Bricolage Grotesque',Georgia,serif;font-size:clamp(20px,2.2vw,32px);
  color:#fff;padding:16px 0;white-space:nowrap;
}
.tickerstrip i{font-style:normal;color:rgba(255,255,255,.55);font-size:10px;
  padding:0 clamp(18px,2.4vw,36px);}
@media (prefers-reduced-motion:no-preference){
  .ts-track{animation:tsslide 38s linear infinite;}
}
@keyframes tsslide{from{transform:translateX(0);}to{transform:translateX(-33.3333%);}}
@media (prefers-reduced-motion:reduce){.ts-track{animation:none;transform:none;}}

/* == NAV LOGO, LARGER =======================================================
   It was sitting at 60px and getting lost against the nav text. */
.brand img{width:78px;height:78px;}
.pagetop.is-stuck .brand img{width:58px;height:58px;}
@media (max-width:600px){.brand img{width:62px;height:62px;}}

/* == WHAT WE HAVE, WARMER AND TIGHTER =======================================
   The section was cream on brown the whole way down with the accent appearing
   once per row in a small line. Three changes: a red eyebrow on the section, a
   short red rule under every row heading, and the list rules warmed so the
   accent runs through the whole block rather than sitting at the bottom of it.
   The photographs also come down a size, which tightens the section by roughly
   a fifth without losing anything. */
.sec-kicker{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--red-lite);font-weight:600;margin:0 0 12px;}

.row-txt h3{position:relative;padding-bottom:14px;margin-bottom:12px;}
.row-txt h3::after{content:'';position:absolute;left:0;bottom:0;
  width:52px;height:3px;background:var(--red);}

.row-list li{border-top-color:rgba(210,69,43,.42);}
.row-meta{font-weight:700;}

/* tighter: smaller photographs, less air between rows */
.row{grid-template-columns:1fr 1fr;gap:clamp(20px,2.8vw,44px);}
.row img{aspect-ratio:3/2;}
.rows{gap:clamp(20px,2.4vw,34px);}
.row-txt>p{margin-bottom:14px;}
.row-list{margin-bottom:12px;}

/* == SPECIFICITY FIX ========================================================
   .row-txt>p and .sec-head p are element-plus-class, so they were beating the
   plain .row-meta, .row-quote and .sec-kicker classes and painting all three
   muted grey. The accent never rendered. Matching their specificity fixes it.
   Caught by reading computed colour rather than by looking at the page. */
.row-txt>p.row-meta{
  color:var(--red-lite);font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:700;font-family:'Public Sans',sans-serif;max-width:none;margin:0;
}
.row-txt>p.row-quote{
  color:var(--red-lite);font-family:'Caveat',cursive;
  font-size:clamp(19px,1.8vw,25px);line-height:1.25;max-width:26ch;
  margin:14px 0 0;text-transform:none;letter-spacing:0;
}
.sec-head>p.sec-kicker{
  color:var(--red-lite);font-size:13px;letter-spacing:1.8px;text-transform:uppercase;
  font-weight:600;margin:0 0 12px;max-width:none;
}

/* A sans carries more weight per pixel than the display serif did, so the
   headings come down a step and pick up a little weight instead of size. */
.hero h1{font-size:clamp(40px,5.4vw,80px);letter-spacing:-1.6px;font-weight:600;}
.sec-head h2,.split h2,.find h2{font-weight:600;letter-spacing:-1px;}
.row-txt h3{font-weight:600;letter-spacing:-.5px;}
.band-big{font-weight:600;letter-spacing:-.6px;}
.tickerstrip span{font-weight:600;letter-spacing:-.4px;}

/* == SOCIAL BUTTONS =========================================================
   Each carries its platform's real mark and its real colour. The colour sits in
   the glyph at rest so there is something to look at without three saturated
   blocks fighting the warm palette, then the whole button takes the brand colour
   on hover and focus. Official marks rather than a generic icon set, because a
   generic icon set is the thing that makes a footer look bought. */
.socials-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 !important;}
.soc{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:14.5px;font-weight:600;color:var(--cream);
  background:rgba(243,236,226,.05);
  border:1px solid rgba(243,236,226,.20);
  padding:10px 16px 10px 13px;border-radius:2px;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.soc svg{width:19px;height:19px;flex:none;transition:color .25s ease;}
.soc:hover,.soc:focus-visible{transform:translateY(-2px);color:#fff;}

/* the mark carries the platform colour while the button is at rest */
.soc-ig svg{color:#E1306C;}
.soc-tt svg{color:#FE2C55;}
.soc-fb svg{color:#1877F2;}

/* on hover the button becomes the platform */
.soc-ig:hover,.soc-ig:focus-visible{
  background:linear-gradient(135deg,#F58529 0%,#DD2A7B 55%,#8134AF 100%);
  border-color:transparent;}
.soc-tt:hover,.soc-tt:focus-visible{background:#111;border-color:#25F4EE;}
.soc-fb:hover,.soc-fb:focus-visible{background:#1877F2;border-color:#1877F2;}
.soc:hover svg,.soc:focus-visible svg{color:#fff;}

@media (prefers-reduced-motion:reduce){.soc{transition:none;} .soc:hover{transform:none;}}

/* == MARQUEE LOOP MATHS =====================================================
   Three identical sets, shifted by one set (-33.3333%). Two sets therefore
   always cover the screen at the loop point.
   With two sets and -50%, the shift equals the whole set width, so any viewport
   wider than one set shows blank space on the right just before it repeats.
   Our tiles are clamped, so a set is a fixed width and the failure only appears
   above about 1760px, which is why it survived every check at 1440.
   Rule: with N identical sets, animate to -(100/N)% and (N-1) x setWidth must
   exceed the widest screen you care about. */