/* Home: a company-level introduction to LESNAR AI. Positioning and selected proof only; detail lives
   on Capabilities, Work, the project pages and Engineering (D-39). Phone first: each section is
   measured against one 390×844 and one 360×780 screen. */

/* ── Shared ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;
  font:700 16px/1.1 var(--sans);text-decoration:none;color:var(--ink);border:2px solid var(--ink);background:transparent;
  transition:transform .3s var(--spring,ease),background-color .2s,color .2s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.btn--primary{background:#D41F1A;border-color:#D41F1A;color:#FFFFFF}   /* light signal in both themes: white text holds 5:1 */
.btn--primary:hover{background:#B5130F;border-color:#B5130F}
.btn--onfilm{color:#FFFFFF;border-color:#FFFFFF}
.btn--onfilm.btn--primary{border-color:#D41F1A}
.hm-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (max-width:520px){.hm-cta{flex-direction:column}.hm-cta .btn{width:100%}}

.hm-h2{margin:0 0 18px;font:800 clamp(32px,4.6vw,62px)/.92 var(--sans);font-stretch:var(--cond);text-transform:uppercase;letter-spacing:.005em}
.hm-h2 em{font-style:normal;color:inherit}
.hm-sec{padding-block:clamp(40px,8vw,112px)}
.hm-more{display:inline-block;margin-top:22px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}
.hm-more::after{content:" \2192"}

/* ── Photographs as backgrounds: real pictures, with a scrim so text holds ────── */
.ph-bg{position:absolute;inset:0;z-index:0}
.ph-bg img{display:block;width:100%;height:100%;object-fit:cover}
.ph-credit{position:relative;margin:22px 0 0;font:500 11px var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.72)}
.ph-credit a{color:inherit}

/* ── Hero: the proposition over the workstation ───────────────────── */
.hx--photo{position:relative;isolation:isolate;overflow:hidden;background:#000;color:#FFFFFF;
  min-height:min(100svh - 60px,900px);display:flex;align-items:flex-end}
.hx--photo .ph-bg img{object-position:62% 40%}
.hx--photo::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 46%,rgba(0,0,0,.34) 100%)}
.hx__inner{position:relative;z-index:1;padding-block:clamp(90px,14vh,170px) clamp(28px,5vw,64px)}
.hx__h{color:#FFFFFF;font-size:clamp(46px,12.4vw,150px)}
.hx__lede{margin:20px 0 0;max-width:52ch;font-size:clamp(17px,1.55vw,21px);line-height:1.5;color:#F2F2F2}
.hx__strengths{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.28)}
.hx__strengths a{display:block;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.18);color:#FFFFFF;text-decoration:none}
.hx__strengths b{display:block;font:800 clamp(18px,1.7vw,22px)/1.15 var(--sans);font-stretch:var(--cond);text-transform:uppercase;letter-spacing:.02em}
.hx__strengths span{display:none;margin-top:4px;font-size:14.5px;line-height:1.4;color:#E2E2E2}
.hx__strengths a:hover b,.hx__strengths a:focus-visible b{text-decoration:underline;text-underline-offset:4px}
@media (min-width:861px){
  .hx__strengths{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:0;margin-top:40px}
  .hx__strengths a{border-bottom:0;border-top:2px solid rgba(255,255,255,.55);padding:14px 0 0}
  .hx__strengths span{display:block}
}
.sel-lede{margin:-6px 0 22px;color:var(--ink-2);font-size:15.5px}
.sel-lede a{color:var(--ink)}
@media (min-width:861px){
  .hx--photo::after{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,0) 58%),
    linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 42%,rgba(0,0,0,.2) 100%)}
  .hx__h{font-size:clamp(56px,7.6vw,128px)}
}

/* ── Selected systems: one per discipline, each once ──────────────── */
.sel{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--hair)}
.sel__i a{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.sel__pic{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--film)}
.sel__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--snap,ease)}
.sel__pic--phone img{width:48%;margin:0 auto;object-fit:cover;object-position:top}
.sel__pic--loop{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:4px 8px;padding:10px;color:#FFFFFF;
  font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.sel__pic--loop{box-shadow:inset 0 0 0 1px #3A3A3A}
.sel__pic--loop span{border-left:2px solid #8A8A8A;padding-left:6px}
.sel__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sel__k{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sel__t b{font-size:19px;line-height:1.2}
.sel__l{font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.sel__s{align-self:flex-start;margin-top:4px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink-3);color:var(--ink-2);padding:1px 6px}
.sel__s--live{border-color:var(--ink);color:var(--ink)}
.sel__i a:hover b{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.sel__l{display:none}}
@media (min-width:861px){
  .sel{grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 28px;border-top:0}
  .sel__i--a{grid-column:span 7}.sel__i--b{grid-column:span 5}
  .sel__i--c,.sel__i--d,.sel__i--e{grid-column:span 4}
  .sel__i a{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:0;border:0}
  .sel__pic{aspect-ratio:16/10}
  .sel__i--a .sel__pic{aspect-ratio:16/9.6}
  .sel__pic--loop{grid-template-columns:repeat(3,1fr);gap:18px 14px;padding:28px;font-size:12px}
  .sel__i a:hover .sel__pic img{transform:scale(1.03)}
  .sel__t b{font-size:24px}
  .sel__i--a .sel__t b{font-size:30px}
  .sel__l{font-size:16px}
}

/* ── How we engineer ──────────────────────────────────────────────── */
.hm-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:0}
.hm-steps li{counter-increment:step;display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding:16px 0;border-top:1px solid var(--hair)}
.hm-steps li::before{content:counter(step);grid-row:span 2;font:800 30px/1 var(--sans);font-stretch:var(--cond);color:var(--ink-3)}
.hm-steps b{font-size:19px}
.hm-steps span{color:var(--ink-2);font-size:15.5px;line-height:1.45;max-width:52ch}
@media (min-width:861px){.hm-steps{grid-template-columns:repeat(3,1fr);column-gap:40px}.hm-steps li{grid-template-columns:1fr;padding-top:24px}.hm-steps li::before{font-size:44px;margin-bottom:10px}}

/* ── Founder-led: a band over a photograph of the founder at work ─ */
.fdr--photo{position:relative;isolation:isolate;overflow:hidden;background:#000;color:#FFFFFF;min-height:min(86svh,760px);display:flex;align-items:flex-end}
.fdr--photo .ph-bg img{object-position:28% 30%}
.fdr--photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.1) 72%)}
.fdr__inner{position:relative;z-index:1;width:100%;padding-block:clamp(48px,8vw,96px)}
.fdr__copy p{margin:0;max-width:52ch;font-size:clamp(16.5px,1.5vw,20px);line-height:1.5;color:#F2F2F2}
.fdr .hm-h2{color:#FFFFFF;font-size:clamp(30px,4.4vw,58px)}
.hm-more--onfilm{color:#FFFFFF;border-bottom-color:#FFFFFF}
@media (min-width:861px){
  .fdr--photo{align-items:center}
  .fdr--photo::after{background:linear-gradient(270deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,.05) 70%)}
  .fdr__inner{display:flex;flex-direction:column;align-items:flex-end}
  .fdr__copy{max-width:520px}
}

/* ── The ask ──────────────────────────────────────────────────────── */
.hm-end{background:var(--film);color:#FFFFFF;padding-block:clamp(56px,9vw,128px)}
.hm-end--photo{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(110px,18vw,240px) clamp(40px,6vw,72px)}
.hm-end--photo .ph-bg img{object-position:50% 38%}
.hm-end--photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.4) 100%)}
.hm-end__inner{position:relative;z-index:1}
.hm-end__h{color:#FFFFFF;font-size:clamp(44px,10vw,132px)}
.hm-end__h em{color:inherit}
.hm-end__mail{margin:18px 0 0;color:#B8B8B8;font-size:15px}
.hm-end__mail a{color:#FFFFFF}

/* Small phones (360×780): tighter rhythm so each section still fits one screen. */
@media (max-width:380px){
  .hm-sec{padding-block:30px}
  .hm-h2{margin-bottom:12px}
  .sel__i a{grid-template-columns:96px minmax(0,1fr)}
}

/* ── Motion: layers step into place, systems are dealt, steps arrive ─ */
@media (prefers-reduced-motion:no-preference){
  :root[data-js="on"] [data-reveal] .sel__i,:root[data-js="on"] [data-reveal] .hm-steps li{opacity:0;transform:translateY(28px)}
  :root[data-js="on"] [data-reveal].is-in .sel__i,:root[data-js="on"] [data-reveal].is-in .hm-steps li{transition:opacity .35s calc(var(--i,0) * 90ms),transform .6s var(--spring) calc(var(--i,0) * 90ms);opacity:1;transform:none}
}

/* Phone: disciplines run as one flowing line per layer, and the legend keeps only its labels. */
@media (max-width:860px){
  .sel__pic--loop{grid-template-columns:1fr 1fr;gap:3px 6px;padding:8px 7px;font-size:8px;letter-spacing:0}
}
@media (max-width:380px){
}
@media (max-width:860px){.hx--photo{min-height:calc(100svh - 124px)}.hx__inner{padding-top:72px}}
@media (max-width:380px){
  .hx__inner{padding-top:48px;padding-bottom:22px}
  .hx__h{font-size:41px}
  .hx__lede{font-size:16px;margin-top:14px}
  .hx .hm-cta{margin-top:18px;gap:10px}
  .hx .btn{min-height:48px}
  .hx__strengths{margin-top:18px}
  .hx__strengths a{padding:8px 0}
  .hx__strengths b{font-size:16.5px}
  .hx .ph-credit{margin-top:12px}
}