/* Homepage experience. Loaded only by index.html.
   Type scale is homepage-scoped so interior pages keep lg.css. */

.home{
  --home-hero:clamp(32px,5.05vw,72px);
  --home-chapter:clamp(32px,3.35vw,48px);
  --home-display:clamp(28px,3.05vw,44px);
  --home-sub:clamp(22px,2.1vw,30px);
  --home-feature:clamp(20px,1.8vw,26px);
  --home-lead:clamp(17px,1.25vw,19px);
  --home-body:16px;
  --home-eye:11px;
  --home-track:.14em;
  --home-cta:clamp(32px,3.8vw,56px);
}

.home h1,
.home h2,
.home h3,
.home .duo p,
.home .siq-purpose,
.home .home-evidence,
.home .home-quiet-h,
.home .cta h2{
  font-family:var(--font-editorial);
  font-weight:400;
  font-style:normal;
  letter-spacing:var(--tr-tight);
}

.home .home-kicker,
.home .premise .label,
.home .duo .lab,
.home .also-tag,
.home .home-instrument-cap .label,
.home .home-handoff .label,
.home #method .step > .label,
.home #engage .dur,
.home #engage .label,
.home #kitchen .kit-note,
.home #kitchen figcaption.label,
.home .belt-label{
  font-family:var(--font-structural);
  font-weight:500;
  font-size:var(--home-eye);
  letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;
}

.home #work .card .meta,
.home #work .go,
.home .hero-foot .label{
  font-family:var(--font-system);
}

.home .hero-copy{bottom:clamp(124px,15vh,160px)}
.home .hero-mark{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  max-width:none;
  font-family:var(--font-structural);
  font-weight:500;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#C4B9A4;
}
.home .hero-mark__bar{
  width:22px;
  height:1px;
  background:var(--acc-on-ink);
  display:block;
  flex:none;
}
.home .hero-copy h1.hero-poster{
  font-family:var(--font-structural);
  font-weight:500;
  font-style:normal;
  text-transform:uppercase;
  font-size:clamp(3.5rem,5.4vw,5rem);
  letter-spacing:-.004em;
  line-height:.80;
  max-width:none;
}
.home .hero-copy h1.hero-poster .ln{overflow-wrap:break-word}
.home .hero-poster__sm,
.home .hero-poster__cap,
.home .hero-poster__turn{
  font-family:var(--font-editorial);
  font-weight:400;
  text-transform:none;
  font-size:.42em;
  letter-spacing:-.025em;
  line-height:1;
  display:inline-block;
  vertical-align:.14em;
}
.home .hero-poster__sm,
.home .hero-poster__turn{color:var(--acc-on-ink)}
.home .hero-poster__cap{color:var(--ivory);margin-right:-.22em}
.home .hero-sub{
  max-width:34ch;
  margin-top:20px;
  font-family:var(--sans);
  font-weight:400;
  font-size:17.5px;
  line-height:1.5;
  letter-spacing:0;
  color:#B4AEA3;
}
.home .hero-acts{margin-top:28px}

.home-kicker{margin-bottom:18px}
.home .home-statement,
.home .home-artifact,
.home .home-index,
.home .home-compare,
.home .home-quiet{
  padding-block:clamp(88px,10vw,148px);
}

.home .duo p{
  font-size:var(--home-display);
  line-height:1.08;
  letter-spacing:-.02em;
}
.home .duo-faces{
  align-items:start;
  column-gap:0;
}
.home .duo-faces > [lang="en"]{
  padding-right:clamp(28px,4.2vw,72px);
}
.home .duo-faces > [lang="es"]{
  padding-left:clamp(28px,4.2vw,72px);
  border-left:1px solid var(--rule);
}
.home .duo-faces .duo-en{
  margin-top:22px;
  font-family:var(--font-structural);
  font-weight:500;
  font-style:normal;
  text-transform:uppercase;
  font-size:clamp(2.2rem,4.8vw,4.4rem);
  line-height:.84;
  letter-spacing:var(--tr-display);
  color:var(--ink);
}
.home .duo-faces .duo-es{
  margin-top:22px;
  font-family:var(--font-editorial);
  font-weight:400;
  font-style:normal;
  text-transform:none;
  font-size:clamp(2.4rem,4.5vw,4.15rem);
  line-height:.96;
  letter-spacing:-.02em;
  color:var(--acc-on-ivory);
}

.home-statement h2{
  max-width:22ch;
  font-size:var(--home-chapter);
  line-height:.96;
  letter-spacing:-.035em;
}
.home-statement .roads{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:clamp(72px,10vw,128px);
  border-top:1px solid var(--rule);
}
.home-statement .road{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:16px 20px;
  align-items:baseline;
  padding:32px 40px 36px 0;
  border-bottom:0;
  border-right:1px solid var(--rule);
}
.home-statement .road:last-child{
  padding-left:40px;
  border-right:0;
}
.home-statement .road h3{
  font-size:var(--home-sub);
  letter-spacing:-.025em;
  line-height:1.1;
}
.home-statement .road p{grid-column:2;margin-top:10px}
.home-statement .road .road-note{grid-column:2}

.home #strategyiq .home-kicker{margin-bottom:18px}
.siq-purpose{
  max-width:16ch;
  margin:0 0 clamp(24px,3vw,36px);
  font-size:var(--home-chapter);
  line-height:.96;
  letter-spacing:-.035em;
}
.siq-hinge{
  max-width:36ch;
  margin:22px 0 0;
  font-size:var(--home-lead);
  line-height:1.5;
  letter-spacing:-.01em;
  font-weight:400;
}
.home #strategyiq .home-handoff{
  margin-top:clamp(24px,3vw,36px);
  padding-top:24px;
}
@media (max-width:720px){
  .siq-purpose{
    max-width:none;
    font-size:var(--home-chapter);
    margin-bottom:20px;
  }
  .siq-hinge{margin-top:18px;font-size:var(--home-lead)}
}

.home-instrument{
  background:var(--ink);
  color:var(--ivory);
  --t2:var(--stone-l);
  --num:var(--champ);
  --rule:var(--rule-k);
  --mute:rgba(240,236,227,.62);
  padding:clamp(28px,3.4vw,48px) clamp(22px,3vw,48px) clamp(20px,2.4vw,36px);
}
.home-instrument-cap{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-bottom:22px;
  border-bottom:1px solid var(--rule-k);
}
.home-layers{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.home-layers li{
  padding:28px 28px 8px 0;
  border-right:1px solid var(--rule-k);
}
.home-layers li:last-child{border-right:0;padding-right:0}
.home-layers .num{
  display:block;
  margin-bottom:28px;
}
.home-layers h3{
  font-size:var(--home-feature);
  letter-spacing:-.02em;
  line-height:1.15;
}
.home-layers p{
  margin-top:12px;
  max-width:18ch;
  font-size:14px;
  color:rgba(240,236,227,.62);
}
.home-layers .is-end h3{color:var(--ivory)}
.home-handoff{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:28px 40px;
  align-items:end;
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--rule);
}
.home-handoff > div p:last-child{
  margin-top:10px;
  max-width:28ch;
  font-size:16px;
}
.home-read-acts{
  display:grid;
  gap:12px;
  justify-items:start;
}

.home #work.home-artifact{
  padding-top:clamp(112px,13vw,188px);
  padding-bottom:clamp(80px,9vw,128px);
  overflow:visible;
  z-index:2;
}
.home-chapter{margin-bottom:clamp(56px,7vw,96px)}
.home-chapter .home-kicker{margin-bottom:18px}
.home-evidence{
  max-width:12ch;
  margin:0;
  font-size:var(--home-chapter);
  line-height:.96;
  letter-spacing:-.035em;
}
.home #work .case h3{
  font-size:var(--home-sub);
  letter-spacing:-.025em;
  line-height:1.1;
}
.home #work.home-artifact .work{margin-top:0}
.home #work.home-artifact .card:first-child{align-items:end}
.home #work .card.home-arrive{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);
}
.home #work .card.home-arrive.is-in{
  opacity:1;
  transform:none;
}

.home #method.home-index{padding-top:clamp(104px,12vw,176px)}
.home-method-line{
  max-width:28ch;
  margin:0 0 clamp(40px,4.8vw,64px);
  font-size:var(--home-lead);
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--mute);
}
.home-index .method{border-top:1px solid var(--rule)}
.home-index .step h3{
  font-size:var(--home-sub);
  letter-spacing:-.025em;
  line-height:1.1;
  margin:12px 0 14px;
}

.home-compare h2{
  max-width:16ch;
  margin-bottom:clamp(32px,4vw,48px);
  font-size:var(--home-chapter);
  line-height:.96;
  letter-spacing:-.035em;
}
.home-fits{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.home-fits li{
  display:grid;
  grid-template-columns:140px minmax(0,1fr) auto;
  gap:20px 48px;
  align-items:baseline;
  padding:32px 0;
  border-bottom:1px solid var(--rule);
}
.home-fits h3{
  font-size:var(--home-sub);
  letter-spacing:-.025em;
  line-height:1.15;
  margin:0 0 10px;
}
.home-fits p{margin:0}
.home-fits .home-fits-body p{
  max-width:42ch;
  font-size:16px;
  color:var(--mute);
}
.home-fits .dur{padding-top:8px}

.home-quiet-h{
  max-width:20ch;
  margin:0 0 clamp(28px,3.6vw,44px);
  font-size:var(--home-chapter);
  line-height:.96;
  letter-spacing:-.035em;
}
.home .kit-lead{
  font-size:var(--home-lead);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.01em;
  max-width:36ch;
}
.home .kit-cards h3{
  font-size:var(--home-feature);
  letter-spacing:-.02em;
}
.home #studio.home-quiet .founder h2{
  margin-top:0;
  font-size:var(--home-chapter);
  line-height:.96;
  letter-spacing:-.035em;
}
.home #studio .founder .body{
  margin-top:22px;
  font-size:var(--home-lead);
  line-height:1.55;
}
.home .cta h2{
  font-size:var(--home-cta);
  line-height:.96;
  letter-spacing:-.035em;
}

@media (max-width:1100px){
  .home .duo-faces > [lang="en"]{padding-right:0}
  .home .duo-faces > [lang="es"]{
    padding-left:0;
    padding-top:40px;
    margin-top:8px;
    border-left:0;
    border-top:1px solid var(--rule);
  }
  .home-layers{grid-template-columns:1fr 1fr}
  .home-layers li:nth-child(2),
  .home-layers li:nth-child(4){border-right:0}
  .home-layers li:nth-child(-n+4){border-bottom:1px solid var(--rule-k)}
  .home-handoff{grid-template-columns:1fr 1fr}
  .home-handoff .home-read-acts{grid-column:1 / -1}
  .home-statement .roads{grid-template-columns:1fr}
  .home-statement .road,
  .home-statement .road:last-child{
    padding-left:0;
    border-right:0;
    border-bottom:1px solid var(--rule);
  }
  .home-fits li{grid-template-columns:120px 1fr; gap:12px 28px}
  .home-fits .label.mute{grid-column:2}
}
@media (max-width:720px){
  .home .hero-copy{bottom:118px}
  .home-statement h2{max-width:none}
  .home-layers{grid-template-columns:1fr}
  .home-layers li{
    border-right:0;
    border-bottom:1px solid var(--rule-k);
    padding-right:0;
  }
  .home-layers li:last-child{border-bottom:0}
  .home-handoff{grid-template-columns:1fr}
  .home #work.home-artifact{padding-top:88px;padding-bottom:72px}
  .home-chapter{margin-bottom:40px}
  .home-evidence{font-size:var(--home-chapter)}
  .home #work.home-artifact .card:first-child{align-items:start}
  .home #method.home-index{padding-top:88px}
  .home-method-line{margin-bottom:32px}
  .home-index .step h3{font-size:var(--home-sub)}
  .home-fits li{grid-template-columns:1fr; padding:28px 0}
  .home-fits .label.mute{grid-column:auto}
}

.back-top{
  position:fixed;
  right:16px;
  bottom:max(28px, calc(env(safe-area-inset-bottom) + 16px));
  z-index:70;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:44px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid rgba(211,192,154,.5);
  background:var(--ink);
  color:var(--ivory);
  font:500 11px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .28s ease, transform .28s ease;
}
.back-top.is-on{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.back-top:focus-visible{
  outline:2px solid var(--champ);
  outline-offset:3px;
}
@media (max-width:720px){
  .back-top{
    width:44px;
    height:44px;
    padding:0;
    border-radius:50%;
  }
  .back-top .back-top-label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .home .hero-copy h1 .ln{will-change:auto}
  .back-top{transition:none}
  .home #work .card.home-arrive{
    opacity:1;
    transform:none;
    transition:none;
  }
}
