:root{
  --ink:#1A1815; --ink-deep:#141210; --bone:#F5F1E8;
  --soft:rgba(245,241,232,0.68); --faint:rgba(245,241,232,0.44); --line:rgba(245,241,232,0.15);
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;
  --gutter:clamp(20px,5vw,64px);
  --max:1120px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:400;
     line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
picture{display:contents}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.mark{height:20px;width:auto;fill:var(--bone);display:block}
.label{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint)}
.rule{border-top:1px solid var(--line)}

/* ---- the coming-soon header ------------------------------------------- */
#top{position:sticky;top:0;z-index:50;background:rgba(20,18,16,0.92);
     -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);
     border-bottom:1px solid var(--line)}
#top .bar{max-width:var(--max);margin:0 auto;padding:13px var(--gutter);
          display:flex;align-items:center;gap:18px}
#top .notice{font-family:var(--mono);font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;
             color:var(--faint);white-space:nowrap}
#top .notice b{color:var(--bone);font-weight:400}
#top .spacer{flex:1 1 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--bone);color:var(--ink);
     font-family:var(--sans);font-weight:500;letter-spacing:-0.005em;line-height:1;
     border-radius:7px;white-space:nowrap;transition:transform .15s ease,background .15s ease}
.btn:hover{background:#fff;transform:translateY(-1px)}
.btn-sm{font-size:13.5px;padding:11px 18px}
.btn-lg{font-size:17px;padding:17px 32px}
@media (max-width:720px){
  #top .bar{gap:12px;padding:9px var(--gutter)}
  #top .notice{font-size:10px;letter-spacing:0.14em;white-space:nowrap}
  .btn-sm{font-size:12.5px;padding:0 14px;min-height:40px}
}
/* the notice wrapped onto three lines on a phone and made the sticky header
   87px tall, so the second clause goes and the button carries the message */
@media (max-width:560px){ #top .notice b{display:none} }
@media (max-width:360px){ #top .notice{font-size:9.5px;letter-spacing:0.1em} }

/* ---- hero -------------------------------------------------------------- */
#hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden}
/* dvh so the hero does not resize as the mobile address bar hides and shows */
@supports (height:100dvh){ #hero{min-height:min(92dvh,880px)} }
#hero .shot{position:absolute;inset:0}
#hero .shot img{width:100%;height:100%;object-fit:cover;object-position:center center}
#hero .scrim{position:absolute;inset:0;background:linear-gradient(to bottom,
  rgba(20,18,16,0.62) 0%,rgba(20,18,16,0.14) 20%,rgba(20,18,16,0.10) 34%,
  rgba(20,18,16,0.60) 56%,rgba(20,18,16,0.90) 76%,rgba(26,24,21,1) 100%)}
#hero .inner{position:relative;width:100%;padding-top:16vh;padding-bottom:clamp(48px,8vw,96px)}
#hero .mark{height:clamp(30px,5vw,44px)}
#hero .tagline{margin-top:18px;font-family:var(--mono);font-size:clamp(11px,1.4vw,13px);
               letter-spacing:0.3em;text-transform:uppercase;color:rgba(245,241,232,0.88)}
h1{margin-top:clamp(22px,3.4vw,38px);font-weight:500;font-size:clamp(38px,7vw,68px);
   letter-spacing:-0.033em;line-height:1.04}
h1 em{font-family:var(--serif);font-weight:300;font-style:italic;letter-spacing:-0.01em}
#hero p.lede{margin-top:clamp(18px,2.4vw,26px);font-size:clamp(16px,1.9vw,18px);line-height:1.6;
             color:rgba(245,241,232,0.82);max-width:34em}
#hero .cta{margin-top:clamp(26px,3.4vw,34px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
#hero .scroll{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;
              color:var(--faint)}

/* ---- section scaffolding ---------------------------------------------- */
section.band{padding:clamp(64px,9vw,120px) 0}
section.band.tight{padding-top:clamp(40px,6vw,72px)}
.eyebrow{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line);
         margin-bottom:clamp(28px,4vw,44px)}
h2{font-weight:500;font-size:clamp(28px,4.6vw,46px);letter-spacing:-0.03em;line-height:1.08}
h3{font-weight:500;font-size:clamp(17px,2vw,19px);letter-spacing:-0.01em;line-height:1.3}
p.body{font-size:16px;line-height:1.68;color:var(--soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start}
.pull{font-family:var(--serif);font-weight:300;font-style:italic;
      font-size:clamp(20px,2.6vw,25px);line-height:1.38;color:var(--bone)}
.shotbox{position:relative;overflow:hidden;background:var(--ink-deep);border-radius:3px}
.shotbox img{width:100%;height:100%;object-fit:cover}
.shot-wide{aspect-ratio:16/9}
.shot-band{aspect-ratio:21/9}
figcaption{position:absolute;left:22px;bottom:18px;font-family:var(--mono);font-size:11.5px;
           letter-spacing:0.2em;text-transform:uppercase;color:rgba(245,241,232,0.92)}
.capfade{position:absolute;left:0;right:0;bottom:0;height:40%;
         background:linear-gradient(to bottom,rgba(20,18,16,0),rgba(20,18,16,0.72))}
@media (max-width:760px){ .two{grid-template-columns:1fr} }

/* ---- the collage ------------------------------------------------------- */
.collage{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:minmax(0,auto);gap:14px}
/* .a sets the row height; .b stretches to match it rather than carrying its
   own aspect ratio, which otherwise left a gap under the wider picture */
.collage .a{aspect-ratio:3/2}
.collage .b{min-height:0}
/* absolute so the picture contributes no height of its own and the cell
   collapses to whatever row height .a established */
.collage .b img{position:absolute;inset:0}
.collage .row{grid-column:1 / span 2;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.collage .row .shotbox{aspect-ratio:3/4}
@media (max-width:640px){
  .collage{grid-template-columns:1fr 1fr}
  .collage .a{grid-column:1 / span 2}
  /* .b would sit alone on a half-width row on a phone, so it is dropped there */
  .collage .b{display:none}
  .collage .row{grid-column:1 / span 2}
}

/* ---- specification ----------------------------------------------------- */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,56px)}
.spec{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.spec .n{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--faint)}
.spec .t{font-size:15.5px;line-height:1.45}
.spec .v{margin-top:3px;font-family:var(--mono);font-size:13px;letter-spacing:0.01em;line-height:1.45;color:var(--soft)}
@media (max-width:760px){ .specs{grid-template-columns:1fr} }

.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,40px)}
@media (max-width:860px){ .three{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .three{grid-template-columns:1fr} }
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.2vw,36px)}
@media (max-width:900px){ .four{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .four{grid-template-columns:1fr} }
.item .n{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint)}
.item h3{margin-top:11px}
.item p{margin-top:9px;font-size:15.5px;line-height:1.62;color:var(--soft)}

/* ---- steps ------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,40px) clamp(28px,5vw,56px)}
.steps .item{border-top:1px solid var(--line);padding-top:15px}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }

/* ---- contact ----------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,34px) clamp(28px,5vw,48px)}
.fact{border-top:1px solid var(--line);padding-top:13px}
.fact .k{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint)}
.fact .v{margin-top:9px;font-size:16.5px}
.fact .v a:hover{text-decoration:underline;text-underline-offset:3px}
.fact .s{margin-top:4px;font-family:var(--mono);font-size:13px;letter-spacing:0.04em;color:var(--faint)}
@media (max-width:860px){ .facts{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .facts{grid-template-columns:1fr} }

/* ---- closing ----------------------------------------------------------- */
#close{padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,112px);text-align:center}
#close .shotbox{aspect-ratio:3/2;max-width:900px;margin:0 auto}
#close .lockup{margin-top:clamp(36px,5vw,56px);display:flex;flex-direction:column;align-items:center}
#close .mark{height:clamp(34px,5vw,48px)}
#close .tagline{margin-top:20px;font-family:var(--mono);font-size:13px;letter-spacing:0.3em;
                text-transform:uppercase;color:rgba(245,241,232,0.88)}
#close .cta{margin-top:clamp(34px,5vw,48px);padding-top:26px;border-top:1px solid var(--line);
            display:inline-flex;flex-direction:column;align-items:center}
#close .site{margin-top:15px;font-family:var(--mono);font-size:13px;letter-spacing:0.22em;
             text-transform:uppercase;color:var(--faint)}

footer{border-top:1px solid var(--line);padding:26px 0 40px}
footer .bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
footer .spacer{flex:1 1 auto}

footer .label a{color:var(--soft);text-decoration:underline;text-underline-offset:3px}
footer .label a:hover{color:var(--bone)}

/* ---- cookie notice ------------------------------------------------------ */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:520px;margin:0 auto;
         display:flex;align-items:center;gap:16px;padding:12px 12px 12px 18px;
         background:rgba(20,18,16,0.96);border:1px solid var(--line);border-radius:10px;
         font-size:13.5px;color:var(--soft)}
.cookies[hidden]{display:none}
.cookies p{flex:1 1 auto}
.cookies a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.cookies .btn{border:0;cursor:pointer;min-height:40px}

/* ---- privacy page ------------------------------------------------------- */
.legal{padding:72px 0 96px}
.legal .wrap{max-width:760px}
.legal h1{font-weight:300;font-size:clamp(32px,5vw,44px);letter-spacing:-0.02em;line-height:1.1;margin:14px 0 8px}
.legal h2{font-weight:500;font-size:17px;margin:40px 0 10px}
.legal p,.legal li{color:var(--soft);font-size:15.5px;margin-bottom:12px}
.legal ul{padding-left:20px}
.legal a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}

/* ---- phone refinements -------------------------------------------------- */
/* anchors land below the sticky header rather than under it */
section[id]{scroll-margin-top:72px}
a{-webkit-tap-highlight-color:rgba(245,241,232,0.12)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
@media (max-width:720px){
  /* a 12px mono link is a small target, so pad it out to a thumb-sized one */
  #hero .scroll{padding:12px 2px;margin:-12px 0}
  #hero .cta{gap:10px 18px}
  .btn-lg{font-size:16px;padding:0 26px;min-height:52px}
  #hero .inner{padding-top:12vh}
  /* contact details are the tap targets on a phone */
  .fact .v a{display:inline-block;padding:6px 0}
  footer .bar{gap:12px}
}
@media (max-width:480px){
  h1{font-size:clamp(32px,8.6vw,40px)}
  .pull{font-size:19px}
  #close .shotbox{aspect-ratio:4/3}
}

/* an in-copy link: bone rather than browser blue, underlined so it still reads
   as a link against the body text */
.link{color:var(--bone);text-decoration:underline;text-decoration-color:rgba(245,241,232,0.4);
      text-underline-offset:3px;transition:text-decoration-color .15s ease}
.link:hover{text-decoration-color:var(--bone)}