/* ==========================================================================
   ROLL-X — website stylesheet
   --------------------------------------------------------------------------
   Structure of this file:
     1.  Brand tokens (colours + fonts)   <- change brand colours here
     2.  Base / reset
     3.  Shared components (buttons, cards, chips, inputs)
     4.  Header + navigation
     5.  Sections, in the order they appear on the page
     6.  Enquiry modal
     7.  Motion (scroll reveals, hero entrance)
     8.  Responsive  <- all mobile/tablet rules live at the bottom
   ========================================================================== */


/* ==========================================================================
   1. BRAND TOKENS
   Every colour on the site comes from here. Change a value once and it
   updates everywhere.
   ========================================================================== */
:root {
  --cream:        #FFFCF6;   /* page + card background          */
  --maroon:       #46130D;   /* primary text, borders           */
  --orange:       #EA692D;   /* primary accent, buttons         */
  --orange-dark:  #DD6028;   /* button hover                    */
  --pink:         #F4CFC5;   /* Who We Are background           */
  --lime-pale:    #F0F3C9;   /* Menu + Be A Partner background  */
  --lime:         #CADB4E;   /* eyebrow labels on dark sections */
  --green:        #37773A;   /* service icon                    */
  --green-deep:   #203C1B;   /* Franchise section background    */
  --near-black:   #20090b;   /* Catering section background     */
  --body-text:    #4a2c22;
  --muted:        #8a6a5f;
  --error:        #B3261E;

  --font-head: 'Ranchers', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Onest', Arial, Helvetica, sans-serif;
  --font-script: 'La Belle Aurore', cursive;

  --wrap: 1240px;          /* max content width */
  --gutter: 40px;          /* page side padding on desktop */
  --section-y: 72px;       /* vertical rhythm between sections */
  --testi-w: 420px;        /* testimonial card width — the track padding follows it */
  --shadow:  6px;          /* the offset "sticker" shadow on cards and photos */
  --shadow-lift: 9px;      /* the same shadow while a card is hovered */
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
* { box-sizing: border-box; }

/* clip, NOT hidden — overflow-x:hidden makes this a scroll container and
   silently breaks position:sticky on the header */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: #2A130D;
  background: var(--cream);
  overflow-x: clip;   /* see the note on <html> above */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }   /* height:auto or the width/height
                                            attributes stretch the image */

a { text-decoration: none; color: var(--orange); }
a:hover { color: var(--maroon); }

h1, h2, h3 { font-family: var(--font-head); letter-spacing: 0.5px; font-weight: 400; }

.rx-h { font-family: var(--font-head); letter-spacing: 0.5px; }

.wrap { max-width: var(--wrap); margin: 0 auto; }

.section { padding: var(--section-y) var(--gutter); }

.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 { font-size: 46px; color: var(--maroon); margin: 0 0 14px; }
.section-head p { font-size: 17px; color: var(--body-text); margin: 0; }

/* keyboard focus that is visible on every background */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}

/* screen-reader-only helper */
.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;
}


/* ==========================================================================
   3. SHARED COMPONENTS
   ========================================================================== */

/* ---- buttons -------------------------------------------------------- */
.rx-btn-primary,
.rx-btn-secondary {
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: 0.5px;
  border-radius: 42px;
  border: 3px solid var(--maroon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.rx-btn-primary {
  background: var(--orange);
  color: #FFFFFF;
  padding: 15px 30px;
  box-shadow: 5px 5px 0 var(--maroon);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
/* NOTE: colour is restated on :hover on purpose. The global `a:hover` rule has
   higher specificity than `.rx-btn-primary`, and without this the label turns
   maroon on hover. */
.rx-btn-primary:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--maroon);
  background: var(--orange-dark);
  color: #FFFFFF;
}

.rx-btn-secondary {
  background: transparent;
  color: var(--maroon);
  padding: 13px 28px;
  box-shadow: 5px 5px 0 var(--maroon);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.rx-btn-secondary:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--maroon);
  background: rgba(70, 19, 13, 0.06);
  color: var(--maroon);
}

/* buttons that sit on a dark section — the maroon shadow is invisible there */
.rx-btn-on-dark { box-shadow: 5px 5px 0 #FFFFFF; }
.rx-btn-on-dark:hover { box-shadow: 3px 3px 0 #FFFFFF; }

.rx-btn-sm { padding: 11px 26px; font-size: 15px; box-shadow: 4px 4px 0 var(--maroon); }

/* ---- cards ---------------------------------------------------------- */
.rx-card {
  background: #FFFFFF;
  border: 3px solid var(--maroon);
  border-radius: 20px;
  box-shadow: var(--shadow) var(--shadow) 0 var(--orange);
  padding: 28px;
}

/* ---- chips ---------------------------------------------------------- */
.rx-chip {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--maroon);
  border-radius: 30px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--maroon);
  background: var(--cream);
}

/* ---- form fields ---------------------------------------------------- */
.rx-input, .rx-textarea {
  font-family: var(--font-body);
  font-size: 15px;
  border: 2.5px solid var(--maroon);
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
  background: transparent;
  color: #2A130D;
}
.rx-input::placeholder, .rx-textarea::placeholder { color: #8a6a5f; }
.rx-textarea { resize: vertical; }

/* ---- floating sticker animations ------------------------------------ */
@keyframes rxFloatA { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }
@keyframes rxFloatB { 0%,100% { transform: translateY(0) rotate(8deg); }  50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes rxFloatC { 0%,100% { transform: translateY(0) rotate(4deg); }  50% { transform: translateY(-8px) rotate(9deg); } }
@keyframes rxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sticker { position: absolute; pointer-events: none; filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.12)); }
.sticker--a { animation: rxFloatA 4.5s ease-in-out infinite; }
.sticker--b { animation: rxFloatB 5.5s ease-in-out infinite; }
.sticker--c { animation: rxFloatC 6s   ease-in-out infinite; }

/* Sticker placement lives here, not in the HTML, so the responsive rules at the
   bottom of this file can pull them in on small screens. Sitting outside their
   parent is what caused horizontal overflow on phones. */
.st-hero-1 { top: -38px;  right: -46px; width: 130px; }
.st-hero-2 { bottom: -34px; left: -50px; width: 140px; }
.st-hero-3 { top: 36%;    left: -58px;  width: 100px; }
.st-hero-4 { bottom: 8%;  right: -52px; width: 96px; }
.st-who-1  { top: -30px;  left: -42px;  width: 130px; }
.st-who-2  { bottom: -28px; right: -38px; width: 110px; }
.st-corner { top: 16px; left: 24px; width: 96px; opacity: 0.9; z-index: 1;
             filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.25)); }
.st-cta    { position: static; width: 104px; filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.25)); }


/* ==========================================================================
   4. HEADER + NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 3px solid var(--maroon);
}
.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__logo { height: 38px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 32px; }

.rx-nav-link {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--maroon);
  transition: color 0.22s ease;
}
.rx-nav-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav .rx-nav-link:hover { color: var(--orange); }
.nav .rx-nav-link:hover::after { transform: scaleX(1); }

/* hamburger — hidden on desktop, shown by the responsive rules at the bottom */
.nav-toggle {
  display: none;
  background: none;
  border: 2.5px solid var(--maroon);
  border-radius: 12px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-close { display: none; }
.nav-toggle.is-open .icon-hamburger { display: none; }
.nav-toggle.is-open .icon-close { display: block; }

/* slide-down panel. `display` cannot be animated, so it is always a flex
   column and animates its height/opacity instead. */
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  padding: 0 20px;
  border-top: 0 solid var(--maroon);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              padding-top 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              padding-bottom 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              border-top-width 0.2s ease,
              transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.24s ease;
}
/* If a nav item is ever added, raise this max-height or the extra item is clipped. */
.mobile-nav.is-open {
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding-top: 22px;
  padding-bottom: 22px;
  border-top-width: 3px;
}
/* shrink-wrap the links so the hover underline matches the word, not the panel */
.mobile-nav .rx-nav-link { align-self: center; }
.mobile-nav .rx-nav-link:hover { color: var(--orange); }
.mobile-nav .rx-nav-link:hover::after { transform: scaleX(1); }


/* ==========================================================================
   5. SECTIONS
   ========================================================================== */

/* ---- HERO ----------------------------------------------------------- */
.hero {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero__blob {
  position: absolute; top: 40px; right: 120px;
  width: 220px; height: 220px; border-radius: 50%;
  background: repeating-conic-gradient(var(--green-deep) 0% 25%, var(--green) 0% 50%);
  background-size: 28px 28px;
  opacity: 0.10; z-index: 0;
}
.hero__copy { position: relative; z-index: 1; }
.hero__title { font-size: 64px; line-height: 1.05; margin: 0 0 22px; color: var(--maroon); }
.hero__lead { font-size: 19px; line-height: 1.6; color: var(--body-text); max-width: 520px; margin: 0 0 34px; }
.hero__actions { display: flex; gap: 18px; flex-wrap: wrap; }
.hero__media { position: relative; z-index: 1; display: flex; justify-content: center; }
.hero__frame { position: relative; max-width: 400px; }
.hero__photo {
  width: 100%; display: block;
  border-radius: 26px; border: 4px solid var(--maroon);
  box-shadow: var(--shadow) var(--shadow) 0 var(--orange);
}

/* ---- TICKER --------------------------------------------------------- */
.ticker { background: var(--maroon); padding: 14px 0; overflow: hidden; white-space: nowrap; }
/* 4 copies, not 2. translateX(-50%) shifts the track by half its width, so with
   only 2 copies the strip runs out of content and shows bare background at the
   end of every loop. Keep (copies / 2) x copy-width >= screen width. */
.ticker__track { display: inline-block; animation: rxMarquee 40s linear infinite; }
.ticker__track span {
  font-family: var(--font-head);
  color: var(--lime-pale);
  font-size: 15px;
  letter-spacing: 1px;
  padding: 0 18px;
}

/* ---- MENU ----------------------------------------------------------- */
.menu { background: var(--lime-pale); }
.menu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.menu-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.menu-card__img {
  width: 100%; height: 200px; object-fit: cover; display: block;
  border-bottom: 3px solid var(--maroon);
  transition: transform 0.45s ease;
}
.menu-card__body { padding: 22px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.menu-card .rx-chip { font-size: 11px; padding: 5px 12px; }
.menu-card__name { font-size: 21px; color: var(--maroon); margin: 12px 0 0; }
.menu__cta { text-align: center; margin-top: 48px; }

/* card hover lift, shared by the menu and services grids */
.menu-card, .service-card { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.menu-card:hover, .service-card:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-lift) var(--shadow-lift) 0 var(--orange); }
.menu-card:hover .menu-card__img { transform: scale(1.06); }

/* ---- FRANCHISE + CATERING (shared dark-tile treatment) --------------- */
.dark-section { position: relative; overflow: hidden; padding: var(--section-y) var(--gutter); }
.franchise { background: var(--green-deep); }
.catering  { background: var(--near-black); }

.dark-section__ghost {
  position: absolute; top: -30px; right: -10px;
  font-family: var(--font-head);
  font-size: 280px; line-height: 1;
  color: rgba(240, 243, 201, 0.045);
  white-space: nowrap; z-index: 0; pointer-events: none;
}
.dark-section__inner { max-width: var(--wrap); margin: 0 auto; position: relative; z-index: 2; }
.dark-section__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 60px; flex-wrap: wrap; margin-bottom: 60px;
}
.dark-section__headline { max-width: 600px; }
.eyebrow {
  display: inline-flex; align-items: center;
  border: 1.5px dashed var(--lime); border-radius: 30px;
  padding: 8px 20px; margin-bottom: 24px;
  font-weight: 700; font-size: 12px; letter-spacing: 2px;
  color: var(--lime); text-transform: uppercase;
}
.dark-section h2 { font-size: 52px; line-height: 1.1; color: var(--lime-pale); margin: 0; }
.script-accent { font-family: var(--font-script); font-size: 0.82em; color: var(--orange); letter-spacing: 0; }
.dark-section__intro { font-size: 16px; line-height: 1.85; max-width: 340px; text-align: right; margin: 14px 0 0; }
.franchise .dark-section__intro { color: #c6d0b8; }   /* sage, tuned for the green */
.catering  .dark-section__intro { color: #c9b0a4; }   /* warm grey, tuned for the maroon */

.tile-grid { display: grid; gap: 20px; }
.franchise .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catering  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tile {
  position: relative; overflow: hidden;
  background: rgba(240, 243, 201, 0.06);
  border: 1px solid rgba(240, 243, 201, 0.16);
  border-radius: 22px;
  padding: 30px 28px;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.tile:hover {
  transform: translateY(-6px);
  background: rgba(240, 243, 201, 0.12);
  border-color: rgba(240, 243, 201, 0.38);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.38);
}
.tile__num {
  position: absolute; top: 6px; right: 18px;
  font-family: var(--font-head); font-size: 72px; line-height: 1;
  color: rgba(240, 243, 201, 0.10);
  pointer-events: none; transition: color 0.22s ease;
}
.tile:hover .tile__num { color: rgba(240, 243, 201, 0.20); }
.tile__title { font-family: var(--font-head); font-size: 22px; color: var(--lime-pale); margin-bottom: 10px; max-width: 80%; }
.tile__text { font-size: 14.5px; line-height: 1.6; max-width: 90%; }
.franchise .tile__text { color: #b9c4ab; }
.catering  .tile__text { color: #a99687; }

/* the badge is absolutely positioned so it costs no height — every tile keeps
   the same padding and every heading starts at the same y. Keep it shorter
   than the tile's padding-top. */
.tile__badge {
  position: absolute; top: 0; left: 28px;
  display: inline-flex; align-items: center;
  background: var(--lime-pale); color: var(--maroon);
  font-weight: 700; font-size: 10.5px; line-height: 1;
  letter-spacing: 1px; text-transform: uppercase;
  border-radius: 0 0 12px 12px;
  padding: 6px 13px 7px;
}

.dark-section__cta { margin-top: 52px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dark-section__cta .sticker { position: static; filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.25)); }

/* ---- WHO WE ARE ----------------------------------------------------- */
.who { background: var(--pink); }
.who__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center;
}
.who__media { position: relative; }
.who__frame {
  height: 560px; border-radius: 20px;
  border: 4px solid var(--maroon); box-shadow: var(--shadow) var(--shadow) 0 var(--maroon);
  overflow: hidden;
}
.who__photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.who h2 { font-size: 46px; color: var(--maroon); margin: 0 0 22px; }
.who__text { font-size: 17px; line-height: 1.75; color: #3f231a; margin: 0 0 24px; }
.who__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.who__chips .rx-chip { background: var(--cream); }
.who__quote {
  margin: 0;   /* browsers give <blockquote> a 40px side margin by default */
  background: var(--cream); border: 3px solid var(--maroon);
  border-radius: 16px; padding: 24px 28px; box-shadow: var(--shadow) var(--shadow) 0 var(--maroon);
}
.who__quote p { font-weight: 700; font-size: 16px; line-height: 1.7; color: var(--maroon); margin: 0; }

/* ---- SERVICES ------------------------------------------------------- */
.services { max-width: var(--wrap); margin: 0 auto; }
.services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.service-card__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.service-card__title { font-family: var(--font-head); font-size: 20px; color: var(--maroon); margin-bottom: 10px; }
.service-card p { font-size: 14.5px; line-height: 1.6; color: var(--body-text); margin: 0; }

/* ---- TESTIMONIALS --------------------------------------------------- */
.testimonials { background: #FFFFFF; overflow: hidden; padding: var(--section-y) var(--gutter); }
.testimonials .section-head { margin-bottom: 16px; }
.testimonials__note { font-size: 14px; color: var(--muted); letter-spacing: 0.4px; margin: 8px 0 0; }

.testi-track {
  /* capped to the content width — left unbounded, the calc() padding grows with the
     screen and leaves a dead gap before the first card on wide monitors */
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex; gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none;
  padding: 44px calc(50% - var(--testi-w) / 2) 24px;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-card {
  flex-shrink: 0; width: var(--testi-w);
  scroll-snap-align: center;
  opacity: 0.42; transform: scale(0.88);
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.testi-card.is-active { opacity: 1; transform: scale(1); box-shadow: var(--shadow) var(--shadow) 0 var(--orange); }
.testi-card__stars { display: flex; gap: 4px; margin-bottom: 16px; }
.testi-card__quote { font-size: 15.5px; line-height: 1.7; color: #3f231a; margin: 0 0 20px; }
.testi-card__person { display: flex; align-items: center; gap: 13px; }
.testi-card__avatar {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2.5px solid var(--maroon);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.testi-card__name { font-family: var(--font-head); font-size: 16px; color: var(--maroon); }
.testi-card__role { font-size: 13px; color: var(--muted); }

.testi-nav { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.testi-arrow {
  width: 50px; height: 50px; border-radius: 50%;
  border: 2.5px solid var(--maroon); background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform 0.12s ease, background 0.12s ease;
}
.testi-arrow:hover { background: var(--lime-pale); transform: translateY(-2px); }

/* ---- BE A PARTNER --------------------------------------------------- */
.partner { background: var(--lime-pale); }
.partner__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: start; }
.partner h2 { font-size: 44px; color: var(--maroon); margin: 0 0 20px; }
.partner__text { font-size: 17px; line-height: 1.75; color: var(--body-text); margin: 0 0 28px; max-width: 420px; }
.enquiry-form__title { font-family: var(--font-head); font-size: 24px; color: var(--maroon); margin: 0 0 18px; }
.enquiry-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.enquiry-form textarea { margin-top: 18px; }
.enquiry-form button { margin-top: 20px; width: 100%; }
.form-error { display: none; margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--error); font-weight: 600; }
[data-hide-when-submitted].is-submitted { display: none; }
[data-show-when-submitted] { display: none; }
[data-show-when-submitted].is-submitted { display: block; }
.form-thanks { text-align: center; padding: 30px 10px; }
.form-thanks__title { font-family: var(--font-head); font-size: 24px; color: var(--maroon); margin-bottom: 10px; }
.form-thanks p { font-size: 15px; color: var(--body-text); margin: 0; }

/* ---- FOOTER --------------------------------------------------------- */
.site-footer { background: var(--maroon); padding: 56px var(--gutter) 28px; }
.site-footer__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px;
}
.site-footer__logo { height: 36px; width: auto; margin-bottom: 16px; display: block; }
.site-footer__tagline { font-size: 14px; line-height: 1.7; color: #c99a8d; max-width: 280px; margin: 0; }
.site-footer h3 { color: var(--lime-pale); font-size: 15px; margin: 0 0 14px; }
.site-footer__links { display: flex; flex-direction: column; gap: 10px; }
.site-footer__links a, .site-footer p.contact { color: #d9b8ab; font-size: 14px; }
.site-footer p.contact { margin: 0 0 8px; }
.site-footer__socials { display: flex; gap: 12px; }
.rx-social {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid #a9806f;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lime-pale);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.rx-social:hover { background: var(--orange); border-color: var(--orange); color: #FFFFFF; transform: translateY(-3px); }
.site-footer__note { font-size: 13px; color: #a9806f; margin: 14px 0 0; }
.site-footer__bottom {
  max-width: var(--wrap); margin: 0 auto;
  border-top: 1px solid #7a4a3f; padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.site-footer__bottom p { font-size: 13px; color: #a9806f; margin: 0; }


/* ==========================================================================
   6. ENQUIRY MODAL (the Bigin partnership form, shown in an overlay)
   ========================================================================== */
.rx-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.22s ease;
}
/* required: the class sets display:flex, which outranks the browser's own
   [hidden] rule, so without this the modal would never hide */
.rx-modal[hidden] { display: none; }
.rx-modal.is-open { opacity: 1; }
.rx-modal__backdrop { position: absolute; inset: 0; background: rgba(32, 9, 11, 0.66); }
.rx-modal__panel {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: min(620px, 90%); height: min(720px, 86vh);
  background: var(--cream); border: 3px solid var(--maroon);
  border-radius: 20px; box-shadow: var(--shadow) var(--shadow) 0 var(--orange);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.rx-modal.is-open .rx-modal__panel { transform: translateY(0) scale(1); }
.rx-modal__head {
  flex-shrink: 0; background: var(--maroon);
  padding: 12px 14px 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.rx-modal__title { font-family: var(--font-head); color: var(--lime-pale); font-size: 17px; letter-spacing: 0.5px; }
.rx-modal__close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 2px solid #d9b8ab; color: var(--lime-pale);
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.rx-modal__close:hover { background: var(--orange); border-color: var(--orange); color: #FFFFFF; transform: rotate(90deg); }
.rx-modal__frame { flex: 1; width: 100%; border: 0; display: block; background: var(--cream); }


/* ==========================================================================
   7. MOTION
   Everything here is inside prefers-reduced-motion:no-preference, and main.js
   bails out as well, so a visitor who asks for reduced motion gets a static page.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .rx-reveal { opacity: 0; transform: translateY(52px) scale(0.97); }
  .rx-reveal.is-in { opacity: 1; transform: translateY(0) scale(1); }

  .rx-enter { opacity: 0; transform: translateY(46px); }
  .rx-enter.is-in {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .rx-enter-photo { opacity: 0; transform: translateY(40px) scale(0.9); }
  .rx-enter-photo.is-in {
    opacity: 1; transform: translateY(0) scale(1);
    transition: opacity 0.9s ease, transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .rx-enter-pop { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  .rx-enter-pop.is-in {
    opacity: 1; transform: scale(1) rotate(0deg);
    transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}


/* ==========================================================================
   8. RESPONSIVE
   Desktop is the default above. These override downwards.
   Breakpoints: 1100 (tighter desktop) / 900 (tablet + burger nav) / 620 (phone)
   ========================================================================== */

/* ---- large tablet / small laptop ------------------------------------ */
@media (max-width: 1100px) {
  :root { --gutter: 28px; --section-y: 60px; }
  .hero__title { font-size: 52px; }
  .dark-section h2 { font-size: 44px; }
  .section-head h2, .who h2 { font-size: 40px; }
  .dark-section__ghost { font-size: 200px; }
  .franchise .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who__frame { height: 460px; }
  .nav { gap: 22px; }
}

/* ---- tablet: nav collapses to the hamburger ------------------------- */
@media (max-width: 900px) {
  .nav { display: none; }                 /* desktop links off */
  .nav-toggle { display: flex; }          /* burger on */
  .site-header__cta { display: none; }    /* CTA lives inside the panel instead */

  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero__media { order: -1; }             /* photo above the copy on narrow screens */
  .hero__blob { display: none; }
  /* stacked layout: the photo spans the full column and crops to a wide
     landscape band, the same treatment as the Who We Are photo. The tall
     portrait would otherwise fill the screen on its own. */
  .hero__frame { max-width: none; width: 100%; }
  .hero__photo { height: 380px; object-fit: cover; object-position: center; }
  /* pull the stickers in, now that the frame reaches the gutters */
  .st-hero-1 { top: -24px;  right: -16px; width: 104px; }
  .st-hero-2 { bottom: -20px; left: -16px; width: 108px; }
  .st-hero-3 { top: 38%;    left: -18px;  width: 80px; }
  .st-hero-4 { bottom: 8%;  right: -18px; width: 80px; }
  .hero__title { font-size: 44px; }
  .hero__lead { font-size: 17px; }

  .menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catering .tile-grid { grid-template-columns: 1fr; }

  .who__inner { grid-template-columns: 1fr; gap: 40px; }
  .who__frame { height: 380px; }

  .partner__inner { grid-template-columns: 1fr; gap: 36px; }
  .partner__text { max-width: none; }

  .dark-section__head { gap: 28px; margin-bottom: 40px; }
  .dark-section__intro { text-align: left; max-width: none; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  :root { --testi-w: 340px; }
}

/* ---- phone ----------------------------------------------------------- */
@media (max-width: 620px) {
  :root { --gutter: 22px; --section-y: 44px; }

  .hero { padding-top: 44px; }
  .hero__title { font-size: 38px; line-height: 1.08; }
  .hero__lead { font-size: 16px; margin-bottom: 26px; }
  .hero__actions { flex-direction: column; gap: 14px; }
  .hero__actions .rx-btn-primary,
  .hero__actions .rx-btn-secondary { width: 100%; }
  /* square crop on phones — the source photo is a tall portrait */
  .hero__photo { height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }

  .section-head { margin-bottom: 34px; }
  .section-head h2, .who h2 { font-size: 32px; }
  .section-head p { font-size: 15px; }

  /* menu stays 2-up but everything inside scales down with the card */
  .menu__grid { gap: 14px; }
  .menu-card { border-width: 2px; border-radius: 14px; box-shadow: 4px 4px 0 var(--orange); }
  .menu-card__img { height: 108px; border-bottom-width: 2px; }
  .menu-card__body { padding: 12px; }
  .menu-card .rx-chip { font-size: 9.5px; padding: 4px 9px; border-width: 1.5px; letter-spacing: 0.3px; }
  .menu-card__name { font-size: 14px; line-height: 1.15; margin-top: 5px; }
  .menu__cta { margin-top: 32px; }

  .services__grid { grid-template-columns: 1fr; gap: 18px; }
  /* same vertical stack as desktop — icon above the title, not beside it */
  .service-card__icon { width: 52px; height: 52px; margin-bottom: 14px; }
  .service-card__title { font-size: 19px; }

  .franchise .tile-grid { grid-template-columns: 1fr; gap: 14px; }
  .tile { padding: 26px 20px; }
  .tile__num { font-size: 56px; top: 2px; right: 14px; }
  .tile__title { font-size: 17px; margin-bottom: 8px; max-width: 82%; }
  .tile__text { font-size: 13.5px; max-width: 92%; }
  .tile__badge { left: 20px; font-size: 9.5px; padding: 5px 11px 6px; }
  .dark-section h2 { font-size: 34px; line-height: 1.12; }
  .dark-section__ghost { font-size: 120px; top: -10px; right: -14px; }
  .dark-section__intro { font-size: 15px; }
  .dark-section__cta { margin-top: 30px; gap: 16px; }

  .who__frame { height: 340px; border-width: 3px; }
  .who__text { font-size: 15.5px; }

  /* wider than tall, so the card keeps the landscape shape it has on desktop */
  :root { --testi-w: min(84vw, 330px); }
  .testi-card { padding: 18px; }
  .testi-card__quote { font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; }
  .testi-card__avatar { width: 44px; height: 44px; }
  .testi-arrow { width: 44px; height: 44px; }

  .partner h2 { font-size: 32px; }
  .partner__text { font-size: 15.5px; }
  .enquiry-form { padding: 18px; }
  .enquiry-form__row { grid-template-columns: 1fr; gap: 14px; }
  .enquiry-form__title { font-size: 20px; margin-bottom: 14px; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .site-footer__bottom { justify-content: flex-start; gap: 4px; flex-direction: column; }

  .rx-modal__panel { width: 92%; height: 88vh; border-radius: 16px; }
  .rx-modal__title { font-size: 14px; }

  .ticker__track span { font-size: 13px; letter-spacing: 0.6px; padding: 0 14px; }

  /* pull the stickers inside the viewport and shrink them */
  .st-hero-1 { top: -18px;  right: -10px; width: 84px; }
  .st-hero-2 { bottom: -16px; left: -10px; width: 88px; }
  .st-hero-3 { top: 40%;    left: -12px;  width: 64px; }
  .st-hero-4 { bottom: 6%;  right: -12px; width: 62px; }
  .st-who-1  { top: -16px;  left: -8px;   width: 82px; }
  .st-who-2  { bottom: -16px; right: -8px; width: 70px; }
  .st-corner { top: 12px; left: 14px; width: 54px; }
  .st-cta    { width: 68px; }
}

/* ---- very small phones ---------------------------------------------- */
@media (max-width: 340px) {
  .hero__title { font-size: 33px; }
  .menu__grid { grid-template-columns: 1fr; }
  .menu-card__img { height: 150px; }
}