/* Yadee — the whole storefront layer.
   Modelled directly on apple.com/iphone: near-white grounds alternating
   with #f5f5f7, one near-black ink and one grey, enormous tight-tracked
   headlines, a lot of empty space, no card chrome or drop shadows, and
   motion that only ever fades and lifts. Selling comes first on every
   page; the detail lives underneath it. Brand accent stays Yadee's
   salmon, standing in for Apple's blue. */

:root {
  /* grounds — Apple alternates white and #f5f5f7 and never uses more */
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --bg-dark: #000000;

  /* ink — exactly two weights of text, as Apple does */
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --hair: #d2d2d7;

  --accent: #e8687a;         /* Yadee salmon, used where Apple uses blue */
  --accent-ink: #c1465a;     /* the link-safe tone on white */

  --dock-h: 46px;
  --dock-top: 12px;

  --gutter: clamp(22px, 5vw, 48px);
  --maxw: 980px;             /* Apple's copy column */
  --maxw-wide: 1240px;       /* and its wide media column */

  --r-lg: 28px;
  --r-md: 18px;
  --r-pill: 980px;

  --ease: cubic-bezier(.28, .11, .32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--dock-h) + var(--dock-top) * 2 + 8px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }

/* ── type — Apple's four sizes, nothing in between ────────────────────── */

.display {
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: clamp(44px, 8vw, 96px); line-height: 1.03;
  letter-spacing: -.035em; margin: 0;
}
.headline {
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: clamp(32px, 5vw, 64px); line-height: 1.06;
  letter-spacing: -.03em; margin: 0;
}
.title {
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.16;
  letter-spacing: -.02em; margin: 0;
}
.sub {
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5;
  letter-spacing: -.01em; color: var(--ink-2); margin: 0;
}
.eyebrow {
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.4;
  letter-spacing: -.01em; color: var(--accent-ink); margin: 0 0 6px;
  font-weight: 700;
}
.fine { font-size: 12px; line-height: 1.4; color: var(--ink-2); }

/* the "Learn more ›" link, Apple's only link style */
.chev {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-size: clamp(15px, 1.5vw, 19px); letter-spacing: -.01em;
  text-decoration: none; color: var(--accent-ink);
}
.chev::after { content: "\203A"; font-size: 1.15em; transition: transform .25s var(--ease); }
.chev:hover { text-decoration: underline; }
.chev:hover::after { transform: translateX(3px); }
.chev-row { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center; }

/* the solid pill — Apple's Buy button */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: 15px; padding: 11px 21px; border: none; border-radius: var(--r-pill);
  cursor: pointer; transition: background .2s;
}
.pill:hover { background: var(--accent-ink); }

/* ── the dock — one floating tablet doing both navs' jobs ──────────────
   At the top of a page it carries the site nav. Once you are past the
   hero it swaps to the page's own sections plus the Inquire pill, so the
   nav on screen is always the one that matches where you are. Scrolling
   down puts it away; scrolling up asks for it back. Its width is
   animated between the two measured content widths by site.js. */

.dock {
  position: fixed; top: var(--dock-top); left: 50%; z-index: 80;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 8px 30px rgba(0,0,0,.09);
  transition: transform .42s var(--ease), opacity .3s var(--ease), width .42s var(--ease);
}
.dock.away { transform: translate(-50%, -180%); opacity: 0; pointer-events: none; }

.dock-inner {
  height: var(--dock-h); display: flex; align-items: center; gap: 16px;
  padding: 0 20px; white-space: nowrap;
}
/* the whole content set fades out for the swap, then back in */
.dock-inner > * { transition: opacity .18s var(--ease); }
.dock.swapping .dock-inner > * { opacity: 0; }

.dock-burger {
  display: none; flex: none; width: 22px; height: 22px; padding: 0;
  border: none; background: none; cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
}
.dock-burger svg { width: 16px; height: 16px; }
.dock.paged .dock-burger { display: flex; }

.dock-links { display: none; align-items: center; gap: clamp(14px, 2.2vw, 26px); }
.dock:not(.paged) .dock-site { display: flex; }
.dock.paged .dock-page { display: flex; }
.dock-links a {
  font-size: 12.5px; letter-spacing: -.01em; text-decoration: none;
  color: var(--ink-2); transition: color .2s;
}
.dock-links a:hover { color: var(--ink); }
.dock-links a.active, .dock-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* ── the two fixed corners ─────────────────────────────────────────────
   Identity on the left, the ask on the right. Neither ever hides — only
   the navigation between them comes and goes, so the page always has an
   anchor and a way to start a conversation. */

.corner-logo, .corner-cta { position: fixed; top: var(--dock-top); z-index: 81; }

.corner-logo {
  left: clamp(12px, 2.4vw, 26px);
  display: flex; align-items: center; height: var(--dock-h); padding: 0 20px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 8px 30px rgba(0,0,0,.09);
  transition: background .2s;
}
.corner-logo:hover { background: rgba(255,255,255,.86); }
.corner-logo img { height: 16px; width: auto; }

.corner-cta {
  right: clamp(12px, 2.4vw, 26px);
  height: var(--dock-h); padding: 0 24px;
  box-shadow: 0 8px 26px rgba(232,104,122,.34);
}

/* the categories drawer the ☰ opens */
.dock-panel {
  position: absolute; top: calc(100% + 9px); left: 50%; z-index: 2;
  min-width: 190px; padding: 7px; display: grid; gap: 1px;
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 12px 34px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .26s var(--ease), transform .3s var(--ease), visibility .26s;
}
.dock-panel.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dock-panel a {
  padding: 9px 15px; border-radius: 14px; font-size: 13px;
  text-decoration: none; color: var(--ink); transition: background .18s;
}
.dock-panel a:hover { background: rgba(0,0,0,.05); }
.dock-panel a[aria-current="page"] { font-weight: 700; }
.dock-panel .rule { height: 1px; background: var(--hair); margin: 6px 9px; }
/* the in-page sections only need to be in the drawer once the tablet is
   too narrow to show them itself */
.dock-panel .panel-sections { display: none; }

@media (max-width: 700px) {
  /* no room for links between the corners — the tablet becomes the drawer
     trigger alone, and the drawer carries everything */
  .dock-links { display: none !important; }
  .dock .dock-burger { display: flex; }
  .dock-inner { padding: 0 14px; }
  .dock-panel .panel-sections { display: grid; gap: 1px; }
  .corner-logo { padding: 0 15px; }
  .corner-cta { padding: 0 17px; font-size: 13.5px; }
}

/* ── section rhythm — Apple's air ─────────────────────────────────────── */

.sec { padding: clamp(70px, 10vw, 120px) var(--gutter); }
.sec.grey { background: var(--bg-2); }
.sec.dark { background: var(--bg-dark); color: #fff; }
.sec.dark .sub, .sec.dark .fine { color: #86868b; }
.sec.tight { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.sec.no-pad-x { padding-left: 0; padding-right: 0; }

.copy { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.copy .sub { margin: 20px auto 0; max-width: 44ch; }
.copy .chev-row { margin-top: 26px; }
.copy.left { text-align: left; }
.copy.left .sub, .copy.left .chev-row { margin-left: 0; justify-content: flex-start; }

/* ── hero — the sell. Type first, then one big picture. ───────────────── */

/* top padding clears the floating dock, which sits over the page */
.hero { padding: clamp(96px, 10vw, 140px) var(--gutter) 0; text-align: center; }
.hero .display { margin-bottom: 0; }
.hero .sub { margin: 22px auto 0; max-width: 40ch; }
.hero .chev-row { margin-top: 24px; }
.hero-media {
  margin: clamp(38px, 5vw, 64px) auto 0; max-width: var(--maxw-wide);
  border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2);
}
.hero-media img, .hero-media video {
  width: 100%; height: clamp(320px, 62vh, 620px); object-fit: cover;
}
/* the compact variant category pages use */
.hero.compact .display { font-size: clamp(38px, 6.4vw, 76px); }
.hero.compact .hero-media img { height: clamp(260px, 46vh, 440px); }

/* ── lineup — the categories, Apple's "Explore the lineup" ────────────── */

.lineup {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  max-width: var(--maxw-wide); margin: 0 auto;
}
@media (max-width: 900px) { .lineup { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lineup { grid-template-columns: 1fr; } }

/* no card, no border, no shadow — just the picture and the words */
.lineup a {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; color: inherit;
}
.lineup .shot {
  width: 100%; aspect-ratio: 1/1; border-radius: var(--r-md);
  overflow: hidden; background: var(--bg-2); margin-bottom: 20px;
}
.lineup .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.lineup a:hover .shot img { transform: scale(1.04); }
.lineup h3 {
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: -.02em; margin: 0 0 8px;
}
.lineup p { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin: 0 0 14px; max-width: 26ch; }
.lineup .chev { font-size: 15px; margin-top: auto; }

/* ── the items — a snap carousel of plain pictures ────────────────────── */

.rail { position: relative; }
.rail-track {
  display: flex; gap: clamp(14px, 1.8vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 var(--gutter) 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail-track::-webkit-scrollbar { display: none; }

.item {
  flex: 0 0 auto; width: clamp(240px, 27vw, 340px); scroll-snap-align: center;
  border: none; background: none; padding: 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer;
}
.item .frame {
  width: 100%; aspect-ratio: 3/4; border-radius: var(--r-md);
  overflow: hidden; background: var(--bg-2); margin-bottom: 16px;
}
.item .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.item:hover .frame img { transform: scale(1.04); }
.item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }
.item .name {
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: -.02em; margin-bottom: 4px;
}
.item .meta { font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; }
.item .cue { font-size: 14px; color: var(--accent-ink); }
.item .cue::after { content: " \203A"; }

.rail-controls {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 28px;
}
.arrow {
  width: 36px; height: 36px; flex: none; border: none; cursor: pointer;
  border-radius: 50%; background: rgba(0,0,0,.05); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, opacity .2s;
}
.arrow:hover { background: rgba(0,0,0,.1); }
.arrow[disabled] { opacity: .28; cursor: default; }
.arrow svg { width: 14px; height: 14px; }
.dots { display: flex; align-items: center; gap: 7px; }
.dots button {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: rgba(0,0,0,.2); cursor: pointer;
  transition: background .25s, transform .25s var(--ease);
}
.dots button[aria-current="true"] { background: var(--accent); transform: scale(1.4); }

/* ── details — everything after the sell ──────────────────────────────── */

/* two-up: one picture, one block of copy */
.split {
  max-width: var(--maxw-wide); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split .s-media { border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); aspect-ratio: 4/3; }
.split .s-media img { width: 100%; height: 100%; object-fit: cover; }
.split p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 18px 0 0; }
.split .eyebrow { margin-bottom: 10px; }

/* the tile grid Apple uses for feature detail */
.tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
  max-width: var(--maxw-wide); margin: 0 auto;
}
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  background: var(--bg-2); border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px); min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
}
.sec.grey .tile { background: var(--bg); }
.tile h3 {
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: clamp(20px, 2vw, 25px); letter-spacing: -.02em; line-height: 1.18; margin: 0;
}
.tile p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.tile .figure {
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: clamp(44px, 5.4vw, 72px); line-height: 1; letter-spacing: -.04em;
  color: var(--accent); margin: 0 0 4px;
}
/* photo tile: picture fills, words sit on it */
.tile.photo { position: relative; overflow: hidden; color: #fff; padding: clamp(24px, 3vw, 34px); }
.tile.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tile.photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.02) 40%, rgba(0,0,0,.66));
}
.tile.photo > *:not(img) { position: relative; z-index: 2; }
.tile.photo p { color: rgba(255,255,255,.8); }

/* a full-bleed picture as its own beat */
.band { position: relative; }
.band img, .band video { width: 100%; height: clamp(300px, 60vh, 600px); object-fit: cover; }
.band .caption {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: clamp(28px, 5vw, 56px); color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.band .caption .headline { max-width: 16ch; }

/* ── the piece popup ──────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 4vw, 40px);
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-card {
  position: relative; width: min(940px, 100%); max-height: 88vh; overflow: auto;
  background: var(--bg); border-radius: var(--r-lg);
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(16px) scale(.98); opacity: 0;
  transition: transform .4s var(--ease), opacity .35s var(--ease);
}
.modal-overlay.open .modal-card { transform: none; opacity: 1; }
@media (max-width: 760px) { .modal-card { grid-template-columns: 1fr; max-height: 92vh; } }
.m-image { position: relative; min-height: 320px; background: var(--bg-2); }
.m-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-body { padding: clamp(28px, 4vw, 46px); display: flex; flex-direction: column; gap: 14px; }
.m-eyebrow { font-size: 15px; font-weight: 700; color: var(--accent-ink); }
.m-title {
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.03em; line-height: 1.1; margin: 0;
}
.m-story { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; }
/* the spec rows — the detail, kept after the story exactly like Apple */
.m-specs { margin: 4px 0 2px; }
.m-specs:empty { display: none; }
.m-specs .row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 12px 0; border-top: 1px solid var(--hair); font-size: 14px;
}
.m-specs .row:last-child { border-bottom: 1px solid var(--hair); }
.m-specs .k { color: var(--ink-2); }
.m-specs .v { font-weight: 700; text-align: right; }
.m-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.86); color: var(--ink); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background .2s;
}
.m-close:hover { background: #fff; }

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--font-heading), system-ui, sans-serif; font-weight: 700;
  font-size: 15px; padding: 12px 22px; border-radius: var(--r-pill);
  transition: background .2s;
}
.btn-whatsapp:hover { background: var(--accent-ink); }
.btn-whatsapp svg { width: 18px; height: 18px; flex: none; }

/* ── footer — Apple's quiet small print ───────────────────────────────── */

.site-footer { background: var(--bg-2); padding: 40px var(--gutter); }
.footer-inner {
  max-width: var(--maxw-wide); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  align-items: center; justify-content: space-between;
}
.footer-inner .f-links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--ink); }

.f-social { display: flex; align-items: center; gap: 10px; }
.f-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--ink-2); background: rgba(0,0,0,.045);
  transition: background .2s, color .2s;
}
.f-social a:hover { background: var(--accent); color: #fff; text-decoration: none; }
.f-social svg { width: 17px; height: 17px; fill: currentColor; }

/* ── reveal — fade and lift, nothing else ─────────────────────────────── */

.reveal { opacity: 0; transform: translateY(24px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .rail-track { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}