/* Koko's Mexican Restaurant — static rebuild of the "Grill and Chow" WordPress theme */
@font-face{font-family:Oswald;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/oswald-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Oswald;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/oswald-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/oswald-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/montserrat-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/montserrat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Yellowtail;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/yellowtail-latin-400-normal.woff2) format('woff2')}
:root{
  --dark:#282828;
  --text:#8b8b8b;
  --red:#e9003f;
  --red-2:#dd3333;
  --yellow:#fdb913;
  --orange:#faa61a;
  --green:#96b323;
  --blue:#57b3d1;
  --sky:#76c9df;
  --fb:#00aced;
  --footer:#000;
  --footer-bottom:#171717;
  --footer-text:#939598;
  --line:#f4f4f4;
  --wrap:1100px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,sans-serif;font-size:17px;line-height:1.59;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s,background-color .2s,border-color .2s}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Typography from the theme */
.eyebrow{font-family:Yellowtail,cursive;font-size:30px;line-height:35px;color:var(--yellow);font-weight:400;margin:0 0 6px}
.h-xl{font-family:Oswald,sans-serif;font-size:55px;line-height:1.15;letter-spacing:2px;text-transform:uppercase;color:var(--dark)}
.h-md{font-family:Oswald,sans-serif;font-size:40px;line-height:55px;letter-spacing:2px;text-transform:uppercase;color:#fff}
.h-sm{font-family:Oswald,sans-serif;font-size:20px;line-height:33px;text-transform:uppercase;color:var(--dark)}

/* Buttons */
.btn{display:inline-block;font-family:Oswald,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;line-height:20px;padding:17px 48px;border:2px solid transparent;border-radius:4px;text-align:center}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#c70036}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:var(--red);color:#fff;border-color:#fff}
.btn-sm{padding:10px 18px}

/* ---------- Header ---------- */
.topbar{height:40px;border-bottom:2px solid var(--line);background:#fff;font-family:Oswald,sans-serif;font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--dark)}
.topbar .inner{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 30px}
.topbar .social{display:flex;align-items:center;gap:12px}
.topbar .social a{color:var(--fb);display:flex}
.topbar .social a:hover{color:var(--dark)}
.topbar .call{display:flex;align-items:center;gap:8px}
.topbar .call svg{color:var(--red)}
.topbar .call:hover{color:var(--red)}
.icon{width:16px;height:16px;fill:currentColor}

.header{position:sticky;top:0;z-index:50;background:#fff;transition:box-shadow .3s}
.header.scrolled{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.header .inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 30px;height:95px;transition:height .3s}
.header.scrolled .inner{height:70px}
.logo img{height:83px;width:auto;transition:height .3s}
.header.scrolled .logo img{height:58px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.nav li{display:flex;align-items:center}
.nav li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red)}
.nav a{display:block;padding:0 17px;font-family:Oswald,sans-serif;font-size:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--dark);line-height:58px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--red)}
.header .cta{justify-self:end}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;justify-self:start}
.burger span{display:block;width:36px;height:2px;background:var(--dark);margin:7px 0;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.mobile-nav{display:none}

/* ---------- Hero (Home) ---------- */
.hero{position:relative;background:var(--sky);width:100%;height:min(calc(100svh - 137px),40vw);min-height:240px;overflow:hidden}
.hero .hero-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(25%,341px)}
.hero .ing{position:absolute;pointer-events:none;animation:float 6s ease-in-out infinite;will-change:transform}
.hero .ing:nth-child(odd){animation-duration:7.5s;animation-delay:-2s}
.hero .ing:nth-child(3n){animation-duration:9s;animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.hero .ing{animation:none}}

/* ---------- Feature grids (3 cols with photo / color) ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr)}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 60px}
.tile p:not(.eyebrow){color:#fff;margin:22px 0 40px}
.tile.green{background:var(--green)}
.tile.red{background:var(--red)}
.photo{background-size:cover;background-position:50% 50%;min-height:100%}
.row-a .tile,.row-a .photo{min-height:556px}
.row-b .tile,.row-b .photo{min-height:606px}
.tile .h-md{font-size:40px}

/* ---------- Best sellers ---------- */
.section{padding:135px 0 110px}
.center{text-align:center}
.section-head{text-align:center;margin-bottom:60px}
.menu-list{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(8,auto);grid-auto-flow:column;column-gap:60px;row-gap:46px}
.menu-item h3{font-family:Oswald,sans-serif;font-size:20px;line-height:33px;text-transform:uppercase;color:var(--dark);padding-bottom:6px;border-bottom:1px solid #e6e6e6;margin-bottom:8px}
.menu-item p{font-size:15px;line-height:24px;margin:0 0 6px}
.stars{color:var(--yellow);letter-spacing:2px;font-size:13px;line-height:1}

/* ---------- Order ahead ---------- */
.order-ahead .photo{min-height:672px}
.order-ahead .phone{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;padding:110px 8% 0}
.order-ahead .phone .h-xl{max-width:85%}
.order-ahead .phone h3{max-width:56%}
.order-ahead .h-xl{color:#fff;text-shadow:0 2px 14px rgba(0,80,110,.25)}
.order-ahead h3{font-family:Oswald,sans-serif;font-size:20px;line-height:33px;text-transform:uppercase;color:#fff;margin-top:10px;text-shadow:0 1px 8px rgba(0,80,110,.3)}
.order-ahead .call-btn{margin-top:26px;font-size:16px;letter-spacing:1px}

/* ---------- Catering ---------- */
.catering{padding:137px 0 117px}
.catering .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:60px}
.catering img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:28px}
.catering .h-sm{margin-bottom:12px}
.catering p{font-size:15px;line-height:24px}

/* ---------- Split promo rows ---------- */
.split .photo{min-height:723px}
.split .promo{display:flex;flex-direction:column;justify-content:center;padding:0 12%;background-size:cover;background-position:50% 50%}
.botanas .promo{align-items:flex-end;text-align:right;padding-right:14%}
.split .promo.center-txt{align-items:center;text-align:center}
.split .h-xl{margin-bottom:40px}
.botanas .eyebrow,.botanas .h-xl{color:var(--red-2)}
.favorite .photo{min-height:772px}
.favorite .eyebrow,.favorite .h-xl{color:#fff}
.favorite .promo .btn{align-self:flex-start}

/* ---------- Testimonials ---------- */
.testimonials{padding:100px 0 110px}
.slider{position:relative;padding:0 80px}
.slides{position:relative}
.slide{display:none}
.slide.active{display:block;animation:fade .6s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.slide blockquote{margin:0}
.slide blockquote p{font-family:Oswald,sans-serif;font-size:40px;line-height:1.3;letter-spacing:1px;text-transform:uppercase;color:var(--dark);margin:0 0 26px}
.slide cite{display:block;font-style:normal;font-family:Oswald,sans-serif;font-size:30px;line-height:1.2;text-transform:uppercase;color:var(--dark)}
.slide .role{display:block;font-family:Oswald,sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--orange);margin-top:6px}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;padding:10px;color:var(--dark)}
.slider-arrow:hover{color:var(--red)}
.slider-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3}
.slider-arrow.prev{left:0}.slider-arrow.next{right:0}

/* ---------- Drink banner ---------- */
.drink{background:var(--blue) url(../img/KANTARITO4.jpg) center/cover no-repeat;width:100%;aspect-ratio:1300/433;display:flex;align-items:center;justify-content:center}
.drink img{width:24%;min-width:150px;height:auto;max-height:none;margin:0}

/* ---------- App banner ---------- */
.app{background:url(../img/BANNER-ONLINE-ORDER2-scaled.jpg) center/cover no-repeat;aspect-ratio:1920/932;display:flex;align-items:center;position:relative}
.app .wrap{width:100%;max-width:none;margin:0;height:100%;display:flex;align-items:center}
.app .content{margin-left:41%;width:27%;text-align:center;padding:40px 0}
.app .badges .btn{font-size:clamp(12px,.8vw,15px)}
.app .eyebrow{color:var(--orange)}
.app .h-xl{margin-bottom:20px;font-size:clamp(30px,3.2vw,52px)}
.app p{font-size:clamp(14px,1.05vw,19px);line-height:1.65}
.app strong{color:var(--red)}
.badges{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px}
.badges img{width:180px;height:55px}

/* ---------- Category carousel ---------- */
.categories{background:var(--sky);padding:30px 0 40px;position:relative}
.cat-track{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 60px}
.cat-track::-webkit-scrollbar{display:none}
.cat-track img{flex:0 0 auto;height:70px;width:auto;scroll-snap-align:start}
.cat-btn{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cat-btn svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3}
.cat-btn.prev{left:12px}.cat-btn.next{right:12px}

/* ---------- Title area (inner pages) ---------- */
.title-area{position:relative;height:580px;background:#e9e9e9 center/cover no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.title-area .eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.45)}
.title-area h1{text-shadow:0 2px 12px rgba(0,0,0,.35);font-family:Oswald,sans-serif;font-size:55px;letter-spacing:2px;text-transform:uppercase;color:#fff;line-height:1.2}

/* ---------- Our story timeline ---------- */
.timeline{position:relative;padding:100px 0 120px}
.timeline::before{content:"";position:absolute;top:100px;bottom:120px;left:50%;width:1px;background:#d9d9d9}
.tl-item{display:grid;grid-template-columns:1fr 1fr;column-gap:120px;align-items:center;position:relative;margin-bottom:90px}
.tl-item:last-child{margin-bottom:0}
.tl-item .year{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--dark);color:#fff;font-family:Oswald,sans-serif;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;z-index:1}
.tl-item h2{font-family:Yellowtail,cursive;font-size:30px;line-height:1.2;color:var(--yellow);font-weight:400;margin-bottom:14px}
.tl-item p{font-size:15px;line-height:26px}
.tl-item img{width:100%;max-width:462px}
.tl-item.img-left .tl-media{order:-1}
.tl-item.img-left .tl-media img{margin-left:auto}

/* ---------- Get in touch ---------- */
.contact{padding:80px 0 110px}
.contact .cols{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact h2{font-family:Oswald,sans-serif;font-size:20px;line-height:33px;text-transform:uppercase;color:var(--dark);margin-bottom:30px}
.contact label{display:block;font-size:13px;color:var(--text);margin:0 0 6px}
.contact input,.contact textarea{width:100%;font:inherit;font-size:15px;color:var(--dark);border:2px solid var(--dark);padding:10px 14px;margin-bottom:22px;background:#fff}
.contact textarea{min-height:150px;resize:vertical}
.contact button{cursor:pointer}
.loc h3{display:flex;align-items:center;gap:8px;font-family:Oswald,sans-serif;font-size:16px;text-transform:uppercase;color:var(--dark);margin-bottom:10px}
.loc h3 svg{color:var(--red)}
.loc p{font-size:14px;line-height:24px}
.loc a:hover{color:var(--red)}
.map{margin-top:30px;aspect-ratio:4/3;width:100%;border:0}

/* ---------- Footer ---------- */
.footer-top{background:var(--footer);padding:80px 0 70px}
.footer-top .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.footer-top h2{font-family:Oswald,sans-serif;font-size:20px;line-height:33px;text-transform:uppercase;color:#fff;margin-bottom:24px}
.footer-top h3{font-family:Oswald,sans-serif;font-size:13px;text-transform:uppercase;color:#fff;margin-bottom:10px}
.footer-top p,.footer-top li{font-size:13px;line-height:27px;color:var(--footer-text)}
.footer-top ul{list-style:none;margin:0;padding:0}
.footer-top a:hover{color:#fff}
.footer-top hr{border:0;border-top:1px solid #fff;margin:16px 0}
.footer-top strong{color:#fff}
.footer-map{width:100%;aspect-ratio:4/3;border:0}
.footer-bottom{background:var(--footer-bottom);padding:22px 0;font-family:Oswald,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--footer-text)}
.footer-bottom .cols{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.footer-bottom .social{display:flex;gap:16px;justify-content:center}
.footer-bottom .social a{color:var(--fb)}
.footer-bottom .social a:hover{color:#fff}
.footer-bottom .copy{text-align:right}
.footer-bottom a:hover{color:#fff}

/* Back to top */
.to-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border:0;border-radius:4px;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:40}
.to-top.show{opacity:1;visibility:visible}
.to-top svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .topbar{display:none}
  .header .inner{grid-template-columns:auto 1fr auto;height:100px;padding:0 20px}
  .header.scrolled .inner{height:80px}
  .burger{display:block}
  .logo{justify-self:center}
  .logo img{height:66px}
  .header.scrolled .logo img{height:54px}
  .nav,.header .cta{display:none}
  .mobile-nav{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.08);max-height:0;overflow:hidden;transition:max-height .35s}
  .mobile-nav.open{max-height:480px}
  .mobile-nav ul{list-style:none;margin:0;padding:10px 20px 20px}
  .mobile-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-family:Oswald,sans-serif;font-size:15px;text-transform:uppercase;color:var(--dark)}
  .mobile-nav a[aria-current="page"]{color:var(--red)}
  .mobile-nav .btn{margin-top:16px;border:0;color:#fff;text-align:center;padding:14px}
  .mobile-nav .call{color:var(--red)}
  .h-xl{font-size:42px}
  .menu-list{column-gap:40px}
  .footer-top .cols{grid-template-columns:repeat(2,1fr);row-gap:50px}
}
@media (max-width:768px){
  .hero .hero-logo{width:33%}
  .hero .ing[src*="h1-corn"]{left:68%!important;top:66%!important}
  .hero{height:62vw}
  .grid3,.grid2{grid-template-columns:1fr}
  .row-a .photo,.row-b .photo{min-height:390px}
  .row-a .tile,.row-b .tile{min-height:0;padding:70px 30px}
  .tile p{margin:20px 0 34px}
  .h-xl{font-size:34px;letter-spacing:1px}
  .section{padding:80px 0 70px}
  .section-head{margin-bottom:40px}
  .menu-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;row-gap:30px}
  .order-ahead .photo{min-height:420px}
  .order-ahead .phone{padding:46px 24px 0;background-position:72% center;min-height:460px}
  .order-ahead .phone .h-xl,.order-ahead .phone h3{max-width:68%}
  .order-ahead h3{font-size:17px;line-height:26px}
  .order-ahead .phone{padding:0 20px 50px}
  .catering{padding:80px 0 70px}
  .catering .cols{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .split .photo{min-height:360px}
  .split .promo{padding:70px 24px;align-items:center;text-align:center;min-height:460px}
  .botanas .promo{background-position:85% center;padding-right:24px}
  .favorite .promo .btn{align-self:center}
  .split .h-xl{margin-bottom:30px}
  .testimonials{padding:70px 0}
  .slider{padding:0 36px}
  .slide blockquote p{font-size:24px}
  .slide cite{font-size:20px}
  .drink{aspect-ratio:auto;height:210px}
  .cat-track{padding:0 48px;gap:20px}
  .cat-track img{height:52px}
  .title-area{height:340px;background-position:72% center}
  .title-area .eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.45)}
.title-area h1{text-shadow:0 2px 12px rgba(0,0,0,.35);font-size:40px}
  .timeline{padding:60px 0 70px}
  .timeline::before{left:23px;top:60px;bottom:70px}
  .tl-item{grid-template-columns:1fr;row-gap:24px;padding-left:64px;margin-bottom:60px}
  .tl-item .year{left:0;top:0;transform:none}
  .tl-item .tl-media{order:-1}
  .tl-item.img-left .tl-media img{margin-left:0}
  .contact{padding:60px 0 70px}
  .contact .cols{grid-template-columns:1fr;gap:50px}
  .footer-top{padding:60px 0 50px}
  .footer-top .cols{grid-template-columns:1fr}
  .footer-bottom .cols{grid-template-columns:1fr;text-align:center}
  .footer-bottom .copy{text-align:center}
}

/* Torn paper edges (theme "lighter effect") */
.torn{position:relative}
.torn::before,.torn::after{content:"";position:absolute;left:0;right:0;height:27px;background:url(../img/tear-white.svg) 0 0/100% 100% no-repeat;pointer-events:none;z-index:2}
.torn::before{top:-26px}
.torn::after{bottom:-26px;transform:scale(-1,-1)}
.torn-sky::before,.torn-sky::after{background-image:url(../img/tear-sky.svg)}
/* Drink banner: torn bottom edge cut out of the photo; the next section shows through */
.drink{position:relative;z-index:3;-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 26px) no-repeat,url(../img/tear-mask.svg) bottom/100% 27px no-repeat;mask:linear-gradient(#000,#000) top/100% calc(100% - 26px) no-repeat,url(../img/tear-mask.svg) bottom/100% 27px no-repeat}
.drink + .app{margin-top:-26px}
@media (max-width:1180px){
  .app{aspect-ratio:auto;flex-direction:column;align-items:stretch;background:#eeecef}
  .app::before{content:"";display:block;width:100%;aspect-ratio:1920/932;background:url(../img/BANNER-ONLINE-ORDER2-scaled.jpg) center/cover no-repeat}
  .app .wrap{height:auto;padding:0 24px}
  .app .content{margin:0 auto;width:min(560px,100%);padding:28px 0 60px}
  .app .h-xl{font-size:clamp(30px,5vw,42px)}
}