/* Shippwell base kit: the white gallery. Distilled from v6. One accent, hairlines, no gradients, no shadows. */
:root{
  --bg:#FFFFFF; --soft:#F5F5F7; --ink:#0A0A0A; --muted:#6E6E73; --line:#E8E8EA;
  --accent:#C8F031; --on-accent:#0A0A0A;
  --ease:cubic-bezier(.22,1,.36,1);
  --max:1280px; --gutter:40px; --gap:24px; --radius:20px; --sec:168px;
  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:16px; top:-60px; background:var(--ink); color:#fff; padding:10px 14px; border-radius:8px; z-index:100; }
.skip:focus{ top:12px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:calc(var(--max) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); }
.grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); }
.sec{ padding-top:var(--sec); }
.sec-last{ padding-bottom:var(--sec); }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:56px; }
.split-4-8 > :first-child{ grid-column:1 / span 4; }
.split-4-8 > :last-child{ grid-column:5 / span 8; }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- type ---------- */
.d1, main h1{ font-size:88px; line-height:.98; font-weight:600; letter-spacing:-0.035em; }
.d2{ font-size:48px; line-height:1.04; font-weight:600; letter-spacing:-0.035em; }
.d3{ font-size:28px; line-height:1.1; font-weight:600; letter-spacing:-0.03em; }
.h4{ font-size:19px; line-height:1.3; font-weight:600; letter-spacing:-0.02em; }
.lead{ font-size:21px; line-height:1.45; color:var(--muted); letter-spacing:-0.01em; max-width:40ch; }
.lead.ink{ color:var(--ink); }
.muted{ color:var(--muted); }
.mono{ font-family:var(--mono); font-size:13px; letter-spacing:0; color:var(--muted); }
.prose{ max-width:64ch; }
.prose h2{ font-size:24px; line-height:1.2; font-weight:600; letter-spacing:-0.02em; margin:48px 0 12px; }
.prose p, .prose li{ color:var(--ink); }
.prose p + p{ margin-top:14px; }
.prose ul{ margin-top:12px; padding-left:20px; list-style:disc; }
.prose li + li{ margin-top:6px; }
.prose a, a.u{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

/* word split for the hero stagger: <h1 data-split> (site.js wraps words) */
[data-split] .w{ display:inline-block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; vertical-align:top; }
[data-split] .w > span{ display:inline-block; }

/* ---------- logo ---------- */
.logo{ display:inline-flex; align-items:center; color:var(--ink); }
.logo .sw-lockup{ height:24px; width:auto; display:block; }

/* ---------- buttons and links ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 22px; border-radius:999px; font-size:16px; font-weight:500; letter-spacing:-0.01em; white-space:nowrap; transition:background-color .4s var(--ease), color .4s var(--ease); }
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ghost{ border:1px solid var(--line); }
.btn-ghost:hover{ background:var(--soft); }
.btn-sm{ height:40px; padding:0 18px; font-size:15px; }
.arrow{ width:16px; height:16px; flex:none; transition:transform .5s var(--ease); }
.btn:hover .arrow, .link:hover .arrow, .next:hover .arrow{ transform:translateX(4px); }
.link{ display:inline-flex; align-items:center; gap:8px; height:48px; font-size:16px; font-weight:500; letter-spacing:-0.01em; }
.link span{ text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1px; text-underline-offset:4px; transition:text-decoration-color .3s var(--ease); }
.link:hover span{ text-decoration-color:currentColor; }
.cta-row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:36px; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); }
.nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); opacity:0; transition:opacity .5s var(--ease); }
.nav.scrolled::after, .nav.open::after{ opacity:1; }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-links{ display:flex; align-items:center; gap:36px; font-size:15px; }
.nav-links a:not(.btn){ color:var(--muted); transition:color .3s var(--ease); }
.nav-links a:not(.btn):hover, .nav-links a[aria-current]:not(.btn){ color:var(--ink); }
.burger{ display:none; width:44px; height:44px; margin-right:-10px; position:relative; }
.burger span{ position:absolute; left:12px; right:12px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease); }
.burger span:first-child{ top:17px; } .burger span:last-child{ top:25px; }
.nav.open .burger span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav.open .burger span:last-child{ transform:translateY(-4px) rotate(-45deg); }
.menu{ border-top:1px solid var(--line); background:#fff; }
.menu nav{ display:flex; flex-direction:column; padding-top:12px; padding-bottom:28px; }
.menu a:not(.btn){ font-size:28px; font-weight:600; letter-spacing:-0.03em; padding:10px 0; }
.menu .btn{ margin-top:20px; align-self:flex-start; }

/* ---------- trays ---------- */
.tray{ position:relative; display:block; background:var(--soft); border-radius:var(--radius); overflow:hidden; aspect-ratio:var(--ar, 4 / 5); isolation:isolate; }
.tray.wide{ --ar:2400 / 1340; }
.tray.tall{ --ar:1600 / 1987; }
.tray.sq{ --ar:1 / 1; }
.tray.r169{ --ar:16 / 9; }
.media{ position:absolute; inset:0; display:block; }
.media picture{ display:contents; }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
[data-parallax] .media img{ transform:translate3d(0,var(--py,0%),0) scale(1.06); transition:none; }
/* real screenshots: natural ratio on the soft ground, hairline, inner radius */
.tray.shot{ aspect-ratio:auto; padding:56px; display:flex; justify-content:center; align-items:center; gap:24px; }
.tray.shot img{ width:100%; border-radius:10px; outline:1px solid var(--line); outline-offset:-1px; }
.tray.shot.phones img{ width:auto; max-width:calc(50% - 12px); max-height:640px; border-radius:22px; }
.tray.shot.phone img{ width:auto; max-height:680px; border-radius:22px; }
.cap{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-top:18px; font-size:16px; }
.cap .name{ font-size:20px; font-weight:600; letter-spacing:-0.02em; line-height:1.3; }
.cap .meta, .cap .line{ color:var(--muted); }

/* ---------- work gallery ---------- */
.work-grid{ row-gap:96px; }
.item{ display:block; }
.item.half{ grid-column:span 6; }
.item.full{ grid-column:1 / -1; }
.item.feature{ grid-column:1 / span 7; }
.item-text{ grid-column:9 / span 4; align-self:end; padding-bottom:8px; }
.item .row{ display:flex; align-items:baseline; gap:14px; }
.item .line{ margin-top:4px; font-size:17px; max-width:44ch; }
.go{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; flex:none; transition:opacity .5s var(--ease), transform .5s var(--ease), background-color .4s var(--ease); }
.go svg{ width:14px; height:14px; }
.item .go{ opacity:0; transform:translateX(-8px); }
.item:hover .media img, .next:hover .media img{ transform:scale(1.03); }
.item:hover .go, .item:focus-visible .go{ opacity:1; transform:none; }

/* ---------- case template ---------- */
.case-head{ padding-top:112px; }
.case-head .mono{ display:block; margin-bottom:24px; }
.case-head .lead{ margin-top:28px; }
.case-hero{ margin-top:72px; }
.facts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); border-top:1px solid var(--line); margin-top:40px; padding-top:24px; }
.facts dt{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-bottom:6px; }
.facts dd{ font-size:16px; line-height:1.45; }
.beats{ display:grid; row-gap:120px; }
.beat{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); align-items:center; }
.beat-text{ grid-column:1 / span 4; }
.beat > .tray{ grid-column:6 / span 7; }
.beat.rev .beat-text{ grid-column:9 / span 4; order:2; }
.beat.rev > .tray{ grid-column:1 / span 7; order:1; }
.beat-text .mono{ display:block; margin-bottom:16px; }
.beat-text p{ margin-top:12px; color:var(--muted); max-width:34ch; }
.res-list{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px var(--gap); margin-top:56px; }
.res{ border-top:1px solid var(--line); padding-top:20px; }
.res .n{ display:block; font-size:56px; line-height:1; font-weight:600; letter-spacing:-0.04em; }
.res .l{ display:block; margin-top:12px; color:var(--muted); max-width:28ch; }
.caveat{ margin-top:40px; font-size:15px; color:var(--muted); max-width:70ch; }
.next{ display:block; }
.next .mono{ display:block; margin-bottom:12px; }
.next-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; }
.next:hover .go{ background:var(--accent); border-color:var(--accent); }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); margin-top:var(--sec); }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:12px 28px; flex-wrap:wrap; min-height:88px; padding-top:24px; padding-bottom:24px; font-size:15px; color:var(--muted); }
.foot nav{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.foot a{ transition:color .3s var(--ease); }
.foot a:hover{ color:var(--ink); }
.foot .social{ gap:8px 18px; }

/* ---------- motion (html.motion only; html.still shows everything) ---------- */
.motion [data-split] .w > span{ transform:translateY(105%); transition:transform 1.1s var(--ease); transition-delay:calc(var(--i) * 70ms + 80ms); }
.motion .loaded [data-split] .w > span{ transform:none; }
.motion .rv{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d, 0ms); }
.motion .rv.in{ opacity:1; transform:none; }
.motion .tray.reveal{ clip-path:inset(100% 0 0 0 round var(--radius)); transition:clip-path 1.3s var(--ease); transition-delay:var(--d, 0ms); }
.motion .tray.reveal > .media, .motion .tray.shot.reveal > img{ transform:scale(1.06); transition:transform 1.6s var(--ease); transition-delay:var(--d, 0ms); }
.motion .tray.reveal.in{ clip-path:inset(0 0 0 0 round var(--radius)); }
.motion .tray.reveal.in > .media, .motion .tray.shot.reveal.in > img{ transform:none; }
.sw-loader.is-gone{ display:none!important; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration:0s !important; transition-delay:0s !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .d1, main h1{ font-size:68px; }
  .res .n{ font-size:44px; }
}
@media (max-width:820px){
  :root{ --gutter:16px; --gap:16px; --sec:104px; }
  body{ font-size:16px; }
  .nav-in{ height:64px; }
  .nav-links{ display:none; }
  .burger{ display:block; }
  .logo .sw-lockup{ height:22px; }
  .d1, main h1{ font-size:44px; line-height:1.02; }
  .d2{ font-size:34px; }
  .d3{ font-size:24px; }
  .lead{ font-size:18px; }
  .cta-row{ margin-top:28px; gap:20px; }
  .tray{ --radius:16px; }
  .tray.swap{ --ar:1600 / 1987; }
  .tray.shot{ padding:20px; gap:12px; }
  .tray.shot.phones img{ max-width:calc(50% - 6px); border-radius:14px; }
  .tray.shot.phone img{ max-height:520px; border-radius:16px; }
  .sec-head{ margin-bottom:32px; }
  .split-4-8 > :first-child, .split-4-8 > :last-child{ grid-column:1 / -1; }
  .split-4-8 > :last-child{ margin-top:20px; }
  .work-grid{ row-gap:56px; }
  .item.half, .item.full, .item.feature, .item-text{ grid-column:1 / -1; }
  .item .go{ opacity:1; transform:none; width:32px; height:32px; }
  .case-head{ padding-top:56px; }
  .case-head .lead{ margin-top:20px; }
  .case-hero{ margin-top:40px; }
  .facts{ grid-template-columns:1fr 1fr; row-gap:20px; }
  .beats{ row-gap:72px; }
  .beat-text, .beat > .tray, .beat.rev .beat-text, .beat.rev > .tray{ grid-column:1 / -1; order:0; }
  .beat > .tray{ margin-top:24px; }
  .res-list{ grid-template-columns:1fr; gap:28px; margin-top:32px; }
  .foot-in{ flex-direction:column; align-items:flex-start; padding-top:28px; padding-bottom:40px; font-size:16px; }
}