/* ==========================================================================
   Cluck'IZ Fried Chicken — static HTML/CSS rebuild
   --------------------------------------------------------------------------
   The whole page is a 1280 x 3735 px design canvas reproduced 1:1.
   1rem = 10 design px  (html font-size = 100vw / 128), so the entire layout
   scales proportionally with the viewport with no JavaScript at all.
   Every length below is "design pixels / 10".
   ========================================================================== */

/* ------------------------------ base ------------------------------------ */
*,*::before,*::after{box-sizing:border-box}

html{
  font-size:calc(100vw / 128);   /* 1rem = 10 design px  (10px @ 1280px wide) */
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:#000;
  font-family:"Cluckiz Sans",-apple-system,BlinkMacSystemFont,sans-serif;
}
img{display:block;border:0}
p{margin:0}
a{color:inherit}

.canvas{width:100%}

.s{position:relative;width:100%;scroll-margin-top:4.8rem;
   /* clip, not hidden: `hidden` would make each section its own scroll
      container and break the scroll-driven reveals further down */
   overflow:clip}

/* text blocks: absolutely placed, paragraphs flow inside */
.tx{position:absolute}
.tx p{margin:0}

/* ------------------------------ nav ------------------------------------- */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:flex-end;
  height:4.8rem;background:#000;
}
.nav ul{
  display:flex;list-style:none;
  margin:1.5rem 0;padding:0 0 0 4rem;background:#000;
}
.nav li{padding:1.2rem 1.6rem;color:#fff}
.nav a{
  font-family:"Cluckiz Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:700;font-size:1.5rem;line-height:normal;
  color:#fff;text-decoration:none;white-space:nowrap;
}

/* ------------------------------ buttons --------------------------------- */
.btn{display:block;position:absolute;text-decoration:none}
.btn span{display:block;text-transform:uppercase}

/* ========================================================================== */
/* 1. HERO                                              1280 x 728.082        */
/* ========================================================================== */
.s1{height:72.8082rem;background:#fff}
.s1-bg{position:absolute;inset:0}
.s1-bg img{position:absolute;left:-26.5463rem;top:0;width:156.999rem;height:72.8082rem}

.s1-logo{position:absolute;left:46.9264rem;top:5.3649rem;width:34.1472rem;height:34.1472rem;overflow:hidden}
.s1-logo img{width:100%;height:100%}

.s1-title{position:absolute;left:25.9239rem;top:38.3974rem;width:76.1522rem;text-align:center}
.s1-title .glow{
  filter:drop-shadow(rgba(251,178,0,.95) 0 0 .0900933rem)
         drop-shadow(rgba(251,184,20,.75) 0 0 .450467rem)
         drop-shadow(rgba(251,184,20,.44) 0 0 1.3514rem);
}
.s1-title p{
  font-family:"Cluckiz Hero",auto;font-weight:400;
  color:#fff9ec;text-transform:uppercase;
}
.s1-title .l1{font-size:4.12856rem;line-height:7.12152rem}
.s1-title .l2{font-size:4.89243rem;line-height:8.43338rem}

.s1-btn{left:51.4108rem;top:57.0305rem;width:25.1783rem;height:5.5978rem;background:#ffc92c}
.s1-btn span{
  margin:1.04506rem 0 0 .3748rem;width:24.4287rem;text-align:center;
  font-family:"Cluckiz Sans";font-weight:800;font-size:2.74869rem;line-height:3.84187rem;color:#000;
}

/* Table booking sits under the order button, so ORDER NOW! keeps its
   original position from the Canva design. */
.s1-book{
  left:51.4108rem;top:64.6rem;width:25.1783rem;height:4.6rem;
  background:transparent;
  border:.22rem solid rgba(255,255,255,.85);
  border-radius:.4rem;
}
.s1-book span{
  margin:.72rem 0 0;width:100%;text-align:center;
  font-family:"Cluckiz Sans";font-weight:800;font-size:2.05rem;line-height:2.9rem;
  color:#fff;letter-spacing:.03em;
}
.s1-book:hover{background:rgba(255,255,255,.12)}

/* ========================================================================== */
/* 2. WHO WE ARE / VALUES                               1280 x 773.06         */
/* ========================================================================== */
.s2{height:77.306rem;background:#fac01f}
.s2-bg{position:absolute;inset:0}
.s2-bg img{position:absolute;left:-32.4302rem;top:0;width:179.588rem;height:101.018rem}

.s2-title{left:36.718rem;top:7.1965rem;width:58.202rem;text-align:center}
.s2-title p{
  font-family:"Cluckiz Display",auto;font-weight:400;
  font-size:7.93934rem;line-height:9.49886rem;color:#000;text-transform:uppercase;
}

.s2-body{left:16.7185rem;top:20.136rem;width:94.563rem;text-align:justify}
.s2-body p{
  font-family:"Cluckiz Body",auto;font-weight:400;
  font-size:1.91656rem;line-height:2.62372rem;color:#000;
}

.s2-btn{left:45.9051rem;top:48.8055rem;width:33.417rem;height:6.9788rem;background:#bc1823}
.s2-btn span{
  margin:.7752rem 0 0 .3748rem;width:32.6674rem;text-align:center;
  font-family:"Cluckiz Display";font-weight:400;font-size:3.24832rem;line-height:4.4978rem;color:#efefef;
}

/* ========================================================================== */
/* 3. THE REAL & JUICY                                  1280 x 719.649        */
/* ========================================================================== */
.s3{height:71.9649rem;background:#efefef}
.s3-bg{position:absolute;inset:0}
.s3-bg img{position:absolute;left:0;top:-28.0176rem;width:128rem;height:128rem}

.s3-photo{position:absolute;left:64rem;top:9.7712rem;width:55.3304rem;height:52.4224rem}

.s3-head{left:14.2803rem;top:14.902rem;width:27.848rem;text-align:left}
.s3-head p{
  font-family:"Cluckiz Display",auto;font-weight:400;color:#fff;text-transform:uppercase;
  white-space:nowrap;
}
.s3-head .h1{font-size:7.72222rem;line-height:7.68374rem}
.s3-head .h2,
.s3-head .h3{font-size:11.0955rem;line-height:11.0571rem}

.s3-sub{left:14.28rem;top:45.5846rem;width:42.996rem;text-align:left}
.s3-sub p{
  font-family:"Cluckiz Text",auto;font-weight:400;
  font-size:2.24884rem;line-height:3.09224rem;color:#fff;
}

.s3-btn{left:14.2803rem;top:53.4692rem;width:22.5074rem;height:4.6085rem;background:#efefef}
.s3-btn span{
  margin:.8034rem 0 0 .3748rem;width:21.7577rem;text-align:center;
  font-family:"Cluckiz Sans";font-weight:800;font-size:2.37431rem;line-height:3.27965rem;color:#000;
}

/* ========================================================================== */
/* 4. WHAT WE OFFER                                     1280 x 719.649        */
/* ========================================================================== */
.s4{height:71.9649rem;background:#fac01f}

.s4-title{left:12.4402rem;top:7.3092rem;width:101.62rem;text-align:center}
.s4-title p{
  font-family:"Cluckiz Sans";font-weight:800;
  font-size:5.2474rem;line-height:6.2782rem;color:#000;
}
.s4-sub{left:12.4402rem;top:14.3096rem;width:101.62rem;text-align:center}
.s4-sub p{
  font-family:"Cluckiz Sans";font-weight:400;
  font-size:2.2489rem;line-height:3.0922rem;color:#000;
}

/* white cards */
.card{position:absolute;top:21.7039rem;width:29.2179rem;height:33.1131rem;background:#fff;border-radius:2.0297rem}
.card-1{left:12.4402rem}
.card-2{left:48.6414rem}
.card-3{left:84.8426rem}

/* product photos (each clipped by its own frame, exactly as in the design) */
.ci{position:absolute;overflow:hidden}
.ci img{position:absolute}
.ci-1{left:15.441rem;top:24.9858rem;width:23.2162rem;height:17.7568rem}
.ci-1 img{left:-1.35021rem;top:-.310928rem;width:25.2148rem;height:19.6676rem}
.ci-2{left:50.822rem;top:25.9563rem;width:24.8568rem;height:17.7568rem}
.ci-2 img{left:0;top:0;width:17.7568rem;height:25.7579rem;transform:translate(3.54999rem,-4.00052rem) rotate(-90deg)}
.ci-3{left:93.3023rem;top:23.9863rem;width:12.2986rem;height:21.737rem}
.ci-3 img{left:-7.43632rem;top:0;width:27.1712rem;height:21.737rem}

/* card labels */
.cl{text-align:center}
.cl p{
  font-family:"Cluckiz Sans";font-weight:800;
  font-size:1.99899rem;line-height:2.7174rem;color:#000;text-transform:uppercase;
}
.cl-1{left:15.562rem;top:48.433rem;width:22.9735rem}
.cl-2{left:51.589rem;top:48.47rem;width:23.3226rem}
.cl-3{left:87.995rem;top:48.47rem;width:22.9131rem}

/* chevrons (source art is a "<" — mirrored then rotated, as in the design) */
.cc{
  position:absolute;top:52.218rem;
  width:.959451rem;height:1.50771rem;
  transform:rotate(90deg) scaleX(-1);
  fill:#000;
}
.cc-1{left:26.569rem}
.cc-2{left:62.771rem}
.cc-3{left:98.972rem}

.s4-btn{left:50.8866rem;top:61.30515rem;width:24.7274rem;height:5.1464rem;background:#bc1823;border-radius:2.5732rem}
.s4-btn span{
  position:absolute;left:2.7211rem;top:1.0271rem;width:19.2855rem;text-align:center;
  font-family:"Cluckiz Sans";font-weight:500;font-size:2.2489rem;line-height:3.0922rem;color:#efefef;
}

/* ========================================================================== */
/* 5. CONTACT DETAILS                                   1280 x 719.649        */
/* ========================================================================== */
.s5{height:71.9649rem;background:#000}

.s5-photo{position:absolute;left:0;top:0;width:83.3031rem;height:71.9649rem;overflow:hidden}
.s5-photo img{position:absolute;left:-12.3559rem;top:0;width:108.014rem;height:71.9649rem}

.s5-logo{position:absolute;left:88.3713rem;top:6.6613rem;width:25.8103rem;height:25.8103rem}

/* One flowing column so live API hours of any length fit the design slot,
   starting exactly where the original "OPENING HOURS" heading sat. */
.s5-contact{
  position:absolute;
  left:93.3101rem;
  top:34.5706rem;
  width:23.317rem;
  text-align:left;
  font-family:"Cluckiz Sans";
  font-weight:400;
  font-size:1.49927rem;
  line-height:2.0615rem;
  color:#efefef;
}
.s5-contact .s5-h{
  font:inherit;
  font-weight:800;
  text-transform:uppercase;
  margin:0 0 .3em;
}
.s5-contact .s5-b{margin:0 0 1.5em}
.s5-contact .s5-b:last-child{margin-bottom:0}
.s5-contact a{color:inherit;text-decoration:none}
.s5-contact a:hover{color:#fac01f}

/* ========================================================================== */
/* 6. FOOTER                                            1280 x 74.9634        */
/* ========================================================================== */
.s6{height:7.49634rem;background:#000}
.s6-text{left:52.4249rem;top:2.3113rem;width:23.175rem;text-align:center}
.s6-text p{
  font-family:"Cluckiz Text",auto;font-weight:400;
  font-size:.99952rem;line-height:1.3327rem;letter-spacing:.02499rem;color:#fff;
}
.s6-text a{text-decoration:none}

/* ==========================================================================
   ANIMATIONS
   --------------------------------------------------------------------------
   Recreates the Canva entrance animations, measured off the live site:
   the logo rises out of a mask, the hero title springs up from nothing,
   headings wipe open left-to-right, body copy wipes open top-to-bottom,
   buttons fade up, photos fade/slide in.

   The hero runs on page load — pure CSS, exactly like the original.
   Everything below the fold is held at its first frame and released the
   first time it scrolls into view (js/reveal.js, 12 lines). Without that
   script the animations simply all play on load and the page still settles
   correctly, so nothing can ever get stuck half-revealed.
   ========================================================================== */

:root{
  --cz-ease:cubic-bezier(.16,1,.3,1);   /* matches the measured exponential settle */
  --cz-pop:cubic-bezier(.22,1,.36,1);
  --cz-rise:8rem;                        /* buttons rise 80 design px */
  --cz-shift:4.8rem;                     /* the section-3 photo slides in 48 design px */
}

@keyframes cz-fade      {from{opacity:0}                                        to{opacity:1}}
@keyframes cz-rise      {from{transform:translateY(100%)}                       to{transform:none}}
@keyframes cz-fade-rise {from{opacity:0;transform:translateY(var(--cz-rise))}    to{opacity:1;transform:none}}
@keyframes cz-fade-left {from{opacity:0;transform:translateX(var(--cz-shift))}   to{opacity:1;transform:none}}
@keyframes cz-wipe-x    {from{clip-path:inset(0 100% 0 0)}                       to{clip-path:inset(0 0 0 0)}}
@keyframes cz-wipe-y    {from{clip-path:inset(0 0 100% 0)}                       to{clip-path:inset(0 0 0 0)}}
@keyframes cz-pop{
  0%  {transform:scale(0)}
  55% {transform:scale(1.03)}
  74% {transform:scale(.995)}
  88% {transform:scale(1.004)}
  100%{transform:none}
}

/* ---- 1. hero — runs on load ---- */
.s1-logo     {animation:cz-fade .5s linear .15s both}
.s1-logo img {animation:cz-rise 1.5s var(--cz-ease) .15s both}
.s1-title    {animation:cz-pop 1.7s var(--cz-pop) .35s both}
.s1-btn      {animation:cz-fade-rise 1.3s var(--cz-ease) .6s both}
.s1-book     {animation:cz-fade-rise 1.3s var(--cz-ease) .75s both}

/* ---- 2. who we are ---- */
.s2-title{animation:cz-wipe-x 1.1s var(--cz-ease) both}
.s2-body {animation:cz-wipe-y 1.2s var(--cz-ease) .1s both}
.s2-btn  {animation:cz-fade-rise 1.3s var(--cz-ease) .2s both}

/* ---- 3. the real & juicy ---- */
.s3-head {animation:cz-pop 1.7s var(--cz-pop) both}
.s3-sub  {animation:cz-wipe-x 1.1s var(--cz-ease) .15s both}
.s3-photo{animation:cz-fade-left 1.4s var(--cz-ease) both}
.s3-btn  {animation:cz-fade-rise 1.3s var(--cz-ease) .3s both}

/* ---- 4. what we offer (cards stagger left to right) ---- */
.s4-title{animation:cz-fade 1s ease both}
.s4-sub  {animation:cz-fade 1s ease .1s both}
.s4 .card,.s4 .ci,.s4 .cl,.s4 .cc{animation:cz-fade 1s ease both}
.s4 .card-2,.s4 .ci-2,.s4 .cl-2,.s4 .cc-2{animation-delay:.12s}
.s4 .card-3,.s4 .ci-3,.s4 .cl-3,.s4 .cc-3{animation-delay:.24s}
.s4-btn  {animation:cz-fade-rise 1.3s var(--cz-ease) .35s both}

/* ---- 5. contact + footer ---- */
.s5-photo  {animation:cz-fade 1.4s ease both}
.s5-logo   {animation:cz-fade 1.2s ease .15s both}
.s5-contact{animation:cz-fade 1s ease .25s both}
.s6-text   {animation:cz-fade 1s ease both}

/* ---- hold below-the-fold elements until they scroll into view ----
   `.js-reveal` is set by js/reveal.js, so this only applies when the
   script is actually running. */
.js-reveal [data-reveal]        {animation-play-state:paused}
.js-reveal [data-reveal].is-in  {animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
}

/* ==========================================================================
   MOBILE  (<= 767px)
   The scaled desktop canvas would render at roughly a quarter size on a
   phone, so below 768px the same content, colours, images and fonts are
   re-flowed into a single readable column. Delete this block to keep the
   proportionally-scaled desktop design at every width.
   ========================================================================== */
@media (max-width:767px){

  html{font-size:16px}
  :root{--cz-rise:2rem;--cz-shift:2rem}

  /* the mobile nav bar itself lives in css/nav.css (hamburger) */

  .s{height:auto!important;padding:3rem 1.5rem;text-align:center}

  .card-hit{display:none}

  /* neutralise every absolutely-placed element */
  .s .tx,.s .btn,.s .card,.s .ci,.s .cc,
  .s1-title,.s1-logo,.s3-photo,.s5-logo{
    position:static;left:auto;top:auto;width:auto;height:auto;
    margin-left:auto;margin-right:auto;
  }
  .s .tx{text-align:center}

  /* full-bleed section backgrounds */
  .s1-bg,.s2-bg,.s3-bg{position:absolute;inset:0;z-index:0}
  .s1-bg img,.s2-bg img,.s3-bg img{
    position:absolute;inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;
  }
  .s1>*:not(.s1-bg),.s2>*:not(.s2-bg),.s3>*:not(.s3-bg){position:relative;z-index:1}

  /* 1. hero */
  .s1{padding:2rem 1.5rem 3rem}
  .s1-logo{width:min(62vw,17rem);height:auto;margin-bottom:.5rem}
  .s1-logo img{height:auto}
  .s1-title{width:100%;text-align:center}
  .s1-title .glow{
    filter:drop-shadow(rgba(251,178,0,.95) 0 0 1px)
           drop-shadow(rgba(251,184,20,.75) 0 0 5px)
           drop-shadow(rgba(251,184,20,.44) 0 0 15px);
  }
  .s1-title .l1{font-size:2.15rem;line-height:1.725}
  .s1-title .l2{font-size:2.55rem;line-height:1.724}

  .s1-book{border-width:2px;border-radius:8px}
  .s1-book span{font-size:1.05rem!important;letter-spacing:.03em}

  /* shared button look */
  .btn{display:inline-block;margin-top:1.75rem;padding:.85rem 2rem;width:auto;height:auto}
  .btn span{margin:0!important;width:auto!important;font-size:1.15rem!important;line-height:1.2!important}
  .s4-btn span{position:static}

  /* 2. values */
  .s2-title p{font-size:2.5rem;line-height:1.15}
  .s2-body{margin-top:1.5rem}
  .s2-body p{font-size:1rem;line-height:1.55;text-align:left}
  .s2-body p+p{margin-top:.4rem}

  /* 3. the real & juicy */
  .s3{display:flex;flex-direction:column;align-items:center}
  .s3-head{order:1}
  .s3-sub{order:2}
  .s3-photo{order:3}
  .s3-btn{order:4}
  .s3-head p{text-align:center}
  .s3-head .h1{font-size:2.6rem;line-height:1.05}
  .s3-head .h2,.s3-head .h3{font-size:3.6rem;line-height:1.02}
  .s3-sub{margin-top:1rem}
  .s3-sub p{font-size:1.05rem;line-height:1.45}
  .s3-photo{width:100%;height:auto;margin-top:1.5rem}

  /* 4. what we offer */
  .s4-title p{font-size:2.25rem;line-height:1.2}
  .s4-sub{margin-top:.5rem}
  .s4-sub p{font-size:1rem;line-height:1.4}
  .s4 .card{display:none}
  .s4 .ci{
    width:min(78vw,20rem);height:min(62vw,16rem);margin-top:2rem;
    background:#fff;border-radius:1.25rem;padding:1rem;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .s4 .ci img{position:static;left:auto;top:auto;max-width:100%;max-height:100%;width:auto;height:auto;transform:none}
  /* this one is stored rotated in the source artwork, exactly as in the design */
  .s4 .ci-2 img{max-width:none;max-height:none;height:min(66vw,17rem);width:auto;transform:rotate(-90deg)}
  .s4 .cl p{font-size:1.1rem;line-height:1.4;margin-top:.75rem}
  .s4 .cc{display:none}

  /* 5. contact */
  .s5-photo{position:static;width:100%;height:auto;overflow:visible;border-radius:.75rem}
  .s5-photo img{position:static;width:100%;height:auto}
  .s5-logo{width:min(52vw,14rem);height:auto;margin:1.75rem auto .5rem}
  .s5-contact{
    position:static;left:auto;top:auto;width:100%;
    text-align:center;font-size:1rem;line-height:1.6;margin-top:1.5rem;
  }
  .s5-contact .s5-h{margin-top:1.4rem}
  .s5-contact .hours-line .day{display:block}

  /* 6. footer */
  .s6{padding:1.5rem}
  .s6-text{width:100%}
  .s6-text p{font-size:.75rem;line-height:1.4}
}