/* ============================================================
   Mariscos & Mexican Grill Mazatlan — site stylesheet
   Built 2026-08-29 by Atlas.

   SEPARATE BRAND. Nothing here comes from Manpower LandWorks.

   Palette RE-SAMPLED 2026-08-29 from the actual photograph of the
   truck (assets/img/hero.jpg), after an audit caught the first pass
   using a generic corporate navy and a cream that was nearly a twin
   of the Manpower LandWorks paper. The wrap is genuinely brighter
   and warmer than that: mid ocean blue, hot turquoise, warm sand.
   Measured off the wrap: #116C9E ocean, #25E7F2 turquoise,
   #ECD2B6 sand, plus the red of the painted phone number.

   PHOTO SLOTS: every photo is a CSS multiple background,
   gradient layered over url(...). A missing file renders the
   gradient alone. No broken image icons, ever. Drop the file at
   the named path and it appears with zero HTML edits.
   Every slot is labelled "PHOTO SLOT:" in a comment below.
   ============================================================ */

:root{
  /* --- the sea, off the wrap --- */
  --sea:#0D5A85;          /* the truck's ocean blue, one step down so white text clears AA */
  --sea-deep:#08405F;     /* floors */
  --wave:#25E7F2;         /* the hot turquoise on the wrap. DARK BACKGROUNDS ONLY */
  --wave-text:#0A6280;    /* same family, dark enough to read on sand */

  /* --- the shore --- */
  --sand:#FBF3E7;         /* page paper, warmer than the first pass */
  --sand-2:#ECD2B6;       /* the wrap's actual sand. banded sections */
  --line:#DCC3A4;         /* hairlines */

  /* --- the heat --- */
  --chile:#C62828;        /* the painted phone number red. white on it clears AA */
  --chile-dk:#9E1F1F;     /* hover */
  --shrimp:#F0662A;       /* the mascot's orange, straight off the badge */
  --lime:#8CC63F;         /* a squeeze of lime. tiny accent only */

  /* --- ink --- */
  --ink:#1A1613;
  --muted:#5C554D;
  --white:#FFFFFF;

  --radius:12px;
  --shadow:0 12px 34px rgba(7,40,57,.13);
  --shadow-lg:0 22px 60px rgba(7,40,57,.22);
  --wrap:1120px;

  /* mobile action bar height, so content can clear it */
  --bar-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--sand);
  color:var(--ink);
  font-size:17.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--chile);outline-offset:3px;border-radius:3px}

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

/* Chango is by Sudtipos, an Argentine foundry, and it is drawn from Latin
   American street and chalkboard signage. It replaced Anton, which is the
   single most common display face in generated layouts and has no regional
   character at all. The old stack also listed 'Barlow Condensed' as a
   fallback and never loaded it, so that fallback was dead. */
.display{
  font-family:'Chango','Archivo',Impact,sans-serif;
  font-weight:400;
  line-height:1.02;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.eyebrow{
  font-family:'Archivo',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--wave-text);
  margin-bottom:12px;
}
.on-dark .eyebrow{color:var(--shrimp)}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--chile);color:#fff;
  padding:12px 20px;font-weight:700;z-index:300;text-decoration:none;
}
.skip-link:focus{left:0}

/* ============ language switch + header ============ */

header{
  background:var(--sea);
  position:sticky;top:0;z-index:100;
  border-bottom:4px solid var(--chile);
}
.nav{
  max-width:var(--wrap);margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:18px;
}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;flex-shrink:0}
.brand .b1{
  font-family:'Chango',sans-serif;text-transform:uppercase;color:#fff;
  font-size:21px;letter-spacing:.6px;
}
.brand .b1 span{color:var(--shrimp)}
.brand .b2{
  font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:#9EC9DF;font-weight:600;margin-top:4px;
}
nav.main{display:flex;gap:20px;margin-left:auto;align-items:center}
nav.main a{
  color:#EAF4F9;text-decoration:none;font-weight:600;font-size:15.5px;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
nav.main a:hover{color:var(--shrimp);border-bottom-color:var(--shrimp)}
.lang-btn{
  background:var(--shrimp);color:#2A1206;text-decoration:none;font-weight:700;
  padding:9px 15px;border-radius:7px;font-size:14px;letter-spacing:.4px;white-space:nowrap;
}
.lang-btn:hover{filter:brightness(1.07)}
.nav-call{
  background:var(--chile);color:#fff;text-decoration:none;font-weight:700;
  padding:10px 18px;border-radius:7px;font-size:15px;white-space:nowrap;
}
.nav-call:hover{background:var(--chile-dk)}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{
  display:block;width:26px;height:3px;background:#fff;position:relative;content:"";border-radius:2px;
}
.nav-toggle .bars::before{position:absolute;top:-8px}
.nav-toggle .bars::after{position:absolute;top:8px}
.mobile-menu{
  display:none;background:var(--sea-deep);flex-direction:column;
  padding:8px 22px 18px;border-top:1px solid #14496A;
}
.mobile-menu a{
  color:#fff;text-decoration:none;font-weight:600;padding:13px 0;
  border-bottom:1px solid #14496A;
}
.mobile-menu a.hi{
  background:var(--shrimp);color:#2A1206;text-align:center;border-radius:8px;
  margin-top:12px;border-bottom:0;padding:13px;font-weight:700;
}
.mobile-menu.open{display:flex}

/* ============ HERO ============ */

.hero{
  position:relative;
  min-height:600px;
  display:flex;align-items:flex-end;
  color:#fff;
  background-color:var(--sea);
  /* PHOTO SLOT: /assets/img/hero.jpg
     Best shot: the truck at the spot, shot low and close at golden hour,
     OR a hero plate of aguachile. Landscape, at least 2000px wide.
     Until it lands, the layered gradient below carries the section on its own. */
  /* ONE scrim, not five. The old stack put roughly 95% opaque navy over
     the left half, which is exactly where the truck is, so the only real
     photograph on the site was invisible. Text stays legible on the dark
     left edge and the truck stays visible on the right. */
  background-image:
    linear-gradient(97deg, rgba(8,64,95,.86) 0%, rgba(8,64,95,.52) 40%, rgba(8,64,95,.06) 88%),
    url('/assets/img/hero.jpg?v=2');
  background-size:cover;
  /* biased right: dead centre crops onto a tree, not the truck */
  background-position:64% center;
}
.hero > .wrap{position:relative;z-index:2;width:100%;padding-top:92px;padding-bottom:64px}

.hero .kicker{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(3px);
  padding:7px 15px;border-radius:100px;
  font-size:13.5px;font-weight:600;letter-spacing:.6px;
  margin-bottom:20px;
}
.hero .kicker .star{color:#FFC93C;font-size:15px;letter-spacing:1px}

.hero h1{
  font-size:clamp(33px,10.4vw,96px); /* 44px floor clipped MARISCOS on narrow phones */
  color:#fff;max-width:14ch;
  text-shadow:0 3px 26px rgba(7,40,57,.55);
}
.hero h1 .accent{color:var(--shrimp)}
.hero .lede{
  font-size:clamp(17.5px,2.2vw,23px);
  max-width:36ch;margin-top:20px;color:#F2FAFD;font-weight:500;
  text-shadow:0 1px 14px rgba(7,40,57,.7);
}
.hero-actions{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;font-weight:700;font-size:16.5px;
  padding:16px 28px;border-radius:9px;border:2px solid transparent;
  transition:transform .12s ease, background .15s ease, filter .15s ease;
  white-space:nowrap; /* a call-to-action that wraps mid-phrase reads as broken */
}
.btn:active{transform:translateY(1px)}
.btn-call{background:var(--chile);color:#fff}
.btn-call:hover{background:var(--chile-dk)}
.btn-map{background:#fff;color:var(--sea)}
.btn-map:hover{filter:brightness(.95)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{border-color:var(--shrimp);color:var(--shrimp)}
.btn-sea{background:var(--sea);color:#fff}
.btn-sea:hover{background:var(--sea-deep)}
.btn-wide{width:100%}

/* The wave that separates hero from the page.
   It has to OVERLAP the hero, not sit below it. The SVG's upper half is
   transparent, so parked below the hero it was sand showing through onto
   sand and the wave was invisible. Pulling it up by its own height puts the
   hero behind that transparent half, which is what makes the shape read.
   preserveAspectRatio="none" lets it stretch to whatever height we set. */
.wave-sep{
  display:block;width:100%;
  height:clamp(30px,4vw,58px);
  margin-top:calc(-1 * clamp(30px,4vw,58px));
  position:relative;z-index:3;
  color:var(--sand);
}

/* ============ FIND US — the most important block on the page ============ */

.findus{padding:56px 0 60px;background:var(--sand)}
.findus-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid var(--line);overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;
}
.findus-body{padding:38px 36px}
.findus h2{font-size:clamp(30px,4vw,44px);color:var(--sea);margin-bottom:6px}

.status{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:15px;letter-spacing:.4px;
  padding:8px 15px;border-radius:100px;margin-bottom:18px;
}
.status .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.status.open{background:#E8F6E4;color:#2C6B1F}
.status.open .dot{background:#3E9B27;box-shadow:0 0 0 4px rgba(62,155,39,.20)}
.status.shut{background:#FBEAEA;color:#95252A}
.status.shut .dot{background:var(--chile)}
.status.unknown{background:var(--sand-2);color:var(--muted)}
.status.unknown .dot{background:var(--muted)}

.addr{font-size:20px;font-weight:600;color:var(--ink);line-height:1.42}
.landmark{
  display:flex;gap:11px;align-items:center;
  margin-top:14px;padding:14px 18px;
  background:var(--sand-2);border-left:4px solid var(--shrimp);border-radius:0 8px 8px 0;
  /* Yellowtail is 1940s brush sign painting. One handwritten line, here and
     nowhere else, so the page has a human mark on it instead of reading as
     five identical typeset blocks. */
  font-family:'Yellowtail',cursive;
  font-size:22px;line-height:1.35;color:#7A3A10;
}
.landmark svg{flex-shrink:0;margin-top:2px}

.hours{width:100%;border-collapse:collapse;margin-top:24px;font-size:16.5px}
.hours th{
  text-align:left;font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding-bottom:9px;border-bottom:2px solid var(--line);
}
.hours td{padding:11px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.hours tr.today td{color:var(--chile);font-weight:700}
.hours tr.today td:first-child::after{
  content:"TODAY";font-size:10px;letter-spacing:1.4px;background:var(--chile);color:#fff;
  padding:2px 7px;border-radius:4px;margin-left:9px;vertical-align:middle;font-weight:700;
}
.hours .tbd{color:var(--muted);font-style:italic;font-weight:500}

.findus-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

.findus-map{
  position:relative;min-height:420px;background:var(--sand-2);
  border-left:1px solid var(--line);
}
.findus-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============ generic section furniture ============ */

.band{padding:72px 0}
.band-sand{background:var(--sand-2)}
.band-sea{
  background:var(--sea);color:#fff;
  background-image:
    radial-gradient(80% 60% at 15% 0%, rgba(46,156,202,.30) 0%, rgba(46,156,202,0) 60%),
    radial-gradient(70% 60% at 88% 100%, rgba(193,39,45,.26) 0%, rgba(193,39,45,0) 62%);
}
.band-sea h2,.band-sea h3{color:#fff}
.sec-head{max-width:640px;margin-bottom:40px}
.sec-head h2{font-size:clamp(32px,4.6vw,52px);color:var(--sea);line-height:1.04}
.band-sea .sec-head h2{color:#fff}
.sec-head p{margin-top:14px;font-size:18px;color:var(--muted)}
.band-sea .sec-head p{color:#C9E3EF}

/* ============ THE STARS ============ */

.stars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.star-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;
}
.star-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.star-name{
  font-family:'Chango',sans-serif;text-transform:uppercase;letter-spacing:.4px;
  font-size:25px;color:var(--sea);line-height:1.05;margin-bottom:10px;
}
.star-card .rule{width:46px;height:5px;background:var(--chile);border-radius:3px;margin-bottom:14px}
.star-body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.star-body p{color:var(--muted);font-size:16px;flex:1}
.star-quote{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;font-style:italic;color:var(--wave-text);
}
.star-quote cite{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:5px;letter-spacing:.4px}

/* ============ FULL MENU ============ */

.menu-note{
  background:var(--sand-2);border:1px dashed var(--line);border-radius:10px;
  padding:16px 20px;margin-bottom:34px;font-size:16px;color:var(--muted);
}
.menu-cols{columns:2;column-gap:52px}
.menu-group{break-inside:avoid;margin-bottom:34px}
.menu-group h3{
  font-family:'Chango',sans-serif;text-transform:uppercase;font-size:22px;
  color:var(--chile);letter-spacing:.6px;
  padding-bottom:9px;margin-bottom:6px;border-bottom:3px solid var(--chile);
}
.menu-item{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.menu-item .nm{font-weight:600;font-size:17px}
.menu-item .nm .es{font-weight:400;font-size:14.5px;color:var(--muted)}
.menu-item .dots{flex:1;border-bottom:1.5px dotted var(--line);transform:translateY(-4px)}
.menu-item .pr{
  font-weight:700;color:var(--sea);font-variant-numeric:tabular-nums;
  white-space:nowrap;font-size:16.5px;
}
.menu-item .pr.tbd{color:var(--muted);font-weight:500;opacity:.65}
.menu-item .flag{
  font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;
  background:var(--shrimp);color:#2A1206;padding:2px 7px;border-radius:4px;
}
.menu-item .desc{
  flex-basis:100%;font-size:14.5px;line-height:1.45;color:var(--muted);
  font-weight:400;margin:2px 0 0;
}
.menu-group .gnote{
  font-size:14.5px;color:var(--muted);font-style:italic;margin:10px 0 4px;
}

/* ============ REVIEWS ============ */

.rating-hero{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.rating-num{font-family:'Chango',sans-serif;font-size:76px;color:var(--shrimp);line-height:.9}
.rating-meta .stars{color:#FFC93C;font-size:24px;letter-spacing:3px}
.rating-meta p{color:#C9E3EF;margin-top:5px;font-size:16px}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:26px 24px;
}
.quote .q{color:#FFC93C;font-size:19px;letter-spacing:2px;margin-bottom:12px}
.quote p{font-size:17px;line-height:1.55;color:#F0F8FB}
.quote cite{
  display:block;margin-top:15px;font-style:normal;font-size:13.5px;
  color:#9EC9DF;letter-spacing:.5px;
}

/* ============ ABOUT ============ */

.about-grid{max-width:660px}
.about-body h2{font-size:clamp(30px,4.2vw,46px);color:var(--sea);margin-bottom:18px}
.about-body p{font-size:18px;margin-bottom:16px;color:var(--ink)}
.about-body p.tbd{
  color:var(--muted);font-style:italic;
  background:var(--sand-2);border-left:4px solid var(--line);padding:14px 18px;border-radius:0 8px 8px 0;
}

/* ============ CATERING strip ============ */

.strip{
  background:var(--chile);color:#fff;padding:46px 0;
  background-image:radial-gradient(70% 100% at 90% 50%, rgba(255,122,69,.42) 0%, rgba(255,122,69,0) 60%);
}
.strip-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.strip h2{font-size:clamp(26px,3.4vw,38px);color:#fff}
.strip p{margin-top:8px;font-size:17.5px;color:#FFE2E3;max-width:52ch}
.strip .btn-map{background:#fff;color:var(--chile)}

/* ============ FOOTER ============ */

footer{background:var(--sea-deep);color:#C9E3EF;padding:56px 0 30px;font-size:16px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:38px}
footer h4{
  color:#fff;font-family:'Chango',sans-serif;text-transform:uppercase;
  font-size:16px;letter-spacing:1.4px;margin-bottom:15px;
}
footer a{color:#C9E3EF;text-decoration:none}
footer a:hover{color:var(--shrimp);text-decoration:underline}
footer ul{list-style:none}
footer li{margin-bottom:9px}
.foot-brand .b1{
  font-family:'Chango',sans-serif;text-transform:uppercase;color:#fff;
  font-size:23px;line-height:1.1;
}
.foot-brand .b1 span{color:var(--shrimp)}
.foot-brand p{margin-top:12px;max-width:34ch;font-size:15.5px}
.foot-bottom{
  border-top:1px solid #12455F;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14px;color:#7FA9C0;
}

/* ============ MOBILE STICKY ACTION BAR ============
   The single highest-converting element on a food truck site.
   Thumb-reachable, always there, two jobs only: call and directions. */
.actionbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--sea-deep);
  border-top:1px solid #14496A;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:10px;
  box-shadow:0 -8px 26px rgba(7,40,57,.30);
}
.actionbar a{
  flex:1;min-width:0; /* lets the button actually shrink instead of clipping */
  display:flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;font-weight:700;
  font-size:clamp(14px,4.4vw,16.5px);white-space:nowrap;
  padding:14px 6px;border-radius:9px;
}
.actionbar svg{flex-shrink:0}
.actionbar .ab-call{background:var(--chile);color:#fff}
.actionbar .ab-map{background:var(--shrimp);color:#2A1206}

/* ============ RESPONSIVE ============ */

@media (max-width:980px){
  .findus-card{grid-template-columns:1fr}
  .findus-map{min-height:320px;border-left:0;border-top:1px solid var(--line)}
    .stars-grid{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* was 820px. The badge added ~67px to the header, so the full desktop nav
   started overflowing (and dragging a page-level horizontal scroll with it)
   anywhere under about 940px. Collapse to the hamburger earlier. */
@media (max-width:940px){
  nav.main{display:none}
  .nav-call{display:none}
  .nav-toggle{display:block}
  .nav .lang-btn{margin-left:auto}
  .nav-toggle{margin-left:0}
}

@media (max-width:700px){
  body{font-size:17px;padding-bottom:var(--bar-h)}
  .actionbar{display:flex}
  .hero{min-height:520px}
  .hero > .wrap{padding-top:60px;padding-bottom:48px}
  .hero .lede{max-width:none}
  .hero-actions .btn{flex:1 1 auto;min-width:0;padding-left:18px;padding-right:18px}
  .band{padding:52px 0}
  .findus{padding:40px 0 44px}
  .findus-body{padding:28px 22px}
  .stars-grid{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .menu-cols{columns:1}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .strip-in{flex-direction:column;align-items:flex-start}
  .rating-num{font-size:60px}
}

@media (max-width:400px){
  .brand .b1{font-size:17px}
  .brand .b2{display:none} /* tagline goes before the name does */
  .brand-badge{width:44px;height:37px}
}
@media (max-width:350px){
  .brand-badge{display:none} /* a 320px screen cannot hold badge + name + buttons */
}

@media print{
  header,.actionbar,.findus-map,.strip{display:none}
  body{background:#fff;padding-bottom:0}
  .hero{min-height:auto;color:#000;background:none}
  .hero h1,.hero .lede{color:#000;text-shadow:none}
}

/* ============================================================
   FRACTIONAL STARS  (added 2026-08-29, Justin's call)
   A 4.7 rating has to LOOK like 4.7: four full stars and seven
   tenths of the fifth. Five solid stars next to the number "4.7"
   is just wrong, and four solid stars undersells her.

   One row of five glyphs, with a hard-stopped gradient painted
   through the text. --pct is the share of the row that is filled.
     5.0 -> 100%   4.7 -> 94%   4.5 -> 90%   4.0 -> 80%
   Falls back to solid gold where background-clip:text is missing,
   which is better than transparent text on a coloured band.
   ============================================================ */
.stars{
  display:inline-block;
  letter-spacing:2px;
  white-space:nowrap;
  color:#FFC93C;
  font-size:inherit;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stars{
    background-image:linear-gradient(90deg,
      #FFC93C var(--pct,100%),
      var(--star-empty,rgba(255,255,255,.32)) var(--pct,100%));
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
  }
}
/* on cream, the unfilled part needs to be a warm grey, not white */
.stars.on-light{--star-empty:#D9CDB4}

/* ============================================================
   REVIEWS RAIL
   Deliberately NOT a 3-up grid of equal cards. Real testimonial
   walls are uneven: different lengths, different widths, a bit of
   tilt. Uniformity is most of what makes a section look generated.
   Horizontal scroll-snap rail, drag or arrow keys, optional
   auto-advance that stops the moment anyone touches it.
   ============================================================ */
.rev-top{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:30px}
.rev-score{display:flex;align-items:center;gap:18px}
.rev-num{font-family:'Chango',sans-serif;font-size:66px;color:var(--shrimp);line-height:.86}
.rev-meta .stars{font-size:23px}
.rev-meta p{color:#C9E3EF;margin-top:6px;font-size:15.5px}
.rev-controls{display:flex;gap:9px;margin-left:auto}
.rev-btn{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.26);
  color:#fff;display:grid;place-items:center;
}
.rev-btn:hover{background:rgba(255,255,255,.18);border-color:var(--shrimp)}
.rev-btn svg{width:19px;height:19px}

.rev-rail{
  display:flex;gap:20px;
  overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;
  padding:14px 2px 26px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.34) transparent;
  -webkit-overflow-scrolling:touch;
}
.rev-rail::-webkit-scrollbar{height:7px}
.rev-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.30);border-radius:99px}
.rev-rail::-webkit-scrollbar-track{background:transparent}

.rev-card{
  flex:0 0 auto;
  width:min(84vw,370px);
  scroll-snap-align:start;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.17);
  border-radius:var(--radius);
  padding:26px 24px 22px;
  position:relative;
}
/* uneven on purpose: a second card runs wider, and each sits at a
   slightly different angle. Nothing here is exactly aligned. */
.rev-card:nth-child(2){width:min(86vw,420px)}
.rev-card:nth-child(1){transform:rotate(-.5deg)}
.rev-card:nth-child(2){transform:rotate(.4deg)}
.rev-card:nth-child(3){transform:rotate(-.25deg)}
.rev-card:nth-child(4){transform:rotate(.55deg)}
@media (prefers-reduced-motion: reduce){.rev-card{transform:none}}

.rev-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rev-av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  font-weight:700;font-size:15px;color:#0B2233;
  background:var(--shrimp);
}
.rev-card:nth-child(2n) .rev-av{background:#7FC4E0}
.rev-card:nth-child(3n) .rev-av{background:var(--lime)}
.rev-name{font-weight:700;color:#fff;font-size:16.5px;line-height:1.2}
.rev-when{color:#9EC9DF;font-size:13px;margin-top:3px}
.rev-card blockquote{color:#F0F8FB;font-size:16.5px;line-height:1.55}
.rev-foot{
  margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.13);
  font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase;color:#8FB9CE;
}
.rev-note{margin-top:6px;font-size:15px;color:#9EC9DF}
.rev-note a{color:var(--shrimp)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

@media (max-width:700px){
  .findus-actions{justify-content:center}
  .findus-actions .btn{flex:1 1 auto}
  .foot-bottom{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .rev-num{font-size:52px}
  .rev-controls{margin-left:0;width:100%}
  .rev-card{padding:22px 20px 18px}
}

/* ============ LEGAL PAGES ============ */
.legal{max-width:720px;margin:0 auto;padding:54px 22px 76px}
.legal h1{font-family:'Chango',sans-serif;text-transform:uppercase;font-size:clamp(30px,5vw,46px);
  color:var(--sea);line-height:1.04;margin-bottom:10px}
.legal .updated{color:var(--muted);font-size:15px;margin-bottom:32px}
.legal h2{font-family:'Chango',sans-serif;text-transform:uppercase;font-size:20px;letter-spacing:.5px;
  color:var(--chile);margin:34px 0 10px}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px 20px}
.legal li{margin-bottom:8px}
.legal a{color:var(--wave-text);font-weight:600}
.legal .back{display:inline-block;margin-top:34px;font-weight:700;color:var(--wave-text);text-decoration:none}
.legal .back:hover{text-decoration:underline}

/* ============================================================
   WEB INTERFACE GUIDELINES PASS  (2026-08-29)
   Checked against vercel-labs/web-interface-guidelines.
   Each rule below names the guideline it answers.
   ============================================================ */

/* Anchor links were scrolling section titles UNDER the sticky header:
   tap "Menu" and the word Menu is hidden. Header is ~66px tall. */
section[id]{scroll-margin-top:84px}

/* "Apply touch-action: manipulation to prevent double-tap zoom":
   kills the tap delay on Call / Directions, the two buttons that earn money. */
a,button{touch-action:manipulation}
a,button{-webkit-tap-highlight-color:rgba(198,40,40,.18)}

/* "Avoid widows/orphans via text-wrap: balance" on the big display lines */
h1.display,h2.display{text-wrap:balance}

/* Footer links were a thin line of text, well under the 44px mobile
   hit-target floor. Padding widens the target without moving the layout. */
footer a{display:inline-block;padding:6px 0}

/* Light site, and the browser should know it (form controls, scrollbars) */
:root{color-scheme:light}

/* Sulma's note: her words in a plain box, her name as a signature.
   The one handwritten mark rule: Yellowtail here and the landmark line only. */
.owner-note{
  margin-top:18px;padding:20px 22px;
  background:var(--sand-2);border-left:4px solid var(--shrimp);
  border-radius:0 10px 10px 0;
}
.owner-note p{font-size:17.5px;line-height:1.6;margin:0}
.owner-note .sig{
  font-family:'Yellowtail',cursive;font-size:31px;line-height:1;
  color:#7A3A10;margin-top:12px;
}

/* ============================================================
   THE REAL BADGE  (2026-08-29)
   The wrap logo, rebuilt as vector art and exported for web.
   Masters: "Logo (rebuilt from truck photo)/" in the project
   folder. .ai/.eps go to print shops; the site uses these two.
   ============================================================ */
.brand{flex-direction:row;align-items:center;gap:11px}
.brand-badge{width:56px;height:47px;flex-shrink:0;
  filter:drop-shadow(0 2px 5px rgba(7,40,57,.35))}
.brand > div,.brand-text{display:flex;flex-direction:column}

/* About: the badge fills the column the placeholder art used to fake */
.about-grid{max-width:none;display:grid;grid-template-columns:400px 1fr;
  gap:52px;align-items:center}
.about-badge{width:100%;max-width:400px;height:auto;
  filter:drop-shadow(0 14px 30px rgba(7,40,57,.22))}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:30px;max-width:560px}
  .about-badge{max-width:300px;margin:0 auto}
}
@media (max-width:400px){
  .brand-badge{width:44px;height:37px}
}

/* ============================================================
   THE RULE UNDER EACH SECTION HEADING  (GSAP motion pass, 2026-08-29)
   Her version of the LandWorks ridge rule, in chile red. motion.js
   draws it left to right by tweening --rule from 0 to 1. It defaults
   to 1, so with JS off or reduced motion on it simply sits there
   finished, which is the correct no-JS state.
   ============================================================ */
.sec-head h2{position:relative;padding-bottom:20px}
.sec-head h2::after{
  content:"";position:absolute;left:0;bottom:0;
  height:5px;width:clamp(54px,16%,104px);
  background:var(--chile);border-radius:3px;
  transform:scaleX(var(--rule,1));transform-origin:left center;
}
.band-sea .sec-head h2::after{background:var(--shrimp)}

/* ============================================================
   PHONE HEADER OVERFLOW  (2026-08-30)

   Reported live from an iPhone: the whole page rendered inside a
   narrow column with a cream strip down the right, and the tagline
   was showing when it should have been hidden.

   Cause: .brand carried flex-shrink:0, so "MARISCOS MAZATLÁN" held
   one 272px line and refused to wrap. Measured at a 375px viewport,
   the header needed 519px. That horizontal overflow is what Safari
   was zooming out to fit, and zooming out meant the max-width:400px
   rules never fired, which is why the tagline came back and made it
   worse.

   Fix: let the brand shrink so the name wraps to two lines, and buy
   it the room by tightening the padding, the gaps and the buttons.
   The badge itself still never shrinks.
   ============================================================ */
@media (max-width:560px){
  .nav{padding:10px 14px;gap:9px}
  .brand{flex-shrink:1;min-width:0;gap:9px}
  .brand .b1{font-size:16px;letter-spacing:.3px;line-height:1.08}
  .brand-badge{width:40px;height:34px}
  .nav .lang-btn{padding:8px 11px;font-size:13px}
  .nav-toggle{padding:8px}
}