/* Partners landing page.
   Loads AFTER style.css + vi-enhance.css and only adds what the shared system
   does not already have. Sharp corners everywhere, that is the brand signature. */

/* ---------------------------------------------------------------- hero */
.ptn-hero{
  position:relative;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 40px) var(--pad) clamp(48px,7vw,92px);
  background:var(--ink);overflow:hidden;isolation:isolate;
}
.ptn-hero .ptn-hero-media{position:absolute;inset:0;z-index:0}
.ptn-hero .ptn-hero-media img,
.ptn-hero .ptn-hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.ptn-hero:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(31,26,18,.62) 0%,rgba(31,26,18,.28) 38%,rgba(31,26,18,.88) 100%);
}
.ptn-hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto}
.ptn-hero h1{
  font-family:var(--serif);font-weight:400;color:var(--cream);
  font-size:clamp(40px,7.2vw,92px);line-height:.98;letter-spacing:-.015em;margin:14px 0 0;
  max-width:16ch;
}
.ptn-hero h1 em{font-style:italic;color:var(--solar)}
.ptn-hero .ptn-lead{
  color:var(--cream-80);font-size:clamp(15px,1.5vw,19px);line-height:1.62;
  max-width:46ch;margin:20px 0 0;
}
.ptn-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ptn-hero-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-55);margin-top:22px;
}

/* --------------------------------------------------------------- proof */
/* Sleep, the dusk-to-night end of the ramp.
   The canonical Sleep gradient is #3546A0 -> #7574C1 -> #BDB8DC -> #E5EEF1.
   Only its first third is usable behind cream type: at #7574C1 cream drops to
   about 3.4:1 and the 10.5px mono labels fail outright, and past that the ramp
   goes pale. So the band runs Sleep-night into Sleep-deep into Sleep-a, which
   is the half of the gradient that actually reads as Abso Sleep rather than as
   generic lavender, and holds roughly 10:1 on cream at both ends of the drift.
   Drifting on the canonical 16s cadence. This is a page band, not the Drift
   device, so a CSS gradient is correct here. */
.ptn-proof{
  /* Sleep-night, the main Abso mark colour. Not a token in style.css. */
  --ptn-night:#151B52;
  background:linear-gradient(115deg,var(--ptn-night) 0%,var(--sleep-deep) 44%,var(--sleep-a) 100%);
  background-size:200% 100%;background-position:0% 50%;
  animation:ptn-drift 16s ease-in-out infinite alternate;
  padding:clamp(34px,4.5vw,54px) var(--pad);
}
@keyframes ptn-drift{to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.ptn-proof{animation:none}}
.ptn-proof-grid{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(4,1fr);
}
.ptn-proof-grid>div{padding:22px 26px;border-left:1px solid rgba(255,247,233,.28)}
.ptn-proof-grid>div:first-child{border-left:0;padding-left:0}
.ptn-proof .v{font-family:var(--sans);font-weight:600;color:var(--cream);
  font-size:clamp(24px,3vw,40px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ptn-proof .v span{color:var(--sleep-d)}
.ptn-proof .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,247,233,.72);margin-top:10px;line-height:1.6}

/* -------------------------------------------------------------- roster */
.ptn-roster{padding:clamp(56px,8vw,110px) var(--pad);background:var(--cream)}
.ptn-inner{max-width:var(--maxw);margin:0 auto}
.ptn-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);
  align-items:end;margin-bottom:clamp(30px,4vw,54px)}
.ptn-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,60px);
  line-height:1.02;letter-spacing:-.015em;margin:12px 0 0;color:var(--ink)}
.ptn-head h2 .solar{color:var(--solar)}
.ptn-head p{color:var(--ink-64);font-size:16px;line-height:1.68;max-width:52ch}
/* Sections whose right-hand paragraph was removed: collapse rather than leave
   a hole where the second column used to be. */
.ptn-head.is-solo{grid-template-columns:1fr}

/* The logo wall. Auto-fit so adding a fourth or seventh partner needs no CSS
   change: cells reflow and stay the same size. */
.ptn-wall{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--ink-12);border:1px solid var(--ink-12);
}
.ptn-wall-cell.is-filler{background:var(--cream)}
.ptn-wall-cell{
  background:var(--cream);min-height:clamp(120px,13vw,168px);
  display:flex;align-items:center;justify-content:center;padding:26px 30px;
}
.ptn-wall-cell img{
  max-height:clamp(40px,5vw,66px);max-width:76%;width:auto;height:auto;display:block;
  /* The marks on disk are JPGs on white. Multiply drops the white box into the
     cream so they sit on the page instead of on a card. */
  mix-blend-mode:multiply;filter:saturate(.12) contrast(1.06);opacity:.88;
  transition:filter .45s var(--e-standard),opacity .45s var(--e-standard);
}
.ptn-wall-cell:hover img{filter:none;opacity:1}
/* Cells with a partner site behind them. The mark coming back to full colour
   is the main affordance; the tint and the lift are the confirmation. */
.ptn-wall-cell.is-link{
  text-decoration:none;cursor:pointer;
  transition:background .45s var(--e-standard),transform .45s var(--e-standard);
}
.ptn-wall-cell.is-link:hover{background:var(--cream-warm);transform:translateY(-2px)}
.ptn-wall-cell.is-link:focus-visible{outline:2px solid var(--solar);outline-offset:-3px}


/* ------------------------------------------------------------- stories */
.ptn-stories{padding:0 var(--pad) clamp(56px,8vw,110px);background:var(--cream)}
.ptn-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.ptn-story{border:1px solid var(--ink-12);background:var(--cream-warm);display:flex;flex-direction:column}
.ptn-shot{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cream-soft)}
.ptn-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ptn-shot-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:20px;
  background:repeating-linear-gradient(-45deg,var(--cream-soft) 0 8px,var(--cream-warm) 8px 16px);
}
.ptn-shot-empty span{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-44)}
.ptn-shot-empty b{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--solar);font-weight:400}
.ptn-story-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.ptn-story-body h3{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.ptn-story-body p{color:var(--ink-64);font-size:14.5px;line-height:1.62}
.ptn-story-body .ptn-kv{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-44);
  border-top:1px solid var(--ink-12);padding-top:11px;margin-top:auto;line-height:1.7}

/* --------------------------------------------------------------- model */
.ptn-model{background:var(--ink);color:var(--cream);padding:clamp(58px,8vw,112px) var(--pad)}
.ptn-model .ptn-head h2{color:var(--cream)}
.ptn-model .ptn-head p{color:var(--cream-80)}
.ptn-model .eye{color:var(--cream-55)}
.ptn-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,247,233,.16);
  border:1px solid rgba(255,247,233,.16)}
.ptn-col{background:var(--ink);padding:28px 26px 30px}
.ptn-col h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.4vw,30px);line-height:1.1;
  color:var(--cream);margin-bottom:18px}
.ptn-col h3 .solar{color:var(--solar)}
.ptn-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.ptn-col li{position:relative;padding-left:20px;color:var(--cream-80);font-size:14.5px;line-height:1.6}
.ptn-col li:before{content:"";position:absolute;left:0;top:10px;width:11px;height:1px;background:var(--solar)}
.ptn-model-foot{font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--cream-55);
  margin-top:22px;max-width:80ch}

/* --------------------------------------------------------------- range */
.ptn-range{background:var(--cream-warm);padding:clamp(56px,8vw,110px) var(--pad)}
.ptn-range-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.ptn-sku{background:var(--cream);border:1px solid var(--ink-12);padding:24px;display:flex;
  flex-direction:column;gap:12px;align-items:flex-start}
.ptn-sku .ptn-pack{height:190px;display:flex;align-items:flex-end}
.ptn-sku .ptn-pack img{max-height:190px;width:auto;display:block}
.ptn-sku h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1;color:var(--ink)}
.ptn-sku p{color:var(--ink-64);font-size:14.5px;line-height:1.62}
.ptn-sku .ptn-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-44);border-top:1px solid var(--ink-12);padding-top:11px;width:100%;margin-top:auto}

/* --------------------------------------------------------------- apply */
.ptn-apply{background:var(--ink);color:var(--cream);padding:clamp(58px,8vw,112px) var(--pad)}
.ptn-apply-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
.ptn-apply h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,58px);line-height:1.02;
  color:var(--cream);margin:12px 0 0}
.ptn-apply h2 .solar{color:var(--solar)}
.ptn-apply .ptn-side p{color:var(--cream-80);font-size:15.5px;line-height:1.66;margin-top:18px;max-width:44ch}
.ptn-apply .ptn-side .eye{color:var(--cream-55)}
.ptn-direct{margin-top:26px;border-top:1px solid rgba(255,247,233,.16);padding-top:20px;
  font-family:var(--mono);font-size:11.5px;line-height:2;color:var(--cream-55)}
.ptn-direct a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}

.ptn-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ptn-field{display:flex;flex-direction:column;gap:7px}
.ptn-field.full{grid-column:1 / -1}
.ptn-field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--cream-55)}
.ptn-field label .req{color:var(--solar)}
.ptn-field input,.ptn-field select,.ptn-field textarea{
  font-family:var(--sans);font-size:15px;color:var(--cream);background:transparent;
  border:1px solid rgba(255,247,233,.26);padding:12px 13px;width:100%;
  transition:border-color .3s var(--e-standard),background .3s var(--e-standard);
}
.ptn-field textarea{resize:vertical;min-height:92px;line-height:1.6}
.ptn-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cream-55) 50%),
  linear-gradient(135deg,var(--cream-55) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.ptn-field select option{background:var(--ink);color:var(--cream)}
.ptn-field input::placeholder,.ptn-field textarea::placeholder{color:rgba(255,247,233,.34)}
.ptn-field input:focus,.ptn-field select:focus,.ptn-field textarea:focus{
  outline:none;border-color:var(--solar);background:rgba(255,247,233,.05)}
.ptn-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ptn-submit{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px}
.ptn-consent{font-family:var(--mono);font-size:10.5px;line-height:1.8;color:var(--cream-55);
  grid-column:1 / -1;max-width:56ch}
.ptn-consent a{color:var(--cream-80);text-decoration:underline;text-underline-offset:3px}

.ptn-msg{grid-column:1 / -1;border:1px solid var(--solar);padding:18px 18px;background:rgba(223,109,9,.09)}
.ptn-msg h3{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--cream);margin-bottom:7px}
.ptn-msg p{color:var(--cream-80);font-size:14.5px;line-height:1.62}
.ptn-msg a{color:var(--solar);text-decoration:underline;text-underline-offset:3px}
.ptn-err{border-color:rgba(255,247,233,.4);background:rgba(255,247,233,.06)}
.ptn-field .ptn-inline-err{font-family:var(--mono);font-size:10.5px;color:var(--solar);letter-spacing:.04em}

.ptn-done{border:1px solid rgba(255,247,233,.22);padding:clamp(26px,4vw,44px);background:rgba(255,247,233,.05)}
.ptn-done h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.06;
  color:var(--cream);margin-bottom:14px}
.ptn-done h3 .solar{color:var(--solar)}
.ptn-done p{color:var(--cream-80);font-size:15.5px;line-height:1.66;max-width:50ch}
.ptn-done .ptn-direct{margin-top:22px}

/* ----------------------------------------------------------------- faq */
.ptn-faq{background:var(--cream);padding:clamp(56px,8vw,110px) var(--pad)}
.ptn-faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ink-12);
  border:1px solid var(--ink-12)}
.ptn-faq-grid>div{background:var(--cream);padding:26px 24px}
.ptn-faq h3{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink);
  margin-bottom:9px}
.ptn-faq p{color:var(--ink-64);font-size:14.5px;line-height:1.66}

/* -------------------------------------------------------------- mobile */
@media(max-width:1000px){
  .ptn-head{grid-template-columns:1fr;align-items:start;gap:18px}
  .ptn-cols{grid-template-columns:1fr}
  .ptn-wall{grid-template-columns:repeat(2,1fr)}
  .ptn-story-grid,.ptn-range-grid{grid-template-columns:1fr}
  .ptn-apply-grid{grid-template-columns:1fr}
  .ptn-proof-grid{grid-template-columns:repeat(2,1fr)}
  .ptn-faq-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .ptn-form{grid-template-columns:1fr}
  .ptn-hero{min-height:auto;padding-bottom:44px}
}