@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/pjs-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/pjs-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/pjs-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/pjs-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/pjs-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root{
    color-scheme:light;
    --ground:#FBF9F6; --surface:#FFF; --sunk:#F2EEE8; --ink:#12100F;
    --ink-70:rgba(18,16,15,.70); --ink-64:rgba(18,16,15,.64);
    --rule:rgba(18,16,15,.10); --rule-strong:rgba(18,16,15,.45);
    --accent:#B93A22; --accent-deep:#8F2A16; --on-accent:#FFF8F4;
    --fd:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; --fb:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  }
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{font-synthesis:none;background:var(--ground);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.5;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
  .skip{position:absolute;left:-9999px;background:var(--ink);color:var(--ground);padding:12px 20px;border-radius:8px;z-index:100}
  .skip:focus{left:16px;top:16px}
  :where(a,button,input):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .eyebrow{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

  .btn-lg{min-height:66px;padding:0 16px 0 40px;font-size:18px;gap:22px}
  .btn-lg .arw{width:42px;height:42px;font-size:17px}
  .btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border:none;border-radius:999px;font-family:var(--fb);font-weight:600;font-size:15px;cursor:pointer;transition:background .2s,transform .2s}
  .btn-dark{background:var(--ink);color:var(--ground)}
  .btn-dark:hover{background:var(--accent);transform:translateY(-1px)}
  .btn-dark .arw{width:24px;height:24px;border-radius:50%;background:var(--ground);color:var(--ink);display:grid;place-items:center;font-size:13px}
  .btn-rust{background:var(--accent);color:var(--on-accent)}
  .btn-rust:hover{background:var(--accent-deep);transform:translateY(-1px)}

  header{background:var(--ground);position:sticky;top:0;z-index:40}
  nav{max-width:1360px;margin:0 auto;padding:11px 28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
  .nav-l{display:flex;align-items:center;gap:8px}
  .nav-r{display:flex;align-items:center;gap:10px;justify-self:end}
  .burger{width:44px;height:44px;display:grid;place-items:center;background:none;border:none;cursor:pointer;border-radius:10px}
  .burger span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px;position:relative}
  .burger span::before,.burger span::after{content:'';position:absolute;left:0;height:2.5px;background:var(--ink);border-radius:2px}
  .burger span::before{top:-7px;width:16px}
  .burger span::after{top:7px;width:11px}
  .btn-ghost{background:var(--sunk);color:var(--ink);min-height:44px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;white-space:nowrap;font-weight:600;font-size:15px;transition:background .2s}
  .btn-ghost:hover{background:#E7E1D8}
  .btn-solid{background:var(--ink);color:var(--ground);min-height:44px;padding:0 26px;border-radius:999px;display:inline-flex;align-items:center;white-space:nowrap;font-weight:600;font-size:15px;transition:background .2s,transform .2s}
  .btn-solid:hover{background:var(--accent);transform:translateY(-1px)}
  .brand{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--fd);font-weight:800;font-size:32px;letter-spacing:-.03em;line-height:1}
  .brand img{width:33px;height:33px;object-fit:contain}
  .nav-links{position:absolute;top:60px;left:28px;display:none;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:8px;min-width:210px;box-shadow:0 20px 50px -26px rgba(18,16,15,.34)}
  .nav-links.open{display:flex}
  .nav-links a{display:flex;align-items:center;min-height:44px;padding-inline:14px;border-radius:9px;font-size:15px;font-weight:500;color:var(--ink-70)}
  .nav-links a:hover{color:var(--ink);background:var(--sunk)}
  .nav-cta{min-height:44px;padding:0 20px;font-size:14px}

  /* Line-break control, applied once rather than per selector. balance
     evens the lines out across a short block, which fixes both orphans and
     lines that end on a weak word like "in" or "of" -- pretty only fixes
     the orphan. Every text block on this page is two or three lines, which
     is where balance is allowed to work. */
  h1,h2,h3,h4,.hero-sub,.head p,.copy p,.ph p,.hero-note,.style span,.foot p{
    text-wrap:balance}
  p,li{text-wrap:pretty}
  /* hero */
  .hero{padding-block:76px 0;text-align:center}
  .trust{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;gap:18px}
  .laurel{width:44px;height:85px;flex:none;background:currentColor;color:var(--ink);opacity:.5;
    -webkit-mask-image:url(/img/laurel.png?v=20260821143401);mask-image:url(/img/laurel.png?v=20260821143401);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:contain;mask-size:contain}
  .laurel.flip{transform:scaleX(-1)}
  .trust-mid{display:grid;justify-items:center;gap:5px}
  .stars{display:flex;gap:3px}
  .stars svg{width:19px;height:19px;fill:var(--accent);display:block}
  .trust-t{font-size:14px;color:var(--ink-70);line-height:1.35}
  .trust-t b{display:block;font-weight:800;font-size:16px;color:var(--ink);letter-spacing:-.01em}
  h1{text-wrap:balance;font-family:var(--fd);font-weight:800;font-size:clamp(40px,6.6vw,78px);line-height:1.04;letter-spacing:-.035em;max-width:14ch;margin:22px auto 0}
  .hero-sub{margin:22px auto 0;font-size:19px;line-height:1.6;color:var(--ink-70);max-width:52ch}
  .hero-cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .hero-note{margin-top:14px;font-size:13.5px;color:var(--ink-64)}

  /* marquee */
  /* The rows sit on a shallow cylinder: tiles turn away from you toward the
     edges, so the band reads as a drum rather than a flat conveyor. The
     rotation is applied per tile in JS from its own x, no layout reads. */
  .mqwrap{margin-top:58px;perspective:1500px;perspective-origin:50% 50%}
  .mq{margin-top:0;position:relative;overflow:hidden;transform-style:preserve-3d;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .mq+.mq{margin-top:14px}
  .mq-track{display:flex;gap:14px;width:max-content;animation:slide 46s linear infinite;transform-style:preserve-3d;will-change:transform}
  .mq-track.js{animation:none}
  .tile{transform-style:preserve-3d;will-change:transform;backface-visibility:hidden}
  .mq.rev .mq-track{animation-direction:reverse;animation-duration:55s}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.mq-track{animation:none}.mq{overflow-x:auto}}
  .tile{width:188px;flex:none;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--sunk)}
  .tile img{width:100%;height:100%;object-fit:cover}

  /* sections */
  .sec{padding-block:84px}
  .sec.sunk{background:var(--sunk);border-block:1px solid var(--rule)}
  #styles{padding-block:40px}
  #styles .head{margin-bottom:28px}
  .head{text-align:center;max-width:56ch;margin:0 auto 56px}
  /* balance stops a heading dropping one word onto its own line, and pretty
     stops a paragraph orphaning its last word. The negative right margin
     absorbs the trailing letter-space that tracking adds after the final
     glyph, which was showing as a gap before the full stop. */
  .head h2{font-family:var(--fd);font-weight:800;font-size:clamp(30px,4vw,46px);
    line-height:1.08;letter-spacing:-.03em;margin-top:12px;
    text-wrap:balance;margin-right:-.03em}
  .head p{margin-top:12px;color:var(--ink-70);font-size:17px;line-height:1.6;
    text-wrap:pretty;max-width:52ch;margin-inline:auto}

  /* timeline */
  /* Steps read as an editorial index: a hairline per row, an oversized
     numeral set against the heading baseline, copy beneath, image to the
     right. No centre rule and no left/right alternation -- that pattern is
     everywhere, and it was what made this section look borrowed. */
  .tl{max-width:1000px;margin:0 auto}
  .row{display:grid;grid-template-columns:auto 1fr 300px;align-items:start;
       gap:0 32px;padding-block:38px;border-top:1px solid var(--rule)}
  .row:first-child{border-top:none;padding-top:6px}
  .num{font-family:var(--fd);font-weight:800;font-size:60px;line-height:.82;
       letter-spacing:-.05em;color:var(--ink);opacity:.13;width:86px;
       font-variant-numeric:tabular-nums}
  .copy h3{font-family:var(--fd);font-weight:800;font-size:29px;line-height:1.05;
       letter-spacing:-.025em;margin-bottom:11px;text-wrap:balance}
  .copy p{font-size:16px;color:var(--ink-70);line-height:1.6;max-width:44ch;text-wrap:pretty}
  .fig{width:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
       background:var(--sunk);border:1px solid var(--rule)}
  .fig img{width:100%;height:100%;object-fit:cover}
  /* styles rail */
  .railwrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .rail{display:flex;gap:12px;width:max-content;padding:2px 0 0;animation:slide 54s linear infinite}
  @media(prefers-reduced-motion:reduce){.rail{animation:none}.railwrap{overflow-x:auto}}
  .style{flex:none;width:150px}
  .style .sh{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--rule)}
  .style img{width:100%;height:100%;object-fit:cover}
  .style span{display:block;margin-top:9px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-70);text-align:center}

  /* on the go */
  .phones{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:900px;margin:0 auto}
  .ph{display:grid;justify-items:center;gap:16px}
  .screen{width:100%;max-width:212px;aspect-ratio:9/19;background:var(--ink);border-radius:32px;padding:7px;box-shadow:0 26px 54px -28px rgba(18,16,15,.5)}
  .screen-in{width:100%;height:100%;border-radius:26px;overflow:hidden;background:var(--sunk);position:relative}
  .screen-in>img{width:100%;height:100%;object-fit:cover}
  /* Discover is the one screen built rather than captured, so it has to
     carry the same chrome as the two screenshots beside it: cream ground,
     a Bodoni title, and content that starts below the header instead of
     running up under the Dynamic Island. */
  .browse{position:absolute;inset:0;display:flex;flex-direction:column;background:#F4EFE7}
  .browse-top{flex:none;padding:26px 11px 0;text-align:center}
  .browse-top h4{font-family:'Bodoni Moda',Georgia,serif;font-weight:500;font-size:14px;
    letter-spacing:.02em;color:#1B1613;margin-bottom:8px}
  .chips{display:flex;gap:4px;justify-content:center;padding:0 6px 9px}
  .chips span{font-size:6px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    white-space:nowrap;padding:3px 7px;border-radius:99px;
    background:rgba(27,22,19,.07);color:rgba(27,22,19,.62)}
  .chips span.on{background:var(--accent);color:#FFF6F2}
  .get-cta{display:grid;justify-items:center;margin-top:46px}
  .feed{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:4px;
    padding:0 6px 6px;overflow:hidden}
  .feed img{width:100%;height:100%;object-fit:cover;border-radius:6px}
  .ph h3{font-family:var(--fd);font-weight:800;font-size:24px;letter-spacing:-.02em}
  .ph p{font-size:14px;color:var(--ink-70);line-height:1.5;text-align:center;max-width:26ch}
  .ph-t{display:grid;justify-items:center;gap:5px}
  .feats{display:grid;gap:22px}
  .feat{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
  .fi{width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--ground);display:grid;place-items:center;font-size:19px}
  .feat h3{font-family:var(--fd);font-weight:800;font-size:20px;line-height:1.25;letter-spacing:-.02em;margin-bottom:5px}
  .feat p{font-size:15px;color:var(--ink-70);line-height:1.55;max-width:44ch}

  /* gallery */
  /* Row-dense masonry on a fine row grid: each tile spans a whole number of
     14px rows, so heights vary but every column still lines up. */
  #gallery .wrap{max-width:1520px}
  /* The tall/standard mix only packs flush at five columns. Below that the
     tiles go uniform and flow row by row, so a narrow screen gets an
     ordinary photo grid with a short last row rather than a column that
     stops 300px above its neighbours. */
  @media(max-width:1300px){
    .grid{grid-template-columns:repeat(4,1fr);grid-auto-flow:row}
    .grid a,.grid a.tall{grid-row:span 13}
  }
  @media(max-width:1040px){.grid{grid-template-columns:repeat(3,1fr)}}
  #gallery .head{max-width:60ch}
  .grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:14px;
        grid-auto-flow:row dense;gap:14px}
  /* Two heights only. Four sizes read as random; two read as rhythm.
     span N resolves to 28N-14 px, because the row gap counts inside a span.
     Every column is one tall + one standard = 1050px, so all four end flush. */
  .grid a{border-radius:14px;overflow:hidden;background:var(--sunk);display:block;grid-row:span 13}
  .grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
  .grid a:hover img{transform:scale(1.05)}
  .grid a.tall{grid-row:span 25}

  footer{border-top:1px solid var(--rule);padding-block:30px}
  .foot{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
  .foot-brand{display:inline-flex;align-items:baseline;gap:8px;line-height:1;font-family:var(--fd);font-weight:800;font-size:19px;letter-spacing:-.02em}
  .foot-brand img{width:25px;height:25px;object-fit:contain}
  .foot-links{display:flex;gap:8px;flex-wrap:wrap}
  .foot-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;font-size:14px;color:var(--ink-70)}
  .foot-links a:hover{color:var(--ink)}
  .foot-legal{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-64);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

  @media(max-width:900px){
    .phones{grid-template-columns:1fr;gap:40px;max-width:300px}
    .grid{grid-template-columns:repeat(2,1fr)}
    .grid a,.grid a.tall{grid-row:span 13}
  }
  @media(max-width:880px){
    .hero{padding-block:40px 0}
    .sec{padding-block:56px}
    .row{grid-template-columns:52px 1fr;gap:0 14px;padding-block:26px}
    .num{grid-column:1;grid-row:1;font-size:40px;width:auto}
    .row .copy{grid-column:2;grid-row:1}
    .row .fig{grid-column:1/-1;grid-row:2;margin-top:16px;aspect-ratio:3/2}
    .tile{width:140px}
  }
  @media(max-width:600px){
    nav{padding-inline:16px;gap:8px}
    .nav-r .btn-ghost{display:none}
    .brand{font-size:27px}
    .brand img{width:28px;height:28px}
    .nav-links{left:16px;right:16px;min-width:0}
  }