/* Self-hosted fonts. Both are SIL Open Font License, so hosting our own copies
   is fine. Files came from Google's own CSS2 endpoint (see README for how to
   refresh them). Serving them ourselves removes a render-blocking round trip to
   fonts.googleapis.com + fonts.gstatic.com on every page load.

   DM Sans is a variable font: one file covers 400-700, which is why there's a
   single @font-face with a weight RANGE rather than four separate ones. */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/archivo-black-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/archivo-black-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue: #2f6cad;
  --blue-deep: #164d89;
  --cream: #f5f1e8;
  --ink: #101214;
  --white: #fffdf8;
  --line: rgba(16, 18, 20, 0.16);
  --header-h: 96px;
  /* Real height of the fixed header. The logo scales with the viewport, so
     above 900px the header grows past the flat --header-h above. Logo aspect is
     1301.1:546.07 = 2.3827 (from the SVG viewBox); the 30px is the header's own
     top + bottom padding. Update this if the logo artwork is ever recropped. */
  --header-clear: calc(clamp(170px, 17vw, 260px) / 2.3827 + 30px);
}

* { box-sizing: border-box; }
/* Visually hidden but still reachable by screen readers - used where a
   heading is needed for document structure but not for sighted layout. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* scroll-padding-top keeps #location / #contact clear of the fixed header when
   they're linked to directly (e.g. sliceclub.com.au/#contact from a bio link). */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-clear) + 16px); width: 100%; overflow-x: clip; }
body {
  margin: 0;
  width: 100%;
  max-width: 100vw;
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }

/* Off-screen until focused: the first Tab on any page lands here and lets a
   keyboard user jump the fixed header + nav straight into the content. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 14px 18px;
  background: var(--ink);
  color: #fff;
  font-family: "Archivo Black", sans-serif;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: translateY(-180%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); outline-color: #fff; }
/* main gets tabindex="-1" so focus really moves there; suppress the ring it
   would otherwise draw around the whole page. */
main:focus { outline: none; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: max(16px, env(safe-area-inset-top)) calc(3vw + 8px) 14px;
}
/* Scrim behind the dark-header text. The old header background faded to
   rgba(8,15,24,.10) by the links' vertical position, leaving white .header-link
   text at 2.30:1 over bright parts of the hero photo (WCAG AA needs 4.5:1).
   This holds ≥.60 black across the full height of the link text, then fades
   out below the header so it still reads as a gradient, not a bar. The scrim
   sits above the hero image; header content is lifted above the scrim. */
.site-header.header-on-dark::before {
  content: "";
  position: absolute;
  inset: 0 0 -44px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.62), rgba(0,0,0,0.60) calc(100% - 44px), rgba(0,0,0,0));
  pointer-events: none;
}
.site-header > * { position: relative; z-index: 1; }
.header-logo { flex: 0 0 auto; width: clamp(170px, 17vw, 260px); transform: translate(4px, 4px); }
.header-logo img { width: 100%; height: auto; transition: filter .2s ease; }
.header-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(12px, 2.2vw, 34px); }
.header-link {
  position: relative;
  padding: 12px 0;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.08rem;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: white;
  white-space: nowrap;
  transition: color .2s ease, opacity .2s ease;
}
.header-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.header-link:hover::after { transform: scaleX(1); }
.site-header.header-on-light { background: linear-gradient(180deg, rgba(245,241,232,.95), rgba(245,241,232,.60) 78%, transparent); }
.site-header.header-on-light .header-link { color: var(--ink); }
.site-header.header-on-dark .header-link { color: #fff; }
/* The logo SVG ships in the brand ink (#101214), so it needs no treatment on the
   cream header. Over a photo or the dark header it has to go light, and
   inverting the ink lands on a warm off-white (#efedeb) that sits with --white
   and --cream far better than a clinical pure #fff would.
   (This is the reverse of the old white PNG, which was inverted on light.) */
.site-header.header-on-light .header-logo img { filter: none; }
.site-header.header-on-dark .header-logo img { filter: invert(1); }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: white;
  overflow: hidden;
}
.hero-image-wrap { position: absolute; inset: 0; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.015); }
/* The .46 stop at 30% is load-bearing: depending on viewport the h1 starts as
   high as ~31% of the hero (1366x768) and its lightest backdrop pixels need
   ≥.42 black over them to hold the 3:1 large-text contrast minimum (the old
   ramp was only ~.28 there). */
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 12%, rgba(0,0,0,.46) 30%, rgba(0,0,0,.76) 100%); }
/* Cap the side padding: .hero-content stops growing at 980px but 4vw does not,
   so past ~1600px the padding ate into the headline and overflow-x:clip
   silently cropped "DIFFERENT". Capping holds the inner width at 900px. */
.hero-content { position: relative; z-index: 2; width: min(980px, 94vw); padding: 170px min(4vw, 40px) 7vw; }
.section-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.hero h1, .location-section h2, .info-block h2, .page-hero h1, .about-copy h1, .about-copy h2, .menu-title, .contact-copy h2 {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: -.055em;
  line-height: .9;
}
/* Archivo Black's ink sits ~.02em right of its box, so big headings read as
   indented next to the small kicker above them. Pull them back optically. */
.location-section h2, .info-block h2, .contact-copy h2, .reviews-head h2 { text-indent: -.02em; }
.hero h1 { font-size: clamp(3.7rem, 8.4vw, 8.2rem); max-width: 900px; margin: .35rem 0 .9rem; line-height: .9; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.order-btn {
  min-width: 220px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 22px 24px;
  border-radius: 8px;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.02rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.order-btn:hover { transform: translateY(-3px); }
.order-btn-light { background: var(--white); color: var(--ink); }
.order-btn-blue { background: var(--blue); color: white; }
.order-btn-dark { background: var(--ink); color: white; }

/* The hero fills the whole first screen, so nothing below it is visible on
   load. These are the signposts that there IS anything below. Underlined at
   rest rather than on hover, since touch has no hover to reveal them. */
.hero-jump { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 28px); margin-top: 24px; }
.hero-jump a {
  position: relative;
  padding: 5px 0;
  font-family: "Archivo Black", sans-serif;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .84);
  transition: color .2s ease;
}
.hero-jump a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.hero-jump a:hover { color: #fff; }
.hero-jump a:hover::after { transform: scaleX(1); }

.marquee { position: relative; background: var(--blue); color: white; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: ticker 22s linear infinite; }
.marquee span { font-family: "Archivo Black", sans-serif; font-size: clamp(1.05rem, 1.8vw, 1.6rem); padding: 10px 0; white-space: nowrap; text-transform: uppercase; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* WCAG 2.2.2: the marquee and the pizza rail both move for more than 5s, so
   they need a control that stops them. One button governs both. */
.motion-toggle {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  z-index: 2;
  width: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.35);
  background: var(--blue);
  color: white;
  cursor: pointer;
}
.motion-icon { width: 19px; height: 19px; display: block; }
.motion-icon-play { display: none; }
body.motion-paused .motion-icon-pause { display: none; }
body.motion-paused .motion-icon-play { display: block; }
body.motion-paused .marquee-track { animation-play-state: paused; }

.pizza-menu { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: var(--cream); }
.pizza-rail {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  cursor: grab;
}
.pizza-rail::-webkit-scrollbar { display: none; }
.pizza-rail:active { cursor: grabbing; }
.pizza-track { --card-w: clamp(250px, 25vw, 390px); display: flex; width: max-content; }
.pizza-card {
  position: relative;
  width: var(--card-w);
  min-height: 220px;
  padding: 28px 30px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
  overflow: hidden;
}
/* Photo sits behind the text, revealed on hover (desktop) or tap (touch). */
.pizza-card-photo { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.pizza-card-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform .6s ease; }
.pizza-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,24,.30), rgba(8,15,24,.72)); }
.pizza-card > span, .pizza-card > h3 { position: relative; z-index: 1; transition: color .3s ease; }
.pizza-card span { font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.pizza-card h3 { font-family: "Archivo Black", sans-serif; font-size: clamp(1.65rem, 2.6vw, 2.7rem); margin: 0; letter-spacing: -.04em; line-height: .95; text-transform: uppercase; }
.pizza-card.is-revealed .pizza-card-photo { opacity: 1; }
.pizza-card.is-revealed .pizza-card-photo img { transform: scale(1); }
.pizza-card.is-revealed > span, .pizza-card.is-revealed > h3 { color: #fff; }
@media (hover: hover) {
  .pizza-card:hover .pizza-card-photo { opacity: 1; }
  .pizza-card:hover .pizza-card-photo img { transform: scale(1); }
  .pizza-card:hover > span, .pizza-card:hover > h3 { color: #fff; }
}
.pizza-card-menu { background: var(--blue); color: white; text-decoration: none; }
.pizza-card-menu:hover { background: var(--ink); }

.reviews-section { background: white; border-bottom: 1px solid var(--line); padding: 6vw 6vw 3vw; }
.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: 2.6rem; }
.reviews-head h2 { font-family: "Archivo Black", sans-serif; text-transform: uppercase; letter-spacing: -.055em; line-height: .9; font-size: clamp(2.1rem, 4.4vw, 4.2rem); margin: 0; }
.score-row { display: flex; gap: 34px; }
.score .stars { display: block; color: #b26a00; font-size: 1.05rem; letter-spacing: .1em; } /* ≥3:1 on white; #f5a623 was 2.03:1 */
.score p { margin: 4px 0 0; display: flex; align-items: center; gap: 7px; font-size: .92rem; }
.score strong { font-family: "Archivo Black", sans-serif; font-size: 1.35rem; letter-spacing: -.03em; }
.score img { display: block; opacity: .85; }
.reviews-wall { columns: 3; column-gap: 20px; }
.say { break-inside: avoid; margin: 0 0 20px; padding: 26px 26px 22px; background: var(--cream); border: 1px solid var(--line); }
.say blockquote { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.6; }
.say figcaption { display: flex; }
.say figcaption img { display: block; opacity: .8; }
.reviews-more-btn { display: none; }
.location-section { background: var(--ink); color: var(--cream); padding: 5vw 6vw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 460px); gap: 5vw; align-items: center; }
.location-section .section-kicker { margin: 0 0 1.1rem; }
.location-section h2 { font-size: clamp(2.6rem, 5.4vw, 5.4rem); margin: 0; }
.location-section h2 span { display: block; }
.location-suburb { margin: 1.1rem 0 0; color: var(--cream); font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 700; line-height: 1.3; }
.outline-btn { display: inline-block; margin-top: 1rem; border: 1px solid rgba(245,241,232,.7); padding: 15px 18px; font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.map-wrap { aspect-ratio: 1 / 1; }
.map-frame { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.08); }

.info-section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.info-block { padding: 7vw 6vw; min-height: 390px; }
.info-block + .info-block { border-left: 1px solid var(--line); }
.info-block h2 { font-size: clamp(3.6rem, 7vw, 8rem); margin: 2.2rem 0 .7rem; }
.info-big { font-family: "Archivo Black", sans-serif; font-size: clamp(1.8rem, 3.2vw, 3.4rem); margin: 0; letter-spacing: -.03em; text-transform: uppercase; }
.socials-block { background: white; }
.socials-block > a { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.socials-block > a:first-of-type { margin-top: 2rem; border-top: 1px solid var(--line); }
.socials-block .social-icon { width: 34px; height: 34px; display: grid; place-items: center; }
.socials-block .social-icon svg { width: 100%; height: 100%; }
.socials-block strong { font-family: "Archivo Black", sans-serif; font-size: clamp(1.15rem, 2.1vw, 2.2rem); letter-spacing: -.03em; text-transform: uppercase; }

.contact-section { display: grid; grid-template-columns: .85fr 1.15fr; border-bottom: 1px solid var(--line); }
.contact-copy { background: var(--blue); color: white; padding: 5.2vw 6vw; }
.contact-copy h2 { font-size: clamp(3.6rem, 7vw, 7rem); margin: .65rem 0 .7rem; }
.contact-copy p { max-width: 440px; line-height: 1.5; margin-bottom: 0; }
.contact-form { padding: 5.2vw 6vw; display: grid; gap: 16px; align-content: center; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  color: var(--ink);
  padding: 15px 16px;
  border-radius: 0;
  outline-offset: 2px;
}
.field textarea { min-height: 140px; resize: vertical; }
.submit-btn { border: 0; border-radius: 8px; background: var(--ink); color: white; padding: 18px 20px; font-family: "Archivo Black", sans-serif; cursor: pointer; text-transform: uppercase; }

/* .not-found-hero (404 + thanks) overrides min-height to 100svh below, so this
   base sizing only actually applies to the About page. */
.page-hero { min-height: 40svh; padding: calc(var(--header-h) + 4vw) 6vw 4vw; display: flex; flex-direction: column; justify-content: flex-end; }
.page-hero.blue { background: var(--blue); color: white; }
.page-hero .section-kicker { margin: 0 0 1rem; }
.page-hero h1 { font-size: clamp(4rem, 9vw, 9rem); margin: 0; }
.not-found-hero { min-height: 100svh; justify-content: center; }
.not-found-hero h1 { font-size: clamp(3.4rem, 9vw, 9rem); }
/* "REACHING" is the longest word on the site. Sized so the widest line ("THANKS
   FOR") clears the hero's padding at every width - otherwise overflow-x:clip
   silently crops it off the right edge instead of showing a scrollbar. Needs
   .page-hero in the selector to outrank the .page-hero h1 rule in the
   max-width:900px block below (equal specificity would lose on source order). */
.page-hero.thanks-hero h1 { font-size: clamp(2.4rem, 11.5vw, 8rem); }
.not-found-copy { max-width: 560px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; margin: 1.4rem 0 2rem; }

.about-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; border-bottom: 1px solid var(--line); }
.about-copy { padding: 9vw 7vw; display: flex; flex-direction: column; justify-content: center; }
.about-copy h2 { font-size: clamp(3.4rem, 6vw, 7rem); margin: .5rem 0 1.5rem; }
.about-copy p { max-width: 650px; font-size: 1.05rem; line-height: 1.75; }
.about-visual { min-height: 650px; background: var(--blue); display: grid; place-items: center; overflow: hidden; }
.about-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Was a <blockquote> for an attributed quote; now a closing statement, so it's
   a plain <p> - same big-statement treatment either way. */
.pull-quote { background: var(--ink); color: var(--cream); padding: 8vw 6vw; }
.pull-quote p { margin: 0; max-width: 1200px; font-family: "Archivo Black", sans-serif; font-size: clamp(2.8rem, 6vw, 7rem); line-height: .98; letter-spacing: -.045em; text-transform: uppercase; }

.menu-page { padding-top: var(--header-h); background: var(--cream); }
.menu-intro { padding: 8vw 6vw 5vw; border-bottom: 1px solid var(--line); }
.menu-title { font-size: clamp(5rem, 13vw, 13rem); margin: 0; }
.menu-category { padding: 6vw; }
.menu-category + .menu-category { border-top: 1px solid var(--line); }
.menu-category-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 34px; }
.menu-category-head h2 { font-family: "Archivo Black", sans-serif; font-size: clamp(2.7rem, 5vw, 5.5rem); margin: 0; letter-spacing: -.05em; text-transform: uppercase; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.menu-item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 42% 58%; min-height: 310px; background: rgba(255,255,255,.18); }
/* Fixed aspect-ratio (matching the source photos) keeps the photo's own framing
   consistent regardless of how tall the row grows to fit its neighbour's text. */
.menu-item-photo { align-self: center; aspect-ratio: 1100 / 1015; overflow: hidden; background: var(--blue); }
.menu-item-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.menu-item-body { padding: 28px; display: flex; flex-direction: column; }
.menu-item-top { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.menu-item h3 { font-family: "Archivo Black", sans-serif; font-size: clamp(1.55rem, 2.2vw, 2.5rem); line-height: .95; letter-spacing: -.04em; margin: 0; text-transform: uppercase; }
.menu-item-top h3 a { border-bottom: 1px solid transparent; transition: border-color .18s ease; }
.menu-item-top h3 a:hover { border-bottom-color: currentColor; }
.menu-item-price { flex: 0 0 auto; font-family: "Archivo Black", sans-serif; font-size: clamp(1.05rem, 1.5vw, 1.5rem); letter-spacing: -.03em; }
.menu-item p { line-height: 1.55; margin: 14px 0 0; padding-top: 0; }
.menu-order-cta { margin: 0 6vw 6vw; background: var(--blue); color: white; padding: 5vw; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.menu-order-cta h2 { font-family: "Archivo Black", sans-serif; font-size: clamp(2.8rem, 6vw, 6rem); letter-spacing: -.05em; margin: 0; text-transform: uppercase; }

.pizza-detail { padding-top: var(--header-clear); background: var(--cream); }
.breadcrumb { padding: 26px 6vw 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(16,18,20,.62); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; opacity: .55; }
/* padding lifts these to a 26px tap target (WCAG 2.5.8 minimum is 24px) */
.breadcrumb a { display: inline-block; padding: 5px 0; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--ink); }

.pizza-detail-section { min-height: 0; }
.pizza-detail-section .about-visual { min-height: 0; aspect-ratio: 1100 / 1015; }
.pizza-detail-section .about-copy { padding: 6vw 7vw; }
.pizza-detail-section .about-copy h1 { font-size: clamp(2.3rem, 4.4vw, 4.4rem); margin: .5rem 0 1rem; }
.pizza-detail-price { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 1.1rem; }
.pizza-detail-amount { font-family: "Archivo Black", sans-serif; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -.03em; }
.pizza-detail-desc { max-width: 560px; font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.8rem; }
.pizza-detail-back { margin: 1.6rem 0 0; font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.pizza-detail-back a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.pizza-detail-more { padding: 5vw 6vw 6vw; border-top: 1px solid var(--line); }
.pizza-detail-more h2, .pizza-detail-story h2 { font-family: "Archivo Black", sans-serif; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -.045em; text-transform: uppercase; margin: 0 0 1.4rem; }
.pizza-detail-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 2rem; border-top: 1px solid var(--line); }
.pizza-detail-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: "Archivo Black", sans-serif; font-size: 1.02rem; letter-spacing: -.02em; text-transform: uppercase; }
.pizza-detail-list a:hover { color: var(--blue); }
.pizza-detail-list span { font-size: .92rem; opacity: .7; }
.pizza-detail-story { padding: 5vw 6vw 6vw; border-top: 1px solid var(--line); }
.pizza-detail-story p { max-width: 650px; font-size: 1.05rem; line-height: 1.75; margin: 0 0 1.15rem; }
.pizza-detail-story p:last-child { margin-bottom: 0; }

footer { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: end; padding: 2.7rem 3vw; border-top: 1px solid rgba(255,255,255,.15); background: var(--blue); color: white; }
/* Footer sits on --blue, so the ink logo inverts to off-white here too. */
/* height MUST be set here: the <img> carries width/height HTML attributes
   (to avoid layout shift), and a browser maps an attribute the CSS doesn't
   touch straight to a literal pixel length rather than "auto" - so leaving
   height unset here renders the image at a literal 546px tall regardless of
   width, which is what blew the footer out. */
.footer-logo { width: clamp(180px, 23vw, 330px); height: auto; filter: invert(1); }
.footer-details { justify-self: end; display: grid; grid-template-columns: repeat(3, auto); gap: 2rem 3rem; align-items: end; font-size: .78rem; line-height: 1.5; }
.footer-details strong { display: block; font-family: "Archivo Black", sans-serif; margin-bottom: 4px; text-transform: uppercase; }
.footer-details a { display: inline-block; padding: 5px 0; text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 900px) {
  :root { --header-h: 78px; --header-clear: 78px; }
  .site-header { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); padding-top: calc(12px + env(safe-area-inset-top)); gap: 8px; }
  .header-logo { width: 122px; transform: translate(3px, 3px); }
  .header-nav { gap: 9px; }
  .header-link { font-size: .94rem; letter-spacing: 0; padding: 14px 0; }
  .hero { min-height: 74svh; }
  .hero-image { object-position: 54% center; transform: scale(1); }
  .hero-content { width: 100%; padding: 118px 18px calc(26px + env(safe-area-inset-bottom)); }
  .hero h1 { font-size: clamp(2.75rem, 12.6vw, 4.7rem); max-width: 92%; line-height: .92; }
  .hero-actions { width: 100%; }
  .order-btn { min-width: 0; flex: 1 1 calc(50% - 5px); padding: 20px 16px; font-size: .92rem; }
  .pizza-track { --card-w: min(78vw, 320px); }
  .pizza-card { min-height: 190px; padding: 24px 22px; }
  /* 2.5rem made "MARGHERITA" 283px wide inside a 275px card between 520-900px,
     shaving the last letter. 2.3rem is the widest that fits. */
  .pizza-card h3 { font-size: clamp(1.75rem, 8vw, 2.3rem); }
  .reviews-section { padding: 14vw 20px; }
  .reviews-head { display: block; margin-bottom: 1.8rem; }
  .reviews-head h2 { font-size: clamp(2.1rem, 9.5vw, 3.2rem); }
  .score-row { gap: 26px; margin-top: 1.4rem; }
  /* display:flex (not CSS columns) - some engines fragment a "columns:1" box with
     max-height into a second, off-screen column instead of just clipping vertically. */
  .reviews-wall { display: flex; flex-direction: column; position: relative; }
  /* Show exactly the first 2 reviews before the fold, regardless of how long
     their text runs - a fixed max-height would drift if review copy changes. */
  .reviews-wall .say:nth-child(n+3) { display: none; }
  .reviews-wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(180deg, transparent, white); pointer-events: none; }
  .reviews-wall.is-expanded .say:nth-child(n+3) { display: block; }
  .reviews-wall.is-expanded::after { display: none; }
  .say { padding: 22px 20px 18px; margin-bottom: 14px; }
  .say blockquote { font-size: .96rem; margin-bottom: 13px; }
  .reviews-more-btn { display: block; margin: 16px auto 0; padding: 13px 26px; border: 1px solid var(--line); background: none; font-weight: 800; font-size: .82rem; letter-spacing: .04em; }
  .location-section { display: block; padding: 12vw 20px 9vw; overflow: hidden; }
  .location-section > div { min-width: 0; width: 100%; }
  .location-section .section-kicker { margin-bottom: .85rem; }
  .location-section h2 { width: 100%; max-width: 100%; font-size: clamp(3rem, 13.5vw, 5.1rem); line-height: .88; letter-spacing: -.065em; }
  .location-section h2 span { white-space: nowrap; }
  .location-suburb { margin-top: .9rem; font-size: 1.08rem; }
  .outline-btn { margin-top: .9rem; }
  .map-wrap { margin-top: 10vw; aspect-ratio: 4 / 3; }
  .info-section, .contact-section { grid-template-columns: 1fr; }
  .info-block { min-height: 0; padding: 15vw 22px; }
  .contact-copy, .contact-form { min-height: 0; padding: 10vw 22px; }
  .info-block + .info-block { border-left: 0; border-top: 1px solid var(--line); }
  .info-block h2 { font-size: clamp(3.5rem, 16vw, 5.8rem); }
  .socials-block > a { grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; }
  .socials-block strong { font-size: clamp(1rem, 5vw, 1.45rem); }
  .form-row { grid-template-columns: 1fr; }
  .page-hero { min-height: 32svh; padding: calc(var(--header-h) + 9vw) 22px 8vw; }
  .page-hero h1 { font-size: clamp(3.6rem, 14vw, 6rem); }
  .about-section { grid-template-columns: 1fr; min-height: 0; }
  .about-copy { padding: 16vw 22px; }
  .about-copy h2 { font-size: clamp(3.2rem, 14vw, 5rem); }
  .about-visual { min-height: 92vw; }
  .pull-quote { padding: 16vw 22px; }
  .menu-intro, .menu-category { padding-left: 20px; padding-right: 20px; }
  .menu-title { font-size: clamp(4.4rem, 19vw, 7.3rem); }
  .menu-grid { grid-template-columns: 1fr; }
  .menu-item { grid-template-columns: 38% 62%; min-height: 0; }
  .menu-item-body { padding: 20px; }
  .menu-item p { margin: 14px 0 0; padding-top: 0; }
  .menu-order-cta { margin: 0 20px 14vw; padding: 10vw 22px; flex-direction: column; align-items: stretch; }
  .motion-toggle { width: 50px; }
  .breadcrumb { padding: 20px 20px 0; }
  .pizza-detail-section .about-copy { padding: 12vw 22px; }
  .pizza-detail-section .about-copy h1 { font-size: clamp(2.1rem, 9.5vw, 3.6rem); }
  .pizza-detail-section .about-visual { aspect-ratio: 1 / 1; }
  .pizza-detail-story { padding: 12vw 20px 12vw; }
  .pizza-detail-more { padding: 12vw 20px 14vw; }
  .pizza-detail-list { grid-template-columns: 1fr; gap: 0; }
  footer { grid-template-columns: 1fr; align-items: start; padding: 34px 22px calc(34px + env(safe-area-inset-bottom)); }
  .footer-logo { width: 190px; }
  .footer-details { justify-self: stretch; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

@media (max-width: 520px) {
  .site-header { gap: 5px; }
  .header-logo { width: 94px; }
  .header-nav { gap: 8px; }
  .header-link { font-size: .8rem; padding: 15px 2px; }
  .hero-content { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: clamp(2.5rem, 11.8vw, 4rem); max-width: 94%; }
  .order-btn { padding: 19px 12px; font-size: .85rem; }
  .location-section h2 { font-size: 12.4vw; }
  .menu-category-head { align-items: flex-start; margin-bottom: 20px; }
  .menu-grid { border-left: 0; }
  .menu-item { grid-template-columns: 36% 64%; min-height: 0; border-left: 1px solid var(--line); }
  .menu-item-body { min-height: 0; padding: 16px; justify-content: flex-start; }
  .menu-item-top { gap: 10px; }
  .menu-item h3 { font-size: clamp(1.15rem, 5.8vw, 1.65rem); }
  .menu-item p { font-size: .9rem; line-height: 1.4; margin: 12px 0 0; padding-top: 0; }
  .footer-details { grid-template-columns: 1fr; }
  .footer-copy { flex-direction: column; gap: 6px; }
}

@media (max-width: 374px) {
  .header-logo { width: 82px; }
  .header-nav { gap: 2px; }
  .header-link { font-size: .7rem; }
}

/* Nothing here defined a focus style, so keyboard users got whichever UA ring
   happened to be invisible against the panel behind it. Set one explicitly, and
   flip it to a light colour on the blue/ink panels. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.marquee :focus-visible,
.contact-copy :focus-visible,
.menu-order-cta :focus-visible,
.page-hero.blue :focus-visible,
.about-visual :focus-visible,
footer :focus-visible,
.hero :focus-visible,
.site-header.header-on-dark :focus-visible { outline-color: #fff; }
/* Not #fff here: with the 3px offset the ring lands on the section's cream
   background (#f5f1e8), where white measures 1.13:1 — invisible. The default
   var(--blue) ring matches the contact-form focus treatment and is visible on
   cream. */
.pizza-card-menu:focus-visible { outline-color: var(--blue); }
.location-section :focus-visible,
.pull-quote :focus-visible { outline-color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .order-btn, .header-link, .header-logo img { transition: none; }
}