*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --pad-x:    clamp(24px, 3.4vw, 64px);
  --beige:    #FFFCF8;
  --beige2:   #F2EDE6;
  --red:      #960803;
  --wine-dk:  #6E0602;
  --orange:   #E85002;
  --orange-d: #C63F01;
  --black:    #0D0D0C;
  --g400:     #555252;
  --g200:     #ACA8A8;
  --pink:     #FBDDEA;
  --dark:     #1C1512;
  --white:    #FFFFFF;
  --measure:  1318px;
}

html { scroll-behavior:smooth; }
body { background:var(--beige); color:var(--black); font-family:"DM Sans", sans-serif; overflow-x:hidden; position:relative; }

body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(13,13,12,0.16) 1.3px, transparent 1.4px);
  background-size:20px 20px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0.18) 12%, rgba(0,0,0,0.75) 52%, #000 88%);
  mask-image: radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0.18) 12%, rgba(0,0,0,0.75) 52%, #000 88%);
}
nav, section, footer, header { position:relative; z-index:1; }

/* NAV */
nav {
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  padding:18px var(--pad-x); gap:24px;
}
.nav-logo img { height:52px; width:auto; display:block; }
.nav-right { justify-self:end; }
.back-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:500; color:var(--g400); text-decoration:none;
  transition:color 0.2s;
}
.back-link:hover { color:var(--orange); }
.back-link svg { width:14px; height:14px; }

/* HEADER */
.cs-head { padding:56px var(--pad-x) 0; }
.cs-head-inner { max-width:var(--measure); margin:0 auto; }
.eyebrow {
  font-size:12px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--orange); margin-bottom:22px; display:block;
}
.cs-title {
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(38px, 5.2vw, 72px); line-height:1.04; letter-spacing:-1.6px;
  max-width:19ch; margin-bottom:26px;
}
.cs-dek {
  font-size:19px; line-height:1.62; color:var(--g400); max-width:56ch; margin-bottom:44px;
}
.cs-meta {
  display:flex; flex-wrap:wrap; gap:0 56px; row-gap:22px;
  padding:26px 0; border-top:1px solid #E5DFD6; border-bottom:1px solid #E5DFD6;
}
.cs-meta div { min-width:120px; }
.cs-meta dt {
  font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--g200); margin-bottom:7px;
}
.cs-meta dd { font-size:15px; font-weight:500; color:var(--black); line-height:1.5; }

/* HERO SHOT */
.cs-hero-shot { padding:52px var(--pad-x) 0; }
.shot {
  max-width:var(--measure); margin:0 auto;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(13,13,12,0.1);
  box-shadow:0 30px 60px -28px rgba(13,13,12,0.38);
  background:var(--white);
}
.shot img { width:100%; display:block; }
.shot-cap {
  max-width:var(--measure); margin:14px auto 0;
  font-family:"Caveat", cursive; font-size:19px; color:var(--g400);
}

/* BODY SECTIONS */
.cs-body { padding:88px var(--pad-x) 0; }
.cs-block { max-width:var(--measure); margin:0 auto 76px; }
.cs-block:last-child { margin-bottom:0; }
.prose { max-width:64ch; }
h2.cs-h {
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(28px, 3vw, 40px); letter-spacing:-0.8px; line-height:1.14;
  margin-bottom:24px;
}
.prose p { font-size:17.5px; line-height:1.78; color:#3A3735; margin-bottom:20px; }
.prose p:last-child { margin-bottom:0; }
.prose strong { font-weight:600; color:var(--black); }

/* PULL QUOTE */
.pull {
  max-width:var(--measure); margin:0 auto 76px;
  padding:0 0 0 28px; border-left:3px solid var(--orange);
}
.pull p {
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(24px, 2.9vw, 36px); line-height:1.36; letter-spacing:-0.6px;
  max-width:22ch; color:var(--black);
}
.pull .mark { background:var(--pink); color:var(--wine-dk); padding:0 6px; }

/* DECISIONS */
.dec { max-width:var(--measure); margin:0 auto 84px; }
.dec-num {
  font-family:"Fraunces", serif; font-weight:600; font-size:15px;
  color:var(--orange); letter-spacing:0.4px; margin-bottom:12px; display:block;
}
.dec h3 {
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(23px, 2.3vw, 31px); line-height:1.2; letter-spacing:-0.5px;
  max-width:24ch; margin-bottom:20px;
}
.dec .prose { margin-bottom:34px; }

/* STATS / DARK */
.cs-dark {
  background:var(--dark); color:#FFFCF8;
  padding:96px var(--pad-x); margin-top:96px;
}
.cs-dark-inner { max-width:var(--measure); margin:0 auto; }
.cs-dark h2.cs-h { color:#FFFCF8; }
.cs-dark .prose p { color:rgba(255,252,248,0.8); }
.stats {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin:0 0 56px;
}
.stat {
  border:1px solid rgba(255,232,214,0.18); border-radius:14px;
  padding:28px 26px; background:rgba(255,232,214,0.03);
}
.stat-num {
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(32px, 3.6vw, 46px); line-height:1; letter-spacing:-1px;
  color:#FFFCF8; margin-bottom:12px;
}
.stat-lab { font-size:14.5px; line-height:1.55; color:rgba(255,252,248,0.72); }
.stat-src {
  font-size:11.5px; letter-spacing:0.6px; text-transform:uppercase;
  color:rgba(255,252,248,0.42); margin-top:14px;
}

/* CLOSING */
.cs-close { padding:92px var(--pad-x) 0; }

/* FOOTER */
.cs-foot {
  margin-top:96px; background:var(--dark); color:#FFFCF8;
  padding:84px var(--pad-x);
}
.cs-foot-inner {
  max-width:var(--measure); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cs-foot p {
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(24px, 2.6vw, 34px); line-height:1.3; letter-spacing:-0.6px; max-width:18ch;
}
.foot-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.cta {
  text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  background:#FFFCF8; color:var(--orange);
  font-weight:600; font-size:13.5px;
  padding:10px 20px; border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
  transition:background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.cta:hover { background:#FFFFFF; color:var(--orange-d); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.45); }
.cta svg { width:14px; height:14px; }
.quiet {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:500; color:rgba(255,252,248,0.72);
  text-decoration:none; border-bottom:1px solid transparent;
  transition:color 0.3s, border-color 0.3s;
}
.quiet:hover { color:#FFFCF8; border-color:rgba(255,252,248,0.4); }



/* SCREEN PRESENTATION */
.frame {
  border-radius:14px; overflow:hidden; background:#FFFFFF;
  border:1px solid rgba(13,13,12,0.1);
  box-shadow:0 34px 70px -30px rgba(13,13,12,0.42);
}
.frame-bar {
  display:flex; align-items:center; gap:10px;
  background:#1C1512; padding:11px 16px;
}
.frame-dots { display:flex; gap:6px; }
.frame-dots i { width:9px; height:9px; border-radius:50%; background:rgba(255,232,214,0.26); display:block; }
.frame-url {
  flex:1; text-align:center;
  font-size:12px; color:rgba(255,252,248,0.55); letter-spacing:0.2px;
  background:rgba(255,232,214,0.07); border-radius:6px; padding:4px 12px;
  max-width:420px; margin:0 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.frame img { width:100%; display:block; }

.screen { max-width:1080px; margin:0 auto 20px; }
.screen-stage { position:relative; }
.screen .notes { width:var(--measure); max-width:calc(100vw - (2 * var(--pad-x))); margin-left:50%; transform:translateX(-50%); }
.pin {
  position:absolute; z-index:3;
  width:26px; height:26px; border-radius:50%;
  background:var(--orange); color:#FFFCF8;
  font-size:13px; font-weight:700; line-height:26px; text-align:center;
  box-shadow:0 0 0 4px rgba(232,80,2,0.2), 0 6px 14px rgba(13,13,12,0.3);
  transform:translate(-50%,-50%);
}
.cs-dark .pin { box-shadow:0 0 0 4px rgba(232,80,2,0.26), 0 6px 14px rgba(0,0,0,0.5); }
.notes {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px; margin-top:26px; list-style:none;
  max-width:var(--measure);
}
.notes li {
  display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start;
  background:var(--white); border:1.6px solid var(--black); border-radius:12px;
  padding:20px 22px;
  box-shadow:4px 4px 0 rgba(13,13,12,0.9);
}
.notes .n {
  width:26px; height:26px; border-radius:50%;
  background:var(--black); color:var(--beige);
  font-size:13px; font-weight:700; line-height:26px; text-align:center;
}
.notes p { font-size:14.5px; line-height:1.62; color:var(--black); }
.cs-dark .notes li { background:var(--white); }

.details { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:30px auto 0; max-width:1080px; }
.details.one { grid-template-columns:1fr; }
.detail {
  border:1px solid #E5DFD6; border-radius:12px; overflow:hidden; background:var(--white);
}
.detail-img { background:var(--beige2); padding:0; }
.detail-img img { width:100%; display:block; }
.detail-body { padding:18px 20px 20px; }
.detail-lab {
  font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--orange); margin-bottom:8px;
}
.detail-body p { font-size:14.5px; line-height:1.62; color:#3A3735; }
@media (max-width: 860px) { .details { grid-template-columns:1fr; } }


/* WHAT CAME AFTER */
.after { max-width:var(--measure); margin:72px auto 56px; }
.after-list { list-style:none; margin-top:8px; }
.after-list li {
  display:grid; grid-template-columns:96px 1fr; gap:24px; align-items:baseline;
  padding:22px 0; border-top:1px solid rgba(255,232,214,0.16);
}
.after-list li:last-child { border-bottom:1px solid rgba(255,232,214,0.16); }
.after-yr {
  font-size:11.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(255,252,248,0.42);
}
.after-list li:last-child .after-yr { color:var(--orange); }
.after-list h4 {
  font-family:"Fraunces", serif; font-weight:600; font-size:21px;
  color:#FFFCF8; margin-bottom:6px; letter-spacing:-0.3px;
}
.after-list p { font-size:15px; line-height:1.6; color:rgba(255,252,248,0.72); max-width:62ch; }
@media (max-width:700px){ .after-list li { grid-template-columns:1fr; gap:6px; } }



/* HERO */
.cs-hero {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,0.75fr);
  gap:clamp(36px, 5vw, 88px); align-items:start;
  padding-bottom:52px;
}
.cs-title { font-size:clamp(36px, 4.4vw, 62px); max-width:16ch; margin-bottom:22px; }
.cs-dek { font-size:18px; max-width:48ch; margin-bottom:34px; }
.cs-hero-cta { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.cs-jump {
  font-size:13.5px; font-weight:500; color:var(--g400); text-decoration:none;
  border-bottom:1px solid rgba(13,13,12,0.2); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.cs-jump:hover { color:var(--black); border-color:var(--black); }

.cs-glance {
  background:var(--dark); border-radius:16px; padding:30px 30px 26px;
  box-shadow:0 30px 60px -32px rgba(13,13,12,0.5);
}
.cs-glance-lab {
  font-size:11px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:rgba(255,252,248,0.45); margin-bottom:22px;
}
.cs-glance-list { list-style:none; }
.cs-glance-list li { padding:16px 0; border-top:1px solid rgba(255,232,214,0.14); }
.cs-glance-list li:first-child { border-top:0; padding-top:0; }
.g-num {
  display:block; font-family:"Fraunces", serif; font-weight:600;
  font-size:34px; line-height:1; letter-spacing:-0.8px; color:#FFFCF8; margin-bottom:8px;
}
.g-lab { display:block; font-size:13.5px; line-height:1.5; color:rgba(255,252,248,0.72); }
.cs-glance-src {
  margin-top:20px; font-size:11px; letter-spacing:0.6px; text-transform:uppercase;
  color:rgba(255,252,248,0.38);
}
@media (max-width: 980px) {
  .cs-hero { grid-template-columns:1fr; }
  .cs-glance { max-width:520px; }
}

/* END OF CASE */
.cs-end { padding:86px var(--pad-x) 92px; }
.cs-end-inner {
  max-width:var(--measure); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap;
  padding-top:44px; border-top:1px solid #E5DFD6;
}
.cs-end-line {
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(22px, 2.3vw, 30px); line-height:1.32; letter-spacing:-0.5px;
  max-width:22ch; color:var(--black);
}
.cs-end-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cs-livecta {
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:var(--orange); color:#FFFCF8;
  font-weight:600; font-size:13.5px; padding:11px 20px; border-radius:10px;
  box-shadow:0 4px 16px rgba(232,80,2,0.26);
  transition:background .2s, transform .15s, box-shadow .2s;
}
.cs-livecta:hover { background:var(--orange-d); transform:translateY(-2px); box-shadow:0 8px 22px rgba(232,80,2,0.34); }
.cs-livecta svg { width:14px; height:14px; }
.cs-endback {
  background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:500; color:var(--g400);
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.cs-endback:hover { color:var(--black); border-color:rgba(13,13,12,0.3); }

/* DIAGRAMS */
.dia-wrap { max-width:var(--measure); margin:0 auto 20px; }
.dia { width:100%; height:auto; display:block; }
.dia-wrap .shot-cap { margin-top:10px; }
.dia-lab {
  font-size:11.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--g200); margin-bottom:16px;
}
.cs-dark .dia-lab { color:rgba(255,252,248,0.45); }
.cs-dark .shot-cap { color:rgba(255,252,248,0.6); }
@media (max-width: 760px) {
  .dia-wrap { overflow-x:auto; }
  .dia { min-width:760px; }
}

/* REVEAL */
.rv { opacity:0; transform:translateY(26px); transition:opacity 0.8s cubic-bezier(0.16,0.84,0.28,1), transform 0.8s cubic-bezier(0.16,0.84,0.28,1); }
.rv.in { opacity:1; transform:none; }

a:focus-visible, button:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

@media (max-width: 900px) {
  .stats { grid-template-columns:1fr; }
  .cs-meta { gap:0 34px; }
  .cs-body { padding-top:64px; }
  .cs-block, .dec { margin-bottom:58px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

nav { grid-template-columns:auto 1fr auto; }
.nav-links { display:flex; justify-content:center; gap:48px; list-style:none; }
.nav-links a { font-weight:400; font-size:15px; color:var(--black); text-decoration:none; transition:color 0.2s; }
.nav-links a:hover { color:var(--orange); }
.nav-contact {
  justify-self:end; display:inline-flex; align-items:center;
  font-size:13.5px; font-weight:600; color:var(--black); text-decoration:none;
  border:1.5px solid var(--black); border-radius:10px; padding:9px 18px;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.nav-contact:hover { background:var(--orange); border-color:var(--orange); color:#FFFCF8; transform:translateY(-2px); }
.cs-endback { text-decoration:none; }
@media (max-width:900px){ .nav-links, .nav-contact { display:none; } }
/* LIVE EMBEDS */
.live-embed {
  position:relative; height:var(--h, 620px); overflow:hidden; background:#0B0710;
}
.live-embed iframe {
  width:1440px; height:calc(var(--h, 620px) / 0.75); border:0; display:block;
  transform:scale(0.75); transform-origin:top left;
}
.live-hint {
  position:absolute; left:16px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; letter-spacing:0.4px;
  color:rgba(255,252,248,0.72); background:rgba(12,8,14,0.6);
  border:1px solid rgba(255,232,214,0.18); border-radius:999px; padding:6px 12px;
  backdrop-filter:blur(6px);
}
.live-hint::before {
  content:''; width:7px; height:7px; border-radius:50%; background:#E85002;
  box-shadow:0 0 0 0 rgba(232,80,2,0.6); animation:mxPulse 2s infinite;
}
@keyframes mxPulse {
  0% { box-shadow:0 0 0 0 rgba(232,80,2,0.55); }
  70% { box-shadow:0 0 0 9px rgba(232,80,2,0); }
  100% { box-shadow:0 0 0 0 rgba(232,80,2,0); }
}
.live-embed.is-idle::after {
  content:'Loading the live page'; position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:rgba(255,252,248,0.4);
}

/* MAXELLA SPECIFICS */
.mx-notes { margin-top:6px; }
.mx-notes.three { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.mx-notes strong { font-weight:700; }
.mx-hero .cs-title { max-width:17ch; }
.cs-glance-list .g-num { font-size:30px; }

.mx-evidence {
  display:grid; grid-template-columns:1fr 1fr; gap:36px 48px; margin-top:38px;
  max-width:var(--measure);
}
.mx-col ul { list-style:none; }
.mx-col li {
  position:relative; padding:14px 0 14px 26px; font-size:15px; line-height:1.6; color:#3A3735;
  border-top:1px solid #E5DFD6;
}
.mx-col li:first-of-type { border-top:0; }
.mx-col li::before {
  content:''; position:absolute; left:2px; top:22px;
  width:8px; height:8px; border-radius:50%; border:1.6px solid #E85002;
}
@media (max-width: 860px) { .mx-evidence { grid-template-columns:1fr; } }
@media (max-width: 760px) {
  .live-embed iframe { transform:scale(0.44); height:calc(var(--h, 620px) / 0.44); }
}

/* live embed fallback */
.live-fallback { display:none; width:100%; height:auto; }
.live-embed.no-live { height:auto; background:transparent; }
.live-embed.no-live .live-fallback { display:block; }
.live-embed.no-live .live-hint { display:none; }
.live-embed.no-live::after { content:none; }