/* ============================================================
   GROWMARK — sections
   ============================================================ */

/* ---------------------------- hero -------------------------
   The scene is not a card in a column — the hero section IS the
   containing space. The canvas fills it edge to edge and bleeds
   up behind the (transparent) nav; the copy sits over it on a
   solid dark ground.
   ----------------------------------------------------------- */

.hero{
  position:relative;
  overflow:hidden;
  background:var(--carbon);
  height:100vh;
  height:100dvh;
  width:100%;
}

.hero__status{
  position:absolute;
  top:73%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  user-select:none;
}

.hero__status-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  pointer-events:none;
}

.hero__status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 8px rgba(250,250,248,0.8);
  animation:heroStatusPulse 2.4s ease-in-out infinite;
}

.hero__status-text{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(250,250,248,0.9);
  white-space:nowrap;
}

.hero__contact{
  position:relative;
  background:none;
  border:none;
  padding:6px 12px;
  cursor:pointer;
  outline:none;
  font-family:var(--sans);
  font-size:13.5px;
  letter-spacing:.02em;
  color:rgba(250,250,248,0.55);
  pointer-events:auto;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  transition:color .25s ease, background-color .25s ease, transform .2s ease;
}

.hero__contact:hover{
  color:rgba(250,250,248,0.85);
  background:rgba(250,250,248,0.03);
}

.hero__contact:active{
  transform:scale(0.98);
}

.hero__contact:focus-visible{
  outline:1px solid rgba(250,250,248,0.3);
  outline-offset:2px;
}

.hero__contact-email{
  color:rgba(250,250,248,0.9);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(250,250,248,0.3);
  transition:color .25s ease, text-decoration-color .25s ease;
}

.hero__contact:hover .hero__contact-email{
  color:#ffffff;
  text-decoration-color:rgba(250,250,248,0.85);
}

.hero__contact-default{
  display:inline-flex;
  align-items:center;
  transition:opacity .22s ease, transform .22s ease;
}

.hero__contact-success{
  position:absolute;
  inset:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#ffffff;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}

.hero__contact-icon{
  width:14px;
  height:14px;
  color:#4ade80;
  stroke-width:2.5;
  flex-shrink:0;
}

.hero__contact[data-copied="true"] .hero__contact-default{
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
}

.hero__contact[data-copied="true"] .hero__contact-success{
  opacity:1;
  transform:translateY(0);
}

@keyframes heroStatusPulse{
  0%,100%{opacity:.3;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}

.hero__shell{
  position:relative;
  z-index:2;
  width:100%;
  pointer-events:none;
  padding-bottom:clamp(36px, 5vw, 64px);
}

.hero__bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:clamp(32px, 5vw, 64px);
  width:100%;
}

.hero__copy{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:min(44rem, 62%);
  pointer-events:auto;
}

.hero__display{
  max-width:none;
  font-size:clamp(2.1rem, 3.8vw, 3.5rem);
  line-height:1.08;
  letter-spacing:-0.03em;
}

.hero__display em{
  font-family:"Newsreader", "Playfair Display", "Times New Roman", Georgia, serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.01em;
}

.hero__copy .lede {
  max-width:32em;
  line-height:1.45;
  font-size:clamp(0.95rem, 1.2vw, 1.0625rem);
  color:var(--muted);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
  pointer-events:auto;
  flex-shrink:0;
  padding-bottom:4px;
}

/* Scrim disabled: hero background is a solid dark color without gradients */
.hero__scrim{
  display:none;
}

.hero__readout{
  position:absolute;
  right:var(--gutter);
  bottom:26px;
  z-index:2;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(250,250,248,.4);
}

/* ---- the mark, in 3D ------------------------------------------
   Open full-bleed canvas across the hero section without container
   limitation, allowing the mark to sweep, zoom, and expand across
   the entire space without any clipping boundaries.
   ----------------------------------------------------------------- */

.hero__scene{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  /* Positioned + z-index makes this its own stacking context, so the
     video's screen blend only ever sees what is painted INSIDE here —
     with nothing behind it the mp4's black ground stayed pure #000 and
     the video rectangle showed against the carbon. Painting the ground
     here gives the blend the backdrop it needs: screen(#000, carbon)
     is carbon exactly, and the group lands on the hero seamlessly. */
  background:var(--carbon);
  isolation:isolate;
}

/* The mark, pre-rendered: video/front_10s.mp4 replaces the WebGL
   scene that used to fill this space. It sits in the right half,
   opposite the copy, contained rather than cropped so the whole
   frame reads. Screen blending drops the mp4's black ground into
   the carbon so no video rectangle shows at the edges. */
.hero__video{
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  pointer-events:none;
  mix-blend-mode:screen;
  transform:translateX(-40px) scale(1.2);
  transform-origin:center;
}

/* Mobile stacks instead of splitting: the mark sits behind the full
   frame, the copy sits against the bottom of the hero. */
@media (max-width:900px){
  .hero{justify-content:flex-end}
  .hero__shell{
    padding-bottom:clamp(28px, 6vw, 48px);
  }
  .hero__bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
  }
  .hero__copy{
    max-width:none;
  }
  .hero__actions{
    justify-content:flex-start;
  }
  .hero__readout{display:none}

  /* No right half to sit in: the loop takes the full width and
     stays in the upper band, above the copy. */
  .hero__video{
    width:100%;
    height:58%;
    top:0;
    transform:scale(1.15);
  }
}
/* ---------------------------- pipeline --------------------- */

.pipeline__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:end;
  margin-bottom:clamp(32px,4vw,48px);
}
.pipeline__aside{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:4px;
}

/* the carbon band — pipeline keeps its dark treatment inside a
   paper frame, so the section reads as its own object */
.band{
  border:1px solid var(--ground);
  padding:clamp(26px,3.4vw,44px);
  display:flex;
  flex-direction:column;
  gap:clamp(26px,3vw,38px);
}

.band__title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* three stages across, joined by one unbroken seam —
   the visual counter-argument to the broken seam in Problem */
.pipe{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  position:relative;
}
.pipe::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:23px;
  height:1px;
  background:var(--line);
}
.pipe__step{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-right:clamp(20px,3vw,44px);
  position:relative;
}
.pipe__step:last-child{padding-right:0}

.pipe__node{
  display:flex;
  align-items:center;
  gap:14px;
  height:46px;
  position:relative;
  z-index:1;
}
.pipe__n{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--muted);
  background:var(--ground);
  padding-right:12px;
}
.pipe__dot{
  width:9px;height:9px;
  background:var(--ink);
  flex:0 0 auto;
}
.pipe__label{
  font-size:clamp(1.1rem,1.6vw,1.32rem);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.15;
}
.pipe__note{
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
  max-width:26em;
}

.band__foot{
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
}
.band__foot .eyebrow{margin-right:6px}

@media (max-width:900px){
  .pipeline__head{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
  .pipe{grid-template-columns:minmax(0,1fr);gap:0}
  .pipe::before{
    left:4px;right:auto;
    top:0;bottom:0;
    width:1px;height:auto;
  }
  .pipe__step{
    padding-right:0;
    padding-left:30px;
    padding-bottom:26px;
  }
  .pipe__step:last-child{padding-bottom:0}
  .pipe__node{height:auto;gap:12px}
  .pipe__dot{position:absolute;left:-30px;top:6px}
  .pipe__n{background:none;padding-right:0}
}

/* ---------------------------- problem ---------------------- */

.moments{
  margin-top:clamp(44px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);
}

.moment{
  border-top:1px solid var(--line);
  padding-top:26px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
/* the seam is deliberately misaligned here — bolt-together, drawn */
.moment:nth-child(2){margin-top:26px}

.moment__tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.moment__quote{
  font-size:clamp(1.2rem,1.9vw,1.5rem);
  font-weight:400;
  line-height:1.24;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.verdict{
  margin-top:clamp(44px,5vw,64px);
  border:1px solid var(--line);
  padding:clamp(24px,3vw,34px);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:start;
}
.verdict__mark{
  width:32px;height:23px;
  color:var(--ink);
  flex:0 0 auto;
  margin-top:3px;
}
.verdict p{
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.42;
  letter-spacing:-.016em;
  max-width:44em;
  text-wrap:balance;
}

@media (max-width:900px){
  .moments{grid-template-columns:minmax(0,1fr);gap:0}
  .moment:nth-child(2){margin-top:0;padding-top:26px}
  .verdict{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* ---------------------------- lanes ------------------------ */

.lanes{
  margin-top:clamp(44px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
}

.lane{
  padding:30px 28px 34px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
  transition:background var(--dur-1) var(--ease);
}
.lane:first-child{padding-left:0}
.lane:last-child{border-right:0;padding-right:0}
.lane:hover{background:var(--wash)}

.lane__title{
  font-size:1.35rem;
  font-weight:400;
  letter-spacing:-.022em;
  line-height:1.15;
}
.lane__body{font-size:15px;line-height:1.55;color:var(--muted)}
.lane__list{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.lane__list li{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.subtract{
  margin-top:clamp(44px,5vw,64px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,56px);
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:34px;
}
.subtract__title{
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  font-weight:400;
  letter-spacing:-.024em;
  line-height:1.15;
}
.subtract__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-content:flex-start;
}
.struck{
  font-size:14px;
  padding:7px 11px;
  border:1px solid var(--line);
  color:var(--muted);
  position:relative;
}
.struck::after{
  content:"";
  position:absolute;
  left:11px;right:11px;
  top:50%;
  height:1px;
  background:currentColor;
  opacity:.5;
}

@media (max-width:900px){
  .lanes{grid-template-columns:minmax(0,1fr)}
  .lane{border-right:0;border-bottom:1px solid var(--line);padding-inline:0}
  .lane:last-child{border-bottom:0}
  .subtract{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* ---------------------------- method (split frame) --------- */

.split{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  min-height:520px;
}
.split__side{
  padding:var(--bay) clamp(28px,4vw,56px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
}
.split__side:first-child{
  padding-left:var(--gutter);
  border-right:1px solid var(--line-on-carbon);
}
.split__side:last-child{padding-right:var(--gutter)}
.split__inner{max-width:36rem;width:100%;margin-inline:auto}

.stages{display:grid;gap:0}
.stage-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px 20px;
  padding-block:24px;
  border-top:1px solid var(--line);
  align-items:baseline;
}
.stage-row:first-child{border-top:0;padding-top:0}
.stage-row__n{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--muted);
  padding-top:5px;
}
.stage-row__body{display:flex;flex-direction:column;gap:9px}
.stage-row__title{
  font-size:1.35rem;
  font-weight:400;
  letter-spacing:-.022em;
  line-height:1.15;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.stage-row__meta{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 8px;
  border:1px solid var(--line);
  color:var(--muted);
}
.stage-row__body p{font-size:15px;line-height:1.55;color:var(--muted);max-width:34em}

.readout{
  border:1px solid var(--line);
  padding:20px 22px;
  display:grid;
  gap:12px;
  margin-top:6px;
}
.readout__title{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.readout__list{display:grid;gap:9px}
.readout__list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  font-size:14px;
  line-height:1.45;
  color:var(--muted);
}
.readout__list li::before{
  content:"";
  width:6px;height:6px;
  border:1px solid currentColor;
  margin-top:7px;
}

@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split__side:first-child{
    border-right:0;
    border-bottom:1px solid var(--line-on-carbon);
    padding-inline:var(--gutter);
    padding-bottom:clamp(44px,6vw,64px);
  }
  .split__side:last-child{padding-inline:var(--gutter)}
  .split__side{padding-block:clamp(48px,7vw,72px)}
}

/* ---------------------------- scoreboard ------------------- */

.score{
  margin-top:clamp(44px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
}
.metric{
  padding:26px 24px 28px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.metric:last-child{border-right:0}
.metric:hover{background:var(--ink);color:var(--ground)}
.metric:hover .metric__def{color:inherit;opacity:.72}
.metric__abbr{
  font-family:var(--mono);
  font-size:1.55rem;
  font-weight:500;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.metric__name{font-size:14.5px;font-weight:500;letter-spacing:-.008em}
.metric__def{
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted);
  transition:color var(--dur-1) var(--ease);
}

.instruments{
  margin-top:26px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  border:1px solid var(--line);
  border-top:0;
  padding:22px 24px;
  background:var(--wash);
}
.instruments__label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:3px;
  white-space:nowrap;
}
.instruments p{font-size:15px;line-height:1.55;max-width:46em}
.instruments strong{font-weight:500}

@media (max-width:1080px){
  .score{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric:nth-child(2){border-right:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  .instruments{grid-template-columns:minmax(0,1fr);gap:12px}
}
@media (max-width:640px){
  .score{grid-template-columns:minmax(0,1fr)}
  .metric{border-right:0;border-bottom:1px solid var(--line)}
  .metric:last-child{border-bottom:0}
}

/* ---------------------------- evidence --------------------- */

.evidence__grid{
  margin-top:clamp(40px,5vw,56px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);
  border-top:1px solid var(--line);
  padding-top:34px;
}
.rule-item{display:flex;flex-direction:column;gap:11px}
.rule-item__k{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.rule-item__v{font-size:15px;line-height:1.55;color:var(--muted)}
.rule-item__v strong{color:var(--ink);font-weight:500}

@media (max-width:1080px){
  .evidence__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .evidence__grid{grid-template-columns:minmax(0,1fr);gap:26px}
}

/* ---------------------------- social ----------------------- */

.social__lead{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:end;
}

.gap-viz{
  border:1px solid var(--line);
  padding:24px;
  display:grid;
  gap:18px;
}
.gap-row{display:grid;gap:9px}
.gap-row__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.gap-row__top span:last-child{color:var(--muted)}
.gap-bar{
  height:8px;
  border:1px solid var(--ink);
  position:relative;
  overflow:hidden;
}
.gap-bar__fill{
  position:absolute;
  inset:0 auto 0 0;
  background:var(--ink);
  width:var(--w,50%);
}
.gap-bar--empty .gap-bar__fill{
  background:repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 6px);
}
.gap-viz__note{
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted);
}

.channels{
  margin-top:clamp(44px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.channel{
  padding:26px 24px 28px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:background var(--dur-1) var(--ease);
}
.channel:last-child{border-right:0}
.channel:first-child{padding-left:0}
.channel:hover{background:var(--wash)}
.channel__top{display:flex;align-items:center;gap:11px}
.channel__icon{width:17px;height:17px;flex:0 0 auto}
.channel__name{font-size:15px;font-weight:500;letter-spacing:-.01em}
.channel__handle{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--muted);
}
.channel__what{font-size:13.5px;line-height:1.5;color:var(--muted)}
.channel__go{
  margin-top:auto;
  padding-top:14px;
  font-size:13px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.channel__go .btn__arrow{width:7px;height:7px;border-width:1.3px}
.channel:hover .btn__arrow{transform:rotate(45deg) translate(2px,-2px)}

.pillars{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:center;
}
.pillars .eyebrow{margin-right:8px}

@media (max-width:1080px){
  .channels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .channel:nth-child(2){border-right:0}
  .channel:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .channel:nth-child(3){padding-left:0}
}
@media (max-width:900px){
  .social__lead{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:640px){
  .channels{grid-template-columns:minmax(0,1fr)}
  .channel{border-right:0;border-bottom:1px solid var(--line);padding-inline:0}
  .channel:last-child{border-bottom:0}
}

/* ---------------------------- products --------------------- */

.products{
  margin-top:clamp(44px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.5vw,28px);
}

.product{
  border:1px solid var(--line);
  padding:clamp(26px,3vw,36px);
  display:flex;
  flex-direction:column;
  gap:20px;
  min-height:100%;
}
.product--invert{border-color:var(--ground)}

.product__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.product__name{
  font-size:clamp(1.6rem,2.4vw,2rem);
  font-weight:400;
  letter-spacing:-.028em;
  line-height:1.05;
}
.product__kind{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:8px;
  display:block;
}
.product__status{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:5px 8px;
  border:1px solid var(--line);
  color:var(--muted);
  white-space:nowrap;
  flex:0 0 auto;
}
.product__body{font-size:15px;line-height:1.6;color:var(--muted)}
.product__specs{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:grid;
  gap:10px;
}
.product__specs li{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  font-size:13.5px;
  line-height:1.45;
}
.product__specs b{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:2px;
}
.product__specs span{color:var(--muted)}

.ownership{
  margin-top:28px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
  max-width:48em;
}

@media (max-width:900px){
  .products{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .product__specs li{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ---------------------------- contact ---------------------- */

.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(36px,5vw,80px);
  align-items:start;
}

.contact__aside{display:flex;flex-direction:column;gap:30px}

.expect{display:grid;gap:0}
.expect li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  padding-block:16px;
  border-top:1px solid var(--line);
  font-size:14.5px;
  line-height:1.5;
  color:var(--muted);
}
.expect li b{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink);
  padding-top:3px;
  white-space:nowrap;
}

.direct{
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:14.5px;
  color:var(--muted);
}
.direct strong{font-weight:500;color:var(--ink)}

.sent__title{font-size:clamp(1.5rem,2.6vw,2rem)}

@media (max-width:900px){
  .contact__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .expect li{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ---------------------------- footer ----------------------- */

.foot{padding-block:clamp(56px,6vw,80px) 34px}
.foot__grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,48px);
  padding-bottom:44px;
  border-bottom:1px solid var(--line);
}
.foot__brand{display:flex;flex-direction:column;gap:16px;max-width:24em}
.foot__brand .brand__mark{color:var(--ink)}
.foot__tag{font-size:14.5px;line-height:1.55;color:var(--muted)}
.foot__col{display:flex;flex-direction:column;gap:13px}
.foot__col h4{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:3px;
}
.foot__col a{font-size:14.5px;color:var(--muted);transition:color var(--dur-1) var(--ease);width:fit-content}
.foot__col a:hover{color:var(--ink)}
.foot__bar{
  padding-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  align-items:center;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
}
.foot__bar ul{display:flex;flex-wrap:wrap;gap:20px}

@media (max-width:1080px){
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .foot__grid{grid-template-columns:minmax(0,1fr)}
}