/* ---- page-local token overrides. The homepage predates yphos.css and uses a
   1560px .wrap plus its own soft/muted grays; keeping them here means the shared
   file supplies everything else without shifting this layout. ---- */
:root{--maxw:1560px;--soft:#f4f5f6;--muted:#8b9099}
/* the homepage sets headings a shade heavier and looser than the model pages */
h1,h2,h3,h4{font-weight:400;letter-spacing:-.02em}
/* button + link variants the homepage uses that the shared file doesn't define */
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.blue:hover{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn.ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ink:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.dark{background:#fff;border-color:#fff;color:var(--ink)}
.btn.dark:hover{background:transparent;border-color:#fff;color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed;background:var(--blue);border-color:var(--blue);color:#fff}
.lnk{font-weight:400}   /* homepage runs the link a touch lighter than the model pages */

.offcanvas .ocsub a.ocall{color:var(--blue);font-weight:600}

/* ===== hero — 2.1:1 image with the headline overlaid ===== */
.hero{position:relative;height:85vh;min-height:460px;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.hero .poster{position:absolute;inset:0;width:100%;height:100%;z-index:0;background-color:#04060a;background-position:center;background-size:cover;background-repeat:no-repeat}
.hero .in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 50px 5vh;width:100%;text-align:center;opacity:0;transform:translateY(20px);animation:rise 1.1s var(--ease) .3s forwards}
@media(max-width:820px){.hero .in{padding:0 24px max(6vh,34px)}}

/* ===== bestsellers — product carousel on the product-shot gray =====
   Reuses the shared .gcar-track / .gcar-btn mechanics (and their JS) so the
   arrows, scroll-snap and end-disabling behave exactly like the model pages;
   only the column count and card body are page-specific. */
.best{background:rgb(250,250,250);padding:80px 0 130px}
.best-in{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.best-head{text-align:center;margin-bottom:64px}
.best-head h2{font-size:28px;font-weight:400;letter-spacing:-.02em}
.best-head p{margin-top:16px;font-size:15.5px;line-height:1.75;color:var(--body);max-width:60ch;margin-left:auto;margin-right:auto}
.pcar{grid-auto-columns:calc((100% - 72px)/4)!important;gap:24px!important}
.pcar .pitem{scroll-snap-align:start;min-width:0;display:block;color:inherit}
.pcar .shot{aspect-ratio:2/1.8;background-color:rgb(250,250,250);background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform .6s var(--ease)}
.pcar .pitem:hover .shot{transform:scale(1.03)}
.pcar .pnm{margin-top:18px;font-size:17px;font-weight:500;color:var(--ink);text-align:center}
.pcar .pline{display:block;height:2px;width:0;background:var(--ink);margin:3px auto 0;transition:width .55s var(--ease)}
.pcar .pitem:hover .pline{width:48px}
.pcar .pmt{margin-top:3px;font-size:13.5px;color:var(--muted);text-align:center}
.best-cta{text-align:center;margin-top:56px}
/* negative button: outline only, fills on hover */
.btn.line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.line:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:1100px){.pcar{grid-auto-columns:calc((100% - 48px)/3)!important}}
@media(max-width:820px){.best{padding:84px 0 92px}.best-in{padding:0 16px}.pcar{grid-auto-columns:calc((100% - 24px)/2)!important}.best-head{margin-bottom:42px}}
/* one-up: 82% left the card hugging the left with dead space beside it.
   Full-width columns center by definition; the arrows carry the affordance. */
@media(max-width:560px){.pcar{grid-auto-columns:100%!important}}

/* ===== product promo pair — same geometry as the material tiles, photo-backed ===== */
/* copy sits at the top, button at the foot, everything centered */
.dual.promo .half{background-color:var(--deep);background-position:center;background-size:cover;background-repeat:no-repeat;
  padding:88px 48px;justify-content:space-between;align-items:center;text-align:center}
.dual.promo .half::before{content:"";position:absolute;inset:0;z-index:0;background-image:inherit;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scale(1);transition:transform 2s cubic-bezier(.25,.46,.45,.94)}
.dual.promo .half:hover::before{transform:scale(1.03)}
.dual.promo .half::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgb(6 8 12 / 75%),rgba(6,8,12,0) 50%,rgba(6,8,12,.012))}
.dual.promo .k{color:rgba(255,255,255,1)}
.dual.promo .newtag{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  margin-bottom:12px;background:#f6741a;color:#fff;white-space:nowrap;
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  border-radius:20px;padding:4px 12px;line-height:1}
.dual.promo h3{max-width:24ch;margin-left:auto;margin-right:auto}
.dual.promo p{max-width:46ch;margin-left:auto;margin-right:auto}
.dual.promo .btn{position:relative;z-index:2;margin-top:32px}
.ph-promo02{background-image:url('../../../../../uploads/02-home.jpg')}
.ph-promo03{background-image:url('../../../../../uploads/03-home.jpg')}

/* ===== illuminated by — full-width row of 2:3 portraits, squared ===== */
.life{padding:120px 0 0}
.life .head{text-align:center;max-width:640px;margin:0 auto 62px;padding:0 28px}
.life .head h2{margin-top:10px;font-size:28px;font-weight:400;letter-spacing:-.02em}
.lrow{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:#000}
.lfig{position:relative;aspect-ratio:2/3;overflow:hidden;background-color:var(--deep);
  background-position:center;background-size:cover;background-repeat:no-repeat}
.lfig::before{content:"";position:absolute;inset:0;z-index:0;background-image:inherit;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transform:scale(1);transition:transform 2s cubic-bezier(.25,.46,.45,.94)}
.lfig:hover::before{transform:scale(1.03)}
.lfig::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(6,8,12,.80))}
.lfig .c{position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;padding:0 14px}
.lfig .c span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.lfig .c b{display:block;margin-top:7px;font-size:14px;font-weight:500;color:#fff;letter-spacing:.01em}
.lrow.nocap .lfig::after{display:none} /* Moments gallery (front-page.php): no captions, no gradient */
@media(max-width:1100px){.lrow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.lrow{grid-template-columns:repeat(2,1fr)}.life{padding:84px 0 0}.life .head{margin-bottom:40px}}

/* ===== manifesto — white, editorial. Key phrases carry the weight, the
   connective tissue drops back, same idea as the dark version on the live site. ===== */
.mani{padding:150px 0 140px;background:#fff}
.mani-in{max-width:960px;margin:0 auto;padding:0 40px}
.mani .ey{margin-bottom:44px}
.mani h2{font-size:clamp(26px,3.1vw,40px);font-weight:400;letter-spacing:-.02em;line-height:1.28;color:var(--ink);max-width:24ch}
.mani p{font-size:18px;font-weight:400;line-height:1.62;color:var(--ink);margin-top:30px;max-width:60ch}
.mani p strong{color:var(--ink);font-weight:500}
.mani .mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:76px;padding-top:52px;border-top:1px solid var(--line)}
/* flex + a fixed em height so the flag cell is exactly as tall as the numerals,
   otherwise its label would ride up out of line with the other three */
.mani .mstats b{display:flex;align-items:flex-end;min-height:1.1em;line-height:1.1;font-size:clamp(26px,2.6vw,38px);font-weight:200;color:var(--ink);letter-spacing:-.02em}
.mani .mstats b i{font-style:normal;font-size:.4em;font-weight:400;color:var(--muted);margin-left:4px;line-height:1.9}
.mani .mstats .euflag{height:.82em;width:auto;display:block}
/* the flag is far narrower than its label, so this cell centers rather than
   hanging the mark off the left edge of a much wider caption */
.mani .mstats .ctr{text-align:center}
.mani .mstats .ctr b{justify-content:center}
.mani .mstats span{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.mani{padding:92px 0 88px}.mani-in{padding:0 16px}
  .mani .mstats{grid-template-columns:1fr 1fr;gap:30px 20px;margin-top:52px;padding-top:38px;
    text-align:center}
  .mani .mstats b{justify-content:center}}

/* ===== full-bleed image band ===== */
.fullimg{position:relative;height:92vh;min-height:520px;border-top:1px solid #000;border-bottom:1px solid #000;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  background-color:var(--deep);background-position:center;background-size:cover;background-repeat:no-repeat}
/* the still stays as poster and as the section background, so a browser that blocks
   autoplay -- or a visitor who asked for less motion -- still gets the photograph */
.fullimg .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
@media(prefers-reduced-motion:reduce){.fullimg .bgvid{display:none}}
.fullimg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,8,12,.206),rgba(6,8,12,.147) 45%,rgba(6,8,12,.304))}
.fullimg .in{position:relative;z-index:2;max-width:760px;padding:0 28px}
.fullimg h2{color:#fff;font-size:clamp(30px,4.4vw,56px);font-weight:200;letter-spacing:-.03em;line-height:1.06}
.fullimg p{color:rgba(255,255,255,.84);font-size:18px;font-weight:300;margin:18px auto 32px;max-width:48ch}

/* ===== two link tiles — same shape as the 904L / AB2 pair ===== */
.dual.links .half{min-height:50vh;justify-content:flex-end;cursor:pointer;transition:background .5s var(--ease)}
.dual.links .tech{background-color:var(--deep);background-image:url('../../../../../uploads/home-tech.jpg');background-position:center;background-size:cover;background-repeat:no-repeat}
.dual.links .tech::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(6 8 12 / 0%) 30%,rgba(6,8,12,.2) 60%,rgba(6,8,12,.7))}
.dual.links .supp{background-color:var(--deep);background-image:url('../../../../../uploads/home-tech-c.jpg');background-position:center;background-size:cover;background-repeat:no-repeat}
.dual.links .supp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(6 8 12 / 0%) 30%,rgba(6,8,12,.2) 60%,rgba(6,8,12,.7))}
.dual.links .lnk{margin-top:20px}
.dual.links .half:hover .lnk .ar{transform:translateX(5px)}
/* the pair reveals one after the other rather than together */
.dual .half:nth-child(2).reveal{transition-delay:.12s}
/* same slow drift the promo tiles use */
.dual.links .half::before{content:"";position:absolute;inset:0;z-index:0;background-image:inherit;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scale(1);transition:transform 2s cubic-bezier(.25,.46,.45,.94)}
.dual.links .half:hover::before{transform:scale(1.03)}
.dual.links .half::after{z-index:1}
.dual.links .in2{position:relative;z-index:2}
/* carousel cards fade in across the row */
.pcar .pitem.reveal:nth-child(2){transition-delay:.07s}
.pcar .pitem.reveal:nth-child(3){transition-delay:.14s}
.pcar .pitem.reveal:nth-child(4){transition-delay:.21s}
.ph-hero{background-image:url('../../../../../uploads/intro-hero.jpg')}
.ph-full{background-image:url('../../../../../uploads/home-full.jpg')}

/* ===== hero (old) ===== */
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgb(4 6 10 / 13%),rgba(4,6,10,.08) 65%,rgba(4,6,10,.55))}
@keyframes rise{to{opacity:1;transform:none}}
.hero .ey{margin-bottom:0;font-size:20px;color:#fff;font-weight:350;text-transform:none;letter-spacing:.1px;text-align:center;line-height:1.3em}
/* justify-content, not text-align: .acts is a flex row, so text-align alone
   cannot move the button -- this is what actually centers it */
.hero .acts{margin-top:24px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.hero .btn.ghost{background:#15161621;border-color:rgba(255,255,255,.7);color:#fff;font-size:15px;padding:8px 24px}
.hero .btn.ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero .cue{position:absolute;left:50px;bottom:28px;z-index:2;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:12px}
.hero .cue i{width:34px;height:1px;background:rgba(255,255,255,.5);transform-origin:left;animation:slide 2s var(--ease) infinite}
@keyframes slide{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}

/* ===== manifesto ===== */

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:18px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}


.dual{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#000}
@media(max-width:760px){.dual{grid-template-columns:1fr}
  .dual.promo .half{padding:56px 24px;min-height:52vh}
  .dual.links .half{padding:44px 24px;min-height:40vh}}
.dual .half{position:relative;padding:60px 56px;color:#fff;overflow:hidden;min-height:64vh;display:flex;flex-direction:column;justify-content:flex-end}
.dual .steel{background:linear-gradient(160deg,#10151c,#1a2531)}
.dual .steel::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 70% 25%,rgba(155,176,198,.28),transparent 62%)}
.dual .bronze{background:linear-gradient(160deg,#15110c,#241a10)}
.dual .bronze::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 70% 25%,rgba(181,138,91,.32),transparent 62%)}
.dual .in2{position:relative;z-index:2}
.dual .k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.dual .steel .k{color:var(--steel)}.dual .bronze .k{color:var(--bronze)}
.dual h3{color:#fff;font-size:clamp(26px,3vw,34px);font-weight:350;letter-spacing:-.5px;line-height:1.25em;margin-top:14px}
.dual p{color:rgba(255,255,255,.72);font-size:15.5px;margin-top:14px;max-width:38ch}

.swatches{display:flex;justify-content:center;gap:16px;margin-top:40px;flex-wrap:wrap}

/* ===== control ===== */
@media(max-width:820px){.ctrl .sp{grid-template-columns:1fr;gap:36px}}

/* ===== illuminated lifestyle ===== */
@media(max-width:760px){.ltrio{grid-template-columns:1fr;grid-template-rows:none;height:auto}.ltrio .big{aspect-ratio:4/5}.ltrio .sm{aspect-ratio:16/10}}


/* ===== cta + footer ===== */
.cta{position:relative;padding:390px 0 110px;text-align:center;color:#fff;overflow:hidden}
.cta .bg{position:absolute;inset:0;background:#06080c center/cover no-repeat}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(rgb(6 8 12 / 15%) 40%,rgb(6 8 12 / 20%))}
.cta .in{max-width:760px}
.cta h2{color:#fff;font-size:clamp(34px,5vw,58px);font-weight:200;letter-spacing:-.03em}
.cta p{color:rgba(255,255,255,.82);font-size:18px;margin:18px auto 34px;max-width:48ch}
.foot{background:#06080c;color:rgba(255,255,255,.55);padding:64px 0 40px}
.foot .wm{text-align:left}.foot .wm b{font-family:var(--brand);font-weight:800;letter-spacing:.34em;font-size:22px;color:#fff;padding-left:.34em}
.foot .wm span{font-size:9px;letter-spacing:.3em;color:rgba(255,255,255,.5);display:block;margin-top:8px}
.foot .wm p{font-size:13px;margin-top:18px;max-width:32ch}
.foot h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-bottom:16px}
.foot a{display:block;font-size:14px;color:rgba(255,255,255,.72);padding:5px 0;transition:color .3s}.foot a:hover{color:#fff}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.vis{opacity:1;transform:none}


/* Mobile menu: five destinations on one screen, no product list.
   Scoped to .oc2 so the shared .offcanvas rules stay as they are. */
.oc2{padding:0 24px 30px;display:flex;flex-direction:column;overflow:hidden}
.oc2-top{display:flex;align-items:center;justify-content:space-between;
  height:62px;margin:0 -24px;padding:0 16px 0 24px;border-bottom:1px solid var(--line)}
.oc2-brand{padding:0;border:0}
.oc2-brand img{height:14px;width:auto;display:block}
.oc2 .oc-close{position:static;width:42px;height:42px;font-size:19px}
.oc2-nav{display:flex;flex-direction:column;margin-top:10px}
.oc2 .oc2-nav a{font-size:26px;font-weight:300;letter-spacing:-.025em;
  color:var(--ink);padding:19px 0;border-bottom:1px solid var(--line)}
.oc2 .oc2-nav a:last-child{border-bottom:0}
.oc2-foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.oc2 .oc2-foot a{font-size:14px;font-weight:350;color:var(--body);
  padding:0;border:0;letter-spacing:0}
@media(max-height:680px){
  .oc2 .oc2-nav a{font-size:22px;padding:15px 0}
  .oc2-foot{padding-top:18px}}