/* ==========================================================================
   Souvlaki King — static HTML/CSS replica
   Design canvas: 1280 px wide (desktop). Sections keep the original heights
   and element coordinates; below 900 px everything reflows into the stacked
   mobile layout.
   ========================================================================== */

/* ---------------------------------- fonts --------------------------------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/325651f1111659cbaa0ee104bce3f541.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/b79740772ac87fd53b27808583c444a0.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600 700;font-display:swap;
  src:url("../fonts/668e204ecea8e06c27fb74af58a48107.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:600 700;font-display:swap;
  src:url("../fonts/1cf20a332bb5fa921b7062b605d9386b.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:800 900;font-display:swap;
  src:url("../fonts/40d2ed8c32cb27fcee113f357cd026d8.woff2") format("woff2")}

@font-face{font-family:"Uni Sans";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("../fonts/6bc9dbcdb445eda69b8686ec96ce33d5.woff") format("woff")}

@font-face{font-family:"Mont";font-style:italic;font-weight:400 900;font-display:swap;
  src:url("../fonts/3b520b312dcad0a149de91bed7fcdc5a.woff2") format("woff2")}

@font-face{font-family:"Nexa";font-style:italic;font-weight:400 900;font-display:swap;
  src:url("../fonts/8703ee83818621c96831a4845d46bf88.woff2") format("woff2")}

@font-face{font-family:"Arimo";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/f8f199f09526f79e87644ed227e0f651.woff2") format("woff2")}
@font-face{font-family:"Arimo";font-style:normal;font-weight:600 700;font-display:swap;
  src:url("../fonts/98c4d2c0223fc8474641c77f923528e9.woff2") format("woff2")}

/* ---------------------------------- tokens -------------------------------- */
:root{
  --red:#c40000;
  --brown:#7b3911;
  --cream:#f6f6e9;
  --green:#1d7151;
  --amber:#ffb714;
  --nav-h:48px;
}

/* ---------------------------------- reset --------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#fff;
  color:#000;
  font-family:"Poppins",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
p,h1,h2,h3{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ================================== NAV =================================== */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--nav-h);
  background:#000;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.burger{display:none}

.mainnav ul{display:flex;align-items:center}
.mainnav li{padding:0 16px}
.mainnav a{
  display:inline-block;
  font-family:"Poppins",Arial,sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1.2;
  color:#fff;
  white-space:nowrap;
}
.mainnav a:hover{color:var(--amber)}

/* ================================ SECTIONS ================================= */
.sec{position:relative;width:100%;overflow:hidden}
.canvas{position:relative;width:1280px;height:100%;margin:0 auto}
.sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.canvas > *{position:absolute;z-index:1}

/* buttons ------------------------------------------------------------------ */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}
.btn-solid{
  background:var(--red);
  color:#fff;
  font-family:"Poppins",Arial,sans-serif;
  font-weight:700;font-style:italic;
  text-transform:uppercase;
}
.btn-outline{
  background:transparent;
  border:2px solid var(--red);
  border-radius:6px;
  color:var(--red);
  font-family:"Poppins",Arial,sans-serif;
  font-weight:700;font-style:italic;
  text-transform:uppercase;
}
.btn-cream{
  background:var(--cream);
  color:var(--green);
  font-family:"Poppins",Arial,sans-serif;
  font-weight:600;
}
.btn-solid:hover{background:#a70000}
.btn-outline:hover{background:var(--red);color:#fff}
.btn-cream:hover{background:#fff}

/* ---------------------------------- HERO ---------------------------------- */
.sec-hero{height:746px;background:#000;margin-top:var(--nav-h)}
.hero-bg{object-position:center 79%;transform:scaleX(-1)}

.hero-logo{
  width:229px;height:229px;
  left:522px;top:119px;
}
.hero-welcome,.hero-title,.hero-sub{
  left:0;right:0;
  text-align:center;
  color:#fff;
  padding-right:20px;      /* original optical centre sits ~10px left of 640 */
}
.hero-welcome{
  top:363px;
  font-family:"Uni Sans",Arial,sans-serif;
  font-weight:900;
  font-size:43.8px;
  line-height:57.8px;
  letter-spacing:-0.13px;
}
.hero-title{
  top:397px;
  font-family:"Uni Sans",Arial,sans-serif;
  font-weight:900;
  font-size:87.2px;
  line-height:119.3px;
  letter-spacing:-0.26px;
}
.hero-sub{
  top:507px;
  font-family:"Poppins",Arial,sans-serif;
  font-weight:900;font-style:italic;
  font-size:32.1px;
  line-height:31px;
  letter-spacing:-0.58px;
  color:var(--amber);
}
.sec-hero .btn-solid{
  left:510px;top:614px;
  width:242px;height:57px;
  font-size:20.4px;
  line-height:27.6px;
  letter-spacing:0.47px;
}

/* -------------------------------- OUR STORY -------------------------------- */
.sec-story{height:505px;background:#fff}
/* the original stretches the pattern to 1280x906 and offsets it -200px */
.story-bg{inset:auto;left:0;top:-200px;width:100%;height:906px;object-fit:fill}

.story-img{left:734px;top:160px;width:496px;height:292px}

.eyebrow{
  left:101px;top:57px;
  font-family:"Mont",Arial,sans-serif;
  font-weight:900;font-style:italic;
  font-size:15.55px;
  line-height:21px;
  letter-spacing:6.81px;
  text-transform:uppercase;
  color:var(--red);
}
.story-title{
  left:99px;top:87px;
  font-family:"Mont",Arial,sans-serif;
  font-weight:900;font-style:italic;
  font-size:61.1px;
  line-height:56.3px;
  letter-spacing:-3.73px;
  text-transform:uppercase;
  color:var(--red);
}
.story-p{
  left:101px;width:634px;
  font-family:"Poppins",Arial,sans-serif;
  font-weight:900;font-style:italic;
  font-size:18.75px;
  line-height:22.5px;
  letter-spacing:-0.34px;
  text-align:justify;
  color:#000;
}
.story-p1{top:151px}
.story-p2{top:241px}
.story-p3{top:331px}
.story-tag{
  left:99px;top:393px;width:640px;
  font-family:"Nexa",Arial,sans-serif;
  font-weight:900;font-style:italic;
  font-size:30.7px;
  line-height:35.3px;
  letter-spacing:-1.14px;
  color:var(--red);
}

/* ------------------------------- ORDER ONLINE ------------------------------ */
.sec-order{height:513px;background:#fff}
.order-img{left:735px;top:61px;width:482px;height:361px}

.order-kicker{
  left:112px;top:78px;
  font-family:"Mont",Arial,sans-serif;
  font-weight:900;font-style:italic;
  font-size:28px;
  line-height:39px;
  letter-spacing:-1.6px;
  color:#000;
}
.order-title1,.order-title2{
  left:112px;
  font-family:"Mont",Arial,sans-serif;
  font-weight:900;font-style:italic;
  text-transform:uppercase;
  color:var(--red);
}
.order-title1{
  top:127px;
  font-size:61.1px;
  line-height:56.3px;
  letter-spacing:-3.73px;
}
.order-title2{
  top:183px;
  font-size:49.9px;
  line-height:46px;
  letter-spacing:-3.04px;
}
.order-p{
  left:112px;width:593px;
  font-family:"Nexa",Arial,sans-serif;
  font-weight:900;font-style:italic;
  font-size:22.5px;
  line-height:21.6px;
  letter-spacing:-0.58px;
  text-align:justify;
  color:#000;
}
.order-p1{top:238px}
.order-p2{top:303px}
.sec-order .btn-outline{
  left:112px;top:366px;
  width:243px;height:51px;
  font-size:20.4px;
  line-height:27.6px;
  letter-spacing:0.47px;
}

/* ---------------------------------- MENU ----------------------------------- */
.sec-menu{height:485px;background:var(--brown)}
.menu-title{
  left:0;right:0;top:81px;
  padding-right:4px;
  text-align:center;
  font-family:"Mont",Arial,sans-serif;
  font-weight:900;font-style:italic;
  font-size:65.4px;
  line-height:60.4px;
  letter-spacing:-3.99px;
  text-transform:uppercase;
  color:var(--cream);
}
.menu-p{
  left:163px;width:955px;top:229px;
  text-align:center;
  font-family:"Mont",Arial,sans-serif;
  font-weight:900;font-style:italic;
  font-size:22.4px;
  line-height:27.1px;
  letter-spacing:-1.03px;
  color:var(--cream);
}
.sec-menu .btn-cream{
  left:522px;top:355px;
  width:236px;height:59px;
  font-size:25.9px;
  line-height:24px;
  letter-spacing:-1.6px;
}

/* --------------------------------- FOOTER ---------------------------------- */
.sec-footer{height:431px;background:#000;color:#fff}
.foot-logo{left:167px;top:89px;width:212px;height:212px}
.foot-label{
  left:709px;
  font-family:"Poppins",Arial,sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:15px;
  letter-spacing:-0.05px;
  color:#fff;
}
.foot-label-loc{top:61px}
.foot-label-hours{top:141px}
.foot-label-phone{top:329px}

.foot-text{
  left:709px;
  font-family:"Poppins",Arial,sans-serif;
  font-weight:400;
  font-size:20.4px;
  line-height:21px;
  letter-spacing:-0.06px;
  color:#fff;
}
.foot-addr{top:86px;width:340px}
.foot-addr a{color:inherit}
.foot-addr a:hover{color:var(--amber)}
.foot-phone{top:353px}
.foot-phone a:hover{color:var(--amber)}

/* opening hours — rendered from the SIPO API, Mon → Sun */
.foot-hours{left:709px;top:166px;width:300px;list-style:none;margin:0;padding:0}

/* -------------------------------- COPYRIGHT -------------------------------- */
.sec-copy{height:75px;background:#000;color:#fff}
.copy-text{
  left:132px;top:26px;
  font-family:"Poppins",Arial,sans-serif;
  font-weight:400;
  font-size:12.6px;
  line-height:17px;
  color:#fff;
}
.copy-text a:hover{color:var(--amber)}
.copy-logo{left:966px;top:23px}
.copy-logo img{width:147px;height:22px}

/* ==========================================================================
   ENTRANCE ANIMATIONS
   Matches the live site, which drives two entrance effects per element as it
   scrolls into view (recorded frame-by-frame off souvlakiking.co.nz):
     rise — translateY(+78px) -> 0 with opacity 0 -> 1, ~500 ms
     pop  — scale(0.06) -> 1 with a small overshoot, 500 ms / 2 s on buttons
   Siblings are staggered ~150-200 ms apart; each element plays once.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .anim [data-anim]{
    transition-delay:var(--d,0s);
    transition-timing-function:cubic-bezier(.22,.61,.36,1);
    will-change:transform,opacity;
  }
  .anim [data-anim^="rise"]{
    opacity:0;
    transform:translateY(78px);
    transition-property:transform,opacity;
    transition-duration:.5s;
  }
  .anim [data-anim="rise-slow"]{transition-duration:2s}

  /* pop scales up from almost nothing and overshoots slightly before settling */
  .anim [data-anim^="pop"]{
    transform:scale(.06);
    transition-property:transform;
    transition-duration:.5s;
    transition-timing-function:cubic-bezier(.2,1.16,.34,1);
  }
  .anim [data-anim="pop-slow"]{transition-duration:2s}

  .anim [data-anim].in{opacity:1;transform:none}
}

/* ==========================================================================
   RESPONSIVE — below the 1280 canvas the page reflows into the stacked
   layout used by the original on tablet / phone.
   ========================================================================== */
@media (max-width:1279px){
  .canvas{width:100%;padding:0 24px}
  .hero-logo{left:50%;margin-left:-114px}
  .story-img{left:auto;right:0}
  .order-img{left:auto;right:0}
  .eyebrow,.story-title,.story-p,.story-tag{left:24px}
  .order-kicker,.order-title1,.order-title2,.order-p,.sec-order .btn-outline{left:24px}
  .foot-logo{left:24px}
  .foot-label,.foot-text,.foot-hours{left:52%}
  .copy-text{left:24px}
  .copy-logo{left:auto;right:24px}
  .sec-menu .btn-cream{left:50%;margin-left:-118px}
  .sec-hero .btn-solid{left:50%;margin-left:-121px}
}

@media (max-width:1100px){
  .story-img{width:400px;height:236px;top:200px}
  .order-img{width:390px;height:292px;top:100px}
  .story-p,.order-p{width:52%}
  .story-tag{width:52%}
  .menu-p{left:24px;right:24px;width:auto}
}

@media (max-width:900px){
  /* ---- flow layout ---- */
  .sec{height:auto !important}
  .canvas{width:100%;height:auto;padding:0 24px}
  .canvas > *{position:relative;left:auto !important;right:auto !important;
              top:auto !important;margin-left:0 !important}

  /* nav becomes a burger */
  .topbar{justify-content:flex-end;padding:0 16px}
  .burger{
    display:block;
    width:38px;height:26px;
    padding:0;border:0;background:transparent;cursor:pointer;
    position:relative;
  }
  .burger span{
    display:block;position:absolute;left:0;
    width:38px;height:3px;background:#fff;
    transition:transform .25s ease,opacity .2s ease;
  }
  .burger span:nth-child(1){top:2px}
  .burger span:nth-child(2){top:11px}
  .burger span:nth-child(3){top:20px}
  .nav-open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .nav-open .burger span:nth-child(2){opacity:0}
  .nav-open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

  .mainnav{
    position:fixed;left:0;right:0;top:var(--nav-h);
    background:#000;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-open .mainnav{max-height:320px}
  .mainnav ul{display:block;padding:8px 0}
  .mainnav li{padding:0}
  .mainnav a{display:block;padding:14px 24px;font-size:17px}

  /* ---- hero ---- */
  .sec-hero{min-height:660px;display:flex;align-items:center;padding:34px 0}
  .sec-hero .canvas{display:flex;flex-direction:column;align-items:center;
                    justify-content:center;text-align:center}
  .hero-bg{object-position:center 58%}
  .hero-logo{width:276px;height:276px;margin:0 0 4px}
  .hero-welcome,.hero-title,.hero-sub{padding-right:0;width:100%}
  .hero-welcome{font-size:28.8px;line-height:39px;letter-spacing:-0.09px}
  .hero-title{font-size:58px;line-height:80px;letter-spacing:-0.18px}
  .hero-sub{font-size:21.6px;line-height:21px;letter-spacing:-0.44px;margin-bottom:30px}
  .sec-hero .btn-solid{width:245px;height:55px;font-size:20.6px;line-height:28px;letter-spacing:0.48px}

  /* ---- story ---- */
  .sec-story{padding:44px 0 56px}
  .sec-story .canvas{display:flex;flex-direction:column}
  .story-img{width:min(460px,92%);height:auto;margin:26px auto 0;order:9}
  .eyebrow{font-size:15.7px;line-height:21px;letter-spacing:6.9px}
  .story-title{font-size:62px;line-height:57px;letter-spacing:-3.78px;margin-bottom:14px}
  .story-p{width:100%;font-size:19px;line-height:22.8px;letter-spacing:-0.34px;margin-bottom:16px}
  .story-tag{width:100%;font-size:30.2px;line-height:35.8px;letter-spacing:-1.15px;margin-top:6px}

  /* ---- order ---- */
  .sec-order{padding:44px 0 56px}
  .sec-order .canvas{display:flex;flex-direction:column}
  .order-img{width:min(440px,92%);height:auto;margin:28px auto 0;order:9}
  .order-kicker{font-size:28.3px;line-height:39.5px;letter-spacing:-1.62px}
  .order-title1{font-size:62px;line-height:57px;letter-spacing:-3.78px}
  .order-title2{font-size:50.5px;line-height:46.6px;letter-spacing:-3.08px;margin-bottom:14px}
  .order-p{width:100%;font-size:22.8px;line-height:21.8px;letter-spacing:-0.59px;margin-bottom:14px}
  .sec-order .btn-outline{width:245px;height:53px;margin-top:18px;
                          font-size:20.6px;line-height:28px;letter-spacing:0.48px}

  /* ---- menu ---- */
  .sec-menu{padding:48px 0 56px}
  .sec-menu .canvas{display:flex;flex-direction:column;align-items:center}
  .menu-title{padding-right:0;font-size:66px;line-height:61px;letter-spacing:-4.04px}
  .menu-p{width:100%;font-size:22.7px;line-height:27.5px;letter-spacing:-1.04px;margin:22px 0 28px}
  .sec-menu .btn-cream{width:240px;height:58px;font-size:26.3px;line-height:24.4px;letter-spacing:-1.63px}

  /* ---- footer ---- */
  .sec-footer{padding:44px 0 48px}
  .sec-footer .canvas{display:flex;flex-direction:column;align-items:flex-start}
  .foot-logo{width:230px;height:230px;align-self:center;margin-bottom:16px}
  .foot-label{margin-top:18px;margin-bottom:6px;font-size:15.2px;line-height:15.2px}
  .foot-label-loc{margin-top:0}
  .foot-text{font-size:20.3px;line-height:21px}
  .foot-addr{width:auto}
  .foot-hours{margin-top:4px;width:100%;max-width:340px}

  /* ---- copyright ---- */
  .sec-copy{padding:22px 0}
  .sec-copy .canvas{display:flex;flex-direction:column;align-items:center;gap:14px}
  .copy-text{text-align:center;font-size:12.6px;line-height:18px}
  .copy-logo img{width:147px;height:22px}
}

/* phone — matches the original's rendering at 375 px */
@media (max-width:520px){
  .canvas{padding:0 15px}
  .sec-hero{min-height:545px;padding:24px 0}
  .hero-logo{width:230px;height:230px}
  .hero-welcome{font-size:24px;line-height:32.5px}
  .hero-title{font-size:48.4px;line-height:67px}
  .hero-sub{font-size:18px;line-height:17.4px;margin-bottom:26px}
  .sec-hero .btn-solid{width:205px;height:46px;font-size:17.2px;line-height:23.3px;letter-spacing:.4px}

  .eyebrow{font-size:13.1px;line-height:17.7px;letter-spacing:5.74px}
  .story-title{font-size:51.6px;line-height:47.5px;letter-spacing:-3.15px}
  .story-p{font-size:15.8px;line-height:19px;letter-spacing:-0.28px;margin-bottom:14px}
  .story-tag{font-size:25.2px;line-height:29.8px;letter-spacing:-0.96px}

  .order-kicker{font-size:23.6px;line-height:32.9px;letter-spacing:-1.35px}
  .order-title1{font-size:51.6px;line-height:47.5px;letter-spacing:-3.15px}
  .order-title2{font-size:42.1px;line-height:38.8px;letter-spacing:-2.57px}
  .order-p{font-size:19px;line-height:18.2px;letter-spacing:-0.49px}
  .sec-order .btn-outline{width:205px;height:46px;font-size:17.2px;line-height:23.3px;letter-spacing:.4px}

  .menu-title{font-size:55.2px;line-height:51px;letter-spacing:-3.37px}
  .menu-p{font-size:18.9px;line-height:22.9px;letter-spacing:-0.87px}
  .sec-menu .btn-cream{width:200px;height:50px;font-size:21.9px;line-height:20.3px;letter-spacing:-1.36px}

  .foot-logo{width:200px;height:200px}
  .foot-label{font-size:12.7px;line-height:12.7px}
  .foot-text{font-size:16.9px;line-height:17.4px}
}