@font-face{
  font-family:"Jost";
  src:url("font/jost.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#F3EFE6;
  --panel:#E6DFD0;
  --ink:#1F1B16;
  --muted:#5B5346;
  --accent:#8F2A19;
  --rule:#C6BCA8;

  --s1:12px; --s2:14px; --s3:17px; --s4:21px; --s5:32px; --s6:56px;
  --gut:clamp(20px,5vw,64px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
  font-size:var(--s3);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
h1,h2,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

a{color:inherit}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}
.contact a:focus-visible,.band-cap a:focus-visible,.hero a:focus-visible{
  outline-color:var(--paper);
}

.skip{
  position:absolute;
  left:-9999px;top:0;
  z-index:20;
  background:var(--ink);
  color:var(--paper);
  font-size:var(--s2);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 22px;
}
.skip:focus{left:0}

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

/* ---------- mockup banner ---------- */
.mockup{
  background:var(--ink);
  color:var(--paper);
  font-size:var(--s1);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  padding:11px 16px;
}

/* ---------- header ---------- */
.head{
  border-bottom:2px solid var(--ink);
  background:var(--paper);
}
.head-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:16px;
  padding-bottom:16px;
}
.mark{text-decoration:none;display:block;line-height:1.15}
.mark-n{
  display:block;
  font-size:var(--s4);
  font-weight:700;
  letter-spacing:.02em;
}
.mark-s{
  display:block;
  font-size:var(--s1);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:3px;
}
.head-r{display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap}
.tel{
  font-size:var(--s4);
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
}
.tel:hover{color:var(--accent)}
.head-lnk{
  font-size:var(--s2);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding:12px 0 10px;
}
.head-lnk:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate}
.hero-img{
  width:100%;
  height:clamp(400px,62vh,540px);
  object-fit:cover;
  object-position:60% 62%;
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(20,17,13,.9) 0%,rgba(20,17,13,.85) 42%,rgba(20,17,13,.44) 64%,rgba(20,17,13,.08) 86%,rgba(20,17,13,0) 100%),
    linear-gradient(to top,rgba(20,17,13,.86) 0%,rgba(20,17,13,.76) 40%,rgba(20,17,13,.34) 68%,rgba(20,17,13,.02) 100%);
}
.hero-in{
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:clamp(28px,5vh,52px);
  width:100%;
  color:var(--paper);
}
.eyebrow{
  font-size:var(--s1);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:16px;
  width:max-content;
  max-width:100%;
}
h1{
  text-wrap:balance;
  font-size:clamp(26px,4.4vw,var(--s6));
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.012em;
  max-width:19ch;
}
.hero-sub{
  font-size:var(--s3);
  max-width:46ch;
  margin-top:18px;
}
.hero-act{margin-top:26px}
.btn{
  display:inline-block;
  background:var(--accent);
  color:var(--paper);
  text-decoration:none;
  font-size:var(--s3);
  font-weight:700;
  letter-spacing:.05em;
  padding:15px 30px;
  min-height:48px;
}
.btn:hover{background:#7A2315}

/* ---------- lede ---------- */
.lede{padding:clamp(40px,5vw,58px) 0 clamp(14px,2vw,20px)}
.lede-in{max-width:900px;margin-left:0;margin-right:auto}
.lede-p{
  font-size:clamp(20px,2.4vw,var(--s5));
  line-height:1.34;
  font-weight:400;
  letter-spacing:-.008em;
}
.note{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--rule);
  font-size:var(--s2);
  line-height:1.7;
  color:var(--muted);
  max-width:78ch;
}

/* ---------- section headings ---------- */
.sec-h{
  font-size:clamp(22px,2.6vw,var(--s5));
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.01em;
  max-width:30ch;
  text-wrap:balance;
}
.sec-sub{
  margin-top:14px;
  font-size:var(--s2);
  color:var(--muted);
  max-width:70ch;
  line-height:1.7;
}

/* ---------- the pairs ---------- */
.spine{padding:clamp(34px,4vw,50px) 0 clamp(24px,3vw,36px)}
.pairs{margin-top:clamp(28px,4vw,42px)}

.pair{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:16px;
  row-gap:14px;
  align-items:start;
  padding:clamp(20px,2.4vw,27px) 0;
  border-top:1px solid var(--rule);
}
.pair:first-child{border-top:2px solid var(--ink)}
.pair:last-child{border-bottom:2px solid var(--ink)}

.pnum{
  grid-column:1 / span 12;
  font-size:var(--s1);
  font-weight:700;
  letter-spacing:.22em;
  color:var(--muted);
}
.ppoint{grid-column:1 / span 4}
.plink{grid-column:5 / var(--start);align-self:center;padding-top:22px}
.pwork{grid-column:var(--start) / -1}
.pbody{grid-column:1 / -1;margin-top:8px}

.plabel{
  display:block;
  font-size:var(--s1);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.plabel-a{color:var(--ink)}
.ptext{
  font-size:var(--s4);
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.008em;
}
.plink svg{width:100%;height:24px;display:block;overflow:visible}
.plink line{stroke:var(--rule);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.plink .c-open{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.plink .c-fill{fill:var(--accent);stroke:none}
.pdist{
  display:block;
  text-align:center;
  margin-top:10px;
  font-size:var(--s1);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.pbody p{max-width:96ch}
.pbody p + p{margin-top:14px}
.pstop{
  font-size:var(--s2);
  line-height:1.7;
  color:var(--muted);
  border-left:3px solid var(--rule);
  padding-left:16px;
}
.pstop-l{
  font-weight:700;
  color:var(--ink);
  letter-spacing:.02em;
}

/* ---------- full-bleed band ---------- */
.band{position:relative;isolation:isolate;margin:clamp(24px,4vw,48px) 0 0}
.band img{
  width:100%;
  height:clamp(280px,42vh,380px);
  object-fit:cover;
  object-position:44% 46%;
}
.band-cap{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(20,17,13,.9);
  padding:20px var(--gut);
}
.band-cap p,.band-cap h2{
  max-width:var(--max);
  margin:0 auto;
  color:var(--paper);
  font-size:clamp(18px,2.6vw,32px);
  font-weight:500;
  line-height:1.3;
}

/* ---------- quotes ---------- */
.says{background:var(--panel);padding:clamp(40px,5vw,60px) 0 clamp(40px,5vw,58px)}
.quotes{
  margin-top:clamp(28px,4vw,40px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(24px,3vw,36px) 24px;
}
.q{border-top:2px solid var(--ink);padding-top:18px}
.q1{grid-column:1 / span 7}
.q2{grid-column:9 / -1}
.q-fig{grid-column:1 / span 5;margin:0;border-top:2px solid var(--ink);padding-top:18px}
.q-fig img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.q3{grid-column:7 / -1}
.q4{grid-column:1 / span 7}
.q5{grid-column:9 / -1}
.q-said{
  font-size:clamp(21px,2.6vw,32px);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.014em;
}
.q-said-sub{
  margin-top:8px;
  font-size:var(--s3);
  color:var(--muted);
}
.q-ans{margin-top:16px;font-size:var(--s3);max-width:60ch}

/* ---------- visit ---------- */
.visit{padding:clamp(40px,5vw,60px) 0}
.visit-in{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
.vlist{margin-top:clamp(24px,3vw,34px)}
.vlist li{
  position:relative;
  padding-left:34px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--rule);
  max-width:62ch;
}
.vlist li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.vlist li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:11px;height:11px;
  border:2px solid var(--ink);
  border-radius:50%;
}
.visit-i img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;object-position:56% 74%}

/* ---------- close ---------- */
.close{background:var(--panel);padding:clamp(36px,4.5vw,54px) 0}
.close-in{max-width:840px;margin-left:0;margin-right:auto}
.close-h{margin-bottom:22px}
.close-in p{max-width:70ch}
.close-in p + p{margin-top:18px}

/* ---------- contact ---------- */
.contact{
  display:grid;
  grid-template-columns:1.18fr 1fr;
  background:var(--ink);
  color:var(--paper);
}
.contact-in{
  display:flex;
  justify-content:flex-end;
  padding:clamp(40px,5vw,64px) clamp(28px,3.4vw,48px) clamp(40px,5vw,64px) var(--gut);
}
.contact-body{max-width:660px;width:100%}
.contact-h{color:var(--paper);margin-bottom:clamp(24px,3vw,36px)}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(22px,3vw,34px);
}
.cblock-tel{grid-column:1 / -1}
.cblock .plabel{color:var(--paper)}
.cmeta{font-size:var(--s3);line-height:1.75;color:var(--paper)}
.tel-big{
  font-size:var(--s5);
  font-weight:700;
  border-bottom-width:3px;
  display:inline-block;
  white-space:nowrap;
}
.tel-big:hover{border-bottom-color:var(--paper)}
.ilink{color:var(--paper);display:inline-block;padding:11px 0}
.ilink:hover{color:var(--paper)}
.cnote{
  margin-top:clamp(26px,3vw,38px);
  padding-top:20px;
  border-top:1px solid rgba(243,239,230,.35);
  font-size:var(--s2);
  line-height:1.7;
  color:var(--paper);
}
.contact-pic img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:52% 56%}

/* ---------- footer ---------- */
.foot{background:var(--paper);border-top:2px solid var(--ink);padding:clamp(40px,6vw,64px) 0 clamp(48px,6vw,72px)}
.foot-mark{
  font-size:var(--s2);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.foot-d{
  font-size:var(--s2);
  line-height:1.72;
  color:var(--muted);
  max-width:88ch;
}
.foot-d + .foot-d{margin-top:14px}
.foot-d strong{color:var(--ink)}
.foot-c{margin-top:22px;font-size:var(--s1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- reveal, gated behind .js ---------- */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}

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

/* ---------- narrow ---------- */
@media (max-width:960px){
  .pair{grid-template-columns:1fr;row-gap:0}
  .pnum{grid-column:1;margin-bottom:10px}
  .ppoint,.pwork,.pbody{grid-column:1}
  .plink{grid-column:1;padding:14px 0 16px;display:flex;align-items:center;gap:14px}
  .plink svg{width:120px;flex:0 0 120px}
  .pdist{margin-top:0;text-align:left}
  .pwork{margin-top:2px}
  .pbody{margin-top:20px}

  .quotes{grid-template-columns:1fr;gap:34px}
  .q1,.q2,.q3,.q4,.q5,.q-fig{grid-column:1}

  .visit-in{grid-template-columns:1fr}
  .visit-i img{aspect-ratio:3 / 2}

  .contact{grid-template-columns:1fr}
  .contact-in{padding-left:var(--gut);padding-right:var(--gut);justify-content:flex-start}
  .contact-grid{grid-template-columns:1fr;gap:26px}
  .contact-pic{order:-1}
  .contact-pic img{min-height:240px}
}

@media (max-width:640px){
  .head-in{gap:12px}
  .head-r{width:100%;justify-content:space-between;gap:12px}
  .hero-img{height:clamp(420px,78vh,560px)}
  .hero-sub{max-width:34ch}
  .hero-scrim{
    background:linear-gradient(to top,rgba(20,17,13,.93) 0%,rgba(20,17,13,.9) 48%,rgba(20,17,13,.6) 74%,rgba(20,17,13,.1) 100%);
  }
  .btn{display:block;text-align:center}
}