/* ============================================================
   YOUR LIL COOK — "Aqua Kitchen" design system
   2000s Mac OS X aesthetic: pinstripes, brushed metal, glossy
   lozenges, traffic-light windows, magnifying dock.
   Mobile-first. Desktop gets the full desktop-OS metaphor.
   ============================================================ */

:root {
  /* Aqua blues */
  --aqua-lt:   #8FD0FF;
  --aqua:      #2A8CEA;
  --aqua-dk:   #0A54B4;
  --aqua-deep: #073B80;

  /* Vibrant accents */
  --tangerine: #FF8A2B;
  --pomegranate:#E8442E;
  --hot:       #FF3D7F;
  --grape:     #8B5CF6;
  --lime:      #5FCB3C;
  --saffron:   #FFC02E;

  /* Traffic lights */
  --tl-red:    #FF5F57;
  --tl-amber:  #FEBC2E;
  --tl-green:  #28C840;

  /* Neutrals / metal */
  --ink:       #1E2228;
  --ink-70:    rgba(30,34,40,.72);
  --ink-50:    rgba(30,34,40,.5);
  --ink-30:    rgba(30,34,40,.3);
  --paper:     #FFFFFF;
  --metal-hi:  #FDFDFD;
  --metal-lo:  #C6CAD0;
  --line:      rgba(30,34,40,.16);
  --line-soft: rgba(30,34,40,.08);

  --font-logo: 'Baloo 2', 'Trebuchet MS', Verdana, sans-serif;
  --font-ui:   'Rubik', 'Lucida Grande', 'Segoe UI', Helvetica, Arial, sans-serif;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  --shadow-win: 0 24px 60px rgba(8,20,40,.42), 0 4px 12px rgba(8,20,40,.24);
  --shadow-icon: 0 6px 14px rgba(0,0,0,.42);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: #B9C3CE;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* ============================================================
   Pinstripes — the signature Aqua background texture
   ============================================================ */

.pinstripe {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.55) 0px,
    rgba(255,255,255,.55) 1px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0) 4px
  );
}

/* ============================================================
   LOGO — glossy mark + gradient wordmark
   ============================================================ */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  line-height: 1;
}

.logo__mark {
  width: 30px; height: 30px;
  flex: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

.logo__type {
  font-family: var(--font-logo);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFE9C2 42%, #FFB55C 44%, #FF8A2B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .4px rgba(120,50,0,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

.logo--dark .logo__type {
  background: linear-gradient(180deg, #4A2B10 0%, #B4571A 50%, #FF8A2B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* ============================================================
   DESKTOP (landing)
   ============================================================ */

body.page-desktop { overflow: hidden; background: #0A1622; }

.desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.desktop__wall {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  filter: saturate(1.25) contrast(1.06);
}

.desktop__tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(20,90,180,.34), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(6,18,38,.62) 0%, rgba(6,18,38,.06) 24%, rgba(6,18,38,.04) 52%, rgba(6,18,38,.58) 100%);
}

/* ---------- menu bar ---------- */

.menubar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(228,234,241,.86));
  border-bottom: 1px solid rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.menubar .logo__type { font-size: 16px; }
.menubar .logo__mark { width: 20px; height: 20px; }

.menubar__right {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 500; color: var(--ink-70);
}

.menubar__clock { font-variant-numeric: tabular-nums; }

/* ---------- desktop icons ---------- */

.icons {
  position: absolute;
  inset: 30px 0 0 0;
  z-index: 10;
}

.dicon {
  position: absolute;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 5px;
  border-radius: var(--r-m);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;

  /* draggable like a real desktop */
  cursor: grab;
  touch-action: none;              /* let us handle the drag, not the browser scroll */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.dicon:active { cursor: grabbing; }

.dicon.is-dragging {
  cursor: grabbing;
  transform: scale(1.06);
  opacity: .9;
  transition: none;                /* follow the pointer exactly, no lag */
}
.dicon.is-dragging svg { filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); }

.dicon svg { width: 62px; height: 62px; filter: drop-shadow(var(--shadow-icon)); }

.dicon__label {
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6);
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.25;
}

.dicon.is-selected { background: rgba(42,140,234,.34); border-color: rgba(255,255,255,.5); }
.dicon.is-selected .dicon__label { background: var(--aqua); text-shadow: none; }
.dicon:active svg { transform: scale(.94); }
.dicon svg { transition: transform .1s ease; }

/* placement — corners, clear of her face */
.dicon--portfolio  { top: 4%;  left: 3%; }
.dicon--mediakit   { top: 4%;  right: 3%; }
.dicon--supperclub { bottom: 20%; left: 3%; }
.dicon--recipes    { bottom: 20%; right: 3%; }

/* ---------- dock ---------- */

.dock {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.16));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(1.3);
}

.dock a {
  display: block;
  width: 46px; height: 46px;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.4);
  transform-origin: bottom center;
  position: relative;
}

.dock a svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.dock a:hover { transform: scale(1.42) translateY(-6px); }
.dock a:active { transform: scale(1.2) translateY(-2px); }

.dock a::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) scale(.9);
  background: rgba(255,255,255,.96);
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.dock a:hover::after { opacity: 1; }

/* ============================================================
   WINDOWS — traffic lights + brushed metal
   ============================================================ */

.win {
  position: absolute;
  z-index: 100;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: var(--shadow-win);
  overflow: hidden;
  display: none;
  flex-direction: column;
  max-height: calc(100vh - 90px);
}

.win.is-open { display: flex; animation: winIn .22s cubic-bezier(.2,.9,.3,1.15); }

@keyframes winIn {
  from { opacity: 0; transform: scale(.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.win__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  flex: none;
  background: linear-gradient(180deg, var(--metal-hi) 0%, #E7EAEE 48%, #D6DAE0 52%, var(--metal-lo) 100%);
  border-bottom: 1px solid rgba(0,0,0,.28);
  cursor: grab;
  user-select: none;
}
.win__bar:active { cursor: grabbing; }

.win__lights { display: flex; gap: 7px; flex: none; }

.win__light {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: none;
  padding: 0;
  position: relative;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85), 0 1px 1px rgba(0,0,0,.35);
}
.win__light--red   { background: radial-gradient(circle at 32% 28%, #FF9C96, var(--tl-red)); }
.win__light--amber { background: radial-gradient(circle at 32% 28%, #FFD98A, var(--tl-amber)); cursor: default; }
.win__light--green { background: radial-gradient(circle at 32% 28%, #7BEA8A, var(--tl-green)); cursor: default; }

.win__title {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(30,34,40,.8);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  margin-right: 47px; /* balance the lights */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win__body {
  padding: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(180deg, #FBFCFD, #F4F6F8);
}

.win__intro { font-size: 13.5px; color: var(--ink-70); margin: 0 0 16px; }
.win__intro strong { color: var(--ink); }

/* supper club gallery inside the window */

/* 2 columns on small phones; the rule at 560px takes it to a 3x3 */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gallery button {
  padding: 0;
  border: 1px solid rgba(0,0,0,.3);
  border-radius: var(--r-s);
  overflow: hidden;
  background: #000;
  aspect-ratio: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  transition: transform .14s ease, box-shadow .14s ease;
}
.gallery button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 560px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

/* lightbox for a single gallery photo */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6,12,22,.86);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--r-m);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.lightbox__close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.16);
  color: #fff; font-size: 18px; line-height: 1;
  backdrop-filter: blur(8px);
}

/* ============================================================
   Glossy Aqua buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid var(--aqua-dk);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.18) 46%, rgba(255,255,255,0) 47%, rgba(255,255,255,.14) 100%),
    linear-gradient(180deg, var(--aqua-lt), var(--aqua) 45%, var(--aqua-dk));
  box-shadow: 0 2px 5px rgba(8,40,90,.35), inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow: 0 1px 1px rgba(0,40,90,.5);
  transition: filter .14s ease, transform .1s ease;
}
.btn:hover { filter: brightness(1.1) saturate(1.1); }
.btn:active { transform: translateY(1px); filter: brightness(.94); }

.btn--warm {
  border-color: #B4430E;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.18) 46%, rgba(255,255,255,0) 47%, rgba(255,255,255,.14) 100%),
    linear-gradient(180deg, #FFC98A, var(--tangerine) 45%, #E8531A);
  text-shadow: 0 1px 1px rgba(120,40,0,.5);
}

.btn--ghost {
  color: var(--ink);
  border-color: var(--line);
  background: linear-gradient(180deg, #FFF, #E9ECF0);
  box-shadow: 0 1px 3px rgba(0,0,0,.14), inset 0 1px 0 #fff;
  text-shadow: 0 1px 0 #fff;
}

/* ============================================================
   INTERIOR PAGES (Portfolio / Media Kit) — windowed layout
   ============================================================ */

body.page-inner {
  background:
    linear-gradient(180deg, #7FA9CE 0%, #A9BFD2 40%, #C9D2DA 100%) fixed;
  min-height: 100vh;
  padding: 0 0 40px;
}

body.page-inner::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(180deg,
    rgba(255,255,255,.28) 0px, rgba(255,255,255,.28) 1px,
    rgba(0,0,0,0) 1px, rgba(0,0,0,0) 4px);
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 14px;
}

.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(228,234,241,.9));
  border-bottom: 1px solid rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}

.appbar__nav { display: flex; gap: 14px; font-size: 11.5px; font-weight: 600; }
.appbar__nav a { text-decoration: none; color: var(--ink-70); }
.appbar__nav a:hover { color: var(--aqua-dk); }
.appbar__nav a.is-here { color: var(--aqua-dk); }

/* a page rendered as one big window */

.docwin {
  margin: 22px 0;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: var(--shadow-win);
  overflow: hidden;
}

.docwin__body { padding: 26px 20px 34px; }

.hero-strip {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.3);
}
.hero-strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: saturate(1.2); }
.hero-strip__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(6,14,26,0), rgba(6,14,26,.82));
  color: #fff;
}

h1, h2, h3 { font-family: var(--font-logo); font-weight: 800; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(28px, 6.5vw, 42px); }
h2 { font-size: clamp(21px, 4.4vw, 28px); }
h3 { font-size: clamp(16px, 3.4vw, 19px); }
p { margin: 0; }

.eyebrow {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, var(--aqua-lt), var(--aqua) 50%, var(--aqua-dk));
  border: 1px solid var(--aqua-dk);
  padding: 3px 9px; border-radius: 100px;
  text-shadow: 0 1px 1px rgba(0,40,90,.5);
}
.eyebrow--warm { background: linear-gradient(180deg,#FFC98A,var(--tangerine) 50%,#E8531A); border-color:#B4430E; }

.lede { font-size: 15px; color: var(--ink-70); max-width: 56ch; }

/* case studies */

.case { border-top: 1px solid var(--line-soft); padding: 26px 0; }
.case:first-of-type { border-top: none; }
.case__inner { display: grid; gap: 16px; }
.case__media { border-radius: var(--r-m); overflow: hidden; border: 1px solid rgba(0,0,0,.28); aspect-ratio: 4/3; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.case__tag {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 10px;
  background: linear-gradient(180deg,#fff,#EDF0F4); color: var(--ink-70);
}
.case__body { margin-top: 10px; font-size: 14px; color: var(--ink-70); max-width: 60ch; }

@media (min-width: 820px) {
  .case__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 34px; }
  .case:nth-of-type(even) .case__media { order: 2; }
}

/* placeholder flag */
.placeholder {
  display: inline-block; font-style: italic; font-size: 13px;
  color: #8A5A00; background: repeating-linear-gradient(135deg,#FFF7E2,#FFF7E2 7px,#FFEFC7 7px,#FFEFC7 14px);
  border: 1px dashed #D8A72E; border-radius: var(--r-s); padding: 3px 9px;
}

/* stats / pillars / offers */

.stat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.stat-tile {
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px;
  background: linear-gradient(180deg,#fff,#F0F3F7);
  box-shadow: inset 0 1px 0 #fff;
}
.stat-tile__value { font-family: var(--font-logo); font-weight: 800; font-size: 22px; }
.stat-tile__label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }
.stat-note { margin-top: 12px; font-size: 12px; color: var(--ink-50); }

.pillar-grid { display: grid; gap: 0; }
.pillar { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.pillar:first-child { border-top: none; }
.pillar__index {
  font-family: var(--font-logo); font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(180deg,var(--aqua-lt),var(--aqua) 50%,var(--aqua-dk));
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--aqua-dk);
}
.pillar__body { font-size: 13.5px; color: var(--ink-70); margin-top: 2px; }

.partner-row { display: flex; flex-wrap: wrap; gap: 10px; }
.partner-badge {
  font-family: var(--font-logo); font-weight: 800; font-size: 14px;
  border: 1px solid var(--line); border-radius: 100px; padding: 9px 18px;
  background: linear-gradient(180deg,#fff,#E9EDF2); text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.12), inset 0 1px 0 #fff;
}
.partner-badge:hover { filter: brightness(1.04); }

.offer-list { list-style: none; margin: 0; padding: 0; }
.offer-list li { font-size: 14px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.offer-list li:first-child { border-top: none; }

.section { padding: 24px 0; border-top: 1px solid var(--line-soft); }
.section:first-child { border-top: none; padding-top: 0; }
.section h2 { margin-bottom: 16px; }

@media (min-width: 700px) {
  .stat-grid { grid-template-columns: repeat(4,1fr); }
  .pillar-grid { grid-template-columns: 1fr 1fr; column-gap: 30px; }
  .docwin__body { padding: 32px 34px 42px; }
}

.cta-band {
  margin-top: 26px;
  border-radius: var(--r-m);
  padding: 30px 22px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, var(--aqua) 0%, var(--aqua-dk) 60%, var(--aqua-deep) 100%);
  border: 1px solid var(--aqua-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.cta-band h2 { color: #fff; text-shadow: 0 1px 2px rgba(0,30,70,.5); margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,.88); margin-bottom: 18px; font-size: 14px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* footer */

.site-footer {
  max-width: 1080px; margin: 0 auto; padding: 18px 20px 30px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 11.5px; color: rgba(20,40,60,.72);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.site-footer__links a { text-decoration: none; color: rgba(20,40,60,.8); font-weight: 500; }
.site-footer__links a:hover { color: var(--aqua-deep); }

@media (min-width: 700px) {
  .site-footer { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================
   MEDIA KIT gate
   ============================================================ */

.gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gate__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) brightness(.6); }
.gate__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,20,44,.72), rgba(6,20,44,.86)); }

.gate__win {
  position: relative; z-index: 2;
  width: 100%; max-width: 380px;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: var(--shadow-win);
  overflow: hidden;
}
.gate__inner { padding: 26px 24px 24px; text-align: center; background: linear-gradient(180deg,#FBFCFD,#F1F4F7); }
.gate__inner h1 { font-size: 24px; margin-bottom: 8px; }
.gate__inner p { font-size: 13px; color: var(--ink-70); margin-bottom: 18px; }
.gate__icon { width: 58px; height: 58px; margin: 0 auto 14px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.28)); }

.gate__form { display: flex; flex-direction: column; gap: 10px; }
.gate__input {
  font-family: var(--font-ui); font-size: 15px;
  padding: 11px 14px; border-radius: 100px;
  border: 1px solid rgba(0,0,0,.3);
  background: #fff; text-align: center; color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.1);
  outline: none;
}
.gate__input:focus { border-color: var(--aqua); box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 0 0 3px rgba(42,140,234,.35); }
.gate__error { font-size: 12px; color: var(--pomegranate); min-height: 16px; font-weight: 500; }
.gate__request { margin-top: 14px; display: inline-block; font-size: 11.5px; color: var(--aqua-dk); text-decoration: underline; }

.gate.is-out { animation: gateOut .28s ease forwards; }
@keyframes gateOut { to { opacity: 0; visibility: hidden; } }

.shake { animation: shake .34s ease; }
@keyframes shake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-4px); }
  40%,60% { transform: translateX(4px); }
}

#mediakit-content[hidden] { display: none; }

/* ============================================================
   Responsive: phones get bigger touch targets, tighter corners
   ============================================================ */

@media (max-width: 520px) {
  .dicon { width: 84px; }
  .dicon svg { width: 54px; height: 54px; }
  .dicon--portfolio, .dicon--mediakit { top: 3%; }
  .dicon--portfolio  { left: 1%; }
  .dicon--mediakit   { right: 1%; }
  .dicon--supperclub { bottom: 22%; left: 1%; }
  .dicon--recipes    { bottom: 22%; right: 1%; }
  .dock { gap: 4px; padding: 7px 9px; border-radius: 16px; }
  .dock a { width: 40px; height: 40px; }
  .dock a:hover { transform: none; }
  .dock a::after { display: none; }
  .hero-strip { height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   MEDIA KIT — blocks added for the 2026 kit
   ============================================================ */

.pullquote {
  margin: 22px 0 6px;
  padding: 18px 20px;
  border-left: 3px solid var(--tangerine, #FF8A2B);
  background: linear-gradient(180deg, rgba(255,138,43,.07), rgba(255,138,43,.02));
  border-radius: 0 10px 10px 0;
}
.pullquote p {
  margin: 0;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.pullquote span {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-55, #6a6a6a);
}

/* platform breakdown */
.plat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.plat {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  padding: 16px 16px 15px;
  background: linear-gradient(180deg, #fff, #FAFBFC);
}
.plat h3 {
  margin: 0 0 6px;
  font-size: 15px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.plat h3 span {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 17px;
  color: var(--tangerine, #FF8A2B);
  letter-spacing: -.01em;
}
.plat p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-70, #444); }

/* campaign packages */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
  align-items: start;
}
.pack {
  position: relative;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 20px 18px 18px;
  background: linear-gradient(180deg, #fff, #F7F9FB);
}
.pack--rec {
  border-color: rgba(255,138,43,.55);
  box-shadow: 0 6px 22px rgba(255,138,43,.16);
}
.pack__flag {
  position: absolute;
  top: -10px; left: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tangerine, #FF8A2B);
  border-radius: 999px;
  padding: 4px 11px;
}
.pack h3 { margin: 0; font-size: 15px; }
.pack__price {
  margin: 8px 0 14px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.pack__price span {
  display: block;
  font-family: 'Rubik', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-55, #6a6a6a);
  margin-top: 5px;
}
.pack ul { margin: 0; padding-left: 17px; }
.pack li { font-size: 13px; line-height: 1.55; color: var(--ink-70, #444); margin-bottom: 6px; }

.pillar__body em { font-style: normal; color: var(--ink-55, #6a6a6a); }

@media (max-width: 860px) {
  .plat-grid, .pack-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MEDIA KIT — PDF viewer (shown after the gate unlocks)
   ============================================================ */

.pdfview {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 14px 30px;
}

.pdfview__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pdfview__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.pdfview__title {
  margin: 4px 0 0;
  font-family: var(--font-logo);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.pdfview__actions { display: flex; flex-wrap: wrap; gap: 9px; }

.pdfview__frame {
  display: block;
  width: 100%;
  height: calc(100vh - 190px);
  min-height: 520px;
  border: 1px solid rgba(0,0,0,.28);
  border-radius: var(--r-m);
  background: #52565C;
  box-shadow: var(--shadow-win);
}

.pdfview__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  color: #fff;
  text-align: center;
  padding: 30px;
}

/* the mobile card — hidden on desktop */
.pdfview__mobile { display: none; }

@media (max-width: 820px) {
  .pdfview__frame { display: none; }          /* inline PDFs are unreliable on phones */
  .pdfview__actions { display: none; }        /* the card below carries the action */

  .pdfview__mobile {
    display: block;
    text-align: center;
    padding: 30px 22px 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    background: linear-gradient(180deg, #FFFFFF, #F4F7FA);
    box-shadow: 0 10px 30px rgba(8,20,40,.14);
  }
  .pdfview__mobile svg { width: 66px; height: 66px; margin: 0 auto 14px; }
  .pdfview__mobile h2 { margin: 0 0 8px; font-size: 20px; }
  .pdfview__mobile p {
    margin: 0 auto 20px;
    max-width: 44ch;
    font-size: 14px;
    color: var(--ink-70);
  }
  .pdfview__mail {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--ink-50);
  }
}