@font-face{
  font-family:'Familjen Grotesk';
  src:url('font/familjengrotesk.woff2') format('woff2-variations');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

/* ---------------------------------------------------------------
   TYPE LADDER, written before the markup. Six steps, this page only.
   13  rule labels, queue column heads, week stamps, window counts
   16  body, every queue row, every list item
   20  h3
   26  h2 and the hero lead (same size, separated by weight)
   34  the position number on the "you" row, the big call action
   44  h1
   H1 / body = 2.75x.  Weights: 400 and 600, nothing else.
   PALETTE: muted complementary. A cold blue-grey ground the colour
   of dusk, one warm amber as its complement, spent only on the
   action that makes the phone ring. One ink for all text.
   VALUE: light throughout, panel tone under the alternating bands,
   the single darkest point is the closing band, the lightest the paper.
   ---------------------------------------------------------------- */

:root{
  --paper:#E8EBEF;
  --panel:#D8DEE6;
  --ink:#151D28;
  --accent:#A2560E;

  --s0:13px;
  --s1:16px;
  --s2:20px;
  --s3:26px;
  --s4:34px;
  --s5:44px;

  --gut:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:var(--s1);
  font-weight:400;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;width:100%;height:auto}
figure{margin:0}
h1,h2,h3{margin:0;font-weight:600;line-height:1.14;letter-spacing:-0.015em}
p{margin:0 0 1em}
ol,ul,dl,dd,dt{margin:0;padding:0}
li{list-style:none}
a{color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--ink);color:var(--paper);
  padding:12px 20px;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

a:focus-visible,button:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

/* ---------- mockup banner ---------- */
.mockbar{
  background:var(--ink);color:var(--paper);
  font-size:var(--s0);font-weight:600;
  letter-spacing:.055em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;
  padding:9px var(--gut);
  line-height:1.4;
}

/* ---------- masthead ---------- */
.mast{border-bottom:3px solid var(--ink);background:var(--paper)}
.mast-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;
  padding-top:20px;padding-bottom:20px;
}
.mark-name{
  display:block;font-size:var(--s2);font-weight:600;
  text-decoration:none;letter-spacing:-0.02em;line-height:1.2;
}
.mark-sub{
  margin:2px 0 0;font-size:var(--s0);font-weight:400;
  text-transform:uppercase;letter-spacing:.085em;line-height:1.4;
}
.nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-left:auto}
.nav a{
  font-size:var(--s0);font-weight:600;text-transform:uppercase;
  letter-spacing:.075em;text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--ink)}

.btn{
  display:inline-block;background:var(--accent);color:#fff;
  font-weight:600;text-decoration:none;
  padding:13px 22px;font-size:var(--s1);line-height:1.2;
  border:0;min-height:44px;
}
.btn:hover{background:#8C4A0C}
.btn-big{font-size:var(--s3);padding:14px 26px;letter-spacing:-0.02em}

/* ---------- the cut rule, this page's one motif ---------- */
.rule{
  display:flex;align-items:center;gap:14px;
  margin:0 0 26px;
}
.rule::before{content:"";width:44px;height:3px;background:var(--ink);flex:0 0 auto}
.rule::after{content:"";flex:1 1 auto;height:3px;background:var(--ink)}
.rule span{
  font-size:var(--s0);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;line-height:1;white-space:nowrap;
}
.rule-inv::before,.rule-inv::after{background:var(--paper)}

/* ---------- hero ---------- */
.hero{padding:44px 0 48px;border-bottom:3px solid var(--ink)}
.hero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:stretch}
h1{font-size:clamp(30px,4.7vw,var(--s5));max-width:17ch}
.lead{font-size:var(--s3);line-height:1.42;margin-top:24px;max-width:41ch}
.facts{
  display:grid;grid-template-columns:.86fr .86fr 1.28fr;gap:0;
  border-top:3px solid var(--ink);margin-top:30px;
}
.facts > div{padding:15px 20px 4px 0}
.facts dt{
  font-size:var(--s0);font-weight:600;text-transform:uppercase;
  letter-spacing:.085em;line-height:1.35;
}
.facts dd{margin:5px 0 0;font-size:var(--s1);font-weight:600;line-height:1.35}
/* The hero photograph fills the column it sits in, so the split never
   opens a hole under it. width and height are declared together. */
.hero-fig{display:flex}
.hero-fig img{width:100%;height:100%;min-height:440px;object-fit:cover;object-position:52% 52%}

/* ---------- bands ---------- */
.band{padding:48px 0 52px;border-bottom:3px solid var(--ink)}
.band-alt{background:var(--panel)}
.band h2,.close h2{font-size:var(--s3);max-width:28ch;line-height:1.2}
.say{max-width:64ch;margin-top:18px}

/* ---------- the queue, the star ---------- */
.queue{margin-top:32px}
.qhead{
  border-top:3px solid var(--ink);
  padding-top:10px;margin-top:26px;
  display:flex;flex-wrap:wrap;gap:2px 18px;align-items:baseline;
  font-size:var(--s0);text-transform:uppercase;letter-spacing:.085em;
  line-height:1.4;
}
.qhead:first-of-type{margin-top:0}
.qhead-x{font-weight:400;letter-spacing:.055em}
.q{
  margin-top:6px;
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:56px;row-gap:0;
}
.q li{
  display:grid;grid-template-columns:44px 1fr 116px 66px;
  gap:0 10px;
  padding:7px 0;
  border-bottom:1px solid rgba(21,29,40,.22);
  line-height:1.35;
}
.q .n{font-weight:600}
.q .w{font-weight:600}
.q .k{
  font-size:var(--s0);text-transform:uppercase;letter-spacing:.07em;
  text-align:right;align-self:center;
}

.you{
  display:grid;grid-template-columns:56px 1fr;gap:0 12px;
  border-top:3px solid var(--ink);
  margin-top:26px;padding-top:20px;
}
.you-n{font-size:var(--s4);font-weight:600;line-height:1;margin:0}
.you-body h3{font-size:var(--s2);margin-bottom:12px}
.you-body p{max-width:56ch}
.you-body p:last-child{margin-bottom:0;margin-top:22px}

/* ---------- the four windows ---------- */
.wins{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:44px;row-gap:0;margin-top:32px;
}
.win{
  border-top:3px solid var(--ink);
  padding:14px 0 26px;
}
.win h3{font-size:var(--s2)}
.win-n{
  margin:5px 0 10px;font-size:var(--s0);font-weight:600;
  text-transform:uppercase;letter-spacing:.085em;
}
.win p:not(.win-n){max-width:46ch;margin-bottom:0}
/* The one image that carries a section on its own, edge to edge. */
.wins-fig{
  grid-column:1 / -1;
  border-top:3px solid var(--ink);padding-top:22px;
  width:100vw;margin-left:calc(50% - 50vw);
}
.wins-fig img{aspect-ratio:3.2/1;object-fit:cover;object-position:50% 58%}
/* the full-bleed frame closes the section, so it meets the rule with no gap */
#windows{padding-bottom:0}

/* ---------- moving up ---------- */
.cols{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;margin-top:32px;align-items:start}
.moves li{border-top:3px solid var(--ink);padding:13px 0 20px}
.moves h3{font-size:var(--s2);margin-bottom:8px}
.moves p{margin:0;max-width:46ch}
.moves-fig img{aspect-ratio:4/5;object-fit:cover;object-position:56% 50%}
.note{border-top:3px solid var(--ink);margin-top:10px;padding-top:14px}
.note h3{font-size:var(--s2);margin-bottom:6px}
.note p{max-width:64ch;margin:0}

/* ---------- price ---------- */
.price{margin-top:26px;max-width:860px}
.price li{
  display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;
  align-items:baseline;
  border-top:3px solid var(--ink);padding:11px 0;
}
.p-item{font-size:var(--s2);font-weight:600;letter-spacing:-0.015em}
.p-fig{font-size:var(--s3);font-weight:600;letter-spacing:-0.02em}

/* ---------- closing band, the darkest point ---------- */
.close{background:var(--ink);color:var(--paper);padding:50px 0 54px}
.close-top{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:start}
.close-say{max-width:44ch;margin-top:18px}
.close-top > div > p:last-child{margin-bottom:0;margin-top:8px}
.close-need{border-top:3px solid var(--paper);padding-top:16px}
.close-need h3{font-size:var(--s2);margin-bottom:12px}
.close-need dl > div{padding:9px 0;border-bottom:1px solid rgba(232,235,239,.28)}
.close-need dt{font-weight:600;line-height:1.35}
.close-need dd{margin:1px 0 0;line-height:1.45}
.close-reg{font-size:var(--s0);line-height:1.6;margin:16px 0 0;max-width:52ch}
.close-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:3px solid var(--paper);margin-top:38px;
}
.close-facts > div{padding:15px 24px 0 0}
.close-facts dt{
  font-size:var(--s0);font-weight:600;text-transform:uppercase;
  letter-spacing:.085em;
}
.close-facts dd{margin:5px 0 0;line-height:1.45}

/* ---------- footer ---------- */
.foot{background:var(--panel);padding:32px 0 38px}
.foot p{max-width:78ch}
.foot-name{font-size:var(--s2);font-weight:600;margin-bottom:6px;letter-spacing:-0.015em}
.foot-dis{font-size:var(--s0);line-height:1.6;margin-top:16px;margin-bottom:0}

/* ---------- reveal, only once the script has confirmed it can undo it ---------- */
html.rvon .rv{opacity:0;transform:translateY(12px)}
html.rvon .rv.in{opacity:1;transform:none;transition:opacity .75s ease,transform .75s ease}

/* ---------- narrower ---------- */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:38px}
  h1{max-width:20ch}
  .lead{max-width:60ch}
  .cols{grid-template-columns:1fr;gap:30px}
  .moves-fig{max-width:560px}
  .moves-fig img{aspect-ratio:3/2}
  .close-top{grid-template-columns:1fr;gap:34px}
  .close-say{max-width:58ch}
  .hero-fig img{min-height:340px;aspect-ratio:16/9}
}
@media (max-width:900px){
  .q{grid-template-columns:1fr;column-gap:0}
}
@media (max-width:820px){
  .wins{grid-template-columns:1fr}
  .wins-fig img{aspect-ratio:2/1}
  .nav{margin-left:0;width:100%;order:3}
  .mast-in{gap:14px 24px}
}
@media (max-width:680px){
  :root{--gut:20px;--s3:23px;--s4:30px}
  .q li{
    grid-template-columns:44px 1fr;
    gap:2px 12px;
    padding:11px 0;
  }
  .q .w{grid-column:2;font-weight:400}
  .q .k{grid-column:2;text-align:left}
  .you{grid-template-columns:44px 1fr}
  .facts,.close-facts{grid-template-columns:1fr}
  .facts > div,.close-facts > div{
    padding:13px 0;border-bottom:1px solid rgba(21,29,40,.22);
  }
  .close-facts > div{border-bottom-color:rgba(232,235,239,.28)}
  .facts > div:last-child,.close-facts > div:last-child{border-bottom:0}
  .btn-big{padding:14px 22px}
  .price li{display:grid;grid-template-columns:1fr auto;gap:0 18px;align-items:baseline}
  .hero{padding:38px 0 44px}
  .band{padding:44px 0 48px}
  .close{padding:48px 0 52px}
  .mockbar{font-size:11px;letter-spacing:.04em}
}

@media (prefers-reduced-motion:reduce){
  html.rvon .rv{opacity:1;transform:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}