/* Dr. Mark Cheng site draft.
   Base: RightLife direction. Nav, buttons, footer: Aboard direction. Colors: the live site's blue, teal, black. */
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 1000;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-latin-opsz-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --black:#000;--ink:#161616;--mute:#606060;--line:#e7e9eb;--tint:#f5f6f7;
  --blue:#017bb6;      /* the live #018DD0, one step deeper so white text on it stays readable */
  --blue-live:#018dd0;
  --teal:#00e3cf;
  --ease:cubic-bezier(.32,.72,0,1);--ease-io:cubic-bezier(.65,0,.35,1);  /* aboard.com's --rd-ease and --rd-ease-io */
  --ease-foot:cubic-bezier(.4,0,.2,1);                                   /* threddle.com's footer ease */
  --ease-load:cubic-bezier(.16,1,.3,1);                                  /* moritzlegal.com's load ease */
  --r:22px;--pad:clamp(20px,4vw,56px);--edge:max(var(--pad),calc((100vw - 1320px)/2 + var(--pad)));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;text-align:left;-webkit-font-smoothing:antialiased;overflow-x:clip;background:#fff;color:var(--ink);font:500 16px/1.55 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:-.01em}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,blockquote,ul{margin:0}
h1,h2,h3{text-wrap:balance;font-family:"DM Sans",sans-serif}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--pad)}
.nw{white-space:nowrap}
em.s{font:italic 400 1.1em/1.1 "Instrument Serif",Georgia,serif;letter-spacing:-.01em;color:var(--blue)}
.on-dark em.s,.hero em.s{color:var(--teal)}
h2{font-size:clamp(32px,3.45vw,50px);font-weight:500;line-height:1.16;letter-spacing:-.04em}
.sub{color:var(--mute);margin-bottom:6px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px 12px}
.sec{padding-block:clamp(60px,8vw,112px)}
.sec-b{padding-bottom:clamp(60px,8vw,112px)}

/* Page load, measured from moritzlegal.com. Hero media, nav, and headline word values are its real ones; the label, headline, and sub copy start times are estimates.
   Only `from` keyframes with backwards fill: when each animation ends the element is back to its own styles, so hovers and the button press still work.
   Plain CSS with no script involved, so nothing can get stuck hidden. */
@keyframes load-media{from{opacity:.001;transform:scale(1.06)}}
@keyframes load-nav{from{opacity:.001;transform:translateY(-150px)}}
@keyframes load-word{from{opacity:.001;transform:translateY(12px);filter:blur(4px)}}
@keyframes load-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes load-fade{from{opacity:0}}
.hero .w{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .hero .strips{animation:load-media 1.8s var(--ease-load) backwards}
  .bar{animation:load-nav 1.2s cubic-bezier(.22,.8,.3,1) .1s backwards;animation-timing-function:linear(0,.104 5.9%,.296 11.8%,.484 17.6%,.639 23.5%,.754 29.4%,.836 35.3%,.893 41.2%,.931 47.1%,.956 52.9%,.972 58.8%,.982 64.7%,.989 70.6%,.993 76.5%,.996 82.4%,.998 94.1%,1)}
  .hero .w{animation:load-word .8s var(--ease-load) calc(.45s + var(--i)*50ms) backwards}
  .hero .eyebrow{animation:load-fade .8s var(--ease-load) .3s backwards}
  .hero .copy>:not(h1):not(.display):not(.eyebrow){animation:load-rise .8s var(--ease-load) .6s backwards}
}

/* Reveal: fade and rise, fires once. Never put .reveal on a button: it would replace the button's own transition.
   Safety net in each page's head: a script error or a failed site.js removes .js, so content can never stay hidden. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

/* Buttons, measured from aboard.com: .btn-rd-disc (fill .4s, chip .6s) and .rd-nav-cta (fill and chip .5s).
   The whole chip moves 2px up and right, the fill swaps, and the button presses to .98. Aboard's orange is Mark's blue here. */
.ar{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);transition:transform .6s var(--ease),background-color .4s var(--ease)}
.ar svg{display:block;width:12px;height:12px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-radius:99px;background:var(--black);color:#fff;font:500 14px/1.15 "DM Sans",sans-serif;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;padding:8px 9px 8px 18px;cursor:pointer;transition:background-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.btn:active{transform:scale(.98)}
.btn.blue{background:var(--blue);transition:background-color .5s var(--ease-io),color .5s var(--ease-io),transform .4s var(--ease)}
.btn.blue .ar{transition:transform .5s var(--ease),background-color .5s var(--ease-io)}
.btn.pale{background:#fff;color:#000}
.btn.pale .ar{background:rgba(0,0,0,.08)}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;background:var(--blue);color:#fff}
.btn.blue:focus-visible,.block .btn.pale:focus-visible{background:var(--black)}
.btn:focus-visible .ar{transform:translate(2px,-2px);background:rgba(255,255,255,.22)}
@media(hover:hover){
  .btn:hover,.scrolled .btn.pale:hover{background:var(--blue);color:#fff}
  .btn.blue:hover,.block .btn.pale:hover{background:var(--black)}
  .btn:hover .ar{transform:translate(2px,-2px)}
  .btn.pale:hover .ar,.scrolled .btn.pale:hover .ar{background:rgba(255,255,255,.22)}
}
.tag{display:inline-block;border:1px solid #cfd3d7;border-radius:99px;color:var(--mute);font:500 13.5px/1 "DM Sans",sans-serif;padding:11px 15px}

/* Nav, after Aboard: open over the hero, floating pill once you scroll, small pill with Menu below the hero */
/* The header strip spans the page but only the pill takes the mouse, so buttons scrolling under the empty sides still hover and click. */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;color:#fff;pointer-events:none}
.bar-in{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--edge);transition:background-color .3s,padding .3s,box-shadow .3s,max-width .3s,border-radius .3s,margin .3s}
.logo{position:relative;display:inline-block;font:500 24px/1 "Newsreader",Georgia,serif;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
/* Logo hover, Ethan's pick from the local options: a line draws left to right, Threddle's blog-row line. Teal over the hero, blue on the light pill. */
.logo::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-foot)}
.scrolled .logo::after{background:var(--blue)}
.logo:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(hover:hover){.logo:hover::after{transform:scaleX(1)}}
.links{display:flex;align-items:center;gap:2px}
.links>a{font:500 14.5px/1 "DM Sans",sans-serif;text-decoration:none;padding:10px 13px;border-radius:99px;transition:background-color .25s ease}
.links>a[aria-current=page]{box-shadow:inset 0 0 0 1px currentColor}
.menu-cta{display:none}
.nav-r{display:flex;align-items:center;gap:8px}
/* Menu matches the blue nav button: same pill, same chip, same hover, with a menu icon in the chip. */
.menu-btn{display:none;align-items:center;gap:12px;border:0;border-radius:99px;background:var(--blue);color:#fff;font:500 14px/1.15 "DM Sans",sans-serif;letter-spacing:-.005em;padding:8px 9px 8px 18px;cursor:pointer;transition:background-color .5s var(--ease-io),transform .4s var(--ease)}
.menu-btn:active{transform:scale(.98)}
.menu-btn .ar{transition:transform .5s var(--ease)}
.menu-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(hover:hover){
  .links>a:hover{background:rgba(128,128,128,.22)}
  .menu-btn:hover{background:var(--black)}
  .menu-btn:hover .ar{transform:translate(2px,-2px)}
}
.scrolled{color:#000}
.scrolled .bar-in{max-width:790px;margin:10px auto 0;padding:7px 8px 7px 20px;background:rgba(236,238,241,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:99px;box-shadow:0 2px 14px rgba(15,20,30,.08)}
.scrolled .logo{font-size:21px}
.scrolled .btn.pale{background:#000;color:#fff}
.scrolled .btn.pale .ar{background:rgba(255,255,255,.22)}
.collapsed .bar-in{max-width:600px}  /* shrunk pill keeps both buttons; the dropdown holds only the page links on desktop */
.collapsed .menu-btn{display:inline-flex}
.collapsed .links{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:240px;flex-direction:column;align-items:stretch;padding:8px;background:#fff;color:#000;border-radius:16px;box-shadow:0 10px 30px rgba(15,20,30,.14)}
.collapsed .links>a{display:block;padding:12px}
.collapsed.menu-open .links{display:flex}
@media(max-width:820px){
  .bar-in{padding:12px var(--pad)}
  .nav-cta{display:none}
  .menu-btn{display:inline-flex}
  .links{display:none;position:absolute;right:var(--pad);top:100%;min-width:240px;flex-direction:column;align-items:stretch;padding:8px;background:#fff;color:#000;border-radius:16px;box-shadow:0 10px 30px rgba(15,20,30,.14)}
  .links>a{display:block;padding:12px}
  .menu-cta{display:flex;flex-direction:column;gap:6px;padding:8px 4px 4px}
  .menu-open .links{display:flex}
  .scrolled .bar-in{margin-inline:12px;max-width:none}
  .scrolled .links{right:0;top:calc(100% + 8px)}
}

/* Hero: slanted photo strips, after RightLife */
.hero{position:relative;background:#000;color:#fff;overflow:hidden;min-height:min(100vh,900px);display:flex;align-items:center}
.strips{position:absolute;inset:0}
.strip{position:absolute;top:0;bottom:0;width:31%;overflow:hidden}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s1{left:-5%;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
.s2{left:20.2%;clip-path:polygon(16% 0,100% 0,84% 100%,0 100%)}
.s3{left:45.4%;clip-path:polygon(16% 0,100% 0,84% 100%,0 100%)}
.s4{left:70.6%;width:34%;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.9) 8%,rgba(0,0,0,.78) 44%,rgba(0,0,0,.12) 62%),linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.5) 9%,transparent 22%)}
.hero .wrap{position:relative;z-index:1;padding-block:120px 60px}
.copy{max-width:600px}
h1,.display{font:500 clamp(44px,4.4vw,63px)/1.08 "DM Sans",sans-serif;letter-spacing:-.04em;margin-bottom:20px}
h1 em,.display em{display:block}
.copy p:not(.display):not(.eyebrow){font-size:clamp(15px,1.15vw,16.5px);line-height:1.58}
p{text-wrap:pretty}
.copy .sig{margin:10px 0 24px;font-weight:600}
.hero.inner{min-height:min(82vh,720px)}
.hero.slim{min-height:440px}
.hero.slim::after{background:linear-gradient(to right,#000 40%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.2) 84%),linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.45) 18%,transparent 34%)}
.hero.slim h1{font-size:clamp(40px,4vw,56px);margin-bottom:12px}
.eyebrow{font:500 14px/1.2 "DM Sans",sans-serif;color:var(--teal);margin-bottom:12px}
.hero .meta{color:#c9cdd0;font-size:14.5px}
.hero .meta a{color:#fff;text-underline-offset:3px;transition:color .2s}
.hero .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.hero .big404{font:500 clamp(90px,12vw,170px)/.95 "DM Sans",sans-serif;letter-spacing:-.05em;color:var(--teal);margin-bottom:12px}
@media(hover:hover){.hero .meta a:hover{color:var(--teal)}}

/* Feature */
.feat-h{display:flex;justify-content:space-between;align-items:flex-start;gap:20px 40px;margin-bottom:clamp(36px,5vw,64px)}
.feat-h h2 em{display:block}
.feat-h .btn{flex:none}
.feat-b{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.bar-line{position:relative;padding-left:22px}
.bar-line::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--line)}
.bar-line::after{content:"";position:absolute;left:0;top:4px;height:42px;width:2px;background:var(--blue-live)}
.bar-line p{color:var(--mute);font-size:clamp(16px,1.25vw,18px);line-height:1.55}
.bar-line p+p{margin-top:1em}
.ph{position:relative;border-radius:var(--r);overflow:hidden}
.ph>img{width:100%;height:clamp(380px,38vw,540px);object-fit:cover;object-position:50% 22%}
.float{position:absolute;right:16px;bottom:16px;width:clamp(120px,14vw,190px);background:#fff;border-radius:14px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.25)}

/* Tall cards */
.help h2{margin-bottom:clamp(26px,3.4vw,44px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pc{position:relative;border-radius:var(--r);overflow:hidden;background:#222;height:clamp(460px,44vw,620px);color:#fff}
.pc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 8%,rgba(0,0,0,.62) 38%,transparent 62%)}
.pc .pb{position:absolute;z-index:1;left:20px;right:20px;bottom:20px}
.pc h3{font-size:27px;font-weight:500;letter-spacing:-.03em;margin-bottom:6px}
.pc p{font-size:14.5px;line-height:1.46;color:#e6e6e6;margin-bottom:16px}

/* Dark band */
.band{background:var(--black);color:#fff;padding-block:clamp(60px,8vw,112px)}
.band blockquote{max-width:980px}
.band p{font:italic 400 clamp(25px,2.5vw,36px)/1.22 "Instrument Serif",Georgia,serif}
.band cite{display:block;margin-top:22px;font:500 14px/1 "Plus Jakarta Sans",sans-serif;font-style:normal;color:var(--teal)}

/* Video beside words */
.tai{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.tai p{color:var(--mute);margin-bottom:22px}
.tai p a{color:var(--blue);text-underline-offset:3px;transition:color .2s}
@media(hover:hover){.tai p a:hover{color:#000}}
.video{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer;background:#000;border-radius:var(--r)}
.video img{width:100%;height:100%;object-fit:cover}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.72);transition:background-color .2s ease}
.play::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fff;transition:border-color .2s ease}
.video:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(hover:hover){.video:hover .play{background:var(--teal)}.video:hover .play::after{border-left-color:#000}}

/* Questions */
.faq{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,4vw,60px)}
.faq h2{font-size:clamp(30px,2.8vw,42px)}
.faq h2 em{display:block}
.faq-item{background:var(--tint);border-radius:12px;padding:16px 20px;margin-bottom:8px}
.faq-item h3{font:inherit}
.faq-item button{all:unset;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;width:100%;cursor:pointer;text-align:left;font:500 15.5px/1.35 "DM Sans",sans-serif;letter-spacing:-.012em}
.faq-item button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.faq-item i{position:relative;flex:none;width:14px;height:14px;margin-top:.3em}
.faq-item i::before,.faq-item i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--blue)}
.faq-item i::after{transform:rotate(90deg);transition:transform .3s}
.faq-item.open i::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.faq-a>div{overflow:hidden}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a p{padding-top:8px;color:var(--mute);font-size:14.5px;line-height:1.55}
.faq-a a{color:var(--blue)}

/* Blue block after Aboard's orange one: close and footer run together on the homepage */
.block{background:var(--blue);color:#fff}
.close{padding-block:clamp(56px,7vw,96px)}
.close h2{margin-bottom:14px}
.close p{max-width:560px;margin-bottom:24px}
.f-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-block:clamp(36px,5vw,64px)}
.has-close .f-top{border-top:1px solid rgba(255,255,255,.34)}
.f-logo{font:500 28px/1 "Newsreader",Georgia,serif;letter-spacing:-.02em;margin-bottom:12px}
.f-top>div>p{max-width:380px;margin-bottom:16px;font-size:14px;line-height:1.6}
/* Footer links, from threddle.com: the arrow eases in from translate(-4px,2px) over .3s. No underline, and the text itself stays put.
   Ethan's call: text stays full white (4.66:1 on the blue) and the arrow lands at full white, so Threddle's text lighten and half-opacity arrow are dropped.
   The arrow is the same one the buttons use. */
.social{display:flex;gap:2px;margin-left:-8px}.social svg{width:17px;height:17px;display:block}
.social a{display:block;padding:8px;border-radius:50%;transition:background-color .4s var(--ease)}  /* after aboard.com's .rd-icon-btn: a filled circle, black like the buttons on this block */
.fcol h2{font:500 13.5px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:inherit;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.34)}
.flink{display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.flink svg{flex:none;width:12px;height:12px;opacity:0;transform:translate(-4px,2px);transition:opacity .3s var(--ease-foot),transform .3s var(--ease-foot)}
.fcol .flink{display:flex;width:fit-content;padding:4px 0;font-size:13.5px}
.f-legal{padding-bottom:22px;font-size:11.5px;line-height:1.55}
.disclaimer{margin-bottom:12px}
.legal-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.legal-links{display:flex;flex-wrap:wrap;gap:6px;margin-right:-16px}  /* the last link's hidden arrow hangs past the edge so its text lines up right */
@media(hover:hover){
  .flink:hover svg{opacity:1;transform:none}
  .social a:hover{background:var(--black)}
}
.flink:focus-visible,.social a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.social a:focus-visible{background:var(--black)}
.flink:focus-visible svg{opacity:1;transform:none}

/* About */
.vid-h{margin-bottom:clamp(26px,3.4vw,44px)}
.vid-h h1{color:var(--ink);margin:0}
.bio{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
.cut{background:var(--blue-live);border-radius:var(--r);overflow:hidden;position:sticky;top:90px}
.cut img{width:100%;height:auto}
.bio .say{margin:26px 0 18px;font-size:clamp(16px,1.25vw,18px);font-weight:600}
.slants{position:relative;height:clamp(280px,32vw,460px);overflow:hidden;background:#000}

/* Consulting */
.progs{display:grid;gap:16px}
.prog{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;background:var(--black);color:#fff}
.prog>.m{position:relative;min-height:clamp(320px,34vw,500px)}
.prog>.m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prog.rev>.m{order:2}
.prog>.t{padding:clamp(24px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center}
.prog h3{font-size:clamp(26px,2.4vw,34px);font-weight:500;line-height:1.12;letter-spacing:-.03em;margin-bottom:18px}
.price{display:flex;flex-direction:column-reverse;gap:6px;margin-bottom:18px;color:#d5d8da;font-size:14.5px}
.amt{font:500 clamp(40px,4vw,58px)/1 "DM Sans",sans-serif;letter-spacing:-.04em;color:var(--teal)}
.prog p{font-size:15px;line-height:1.56;color:#d9dbdd}
.price.line{display:block}
.price.line .amt{display:block;margin-bottom:6px}
.checks{list-style:none;padding:0;margin:18px 0 0}
.checks li{position:relative;padding:9px 0 9px 22px;border-top:1px solid #2a2d30;font-size:14.5px;line-height:1.45}
.checks li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;border-radius:50%;background:var(--teal)}
.prog.plan{grid-template-columns:1fr 1fr 1fr}
.prog.plan>.t{justify-content:flex-start}
.prog.plan>.t+.t{padding-left:0}
.also{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.also h2{margin-bottom:22px}
.also ul{list-style:none;padding:0;margin-bottom:24px;border-top:1px solid var(--line)}
.also li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font:500 clamp(17px,1.4vw,20px)/1.3 "DM Sans",sans-serif;letter-spacing:-.02em}
.also li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;border-radius:50%;background:var(--blue-live)}
.gal-sub{color:var(--mute);margin-bottom:6px}
.gal h2{margin-bottom:clamp(26px,3.4vw,44px)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery a{display:block;border-radius:14px;overflow:hidden}
.gallery a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gallery img{width:100%;height:clamp(180px,20vw,300px);object-fit:cover}

/* Products */
.prod{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(28px,3.5vw,48px)}
.prod.rev{grid-template-columns:1.2fr .8fr}
.prod.rev>.tray{order:2}
.prod+.prod{border-top:1px solid var(--line)}
.tray{background:var(--tint);border-radius:var(--r);padding:clamp(20px,3vw,44px)}
.tray img{width:100%;max-height:440px;object-fit:contain;mix-blend-mode:multiply}
.pill-eye{display:inline-flex;align-items:center;gap:9px;font:500 14px/1.2 "DM Sans",sans-serif;color:var(--mute);margin-bottom:12px}
.pill-eye::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue-live);flex:none}
.prod h2{font-size:clamp(26px,2.6vw,38px);margin-bottom:14px}
.prod p,.prod li{color:var(--mute);font-size:15.5px;line-height:1.56}
details{margin-top:14px}
details>:not(summary){margin-top:12px}
details ul{padding-left:1.2em}
details a{color:var(--blue);text-underline-offset:3px}
summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font:500 14px/1 "DM Sans",sans-serif;color:var(--blue);padding:4px 0;transition:color .2s}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:17px;line-height:.8}
details[open] summary::after{content:"\2212"}
summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(hover:hover){summary:hover,details a:hover{color:#000}}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.arch-h{padding-top:clamp(50px,6vw,80px);border-top:1px solid var(--line);margin-bottom:clamp(14px,2vw,24px)}
.arch{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.arch .tray img{max-height:260px}
.arch h2{font-size:clamp(23px,1.9vw,27px);line-height:1.18;letter-spacing:-.03em;margin:0 0 12px}
.arch .pill-eye{margin-top:20px}
.arch p,.arch li{color:var(--mute);font-size:14.5px;line-height:1.55}

/* Legal */
.legal{max-width:820px;overflow-wrap:anywhere}
.legal p,.legal li{color:#3a3a3a;margin-bottom:1em}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:.5em}
.legal h2{font-size:clamp(21px,1.7vw,24px);line-height:1.2;letter-spacing:-.025em;margin:1.8em 0 .55em}
.legal a{color:var(--blue);text-underline-offset:3px}

@media(max-width:1080px){
  .prog.plan{grid-template-columns:1fr 1fr}
  .prog.plan>.m{grid-column:1/-1;min-height:48vw}
  .prog.plan>.t+.t{padding-left:clamp(24px,3.6vw,52px);padding-top:clamp(24px,3.6vw,52px)}
}
@media(max-width:900px){
  .hero,.hero.inner,.hero.slim{min-height:0;display:block}
  .hero .wrap{padding-block:clamp(380px,104vw,560px) 40px}
  .strips{bottom:auto;height:clamp(420px,112vw,600px)}
  .strip{width:42%}
  .s1{left:-6%;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
  .s2{left:28%}.s3{left:62%;width:46%;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
  .s4{display:none}
  .hero::after,.hero.slim::after{background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.28) 12%,transparent 26%,#000 clamp(390px,106vw,560px))}
  .hero.slim .wrap{padding-block:clamp(240px,62vw,340px) 40px}
  .hero.slim .strips{height:clamp(280px,72vw,380px)}
  .hero.slim::after{background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.28) 20%,transparent 40%,#000 clamp(250px,66vw,350px))}
  .hero.two .s3{left:-6%;width:62%;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
  .hero.two .s4{display:block;left:44%;width:62%;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
  .slants .strip{top:0;bottom:0}
  .slants .s4{display:none}
  .feat-b,.tai,.faq,.f-top,.bio,.prog,.prog.plan,.also,.prod,.prod.rev{grid-template-columns:1fr}
  .feat-h{flex-direction:column}
  .cards,.arch{grid-template-columns:1fr}
  .pc{height:118vw;max-height:620px}
  .f-top{gap:26px}
  .cut{position:static}
  .prog.rev>.m{order:0}
  .prog>.m,.prog.plan>.m{min-height:72vw}
  .prog.plan>.t+.t{padding-top:0}
  .prod.rev>.tray{order:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery img{height:44vw}
}
@media(max-width:420px){
  .btn{white-space:normal}
  .logo{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transition:none;opacity:1;transform:none}
  .btn,.btn.blue,.ar,.btn.blue .ar,.menu-btn,.menu-btn .ar,.flink svg,.social a,.logo::after{transition:none}
}