/* ===== MODEL 07 — page-specific only. Shared system lives in yphos.css ===== */

/* hero */
#hero-07{position:relative;height:100vh;min-height:680px;overflow:hidden;display:flex;align-items:flex-start;color:#fff;background:radial-gradient(120% 90% at 62% -8%,#0c2a44,#061726 44%,#020a12 82%)}
#hero-07 .bg{position:absolute;inset:0;z-index:0;background-color:#020a12;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.15);filter:blur(20px);will-change:filter,transform;animation:kb 26s ease-out forwards,unblur 3.2s var(--ease) .1s forwards}
.ph-hero07{background-image:url('../../../../../uploads/07-hero.jpg')}
#hero-07::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(2,8,14,.42),transparent 28%,transparent 54%,rgba(2,8,14,.26))}
#hero-07 .in{position:relative;z-index:3;max-width:var(--wide);margin:24vh auto 0;padding:0 50px;width:100%;opacity:0;transform:translateY(16px);animation:rise07 1s var(--ease) .25s forwards}
@keyframes rise07{to{opacity:1;transform:none}}
@keyframes kb{to{transform:scale(1)}}
@keyframes unblur{from{filter:blur(20px)}to{filter:blur(0)}}
#hero-07 h1.ey{line-height:inherit}#hero-07 .ey{color:rgba(255,255,255,.72);margin-bottom:22px}
#hero-07 .hline{color:#fff;font-size:clamp(42px,5.8vw,92px);font-weight:200;letter-spacing:-.045em;line-height:.96;max-width:20ch}
/* one element: the rule is drawn as the bar's own top edge, inset to the gutters */
#hero-07 .bar{position:absolute;left:0;right:0;bottom:24px;z-index:4;max-width:var(--wide);margin:0 auto;padding:18px 28px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;color:rgba(255,255,255,.9)}
#hero-07 .bar::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;background:rgba(255,255,255,.36)}
/* Below --maxw the hero and the body content are both edge-to-edge, so the hero's
   wider 50px gutter stops being a wider container and just reads as misalignment. */
@media(max-width:1320px){#hero-07 .in{padding-left:40px;padding-right:40px}}
#hero-07 .bar .sd{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.999);font-weight:400}
/* hero Discover runs inverted: solid white at rest, outline on hover.
   Scoped to the hero so the other .btn.ghost buttons keep the shared behavior. */
#hero-07 .bar .btn.ghost{background:#fff;border-color:#fff;color:var(--ink)}
#hero-07 .bar .btn.ghost:hover{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
@media(max-width:600px){#hero-07 .in,#hero-07 .bar{padding-left:16px;padding-right:16px}#hero-07 .bar::before{left:16px;right:16px}}
@media(max-width:600px){.exp .in{padding-left:16px;padding-right:16px}}



/* signature — immersive dark scale */
/* --glow-h is the fixture layer's height (its own image height at this size). Up to
   1400 the fixed 350px top padding sits right; past that the fixture keeps growing
   with the viewport, so the padding has to grow with it or the headline ends up
   inside the glow. 633px caps both so it stops scaling on a 27". */
.sig{--glow-h:31.7vw;position:relative;background:var(--deep);color:#fff;
  padding:350px 0 160px;overflow:hidden;text-align:center;margin-top:0}
@media(min-width:1400px){.sig{--glow-h:min(31.7vw,633px);padding-top:calc(var(--glow-h) - 93px)}}
/* the lit fixture sits clear above the copy, undimmed — no scrim. The shot is a
   glow on near-black, so `screen` drops its background to nothing against --deep:
   seamless, and the rays keep their full extent (a mask clipped them). */
/* height is the image's own height (width/1.58) so the bottom fade always lands
   exactly on its bottom edge — the downward rays reach the frame edge and cut
   hard otherwise. */
.sig::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--glow-h);z-index:0;pointer-events:none;
  background:url('../../../../../uploads/07-on.jpg') center top/min(50%,1000px) auto no-repeat;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%)}
@media(max-width:760px){
  .sig{--glow-h:70.9vw;padding-top:250px}
  .sig::before{background-size:112% auto}
}
.sig .in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sig h2{color:#fff;font-size:clamp(32px,4.8vw,66px);font-weight:200;letter-spacing:-.03em;line-height:1.04;max-width:20ch;margin:16px auto 0}
.sig p{color:rgba(255,255,255,.7);max-width:60ch;margin:24px auto 0}
.sig .mini{display:flex;justify-content:center;gap:64px;margin-top:56px;flex-wrap:wrap}
.sig .mini b{display:block;font-size:clamp(30px,3vw,46px);font-weight:200}
.sig .mini span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:6px;display:block}
.sig .lnk{margin-top:44px;display:inline-flex;align-items:center;gap:9px;color:#eafaff;font-size:14px;border:1px solid rgba(255,255,255,.32);border-radius:26px;padding:12px 28px;transition:.3s var(--ease)}
.sig .lnk:hover{background:rgba(255,255,255,.1)}

/* ===== mosaic — centered intro + 2 rows of 1:2 / 2:1 photos (wide container) ===== */
.mos{padding:130px 0 20px}
.mos-in{max-width:var(--wide);margin:0 auto;padding:0 40px}
.mos-head{text-align:center;max-width:640px;margin:0 auto 74px}
.mos-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.mos-head p{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin-top:20px}
.mos-head a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.mos-row{display:grid;gap:28px}
.mos-row+.mos-row{margin-top:28px}
.mos-row.a{grid-template-columns:1fr 2fr}
.mos-row.b{grid-template-columns:2fr 1fr}
.mos-row.v{grid-template-columns:1fr}
.mos-row .im{background-color:var(--soft);background-position:center;background-size:cover;background-repeat:no-repeat}
.mos-row .im.w{aspect-ratio:16/9}
@media(max-width:820px){.mos{padding:90px 0 10px}.mos-head{margin-bottom:48px}.mos-row,.mos-row.a,.mos-row.b,.mos-row.v{grid-template-columns:1fr;gap:18px}.mos-row+.mos-row{margin-top:18px}.mos-row .im{aspect-ratio:4/3}.mos-row .im.w{aspect-ratio:16/9}}
/* consecutive material blocks: their 120px paddings stack to 240px, which
   breaks the band -> block -> block -> band rhythm. Collapse one side so
   every gap in the run is a uniform 120px. */
.matsec + .matsec{padding-top:0}

/* ===== full-bleed experience band ===== */
.exp{position:relative;height:92vh;min-height:560px;overflow:hidden}
.exp .media{position:absolute;inset:0;background-color:var(--deep);background-position:center;background-size:cover;background-repeat:no-repeat}
.ph-band{background-image:url('../../../../../uploads/07-band.jpg')}
.ph-mat{background-image:url('../../../../../uploads/07-vertical.jpg')}
.ph-serv2{background-image:url('../../../../../uploads/07-replaceable.jpg')}
.ph-band2{background-image:url('../../../../../uploads/07-band2.jpg')}

/* feature-carousel head — same centered heading + lead as the mosaic */
.gcar .head{max-width:700px;margin:0 auto 70px}
.gcar .head .ey{margin-bottom:14px}
/* measure set so the heading breaks before "every" rather than after it;
   the paragraph keeps the wider .head measure */
.gcar .head h2{font-size:clamp(28px,3.4vw,40px);font-weight:400;letter-spacing:-.02em;color:var(--ink);max-width:28ch;margin:0 auto}
.gcar .head p{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin-top:20px}
.ph-mos1{background-image:url('../../../../../uploads/07-anchored.jpg')}
.ph-mos2{background-image:url('../../../../../uploads/07-blue2-web.jpg')}
.ph-mos3{background-image:url('../../../../../uploads/07-yachtc-web.jpg')}
.ph-mos4{background-image:url('../../../../../uploads/nightswim.jpg')}
.ph-feat-colour{background-image:url('../../../../../uploads/03-rich.jpg')}
.ph-feat-dmx{background-image:url('../../../../../uploads/mfd-07.jpg')}
.ph-feat-bright{background-image:url('../../../../../uploads/07-hp-feat.jpg')}
.ph-feat-bronze{background-image:url('../../../../../uploads/07-feat-bronze.jpg')}
.ph-feat-tech{background-image:url('../../../../../uploads/03b-feat-tech.jpg')}

/* control & integration — the five ways in, as a ladder.
   The bar under each number lengthens down the list, so depth of
   integration reads before the copy does. */
.ctrl{padding:140px 0;overflow-x:clip}
.ctrl-in{max-width:var(--maxw);margin:0 auto;padding:0 40px}
/* intro sits two-up; the ladder below runs the full container width */
.ctrl-top{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;align-items:start;margin-bottom:76px}
.ctrl .head{max-width:none;margin:0}
.ctrl .head h2{margin-top:16px;font-size:clamp(26px,3vw,40px);font-weight:200;letter-spacing:-.03em;line-height:1.08;color:var(--ink);max-width:16ch}
.ctrl .head p{margin-top:22px;color:var(--ink-2);font-size:16px;line-height:1.68;max-width:52ch}
.ctrl-media{aspect-ratio:2/1;background-color:var(--soft);background-position:center;background-size:cover;background-repeat:no-repeat}
.ph-ctrl{background-image:url('../../../../../uploads/mfd-07.jpg')}
/* the ways in, read across rather than down: equal columns divided by hairlines */
.lad{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lrow{position:relative;padding:28px 30px 44px;border-left:1px solid var(--line)}
.lrow:first-child{border-left:0;padding-left:0}
.lrow .idx{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.lrow h4{margin-top:26px;font-size:18px;font-weight:500;letter-spacing:0;color:var(--ink)}
.lrow p{margin-top:14px;font-size:14px;color:var(--ink-2);line-height:1.36em}
@media(max-width:820px){.ctrl{padding:96px 0}
  .ctrl-top{grid-template-columns:1fr;gap:34px;margin-bottom:46px}
  .ctrl-media{aspect-ratio:4/3}
  .lad{grid-template-columns:1fr 1fr}
  .lrow{padding:28px 20px 32px}
  .lrow:nth-child(odd){border-left:0;padding-left:0}
  .lrow:nth-child(n+3){border-top:1px solid var(--line)}}
/* the section gutter follows the shared one: 40px until 600, then 16px, so the
   control block never sits narrower than the sections around it */
@media(max-width:600px){.ctrl-in{padding:0 16px}}
@media(max-width:520px){.lad{grid-template-columns:1fr}
  .lrow,.lrow:first-child{padding:28px 0 30px;border-left:0}
  .lrow:nth-child(n+2){border-top:1px solid var(--line)}}

/* ===== closing statement — wide photo with copy overlaid at the foot ===== */
.closer{padding:0}
.closer-in{max-width:none;margin:0;padding:0}
.closer-media{position:relative;height:120vh;overflow:hidden;display:flex;align-items:flex-end;
  background-color:var(--deep);background-position:center;background-size:cover;background-repeat:no-repeat}
.closer-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgb(6 8 12 / 18%))}
.closer-tx{position:relative;z-index:2;width:100%;padding:0 8% 6.5%;text-align:center}
.closer-tx p{margin:0 auto;color:#fff;max-width:46ch;
  font-size:26px;font-weight:400;line-height:1.35;letter-spacing:-.01em}
@media(max-width:600px){.closer-media{height:100vh}
  .closer-tx{padding:0 22px 9%}.closer-tx p{font-size:clamp(17px,4.6vw,22px);line-height:1.4}}
.ph-ref2{background-image:url('../../../../../uploads/07-ref-2.jpg')}
.ph-luminary{background-image:url('../../../../../uploads/luminary.jpg')}


/* ===== standard / high-power toggle — lives inside .sig ===== */
.seg{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:5px;margin:38px 0 0}
.seg button{background:none;border:none;font-family:inherit;color:rgba(255,255,255,.7);font-size:14px;padding:9px 26px;border-radius:24px;cursor:pointer;transition:.3s var(--ease)}
.seg button.on{background:#fff;color:var(--ink)}
/* available colors */
.sigsw{display:flex;justify-content:center;gap:46px;flex-wrap:wrap;margin-top:56px}
.sig .acts{margin-top:80px}
.sigsw>div{display:flex;flex-direction:column;align-items:center;gap:11px}
.sigsw .sw{width:22px;height:22px;border-radius:50%;border:0}
.sigsw span:last-child{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media(max-width:760px){.sigsw{gap:28px}}

/* craft / engineering splits (.craft .media & .craft p come from yphos.css) */
.craft{padding:120px 0}
.craft .sp{display:grid;grid-template-columns:6fr 4fr;gap:60px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.craft .sp.rev{grid-template-columns:4fr 6fr}
.craft .sp.rev .media{order:2}
.craft .sp+.sp{margin-top:100px}
.craft .ey{margin-bottom:16px}
.craft h2{font-size:clamp(24px,2.8vw,36px);font-weight:400;color:var(--ink);letter-spacing:-.02em}
@media(max-width:820px){.craft .sp,.craft .sp.rev{grid-template-columns:1fr;gap:32px}.craft .sp.rev .media{order:-1}.craft .sp+.sp{margin-top:64px}}


/* cta */
.ph-cta{background-image:url('../../../../../uploads/07-cta.jpg')}
#cta .media{background-color:#04121f}
.cta .lead{color:rgba(255,255,255,.82);font-size:18px;margin:16px auto 30px;max-width:46ch}
/* the statement leads, heavier and larger; the closing line answers it a size down
   and a shade back, so the two read as one thought rather than two headlines */
.cta .in{max-width:900px}
.cta h2{font-size:clamp(30px,3.5vw,46px);font-weight:400;letter-spacing:-.02em;line-height:1.14;max-width:24ch;margin:0 auto}
.cta h2 .alt{display:block;margin-top:16px;font-size:.68em;font-weight:200;letter-spacing:-.01em;color:rgba(255,255,255,.7)}
.cta .in .btn{margin-top:40px}
/* ---- shop / version selector ------------------------------------------
   Same block as the other model pages: bare swatches that crossfade the
   product shot, one "Name · lumens" line, stacked black / outline actions. */
.shop{padding:100px 0;background:rgb(250,250,250)}
.pfig{position:relative}
.pfig .media{aspect-ratio:1/1}
.pfig .layer{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.pfig .layer.on{opacity:1}
.vpick{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:30px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vpick+.vpick{margin-top:0;border-top:none}
.vname{font-size:13px;color:var(--ink);font-weight:400;transition:opacity .22s var(--ease)}
.vname.fade{opacity:0}
.vname i{font-style:normal;color:var(--muted);margin:0 7px}
.vname em{font-style:normal;color:var(--muted)}
.swrow{display:flex;gap:12px;flex-wrap:wrap}
.swrow .sw-whp{background:#eef3f7;box-shadow:none}
.swrow .sw-bhp{background:#1f6fd0}
.swrow button.is-hp::after{content:"HP";position:absolute;inset:0;display:grid;place-items:center;font-size:7px;font-weight:600;line-height:1;letter-spacing:.01em}
.swrow .sw-whp::after{color:#90959e}
.swrow .sw-bhp::after{color:#fff}
.swrow button{position:relative;width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.16);
  padding:0;cursor:pointer;transition:box-shadow .3s var(--ease)}
.swrow button:hover{box-shadow:0 0 0 1px #fff,0 0 0 2px var(--faint)}
.swrow button[aria-selected="true"]{box-shadow:0 0 0 2px #fff,0 0 0 3px #90959e}
.swrow button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.swrow .sw-dual,.swrow .sw-dualhp,.swrow .sw-rgbw,.swrow .sw-rgb{background:none;overflow:hidden}
.swrow .sw-rgbw,.swrow .sw-rgb{border:0}
/* the layer paints into ::before so ::after stays free for the HP label */
.swrow .sw-dual::before,.swrow .sw-dualhp::before,.swrow .sw-rgbw::before,.swrow .sw-rgb::before{content:"";position:absolute;inset:0;border-radius:50%}
.swrow .sw-dual::before,.swrow .sw-dualhp::before{background:linear-gradient(90deg,#eef3f7 50%,#1f6fd0 50%)}
.swrow .sw-rgbw::before{background:url('../../img/rgbw-2.jpg') center/cover}
.swrow .sw-rgb::before{background:url('../../img/rgb2.jpg') center/cover}
/* HP on the dual swatch straddles both halves, so it carries its own scrim */
.swrow .sw-dualhp::after{color:#fff;text-shadow:0 0 3px rgba(6,8,12,.9)}
.buy .acts{margin-top:30px;display:flex;flex-direction:column;align-items:stretch;gap:10px;max-width:330px}
.buy .acts .btn{width:100%;padding:10px 32px;font-size:16px;margin-bottom:0;background:var(--ink);border-color:var(--ink);color:#fff}
.buy .acts .btn:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.buy .acts .btn.alt{background:transparent;border-color:var(--ink);color:var(--ink)}
.buy .acts .btn.alt:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:880px){.shop{padding:40px 0 70px}.shop-grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:600px){.vpick{gap:16px}.buy .acts{max-width:none}}
/* two-column lead on this page only; the shared rule is a single 70ch column.
   Held to 1100px so each column keeps a readable measure at 19px. */
.ttiles-lead{max-width:1100px;margin-left:auto;margin-right:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
@media(max-width:900px){.ttiles-lead{grid-template-columns:1fr;gap:22px}}