/* ============================================================
   Your Bromley — site design system
   Colours from the master logo SVG + Business Plan 2026-31.
   Fluid throughout (clamp/vw) — no fixed max-width containers.
   ============================================================ */
:root{
  --teal:      #056269;
  --teal-deep: #124343;
  --ink:       #1D1D1B;
  --orange:    #F28F52;
  --orange-t:  #FDEADD;
  --lime:      #6DB757;
  --lime-t:    #E4F1D9;
  --cyan:      #29BADB;
  --cyan-t:    #E2F3F9;
  --leaf:      #34AF77;
  --grey:      #EDEDED;
  --grey-blue: #D1D9DC;

  --fs-hero:  clamp(2.1rem, 5.2vw, 4.8rem);
  --fs-stat:  clamp(3.2rem, 8vw, 8rem);
  --fs-h2:    clamp(1.8rem, 3.6vw, 3.2rem);
  --fs-shead: clamp(1.85rem, 3.5vw, 3.3rem); /* section headings: big, bold, no box */
  --fs-h3:    clamp(1.15rem, 1.9vw, 1.55rem);
  --fs-body:  clamp(1rem, 1.1vw, 1.15rem);
  --fs-small: clamp(.78rem, .9vw, .9rem);
  --pad-x:    clamp(1.25rem, 6vw, 7rem);
  --pad-y:    clamp(3.5rem, 7.5vw, 7.5rem);

  /* B-mark geometry echoed in UI chrome */
  --b-radius: 1.6em;          /* the letterform's outer superellipse feel */
  --chip-radius: 62.4375rem;
}
/* Fully proportional scaling: the root font-size tracks the viewport,
   and every measurement below is rem/em/vw based - so type, spacing and
   components grow and shrink together. Design reference width: 1440. */
html{font-size:max(calc(100vw / 90), 10px)} /* 100vw/90 = 16px @ 1440 */
@media(max-width:860px){html{font-size:clamp(13px, 3.9vw, 17px)}}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* never let iOS font-boost wide nowrap blocks (the marquee!) beyond the
   sizes we set — this is why the ticker kept rendering huge on iPhones */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* touch: the document itself only pans vertically — no sideways grab, no
   horizontal rubber-band. Swipe rails keep their own gesture: they're
   scroll containers, so the chain stops at them. */
html,body{touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}
body{
  font-family:'Montserrat',-apple-system,sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:#fff;
  /* clip, not hidden, and on body ONLY (never html): body's overflow
     propagates to the viewport while body itself stays visible, so
     position:sticky keeps working. An overflow value on html stops that
     propagation and turns body into its own scroll container — which
     silently kills every sticky element on the site. */
  overflow-x:clip;
}
img{max-width:100%;display:block}
/* No orphans: never leave a single word stranded on the last line. `pretty`
   pulls a word down from the line above instead; `balance` evens out the
   short line counts of headings. Both are ignored by older browsers, which
   simply wrap as before. Set here so it survives the client editing copy in
   the CMS — this can't be solved by hand-tuning individual sentences. */
body{text-wrap:pretty}
/* the hero headline ends in a word that flips on a timer — balancing it would
   re-break the lines mid-animation, so it keeps plain wrapping */
.hero h1{text-wrap:wrap}

h1,h2,h3,h4,h5{line-height:1.15}
a{color:inherit}

/* ---------- reveals ---------- */
.js .reveal{opacity:0;transform:translateY(1.875rem);transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.22,.9,.35,1) var(--d,0s)}
.js .reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ---------- shared devices ---------- */
.section{padding:var(--pad-y) var(--pad-x);position:relative}
.angle-top{clip-path:polygon(0 clamp(1.5rem,4vw,4rem), 100% 0, 100% 100%, 0 100%)}
.angle-top-r{clip-path:polygon(0 0, 100% clamp(1.5rem,4vw,4rem), 100% 100%, 0 100%)}
/* section headings — large, bold, no coloured box and no ornament. The type
   colour alone carries the theme: leaf green by default (a lift from the
   dark body text around it), the theme colour where a section has one. */
.shead{
  display:block;font-weight:800;line-height:1.04;letter-spacing:-.015em;
  font-size:var(--fs-shead);color:var(--sh,var(--leaf));
  margin-bottom:clamp(1.4rem,2.6vw,2.4rem);max-width:24ch;
  text-wrap:pretty;
}
.shead.orange{--sh:var(--orange)}
.shead.lime{--sh:var(--lime)}
.shead.cyan{--sh:var(--cyan)}
.shead.teal{--sh:var(--teal)}
.shead.light{color:#fff}
.kicker + .shead{margin-top:-.1em}

/* composed sections that must frame inside one viewport when scrolled to:
   heading near the top, content ending above the fold. Tighter vertical
   rhythm than the default section, used where heading + cards are the whole
   story (home What's On / Our Work). */
.section.fit{padding-top:clamp(3.2rem,5.5vw,5.5rem);padding-bottom:clamp(3.2rem,5.5vw,5.5rem)}
.section.fit .shead{margin-bottom:clamp(1rem,1.8vw,1.4rem)}
.section.fit .accent-par{margin-bottom:clamp(1.2rem,2vw,1.7rem)}
.section.fit .mt{margin-top:clamp(1rem,1.6vw,1.3rem)}

/* heading on the left, the route onwards on the right — the pair sits on one
   baseline on desktop and stacks on phones */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 2.5rem;flex-wrap:wrap}
.sec-head .shead{margin-bottom:clamp(.9rem,1.7vw,1.5rem)}
.sec-head .btn{margin-bottom:clamp(1.1rem,2vw,1.9rem);white-space:nowrap}
/* phones: the pair stacks, but the button reads best after the intro, not
   wedged between heading and paragraph. display:contents releases the
   heading and button into the section's own column, and negative orders pull
   heading, intro, button to the top in that sequence, ahead of the cards. */
@media(max-width:640px){
  .section:has(> .sec-head){display:flex;flex-direction:column}
  .sec-head{display:contents}
  .sec-head .shead{order:-3;margin-bottom:clamp(.8rem,2vw,1.2rem)}
  .section:has(> .sec-head) > .accent-par{order:-2}
  .sec-head .btn{order:-1;align-self:flex-start;margin:0 0 1.6rem}
}

.kicker{font-weight:800;font-size:clamp(.82rem,1vw,1rem);letter-spacing:.22em;color:var(--leaf);text-transform:uppercase;display:block;margin-bottom:.75rem}
.accent-par{
  border-left:0.25rem solid var(--teal);padding-left:1.25em;font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--teal-deep);max-width:56ch;
  margin-bottom:clamp(1.6rem,3vw,2.5rem);
}
.accent-par.orange{border-color:var(--orange)}
.accent-par.lime{border-color:var(--lime)}
.accent-par.cyan{border-color:var(--cyan)}
.note{font-size:var(--fs-small);color:#6b6b69;max-width:62ch}
.grid{display:grid;gap:clamp(1rem,2.5vw,2.5rem)}
.lead{font-weight:700;font-size:clamp(1.25rem,2.1vw,1.85rem);color:var(--teal-deep);max-width:26ch;margin-bottom:.8em}
.body-copy{max-width:64ch;margin-bottom:1em}

/* buttons — rounded like the B's outer corners, outline ring like the mark */
.btn{
  display:inline-block;background:var(--teal);color:#fff;text-decoration:none;
  font-weight:700;font-size:var(--fs-small);letter-spacing:.05em;
  padding:.95em 2.1em;border-radius:var(--chip-radius);
  border:0.125rem solid var(--teal);transition:all .25s ease;cursor:pointer;
}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);transform:translateY(-0.125rem)}
.btn.ghost{background:transparent;color:var(--teal)}
.btn.ghost:hover{background:var(--teal);color:#fff}
.btn.light{background:#fff;color:var(--teal);border-color:#fff}
.btn.light:hover{background:var(--grey);border-color:var(--grey);color:var(--teal-deep)}
.btn.orange{background:var(--orange);border-color:var(--orange)}
.btn.orange:hover{background:#e07a3c;border-color:#e07a3c}
.arrow-link{display:inline-block;font-size:var(--fs-small);font-weight:700;color:var(--teal);text-decoration:none;border-bottom:0.125rem solid var(--lime);padding-bottom:.15em;transition:padding .25s ease}
.arrow-link:hover{padding-right:.8em}

/* ---------- top nav ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(.8rem,1.6vw,1.3rem) var(--pad-x);
  pointer-events:none;
}
.topbar .brand,.topbar .burger{pointer-events:auto}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,67,67,.6),rgba(18,67,67,0));
  transition:opacity .45s ease;
}
.topbar.solid::before{opacity:0}
.topbar .brand{display:flex;align-items:center;gap:.4rem;height:clamp(2.4rem,3.2vw,3.2rem);perspective:44rem}
.topbar .brand img{height:100%;width:auto;display:block}
.topbar .brand img.wordmark{transform-origin:left center;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .4s ease;backface-visibility:hidden}
.topbar.solid .brand img.wordmark{transform:rotateX(90deg);opacity:0}
.burger{
  width:3.5rem;height:3.5rem;border-radius:50%;border:0.125rem solid rgba(255,255,255,.85);
  background:rgba(18,67,67,.35);backdrop-filter:blur(0.375rem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4375rem;
  cursor:pointer;transition:all .3s ease;
}
.burger:hover{background:var(--lime);border-color:var(--lime)}
.burger span{display:block;width:1.375rem;height:0.15625rem;background:#fff;border-radius:0.125rem;transition:transform .35s ease,opacity .3s ease}
.menu-open .burger span:nth-child(1){transform:translateY(0.3rem) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-0.3rem) rotate(-45deg)}

/* full-screen slide-out menu */
.menu{
  position:fixed;inset:0;z-index:55;background:var(--teal);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(clamp(.8rem,1.6vw,1.3rem)*2 + 3.5rem) var(--pad-x) clamp(2rem,4vw,3.5rem);
  clip-path:circle(0 at calc(100% - var(--pad-x) - 1.75rem) 3.5rem);
  transition:clip-path .65s cubic-bezier(.65,0,.35,1), visibility 0s linear .65s;
  visibility:hidden;
}
.menu-open .menu{clip-path:circle(150% at calc(100% - var(--pad-x) - 1.75rem) 3.5rem);visibility:visible;transition:clip-path .65s cubic-bezier(.65,0,.35,1)}
.menu::before{ /* B watermark */
  content:"";position:absolute;right:-6%;bottom:-12%;width:clamp(15rem,34vw,32.5rem);aspect-ratio:545/579;
  background:url("assets/logo-b-mark.svg") center/contain no-repeat;opacity:.08;pointer-events:none;
}
.menu nav{display:grid;gap:.3em;margin:0;padding:0}
.menu nav a{
  color:#fff;text-decoration:none;font-weight:800;
  font-size:clamp(1.7rem,3.4vw,3.1rem);line-height:1.45;
  display:flex;align-items:baseline;gap:.7em;width:fit-content;
  opacity:0;transform:translateX(1.75rem);transition:opacity .45s ease,transform .45s ease,color .25s ease;
}
.menu nav a.menu-extra{
  margin-top:clamp(1.2rem,2.4vw,2rem);
  background:var(--orange);color:#fff;
  font-size:clamp(.95rem,1.5vw,1.3rem);font-weight:700;
  padding:.7em 1.5em;border-radius:999rem;
  transition-delay:.48s;
}
.menu nav a.menu-extra:hover{background:#e07a3c;color:#fff;transform:translateY(-.15rem)}
.menu nav a.menu-extra i{color:#fff;background:rgba(255,255,255,.22);padding:.25em .8em;border-radius:999rem;letter-spacing:.14em;text-transform:uppercase;font-size:.68em}
.menu nav a.menu-extra span{opacity:.7}
.menu-open .menu nav a{opacity:1;transform:none}
.menu nav a:hover{color:var(--lime)}
.menu nav a i{font-style:normal;font-weight:600;font-size:var(--fs-small);letter-spacing:.2em;color:var(--lime)}
.menu nav a:nth-child(1){transition-delay:.12s}.menu nav a:nth-child(2){transition-delay:.18s}
.menu nav a:nth-child(3){transition-delay:.24s}.menu nav a:nth-child(4){transition-delay:.3s}
.menu nav a:nth-child(5){transition-delay:.36s}.menu nav a:nth-child(6){transition-delay:.42s}
.menu-foot{position:absolute;right:var(--pad-x);bottom:clamp(1.5rem,3vw,2.5rem);font-size:var(--fs-small);color:rgba(255,255,255,.8)}
.menu-foot b{color:#fff}
.menu-foot .strap{color:var(--lime);font-weight:700}

/* ---------- hero (video-ready) ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.hero.short{min-height:72svh}
.hero:not(.short){align-items:center}
.hero:not(.short) .hero-content{padding-bottom:clamp(1rem,3vh,2rem);margin-top:-6.25rem}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media picture{display:contents}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media img.kenburns{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.hero-media img.kenburns{animation:none}}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,67,67,.5) 0%,rgba(18,67,67,0) 26%),linear-gradient(90deg,rgba(18,67,67,.55) 0%,rgba(18,67,67,.28) 34%,rgba(18,67,67,0) 56%),linear-gradient(205deg,rgba(18,67,67,0) 30%,rgba(18,67,67,.38) 58%,rgba(18,67,67,.8) 100%)}
.hero-content{position:relative;z-index:2;padding:calc(clamp(.8rem,1.6vw,1.3rem)*2 + 5.25rem) var(--pad-x) clamp(4.5rem,9vh,6.5rem);width:100%}
.hero-text{max-width:min(51.25rem,100%)}
.hero h1{font-size:clamp(1.9rem,4.4vw,4.1rem);font-weight:800;max-width:21ch}
.hero .strapline{
  font-weight:800;font-size:clamp(.78rem,1vw,1rem);color:var(--lime);
  letter-spacing:.26em;margin-bottom:1em;display:inline-block;
  /* legibility over moving footage: a wide, diffuse dark halo rather than a
     tight drop shadow – felt, not seen */
  text-shadow:0 0 2.6em rgba(10,44,44,.95),0 0 1.2em rgba(10,44,44,.6),0 .1em .5em rgba(10,44,44,.35);
}
.hero .sub{font-weight:500;font-size:clamp(.95rem,1.3vw,1.2rem);max-width:46ch;margin-top:.9em;color:rgba(255,255,255,.92)}
.hero-ctas{display:flex;gap:.9em;margin-top:1.8em;flex-wrap:wrap}
.scroll-cue{
  position:absolute;bottom:clamp(1.2rem,3vh,2.2rem);left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.5em;
  font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.85);
}
.scroll-cue::after{content:"";width:0.125rem;height:2.75rem;background:linear-gradient(var(--lime),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.3);transform-origin:top}}

/* field-curves divider — the B's fields, as a section edge.
   -1px top margin: kills the sub-pixel white seam against the section above */
.fields{display:block;width:100%;height:clamp(3rem,7vw,7rem);position:relative;z-index:3;margin-top:-1px}

/* ---------- marquee ---------- */
.marquee{background:var(--teal-deep);color:#fff;overflow:hidden;white-space:nowrap;padding:.85em 0;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:var(--fs-small)}
.marquee a{color:inherit;text-decoration:none}
.marquee span{display:inline-block;animation:scroll 30s linear infinite;padding-right:2em}
.marquee em{font-style:normal;color:var(--lime);padding:0 1.6em}
.marquee:hover span{animation-play-state:paused}
.marquee a:hover{color:var(--lime)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.stat .n{font-size:var(--fs-stat);font-weight:800;line-height:1;color:var(--teal)}
.stat .bar{width:4.5em;height:0.3125rem;background:var(--teal);margin:.35em 0 .7em}
.stat p{font-weight:500;font-size:var(--fs-small);max-width:30ch}
.stat .src{display:block;margin-top:.5em;font-size:.72rem;color:#8a8a88;font-weight:400}
.stat.orange .n,{color:var(--orange)}
.stat.orange .n{color:var(--orange)}.stat.orange .bar{background:var(--orange)}
.stat.lime .n{color:var(--lime)}.stat.lime .bar{background:var(--lime)}
.stat.cyan .n{color:var(--cyan)}.stat.cyan .bar{background:var(--cyan)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13.75rem,100%),1fr));gap:clamp(1.5rem,3.5vw,3.5rem)}

/* stat-on-photo pill */
.photo-stat{position:relative;overflow:hidden;min-height:15rem}
.photo-stat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.photo-stat:hover img{transform:scale(1.05)}
.photo-stat .sp{
  position:relative;z-index:1;margin:clamp(1.2rem,15%,4rem) auto;max-width:78%;
  background:rgba(18,67,67,.84);color:#fff;text-align:center;
  padding:1em 1.5em;font-size:var(--fs-small);font-weight:500;
}
.photo-stat .sp b{font-size:2.1em;font-weight:800;display:block;line-height:1.1}

/* ---------- layered collage ---------- */
.collage{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(4rem,8.5vw,7.5rem);gap:clamp(.6rem,1.2vw,1.1rem);padding:clamp(1rem,2.5vw,2.5rem) 0}
.collage .backdrop{position:absolute;inset:8% -6vw 4% -6vw;background:var(--grey);clip-path:polygon(0 12%,100% 0,100% 88%,0 100%);z-index:0}
.collage .backdrop.orange{background:var(--orange-t)}
.collage .backdrop.lime{background:var(--lime-t)}
.collage .backdrop.cyan{background:var(--cyan-t)}
.collage figure{position:relative;overflow:hidden;z-index:1;box-shadow:0 0.875rem 2.125rem rgba(29,29,27,.16)}
.collage img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.collage figure:hover img{transform:scale(1.05)}
.collage figcaption{position:absolute;left:0;bottom:0;color:#fff;font-size:var(--fs-small);font-weight:600;background:rgba(18,67,67,.72);padding:.4em .9em}
.collage figcaption.top{bottom:auto;top:0}
.collage .chip{
  z-index:4;color:#fff;display:flex;flex-direction:column;justify-content:center;text-align:center;
  padding:1em 1.4em;box-shadow:0 1.125rem 2.5rem rgba(29,29,27,.28);background:rgba(18,67,67,.9);
  font-size:var(--fs-small);font-weight:500;
}
.collage .chip b{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:800;line-height:1}
.collage .chip.orange{background:var(--orange)}
.collage .chip.lime{background:var(--lime)}
.collage .chip.cyan{background:var(--cyan)}

/* ---------- cards ---------- */
.cards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15.625rem,100%),1fr));gap:clamp(1.2rem,2.5vw,2rem)}
/* filterable grids hold their empty columns open (auto-fill), so a filter
   that leaves one card never stretches it to the width of the container */
.cards-row[data-filterable]{grid-template-columns:repeat(auto-fill,minmax(min(15.625rem,100%),1fr))}
.card{background:#fff;box-shadow:0 0.375rem 1.375rem rgba(29,29,27,.09);transition:transform .3s ease,box-shadow .3s ease;text-decoration:none;color:var(--ink);display:block}
.card:hover{transform:translateY(-0.5rem);box-shadow:0 1.25rem 2.75rem rgba(29,29,27,.16)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card-media img{transform:scale(1.07)}
.card-tag{position:absolute;left:0;top:1em;background:var(--teal);color:#fff;font-weight:700;font-size:var(--fs-small);padding:.4em 1em}
.card-tag.orange{background:var(--orange)}.card-tag.lime{background:var(--lime)}.card-tag.cyan{background:var(--cyan)}
.card-body{padding:1.3em 1.4em 1.5em}
.card-body h5{font-size:1.05rem;font-weight:700;margin-bottom:.35em}
.card-body p{font-size:var(--fs-small);color:#6b6b69}
.card-body .arrow-link{margin-top:.9em}

/* ---------- quote ---------- */
.quote-card{background:var(--cyan-t);padding:clamp(1.5rem,2.8vw,2.4rem);position:relative;max-width:60ch}
.quote-card.orange{background:var(--orange-t)}
.quote-card.lime{background:var(--lime-t)}
.quote-card .face{width:clamp(4rem,6vw,5.5rem);aspect-ratio:1;border-radius:50%;object-fit:cover;margin-bottom:1em;box-shadow:0 .5rem 1.4rem rgba(29,29,27,.18)}
.quote-card .qm{font-size:4rem;font-weight:800;color:var(--cyan);line-height:.5;display:block;margin-bottom:.5em;opacity:.55}
.quote-card.orange .qm{color:var(--orange)}
.quote-card.lime .qm{color:var(--lime)}
.quote-card blockquote{font-weight:500;font-style:italic;margin-bottom:1.2em}
.quote-card .who{background:var(--cyan);color:#fff;display:inline-block;padding:.5em .9em;font-size:var(--fs-small)}
.quote-card.orange .who{background:var(--orange)}
.quote-card.lime .who{background:var(--lime)}
.quote-card .who b{display:block;font-size:1.05em}

/* ---------- splits ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media(max-width:860px){.split,.split.rev{grid-template-columns:1fr}}
.bullet-list{list-style:none;margin:1.2rem 0 2rem}
.bullet-list li{padding:.5em 0 .5em 1.6em;position:relative;font-size:var(--fs-small);font-weight:500;border-bottom:0.0625rem solid var(--grey)}
.bullet-list li::before{content:"";position:absolute;left:0;top:1.05em;width:.65em;height:.65em;background:var(--teal);clip-path:polygon(0 0,100% 15%,85% 100%,0 90%)}
.bullet-list.orange li::before{background:var(--orange)}
.bullet-list.lime li::before{background:var(--lime)}
.bullet-list.cyan li::before{background:var(--cyan)}

/* stacked overlapping photo pair */
.stack{position:relative;display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:clamp(3.375rem,7vw,6.25rem)}
.stack::before{content:"";position:absolute;inset:-8% -10% 10% 22%;background:var(--grey);clip-path:polygon(6% 0,100% 4%,94% 100%,0 92%);z-index:0}
.stack.orange::before{background:var(--orange-t)}
.stack.lime::before{background:var(--lime-t)}
.stack.cyan::before{background:var(--cyan-t)}
.stack figure{position:relative;overflow:hidden;z-index:1;box-shadow:0 0.875rem 2.125rem rgba(29,29,27,.18)}
.stack img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.stack figure:hover img{transform:scale(1.05)}
.stack .p1{grid-column:1/7;grid-row:1/4;transform:rotate(-1.6deg);clip-path:polygon(0 2%,100% 0,100% 100%,0 98%)}
.stack .p2{grid-column:6/11;grid-row:2/5;transform:rotate(1.4deg);z-index:2}
.stack .chip{
  grid-column:4/8;grid-row:4/5;z-index:3;background:var(--teal);color:#fff;text-align:center;
  align-self:center;height:auto;
  display:flex;flex-direction:column;justify-content:center;gap:.35em;padding:1.7em 1.5em;
  transform:rotate(-1deg);box-shadow:0 1rem 2.25rem rgba(29,29,27,.25);font-size:var(--fs-small);font-weight:600;
}
.stack .chip b{font-size:2em;font-weight:800;line-height:1}
.stack .chip.orange{background:var(--orange)}
.stack .chip.lime{background:var(--lime)}
.stack .chip.cyan{background:var(--cyan)}

/* ---------- tints / theme blocks ---------- */
.tint-block{padding:1.4em;font-size:var(--fs-small);font-weight:500;transition:transform .3s ease,box-shadow .3s ease}
/* boxes render as mailto links (Business Hub); read as cards, not hyperlinks */
a.tint-block{display:block;color:inherit;text-decoration:none}
a.tint-block *{text-decoration:none}
.tint-block:hover{transform:translateY(-0.25rem);box-shadow:0 .8rem 1.8rem rgba(29,29,27,.1)}
.tint-block b{display:block;font-size:1.1em;margin-bottom:.4em}
.tint-block.o{background:var(--orange-t)}.tint-block.o b{color:#c95f2e}
.tint-block.l{background:var(--lime-t)}.tint-block.l b{color:#4e8f3d}
.tint-block.c{background:var(--cyan-t)}.tint-block.c b{color:#1687a3}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(11.25rem,100%),1fr));gap:clamp(1.2rem,2.5vw,2rem)}
.person{text-align:left}
.person .ph{aspect-ratio:1;background:var(--grey);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2.4rem;color:var(--teal);overflow:hidden;margin-bottom:.8em}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person b{display:block;font-size:1rem}
.person span{font-size:var(--fs-small);color:#6b6b69;display:block}

/* ---------- docs / hub ---------- */
.doc-list{display:grid;gap:.8rem}
.doc{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:0.09375rem solid var(--grey);padding:1.1em 1.4em;text-decoration:none;color:var(--ink);transition:all .25s ease}
.doc:hover{border-color:var(--teal);transform:translateX(0.375rem)}
.doc b{font-size:var(--fs-small);font-weight:700}
.doc span{font-size:.72rem;color:#8a8a88;display:block}
.doc .dl{flex-shrink:0;font-weight:800;color:var(--teal);font-size:var(--fs-small)}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:1rem;max-width:35rem}
.form-grid input,.form-grid textarea,.form-grid select{
  font-family:inherit;font-size:var(--fs-small);padding:.95em 1.2em;
  border:0.09375rem solid var(--grey-blue);border-radius:calc(var(--chip-radius)/2);
  background:#fff;color:var(--ink);width:100%;
}
.form-grid textarea{border-radius:1.2em;min-height:7.5rem}
.form-grid input:focus,.form-grid textarea:focus{outline:0.125rem solid var(--lime);border-color:var(--lime)}
.newsletter-inline{display:flex;gap:.6rem;max-width:32.5rem;flex-wrap:wrap}
.newsletter-inline input{flex:1;min-width:13.75rem;font-family:inherit;font-size:var(--fs-small);padding:.95em 1.4em;border:none;border-radius:var(--chip-radius)}

/* ---------- Restaurant Week film hero ---------- */
/* The hero rendition is already cropped above the burned-in subtitles, so the
   film can sit behind the lockup. Framing is biased upward to keep Fred and
   the venues in shot when the 2.13:1 film is cover-cropped to a tall screen. */
.rw-hero .hero-media video,.rw-hero .hero-media img{object-position:50% 38%}
/* a deeper wash on the left than the standard hero: the photo's window light
   is bright, and the white logo artwork has to hold against it */
.rw-hero .hero-scrim{
  background:
    linear-gradient(180deg,rgba(10,44,44,.62) 0%,rgba(10,44,44,.12) 30%),
    linear-gradient(90deg,rgba(10,44,44,.8) 0%,rgba(10,44,44,.5) 38%,rgba(10,44,44,.05) 68%),
    linear-gradient(0deg,rgba(10,44,44,.78) 0%,rgba(10,44,44,0) 42%);
}

/* narrow frames cover-crop the film hard, showing only a centre slice –
   which parked the presenter directly under the copy. Sliding the crop
   window left seats him on the right of the frame while the text owns the
   left. Desktop keeps the centred frame: there, the lockup already clears
   him. The poster inherits the same framing. */
@media(max-width:1100px){
  .rw-hero .hero-media video,.rw-hero .hero-media img{object-position:40% 38%}
}
@media(max-width:640px){
  .rw-hero .hero-media video,.rw-hero .hero-media img{object-position:42% 38%}
}

/* the single "how it works" statement — one sentence carrying a whole band,
   so it is set as a statement rather than a paragraph */
.rwc-oneline{
  font-size:clamp(1.3rem,2.4vw,2.15rem);font-weight:700;line-height:1.25;
  max-width:24ch;color:#fff;margin-bottom:clamp(.6rem,1.2vw,1.1rem);
}
.rwc-hiw-note{font-size:var(--fs-small);color:rgba(255,255,255,.75);max-width:54ch;line-height:1.6}
/* one sentence carrying a whole band: heading left, statement right, and the
   band itself runs shallower than a full section */
.rwc-hiw{padding-top:clamp(2.6rem,5vw,4.6rem);padding-bottom:clamp(2.6rem,5vw,4.6rem)}
.rwc-hiw .wwa-head{align-items:flex-end;gap:1.5rem clamp(2rem,5vw,6rem)}
.rwc-hiw .shead{margin-bottom:clamp(.6rem,1.2vw,1.1rem)}

/* ---------- events calendar (/events) ---------- */
/* one row per event: date rail, photograph, then the detail. The rail is the
   spine of the page — it is what makes this read as a calendar rather than
   another grid of cards. */
.cal-list{display:flex;flex-direction:column}
.cal-row:first-child{border-top:0.0625rem solid var(--grey)}
.cal-row{
  display:grid;grid-template-columns:clamp(4.5rem,7vw,7rem) clamp(9rem,18vw,17rem) 1fr;
  gap:clamp(1.2rem,2.6vw,2.8rem);align-items:center;
  padding:clamp(1.2rem,2.2vw,2rem) clamp(1rem,1.8vw,1.6rem);
  margin:0 calc(-1*clamp(1rem,1.8vw,1.6rem));
  border-bottom:0.0625rem solid var(--grey);
  text-decoration:none;color:inherit;position:relative;
}
/* hover: the row holds still while a teal panel sweeps in behind it and the
   type lifts to white. The panel bleeds into the gutters (the negative
   margin above), so it reads as a full card, not a highlighted line. */
.cal-row::before{
  content:"";position:absolute;inset:0;background:var(--teal);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,.9,.35,1);
}
.cal-row>*{position:relative;z-index:1}
.cal-row .cal-when,.cal-row .cal-when span,.cal-row .cal-body b,.cal-row .cal-meta,
.cal-row .cal-meta em,.cal-row .cal-text,.cal-row .arrow-link{
  transition:color .4s ease .08s,border-color .4s ease .08s;
}
/* pointer devices only: a tap on a touch screen must never latch the sweep */
@media(hover:hover){
  .cal-row:hover::before{transform:scaleX(1)}
  .cal-row:hover .cal-when,.cal-row:hover .cal-when b{color:#fff}
  .cal-row:hover .cal-when span{color:var(--lime)}
  .cal-row:hover .cal-body b{color:#fff}
  .cal-row:hover .cal-meta{color:rgba(255,255,255,.85)}
  .cal-row:hover .cal-meta em{color:rgba(255,255,255,.45)}
  .cal-row:hover .cal-text{color:rgba(255,255,255,.78)}
  .cal-row:hover .arrow-link{color:#fff}
  .cal-row:hover .cal-tagonly{color:var(--rw-yellow,#F7C03A)!important}
}
@media(prefers-reduced-motion:reduce){.cal-row::before{transition:none}}
.cal-when{
  min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1;
  color:var(--teal);font-variant-numeric:tabular-nums;
}
.cal-when b{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;letter-spacing:-.03em}
.cal-when b.mo{font-size:clamp(1.3rem,2.2vw,2rem);letter-spacing:.02em}
.cal-when span{font-size:clamp(.78rem,.95vw,.95rem);font-weight:800;letter-spacing:.18em;color:var(--lime);margin-top:.25em}
.cal-when.past{color:var(--grey-blue)}
.cal-when.past span{color:var(--grey-blue)}
.cal-tagonly{font-size:clamp(.85rem,1.1vw,1.1rem);font-weight:800;letter-spacing:.04em;color:var(--orange)!important}
.cal-media{display:block;overflow:hidden;aspect-ratio:4/3}
.cal-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.cal-row:hover .cal-media img{transform:scale(1.06)}}
.cal-body{display:block;min-width:0}
.cal-body b{display:block;font-size:clamp(1.15rem,1.9vw,1.7rem);font-weight:800;color:var(--teal-deep);line-height:1.15;margin-bottom:.35em}
.cal-meta{display:block;font-size:var(--fs-small);font-weight:600;color:var(--teal);margin-bottom:.5em;overflow-wrap:anywhere}
.cal-meta em{font-style:normal;color:#9fb0b4;padding:0 .45em}
.cal-text{display:block;font-size:var(--fs-small);color:#6b6b69;max-width:52ch;margin-bottom:.8em;overflow-wrap:anywhere}
.cal-row .arrow-link{pointer-events:none}
@media(max-width:860px){
  .cal-row{grid-template-columns:clamp(3.6rem,13vw,5rem) minmax(0,1fr);gap:1rem 1.2rem}
  .cal-media{grid-column:1 / -1;order:3;aspect-ratio:16/9}
  .cal-body{grid-column:2}
  .cal-text{font-size:var(--fs-body)}
}

/* ---------- filters ---------- */
.filter-row{display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.filter{font-family:inherit;font-size:clamp(.85rem,1vw,1rem);font-weight:600;padding:.62em 1.5em;border-radius:var(--chip-radius);border:0.09375rem solid var(--grey-blue);background:#fff;color:var(--teal);cursor:pointer;transition:all .22s ease}
/* Restaurant Week: price chips are the main way in, so they read as buttons */
.filter-row.lg{gap:.7em}
.filter-row.lg .filter{font-size:clamp(1rem,1.35vw,1.35rem);font-weight:700;padding:.66em 1.7em;border-width:0.125rem}
.filter:hover,.filter.active{background:var(--teal);border-color:var(--teal);color:#fff}

/* ---------- footer ---------- */
.site-footer{background:var(--teal);color:#fff;position:relative;z-index:3}
.site-footer .inner{padding:clamp(3rem,6vw,5rem) var(--pad-x) clamp(2rem,3.5vw,3rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14.375rem,100%),1fr));gap:clamp(2rem,4vw,4rem)}
.site-footer .brandcol img{width:clamp(10.625rem,16vw,14.375rem);margin-bottom:1.2rem}
.site-footer h6{font-size:var(--fs-small);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--lime);margin-bottom:1rem}
.site-footer a{color:rgba(255,255,255,.85);text-decoration:none;font-size:var(--fs-small);display:block;padding:.28em 0;transition:color .2s ease}
.site-footer a:hover{color:var(--lime)}
.site-footer p{font-size:var(--fs-small);color:rgba(255,255,255,.8)}
.footer-base{border-top:0.0625rem solid rgba(255,255,255,.15);padding:1.2rem var(--pad-x);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:rgba(255,255,255,.6)}
.socials{display:flex;gap:.7em;margin-top:1rem}
.socials a{width:2.5rem;height:2.5rem;border-radius:50%;border:0.09375rem solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;transition:all .25s ease;padding:0}
.socials a:hover{background:var(--lime);border-color:var(--lime);color:#fff;transform:translateY(-0.1875rem)}

/* B watermark helper */
.b-watermark{position:relative;overflow:hidden}
.b-watermark::after{
  content:"";position:absolute;right:-4%;top:-8%;width:clamp(12.5rem,26vw,26.25rem);aspect-ratio:545/579;
  background:url("assets/logo-b-mark.svg") center/contain no-repeat;opacity:.05;pointer-events:none;
}

/* misc */
.center{text-align:center}
.mt{margin-top:clamp(1.5rem,3vw,2.5rem)}
.mb{margin-bottom:clamp(1.5rem,3vw,2.5rem)}

/* narrow viewports: extra hero padding keeps the CTAs clear of the
   scroll cue, which stays dead-centre at every width */
@media(max-width:960px){
  .hero-content{padding-bottom:clamp(7rem,13vh,9rem)}
}

/* instagram tiles */
.ig-hover{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(18,67,67,.72);color:#fff;font-weight:700;font-size:var(--fs-small);
  letter-spacing:.08em;opacity:0;transition:opacity .3s ease;
}
.ig-tile:hover .ig-hover{opacity:1}

/* ---------- homepage editorial layouts ---------- */
.feature-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,3vw,3rem);align-items:stretch}
@media(max-width:860px){.feature-split{grid-template-columns:1fr}}
.feature-ev{position:relative;display:block;overflow:hidden;min-height:clamp(20rem,34vw,30rem);clip-path:polygon(0 2%,100% 0,100% 98%,0 100%);box-shadow:0 1rem 2.5rem rgba(29,29,27,.16)}
.feature-ev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.feature-ev:hover img{transform:scale(1.05)}
.fe-date{position:absolute;left:0;top:1.4rem;background:var(--orange);color:#fff;font-weight:700;font-size:var(--fs-small);letter-spacing:.08em;padding:.45em 1.1em}
.fe-cap{position:absolute;left:0;bottom:0;right:22%;background:rgba(18,67,67,.86);color:#fff;padding:1.1em 1.4em;font-size:var(--fs-small)}
.fe-cap b{display:block;font-size:1.35em;margin-bottom:.25em}
.ev-minis{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.5rem);justify-content:space-between}
.ev-mini{display:grid;grid-template-columns:2fr 3fr;background:#fff;box-shadow:0 .4rem 1.4rem rgba(29,29,27,.09);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.ev-mini:hover{transform:translateY(-.3rem);box-shadow:0 1rem 2.4rem rgba(29,29,27,.15)}
.ev-mini-img{overflow:hidden;min-height:8rem}
.ev-mini-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ev-mini:hover .ev-mini-img img{transform:scale(1.06)}
.ev-mini-body{padding:1.1em 1.2em;font-size:var(--fs-small)}
.ev-mini-body .fe-date{display:inline-block;margin-bottom:.5em;font-size:.72rem}
.ev-mini-body b{display:block;font-size:1.1em;margin-bottom:.25em}
.ev-mini-body p{color:#6b6b69}

.theme-blocks{display:flex;gap:clamp(.7rem,1.3vw,1.2rem)}
/* min-height, not height: the cards equalise to the tallest so longer copy
   can never push the Explore link off the card. Caps are set so heading +
   three cards frame inside one viewport on wide screens. */
.theme-block{min-height:clamp(16rem,21vw,19rem)}
.theme-block{
  position:relative;flex:1;color:#fff;text-decoration:none;overflow:hidden;
  padding:clamp(1.4rem,2.2vw,1.85rem);display:flex;flex-direction:column;
  background:var(--tb);clip-path:polygon(0 0,100% 1.5%,100% 100%,0 98.5%);
  transition:transform .45s cubic-bezier(.22,.9,.35,1);
}
.theme-block:hover{transform:translateY(-.45rem)}
/* always-visible photo strip, duotoned in the theme colour until hover */
.tb-bg{
  position:absolute;top:0;left:0;right:0;height:clamp(7rem,10.5vw,8.1rem);
  background-size:cover;background-position:center;
  clip-path:polygon(0 0,100% 0,100% 82%,0 100%);
}
.tb-bg::after{
  content:"";position:absolute;inset:0;background:var(--tb);opacity:.58;
  transition:opacity .6s ease;
}
.theme-block:hover .tb-bg::after,.theme-block:focus .tb-bg::after{opacity:.12}
.theme-block i{font-style:normal;font-weight:800;font-size:clamp(2.2rem,3.6vw,3.2rem);opacity:.3;line-height:1;position:relative;z-index:1}
/* the content block sits clear of the photo strip's diagonal: the gap
   above the headline and the room under the bullets stay balanced */
.theme-block b{font-size:clamp(1.15rem,1.8vw,1.6rem);font-weight:800;margin:clamp(6.6rem,11vw,7.9rem) 0 .25em;white-space:nowrap;position:relative;z-index:1}
.theme-block p{font-size:var(--fs-small);font-weight:500;opacity:.94;max-width:32ch;position:relative;z-index:1;transition:opacity .45s ease}
.theme-block:hover p,.theme-block:focus p{opacity:0}
/* the description and the bullet list share one grid cell and cross-fade on
   hover. Stacking them in flow (rather than pinning the list to a measured
   offset) means the card is always as tall as the longer of the two, so a
   three-line bullet can never run over the Explore link below it. */
.tb-swap{display:grid;position:relative;z-index:1}
.tb-swap>*{grid-area:1/1}
.tb-list{
  list-style:none;margin:0;align-self:start;
  opacity:0;transform:translateY(.4rem);
  transition:opacity .5s ease .12s,transform .5s cubic-bezier(.22,.9,.35,1) .12s;
}
.theme-block:hover .tb-list,.theme-block:focus .tb-list{opacity:1;transform:none}
.tb-list li{font-size:var(--fs-small);font-weight:600;line-height:1.3;padding:.2em 0 .2em 1.3em;position:relative}
.tb-list li::before{content:"";position:absolute;left:0;top:.72em;width:.55em;height:.55em;background:#fff;clip-path:polygon(0 0,100% 15%,85% 100%,0 90%)}
.tb-more{margin-top:auto;padding-top:clamp(1rem,1.8vw,1.2rem);font-weight:700;font-size:var(--fs-small);border-bottom:.14rem solid rgba(255,255,255,.6);width:fit-content;padding-bottom:.15em;transition:padding .25s ease;position:relative;z-index:1}
.theme-block:hover .tb-more{padding-right:.8em}
@media(max-width:860px){
  .theme-blocks{flex-direction:column;gap:1rem}
  .theme-block{flex:none;height:auto;min-height:0;padding:1.5rem 1.35rem 1.7rem}
  .theme-block b{margin:7.6rem 0 .55em;font-size:1.32rem}
  .theme-block p{opacity:.94;margin-bottom:.9em;max-width:none}
  .tb-swap{display:block}
  .theme-block .tb-list{opacity:1;transform:none;margin:0 0 1.1em}
  .tb-list li{padding:.4em 0 .4em 1.4em}
  .tb-more{margin-top:.2em}
  .tb-bg::after{opacity:.35}
}

.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(5.5rem,9vw,8.5rem);gap:clamp(.7rem,1.3vw,1.2rem)}
.m-tile{position:relative;overflow:hidden}
.m-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.m-tile:hover img{transform:scale(1.05)}
.m-pill{position:absolute;left:6%;bottom:8%;max-width:82%;background:rgba(18,67,67,.86);color:#fff;padding:.9em 1.2em;font-size:var(--fs-small);font-weight:500;transform:rotate(-.6deg)}
.m-pill b{display:block;font-size:1.9em;font-weight:800;line-height:1.1}
.m-stat{background:var(--teal-deep);border:.09rem solid rgba(255,255,255,.2);display:flex;flex-direction:column;justify-content:center;text-align:center;padding:1.2em}
.m-stat b{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;color:var(--lime);line-height:1.1}
.m-stat span{font-size:var(--fs-small);font-weight:500;margin-top:.5em}
.ma{grid-column:1/6;grid-row:1/3}
.mb{grid-column:6/10;grid-row:1/2;clip-path:polygon(0 0,100% 5%,100% 100%,0 100%)}
.mc{grid-column:10/13;grid-row:1/2}
.md{grid-column:6/9;grid-row:2/3}
.me{grid-column:9/13;grid-row:2/3;clip-path:polygon(0 0,100% 0,100% 96%,0 100%)}
@media(max-width:760px){
  .ma,.mb,.mc,.md,.me{grid-column:1/13;grid-row:auto;min-height:12rem}
}

.ig-frame-wrap{background:#fff;box-shadow:0 .8rem 2.2rem rgba(29,29,27,.12);padding:.5rem;overflow:hidden}
.ig-frame{width:100%;height:clamp(26rem,38vw,34rem);border:0;display:block}

/* ---------- preloader: the B grows, then the fields roll away ---------- */
.preloader{position:fixed;inset:0;z-index:200}
.preloader.done{pointer-events:none;visibility:hidden;transition:visibility 0s linear 1.9s}
body.preloading{overflow:hidden}
.pre-slab{position:absolute;left:0;top:0;width:100%;height:100%;transition:transform 1.05s cubic-bezier(.7,0,.3,1)}
.pre-slab i{position:absolute;top:99.6%;left:-10%;width:120%;height:9vh;clip-path:ellipse(55% 100% at 50% 0)}
.s1{background:var(--teal);z-index:3;display:flex;align-items:center;justify-content:center}
.s1 i{background:var(--teal)}
.s2{background:var(--leaf);z-index:2}.s2 i{background:var(--leaf);clip-path:ellipse(48% 100% at 42% 0)}
.s3{background:#fff;z-index:1}.s3 i{background:#fff;clip-path:ellipse(52% 100% at 60% 0)}
.preloader.done .s1{transform:translateY(-112%)}
.preloader.done .s2{transform:translateY(-112%);transition-delay:.22s}
.preloader.done .s3{transform:translateY(-112%);transition-delay:.44s}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:1.8rem;transition:opacity .4s ease}
.preloader.done .pre-inner{opacity:0}
.pre-lockup{display:flex;align-items:center;gap:clamp(.5rem,.8vw,.8rem);height:clamp(3.6rem,6.5vw,6rem)}
.pre-logo{height:100%}
.pre-logo svg{height:100%;width:auto;display:block;overflow:hidden;transform-origin:center;animation:preGrow .35s .05s cubic-bezier(.34,1.56,.64,1) both}
.pre-logo svg .cls-2{animation:preB .4s .1s ease-out both}
.pre-logo svg .cls-5,.pre-logo svg .cls-8{transform-box:fill-box;transform-origin:50% 100%;animation:preFields .5s .35s cubic-bezier(.22,.9,.35,1) both}
.pre-logo svg .cls-3,.pre-logo svg .cls-7{transform-box:fill-box;transform-origin:50% 100%;animation:preLeaf .6s .7s cubic-bezier(.34,1.56,.64,1) both,preBreathe 2.8s 1.5s ease-in-out infinite}
.pre-wm{height:64%;overflow:hidden;display:flex;align-items:center}
.pre-wm img{height:100%;width:auto;display:block;transform:translateX(-105%);animation:preWm .7s 1.2s cubic-bezier(.22,.9,.35,1) both}
@keyframes preB{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes preGrow{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes preFields{from{transform:translateY(28%);opacity:0}to{transform:none;opacity:1}}
@keyframes preLeaf{0%{transform:scale(0)}72%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes preBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes preWm{to{transform:none}}
@keyframes preIn{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
@keyframes preScan{from{transform:translateX(-110%)}to{transform:translateX(310%)}}
body.pre-quick .pre-logo svg .cls-2,body.pre-quick .pre-logo svg .cls-3,body.pre-quick .pre-logo svg .cls-5,body.pre-quick .pre-logo svg .cls-7,body.pre-quick .pre-logo svg .cls-8,body.pre-quick .pre-wm img{animation-delay:.05s;animation-duration:.35s}
@media(prefers-reduced-motion:reduce){
  .pre-logo svg *,.pre-wm img{animation:none!important;opacity:1;transform:none!important}
  .pre-slab{transition:opacity .35s ease}
  .preloader.done .pre-slab{opacity:0;transform:none}
}

/* hero text entrance — staggered, after the preloader reveal */
.js .hero-text > *{opacity:0;transform:translateY(1.8rem)}
body.hero-in .hero-text > *{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.22,.9,.35,1)}
body.hero-in .hero-text > :nth-child(1){transition-delay:.1s}
body.hero-in .hero-text > :nth-child(2){transition-delay:.25s}
body.hero-in .hero-text > :nth-child(3){transition-delay:.45s}
body.hero-in .hero-text > :nth-child(4){transition-delay:.65s}
@media(prefers-reduced-motion:reduce){.js .hero-text > *{opacity:1;transform:none}}

/* rotating hero word — split-flap, as Curo */
.rot-word{display:inline;white-space:nowrap;font-style:italic;font-weight:800;color:#fff;perspective:50rem}
.rot-word .flap-letter{display:inline-block;transform-origin:center center;margin-right:-0.01em}
.rot-word .flap-letter.flipping{animation:letterFlip .4s cubic-bezier(.4,0,.2,1)}
@keyframes letterFlip{
  0%{transform:rotateY(0deg);opacity:1}
  40%{transform:rotateY(90deg);opacity:0}
  60%{transform:rotateY(90deg);opacity:0}
  100%{transform:rotateY(0deg);opacity:1}
}

/* ---------- expanding event deck — slanted, overlapping, slides on hover ---------- */
.deck{display:flex;height:clamp(16rem,23vw,19.5rem);margin-left:calc(-1*var(--pad-x));margin-right:calc(-1*var(--pad-x))}
.deck-item + .deck-item{margin-left:-1.45rem}
.deck-item{
  position:relative;flex:1;min-width:0;overflow:hidden;display:block;text-decoration:none;color:#fff;
  clip-path:polygon(1.7rem 0,100% 0,calc(100% - 1.7rem) 100%,0 100%);
  transition:flex 1.1s cubic-bezier(.25,.8,.2,1);
  will-change:flex;
}
.deck-item:first-child{clip-path:polygon(0 0,100% 0,calc(100% - 1.7rem) 100%,0 100%)}
.deck-item:last-child{clip-path:polygon(1.7rem 0,100% 0,100% 100%,0 100%)}
.deck-item.active{flex:3.4}
.deck-item img{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:60vw;max-width:none;object-fit:cover}
.deck-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,67,67,.05) 38%,rgba(18,67,67,.55) 68%,rgba(18,67,67,.92) 100%);transition:opacity .5s ease}
.deck-body{
  position:absolute;left:clamp(2.2rem,3vw,3rem);right:8%;top:calc(100% - clamp(10.5rem,16vw,13.5rem));
  display:flex;flex-direction:column;gap:.45em;
}
.deck-date{background:var(--orange);color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.1em;padding:.4em 1em;width:fit-content}
.deck-body b{font-size:clamp(1.05rem,1.7vw,1.5rem);font-weight:800;line-height:1.25;transition:font-size .9s cubic-bezier(.25,.8,.2,1)}
.deck-body p,.deck-body .arrow-link{opacity:0;max-height:0;overflow:hidden;margin:0;transform:translateY(.6rem);transition:opacity .7s ease .35s,transform .7s cubic-bezier(.22,.9,.35,1) .35s,max-height .8s ease .15s;font-size:var(--fs-small);max-width:38ch}
.deck-body .arrow-link{align-self:flex-start;padding-right:.7em}
.deck-item.active .deck-body p,.deck-item.active .deck-body .arrow-link{opacity:1;transform:none;max-height:7em}
.deck-item:not(.active) .deck-body b{font-size:clamp(.85rem,1.1vw,1.05rem)}
.deck-item:not(.active) .deck-body p,.deck-item:not(.active) .deck-body .arrow-link{transition-delay:0s,0s,0s}
/* mobile: the deck becomes a swipeable snap carousel — every card fully
   readable, no hover state to depend on, next card peeking as the cue */
@media(max-width:860px){
  .deck{
    flex-direction:row;height:auto;
    overflow-x:auto;overflow-y:clip;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad-x);
    overscroll-behavior-x:none;
    touch-action:pan-x pan-y pinch-zoom;
    gap:.8rem;padding:.2rem var(--pad-x) 1rem;scrollbar-width:none;
  }
  .deck::-webkit-scrollbar{display:none}
  .deck-item,.deck-item:first-child,.deck-item:last-child,.deck-item.active{
    flex:0 0 min(78vw,20.5rem);min-height:24rem;margin:0;
    clip-path:polygon(0 2.5%,100% 0,100% 97.5%,0 100%);
    scroll-snap-align:center;
  }
  .deck-item + .deck-item{margin-left:0}
  .deck-item img{left:0;transform:none;width:100%}
  .deck-body{left:1.15rem;right:1.15rem;top:auto;bottom:1.3rem;gap:.5em}
  .deck-body b,.deck-item:not(.active) .deck-body b{font-size:1.18rem}
  .deck-body p,.deck-body .arrow-link,
  .deck-item:not(.active) .deck-body p,.deck-item:not(.active) .deck-body .arrow-link{
    opacity:1;transform:none;max-height:none;transition:none;
  }
  .deck-shade{background:linear-gradient(180deg,rgba(18,67,67,0) 26%,rgba(18,67,67,.6) 58%,rgba(18,67,67,.95) 100%)}
}

/* ---------- follow the town: split + scroll-scrubbed phone ---------- */
#follow{padding-top:clamp(1.7rem,3.4vw,3.4rem);padding-bottom:clamp(.85rem,1.7vw,1.7rem);overflow:visible;position:relative}
#follow .shead{margin-bottom:clamp(.9rem,1.7vw,1.7rem)}
#follow .lead{margin-bottom:.5em;font-size:clamp(1.1rem,1.6vw,1.35rem)}
#follow .body-copy{margin-bottom:.5em}
.ig-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.2rem,2.4vw,2.4rem);align-items:center}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.55rem,1vw,1rem);max-width:28.5rem}
.phone-stage{position:absolute;right:calc(var(--pad-x) * .4);bottom:-8rem;top:1rem;width:42%;display:flex;align-items:flex-end;justify-content:center;overflow:visible;z-index:1;pointer-events:none}
#phone-canvas{height:100%;width:auto;will-change:transform;transform:translateY(12%)}
/* phones: everything stacks in one viewport-friendly column — content first,
   then the phone slots in directly under the follow button (no rise, spin
   finishes early) and its base runs on behind the footer field curves. */
@media(max-width:860px){
  .ig-split{grid-template-columns:1fr}
  #follow{padding-bottom:0}
  .phone-stage{
    position:static;width:100%;height:23rem;margin-top:.6rem;
    align-items:flex-start;justify-content:center;overflow:hidden;
  }
  #phone-canvas{height:30rem;width:auto;transform:none!important}
  #follow ~ .fields{margin-top:-5rem}
}

/* ---------- what is your bromley: stat-hover backgrounds ---------- */
#about-bid{padding-top:clamp(3rem,6vw,6rem);padding-bottom:clamp(2.2rem,4.4vw,4.4rem);overflow:hidden}
#about-bid .shead{margin-bottom:clamp(.9rem,1.7vw,1.7rem)}
#about-bid .kicker{margin-bottom:.55rem}
#about-bid .lead{font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.4;margin-bottom:.55em}
#about-bid .body-copy{margin-bottom:.7em;font-size:clamp(.98rem,1.05vw,1.1rem)}
#about-bid .stat .n{font-size:clamp(2.3rem,5vw,5rem)}
#about-bid .stat-row{gap:clamp(1rem,2.4vw,2.4rem)}
#about-bid .stat p{max-width:34ch}
@media(min-width:861px){#about-bid .stat-row{grid-template-columns:repeat(2,1fr)}}
#about-bid > *{position:relative;z-index:1}
#about-bid .ab-bg{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 6s cubic-bezier(.2,.6,.3,1);
  pointer-events:none;
}
#about-bid .ab-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,67,67,.9) 0%,rgba(18,67,67,.72) 55%,rgba(18,67,67,.55) 100%)}
#about-bid .ab-bg.on{opacity:1;transform:scale(1)}
#about-bid, #about-bid .lead, #about-bid .body-copy, #about-bid .stat p, #about-bid .stat .n, #about-bid .stat .src{transition:color .6s ease}
#about-bid .stat{cursor:default}
#about-bid.bg-active .lead{color:#fff}
#about-bid.bg-active .body-copy{color:rgba(255,255,255,.88)}
#about-bid.bg-active .kicker{color:var(--lime)}
#about-bid.bg-active .stat .n{color:#fff}
#about-bid.bg-active .stat .bar{background:var(--lime)}
#about-bid.bg-active .stat p{color:rgba(255,255,255,.92)}
#about-bid.bg-active .stat .src{color:rgba(255,255,255,.6)}
#about-bid.bg-active .btn.ghost{color:#fff;border-color:#fff}
#about-bid.bg-active.b-watermark::after{opacity:.03}
#about-bid .stat{padding:.8rem;margin:-.8rem}

/* ---------- BID in numbers: pinned scroll story ---------- */
.numbers-scroll{position:relative;height:340vh;background:var(--teal)}
.ns-stage{position:sticky;top:0;height:100vh;overflow:hidden;color:#fff}
.ns-chapter{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.ns-chapter.on{opacity:1;visibility:visible;transition:opacity .55s ease}
.ns-bg{position:absolute;inset:-6%;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 1.2s ease}
.ns-chapter.on .ns-bg{transform:scale(1)}
.ns-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,67,67,.92) 8%,rgba(18,67,67,.55) 55%,rgba(18,67,67,.35) 100%)}
.ns-content{position:absolute;left:var(--pad-x);top:50%;transform:translateY(-50%);max-width:44rem;will-change:transform}
.ns-kicker{font-weight:800;font-size:var(--fs-small);letter-spacing:.22em;color:var(--lime);display:block;margin-bottom:1.2rem}
.ns-n{font-size:clamp(4rem,10vw,10rem);font-weight:800;line-height:1;display:block;transform:translateY(1.5rem);opacity:0;transition:transform .7s cubic-bezier(.22,.9,.35,1) .1s,opacity .7s ease .1s}
.ns-chapter.on .ns-n{transform:none;opacity:1}
.ns-bar{width:5rem;height:.3rem;background:var(--lime);margin:1.2rem 0;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,.9,.35,1) .3s}
.ns-chapter.on .ns-bar{transform:scaleX(1)}
.ns-content p{font-weight:500;font-size:clamp(1rem,1.5vw,1.35rem);max-width:30ch;opacity:0;transform:translateY(.8rem);transition:opacity .6s ease .4s,transform .6s cubic-bezier(.22,.9,.35,1) .4s}
.ns-chapter.on p{opacity:1;transform:none}
.ns-rail{position:absolute;right:var(--pad-x);bottom:clamp(2rem,4vw,3.5rem);display:flex;align-items:center;gap:1rem;font-weight:700;font-size:var(--fs-small);letter-spacing:.14em}
.ns-track{display:flex;gap:.4rem}
.ns-track i{width:clamp(2.2rem,3.4vw,3.4rem);height:.22rem;background:rgba(255,255,255,.25);border-radius:1rem;overflow:hidden;position:relative}
.ns-track i::after{content:"";position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.ns-track i.done::after{transform:scaleX(1)}
.ns-note{position:absolute;left:var(--pad-x);bottom:clamp(2rem,4vw,3.5rem);font-size:var(--fs-small);color:rgba(255,255,255,.65);max-width:44ch}
.ns-note a{color:var(--lime)}
/* mobile: keep the pinned scroll story — one full screen per number,
   popping to the next as you scroll, same as desktop */
@media(max-width:860px){
  .numbers-scroll{height:300vh}
  .ns-stage{height:100vh;height:100svh}
  .ns-content{left:var(--pad-x);right:var(--pad-x);max-width:none}
  .ns-n{font-size:clamp(3.2rem,16vw,5rem)}
  .ns-kicker{margin-bottom:.9rem}
  .ns-content p{font-size:1rem;max-width:26ch}
  .ns-bg::after{background:linear-gradient(180deg,rgba(18,67,67,.92) 0%,rgba(18,67,67,.6) 55%,rgba(18,67,67,.42) 100%)}
  /* progress runs DOWNWARD on phones: the four frame markers stack
     vertically on the right so nobody reads them as a sideways swipe */
  .ns-rail{right:calc(var(--pad-x) * .6);left:auto;bottom:auto;top:50%;transform:translateY(-50%);flex-direction:column;gap:.6rem}
  .ns-track{flex-direction:column;gap:.4rem}
  .ns-track i{width:.24rem;height:1.4rem}
  .ns-track i::after{transform:scaleY(0);transform-origin:top}
  .ns-track i.done::after{transform:scaleY(1)}
  /* the vertical frame rail is the one and only progress indicator on
     phones — the scroll cue would just double up behind the caption */
  .ns-cue{display:none}
  .ns-note{display:none}
}

/* numbers story: scroll cue — a light travelling down a line */
.ns-cue{
  position:absolute;right:var(--pad-x);top:50%;transform:translateY(-50%);
  width:.14rem;height:6rem;border-radius:1rem;
  background:rgba(255,255,255,.16);overflow:hidden;
  transition:opacity .6s ease;
}
.ns-cue::after{
  content:"";position:absolute;left:0;right:0;height:34%;border-radius:1rem;
  background:var(--lime);
  animation:cueTravel 2.2s cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes cueTravel{
  0%{transform:translateY(-110%);opacity:0}
  25%{opacity:1}
  75%{opacity:1}
  100%{transform:translateY(320%);opacity:0}
}
.ns-cue.off{opacity:0}

/* ---------- latest news: editorial hover index ---------- */
/* the topbar is fixed, and its B logo reaches ~4.3rem down the viewport –
   when this section frames to a screen, the heading must start below that */
#news-index{padding-top:clamp(2.6rem,6vw,6.2rem);padding-bottom:clamp(1.6rem,3.2vw,3.2rem)}
#news-index .shead{margin-bottom:clamp(1rem,1.8vw,1.8rem)}
.news-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:stretch}
.news-list{display:flex;flex-direction:column;justify-content:center}
.news-row{
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.8rem);
  padding:clamp(.75rem,1.35vw,1.2rem) .4rem;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--grey);position:relative;
}
.news-row::before{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,.9,.35,1);
}
.news-row.on::before{transform:scaleX(1)}
.nr-num{font-weight:800;font-size:var(--fs-small);letter-spacing:.14em;color:var(--grey-blue);transition:color .3s ease;min-width:2.2em}
.news-row.on .nr-num{color:var(--cyan)}
.nr-body{flex:1;min-width:0}
.nr-meta{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;color:#9a9a98;margin-bottom:.3em;transition:color .3s ease}
.news-row.on .nr-meta{color:var(--cyan)}
.nr-body b{
  display:block;font-size:clamp(1.05rem,1.75vw,1.6rem);font-weight:800;line-height:1.2;
  transition:transform .55s cubic-bezier(.22,.9,.35,1),color .3s ease;
}
.news-row.on .nr-body b{transform:translateX(.6rem);color:var(--teal-deep)}
.nr-arrow{font-weight:800;font-size:clamp(1.2rem,1.8vw,1.6rem);color:var(--cyan);opacity:0;transform:translateX(-.8rem);transition:opacity .4s ease,transform .55s cubic-bezier(.22,.9,.35,1)}
.news-row.on .nr-arrow{opacity:1;transform:none}
.nr-all .nr-body b{color:var(--teal);font-size:clamp(1rem,1.5vw,1.3rem)}
.news-stage{position:relative;min-height:clamp(17rem,24vw,21.5rem)}
.nstg{
  position:absolute;inset:0;margin:0;overflow:hidden;
  clip-path:polygon(1.4rem 0,100% 0,calc(100% - 1.4rem) 100%,0 100%);
  opacity:0;transform:rotate(1.6deg) translateY(1rem);
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,.9,.35,1);
  box-shadow:0 1.2rem 3rem rgba(29,29,27,.18);
}
.nstg.on{opacity:1;transform:none}
.nstg img{width:100%;height:100%;object-fit:cover}
.nstg figcaption{position:absolute;left:0;bottom:0;background:rgba(18,67,67,.85);color:#fff;font-size:var(--fs-small);font-weight:600;padding:.5em 1.1em}
/* mobile: editorial list keeps its numbers but each story carries its
   own angled thumbnail — no hover stage to depend on */
.nr-thumb{display:none}
@media(max-width:860px){
  .news-split{grid-template-columns:1fr}
  .news-stage{display:none}
  .nr-thumb{display:block;flex:none;width:4.4rem;height:4.4rem;overflow:hidden;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
  .nr-thumb img{width:100%;height:100%;object-fit:cover}
  .news-row{gap:.95rem;padding:1.05rem .1rem}
  .nr-num{min-width:1.6em}
  .nr-arrow{display:none}
  .nr-body b{font-size:1.05rem}
  .nr-meta{margin-bottom:.4em}
  .news-row.on .nr-body b{transform:none}
}

/* news index: scroll-stepped */
.news-scroll{height:auto}
.news-scroll #news-index{position:static}
@media(max-width:860px){.news-scroll{height:auto}.news-scroll #news-index{position:static}}

/* ---------- restaurant week promo: scroll-choreographed collage ---------- */
.rw-stack{--s0:1;--s1:1;--s2:1;--s3:1}
.rw-stack::before{
  opacity:var(--s0);
  transform:translateY(calc((1 - var(--s0)) * 3rem)) rotate(calc((1 - var(--s0)) * 3deg));
}
.rw-stack .p1{
  opacity:var(--s1);
  transform:translate(calc((1 - var(--s1)) * -3.5rem + var(--mx1,0rem)), calc((1 - var(--s1)) * 2.8rem + var(--my1,0rem))) rotate(calc(-1.6deg - (1 - var(--s1)) * 6deg));
}
.rw-stack figure:hover img{transform:none}
.rw-stack .p2{
  opacity:var(--s2);
  transform:translate(calc((1 - var(--s2)) * 3.5rem + var(--mx2,0rem)), calc((1 - var(--s2)) * 3.8rem + var(--my2,0rem))) rotate(calc(1.4deg + (1 - var(--s2)) * 6deg));
}
.rw-stack .chip{
  opacity:var(--s3);
  transform:translate(var(--mx3,0rem), calc((1 - var(--s3)) * 2.8rem + var(--my3,0rem))) rotate(calc(-1deg + (1 - var(--s3)) * 5deg)) scale(calc(.82 + var(--s3) * .18));
}
@media(prefers-reduced-motion:reduce){.rw-stack{--s0:1!important;--s1:1!important;--s2:1!important;--s3:1!important}}



/* rw: stable angled top edge (wedge overlay instead of section clip-path) */
#rw-promo::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:clamp(1.5rem,4vw,4rem);
  background:#fff;clip-path:polygon(0 0,100% 0,0 100%);pointer-events:none;z-index:1;
}
#rw-promo > .split{position:relative;z-index:2}

/* ================= Restaurant Week campaign page ================= */
.rw-page{--rw-green:#34BCA3;--rw-yellow:#F7C03A;--rw-coral:#EF6653;--rw-blue:#48B2CC;--rw-plum:#9C64B4}

/* hero lockup: the official campaign logo artwork (title + date ribbon)
   over the photo, per the client's brand pack */
.rwc-logo{margin:0 0 .2rem}
.rwc-logo img{
  display:block;width:clamp(17rem,30vw,26rem);height:auto;
  filter:drop-shadow(0 .35rem 1.6rem rgba(10,44,44,.45));
}

/* venue logo chip on the offer cards – bottom-left, clear of the price tag */
.rwc-offer-cards .card-logo{
  position:absolute;left:.65rem;bottom:.65rem;max-width:60%;
  display:flex;align-items:center;background:#fff;border-radius:.5rem;
  padding:.3rem .45rem;box-shadow:0 .25rem .7rem rgba(0,0,0,.22);
}
.rwc-offer-cards .card-logo img{display:block;width:auto;height:auto;max-height:1.7rem;max-width:6rem;object-fit:contain}

/* "Proudly supported by" – campaign partner logos under the intro CTAs */
.rwc-sponsors{margin-top:2.4rem}
.rwc-sp-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a8a88;margin-bottom:1rem}
.rwc-sp-logos{display:flex;align-items:center;gap:clamp(1.6rem,3vw,2.6rem);flex-wrap:wrap}
.rwc-sp-logos img{width:auto}
.rwc-sp-logos img[alt="Wagamama"]{height:2rem}
.rwc-sp-logos img[alt="The Royal Bell"]{height:5.5rem}

/* per-offer terms & conditions: a quiet trigger at the foot of each card,
   opening one shared pop-up (some venues' terms run long) */
.tc-link{display:block;margin-top:.55em;font-size:var(--fs-small);font-weight:700;letter-spacing:.03em;color:#8a8a88;text-decoration:underline;text-underline-offset:2px;cursor:pointer;width:fit-content}
.tc-link:hover{color:var(--teal)}
.tc-lb{position:fixed;inset:0;z-index:300;background:rgba(4,32,34,.66);display:flex;align-items:center;justify-content:center;padding:1.2rem;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.tc-lb.on{opacity:1;visibility:visible;transition:opacity .25s ease}
.tc-card{background:#fff;border-radius:1rem;max-width:34rem;width:100%;max-height:82vh;overflow:auto;padding:clamp(1.4rem,3vw,2rem);position:relative;box-shadow:0 2rem 5rem rgba(0,20,22,.4)}
.tc-card h3{font-size:1.15rem;font-weight:800;color:var(--teal-deep);padding-right:2.4rem}
.tc-card .tc-offer{font-size:var(--fs-small);color:#6d7f7d;margin-top:.35em}
.tc-card ul{margin-top:1.1rem;padding-left:1.15em;display:grid;gap:.55em;font-size:var(--fs-small);line-height:1.6;color:var(--ink,#1d1d1b)}
.tc-x{position:absolute;top:.9rem;right:.9rem;width:2.2rem;height:2.2rem;border-radius:50%;border:0;background:#eef3f2;color:var(--teal-deep);font:inherit;font-weight:700;cursor:pointer;line-height:1}
.tc-x:hover{background:var(--teal);color:#fff}

/* campaign marquee tint */
.marquee.rwc-m{background:var(--rw-green)}
.marquee.rwc-m em{color:#fff}
.marquee.rwc-m .rwc-y{font-style:normal;color:var(--rw-yellow)}

/* intro collage */
.rwc-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.rwc-collage{position:relative;height:clamp(24rem,38vw,30rem)}
.rwc-collage img{position:absolute;object-fit:cover;display:block}
.rwc-c-main{right:0;top:0;width:62%;height:100%;clip-path:polygon(0 0,100% 0,100% 100%,.0% 100%,8% 55%)}
.rwc-c-pour{left:6%;bottom:0;width:34%;height:56%;clip-path:polygon(0 0,100% 6%,100% 100%,0 100%)}
.rwc-c-drinks{left:0;top:4%;width:30%;height:40%}
.rwc-c-chip{position:absolute;left:24%;bottom:44%;width:14%;height:12%;background:var(--rw-coral)}
.rwc-c-chip2{position:absolute;right:56%;top:0;width:8%;height:10%;background:var(--rw-yellow)}
.rwc-caption{position:absolute;right:0;bottom:-2.1rem;font-size:.78rem;color:#6b6b69}

/* tier cards */
.rwc-tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.8rem,1.4vw,1.4rem)}
.rwc-tier{position:relative;overflow:hidden;min-height:clamp(15rem,23vw,19.5rem);display:flex;align-items:flex-end}
.rwc-tier img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.rwc-tier:hover img{transform:scale(1.05)}
.rwc-tier .tp{position:relative;z-index:1;width:100%;color:#fff;padding:.95em 1.15em 1em}
.rwc-tier .tp b{display:block;font-size:2rem;font-weight:800;line-height:1.05;margin-bottom:.15em}
.rwc-tier .tp span{font-size:var(--fs-small);font-weight:600;line-height:1.35;display:block}
.rwc-tier.g .tp{background:var(--rw-green)}
.rwc-tier.y .tp{background:var(--rw-yellow)}
.rwc-tier.b .tp{background:var(--rw-blue)}
.rwc-tier.p .tp{background:var(--rw-plum)}
.rwc-tier.c .tp{background:var(--rw-coral)}

/* diner steps */
.rwc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.4vw,1.4rem)}
.rwc-step{padding:1.5em 1.4em 1.6em;font-size:var(--fs-small);font-weight:500;line-height:1.5}
.rwc-step i{display:block;font-style:normal;font-weight:800;font-size:2.4rem;line-height:1;margin-bottom:.35em}
.rwc-step b{display:block;font-size:1.08em;font-weight:800;margin-bottom:.35em;color:var(--teal-deep)}
.rwc-step.g{background:rgba(52,188,163,.13)}.rwc-step.g i{color:var(--rw-green)}
.rwc-step.y{background:rgba(247,192,58,.16)}.rwc-step.y i{color:var(--rw-yellow)}
.rwc-step.b{background:rgba(72,178,204,.13)}.rwc-step.b i{color:var(--rw-blue)}
.rwc-step.c{background:rgba(239,102,83,.12)}.rwc-step.c i{color:var(--rw-coral)}

/* offers coming-soon panel */
.rwc-soon{display:grid;grid-template-columns:1fr 1.35fr;min-height:clamp(17rem,26vw,21rem)}
.rwc-soon-copy{background:var(--rw-green);color:#fff;padding:clamp(1.8rem,3vw,2.8rem);display:flex;flex-direction:column;justify-content:center}
.rwc-soon-copy b{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;line-height:1}
.rwc-soon-copy em{font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;margin-bottom:1em;display:block}
.rwc-soon-copy p{font-size:var(--fs-small);margin:1em 0 1.4em;max-width:44ch}
.rwc-soon-media{position:relative;overflow:hidden}
.rwc-soon-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* photo strip */
.rwc-strip{overflow:hidden;position:relative}
.rwc-track{display:flex;gap:clamp(.6rem,1vw,1rem);width:max-content;animation:rwcscroll 48s linear infinite;will-change:transform}
@media(hover:hover){.rwc-strip:hover .rwc-track{animation-play-state:paused}}
.rwc-track img{height:clamp(13rem,20vw,16.5rem);width:auto;display:block}
@keyframes rwcscroll{to{transform:translateX(calc(-50% - clamp(.3rem,.5vw,.5rem)))}}

/* offer cards + live filter */
.card-tag.rwg{background:var(--rw-green)}
.card-tag.rwy{background:var(--rw-yellow)}
.card-tag.rwb{background:var(--rw-blue)}
.card-tag.rwp{background:var(--rw-plum)}
.card-tag.rwc{background:var(--rw-coral)}
.card-tag2{position:absolute;right:0;top:1em;background:rgba(18,67,67,.85);color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.04em;padding:.45em 1em}
.rwc-hide{display:none!important}
.rwc-pop{animation:rwcpop .5s cubic-bezier(.22,.9,.35,1) both}
@keyframes rwcpop{from{opacity:0;transform:translateY(.9rem)}to{opacity:1;transform:none}}

/* business band */
.rwc-biz{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.rwc-biz-media{position:relative;height:clamp(20rem,30vw,25rem)}
.rwc-biz-media img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 0,100% 0,100% calc(100% - 2.2rem),0 100%)}
.rwc-biz ul{list-style:none;margin:1.2em 0 1.6em}
.rwc-biz li{font-size:var(--fs-small);padding:.42em 0 .42em 2.2em;position:relative;font-weight:500}
.rwc-biz li i{position:absolute;left:0;top:.42em;font-style:normal;font-weight:800;color:var(--rw-yellow)}
.rwc-btns{display:flex;gap:.8em;flex-wrap:wrap}

@media(max-width:860px){
  .rwc-intro,.rwc-biz,.rwc-soon{grid-template-columns:1fr}
  .rwc-tiers,.rwc-steps{grid-template-columns:1fr 1fr}
  .rwc-tiers .rwc-tier:nth-child(5){grid-column:1/-1;min-height:12rem}
  .rwc-collage{height:20rem}
  .rwc-soon-media{min-height:14rem}
}

/* ================= Who We Are page ================= */
/* sticky scrollspy subnav */
.wwa-subnav{
  position:sticky;top:0;z-index:50;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.45em;
  padding:clamp(1.35rem,1.8vw,1.6rem) clamp(5rem,8vw,7rem);
  background:rgba(255,255,255,.88);backdrop-filter:blur(0.75rem);-webkit-backdrop-filter:blur(0.75rem);
  border-bottom:0.0625rem solid rgba(29,29,27,.08);
}
.hero.wwa-tall{min-height:calc(100svh - 5.4rem);align-items:flex-end}
.hero.wwa-tall .hero-scrim{background:linear-gradient(rgba(5,98,105,.36),rgba(5,98,105,.36)),linear-gradient(180deg,rgba(18,67,67,.45) 0%,rgba(18,67,67,0) 22%),linear-gradient(0deg,rgba(18,67,67,.92) 0%,rgba(18,67,67,.62) 34%,rgba(18,67,67,0) 74%)}
.hero.wwa-tall .hero-content{margin-top:0;padding-bottom:clamp(3.4rem,7vh,5.2rem);display:flex;justify-content:center}
/* tall inner-page heroes: cue sits bottom-centre on its own line, text
   block lifts clear of it. Legibility comes from the deepened scrim plus
   a wide soft glow behind the type — never a hard drop shadow. */
.hero.wwa-tall .scroll-cue{left:50%;right:auto;transform:translateX(-50%)}
.hero.wwa-tall .hero-content{padding-bottom:clamp(6.5rem,13vh,9.5rem)}
.hero.wwa-tall .hero-text{text-align:center;text-shadow:0 .08em 2.2em rgba(18,67,67,.55)}
.hero.wwa-tall .hero-text h1{margin-inline:auto}
.hero.wwa-tall .hero-text .sub{margin-inline:auto}
.wwa-subnav a{text-decoration:none}
.wwa-subnav .filter.active{background:var(--teal);border-color:var(--teal);color:#fff}

/* tighter vertical rhythm for stacked people sections */
.section.wwa-tight{padding-top:clamp(2.8rem,5.5vw,5rem);padding-bottom:clamp(2.8rem,5.5vw,5rem)}
.wwa-stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.8rem);margin:clamp(1.4rem,2.2vw,2rem) 0 clamp(1.2rem,2vw,1.8rem)}
.wwa-stats3 .stat{border-left:.35rem solid var(--sc,var(--teal));padding:.5em 0 .5em 1.1em}
.wwa-stats3 .stat .n{display:block;min-height:1.15em;font-variant-numeric:tabular-nums;color:var(--sc,var(--teal))}
.wwa-stats3 .stat .bar{display:none}
.wwa-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,2.8rem);align-items:start;max-width:70rem}
#getting-here .stack{grid-auto-rows:clamp(2.4rem,5vw,4.5rem)}

/* slim section header: heading left, intro right */
.wwa-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.wwa-head .accent-par{max-width:44ch;margin:0 0 1.2rem}

/* statement with line-mask reveals */
.wwa-st.reveal{opacity:1;transform:none}
.wwa-statement{font-size:clamp(1.7rem,2.9vw,2.6rem);font-weight:800;line-height:1.14;color:var(--teal-deep);margin-bottom:clamp(1.2rem,2vw,1.8rem);max-width:26em}
.wwa-statement em{font-style:normal}
.wwa-statement em.t{color:var(--teal)}
.wwa-statement em.l{color:var(--lime)}
.wwa-statement em.o{color:var(--orange)}
.mline{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.mline>span{display:block;transform:translateY(115%);transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.mline:nth-child(2)>span{transition-delay:.12s}
.mline:nth-child(3)>span{transition-delay:.24s}
.wwa-st.in .mline>span{transform:none}

/* vision band: parallax + angled panel */
.wwa-vision{position:relative;overflow:hidden;color:#fff}
.wwa-vision .plx{position:absolute;inset:-12% 0;z-index:0}
.wwa-vision .plx img{width:100%;height:100%;object-fit:cover;will-change:transform}
.wwa-vision .panel{
  position:absolute;inset:0;z-index:1;background:rgba(10,74,77,.9);
  clip-path:polygon(0 0,62% 0,48% 100%,0 100%);
}
.wwa-vision .inner{position:relative;z-index:2;padding:clamp(4rem,6.5vw,6.5rem) var(--pad-x);max-width:47rem}
.wwa-vision .inner p{font-size:var(--fs-body);color:rgba(255,255,255,.93);max-width:46ch;margin-top:1em;line-height:1.65}
.wwa-vision .vlead{font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:800;line-height:1.2;max-width:20em}
.wwa-chip{display:inline-block;background:var(--lime);color:#fff;padding:.9em 1.4em;margin-top:1.6em;font-size:var(--fs-small);font-weight:600}
.wwa-chip b{display:block;font-size:2.1em;font-weight:800;line-height:1.1}

/* team spotlight: portrait stage + typographic roster */
.wwa-spot{display:grid;grid-template-columns:minmax(0,19rem) 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.wwa-stage{position:relative;aspect-ratio:4/5;overflow:hidden}
.wwa-stage::after{content:"";position:absolute;left:0;bottom:0;width:34%;height:.4rem;background:var(--sc,var(--teal));transition:background .4s ease}
.wwa-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .55s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.wwa-stage img.on{opacity:1;transform:none}
.wwa-roster{display:flex;flex-direction:column;justify-content:center}
.wwa-roster button{
  text-align:left;background:none;border:0;border-top:0.0625rem solid var(--grey);cursor:pointer;font-family:inherit;
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;
  padding:clamp(1rem,1.8vw,1.5rem) .2em;transition:padding-left .35s ease;position:relative;
}
.wwa-roster button:last-child{border-bottom:0.0625rem solid var(--grey)}
.wwa-roster button::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:0;height:55%;background:var(--rc,var(--teal));transition:width .35s ease}
.wwa-roster button.on{padding-left:1.1em}
.wwa-roster button.on::before{width:.35rem}
.wwa-roster b{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:800;color:#c3c3c0;transition:color .35s ease;line-height:1.15}
.wwa-roster button.on b,.wwa-roster button:hover b{color:var(--teal-deep)}
.wwa-roster span{font-size:var(--fs-small);color:#6b6b69;white-space:nowrap}

/* board grid */
.wwa-board{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.4rem);max-width:62rem}
.wwa-bcard{min-width:0}
.wwa-bcard .bimg{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--teal-deep)}
.wwa-bcard .bimg img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;filter:grayscale(1);transition:filter .45s ease;pointer-events:none}
.wwa-bcard .bimg::after{content:"";position:absolute;inset:0;background:var(--teal);mix-blend-mode:color;opacity:.5;transition:opacity .45s ease;pointer-events:none}
.wwa-bcard:hover .bimg img{filter:none}
.wwa-bcard:hover .bimg::after{opacity:0}
.wwa-bcard b{display:block;margin-top:.8em;font-size:1rem;font-weight:800;color:var(--teal-deep);line-height:1.25}
.wwa-bcard span{font-size:.8rem;color:#6b6b69;line-height:1.4;display:block}
/* magnetised stack (pointer repulsion, homepage pattern) */
.stack.magnet .p1{transform:rotate(-1.6deg) translate(var(--smx1,0),var(--smy1,0))}
.stack.magnet .p2{transform:rotate(1.4deg) translate(var(--smx2,0),var(--smy2,0))}
.stack.magnet .chip{transform:rotate(-1deg) translate(var(--smx3,0),var(--smy3,0))}

/* getting here mode cards */
.wwa-modes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.4vw,1.2rem);margin-top:1.4rem}

@media(max-width:860px){
  /* phones: one scrollable chip row under the hero — static, so it never
     fights the fixed brand bar for the top edge */
  .wwa-subnav{
    position:static;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.9rem var(--pad-x);
  }
  .wwa-subnav::-webkit-scrollbar{display:none}
  .wwa-subnav .filter{flex:none}
  .wwa-vision .panel{clip-path:none;background:rgba(10,74,77,.82)}
  .wwa-modes{grid-template-columns:1fr}
}

/* phones only: the team spot stacks and the board goes two-up. Tablets keep
   the desktop arrangement – a full-bleed portrait on an iPad looked absurd. */
@media(max-width:640px){
  .wwa-spot{grid-template-columns:1fr}
  .wwa-board{grid-template-columns:repeat(2,1fr)}
}

/* ================= Our Work page ================= */
/* event mosaic strip */
.ow-mosaic{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.7rem,1.2vw,1.1rem);margin:clamp(1.2rem,2vw,1.8rem) 0}
.ow-tile{position:relative;aspect-ratio:16/9;overflow:hidden}
.ow-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .45s ease,transform .6s ease}
.ow-tile::after{content:"";position:absolute;inset:0;background:var(--tc,var(--orange));mix-blend-mode:color;opacity:.5;transition:opacity .45s ease;pointer-events:none}
.ow-tile:hover img{filter:none;transform:scale(1.04)}
.ow-tile:hover::after{opacity:0}
.ow-statile{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;padding:1em 1.1em;color:#fff;font-size:var(--fs-small);font-weight:600;line-height:1.35}
.ow-statile b{font-size:2.3em;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}

/* theme content: copy | compact delivery items */
.ow-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.8rem,3.5vw,3.5rem);align-items:start}
.ow-items{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,1.6vw,1.4rem) clamp(1.2rem,2.2vw,2rem)}
.ow-item{font-size:var(--fs-small);line-height:1.45;padding-left:1em;position:relative}
.ow-item::before{content:"";position:absolute;left:0;top:.35em;width:.55em;height:.55em;background:var(--tc,var(--orange));clip-path:polygon(0 0,100% 15%,85% 100%,0 90%)}
.ow-item b{display:block;font-weight:800;color:var(--teal-deep)}

/* compact horizontal stat */
.ow-stat{display:flex;align-items:center;gap:1.1em;margin-top:1.2rem}
.ow-stat .n{font-size:2.1rem;flex:0 0 auto}
.ow-stat .bar{display:none}
.ow-stat p{margin:0}

/* before / after crossfade toggle */
.ow-ba{position:relative;max-width:26rem}
.ow-ba .frame{position:relative;aspect-ratio:16/10;overflow:hidden}
.ow-ba .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease}
.ow-ba .frame img.after{opacity:0}
.ow-ba.show-after .frame img.after{opacity:1}
.ow-ba .tag{position:absolute;left:0;top:0;z-index:2;background:var(--teal);color:#fff;font-size:var(--fs-small);font-weight:700;padding:.35em 1em;text-transform:uppercase;letter-spacing:.1em;transition:background .4s ease}
.ow-ba.show-after .tag{background:var(--lime)}
.ow-ba .ctl{position:absolute;right:.9rem;bottom:.9rem;z-index:2;display:flex;background:rgba(255,255,255,.92);padding:.25em;gap:.25em}
.ow-ba .ctl button{font-family:inherit;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:0;background:transparent;color:var(--teal);padding:.5em 1.1em;cursor:pointer;transition:all .25s ease}
.ow-ba .ctl button.on{background:var(--teal);color:#fff}

/* voices spotlight */
.ow-voices{display:grid;grid-template-columns:minmax(0,20rem) 1fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.ow-vlist{display:flex;flex-direction:column}
.ow-vlist button{
  display:flex;align-items:center;gap:1em;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;
  padding:.85em .4em;border-top:0.0625rem solid var(--grey);transition:opacity .3s ease;opacity:.55;
}
.ow-vlist button:last-child{border-bottom:0.0625rem solid var(--grey)}
.ow-vlist button.on,.ow-vlist button:hover{opacity:1}
.ow-vlist img{width:3.4rem;height:3.4rem;border-radius:50%;object-fit:cover;flex:0 0 auto;border:.18rem solid var(--vc,var(--teal))}
.ow-vlist b{display:block;font-size:.95rem;font-weight:800;color:var(--teal-deep);line-height:1.2}
.ow-vlist span{font-size:.78rem;color:#6b6b69;line-height:1.3;display:block}
.ow-quote{position:relative;min-height:16rem;display:flex;flex-direction:column;justify-content:center}
.ow-quote .qm{position:absolute;top:-.35em;left:-.08em;font-size:7rem;line-height:1;color:var(--vc,var(--teal));opacity:.16;font-weight:800;pointer-events:none}
.ow-quote blockquote{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(.5rem);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.ow-quote blockquote.on{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
.ow-quote p{font-size:clamp(1.05rem,1.7vw,1.45rem);font-weight:600;line-height:1.55;color:var(--teal-deep);max-width:34em}
.ow-quote .who{margin-top:1.1em;font-size:var(--fs-small);color:#6b6b69}
.ow-quote .who b{display:block;color:var(--teal-deep);font-weight:800}

#business-investment .stack{grid-auto-rows:clamp(2.6rem,4.6vw,4.2rem)}
@media(max-width:860px){
  .ow-mosaic{grid-template-columns:1fr 1fr}
  .ow-grid,.ow-voices{grid-template-columns:1fr}
  .ow-items{grid-template-columns:1fr}
}

/* ================= phone-width polish (home) ================= */
/* marquee on phones: exactly the section-pill size ('In Bromley This
   Season'), movement JS-driven (hold to pause, drag to read ahead) */
@media(max-width:640px){
  .marquee{font-size:1rem;letter-spacing:.08em;padding:.8em 0}
  .marquee em{padding:0 1.1em}
}
/* phones: one continuous scrim wash — dark enough at the top for the brand
   bar, carrying through the middle where the text sits, deep at the base */
@media(max-width:640px){
  .hero-scrim{background:linear-gradient(180deg,rgba(18,67,67,.62) 0%,rgba(18,67,67,.42) 42%,rgba(18,67,67,.58) 68%,rgba(18,67,67,.9) 100%)}
}
/* ================= news & features: editorial feed ================= */
.nf-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.nf-feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:clamp(20rem,30vw,26rem)}
.nf-feature .nf-media{position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,calc(100% - 2.4rem) 100%,0 100%)}
.nf-feature .nf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.nf-feature:hover .nf-media img{transform:scale(1.05)}
.nf-feature .nf-body{display:flex;flex-direction:column;justify-content:center;gap:.35em;padding:clamp(1.6rem,3vw,3rem)}
.nf-feature h2{font-size:clamp(1.45rem,2.5vw,2.3rem);font-weight:800;line-height:1.16;color:var(--teal-deep);max-width:18ch}
.nf-feature .exc{font-size:var(--fs-small);color:#6b6b69;max-width:46ch;margin-bottom:.6em}
.nf-feature .arrow-link{align-self:flex-start}
.nf-meta{display:flex;gap:1em;align-items:baseline;font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#9a9a98;margin-bottom:.55em}
.nf-meta b{color:var(--teal)}
.nf-card .card-media{aspect-ratio:16/10}
.nf-card h5{font-size:1.1rem;font-weight:800;line-height:1.3;margin-bottom:.4em}
.nf-card .exc,.nf-feature .exc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nf-empty{display:none;text-align:center;padding:clamp(3rem,7vw,6rem) 1rem;color:#6b6b69}
.nf-empty b{display:block;font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:800;color:var(--teal-deep);margin-bottom:.4em}
.nf-empty.show{display:block}
@media(max-width:1020px){.nf-feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .nf-feed{grid-template-columns:1fr}
  .nf-feature{grid-template-columns:1fr;min-height:0}
  .nf-feature .nf-media{clip-path:polygon(0 0,100% 0,100% calc(100% - 1.2rem),0 100%);aspect-ratio:16/10}
  .nf-feature .nf-media img{position:absolute}
  .nf-feature .nf-body{padding:1.3rem 1.35rem 1.5rem}
}

/* ================= watch-the-film: hero chip + fullscreen lightbox ================= */
.rwc-play{display:inline-flex;align-items:center;gap:.75em;color:#fff;text-decoration:none;font-weight:700;font-size:var(--fs-small);letter-spacing:.02em;margin-top:1.3rem}
.rwc-play i{position:relative;width:3em;height:3em;border-radius:50%;background:var(--rw-yellow);display:inline-flex;align-items:center;justify-content:center;font-style:normal;flex:none;transition:transform .3s ease}
.rwc-play .tri{width:.8em;height:.9em;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);margin-left:.18em}
.rwc-play i::before{content:"";position:absolute;inset:0;border-radius:50%;border:.14rem solid rgba(247,192,58,.7);animation:playPulse 2.4s ease-out infinite}
.rwc-play:hover i{transform:scale(1.08)}
@keyframes playPulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.rwc-play i::before{animation:none}}

.film-lb{
  position:fixed;inset:0;z-index:120;background:rgba(9,40,42,.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  padding:clamp(1rem,4vw,3rem);cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;
}
.film-lb.on{opacity:1;visibility:visible;transition:opacity .35s ease}
.flb-player{width:min(78rem,100%)}
.flb-player video{display:block;width:100%;max-height:80vh;background:#000;box-shadow:0 2rem 6rem rgba(0,0,0,.55);cursor:auto}
.flb-player iframe{display:block;width:100%;aspect-ratio:16/9;max-height:80vh;border:0;background:#000;box-shadow:0 2rem 6rem rgba(0,0,0,.55)}
.flb-cap{color:rgba(255,255,255,.72);font-size:var(--fs-small);font-weight:600;letter-spacing:.05em;text-align:center}
.flb-x{
  position:absolute;top:1.2rem;right:1.4rem;width:2.9rem;height:2.9rem;border-radius:50%;
  border:.12rem solid rgba(255,255,255,.55);background:none;color:#fff;font-size:1.1rem;
  cursor:pointer;transition:all .25s ease;font-family:inherit;
}
.flb-x:hover{background:#fff;color:var(--teal-deep)}

/* phones: the four BID stats sit two-by-two; 12,000 stays 12,000 — the
   number just sizes to the half-column */
@media(max-width:860px){
  #about-bid .stat-row{grid-template-columns:repeat(2,1fr);gap:1.5rem 1.2rem;margin-top:1.4rem}
  #about-bid .stat{padding:0;margin:0}
  #about-bid .stat .n{font-size:clamp(1.85rem,7.2vw,2.4rem)}
  #about-bid .stat p{font-size:.8rem;max-width:none}
  #about-bid .stat .src{font-size:.66rem}
}

/* touch devices: no hover states, and no hover leftovers stuck after a tap */
@media(hover:none){
  .burger:hover{background:rgba(18,67,67,.35);border-color:rgba(255,255,255,.85)}
  .card:hover{transform:none;box-shadow:0 0.375rem 1.375rem rgba(29,29,27,.09)}
  .card:hover .card-media img{transform:none}
  .tint-block:hover{transform:none;box-shadow:none}
  .doc:hover{border-color:var(--grey);transform:none}
  .theme-block:hover{transform:none}
  .theme-block:hover p{opacity:.94}
  .theme-block:hover .tb-bg::after{opacity:.35}
  .rwc-tier:hover img{transform:none}
  .m-tile:hover img{transform:none}
  .nf-feature:hover .nf-media img{transform:none}
  .ig-hover{display:none}
  .rwc-play:hover i{transform:none}
  .socials a:hover{background:none;border-color:rgba(255,255,255,.4);color:inherit;transform:none}
  .news-row::before{display:none}
  .news-row.on .nr-num{color:var(--grey-blue)}
  .news-row.on .nr-meta{color:#9a9a98}
  .news-row.on .nr-body b{color:inherit;transform:none}
}

/* footer socials carry real glyphs, not initials */
.socials a{color:#fff}
.socials a svg{width:1.05rem;height:1.05rem;fill:currentColor;display:block}

/* phones: reveals travel further and later, so the slide-in actually
   happens where you can see it — dynamic, not "already there" */
@media(max-width:860px){
  .js .reveal{transform:translateY(2.2rem)}
}

/* ================= inner pages: phone optimisation ================= */
/* tighter vertical rhythm — the same content in fewer scrolls */
@media(max-width:640px){
  :root{--pad-y:2.7rem}
}

/* card rails on phones: the platform's own horizontal scroller with
   scroll-snap. A native scroller physically cannot scroll past its last
   item (the browser clamps, and overscroll-behavior:none removes the end
   bounce), and overflow-y:clip means the box has NO vertical scroll
   mechanism — a thumb anchored on a card pans the page, arbitrated by iOS
   itself. The old transform-driven rail produced real-device bugs in all
   three of those areas; this construction makes them impossible. */
@media(max-width:860px){
  .cards-row{
    display:flex;gap:.8rem;
    overflow-x:auto;overflow-y:clip;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad-x);
    overscroll-behavior-x:none;
    touch-action:pan-x pan-y pinch-zoom;
    scrollbar-width:none;
    margin-inline:calc(-1 * var(--pad-x));padding:.2rem var(--pad-x) 1rem;
  }
  .cards-row::-webkit-scrollbar{display:none}
  .cards-row .card{flex:0 0 min(76vw,20rem);scroll-snap-align:center;min-width:0}
}

/* filter chips ride in one scrollable row, same language as the subnav */
@media(max-width:640px){
  .filter-row{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * var(--pad-x));padding-inline:var(--pad-x);padding-bottom:.4rem;
  }
  .filter-row::-webkit-scrollbar{display:none}
  .filter-row .filter{flex:none}
  /* the news category bar is a page-level subnav that also filters; the
     bleed above is for rows inside padded sections and would pin its first
     chip to the viewport edge, so it keeps the subnav's own padding. Its
     three chips centre as one group – via auto margins, so a very narrow
     screen falls back to a scrollable row instead of clipping the ends */
  .wwa-subnav.filter-row{margin-inline:0;padding-inline:var(--pad-x)}
  .wwa-subnav.filter-row .filter:first-child{margin-left:auto}
  .wwa-subnav.filter-row .filter:last-child{margin-right:auto}
}

/* who we are: levy stats two-up (third spans), body copy single column,
   board grid tightened */
@media(max-width:640px){
  .wwa-stats3{grid-template-columns:1fr 1fr;gap:1.2rem 1rem}
  .wwa-stats3 .stat:last-child{grid-column:1/-1}
  .wwa-cols{grid-template-columns:1fr;gap:1rem}
  .wwa-board{gap:.85rem .6rem}
  .wwa-bcard b{font-size:.82rem;margin-top:.6em}
  .wwa-bcard span{font-size:.68rem}
}

/* our work: mosaics and theme lists lose dead air */
@media(max-width:640px){
  .ow-items{gap:.75rem}
  .ow-mosaic{gap:.55rem}
}

/* business hub: support cards tighten */
@media(max-width:640px){
  .tint-block{padding:1.15em 1.2em}
}

/* ================= anchor landings ================= */
/* every in-page jump lands its section flush under the sticky bars, so
   the section's own top padding frames the heading — never the heading
   jammed against the menu */
[id]{scroll-margin-top:6rem}
@media(min-width:861px){
  [id]{scroll-margin-top:5.4rem}
}

/* our work: theme heads align the accent line with the copy column below —
   deliberate columns, not an accidental gap */
.wwa-head.ow-head-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.8rem,3.5vw,3.5rem);align-items:end}
.wwa-head.ow-head-grid .accent-par{max-width:none}
@media(max-width:860px){.wwa-head.ow-head-grid{grid-template-columns:1fr}}

/* angled tops that follow a tinted section: the wedge carries that
   section's colour instead of exposing the white page behind it */
.angle-top.from-fafafa{clip-path:none}
.angle-top.from-fafafa::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:clamp(1.5rem,4vw,4rem);
  background:#fafafa;clip-path:polygon(0 0,100% 0,0 100%);pointer-events:none;z-index:1;
}
.angle-top.from-teal{clip-path:none}
.angle-top.from-teal::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:clamp(1.5rem,4vw,4rem);
  background:var(--teal);clip-path:polygon(0 0,100% 0,0 100%);pointer-events:none;z-index:1;
}

/* ================= phones: the full-screen menu fills its canvas ================= */
/* bigger type, taller rhythm, list starting high — real air left at the
   bottom for the strap and the B watermark. All fluid, no fixed widths. */
@media(max-width:640px){
  .menu{justify-content:flex-start;padding-top:calc(clamp(.8rem,1.6vw,1.3rem)*2 + 3.5rem + 4svh);padding-bottom:6.5rem}
  .menu nav{gap:clamp(.5em,1.7svh,.9em)}
  .menu nav a{font-size:clamp(1.9rem,8.4vw,2.5rem);line-height:1.32}
  .menu nav a.menu-extra{margin-top:clamp(1.5rem,4svh,2.4rem);font-size:clamp(.95rem,4vw,1.15rem)}
  .menu-foot{right:auto;left:var(--pad-x);bottom:2.2rem}
}

/* ================= phones: floating section pill + bottom sheet ================= */
/* the sticky subnav's mobile counterpart: scroll past the chip row and a
   pill rises showing the section you're in; tap for the section sheet */
.secpill{
  position:fixed;left:50%;bottom:calc(1.1rem + env(safe-area-inset-bottom));z-index:54;
  transform:translateX(-50%) translateY(5rem);
  display:flex;align-items:center;gap:.65em;
  background:var(--teal-deep);color:#fff;border:0;border-radius:999rem;
  padding:.72em 1.5em;font-family:inherit;font-weight:700;font-size:.86rem;letter-spacing:.02em;
  box-shadow:0 .6rem 2rem rgba(9,40,42,.4);cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .4s cubic-bezier(.22,.9,.35,1);
}
.secpill.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.secpill i{width:.5em;height:.5em;border-right:.16em solid var(--lime);border-top:.16em solid var(--lime);transform:rotate(-45deg) translateY(.1em);flex:none}
.secsheet{
  position:fixed;inset:0;z-index:59;background:rgba(9,40,42,.55);
  display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
}
.secsheet.on{opacity:1;visibility:visible;transition:opacity .3s ease}
.ss-card{
  width:100%;background:var(--teal);color:#fff;
  border-radius:1.2rem 1.2rem 0 0;
  padding:1rem var(--pad-x) calc(1.5rem + env(safe-area-inset-bottom));
  transform:translateY(2.5rem);transition:transform .4s cubic-bezier(.22,.9,.35,1);
}
.secsheet.on .ss-card{transform:none}
.ss-grab{width:2.6rem;height:.28rem;border-radius:99rem;background:rgba(255,255,255,.35);margin:0 auto .9rem}
.ss-card a{
  display:flex;gap:1em;align-items:baseline;color:#fff;text-decoration:none;
  font-weight:800;font-size:1.14rem;padding:.68em 0;
  border-bottom:.0625rem solid rgba(255,255,255,.12);
}
.ss-card a:last-child{border-bottom:0}
.ss-card a i{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.18em;color:var(--lime)}
@media(min-width:861px){.secpill,.secsheet{display:none!important}}

/* phones: rails move sideways ONLY (no diagonal wobble), the next card
   peeks properly, and edge arrows make the flick-through explicit */
@media(max-width:860px){
  .cards-row .card{flex:0 0 72vw}
  .m-hide{display:none}
}
.rail-wrap{position:relative}
.rail-btn{
  position:absolute;top:38%;z-index:5;width:2.5rem;height:2.5rem;border-radius:50%;
  border:0;background:rgba(18,67,67,.85);color:#fff;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 .35rem 1rem rgba(9,40,42,.3);transition:opacity .25s ease;
}
.rail-btn::before{content:"";width:.6em;height:.6em;border-right:.18em solid #fff;border-top:.18em solid #fff}
.rail-btn.prev{left:.4rem}.rail-btn.prev::before{transform:rotate(-135deg) translate(-.06em,.06em)}
.rail-btn.next{right:.4rem}.rail-btn.next::before{transform:rotate(45deg) translate(-.06em,.06em)}
.rail-btn.off{opacity:0;pointer-events:none}
@media(min-width:861px){.rail-btn{display:none}}

/* home RW promo on phones: the orange band breathes — kicker clear of
   the top wedge, collage chip clear of the base */
@media(max-width:640px){
  #rw-promo{padding-top:4.2rem;padding-bottom:3.8rem}
}

/* ================= phones: meet-the-team pins like the numbers story ================= */
/* the spot keeps its exact design — photo stage above the full roster
   rows (names, roles, accent bars). The only addition: it pins while
   scrolling flips through the people. */
@media(max-width:640px){
  .team-track{height:250vh}
  .team-track .wwa-spot{position:sticky;top:3.4rem}
}

/* ================= phones: one reading size ================= */
/* bullets, list items, cards and doc rows read at body size — labels,
   kickers and meta stay small. No tiny text next to paragraphs. */
@media(max-width:640px){
  .ow-item,.tb-list li,.tint-block,.rwc-biz li,.bullet-list li,
  .card-body p,.deck-body p,.rwc-step,.theme-block p{font-size:var(--fs-body)}
  .doc b{font-size:var(--fs-body)}
  .doc span{font-size:.8rem}
  /* the collage chip is taller than its grid row — clear its spill so it
     never sits on the copy below */
  .stack{margin-bottom:3.4rem}
  #getting-here .stack{margin-bottom:2.6rem}
  /* phones: the floating stat chip spans 4 of 10 columns on desktop, which
     at phone width squeezes its caption to one or two words a line. Six of
     ten keeps the photos visible either side while the caption sits at
     three to four lines. */
  .stack .chip{grid-column:3/9}
}

/* phones: angled tops eat into the section padding — give every angled
   section (and its wedge variants) its breathing room back */
@media(max-width:640px){
  .angle-top{padding-top:4.3rem}
}

/* ================= absolute horizontal lock ================= */
/* every section clips its own sideways overflow (rotated collage corners
   etc.), so the document NEVER has horizontal pixels for a cancelled
   edge-swipe to pan onto. clip, never hidden: no scroll containers, so
   position:sticky is untouched. */
.section,.site-footer{overflow-x:clip}

/* phones: the Restaurant Week hero takes the full viewport — text sits
   low, Fred's face framed clear above it */
@media(max-width:640px){
  /* the face band ends at 38% of the hero (fixed by the phone rendition);
     the text is TOP-anchored at 42svh — true device viewport units — so
     no browser chrome or screen shape can ever push it up onto the face */
  .rw-page .hero{min-height:100svh;align-items:flex-start}
  .rw-page .hero .hero-content{padding-top:41svh;padding-bottom:4.5rem;margin-top:0}
  .rw-page .hero .rwc-logo img{width:min(17rem,62vw)}
  .rw-page .hero .sub{font-size:.95rem;line-height:1.5}
  .rw-page .hero .rwc-play{margin-top:.9rem}
}

/* phones: RW price tiers — label panels share one fixed height (price is
   not an illustration of panel size), and the £20 tile frames the pull */
@media(max-width:860px){
  .rwc-tiers .rwc-tier{min-height:19rem}
  .rwc-tiers .rwc-tier:nth-child(5){min-height:15rem}
  .rwc-tier .tp{min-height:7.6rem;display:flex;flex-direction:column;justify-content:flex-start}
  .rwc-tier.p img{object-position:46% 22%}
}
/* the RW chip row exists for phones only — desktop keeps its hero-led design */
@media(min-width:861px){
  .rw-page .wwa-subnav{display:none}
}

/* ================= RW photo strip: tap to view, never freezes ================= */
.rwc-strip{cursor:pointer}
.img-lb{
  position:fixed;inset:0;z-index:120;background:rgba(9,40,42,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;cursor:pointer;
}
.img-lb.on{opacity:1;visibility:visible;transition:opacity .3s ease}
.img-lb img{max-width:100%;max-height:88vh;box-shadow:0 2rem 6rem rgba(0,0,0,.5)}
/* phones: For Businesses meets the flat strip with a flat top — the slant
   below it lives on via the FAQ section's own angled edge */
@media(max-width:640px){
  .rwc-strip{margin-bottom:1.7rem}
  .rw-page #for-businesses{clip-path:none;padding-top:2.8rem}
}

/* the transform rail: the inner row carries the cards, the rail just clips.
   flex:none so the rail's flex layout can never squeeze the row down */
@media(max-width:860px){
}

/* ---------- event + offer detail pages ---------- */
/* recap chips: a past event's date tag goes slate so the rail reads honestly */
.card-tag.slate{background:#5B6770}

/* the Midsummer-style programme: day columns on teal */
.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:clamp(1.6rem,3.5vw,3.2rem);margin-top:1.4rem}
.prog h4{font-weight:800;font-size:1.05rem;letter-spacing:.02em;margin-bottom:.65em;color:var(--lime)}
.prog-row{display:flex;align-items:baseline;gap:.9em;padding:.6em 0;border-bottom:1px solid rgba(255,255,255,.22)}
.prog-row:last-child{border-bottom:0}
.prog-row .t{font-weight:800;min-width:3.4em;flex:0 0 auto}
.prog-row .n{flex:1 1 auto;font-weight:600}
.prog-row .d{opacity:.72;font-size:.82em;flex:0 0 auto;white-space:nowrap}
.shead.lime-pill{--sh:var(--lime);color:#fff}

/* the facts band: labelled callouts on teal — information, not navigation */
.ev-facts{
  background:var(--teal);color:#fff;
  padding:clamp(1.7rem,3vw,2.6rem) var(--pad-x);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));
  gap:1.2rem clamp(1.6rem,3vw,2.8rem);
}
.ev-facts .ef{border-left:.22rem solid var(--lime);padding-left:.9em}
.ev-facts .ef span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--lime);margin-bottom:.4em}
.ev-facts .ef b{font-weight:700;font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.35}
@media(max-width:640px){
  .ev-facts{grid-template-columns:1fr 1fr;gap:1.4rem 1.3rem}
}

/* the story: text and pictures interleaved, never a wall of columns */
.es-open{
  display:grid;grid-template-columns:1.02fr .98fr;
  grid-template-areas:"lead fig" "text fig";
  column-gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
  margin-bottom:clamp(2.2rem,4.5vw,3.8rem);
}
.es-open .lead{grid-area:lead}
.es-open .es-fig{grid-area:fig;align-self:center}
.es-open .es-text{grid-area:text}
.es-fig{overflow:hidden;box-shadow:0 .9rem 2.2rem rgba(29,29,27,.2);transform:rotate(1.2deg);margin:0}
.es-fig img{width:100%;display:block}
.es-strip{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.9rem,1.8vw,1.4rem);
  margin-bottom:clamp(2.2rem,4.5vw,3.8rem);
}
.es-strip figure{overflow:hidden;box-shadow:0 .6rem 1.6rem rgba(29,29,27,.16);margin:0}
.es-strip figure:first-child{transform:rotate(-.6deg)}
.es-strip figure:last-child{transform:rotate(.6deg)}
.es-strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;display:block}
.es-close{
  display:grid;grid-template-columns:1.02fr .98fr;
  column-gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
}
.es-aside{
  background:#fff;border-top:.3rem solid var(--orange);
  box-shadow:0 .9rem 2.4rem rgba(29,29,27,.13);
  padding:clamp(1.4rem,2.2vw,1.9rem);
}
.es-aside h4{font-weight:800;color:var(--teal-deep);font-size:1.05rem;margin-bottom:.8em}
.es-aside ul{list-style:none;margin:0 0 .3em;padding:0}
.es-aside li{font-size:var(--fs-small);font-weight:600;line-height:1.4;padding:.34em 0 .34em 1.35em;position:relative;color:var(--ink)}
.es-aside li::before{content:"";position:absolute;left:0;top:.78em;width:.55em;height:.55em;background:var(--orange);clip-path:polygon(0 0,100% 15%,85% 100%,0 90%)}
@media(max-width:860px){
  .es-open{display:block}
  .es-open .es-fig{margin:1.3rem 0 1.4rem}
  .es-close{display:block}
  .es-aside{margin-top:1.6rem}
  .es-aside li{font-size:var(--fs-body)}
}

/* the mosaic: alternating wide/narrow tiles, tap to enlarge */
.ev-mosaic{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(8rem,12.5vw,11.5rem);
  gap:clamp(.7rem,1.3vw,1.1rem);margin-top:1.6rem;
}
.ev-mosaic figure{overflow:hidden;position:relative;margin:0}
.ev-mosaic figure:nth-child(4n+1){grid-column:span 7;grid-row:span 2}
.ev-mosaic figure:nth-child(4n+2){grid-column:span 5;grid-row:span 2}
.ev-mosaic figure:nth-child(4n+3){grid-column:span 5;grid-row:span 2}
.ev-mosaic figure:nth-child(4n){grid-column:span 7;grid-row:span 2}
.ev-mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .5s ease}
@media(hover:hover){.ev-mosaic figure:hover img{transform:scale(1.045)}}
@media(max-width:640px){
  .ev-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(8.5rem,32vw,11rem);gap:.7rem}
  .ev-mosaic figure{grid-column:span 1!important;grid-row:span 1!important}
  .ev-mosaic figure:nth-child(3n+1){grid-column:span 2!important;grid-row:span 2!important}
}

/* phones: the RW photo strip drifts via JS (the CSS animation stalls on
   some devices) — the keyframe run is desktop-only */
@media(max-width:860px){
  .rwc-strip .rwc-track{animation:none}
}

/* the privacy page's little cookie table */
.pv-table{border-collapse:collapse;margin:1rem 0;width:100%;font-size:var(--fs-small)}
.pv-table th{text-align:left;font-weight:800;color:var(--teal-deep);padding:.5em .9em .5em 0;border-bottom:.14rem solid var(--teal)}
.pv-table td{padding:.55em .9em .55em 0;border-bottom:1px solid rgba(29,29,27,.12);vertical-align:top}

/* phones: Restaurant Week venues as a two-up directory grid. A swipe rail
   gives the first venue a huge advantage over the last and cannot scale to
   the real 40-plus line-up; a grid gives every venue equal footing, scrolls
   with the page, and lets the price filters reflow it directly (a rail's
   stored position goes stale when filters hide cards – the empty-space bug). */
@media(max-width:860px){
  .rw-page .rwc-offer-cards{
    display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem .6rem;
    margin-inline:0;padding:0;overflow:visible;touch-action:auto;
  }
  .rw-page .rwc-offer-cards .card{width:auto}
  .rw-page .rwc-offer-cards .card-body{padding:.85em .9em 1em}
  .rw-page .rwc-offer-cards h5{font-size:.92rem;margin-bottom:.25em}
  .rw-page .rwc-offer-cards .card-body p{font-size:.76rem}
  .rw-page .rwc-offer-cards .card-tag{font-size:.7rem;padding:.35em .8em}
  .rw-page .rwc-offer-cards .card-logo{left:.45rem;bottom:.45rem;padding:.22rem .35rem;border-radius:.4rem}
  .rw-page .rwc-offer-cards .card-logo img{max-height:1.25rem;max-width:4.4rem}
  .rw-page .rwc-offer-cards .card-tag2{font-size:.6rem;padding:.4em .8em}
  .rw-page .rwc-offer-cards .arrow-link{font-size:.72rem}
  .rw-page .rwc-offer-cards .tc-link{font-size:.72rem}
}

/* ================= tablets (641–1100px): the hybrid tier ================= */
/* Tablets read as a roomier phone, not a shrunken desktop. Everything here
   applies between the phone band (≤640) and the desktop, so neither of
   those tiers is touched. */
@media(min-width:641px) and (max-width:1100px){
  /* the menu fills the screen the way it does on phones: big type anchored
     high, not a small block floating in space */
  .menu{justify-content:flex-start;padding-top:calc(clamp(.8rem,1.6vw,1.3rem)*2 + 3.5rem + 6svh);padding-bottom:7rem}
  .menu nav{gap:clamp(.6em,1.9svh,1em)}
  .menu nav a{font-size:clamp(2.6rem,5.4vw,3.4rem);line-height:1.3}
  .menu nav a.menu-extra{margin-top:clamp(1.6rem,4svh,2.6rem);font-size:clamp(1.05rem,2vw,1.3rem)}
  .menu-foot{right:auto;left:var(--pad-x);bottom:2.4rem}

  /* preloader lockup at twice the narrow-viewport size */
  .pre-lockup{height:clamp(7.5rem,13vw,11rem)}

  /* news feed runs three-up, as on desktop */
  .nf-feed{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* tablets, stacked zone (641-860): where the two-column splits have
   collapsed, the same clearances the phones use */
@media(min-width:641px) and (max-width:860px){
  /* the collage chip is taller than its grid row – clear its spill so it
     never sits on the copy below (Getting Here, Business & Investment) */
  .stack{margin-bottom:3.4rem}
  #getting-here .stack{margin-bottom:2.6rem}
  /* the Instagram grid fills the content width instead of holding its
     desktop column size against a dead right-hand gap */
  #follow .ig-grid{max-width:none}
}

/* touch devices browse this site portrait. Landscape on a phone or tablet
   gets a branded hold screen (injected by site.js) rather than a broken
   layout – hover:none + coarse pointer keeps every desktop and laptop out
   of this rule. */
.rotate-hold{display:none}
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:1400px){
  body{overflow:hidden}
  .rotate-hold{
    position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;
    padding:2rem 2rem calc(4.5rem + env(safe-area-inset-bottom));
    background:radial-gradient(130% 130% at 50% 28%, #086169 0%, var(--teal-deep) 52%, #032f33 100%);
    color:#fff;
  }
  .rh-phone{width:clamp(3.2rem,10vh,4.4rem);height:auto;margin-bottom:clamp(.9rem,3vh,1.5rem);
    transform:rotate(-90deg);animation:rhTurn 3.6s cubic-bezier(.34,1.35,.4,1) infinite}
  .rh-phone .rh-body{fill:none;stroke:#fff;stroke-width:2.6}
  .rh-phone .rh-speaker{stroke:rgba(255,255,255,.85);stroke-width:2.2;stroke-linecap:round}
  .rh-phone .rh-dot{fill:var(--lime)}
  .rh-title{font-weight:800;font-size:clamp(1.1rem,4vh,1.5rem);letter-spacing:.01em}
  .rh-sub{margin-top:.5em;font-size:clamp(.85rem,2.6vh,1rem);color:rgba(255,255,255,.72);font-weight:500}
  .rh-logo{position:absolute;bottom:max(1.5rem,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
    width:clamp(6.5rem,16vw,8.5rem);height:auto;opacity:.92}
}
@keyframes rhTurn{
  0%,16%{transform:rotate(-90deg)}
  42%,84%{transform:rotate(0deg)}
  100%{transform:rotate(-90deg)}
}
@media(prefers-reduced-motion:reduce){.rh-phone{animation:none;transform:none}}