/* ============================================================
   Design pass: plate system.
   The product is a base plate with a raised applique layer, so that
   construction becomes the structural device rather than rounded cards.
   ============================================================ */

/* --- section labels: engraved rule, sentence case, no pill --- */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-family:var(--font);font-size:14.5px;font-weight:600;
  letter-spacing:0;text-transform:none;
  color:var(--accent);
  background:none;border:0;border-radius:0;padding:0;margin-bottom:12px;
}
.eyebrow::before{
  content:"";width:28px;height:2px;border-radius:0;
  background:linear-gradient(90deg,var(--accent),var(--leaf));
}

/* --- headings in the engraved serif --- */
h1,h2,.phero h1,.hero h1{font-family:var(--display);letter-spacing:-.012em}
h2{font-weight:600;line-height:1.1}
.why-card h3,.spec h3,.cat h3,.prod h3{font-family:var(--font);letter-spacing:-.004em}

/* --- plates: a machined surface with a light-catching leading edge --- */
.why-card,.spec{
  position:relative;overflow:hidden;
  background:linear-gradient(176deg,#FFFFFF 0%,#F6FAF8 100%);
  border:1px solid var(--line-2);
  border-radius:3px;
  padding:23px 21px 21px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 28px -24px rgba(7,52,37,.55);
}
.why-card::before,.spec::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 4%,var(--leaf) 50%,transparent 96%);
}

/* --- hero: dark material field, product rendered in real steel --- */
.phero{
  position:relative;overflow:hidden;border-bottom:0;
  padding:clamp(34px,4.6vw,66px) 0 clamp(34px,4.4vw,58px);
  background:
    radial-gradient(118% 88% at 76% 6%,#116046 0%,rgba(0,0,0,0) 60%),
    linear-gradient(168deg,#0C4F39 0%,#0A4330 48%,#073425 100%);
  color:#C9DED5;
}
.phero h1{color:#fff;margin:15px 0 15px}
.phero .lede{color:#AECAC0}
.phero .crumbs{color:#8FB3A4}
.phero .crumbs a{color:var(--leaf)}
.phero .pill{
  display:inline-block;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.17);color:#CBE6DA;
  border-radius:3px;padding:5px 11px;font-size:13px;font-weight:500;
}
.phero .pstats{border-top:1px solid rgba(255,255,255,.17)}
.phero .pstats dt{color:#fff;font-family:var(--display)}
.phero .pstats dd{color:#9EC0B2}
.phero .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.3)}
.phero .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.phero-art{background:none;border:0;padding:0}
.phero-art svg{max-width:340px;width:100%}


@media (max-width:620px){
  .phero-art svg{max-width:250px}
}


/* ============================================================
   Brand lockup, preloader, and course photography as context.
   ============================================================ */

/* --- logo lockup --- */
.logo{display:inline-flex;align-items:center;gap:0}
.logo img{height:40px;width:auto;display:block}
.ftr .logo img{height:46px}
@media (max-width:760px){.logo img{height:34px}}

/* --- preloader ---------------------------------------------------------
   The overlay removes itself with a CSS animation (forwards), so no-JS and
   broken-JS visitors are never stuck. Content sits in the DOM underneath the
   whole time, so crawlers and screen readers are unaffected.
   ---------------------------------------------------------------------- */
.pl{
  position:fixed;inset:0;z-index:9990;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 38%,#0B4733 0%,rgba(4,21,15,0) 62%),
    linear-gradient(180deg,#061F16 0%,#04150F 100%);
  animation:plOut .55s cubic-bezier(.4,0,.2,1) 1.85s forwards;
}
html.pl-off .pl{display:none}
.pl.pl-gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease}
html.pl-on{overflow:hidden}
@keyframes plOut{to{opacity:0;visibility:hidden;pointer-events:none}}

.pl-stage{display:grid;justify-items:center;gap:22px;padding:24px}
.pl-mark{position:relative;width:clamp(96px,15vw,132px);line-height:0}
.pl-mark img{
  width:100%;height:auto;display:block;
  clip-path:inset(0 0 100% 0);
  animation:plCut 1.05s cubic-bezier(.45,.05,.2,1) .22s forwards;
}
@keyframes plCut{to{clip-path:inset(0 0 0 0)}}

/* the cut line: a hot edge travelling down the sheet, gold going to white */
.pl-beam{
  position:absolute;left:-6%;right:-6%;top:0;height:2px;opacity:0;z-index:3;
  background:linear-gradient(90deg,rgba(255,211,77,0),#FFD34D 22%,#FFFFFF 50%,#FFD34D 78%,rgba(255,211,77,0));
  box-shadow:0 0 16px 3px rgba(255,196,60,.8),0 0 42px 10px rgba(255,170,30,.38);
  animation:plBeam 1.05s cubic-bezier(.45,.05,.2,1) .22s forwards;
}
@keyframes plBeam{
  0%{opacity:0;top:0}
  10%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;top:100%}
}

.pl-word{
  width:clamp(170px,30vw,240px);height:auto;display:block;opacity:0;
  filter:brightness(0) invert(1);
  animation:plWord .55s cubic-bezier(.4,0,.2,1) 1.18s forwards;
}
@keyframes plWord{from{opacity:0;transform:translateY(7px)}to{opacity:.94;transform:none}}

@media (prefers-reduced-motion:reduce){
  .pl{display:none}
}

/* --- course photography: atmosphere behind an overlay, never a work claim --- */
.phero{position:relative;isolation:isolate}
.phero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("/assets/tee-box-drive.webp");
  background-size:cover;background-position:50% 62%;
}
.phero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(0,42,27,.96) 0%,rgba(0,48,31,.9) 46%,rgba(0,48,31,.6) 72%,rgba(0,48,31,.46) 100%),
    linear-gradient(180deg,rgba(4,26,18,.3) 0%,rgba(4,26,18,0) 40%);
}


/* the sheet being cut: a lit steel plate so the dark mark reads on a dark set */
.pl-plate{
  position:relative;overflow:hidden;
  padding:clamp(22px,3.2vw,30px) clamp(28px,4vw,38px);
  border-radius:5px;
  background:linear-gradient(142deg,#FAFCFB 0%,#DBE3DF 26%,#F4F8F6 48%,#B6C2BC 74%,#E4EAE7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(90,102,96,.35),
    0 34px 70px -34px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.08);
  animation:plPlate .7s cubic-bezier(.3,.9,.3,1) both;
}
@keyframes plPlate{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* light catching the metal once the cut finishes */
.pl-spec{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.72) 50%,rgba(255,255,255,0) 62%);
  transform:translateX(-120%);
  animation:plSpec .85s cubic-bezier(.35,0,.2,1) 1.22s forwards;
}
@keyframes plSpec{to{transform:translateX(120%)}}


/* ============================================================
   Polish pass: rhythm, step numbering, and accent colour.
   ============================================================ */

/* each ordering step was printing its number twice */
.steps li .step-n{display:none}

/* 192px of dead air between bands read as unfinished rather than airy */
.sec{padding-block:clamp(44px,5.4vw,74px)}
.sec-head{margin-bottom:clamp(22px,2.6vw,32px)}

/* four reasons should look like four, not one grey block */
.why-grid .why-card:nth-child(1){--card:#0C8159}
.why-grid .why-card:nth-child(2){--card:#1C7FA8}
.why-grid .why-card:nth-child(3){--card:#C08A12}
.why-grid .why-card:nth-child(4){--card:#B4572A}
.why-grid .why-card::before{background:var(--card,var(--leaf));height:3px;opacity:1}
.why-grid .why-card h3{position:relative;padding-top:2px}
.why-grid .why-card h3::after{
  content:"";display:block;width:22px;height:2px;margin-top:9px;
  background:var(--card,var(--accent));border-radius:1px;
}

/* the spec plates keep one accent so the selling points stay the loud ones */
.spec-grid .spec::before{background:linear-gradient(90deg,transparent,var(--leaf),transparent)}


/* The work tiles are built for photos: white caption on a dark scrim. When an
   image fails, the SVG fallback shows on a LIGHT panel and that caption becomes
   unreadable text sitting on the artwork. Flip the treatment for that state so
   the fallback still looks deliberate; it reverts the moment real photos load. */
.shot:has(img.broken) figcaption,
.shot:has(img[src=""]) figcaption{
  color:#55635C;
  background:linear-gradient(0deg,#FFFFFF 44%,rgba(255,255,255,.93) 74%,rgba(255,255,255,0) 100%);
}
.shot:has(img.broken) figcaption b,
.shot:has(img[src=""]) figcaption b{color:var(--ink)}
.shot .fb{padding:16% 18% 30%}


/* ============================================================
   Mobile columns: stop holding desktop column counts on a phone.
   ============================================================ */
@media (max-width:620px){

  /* trust strip: 2-up left only ~99px for the text, so captions broke onto
     three lines and "Hand-assembled" hyphenated. One row per item instead. */
  .trust ul{grid-template-columns:1fr}
  .trust li,
  .trust li+li,
  .trust li:nth-child(3){
    border-left:0;
    align-items:center;
    padding:13px 16px;
  }
  .trust li+li{border-top:1px solid var(--line)}
  .trust li:nth-child(-n+2){border-bottom:0}
  .trust li>div{display:flex;flex-direction:column;gap:1px;min-width:0}
  .trust b{font-size:15px;line-height:1.25}
  .trust span{font-size:13px;line-height:1.4}

  /* hero proof row: label and caption on one baseline, divided rows */
  .hero-proof{grid-template-columns:1fr!important;display:grid;gap:0}
  .hero-proof li{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:11px 0;border:0;border-bottom:1px solid rgba(255,255,255,.16);
  }
  .hero-proof li:last-child{border-bottom:0}
  .hero-proof li b{font-size:16.5px;flex:none}
  .hero-proof li span{font-size:12.5px;text-align:right;line-height:1.35}

  /* product hero stats: the 3-up was pinned on at <=620px, which is the squeeze */
  .pstats{grid-template-columns:1fr;gap:0;padding-top:12px}
  .pstats>div{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:10px 0;border-bottom:1px solid rgba(255,255,255,.16);
  }
  .pstats>div:last-child{border-bottom:0}
  .pstats dt{font-size:17px;flex:none}
  .pstats dd{font-size:12.5px;margin:0;text-align:right;line-height:1.35}

  /* short toggle labels should never break across lines */
  .chip span{white-space:nowrap}
}


/* Category tiles flex to the number of items, so a four-tile page does not
   leave one orphan on a second row. */
.shop-cats{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
@media (max-width:980px){.shop-cats{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
@media (max-width:620px){.shop-cats{grid-template-columns:1fr}}


/* Final lockup is a wider 4.00 aspect, so it needs more height than the old
   mark before the tagline becomes readable. */
.logo img{height:48px}
.ftr .logo img{height:54px}
@media (max-width:760px){.logo img{height:38px}}

/* The logo's own gold, used as a brand accent. Orange still owns the CTA so the
   two never compete for the same job. */
/* gold measures 1.5:1 on white, so it is never used on a light surface.
   It carries the brand only where it is legible: on the deep green fields. */
.eyebrow::before{background:var(--accent)}
.phero .eyebrow::before,.hero .eyebrow::before{background:linear-gradient(90deg,var(--gold),var(--leaf))}


/* ===== DZ ALIGN+COLOR PASS 4 ===== */
:root{
  --paper:#FAF4E8;--paper-2:#F1E7D2;--gold-soft:#FFF3C4;--gold-mid:#FBE08A;
  --soft:#FAF4E8;--sage:#FFF3C4;--sage-2:#EBD7A0;
}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* ---- surfaces: mint -> warm paper ---- */
.sec.alt,.sec.soft,section.soft{background:var(--paper)}
.ftr{background:var(--paper-2);border-top:3px solid var(--gold)}
.trust{background:var(--paper);border-block:1px solid var(--paper-2)}
.trust li+li{border-left-color:var(--paper-2)}
.trust .ic{background:linear-gradient(135deg,var(--gold-soft),var(--gold-mid))}
.trust .ic svg{color:var(--accent)}
.p-art,.cat .art{background:linear-gradient(160deg,#fff 0%,#F6EBD2 100%)}
.prod[data-cat="sign"] .p-art{background:linear-gradient(160deg,#fff 0%,#E3ECF0 100%)}
.prod[data-cat="award"] .p-art,.prod[data-cat="awards"] .p-art{background:linear-gradient(160deg,#FFFBEA 0%,#FBE08A 100%)}
.badge{background:var(--gold);color:var(--deep);border-color:var(--gold-deep);font-weight:700}

/* ---- accents ---- */
.eyebrow{color:var(--copper)}
.eyebrow::before{background:linear-gradient(90deg,var(--copper),var(--gold-deep))}
.phero .eyebrow,.hero .eyebrow,.band .eyebrow{color:var(--gold)}
.steps li::before{background:var(--gold);color:var(--deep);box-shadow:0 8px 18px -10px rgba(217,167,0,.9)}
.steps li{border-top:2px solid var(--gold-mid)}
.cmp thead th{background:var(--paper);color:var(--muted)}
.cmp thead th.us{background:var(--gold-soft);color:var(--deep)}
.cmp td.us{background:#FFFBEA}
.facts dt{color:var(--copper)}
.p-spec{color:var(--copper)}
.p-ben li::before{box-shadow:inset 0 0 0 2px var(--gold-deep);background:var(--gold-soft)}
.phero-note,.phero [class*="note"]{color:rgba(255,255,255,.88)!important}

/* ---- feature cards: one left edge, icon chip above title ---- */
.why-card[style*="text-align:center"]{text-align:left!important}
.why-card>svg{
  display:block;box-sizing:content-box;width:24px!important;height:24px!important;
  padding:10px;margin:0 0 14px;border-radius:12px;
  background:var(--gold-soft);color:var(--accent)!important;
}
.why-card h3{margin:0 0 8px}
.why-grid .why-card:nth-child(1){--card:#004830}
.why-grid .why-card:nth-child(2){--card:#D9A700}
.why-grid .why-card:nth-child(3){--card:#B8501F}
.why-grid .why-card:nth-child(4){--card:#2F6F8F}

/* ---- product cards ---- */
.p-body h3{min-height:0}
.p-spec{min-height:0}
@media (max-width:1000px){.p-body h3{min-height:2.7em}}
.p-foot{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px}
.p-price{font-size:14px;color:var(--muted);font-weight:500}
.p-foot .add{width:100%;justify-content:center;white-space:nowrap}

/* ---- facts grid: no empty grey cell ---- */
.facts dl>div:last-child:nth-child(odd){grid-column:1/-1}

/* ---- compare table: shared vertical centre ---- */
.cmp th,.cmp td{vertical-align:middle;line-height:1.4}
.cmp .yes,.cmp .no{display:inline-flex;align-items:center;gap:8px}
.cmp .yes svg,.cmp .no svg{flex:none}

/* ---- CTA band ---- */
.band h2{max-width:16em}

/* ---- shop-cats: never leave an orphan ---- */
body .shop-cats{grid-template-columns:repeat(4,minmax(0,1fr))}
body .shop-cats:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
body .shop-cats:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
body .shop-cats:has(>:nth-child(5):last-child)>*{grid-column:span 2}
body .shop-cats:has(>:nth-child(5):last-child)>:nth-child(4){grid-column:2/4}
body .shop-cats:has(>:nth-child(5):last-child)>:nth-child(5){grid-column:4/6}
@media (max-width:980px){
  body .shop-cats,body .shop-cats:has(>:nth-child(3):last-child),body .shop-cats:has(>:nth-child(5):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body .shop-cats>*,body .shop-cats:has(>:nth-child(5):last-child)>*{grid-column:auto!important}
  body .shop-cats>:last-child:nth-child(odd){grid-column:1/-1!important;width:calc(50% - 8px);justify-self:center}
}
@media (max-width:620px){
  body .shop-cats,body .shop-cats:has(>:nth-child(3):last-child),body .shop-cats:has(>:nth-child(5):last-child){grid-template-columns:1fr!important}
  body .shop-cats>:last-child:nth-child(odd){width:auto;justify-self:stretch}
}

/* ---- one heading alignment everywhere ---- */
.sec-head.c{text-align:left;margin-inline:0;max-width:none;justify-content:flex-start;align-items:flex-start}
.sec-head.c .eyebrow{justify-content:flex-start}
.sec-head.c p{margin-inline:0}
/* ---- work tiles: deep-green scrim instead of grey ---- */
.shot figcaption{background:linear-gradient(0deg,rgba(0,42,27,.88),rgba(0,42,27,0))}
.cmp .yes,.cmp .no{min-height:22px}

/* ---- leftover mint ---- */
:root{--silk-soft:radial-gradient(60% 80% at 85% 10%,rgba(217,167,0,.14) 0%,rgba(217,167,0,0) 60%),radial-gradient(50% 70% at 5% 90%,rgba(184,80,31,.08) 0%,rgba(184,80,31,0) 60%),linear-gradient(180deg,#FAF4E8 0%,#fff 100%)}
.cat .art{background:linear-gradient(160deg,#fff,#F6EBD2)}
.cmp-card,.cmp-m .us,[class*="cmp"] .us{background-image:none}
/* ---- hero: photo carries the page, no floating graphic over the subject ---- */
.phero-art{display:none!important}
.phero-grid{grid-template-columns:minmax(0,1fr)!important}
.phero-grid>div:first-child{max-width:640px}
.guarantee-line{color:rgba(255,255,255,.92)!important;font-weight:500}
.guarantee-line svg{color:var(--gold)!important}
/* ---- ordering steps: solid bar like the other cards ---- */
.shop-steps .why-card::before{background:var(--gold-deep)!important;opacity:1!important;height:3px!important}

/* ---- phones: feature grids were held at 3 columns (107px cards) ---- */
@media (max-width:620px){.why-grid,.spec-grid,.why-grid[style]{grid-template-columns:1fr!important}}


/* ===== DZ STUDIO + HEADER BADGE + OWNER VALUE ===== */
/* --- header badge: Pennsylvania filled with the US flag, Pittsburgh pinned --- */
.topbar{font-size:13px}
.topbar .wrap{min-height:62px;padding-block:7px}
.topbar{background:linear-gradient(100deg,#003A27 0%,#004830 55%,#00573A 100%)}
.made{display:inline-flex;align-items:center;gap:16px;min-width:0}
.pa-map{height:48px;width:auto;flex:none;overflow:visible;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.pa-ping{fill:none;stroke:#FCCC24;stroke-width:1.3;transform-box:fill-box;transform-origin:center;animation:paPing 2.4s ease-out infinite}
@keyframes paPing{0%{transform:scale(1);opacity:.95}100%{transform:scale(3.2);opacity:0}}
.made-t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.made-t b{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:15px;color:#fff}
.made-t b::before,.made-t b::after{content:"★";color:var(--gold);font-size:11px;margin:0 8px;vertical-align:1px}
.made-t b::before{margin-left:0}
.made-t small{font-size:12.5px;font-weight:500;color:#BFE0CF;letter-spacing:.01em}
@media (max-width:640px){.topbar .wrap{justify-content:center;min-height:52px}.made{gap:12px}.made-t b{font-size:11.5px;letter-spacing:.05em;white-space:nowrap}.made-t b::before,.made-t b::after{display:none}.made-t small{display:none}.pa-map{height:36px}}
@media (prefers-reduced-motion:reduce){.pa-ping{animation:none;opacity:0}}

/* --- marker studio --- */
.mstudio{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:stretch}
.ms-view,.ms-panel{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 24px 50px -32px rgba(0,42,27,.35)}
.ms-stage{position:relative;aspect-ratio:400/366;overflow:hidden;background:#F6EBD2;touch-action:pan-y;outline-offset:-3px;cursor:grab}
.ms-stage.grab{cursor:grabbing}
.ms-live{position:absolute;z-index:3;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:600;border-radius:999px;padding:5px 11px}
.ms-live i{width:7px;height:7px;border-radius:50%;background:var(--gold-deep);box-shadow:0 0 0 3px rgba(217,167,0,.25)}
.ms-world{position:absolute;left:0;top:0;width:400px;height:366px;transform-origin:0 0;perspective:1100px}
.sc-up,.sc-gr{position:absolute;inset:0}
.sc-up{background:linear-gradient(180deg,#FFF9E6 0%,#F6EBD2 100%)}
.sc-up::after{content:"";position:absolute;left:0;right:0;top:304px;bottom:0;background:repeating-linear-gradient(90deg,#2E7D55 0 34px,#34885D 34px 68px);border-top:2px solid #1F6A47}
.sc-gr{background:repeating-linear-gradient(90deg,#2E7D55 0 40px,#379060 40px 80px);display:none}
.mstudio[data-mode="ground"] .sc-up{display:none}
.mstudio[data-mode="ground"] .sc-gr{display:block}
.ms-shadow{position:absolute;left:200px;top:298px;width:200px;height:14px;margin-left:-100px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,30,18,.45),rgba(0,30,18,0));transform:scaleX(var(--sw,1));z-index:1}
.turn{position:absolute;z-index:2;left:200px;top:150px;width:0;height:0;transform-style:preserve-3d;transform:rotateY(var(--ry,0deg));transition:transform .75s cubic-bezier(.3,.7,.2,1)}
.turn.snap{transition:none}
.face,.edge{position:absolute;left:-110px;top:-110px;width:220px;height:220px}
.face svg,.edge svg{display:block;width:100%;height:100%}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.f{transform:translateZ(7px)}
.face.b{transform:translateZ(-7px) rotateY(180deg)}
.slab{position:absolute;left:-7px;width:14px;background:linear-gradient(90deg,rgba(255,255,255,.32),rgba(0,0,0,.18)),var(--edge,#101314);transform:rotateY(90deg)}
.stake{position:absolute;left:-4px;top:92px;width:8px;height:64px;background:var(--stake,#2B3032);border-radius:0 0 2px 2px}
.stake.b{transform:rotateY(90deg)}
.g-shadow{position:absolute;left:96px;top:83px;width:220px;height:220px;border-radius:30%;background:rgba(0,25,14,.38);filter:blur(9px)}
.g-face{position:absolute;left:90px;top:73px;width:220px;height:220px}
.g-face svg{display:block;width:100%;height:100%}
.g-ball{position:absolute;right:26px;bottom:24px;width:30px;height:30px;filter:drop-shadow(0 3px 3px rgba(0,25,14,.4))}
.ms-view{display:flex;flex-direction:column}
.ms-viewbar{flex:1;border-top:1px solid var(--line);padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.ms-specs{margin-top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:14px 0 0;border-top:1px solid var(--line)}
.ms-specs li{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--paper-2);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink)}
.ms-specs li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-deep)}
.ms-turnctl{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:16px;align-items:center}
.ms-rot{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;color:var(--muted)}
.ms-rot input{flex:1;min-width:0;accent-color:var(--accent);height:28px}
.ms-hint{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.ms-gnote{display:none}
.mstudio[data-mode="ground"] .ms-turnctl,.mstudio[data-mode="ground"] #msHint{display:none}
.mstudio[data-mode="ground"] .ms-gnote{display:block}

.ms-panel{display:flex;flex-direction:column;padding:8px 22px 22px}
.ms-rows{display:grid}
.ms-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.ms-row:first-child{border-top:0}
.ms-l{font-size:13.5px;font-weight:600;color:var(--muted)}
.ms-seg{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:6px}
.ms-seg button{min-height:42px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink);font:600 14px/1.2 var(--font);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;transition:background .15s,border-color .15s,color .15s}
.ms-seg button:hover{border-color:var(--accent)}
.ms-seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.ms-seg button i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(0,0,0,.2)}
.ms-seg.fin{grid-template-columns:1fr 1.3fr 1.1fr}
.ms-seg.fin button{font-size:13px;padding:0 6px;white-space:nowrap}
.ms-tee{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sw{width:36px;height:36px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s,transform .15s}
.sw:hover{transform:translateY(-1px)}
.sw[aria-pressed="true"]{outline-color:var(--accent)}
.ms-cn{font-size:14px;font-weight:600;color:var(--ink);margin-left:4px;min-width:46px}
.ms-in{width:100%;min-height:44px;border-radius:10px;border:1px solid var(--line-2);background:#fff;padding:0 14px;font:500 15px var(--font);color:var(--ink)}
.ms-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--gold-mid)}
.ms-tip,.tip-box{display:flex;gap:14px;align-items:center;background:var(--gold-soft);border:1px solid var(--gold-mid);border-left:4px solid var(--gold-deep);border-radius:14px;padding:16px 18px;color:var(--ink)}
.ms-tip{margin-top:6px;flex:1 1 auto;min-height:104px}
.tip-ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--deep);display:grid;place-items:center}
.tip-ic svg{width:20px;height:20px}
.tip-k{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A5A00;margin-bottom:3px}
.ms-tip p,.tip-box p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text)}
.ms-tip.in p{animation:tipIn .35s ease}
@keyframes tipIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ms-add{width:100%;margin-top:16px}
.ms-fine{margin:10px 0 0;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:960px){.mstudio{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .ms-panel{padding:6px 16px 18px}
  .ms-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0}
  .ms-seg.shape4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms-seg.fin{grid-template-columns:minmax(0,1fr)}
  .ms-turnctl{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.turn{transition:none}.ms-tip.in p{animation:none}}

/* --- owner value section (dark band) and helpful-tip box --- */
.pb{background:var(--deep);color:#DCEBE3;position:relative;overflow:hidden;isolation:isolate}
.pb::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 70% at 100% 0%,rgba(252,204,36,.16),rgba(252,204,36,0) 60%),radial-gradient(50% 60% at 0% 100%,rgba(111,201,162,.12),rgba(111,201,162,0) 60%)}
.pb .eyebrow{color:var(--gold)}
.pb .eyebrow::before{background:var(--gold)}
.pb h2{color:#fff;max-width:20em}
.pb .lede{color:#BFD8CB;max-width:46em}
.pb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:34px}
.pb-card{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:18px;align-content:start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:24px}
.pb-n{grid-row:1 / span 2;width:46px;height:46px;border-radius:12px;background:var(--gold);color:var(--deep);font:700 15px/46px var(--head);text-align:center}
.pb-card h3{color:#fff;font-size:18px;line-height:1.3;margin:2px 0 8px}
.pb-card p{margin:0;color:#BFD8CB;font-size:15px;line-height:1.62}
.pb-card a{color:var(--gold);font-weight:600}
.pb .tip-box{margin-top:22px}
.btn-secondary-on-dark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-secondary-on-dark:hover{background:rgba(255,255,255,.1);border-color:#fff}
.pb-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.tip-sec{padding-block:clamp(28px,4vw,48px)}
.tip-box strong{display:block;font-size:16.5px;margin-bottom:3px;color:var(--ink)}
@media (max-width:820px){.pb-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.pb-card{grid-template-columns:minmax(0,1fr);row-gap:10px}.pb-n{grid-row:auto}}


/* ===== DZ STORY ===== */
.story{background:var(--paper)}
.story .sec-head{margin-bottom:8px}
.story-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,64px);align-items:start;margin-top:30px}
.story-side{position:sticky;top:112px;display:grid;gap:16px}
.story-photo{margin:0;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 60px -34px rgba(0,42,27,.6);position:relative}
.story-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.story-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;background:linear-gradient(0deg,rgba(0,42,27,.92),rgba(0,42,27,0));color:#DCEBE3;font-size:13.5px;line-height:1.4}
.story-photo figcaption b{display:block;color:#fff;font-size:16px}
.story-note{margin:0;font-size:14.5px;line-height:1.6;color:var(--text)}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:18px;position:relative}
.tl::before{content:"";position:absolute;left:22px;top:26px;bottom:26px;width:3px;border-radius:3px;background:linear-gradient(180deg,#7D8682 0%,#B8501F 34%,#D9A700 66%,#004830 100%)}
.tl li{position:relative;padding-left:68px}
.tl-n{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--c);color:#fff;font:700 15px var(--head);box-shadow:0 0 0 5px var(--paper)}
.tl li:nth-child(1){--c:#7D8682}
.tl li:nth-child(2){--c:#B8501F}
.tl li:nth-child(3){--c:#D9A700}
.tl li:nth-child(3) .tl-n{color:var(--deep)}
.tl li:nth-child(4){--c:#004830}
.tl-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:16px;padding:18px 22px}
.tl-k{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-bottom:4px}
.tl li:nth-child(3) .tl-k{color:#7A5A00}
.tl-card h3{font-size:19px;line-height:1.3;margin:0 0 6px}
.tl-card p{margin:0;font-size:15px;line-height:1.62;color:var(--text)}
.story-fig{margin:26px 0 0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 16px;box-shadow:0 24px 50px -36px rgba(0,42,27,.4)}
.story-svg{display:block;width:100%;height:auto}
.story-fig figcaption{margin-top:8px;font-size:13px;color:var(--muted);text-align:center}
.layers{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.layers li{font-size:13.5px;line-height:1.45;color:var(--text)}
.layers b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.layers i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;background:var(--c)}
.coats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
.coats figure{margin:0;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.coats img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.coats figcaption{padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--ink)}
.coats-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.story-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.story-compact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,56px);align-items:center}
.story-compact .story-fig{margin:0}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:18px 0 0;padding:0;list-style:none}
.chain li{font-size:13.5px;font-weight:700;border-radius:999px;padding:6px 13px;color:#fff;background:var(--c)}
.chain li:nth-child(1){--c:#7D8682}.chain li:nth-child(2){--c:#B8501F}.chain li:nth-child(3){--c:#D9A700;color:var(--deep)}.chain li:nth-child(4){--c:#004830}
.chain li+li::before{content:"\2192";margin-right:10px;color:var(--muted);font-weight:700;display:none}

.story-note b{color:var(--ink)}
.team{margin-top:56px}
.team-grid{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.team-grid li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;text-align:left}
.team-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c);color:#fff;font:700 16px var(--head);margin-bottom:12px}
.team-grid b{display:block;font-size:16px;margin-bottom:6px;color:var(--ink)}
.team-grid p{margin:0;font-size:14.5px;line-height:1.55}
@media (max-width:960px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.team-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:960px){.story-grid,.story-compact{grid-template-columns:minmax(0,1fr)}.story-side{position:static;grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:end}}
@media (max-width:640px){.story-photo img{aspect-ratio:4/3;object-position:50% 25%}.story-side{grid-template-columns:minmax(0,1fr)}.coats{grid-template-columns:minmax(0,1fr)}.layers{grid-template-columns:minmax(0,1fr)}.tl li{padding-left:58px}.tl-n{width:40px;height:40px}.tl::before{left:19px}}


/* ===== DZ PEOPLE ===== */
.people{background:var(--paper)}
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,60px);align-items:center;margin-top:30px}
.founder-photo{margin:0;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 30px 60px -34px rgba(0,42,27,.6)}
.founder-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.founder h3{font-size:clamp(24px,3vw,32px);margin:0 0 4px}
.founder .role{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--copper);margin-bottom:14px}
.founder p{margin:0 0 14px;font-size:16.5px;line-height:1.65;color:var(--text);max-width:58ch}
.founder .quote-line{border-left:4px solid var(--gold-deep);padding:4px 0 4px 16px;font-family:var(--head);font-size:19px;line-height:1.4;color:var(--ink)}
.crew{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.crew li{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.crew .ph{aspect-ratio:1/1;background:#000;display:block;overflow:hidden}
.crew .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.crew .mono{aspect-ratio:1/1;display:grid;place-items:center;background:linear-gradient(135deg,var(--deep),var(--accent));color:var(--gold);font:700 clamp(38px,5vw,56px) var(--head);letter-spacing:.04em}
.crew .meta{padding:14px 18px 18px}
.crew b{display:block;font-size:16px;color:var(--ink)}
.crew span{display:block;font-size:14px;line-height:1.4;color:var(--muted);margin-top:2px}
.proc{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.proc li{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.proc figure{margin:0;position:relative}
.proc img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.proc .n{position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--gold);color:var(--deep);font:700 14px var(--head)}
.proc .t{padding:14px 18px 18px}
.proc b{display:block;font-size:17px;color:var(--ink);margin-bottom:4px}
.proc p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text)}
.people-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (max-width:960px){.founder{grid-template-columns:minmax(0,1fr)}.founder-photo{max-width:420px}.proc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.crew{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.crew{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.proc{grid-template-columns:minmax(0,1fr)}.crew .meta{padding:12px 14px 14px}}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,200px);gap:12px;margin-top:28px}
.gal figure{margin:0;border-radius:18px;overflow:hidden;position:relative;background:#111}
.gal figure.big{grid-column:span 2;grid-row:span 2}
.gal img{display:block;width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;background:linear-gradient(0deg,rgba(0,42,27,.85),rgba(0,42,27,0));color:#fff;font-size:13px;line-height:1.35}
.pband{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.pband figure{margin:0;border-radius:18px;overflow:hidden;position:relative;background:#111}
.pband img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.pband figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;background:linear-gradient(0deg,rgba(0,42,27,.85),rgba(0,42,27,0));color:#fff;font-size:13px}
.crew.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.phero .phero-grid:has(.phero-photo){display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.phero .phero-grid:has(.phero-photo){grid-template-columns:minmax(0,1fr)!important}}
.phero-photo{margin:0;border-radius:24px;overflow:hidden;background:#111;box-shadow:0 30px 60px -36px rgba(0,42,27,.6)}
.phero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (max-width:960px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,170px)}.pband{grid-template-columns:minmax(0,1fr)}.crew.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gal figure.big{grid-row:span 1}.gal{grid-auto-rows:minmax(0,150px)}}


/* ===== DZ COREMAX SHARED ===== */
.cm-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
.cm-shot{margin:0;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(0,42,27,.5)}
.cm-shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cm-shot figcaption{padding:10px 16px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.cm-two{grid-template-columns:minmax(0,1fr)}}