/* King Protea Services — bright, chef-owned catering. Fraunces + Archivo.
   Signature: THE PORTAL — a top-down protea opens on load and you enter the
   site through its centre; the page itself is a food-forward showcase. */
:root{
  --paper:#F8F5EF;        /* warm paper white */
  --paper-2:#FFFFFF;      /* card white */
  --ink:#221C1A;          /* near-black warm ink */
  --ink-soft:#5B5049;     /* body text */
  --magenta:#C1305C;      /* fresh protea pink */
  --magenta-deep:#8E2344;
  --leaf:#2E7A4E;
  --sage:#7FA98C;
  --gold:#E7A146;
  --blush:#F7E6EA;
  --line:#E7DFD4;
  --shadow:0 18px 50px -24px rgba(60,20,35,.35);
  --shadow-lg:0 40px 90px -40px rgba(60,20,35,.55);
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --wrap:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.03;letter-spacing:-.015em;font-optical-sizing:auto}
h1,h2{font-size:clamp(30px,4.6vw,52px);text-wrap:balance}
strong{font-weight:600;color:var(--ink)}
.section{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,6.5vw,88px) 24px}
.section-head{margin-bottom:34px;max-width:24ch}
.section-head.center{margin-inline:auto;text-align:center;max-width:34ch}
.section-head.center .muted{margin-top:14px}
.kicker{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);margin-bottom:14px}
.muted{color:var(--ink-soft)}

/* buttons ------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:15px;
  padding:14px 24px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;will-change:transform;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn-primary{background:var(--magenta);color:#fff;box-shadow:0 12px 26px -12px rgba(193,48,92,.7)}
.btn-primary:hover{background:var(--magenta-deep);box-shadow:0 16px 34px -12px rgba(193,48,92,.8)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--magenta);color:var(--magenta)}

/* ============ THE PORTAL ============ */
html.portal-lock,html.portal-lock body{overflow:hidden}
.portal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;overflow:hidden;
  background:#100708;--hole:0px}
html.js .portal{display:flex}
/* video mode = full-screen film; image mode = fallback still that opens a doorway */
.portal-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;background:#100708;
  transform-origin:50% 45%;animation:portalIntro 2.4s ease-out both,portalDrift 14s ease-in-out 2.4s infinite alternate}
@keyframes portalIntro{from{transform:scale(1.18)}to{transform:scale(1.04)}}
@keyframes portalDrift{from{transform:scale(1.04)}to{transform:scale(1.11)}}
@media (prefers-reduced-motion:reduce){.portal-video{animation:none}}
.portal.mode-image .portal-video{display:none}
.portal.mode-video .portal-field,.portal.mode-video .portal-stage{display:none}
.portal.mode-image{
  -webkit-mask:radial-gradient(circle at 50% 47%, transparent var(--hole), #000 calc(var(--hole) + 2px));
          mask:radial-gradient(circle at 50% 47%, transparent var(--hole), #000 calc(var(--hole) + 2px))}
.portal-field{position:absolute;inset:0;z-index:1;background:radial-gradient(130% 100% at 50% 46%,#2a101b 0%,#180b12 52%,#100708 100%)}
.portal-stage{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;will-change:transform}
.portal-glow{position:absolute;width:150%;height:150%;left:-25%;top:-25%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(231,161,70,.35),rgba(224,99,126,.28) 38%,transparent 66%);
  filter:blur(24px);opacity:0;will-change:transform,opacity}
.portal-flower{position:relative;display:block;height:min(64vh,560px);width:auto;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.6));will-change:transform,filter;
  -webkit-mask:radial-gradient(112% 90% at 50% 48%,#000 38%,rgba(0,0,0,.4) 66%,transparent 86%);
          mask:radial-gradient(112% 90% at 50% 48%,#000 38%,rgba(0,0,0,.4) 66%,transparent 86%)}
.portal-word{position:absolute;z-index:4;bottom:15%;left:0;right:0;text-align:center;font-family:var(--serif);
  font-size:clamp(17px,2.8vw,28px);letter-spacing:.18em;text-transform:uppercase;color:#F7E6EA;opacity:0;font-weight:500;
  text-shadow:0 2px 20px rgba(0,0,0,.5);pointer-events:none}
.portal-skip{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;
  background:rgba(20,10,14,.35);border:1px solid rgba(247,230,234,.3);border-radius:999px;padding:9px 20px;
  color:rgba(247,230,234,.85);font-family:var(--sans);font-size:12.5px;font-weight:600;backdrop-filter:blur(4px);
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;opacity:0;transition:color .2s,background .2s}
.portal-skip:hover{color:#fff}
.portal-brand{position:absolute;z-index:4;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;opacity:0;pointer-events:none;padding:0 24px}
.pw-script{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(46px,11vw,104px);line-height:.9;color:#FBF3EE;text-shadow:0 6px 40px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.5)}
.pw-sub{margin-top:.42em;padding-left:.42em;font-family:var(--sans);font-weight:600;font-size:clamp(14px,2.6vw,22px);letter-spacing:.42em;text-transform:uppercase;color:#F0D8D8;text-shadow:0 2px 18px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){html.js .portal{display:none}}

/* header ------------------------------------------------------------------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px clamp(16px,4vw,40px);transition:background .3s,box-shadow .3s,padding .3s}
.site-header.scrolled{background:rgba(248,245,239,.88);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding-top:9px;padding-bottom:9px}
.brand img{height:52px;width:auto;display:block}
.nav{display:flex;gap:28px;font-size:15px;font-weight:500}
.nav a{color:var(--ink-soft);position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--magenta);transition:right .28s ease}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.nav-cta{padding:10px 20px}
.nav-quote-m{display:none}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;
  background:transparent;border:0;cursor:pointer;z-index:41}
.nav-toggle span{display:block;height:2px;width:24px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .nav-toggle span:nth-child(2){opacity:0}
header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero — THE FULL SERVICE: craft / plate / table film triptych -------------- */
.hero{position:relative;width:100%;height:100svh;overflow:hidden;background:#241A1D}
.tri-panels{position:absolute;inset:0;display:flex;flex-direction:row;gap:2px;background:#241A1D}
.tri-panel{position:relative;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;cursor:pointer;background:#241A1D;outline:none}
.tri-media{position:absolute;inset:-2%;width:104%;height:104%;will-change:transform}
.tri-media img{width:100%;height:100%;object-fit:cover;transition:filter .6s ease;
  filter:sepia(.16) saturate(.94) contrast(1.06) brightness(.94) hue-rotate(-4deg)}
.tri-panel--craft .tri-media img{object-position:52% 44%}
.tri-panel--plate .tri-media img{object-position:50% 58%;filter:sepia(.18) saturate(.9) contrast(1.05) brightness(.96) hue-rotate(-5deg)}
.tri-panel--table .tri-media img{object-position:50% 46%;filter:sepia(.15) saturate(.92) contrast(1.07) brightness(.9) hue-rotate(-3deg)}
@keyframes kbA{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(1.4%,-.9%,0)}}
@keyframes kbB{from{transform:scale(1.08) translate3d(-1.2%,.8%,0)}to{transform:scale(1) translate3d(0,0,0)}}
.hero.is-live .tri-panel--craft .tri-media{animation:kbA 14s ease-in-out infinite alternate}
.hero.is-live .tri-panel--plate .tri-media{animation:kbB 16s ease-in-out infinite alternate}
.hero.is-live .tri-panel--table .tri-media{animation:kbA 15s ease-in-out infinite alternate;animation-delay:-7s}
.tri-grade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(130% 95% at 50% 38%,rgba(36,26,29,0) 42%,rgba(36,26,29,.62) 100%),
  linear-gradient(180deg,rgba(36,26,29,.42) 0%,rgba(36,26,29,.06) 34%,rgba(36,26,29,.1) 58%,rgba(36,26,29,.72) 100%)}
.tri-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(160deg,rgba(142,35,68,.2),rgba(231,161,70,.12) 55%,rgba(142,35,68,.16))}
.tri-dim{position:absolute;inset:0;pointer-events:none;background:rgba(24,16,18,.55);opacity:0;transition:opacity .6s ease}
.tri-panels.has-active .tri-panel:not(.is-active) .tri-dim{opacity:1}
.tri-panels.has-active .tri-panel:not(.is-active) .tri-media img{filter:sepia(.16) saturate(.6) contrast(1.02) brightness(.72) hue-rotate(-4deg)}
.tri-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tri-tag{position:absolute;top:112px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;
  opacity:0;transform:translateY(8px);transition:opacity .8s ease .1s,transform .8s ease .1s}
.hero.is-ready .tri-tag{opacity:1;transform:translateY(0)}
.tri-panels.has-active .tri-panel.is-active .tri-tag{opacity:0;transform:translateY(-6px)}
.tri-tag span{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:rgba(248,245,239,.82);
  padding:8px 14px;border:1px solid rgba(248,245,239,.22);border-radius:999px;background:rgba(36,26,29,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap}
.cap{position:absolute;left:0;right:0;top:16%;padding:0 clamp(22px,4vw,56px);pointer-events:none}
.cap-rule{width:34px;height:2px;background:var(--gold);margin-bottom:16px;transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.22,.61,.21,1) .12s}
.cap-title{font-family:var(--serif);font-weight:420;font-size:clamp(28px,3.3vw,52px);line-height:1.02;letter-spacing:.01em;
  color:var(--paper);opacity:0;transform:translateY(26px);
  transition:opacity .65s ease .06s,transform .75s cubic-bezier(.22,.61,.21,1) .06s}
.cap-desc{max-width:34ch;margin-top:14px;font-size:clamp(13px,1.05vw,15.5px);line-height:1.55;color:rgba(248,245,239,.82);
  opacity:0;transform:translateY(26px);transition:opacity .65s ease .16s,transform .75s cubic-bezier(.22,.61,.21,1) .16s}
.cap-link{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:#E48AA6;opacity:0;transform:translateY(26px);
  transition:opacity .65s ease .26s,transform .75s cubic-bezier(.22,.61,.21,1) .26s;pointer-events:auto}
.cap-link svg{width:16px;height:10px;transition:transform .35s ease}
.cap-link:hover svg{transform:translateX(4px)}
.tri-panel.is-active .cap-rule{transform:scaleX(1)}
.tri-panel.is-active .cap-title,.tri-panel.is-active .cap-desc,.tri-panel.is-active .cap-link{opacity:1;transform:translateY(0)}
.hero-grain{position:absolute;inset:-60%;width:220%;height:220%;pointer-events:none;z-index:5;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size:180px 180px}
@keyframes grainShift{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-3%,2%,0)}40%{transform:translate3d(2%,-3%,0)}
  60%{transform:translate3d(-2%,-2%,0)}80%{transform:translate3d(3%,3%,0)}100%{transform:translate3d(0,0,0)}}
.hero.is-live .hero-grain{animation:grainShift .9s steps(5) infinite}
.hero-ui{position:absolute;inset:0;z-index:10;pointer-events:none}
.hero-scrim{position:absolute;left:0;right:0;bottom:0;height:52svh;pointer-events:none;
  background:linear-gradient(180deg,rgba(36,26,29,0) 0%,rgba(36,26,29,.44) 42%,rgba(30,21,24,.88) 100%)}
.hero-value{position:absolute;left:50%;bottom:clamp(26px,5svh,54px);transform:translateX(-50%);
  width:min(760px,92vw);text-align:center;pointer-events:auto}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.hero-h1{font-family:var(--serif);font-weight:420;font-size:clamp(32px,4.8vw,60px);line-height:1.06;letter-spacing:.005em;color:var(--paper)}
.rotor{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.rotor-word{display:inline-block;font-style:italic;font-weight:340;color:#E48AA6;
  font-variation-settings:'SOFT' 40,'WONK' 1;will-change:transform}
.hero-sub{margin:14px auto 0;max-width:56ch;font-size:clamp(13px,1.15vw,15.5px);line-height:1.6;color:rgba(248,245,239,.78)}
.hero-cta{margin-top:22px;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.hero-ui .btn-ghost{color:var(--paper);border-color:rgba(248,245,239,.38);background:rgba(248,245,239,.04)}
.hero-ui .btn-ghost:hover{border-color:rgba(248,245,239,.7);background:rgba(248,245,239,.1)}

/* positioning strip -------------------------------------------------------- */
.strip{max-width:960px;margin:0 auto;padding:24px 24px 8px;text-align:center;position:relative;z-index:1}
.strip-lead{font-family:var(--serif);font-size:clamp(26px,4.2vw,44px);font-weight:500;line-height:1.14;text-wrap:balance;color:var(--ink)}
.strip-lead::first-letter{color:var(--magenta)}
.strip-sub{margin-top:22px;font-size:clamp(16px,1.9vw,19px);color:var(--ink-soft);max-width:52ch;margin-inline:auto}

/* the spread — food masonry ------------------------------------------------ */
.spread{position:relative;background:
  radial-gradient(70% 50% at 88% 8%,rgba(247,230,234,.35),transparent 62%),
  radial-gradient(60% 50% at 4% 96%,rgba(231,161,70,.07),transparent 62%)}
.mosaic{columns:3;column-gap:16px;max-width:1120px;margin:0 auto}
@media (max-width:1000px){.mosaic{columns:2;max-width:760px}}
@media (max-width:600px){.mosaic{columns:1;max-width:440px}}
.m-item{break-inside:avoid;margin:0 0 16px;position:relative;border-radius:18px;overflow:hidden;background:var(--blush);
  box-shadow:0 16px 40px -26px rgba(60,20,35,.6)}
.m-item img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.m-item:hover img{transform:scale(1.05)}
.m-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 18px 16px;color:#fff;
  background:linear-gradient(to top,rgba(28,16,15,.9),rgba(28,16,15,.35) 55%,transparent);
  display:flex;flex-direction:column;gap:3px}
.m-tag{font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#F7E6EA}
.m-line{font-family:var(--serif);font-size:18px;font-style:italic;line-height:1.2}
.spread-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:40px}

/* services — expanding image panels ---------------------------------------- */
.svc-hint{margin-top:12px;font-size:14px}
.panels{display:flex;gap:10px;height:min(62vh,470px)}
.panel{position:relative;flex:1 1 0;min-width:0;border-radius:20px;overflow:hidden;cursor:pointer;
  flex-grow:1;transition:flex-grow .55s cubic-bezier(.6,.05,.2,1);background:var(--magenta-deep)}
.panel.active{flex-grow:5.5}
.panel picture{position:absolute;inset:0}
.panel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,14,13,.88) 6%,rgba(24,14,13,.25) 48%,rgba(24,14,13,.5) 100%)}
.panel:not(.active) img{filter:saturate(.85) brightness(.8)}
.panel.active img{transform:scale(1.04)}
.panel-label{position:absolute;left:0;bottom:0;z-index:2;width:100%;padding:22px 0;text-align:center;
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-family:var(--serif);font-size:19px;font-weight:600;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55);
  transition:opacity .3s;pointer-events:none}
.panel.active .panel-label{opacity:0}
.panel-body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:26px 26px 24px;color:#fff;min-width:340px;
  opacity:0;transform:translateY(14px);transition:opacity .45s .12s,transform .45s .12s;pointer-events:none}
.panel.active .panel-body{opacity:1;transform:none}
.panel-body h3{font-size:clamp(22px,2.3vw,30px);margin-bottom:8px;color:#fff}
.panel-body p{font-size:15px;color:rgba(255,255,255,.9);margin-bottom:14px;max-width:40ch}
.panel .inc{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.panel .inc li{font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);padding:5px 11px;border-radius:999px;backdrop-filter:blur(3px)}
@media (max-width:900px){
  .panels{flex-direction:column;height:auto;gap:12px}
  .panel{flex:none;height:auto;min-height:210px;border-radius:16px;display:flex;align-items:flex-end}
  .panel.active{flex:none}
  .panel-label{display:none}
  .panel-body{position:relative;opacity:1;transform:none;min-width:0;width:100%}
  .panel img,.panel:not(.active) img{filter:none}
}

/* chef + stats ------------------------------------------------------------- */
.chef-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:56px;align-items:start}
.chef-copy p{color:var(--ink-soft);margin-top:18px;max-width:52ch}
.chef-copy h2{margin-top:14px}
.chef-portrait{display:flex;align-items:center;gap:18px;margin:2px 0 22px}
.chef-portrait img{width:104px;height:104px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:var(--blush);
  border:3px solid #fff;box-shadow:0 12px 30px -8px rgba(34,28,26,.35)}
.chef-portrait figcaption{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);line-height:1.1;display:flex;flex-direction:column}
.chef-portrait figcaption span{margin-top:5px;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta)}

/* what-we-cater: detailed service rows -------------------------------------- */
.svc-detail-section{padding-top:clamp(20px,3vw,36px)}
.svc-detail{display:flex;flex-direction:column;gap:clamp(44px,7vw,88px)}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:center}
.svc-row-media{border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 34px 64px -34px rgba(34,28,26,.55)}
.svc-row-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-row:nth-child(even) .svc-row-media{order:2}
.svc-num{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--magenta);letter-spacing:.02em}
.svc-row h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,38px);margin-top:6px;line-height:1.04}
.svc-row-copy p{color:var(--ink-soft);margin-top:14px;max-width:46ch}
.svc-inc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;list-style:none}
.svc-inc li{font-size:13px;font-weight:600;color:var(--magenta-deep);background:rgba(193,48,92,.07);
  border:1px solid rgba(193,48,92,.18);border-radius:999px;padding:6px 14px}
@media(max-width:760px){.svc-row{grid-template-columns:1fr;gap:20px}.svc-row:nth-child(even) .svc-row-media{order:0}}

/* who we serve -------------------------------------------------------------- */
.serve-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;padding:0;list-style:none;margin-top:8px}
.serve-list li{display:flex;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;
  background:var(--paper-2);font-weight:600;color:var(--ink);font-size:15px}
.serve-list li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--magenta);flex:0 0 auto}

/* info-card grids (values / trust) ------------------------------------------ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(244px,1fr));gap:16px;margin-top:10px}
.info-card{padding:24px 24px 26px;border:1px solid var(--line);border-radius:16px;background:var(--paper-2)}
.info-card .ic-k{font-family:var(--serif);font-style:italic;color:var(--magenta);font-size:15px}
.info-card h3{font-family:var(--serif);font-weight:600;font-size:20px;margin-top:4px;line-height:1.12}
.info-card p{margin-top:10px;color:var(--ink-soft);font-size:15px;line-height:1.55}
.trust-card{display:flex;gap:14px;align-items:flex-start}
.trust-card svg{flex:0 0 auto;width:22px;height:22px;margin-top:1px;color:var(--magenta)}
.trust-card p{margin-top:0;color:var(--ink-soft);font-size:15px;line-height:1.55}
.trust-card p strong{color:var(--ink)}
.ethos-strip .strip-lead{max-width:20ch;margin-inline:auto}

/* "see more" deep links (home teasers) -------------------------------------- */
.more-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--magenta);transition:gap .2s,color .2s}
.more-link:hover{gap:13px;color:var(--magenta-deep)}
.more-link span{font-size:1.1em;line-height:1}
.more-row{text-align:center;margin-top:34px}
.chef-copy .more-link{margin-top:26px}

/* FAQ ----------------------------------------------------------------------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column}
.faq-item{padding:24px 4px;border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{font-family:var(--serif);font-size:clamp(19px,2.2vw,23px);font-weight:600;color:var(--ink);line-height:1.2}
.faq-item p{margin-top:10px;color:var(--ink-soft);max-width:72ch}
.faq-item a{color:var(--magenta);font-weight:600}

/* the-food: what-we-cook category cards ------------------------------------- */
.food-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:12px}
.food-cat{border-radius:18px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(34,28,26,.4)}
.fc-media{aspect-ratio:4/3;overflow:hidden}
.fc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.food-cat:hover .fc-media img{transform:scale(1.05)}
.fc-body{padding:20px 22px 24px}
.fc-body h3{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink)}
.fc-body p{margin-top:8px;color:var(--ink-soft);font-size:15px;line-height:1.55}

/* the-food: cooking clips (2-up motion) ------------------------------------- */
.motion-2up{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto}
.motion-clip{margin:0;position:relative;border-radius:18px;overflow:hidden;background:#171113;box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.motion-clip video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.motion-clip figcaption{position:absolute;left:0;right:0;bottom:0;padding:46px 16px 14px;color:#fff;font-family:var(--sans);font-size:13.5px;font-weight:600;background:linear-gradient(to top,rgba(15,8,11,.82),transparent)}
@media(max-width:560px){.motion-2up{grid-template-columns:1fr;max-width:360px}}

/* references: kitchen "proof wall" (auto-scrolling rows) --------------------- */
.kitchen-wall{background:#171113;padding:clamp(44px,6vw,76px) 0;overflow:hidden}
.kitchen-wall .section-head{max-width:var(--wrap);margin:0 auto clamp(28px,4vw,44px);padding:0 24px}
.kitchen-wall .kicker{color:var(--blush)}
.kitchen-wall h2{color:#fff}
.kitchen-wall .muted{color:rgba(255,255,255,.72)}
.kw-track{display:flex;gap:14px;width:max-content;margin-bottom:14px;animation:kw-scroll var(--kw-dur,58s) linear infinite;will-change:transform}
.kw-track.kw-rev{animation-direction:reverse}
.kitchen-wall:hover .kw-track{animation-play-state:paused}
.kw-fig{margin:0;flex:0 0 auto;width:clamp(148px,19vw,208px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--blush);cursor:zoom-in;box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.kw-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.kw-fig:hover img{transform:scale(1.06)}
@keyframes kw-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.kw-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* lightbox ------------------------------------------------------------------ */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(15,8,11,.9);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:5vw;opacity:0;pointer-events:none;
  transition:opacity .25s;cursor:zoom-out}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.method{margin-top:34px;display:grid;gap:22px}
.method-step{border-left:2px solid var(--gold);padding-left:18px}
.method-step .mnum{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.method-step p{margin-top:6px;font-size:15px}
.stats{background:linear-gradient(160deg,var(--magenta),var(--magenta-deep));color:#fff;border-radius:24px;padding:34px 30px;box-shadow:var(--shadow);position:sticky;top:100px}
.stat{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.stat b{font-family:var(--serif);font-size:42px;font-weight:600;display:block;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;letter-spacing:.04em;opacity:.85}
.stat-quote{font-family:var(--serif);font-style:italic;font-size:18px;margin-top:22px;opacity:.95;font-variation-settings:'SOFT' 50}

/* food-as-film band -------------------------------------------------------- */
.film{position:relative;min-height:min(72vh,560px);display:flex;align-items:center;overflow:hidden;background:#171113}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.film-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,10,14,.84) 0%,rgba(20,10,14,.5) 46%,rgba(20,10,14,.15) 100%)}
.film-copy{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px);color:#fff;width:100%}
.film-copy .kicker{color:var(--blush)}
.film-copy h2{color:#fff;max-width:15ch}
.film-copy p{margin-top:16px;font-size:clamp(16px,1.9vw,20px);color:rgba(255,255,255,.9);max-width:42ch}
.film-right .film-overlay{background:linear-gradient(270deg,rgba(20,10,14,.84) 0%,rgba(20,10,14,.5) 46%,rgba(20,10,14,.12) 100%)}
.film-right .film-copy{text-align:right}
.film-right .film-copy h2,.film-right .film-copy p{margin-left:auto}
html.cw-embedded .film{min-height:440px}
@media (max-width:640px){
  .film{min-height:440px}
  .film-overlay{background:linear-gradient(180deg,rgba(20,10,14,.5),rgba(20,10,14,.86))}
}

/* gallery (real photos) ---------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:820px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:440px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery figure{margin:0;border-radius:16px;overflow:hidden;background:var(--blush);aspect-ratio:3/4;box-shadow:0 10px 24px -16px rgba(60,20,35,.4)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery-note{margin-top:18px;font-size:14px;color:var(--sage);text-align:center}

/* references --------------------------------------------------------------- */
.ref-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start}
.ref-card{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:30px 28px;position:relative}
.ref-card .quote{font-family:var(--serif);font-size:19px;line-height:1.4;color:var(--ink);font-weight:500}
.ref-card .mark{font-family:var(--serif);font-size:56px;line-height:0;color:var(--blush);position:absolute;top:26px;right:24px}
.ref-card .who{margin-top:18px;font-weight:600;font-size:15px}
.ref-card .role{font-size:13px;color:var(--ink-soft)}
.ref-card .date{font-size:12px;color:var(--sage);margin-top:2px}

/* quote builder (on a rustic wood table) ----------------------------------- */
.enquire{position:relative;overflow:hidden;background:#20140f}
.enquire.section{max-width:none;margin:0}  /* wood stretches full-bleed; inner content stays centred */
.enquire::before{content:"";position:absolute;inset:0;z-index:0;background:url("assets/wood-bg-1600.jpg") center/cover}
.enquire::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(22,13,8,.6),rgba(22,13,8,.76))}
.enquire>*{position:relative;z-index:1}
.enquire .kicker{color:var(--gold)}
.enquire .section-head h2{color:#fff}
.enquire .section-head .muted{color:rgba(255,255,255,.82)}
.enquire .qf-label{color:#fff}
.enquire .qf-field{color:rgba(255,255,255,.9)}
.enquire .qf-field span{color:rgba(255,255,255,.62)}
.enquire .q-range-scale{color:rgba(255,255,255,.62)}
.enquire .q-range{background:linear-gradient(90deg,var(--magenta) var(--fill,40%),rgba(255,255,255,.28) var(--fill,40%))}
.quote{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;max-width:1040px;margin:0 auto 40px}
.quote-form{display:grid;gap:22px}
.qf-group{display:grid;gap:12px}
.qf-label{font-size:14.5px;font-weight:600;color:var(--ink)}
.qf-label b{color:var(--magenta);font-family:var(--serif);font-size:21px;margin-left:6px;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-soft);background:var(--paper-2);
  border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;user-select:none}
.chip:hover{border-color:var(--magenta);color:var(--magenta)}
.chip.on{background:var(--magenta);border-color:var(--magenta);color:#fff;transform:translateY(-1px)}
.q-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,var(--magenta) var(--fill,40%),var(--line) var(--fill,40%))}
.q-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--magenta);box-shadow:var(--shadow);cursor:pointer}
.q-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--magenta);cursor:pointer}
.q-range-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--sage);margin-top:-2px}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qf-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.qf-field span{font-weight:400;color:var(--sage)}
.qf-field input,.qf-field textarea{font-family:var(--sans);font-size:16px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--paper-2);color:var(--ink);transition:border-color .2s}
.qf-field input:focus,.qf-field textarea:focus{outline:none;border-color:var(--magenta)}

.quote-summary{position:sticky;top:96px;background:linear-gradient(165deg,#241A1D,#3a1226);color:#fff;border-radius:22px;
  padding:28px 26px;box-shadow:var(--shadow-lg)}
.qs-kicker{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blush);margin-bottom:12px}
.qs-line{font-family:var(--serif);font-size:clamp(21px,2.4vw,27px);line-height:1.22;font-style:italic;margin-bottom:16px}
.qs-list{list-style:none;display:grid;gap:8px;margin-bottom:22px}
.qs-list li{font-size:14px;color:rgba(255,255,255,.9);padding-left:20px;position:relative}
.qs-list li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--magenta)}
.qs-list li.muted-item{color:rgba(255,255,255,.45)}
.qs-list li.muted-item::before{background:rgba(255,255,255,.3)}
.btn-email{width:100%;justify-content:center;gap:10px;background:var(--magenta);color:#fff;font-weight:700;font-size:16px;padding:15px;
  border-radius:999px;display:inline-flex;align-items:center;transition:background .2s,transform .2s,box-shadow .2s;will-change:transform;
  box-shadow:0 12px 26px -12px rgba(193,48,92,.7)}
.btn-email:hover{background:var(--magenta-deep);transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(193,48,92,.8)}
.btn-email svg{flex:none}
.qs-call{display:block;text-align:center;margin-top:12px;font-size:14px;color:var(--blush);font-weight:600}
.qs-call:hover{color:#fff}
.qs-note{margin-top:14px;font-size:12px;color:rgba(255,255,255,.55);text-align:center;line-height:1.45}

.contact{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1040px;margin:0 auto}
.contact-item{display:flex;flex-direction:column;padding:16px 20px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;font-weight:600;transition:transform .2s,border-color .2s}
.contact-item span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);margin-bottom:3px}
.contact-item:hover{transform:translateY(-3px);border-color:var(--magenta)}
@media (max-width:820px){
  .quote{grid-template-columns:1fr;gap:24px}
  .quote-summary{position:static}
  .contact{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.qf-row{grid-template-columns:1fr}}

/* footer — full-width pink ------------------------------------------------- */
.site-footer{background:linear-gradient(155deg,var(--magenta),var(--magenta-deep));color:#fff;margin-top:0}
.footer-top{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,7vw,80px) 24px 40px;display:grid;grid-template-columns:1.5fr 1fr 1.4fr;gap:40px}
.foot-wordmark{font-family:var(--serif);font-size:27px;font-weight:600;margin-bottom:12px}
.foot-tag{font-size:15px;color:rgba(255,255,255,.85);max-width:38ch;line-height:1.55}
.foot-col .foot-h{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-bottom:14px}
.foot-col a{display:block;color:rgba(255,255,255,.9);font-size:15px;padding:6px 0;transition:color .2s,padding-left .2s}
.foot-col a:hover{color:#fff;padding-left:5px}
.foot-brand a.foot-cta{display:inline-flex;margin-top:20px;background:#fff;color:var(--magenta-deep);font-weight:700;padding:12px 24px;border-radius:999px;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 26px -14px rgba(0,0,0,.4)}
.foot-brand a.foot-cta:hover{transform:translateY(-2px);padding-left:24px;color:var(--magenta-deep)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.2);max-width:var(--wrap);margin:0 auto;padding:20px 24px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.82)}
.footer-bottom .cw-badge{margin:0;color:rgba(255,255,255,.85)}
.footer-bottom .cw-badge strong{color:#fff}
@media (max-width:820px){.footer-top{grid-template-columns:1fr 1fr;gap:28px}.foot-brand{grid-column:1/-1}}
@media (max-width:520px){.footer-top{grid-template-columns:1fr}}
@media (max-width:900px){.footer-bottom{padding-bottom:84px}}

/* cta band (sub-pages) ----------------------------------------------------- */
.cta-band{background:var(--paper-2);border-top:1px solid var(--line)}
.cta-inner{max-width:var(--wrap);margin:0 auto;padding:clamp(52px,8vw,92px) 24px;text-align:center;display:grid;justify-items:center;gap:6px}
.cta-inner h2{max-width:20ch}
.cta-inner .btn{margin-top:16px}

/* multi-page sub-page shell ------------------------------------------------- */
body.subpage{padding-top:64px}
body.subpage .site-header{background:rgba(248,245,239,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding-top:10px;padding-bottom:10px}
body.subpage main>section:first-child,body.subpage main>.section:first-child{padding-top:clamp(20px,3vw,40px)}
.nav a.active{color:var(--ink)}
.nav a.active::after{right:0}
.nav-cta.active{background:var(--magenta-deep)}

/* mobile action bar -------------------------------------------------------- */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;grid-template-columns:1fr 1fr 1fr;gap:1px;
  background:var(--line);box-shadow:0 -6px 20px -10px rgba(0,0,0,.3)}
.action-bar a{padding:15px;text-align:center;font-weight:700;font-size:14px;background:var(--paper-2)}
.action-bar .ab-call{color:var(--ink)}
.action-bar .ab-wa{color:var(--leaf)}
.action-bar .ab-quote{background:var(--magenta);color:#fff}

/* reveal ------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}

/* petal burst -------------------------------------------------------------- */
.petal-burst{position:fixed;width:14px;height:18px;border-radius:60% 60% 55% 55%/70% 70% 40% 40%;
  background:var(--magenta);pointer-events:none;z-index:60;will-change:transform,opacity}

/* embed cap (dashboard iframe) --------------------------------------------- */
html.cw-embedded .hero{height:760px}

/* header over the dark hero (home, pre-scroll) ------------------------------ */
body:not(.subpage) .site-header:not(.scrolled) .nav a{color:rgba(248,245,239,.85)}
body:not(.subpage) .site-header:not(.scrolled) .nav a:hover{color:#fff}
body:not(.subpage) .site-header:not(.scrolled) .nav-toggle span{background:var(--paper)}
body:not(.subpage) .site-header:not(.scrolled) .brand{filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));transition:filter .3s}

/* responsive --------------------------------------------------------------- */
@media (max-width:900px){
  .tri-panels{flex-direction:column}
  .tri-panel{flex-basis:33.34svh}
  .tri-tag{display:none} /* chips collide with the value block on phones; tap-to-expand still reveals captions */
  .cap{top:16px;padding:0 20px}
  .cap-title{font-size:clamp(22px,6.4vw,32px)}
  .cap-desc{margin-top:8px;font-size:13px;max-width:40ch}
  .cap-link{margin-top:12px}
  .hero-scrim{height:56svh}
  .hero-value{bottom:calc(64px + 14px)} /* clears the mobile action bar */
  .hero-h1{font-size:clamp(26px,7.4vw,34px)}
  .hero-sub{font-size:12.5px;max-width:44ch}
  .chef-grid{grid-template-columns:1fr;gap:34px}
  .stats{position:static}
  .action-bar{display:grid}
  .nav-toggle{display:flex}
  .nav-cta{display:none}
  .nav{position:fixed;top:56px;left:0;right:0;flex-direction:column;gap:0;padding:6px 0;
    background:rgba(248,245,239,.98);backdrop-filter:blur(12px);box-shadow:0 14px 26px -14px rgba(0,0,0,.28);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .25s,opacity .25s}
  header.nav-open .nav{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:14px 26px;font-size:17px;border-bottom:1px solid var(--line);color:var(--ink)}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .nav .nav-quote-m{display:block;color:var(--magenta);font-weight:700}
}
@media (max-width:520px){
  .row2{grid-template-columns:1fr}
  .stat b{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
  .reveal-load{opacity:1!important;transform:none!important}
  .tri-media,.hero-grain{animation:none!important}
  .tri-tag{opacity:1!important;transform:none!important;transition:none}
  .cap-rule{transform:scaleX(1);transition:none}
  .cap-title,.cap-desc,.cap-link{opacity:1;transform:none;transition:none}
  .tri-dim{transition:none}
  .hero-value{opacity:1!important;transform:translateX(-50%)!important}
}