/* ==========================================================================
   Xtreme Acai concept preview, shared stylesheet
   Palette: family 16 Neon Berry, sampled from their own poster art
   Type:    Syne (display) + Public Sans (body)

   Type scale reworked 2026-09-01 on Costa's note that subheads read small and
   thick. Every label and subhead got larger and lighter, tracking came down,
   and the uppercase eyebrow became sentence case. The hero stamp and the H1
   are deliberately untouched.
   ========================================================================== */

:root{
  --ground:#12071C;
  --surface:#1E0D2E;
  --raised:#2A1240;
  --violet:#7B2FD6;
  --magenta:#E6208F;
  /* Brand pink, sampled from the hero highlight block. Replaces the lime
     accent entirely, Costa 2026-09-02. Two tokens on purpose: --accent is
     the fill colour, --accent-ink is a fraction lighter so small text still
     clears AA on the dark grounds. #E6208F reads 4.31 on --surface, just
     under the 4.5 threshold; #EE4AA3 reads 5.33. Same colour to the eye. */
  --accent:#E6208F;
  --accent-ink:#EE4AA3;
  --bone:#F6F1FA;
  --muted:#B9A6CC;
  --hairline:#3A2450;

  --berry:linear-gradient(135deg,var(--violet) 0%,var(--magenta) 100%);

  --shadow-1:0 1px 2px rgba(6,2,12,.55), 0 4px 14px rgba(123,47,214,.16);
  --shadow-2:0 2px 6px rgba(6,2,12,.6), 0 18px 44px rgba(123,47,214,.22);

  --gut:20px;
  --max:1180px;
  --rhythm:84px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ground);
  color:var(--bone);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  font-size:16.5px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

/* Narrower gutters on small phones, which buys the headline 8px of measure
   exactly where it is tightest. */
@media(max-width:420px){:root{--gut:16px}}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--rhythm) 0;position:relative}
.sec-tight{padding:calc(var(--rhythm) * .62) 0}

/* --------------------------------------------------------------------------
   TYPE SCALE
   -------------------------------------------------------------------------- */

/* Syne is a display face and nothing more. Its lowercase is eccentric enough
   that it fights the reader anywhere below headline size, which is what was
   still wrong after the first type pass. It now appears in exactly three
   places: the H1, the H2s and the hero stamp. Everything else, subheads and
   pull quotes included, is Public Sans. */
/* SYNE IS NOW H1 AND THE HERO STAMP ONLY.
   Costa reported "cropped lettering" repeatedly and I kept reading it as a
   descender-clipping bug. It was not. Syne's terminals are sheared flat by
   design: the W, e, r, t and x all end in a hard diagonal cut. At H1 size in
   uppercase that reads as a deliberate display treatment, which is why he said
   the headline was fine. At H2 size in mixed case it reads as letters with
   their ends chopped off. Rendered both faces side by side at 64px to confirm
   before changing anything. */
h1{margin:0;font-family:'Chivo',system-ui,sans-serif}
h2,h3,h4{margin:0;font-family:'Public Sans',system-ui,sans-serif}

/* The headline wording and the staircase are locked. The SIZE was wrong and was
   measured, not eyeballed: "The brighter" is the longest of the four lines and
   needs about 12.7 times the font size in width. The old clamp(38,8.4vw,88)
   asked for 1119px inside a 1140px box at desktop, 961px inside 860px at
   900px wide, and 483px inside 335px on a 375px phone. Since .hero is
   overflow:hidden, the surplus was being silently cut off at the right edge.
   clamp(22,7vw,86) keeps the longest line inside the gutters from 320px up. */
/* LINE HEIGHT IS A HARD FLOOR, NOT A TASTE CHOICE.
   Measured from the browser: Syne 800 reports fontBoundingBox ascent+descent of
   1.15em, Syne 700 is 1.20em, Public Sans is 1.15em at every weight. Any
   line-height below those numbers makes the glyphs overflow their own line box,
   and the first ancestor with a clip eats the descenders. That is exactly what
   was cutting the g in "Where to go next".
   H1 is the one exception: text-transform:uppercase means there is no descender
   ink at all, so 1.06 is safe here and nowhere else. Verified by rendering with
   the element box outlined, not by eye. */
h1{
  font-weight:900;
  line-height:1.06;
  font-size:clamp(34px,10.9vw,128px);
  letter-spacing:-.01em;
  text-transform:uppercase;
}

/* Capped at 20ch so a long heading wraps at a readable measure instead of
   running the full 1140px container, and topped out at 46px so it sits under
   the H1 rather than competing with it. */
/* 1.22, above Syne 700's 1.20 floor. Mixed-case headings live here, so the
   descenders on g, p, y must have room. */
h2{
  font-weight:700;
  line-height:1.24;
  font-size:clamp(27px,4.2vw,46px);
  letter-spacing:-.015em;
  max-width:20ch;
}

/* Subheads in the body face: larger than the original, lighter, and set with a
   touch of negative tracking so they read as headings without shouting. */
h3{
  font-weight:600;
  line-height:1.3;
  font-size:clamp(19px,1.9vw,22px);
  letter-spacing:-.006em;
}

h4{
  font-weight:600;
  line-height:1.35;
  font-size:17.5px;
  letter-spacing:-.004em;
}

/* Eyebrow label. Was 12px, weight 700, uppercase, tracked wide. Now sentence
   case at a readable size and a normal weight, so it reads as a quiet label
   rather than a shouted micro-heading. */
.eyebrow{
  display:block;
  font-family:'Public Sans',sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--accent-ink);
  margin:0 0 12px;
}

.sec-head{max-width:62ch}
.lede{
  color:var(--muted);
  font-size:clamp(17px,1.7vw,19.5px);
  font-weight:400;
  line-height:1.62;
  max-width:58ch;
  margin:16px 0 0;
}

.small{font-size:14.5px;color:var(--muted);line-height:1.6}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Public Sans',sans-serif;font-weight:600;font-size:15.5px;
  letter-spacing:.005em;
  padding:14px 24px;border-radius:999px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn-p{background:var(--accent);color:var(--ground);box-shadow:var(--shadow-1)}
.btn-p:hover{transform:translateY(-2px)}
.btn-p:active{transform:translateY(0)}
.btn-s{background:transparent;color:var(--bone);border-color:var(--hairline)}
.btn-s:hover{border-color:var(--accent-ink);color:var(--accent-ink);transform:translateY(-2px)}
.btn-s:active{transform:translateY(0)}
/* Buttons that sit ON the pink band. Pink text on a dark chip against a pink
   field measures fine but reads muddy, because everything in the frame is the
   same hue. Bone gives 17.6:1 and actually separates. */
.btn-d{background:var(--ground);color:var(--bone);border-color:var(--ground)}
.btn-d:hover{transform:translateY(-2px)}
.btn-sm{padding:10px 17px;font-size:14px}
.btn-lg{padding:17px 30px;font-size:17px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(18,7,28,.9);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--hairline);
}
.nav-in{display:flex;align-items:center;gap:18px;height:70px}
.mark{
  display:flex;align-items:center;gap:11px;
  font-family:'Chivo',sans-serif;font-weight:900;font-size:18px;
  letter-spacing:.02em;text-decoration:none;white-space:nowrap;
}
/* Their real logo is a wide wordmark sitting inside a square black tile, so a
   circular avatar crop would cut the ends off "XTREME ACAI". This window crops
   to the wordmark instead: the square is scaled up and offset so the type sits
   centred in a 96 by 40 slot. Numbers derived by measuring the source, not
   guessed. If the file is missing the img removes its own wrapper and the
   typographic wordmark takes over. */
/* images/logo.png is their profile logo with the black knocked out to real
   transparency and cropped to the ink, generated from logo.jpg. The earlier
   version used a square crop plus mix-blend-mode:screen, which left a faint
   lighter rectangle: the source is a JPEG, so its black carries compression
   artefacts, and the nav's own backdrop-filter creates a stacking context that
   the blend could not escape. It read as a screenshot pasted on the bar.
   An alpha channel has none of those problems. */
.logo-wrap{display:block;flex:none;line-height:0}
.logo{height:34px;width:auto;max-width:none;display:block}
@media(max-width:420px){.logo{height:29px}}
.mark em{font-style:normal;background:var(--berry);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Logo already says the name, so the type lockup steps aside when it loads. */
.mark:has(.logo-wrap) .wordmark{display:none}
.nav-links{display:none;gap:26px;margin-left:auto}
.nav-links a{
  text-decoration:none;font-size:15.5px;font-weight:400;color:var(--muted);
  transition:color .2s var(--ease);
}
.nav-links a:hover{color:var(--bone)}
.nav-links a[aria-current="page"]{color:var(--bone);font-weight:500}
.nav-act{display:flex;gap:10px;margin-left:auto;align-items:center}
.tel-link{
  display:none;text-decoration:none;font-weight:600;font-size:15.5px;
  color:var(--bone);font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease);
}
.tel-link:hover{color:var(--accent-ink)}
@media(min-width:960px){
  .nav-links{display:flex}
  .nav-act{margin-left:26px}
  .tel-link{display:inline-block}
}

/* --------------------------------------------------------------------------
   BURGER, mobile page navigation
   Below 960px the horizontal link row was hidden and nothing replaced it, so a
   phone visitor could not reach Menu, Reviews or Find us from any page except
   the home page route cards. This is the fix. 44px target, which is the minimum
   comfortable tap size.
   -------------------------------------------------------------------------- */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;margin-left:10px;flex:none;
  background:transparent;border:1px solid var(--hairline);border-radius:12px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.burger span{
  display:block;height:2px;width:100%;background:var(--bone);border-radius:2px;
  transition:transform .28s var(--ease), opacity .18s var(--ease);
}
.burger:hover{border-color:var(--violet)}
.burger:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.burger:active{transform:scale(.95)}
.burger[aria-expanded="true"]{border-color:var(--accent)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:960px){.burger{display:none}}

@media(max-width:959px){
  /* Panel drops from under the bar. Fixed, so it never pushes the page down. */
  .nav-links{
    display:flex;flex-direction:column;gap:0;margin-left:0;
    position:fixed;left:0;right:0;top:70px;z-index:59;
    /* Solid, not translucent. A near-opaque background plus backdrop-filter
       let page text ghost through behind the links, and a nav panel has to be
       legible before it is pretty. No backdrop-filter here on purpose: it does
       nothing behind an opaque fill and it is a second compositing layer. */
    background:var(--ground);
    box-shadow:0 18px 40px rgba(6,2,12,.55);
    border-bottom:1px solid var(--hairline);
    padding:4px var(--gut) 12px;
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:transform .26s var(--ease), opacity .22s var(--ease);
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links a{
    padding:16px 2px;font-size:17px;
    border-bottom:1px solid var(--hairline);
  }
  .nav-links a:last-child{border-bottom:0}
  .nav-links a[aria-current="page"]{color:var(--accent-ink)}
}
@media (prefers-reduced-motion:reduce){
  .nav-links,.burger,.burger span{transition:none}
}

.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(18,7,28,.96);border-top:1px solid var(--hairline);
}
.mbar .btn{width:100%;padding:13px 10px}
@media(min-width:960px){.mbar{display:none}}
@media(max-width:959px){body{padding-bottom:78px}}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero{position:relative;padding:78px 0 66px;overflow-x:clip}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(90% 70% at 78% 12%, rgba(230,32,143,.30) 0%, rgba(230,32,143,0) 60%),
    radial-gradient(70% 60% at 8% 88%, rgba(123,47,214,.34) 0%, rgba(123,47,214,0) 62%),
    var(--ground);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
.hero-in{position:relative;z-index:1}

/* LOCKED, per Costa 2026-09-01. */
.stamp{
  display:inline-block;transform:rotate(-4deg);
  background:var(--accent);color:var(--ground);
  font-family:'Chivo',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.06em;padding:8px 15px;border-radius:6px;
  margin:0 0 22px;box-shadow:var(--shadow-1);
}

.l1,.l2,.l3,.l4{display:block}
/* Staircase re-proportioned for Chivo. Syne was 12.7x the font size wide, so
   7/14/21 filled the container. Chivo is 7.1x, so the same indents left the
   block huddled in the left two thirds with dead space beside it. 9/18/27 with
   the larger cap puts the widest line at 83 to 86 percent of the measure at
   every breakpoint from 320 to 1600, so the block reads as spread rather than
   small. Percentages, so the staircase scales with the container. */
@media(min-width:760px){
  .l2{margin-left:9%}
  .l3{margin-left:18%}
  .l4{margin-left:27%}
}
.hi{position:relative;display:inline-block;padding:0 .12em;z-index:1}
.hi::before{
  content:"";position:absolute;left:0;right:0;top:8%;bottom:10%;
  background:var(--magenta);transform:rotate(-2deg);border-radius:3px;z-index:-1;
}
.hero-sub{
  margin:30px 0 0;max-width:54ch;
  font-size:clamp(17px,1.9vw,20px);font-weight:400;line-height:1.6;color:var(--bone);
}
.hero-sub b{color:var(--accent-ink);font-weight:600;font-variant-numeric:tabular-nums}

/* Interior page header, lighter than the home hero */
.phead{padding:60px 0 20px;position:relative}
.phead h1{font-size:clamp(34px,6vw,64px)}

/* --------------------------------------------------------------------------
   ORDER BAND
   -------------------------------------------------------------------------- */

.order-band{background:var(--accent);color:var(--ground);padding:60px 0;overflow:hidden}
.order-band h2{color:var(--ground);max-width:17ch}
.order-band .eyebrow{color:var(--ground)}
.order-band .lede{color:var(--ground)}
.order-grid{display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.order-grid{grid-template-columns:1.25fr .75fr}}
.rating-card{
  background:var(--ground);color:var(--bone);border-radius:20px;
  padding:28px 26px;box-shadow:0 18px 44px rgba(18,7,28,.28);
}
.rating-num{
  font-family:'Public Sans',sans-serif;font-weight:700;font-size:56px;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.15;margin:0;
}
.rating-sub{color:var(--muted);font-size:14.5px;line-height:1.55;margin:8px 0 0}
.saving{
  margin:24px 0 0;padding:20px 22px;border-radius:14px;
  background:rgba(18,7,28,.08);border:1px solid rgba(18,7,28,.16);
}
.saving-head{margin:0 0 14px;font-size:15px;line-height:1.55;color:rgba(18,7,28,.85)}
.saving-head b{color:var(--ground);font-weight:700}
.saving-grid{display:flex;flex-direction:column;gap:8px}
.saving-row{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
  padding:10px 0;border-top:1px solid rgba(18,7,28,.14);
}
.saving-row:first-child{border-top:0;padding-top:2px}
.saving-item{font-size:14.5px;font-weight:600;color:var(--ground)}
.saving-here,.saving-there{font-family:'Public Sans',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;font-size:17px;letter-spacing:-.01em;}
.saving-here{color:var(--ground)}
.saving-here em{display:block;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(18,7,28,.55);margin-top:2px;text-align:right}
.saving-there{color:rgba(18,7,28,.45);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(230,32,143,.7);}
.saving-there em{display:block;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(18,7,28,.42);margin-top:2px;text-align:right;text-decoration:none}

/* Floating acai cones, page-wide ambient background on every page.

   History worth keeping: this started as berry dots, became bowls, and the
   bowls read as flying saucers. A wide flat ellipse with a dome on top IS a
   UFO silhouette, and no amount of recolouring fixes that. The cone solves it
   structurally: it is vertical, asymmetric top to bottom, and tapers to a
   point, so there is no saucer to misread. It is also a real menu item, the
   $8 cone.

   Sizes went UP again, 44 to 76px, because a cone is narrow. The artwork
   occupies about a third of the box width, so a cone in a 44px box is only
   ~14px wide. Rotation stays a few degrees: a cone upside down is litter. */
.bowls{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bowl{
  position:absolute;background-repeat:no-repeat;background-position:center;
  background-size:contain;will-change:transform;opacity:.5;
  filter:drop-shadow(0 8px 16px rgba(6,2,12,.5));
}
.bowl.b1{width:68px;height:68px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M22.5%2031h19l-7.4%2025.5a2.2%202.2%200%200%201-4.2%200z%27%20fill%3D%27%23EFE3C8%27%2F%3E%3Cpath%20d%3D%27M25%2037l13-2M26.5%2043l10-1.6M28.5%2049l6-1%27%20stroke%3D%27%2312071C%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%2721%27%20y%3D%2728.5%27%20width%3D%2722%27%20height%3D%273.6%27%20rx%3D%271.8%27%20fill%3D%27%23F6F1FA%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M21%2029c0-5.2%204.9-8.6%2011-8.6s11%203.4%2011%208.6z%27%20fill%3D%27%235B1BA8%27%2F%3E%3Cpath%20d%3D%27M23.5%2021.5c0-4.3%203.8-7%208.5-7s8.5%202.7%208.5%207z%27%20fill%3D%27%237B2FD6%27%2F%3E%3Cpath%20d%3D%27M26%2015.5c0-3.2%202.7-5.4%206-5.4s6%202.2%206%205.4z%27%20fill%3D%27%239C55E8%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%278%27%20r%3D%272.6%27%20fill%3D%27%23EE4AA3%27%2F%3E%3C%2Fsvg%3E');top:7%;left:4%;animation:bowl-drift 15s ease-in-out infinite;}
.bowl.b2{width:48px;height:48px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M22.5%2031h19l-7.4%2025.5a2.2%202.2%200%200%201-4.2%200z%27%20fill%3D%27%23EFE3C8%27%2F%3E%3Cpath%20d%3D%27M25%2037l13-2M26.5%2043l10-1.6M28.5%2049l6-1%27%20stroke%3D%27%2312071C%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%2721%27%20y%3D%2728.5%27%20width%3D%2722%27%20height%3D%273.6%27%20rx%3D%271.8%27%20fill%3D%27%23F6F1FA%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M21%2029c0-5.2%204.9-8.6%2011-8.6s11%203.4%2011%208.6z%27%20fill%3D%27%23B0104F%27%2F%3E%3Cpath%20d%3D%27M23.5%2021.5c0-4.3%203.8-7%208.5-7s8.5%202.7%208.5%207z%27%20fill%3D%27%23E6208F%27%2F%3E%3Cpath%20d%3D%27M26%2015.5c0-3.2%202.7-5.4%206-5.4s6%202.2%206%205.4z%27%20fill%3D%27%23F45BAE%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%278%27%20r%3D%272.6%27%20fill%3D%27%239C55E8%27%2F%3E%3C%2Fsvg%3E');top:16%;left:88%;animation:bowl-drift 19s ease-in-out infinite -3s;}
.bowl.b3{width:76px;height:76px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M22.5%2031h19l-7.4%2025.5a2.2%202.2%200%200%201-4.2%200z%27%20fill%3D%27%23EFE3C8%27%2F%3E%3Cpath%20d%3D%27M25%2037l13-2M26.5%2043l10-1.6M28.5%2049l6-1%27%20stroke%3D%27%2312071C%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%2721%27%20y%3D%2728.5%27%20width%3D%2722%27%20height%3D%273.6%27%20rx%3D%271.8%27%20fill%3D%27%23F6F1FA%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M21%2029c0-5.2%204.9-8.6%2011-8.6s11%203.4%2011%208.6z%27%20fill%3D%27%233F1178%27%2F%3E%3Cpath%20d%3D%27M23.5%2021.5c0-4.3%203.8-7%208.5-7s8.5%202.7%208.5%207z%27%20fill%3D%27%235B1BA8%27%2F%3E%3Cpath%20d%3D%27M26%2015.5c0-3.2%202.7-5.4%206-5.4s6%202.2%206%205.4z%27%20fill%3D%27%237B2FD6%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%278%27%20r%3D%272.6%27%20fill%3D%27%23F45BAE%27%2F%3E%3C%2Fsvg%3E');top:42%;left:2%;animation:bowl-drift 23s ease-in-out infinite -8s;opacity:.38;}
.bowl.b4{width:54px;height:54px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M22.5%2031h19l-7.4%2025.5a2.2%202.2%200%200%201-4.2%200z%27%20fill%3D%27%23EFE3C8%27%2F%3E%3Cpath%20d%3D%27M25%2037l13-2M26.5%2043l10-1.6M28.5%2049l6-1%27%20stroke%3D%27%2312071C%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%2721%27%20y%3D%2728.5%27%20width%3D%2722%27%20height%3D%273.6%27%20rx%3D%271.8%27%20fill%3D%27%23F6F1FA%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M21%2029c0-5.2%204.9-8.6%2011-8.6s11%203.4%2011%208.6z%27%20fill%3D%27%23B0104F%27%2F%3E%3Cpath%20d%3D%27M23.5%2021.5c0-4.3%203.8-7%208.5-7s8.5%202.7%208.5%207z%27%20fill%3D%27%23E6208F%27%2F%3E%3Cpath%20d%3D%27M26%2015.5c0-3.2%202.7-5.4%206-5.4s6%202.2%206%205.4z%27%20fill%3D%27%23F45BAE%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%278%27%20r%3D%272.6%27%20fill%3D%27%239C55E8%27%2F%3E%3C%2Fsvg%3E');top:58%;left:90%;animation:bowl-drift 17s ease-in-out infinite -5s;opacity:.42;}
.bowl.b5{width:44px;height:44px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M22.5%2031h19l-7.4%2025.5a2.2%202.2%200%200%201-4.2%200z%27%20fill%3D%27%23EFE3C8%27%2F%3E%3Cpath%20d%3D%27M25%2037l13-2M26.5%2043l10-1.6M28.5%2049l6-1%27%20stroke%3D%27%2312071C%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%2721%27%20y%3D%2728.5%27%20width%3D%2722%27%20height%3D%273.6%27%20rx%3D%271.8%27%20fill%3D%27%23F6F1FA%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M21%2029c0-5.2%204.9-8.6%2011-8.6s11%203.4%2011%208.6z%27%20fill%3D%27%235B1BA8%27%2F%3E%3Cpath%20d%3D%27M23.5%2021.5c0-4.3%203.8-7%208.5-7s8.5%202.7%208.5%207z%27%20fill%3D%27%237B2FD6%27%2F%3E%3Cpath%20d%3D%27M26%2015.5c0-3.2%202.7-5.4%206-5.4s6%202.2%206%205.4z%27%20fill%3D%27%239C55E8%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%278%27%20r%3D%272.6%27%20fill%3D%27%23EE4AA3%27%2F%3E%3C%2Fsvg%3E');top:30%;left:47%;animation:bowl-drift 21s ease-in-out infinite -11s;opacity:.3;}
.bowl.b6{width:62px;height:62px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M22.5%2031h19l-7.4%2025.5a2.2%202.2%200%200%201-4.2%200z%27%20fill%3D%27%23EFE3C8%27%2F%3E%3Cpath%20d%3D%27M25%2037l13-2M26.5%2043l10-1.6M28.5%2049l6-1%27%20stroke%3D%27%2312071C%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%2721%27%20y%3D%2728.5%27%20width%3D%2722%27%20height%3D%273.6%27%20rx%3D%271.8%27%20fill%3D%27%23F6F1FA%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M21%2029c0-5.2%204.9-8.6%2011-8.6s11%203.4%2011%208.6z%27%20fill%3D%27%233F1178%27%2F%3E%3Cpath%20d%3D%27M23.5%2021.5c0-4.3%203.8-7%208.5-7s8.5%202.7%208.5%207z%27%20fill%3D%27%235B1BA8%27%2F%3E%3Cpath%20d%3D%27M26%2015.5c0-3.2%202.7-5.4%206-5.4s6%202.2%206%205.4z%27%20fill%3D%27%237B2FD6%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%278%27%20r%3D%272.6%27%20fill%3D%27%23F45BAE%27%2F%3E%3C%2Fsvg%3E');top:76%;left:18%;animation:bowl-drift 25s ease-in-out infinite -14s;opacity:.44;}
.bowl.b7{width:50px;height:50px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M22.5%2031h19l-7.4%2025.5a2.2%202.2%200%200%201-4.2%200z%27%20fill%3D%27%23EFE3C8%27%2F%3E%3Cpath%20d%3D%27M25%2037l13-2M26.5%2043l10-1.6M28.5%2049l6-1%27%20stroke%3D%27%2312071C%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%2721%27%20y%3D%2728.5%27%20width%3D%2722%27%20height%3D%273.6%27%20rx%3D%271.8%27%20fill%3D%27%23F6F1FA%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M21%2029c0-5.2%204.9-8.6%2011-8.6s11%203.4%2011%208.6z%27%20fill%3D%27%235B1BA8%27%2F%3E%3Cpath%20d%3D%27M23.5%2021.5c0-4.3%203.8-7%208.5-7s8.5%202.7%208.5%207z%27%20fill%3D%27%237B2FD6%27%2F%3E%3Cpath%20d%3D%27M26%2015.5c0-3.2%202.7-5.4%206-5.4s6%202.2%206%205.4z%27%20fill%3D%27%239C55E8%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%278%27%20r%3D%272.6%27%20fill%3D%27%23EE4AA3%27%2F%3E%3C%2Fsvg%3E');top:86%;left:71%;animation:bowl-drift 20s ease-in-out infinite -7s;opacity:.42;}
.bowl.b8{width:66px;height:66px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M22.5%2031h19l-7.4%2025.5a2.2%202.2%200%200%201-4.2%200z%27%20fill%3D%27%23EFE3C8%27%2F%3E%3Cpath%20d%3D%27M25%2037l13-2M26.5%2043l10-1.6M28.5%2049l6-1%27%20stroke%3D%27%2312071C%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%2721%27%20y%3D%2728.5%27%20width%3D%2722%27%20height%3D%273.6%27%20rx%3D%271.8%27%20fill%3D%27%23F6F1FA%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M21%2029c0-5.2%204.9-8.6%2011-8.6s11%203.4%2011%208.6z%27%20fill%3D%27%23B0104F%27%2F%3E%3Cpath%20d%3D%27M23.5%2021.5c0-4.3%203.8-7%208.5-7s8.5%202.7%208.5%207z%27%20fill%3D%27%23E6208F%27%2F%3E%3Cpath%20d%3D%27M26%2015.5c0-3.2%202.7-5.4%206-5.4s6%202.2%206%205.4z%27%20fill%3D%27%23F45BAE%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%278%27%20r%3D%272.6%27%20fill%3D%27%239C55E8%27%2F%3E%3C%2Fsvg%3E');top:50%;left:55%;animation:bowl-drift 27s ease-in-out infinite -17s;opacity:.26;}
.bowl.b9{width:46px;height:46px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M22.5%2031h19l-7.4%2025.5a2.2%202.2%200%200%201-4.2%200z%27%20fill%3D%27%23EFE3C8%27%2F%3E%3Cpath%20d%3D%27M25%2037l13-2M26.5%2043l10-1.6M28.5%2049l6-1%27%20stroke%3D%27%2312071C%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%2721%27%20y%3D%2728.5%27%20width%3D%2722%27%20height%3D%273.6%27%20rx%3D%271.8%27%20fill%3D%27%23F6F1FA%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M21%2029c0-5.2%204.9-8.6%2011-8.6s11%203.4%2011%208.6z%27%20fill%3D%27%233F1178%27%2F%3E%3Cpath%20d%3D%27M23.5%2021.5c0-4.3%203.8-7%208.5-7s8.5%202.7%208.5%207z%27%20fill%3D%27%235B1BA8%27%2F%3E%3Cpath%20d%3D%27M26%2015.5c0-3.2%202.7-5.4%206-5.4s6%202.2%206%205.4z%27%20fill%3D%27%237B2FD6%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%278%27%20r%3D%272.6%27%20fill%3D%27%23F45BAE%27%2F%3E%3C%2Fsvg%3E');top:24%;left:26%;animation:bowl-drift 16s ease-in-out infinite -2s;opacity:.36;}
@keyframes bowl-drift{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  25%{transform:translate(24px,-20px) rotate(5deg);}
  50%{transform:translate(-16px,-32px) rotate(-4deg);}
  75%{transform:translate(-28px,12px) rotate(6deg);}
}
@media (prefers-reduced-motion:reduce){.bowl{animation:none;}}
@media(max-width:640px){
  .bowl.b5,.bowl.b8,.bowl.b9{display:none;}
  .bowl{opacity:.3}
  .bowl.b1{top:4%;left:2%;width:54px;height:54px}
  .bowl.b2{top:12%;left:84%;width:42px;height:42px}
  .bowl.b6{top:80%;left:3%;width:48px;height:48px}
  .bowl.b7{top:89%;left:80%;width:40px;height:40px}
}

/* --------------------------------------------------------------------------
   MENU
   -------------------------------------------------------------------------- */

.grid{display:grid;gap:16px;margin-top:32px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* --------------------------------------------------------------------------
   MENU RAILS, phone only
   Twenty 4:5 cards in a single column is a scroll to nowhere on a phone. Each
   menu group becomes a side-swipe rail instead, snapping card to card, bleeding
   to both screen edges so the next card peeks and the gesture is obvious.
   Above 720px it goes back to being a normal grid.
   -------------------------------------------------------------------------- */
@media(max-width:719px){
  .grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:78%;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    margin-left:calc(var(--gut) * -1);
    margin-right:calc(var(--gut) * -1);
    padding:4px var(--gut) 8px;
    scroll-padding-left:var(--gut);
  }
  .grid::-webkit-scrollbar{display:none}
  .grid > .tile{scroll-snap-align:start}
  /* Lift on hover is a mouse idea and it fights a touch scroller. */
  .tile:hover{transform:none}
  /* Swipe affordance, written by CSS so no markup changes per group. */
  .group-head::after{
    content:"Swipe for more";
    display:block;margin-top:12px;
    font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:var(--accent-ink);
  }
}
.tile{
  background:var(--surface);border:1px solid var(--hairline);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.tile:hover{transform:translateY(-3px);border-color:var(--violet);box-shadow:var(--shadow-2)}
/* 4:5 because their own product photography is portrait, shot at 550 by 825
   on a light backdrop. A landscape crop threw most of each frame away. */
.shot{position:relative;aspect-ratio:4/5;background:var(--berry);display:flex;align-items:flex-end}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The gradient only has to work over their light backdrop, so it sits lower
   and lighter than it did over the berry fallback. */
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,7,28,.55) 0%,rgba(18,7,28,0) 38%)}
.shot .glyph{
  position:relative;z-index:1;font-family:'Public Sans',sans-serif;font-weight:700;
  font-size:42px;letter-spacing:-.02em;
  color:rgba(246,241,250,.9);padding:0 0 12px 16px;line-height:1.15;
}
.shot:has(img) .glyph{display:none}

/* Empty photo slot. Rather than a decorative letter sitting in a gradient,
   the tile says what it is waiting for. On a concept preview the reader is
   the owner, so the gap becomes a request instead of a hole. */
.shot:not(:has(img)){align-items:center;justify-content:center}
.needshot{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:9px;text-align:center;padding:22px;max-width:26ch;
}
.needshot svg{
  width:28px;height:28px;fill:none;stroke:rgba(246,241,250,.92);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.needshot b{font-weight:600;font-size:15.5px;color:rgba(246,241,250,.96);letter-spacing:-.005em}
.needshot span{font-size:13px;line-height:1.5;color:rgba(246,241,250,.78)}
.shot:has(img) .needshot{display:none}
.flag{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--ground);color:var(--accent-ink);
  font-size:12px;font-weight:500;letter-spacing:.02em;
  padding:6px 12px;border-radius:999px;
}
.tile-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;gap:9px}
.tile-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.tile-note{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0;flex:1}
.tile .btn{margin-top:6px;align-self:flex-start}
.correction{
  margin-top:28px;font-size:14.5px;color:var(--muted);line-height:1.6;
  border-left:2px solid var(--hairline);padding-left:16px;max-width:66ch;
}

/* Menu page: photo cards where their own photography exists, hairline rows
   where it does not. No prices anywhere on this page: they get confirmed with
   the team and added at build time rather than guessed from a poster. */
.group{margin-top:56px}
.group-head{border-bottom:1px solid var(--hairline);padding-bottom:16px}
.group-head p{margin:8px 0 0;color:var(--muted);font-size:15px;max-width:56ch}
.rows{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:flex-start;gap:18px;padding:22px 0;border-bottom:1px solid var(--hairline)}
.row-thumb{
  width:96px;height:96px;flex:none;border-radius:12px;overflow:hidden;
  background:var(--berry);position:relative;
}
.row-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.row-main{flex:1;min-width:0;padding-top:2px}
.row-main h4{margin:0 0 5px}
.row-main p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.tag{
  display:inline-block;margin-top:9px;
  background:var(--raised);color:var(--accent-ink);border:1px solid var(--hairline);
  font-size:12.5px;font-weight:500;padding:4px 11px;border-radius:999px;
}

/* --------------------------------------------------------------------------
   PAGE CARDS (home page routes into the three interior pages)
   -------------------------------------------------------------------------- */

.routes{display:grid;gap:16px;margin-top:34px;grid-template-columns:1fr}
@media(min-width:760px){.routes{grid-template-columns:repeat(3,1fr)}}
.route{
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:18px;
  padding:28px 26px 26px;text-decoration:none;color:inherit;
  transition:transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.route:hover{transform:translateY(-3px);border-color:var(--violet);box-shadow:var(--shadow-2)}
.route p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6;flex:1}
.route .go{
  color:var(--accent-ink);font-weight:600;font-size:15px;margin-top:6px;
  display:inline-flex;align-items:center;gap:8px;
}
.route .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   TENETS
   -------------------------------------------------------------------------- */

.tenets{display:grid;gap:0;margin-top:36px;grid-template-columns:1fr;border-top:1px solid var(--hairline)}
.tenet{padding:26px 0;border-bottom:1px solid var(--hairline)}
.tenet h3{margin-bottom:9px}
.tenet p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media(min-width:700px){.tenets{grid-template-columns:repeat(2,1fr);column-gap:44px}}
@media(min-width:1000px){
  .tenets{grid-template-columns:repeat(4,1fr);column-gap:30px}
  .tenet{border-bottom:none;padding:28px 0 0}
}

/* --------------------------------------------------------------------------
   REVIEWS
   -------------------------------------------------------------------------- */

.reviews{display:grid;gap:16px;margin-top:32px;grid-template-columns:1fr}
@media(min-width:820px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{
  background:var(--surface);border:1px solid var(--hairline);border-radius:16px;
  padding:26px 24px;display:flex;flex-direction:column;gap:14px;
}
.review blockquote{margin:0;font-size:16.5px;line-height:1.65;font-weight:400}
.review .who{margin:auto 0 0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.review .who b{color:var(--bone);font-weight:500}

/* --------------------------------------------------------------------------
   LOCATIONS
   -------------------------------------------------------------------------- */

.locs{display:grid;gap:20px;margin-top:32px;grid-template-columns:1fr}
@media(min-width:900px){.locs{grid-template-columns:repeat(2,1fr)}}
.loc{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.map{width:100%;height:240px;border:0;display:block;background:var(--raised);filter:saturate(.9)}
.loc-body{padding:24px;display:flex;flex-direction:column;gap:11px;flex:1}
.loc address{font-style:normal;color:var(--muted);font-size:15.5px;line-height:1.6}
.loc .hrs{font-size:15px;color:var(--bone);font-variant-numeric:tabular-nums;margin:0}
.loc .cta-row{margin-top:auto;padding-top:8px}

/* --------------------------------------------------------------------------
   INSTAGRAM RAIL
   -------------------------------------------------------------------------- */

/* Bento wall replaces the horizontal arrow-rail carousel. Auto-fit grid with
   uniform-height tiles, polaroid tilts for visual variety, one wide feature
   card that spans two columns on desktop. No fixed row-heights so every cell
   sizes to its content and there's zero dead space before the socials strip. */
.bento{
  display:grid;grid-template-columns:1fr;gap:22px;margin-top:34px;
}
@media(min-width:640px){
  .bento{grid-template-columns:repeat(2,1fr);gap:26px 24px}
}
@media(min-width:960px){
  .bento{grid-template-columns:repeat(3,1fr);gap:32px 24px}
  .embed.wide{grid-column:span 2}
}
/* Outer tile: keeps overflow:visible so the sticker pin can pop above the top edge.
   The inner .embed-frame is what actually holds the iframe and clips its bottom. */
.embed{
  position:relative;overflow:visible;border-radius:14px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.embed-frame{
  position:relative;width:100%;height:520px;
  border-radius:14px;overflow:hidden;
  background:var(--berry);box-shadow:var(--shadow-2);
}
.embed-frame::before{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(246,241,250,.06);z-index:2;
}
/* Iframe is deliberately taller than the frame so Instagram's comment strip and
   footer padding overflow below the clip and never show. 780px covers most post
   types (square + 4:5 + reels). */
.embed-frame iframe{position:absolute;top:0;left:0;width:100%;height:780px;border:0;background:transparent}
.embed-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
  align-items:center;justify-content:center;text-align:center;padding:22px;
  font-size:14.5px;color:rgba(246,241,250,.9);border-radius:14px;z-index:1;
}
.embed-ph a{color:var(--ground);background:var(--accent-ink);padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14px}

/* Size variants per breakpoint. Mobile: shorter frame so tiles don't dominate.
   Desktop: taller variants for reels, wider variant for the featured post. */
/* Phone: the feed becomes a side-swipe rail too. Seven stacked 460px embeds is
   about four screens of scrolling before the socials strip, which is exactly
   the complaint. Tilts are dropped here because a rotated card inside an
   overflow container gets its corners clipped by the scroll box. */
@media(max-width:639px){
  .embed-frame{height:460px}
  .embed.tall .embed-frame{height:540px}
  .bento{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:84%;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    gap:16px;
    margin-left:calc(var(--gut) * -1);
    margin-right:calc(var(--gut) * -1);
    padding:4px var(--gut) 10px;
    scroll-padding-left:var(--gut);
  }
  .bento::-webkit-scrollbar{display:none}
  .bento > .embed{scroll-snap-align:start}
  .embed.tilt-l,.embed.tilt-r{transform:none}
  .embed:hover,.embed:focus-within{transform:none}
  .embed.wide{grid-column:auto}
}
@media(min-width:640px) and (max-width:959px){
  .embed-frame{height:500px}
  .embed.tall .embed-frame{height:560px}
}
@media(min-width:960px){
  .embed{grid-row:span 3}
  .embed.tall{grid-row:span 4}
  .embed.wide{grid-column:span 2;grid-row:span 3}
  .embed-frame{height:520px}
  .embed.tall .embed-frame{height:640px}
  .embed.wide .embed-frame{height:520px}
}

/* Polaroid tilt : alternating -2deg / +2deg, lifts to 0deg on hover with a small
   scale so the reader can inspect it. */
.embed.tilt-l{transform:rotate(-1.6deg)}
.embed.tilt-r{transform:rotate(1.8deg)}
.embed:hover,.embed:focus-within{transform:rotate(0deg) translateY(-4px) scale(1.02);z-index:2;box-shadow:0 4px 12px rgba(6,2,12,.55), 0 30px 60px rgba(230,32,143,.28)}
@media (prefers-reduced-motion:reduce){
  .embed,.embed.tilt-l,.embed.tilt-r{transform:none;transition:none}
  .embed:hover{transform:none}
}

/* Sticker pin on each tile : small rotated tag with the source handle. Reinforces
   "this is a real Instagram post" without a carousel widget. */
.pin{
  position:absolute;top:-11px;left:14px;z-index:3;
  display:inline-block;padding:6px 12px;border-radius:6px;
  background:var(--bone);color:var(--ground);
  font-family:'Public Sans',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.02em;
  transform:rotate(-3deg);
  box-shadow:0 2px 6px rgba(6,2,12,.35);
  white-space:nowrap;
}
.pin-lime{background:var(--accent);color:var(--ground);transform:rotate(2deg);top:-11px;left:auto;right:14px}
.embed.tilt-r .pin{transform:rotate(3deg)}
.embed:hover .pin{transform:rotate(0deg) translateY(-2px);transition:transform .25s var(--ease)}
.embed:hover .pin-lime{transform:rotate(0deg) translateY(-2px)}

/* Legacy .cnav removed: no arrow buttons in bento layout. */
.acct{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.handle{
  font-family:'Public Sans',sans-serif;font-weight:600;font-size:clamp(16.5px,2vw,21px);
  letter-spacing:-.01em;
  background:var(--berry);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --------------------------------------------------------------------------
   BANDS, FORM, FOOTER
   -------------------------------------------------------------------------- */

.band{background:var(--surface);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
/* Was Syne at 38px. Its lowercase g and l are mannered enough that a long
   lowercase quote at that size read as a mistake. Body face, lighter, smaller,
   more line height: it now reads as speech. */
.pull{
  font-family:'Public Sans',sans-serif;font-weight:500;
  font-size:clamp(21px,2.8vw,31px);line-height:1.38;margin:28px 0 12px;
  letter-spacing:-.01em;color:var(--accent-ink);max-width:26ch;
}
.attrib{color:var(--muted);font-size:14.5px;margin:0}

.form-grid{display:grid;gap:15px;margin-top:30px;max-width:640px}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-size:15px;font-weight:500;color:var(--bone)}
input,textarea{
  font-family:'Public Sans',sans-serif;font-size:16px;font-weight:400;color:var(--bone);
  background:var(--surface);border:1px solid var(--hairline);border-radius:10px;
  padding:14px 15px;width:100%;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
input::placeholder,textarea::placeholder{color:#7C6B90}
input:hover,textarea:hover{border-color:#4C3168}
input:focus,textarea:focus{border-color:var(--accent-ink);outline:none;background:var(--raised)}
textarea{resize:vertical;min-height:108px}
.form-note{font-size:15px;color:var(--muted);margin:18px 0 0}
.form-note a{color:var(--accent-ink)}
.form-msg{
  margin-top:16px;padding:15px 17px;border-radius:10px;font-size:15.5px;display:none;
  background:var(--raised);border:1px solid var(--accent-ink);color:var(--bone);
}
.form-msg.on{display:block}

.foot{border-top:1px solid var(--hairline);padding:58px 0 42px}
.foot-grid{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:820px){.foot-grid{grid-template-columns:1.1fr 1fr 1fr}}
.foot h4{margin-bottom:15px;font-family:'Public Sans',sans-serif;font-weight:600;font-size:15.5px;color:var(--bone)}
.hours{width:100%;border-collapse:collapse;font-size:15.5px}
.hours th,.hours td{text-align:left;padding:7px 0;font-weight:400;color:var(--muted)}
.hours td{text-align:right;font-variant-numeric:tabular-nums;color:var(--bone)}
.foot a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.foot a:hover{color:var(--accent-ink)}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px}
.colophon{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--hairline);
  font-size:14.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px 24px;
}

/* --------------------------------------------------------------------------
   MOTION, PREVIEW FURNITURE, PRINT
   -------------------------------------------------------------------------- */

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease), transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.tile,.cbtn{transition:none}
}

.courtesy{
  background:#1E0D2E;color:#B9A6CC;text-align:center;
  font-family:Georgia,serif;font-style:italic;font-size:13.5px;line-height:1.65;
  padding:16px 24px;border-top:1px solid #3A2450;
}
.courtesy a{color:inherit}

.wm-overlay{
  position:fixed;inset:0;z-index:9999;pointer-events:none;background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='640'%20height='420'%3E%3Ctext%20x='320'%20y='220'%20text-anchor='middle'%20transform='rotate(-28%20320%20210)'%20font-family='Arial,%20sans-serif'%20font-weight='700'%20font-size='36'%20letter-spacing='4'%20fill='%23F6F1FA'%20fill-opacity='0.09'%3ECONCEPT%20PREVIEW%20%C2%B7%20WEBNEXIS%3C/text%3E%3C/svg%3E");
}

@media print{
  .wm-overlay,.mbar,.nav{display:none}
  body{background:#fff;color:#000;padding:0}
  .shot,.embed,.hero-bg{background:#eee}
  .p-counter,.eyebrow,.pull,.rating-num,.stars{color:#000}
  a{text-decoration:underline}
}