/* ============================================================================
   PRAKTIKO design system - shared across all pages
   Grounds: warm near-black (narrative) + warm paper (product evidence).
   Brand accents (Manual de Marca 2021): orange #FF8F35, green #76AB53.
   Type: Archivo (display) / Work Sans (body, manual secondary) /
         IBM Plex Mono (labels) / Playfair Display italic (aphorisms).
   ========================================================================= */

:root{
  --night:#0D0B07;
  --night-2:#161209;
  --night-3:#1E1910;
  --paper:#F6F2EA;
  --paper-2:#EEE8DD;
  --orange:#FF8F35;
  --orange-deep:#E97C1F;
  --orange-text-p:#A85408;
  --orange-soft:rgba(255,143,53,.14);
  --green:#76AB53;
  --green-deep:#517D32;
  --green-bright:#8FC468;
  --ink-d:#F5F2EC;
  --mut-d:#A9A294;
  --dim-d:#7C766A;
  --ink-p:#221E17;
  --mut-p:#6E6759;
  --line-d:rgba(245,242,236,.12);
  --line-p:rgba(34,30,23,.14);
  --sans:'Archivo','Segoe UI',system-ui,sans-serif;
  --body:'Work Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Consolas',monospace;
  --serif:'Playfair Display',Georgia,serif;
  --wrap:1360px;
  --gutter:clamp(22px,5vw,72px);
  --sec:clamp(88px,9.5vw,150px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink-d);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:inherit}
::selection{background:rgba(255,143,53,.32);color:#fff}

/* ---------------- shared layout ---------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec-paper{background:var(--paper);color:var(--ink-p)}
.sec-night2{background:var(--night-2)}

/* ---------------- voice system ---------------- */
.eb{display:flex;align-items:center;gap:14px;margin:0 0 26px;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange)}
.eb::before{content:"";width:26px;height:1px;background:var(--orange);flex:none}
@media (prefers-reduced-motion:no-preference){
  .eb.rv::before{width:0;transition:width .8s cubic-bezier(.2,.7,.2,1) .25s}
  .eb.rv.in::before{width:26px}
}
.eb .n{color:var(--dim-d);letter-spacing:.1em}
.sec-paper .eb{color:var(--orange-text-p)}
.sec-paper .eb::before{background:var(--orange-text-p)}
.sec-paper .eb .n{color:#A79E8D}

.h1{margin:0;font-family:var(--sans);font-weight:800;letter-spacing:-.022em;line-height:1.02;
  font-size:clamp(40px,5.6vw,88px);color:var(--ink-d);text-wrap:balance}
.h2{margin:0;font-family:var(--sans);font-weight:800;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(30px,3.6vw,54px);color:var(--ink-d);text-wrap:balance}
.h3{margin:0;font-family:var(--sans);font-weight:700;letter-spacing:-.012em;line-height:1.18;
  font-size:clamp(20px,1.9vw,27px)}
.sec-paper .h1,.sec-paper .h2,.sec-paper .h3{color:var(--ink-p)}
.h1 .o,.h2 .o{color:var(--orange)}
.h1 .g,.h2 .g{color:var(--green-bright)}
.sec-paper .h1 .o,.sec-paper .h2 .o{color:var(--orange-deep)}
.sec-paper .h1 .g,.sec-paper .h2 .g{color:var(--green-deep)}
.lead{margin:26px 0 0;font-size:clamp(16px,1.35vw,19.5px);font-weight:300;line-height:1.7;
  color:var(--mut-d);max-width:56ch}
.lead strong{font-weight:500;color:var(--ink-d)}
.sec-paper .lead{color:var(--mut-p)}
.sec-paper .lead strong{color:var(--ink-p)}
.aph{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;line-height:1.42;
  font-size:clamp(23px,2.5vw,36px);color:var(--ink-d);text-wrap:balance}
.aph .o{color:var(--orange)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:12px;
  text-decoration:none;border:0;cursor:pointer;font-family:var(--sans);font-size:15.5px;font-weight:600;
  color:#1C1206;background:linear-gradient(180deg,#FFA85C,var(--orange) 55%,#F07F17);
  box-shadow:0 6px 26px rgba(255,143,53,.28),inset 0 1px 0 rgba(255,255,255,.38);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 10px 32px rgba(255,143,53,.4),inset 0 1px 0 rgba(255,255,255,.42)}
.btn svg{width:15px;height:15px;flex:none}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:12px;
  text-decoration:none;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:600;
  color:var(--ink-d);background:transparent;border:1px solid rgba(245,242,236,.28);
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.btn-ghost:hover{border-color:rgba(255,143,53,.6);background:rgba(255,143,53,.06);transform:translateY(-2px)}
.btn-ghost svg{width:14px;height:14px}
.sec-paper .btn-ghost{color:var(--ink-p);border-color:rgba(34,30,23,.3)}
.sec-paper .btn-ghost:hover{border-color:var(--orange-deep);background:rgba(233,124,31,.07)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;
  font-weight:600;color:var(--orange);text-decoration:none}
.tlink svg{width:14px;height:14px;transition:transform .2s ease}
.tlink:hover svg{transform:translateX(4px)}
.sec-paper .tlink{color:var(--orange-text-p)}

/* ---------------- nav ---------------- */
.knav{position:fixed;z-index:60;top:0;left:0;right:0;
  display:flex;align-items:center;gap:30px;padding:0 clamp(18px,3vw,44px);height:78px;
  background:rgba(13,11,7,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(245,242,236,.08)}
.knav .brand{display:inline-flex;align-items:center;flex:none}
.knav .brand img{display:block;height:34px;width:auto}
.knav ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0 0 0 8px;padding:0}
.knav li{position:relative}
.knav a.top{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:9px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;color:#E9E5DC;text-decoration:none;
  transition:background .16s ease,color .16s ease}
.knav a.top:hover,.knav a.top[aria-current="page"]{background:rgba(245,242,236,.08);color:#fff}
.knav a.top svg{width:9px;height:6px;opacity:.6}
.knav .drop{position:absolute;left:0;top:calc(100% + 8px);min-width:264px;padding:8px;margin:0;
  display:none;flex-direction:column;gap:2px;list-style:none;border-radius:14px;
  background:rgba(20,17,11,.96);border:1px solid rgba(245,242,236,.1);
  box-shadow:0 22px 50px rgba(0,0,0,.5)}
.knav .drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.knav li:hover .drop,.knav li:focus-within .drop{display:flex}
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  .knav li:hover .drop,.knav li:focus-within .drop{animation:dropin .22s cubic-bezier(.2,.7,.2,1)}
  @keyframes dropin{from{opacity:0;transform:translateY(7px)}}
}
.knav .drop a{display:block;padding:10px 14px;border-radius:9px;font-size:14px;font-weight:500;
  color:#DDD8CD;text-decoration:none}
.knav .drop a:hover{background:rgba(255,143,53,.1);color:#fff}
.knav .drop a small{display:block;margin-top:2px;font-family:var(--body);font-weight:400;
  font-size:12px;color:var(--dim-d)}
.knav .cta{margin-left:auto;display:inline-flex;align-items:center;gap:9px;padding:11px 22px;
  border-radius:99px;text-decoration:none;font-family:var(--sans);font-size:14.5px;font-weight:600;
  color:#1C1206;background:linear-gradient(180deg,#FFA85C,var(--orange) 55%,#F07F17);
  box-shadow:0 4px 18px rgba(255,143,53,.3),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease,filter .18s ease}
.knav .cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
.knav .cta svg{width:13px;height:13px}
.knav .mbtn{display:none}
main{padding-top:78px}

/* mobile nav */
@media (max-width:960px){
  .knav{height:64px;gap:14px}
  .knav .brand img{height:27px}
  .knav ul.menu{position:fixed;inset:64px 0 auto 0;max-height:calc(100dvh - 64px);overflow:auto;
    flex-direction:column;align-items:stretch;gap:0;padding:14px 18px 26px;margin:0;
    background:rgba(13,11,7,.98);border-bottom:1px solid rgba(245,242,236,.1);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
  .knav.open ul.menu{transform:none;opacity:1;pointer-events:auto}
  .knav a.top{padding:13px 10px;font-size:16px}
  .knav .drop{position:static;display:flex;border:0;background:none;box-shadow:none;padding:0 0 6px 14px}
  .knav .mbtn{display:grid;place-items:center;margin-left:auto;width:42px;height:42px;border:0;
    border-radius:10px;background:rgba(245,242,236,.08);cursor:pointer}
  .knav .mbtn span,.knav .mbtn span::before,.knav .mbtn span::after{display:block;width:18px;height:2px;
    background:#EDE9DF;border-radius:2px;position:relative;transition:transform .2s ease}
  .knav .mbtn span::before,.knav .mbtn span::after{content:"";position:absolute;left:0}
  .knav .mbtn span::before{top:-6px}.knav .mbtn span::after{top:6px}
  .knav.open .mbtn span{background:transparent}
  .knav.open .mbtn span::before{transform:translateY(6px) rotate(45deg)}
  .knav.open .mbtn span::after{transform:translateY(-6px) rotate(-45deg)}
  .knav .cta{margin-left:0;padding:9px 16px;font-size:13.5px}
  main{padding-top:64px}
}

/* ---------------- page hero (interior pages) ---------------- */
.phero{position:relative;padding:clamp(74px,9vw,130px) 0 clamp(56px,6vw,90px);overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 60% at 82% 0%,rgba(255,143,53,.1),transparent 65%),
             radial-gradient(40% 46% at 8% 100%,rgba(118,171,83,.07),transparent 70%)}
.phero .wrap{position:relative}
.phero .lead{max-width:62ch}

/* ---------------- evidence frames (real product captures) ---------------- */
.shot.zoomable{cursor:zoom-in;transition:box-shadow .35s ease}
.shot.zoomable:hover{box-shadow:0 26px 60px rgba(34,30,23,.2)}
.shot{background:var(--paper);border:1px solid rgba(34,30,23,.16);border-radius:16px;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.34)}
.sec-paper .shot{box-shadow:0 18px 44px rgba(34,30,23,.14);border-color:rgba(34,30,23,.13)}
.shot img{display:block;width:100%;height:auto}
.shot .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 16px;border-top:1px solid rgba(34,30,23,.1);background:#FBF8F2}
.shot .bar span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#8A8171}
.shot .bar em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#3F6625}
.shot.zoomable{cursor:zoom-in;transition:transform .25s ease,box-shadow .25s ease}
.shot.zoomable:hover{transform:translateY(-4px)}

/* lightbox */
.lbox{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  padding:4vmin;background:rgba(8,6,3,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lbox.on{display:flex}
.lbox img{max-width:min(96vw,1500px);max-height:88vh;width:auto;height:auto;border-radius:12px;
  box-shadow:0 40px 120px rgba(0,0,0,.6);background:var(--paper)}
.lbox .cap{position:absolute;left:0;right:0;bottom:3vmin;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#B9B2A4}
.lbox .x{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;border:0;
  cursor:pointer;background:rgba(245,242,236,.1);color:#EDE9DF;font-size:20px;line-height:1}
.lbox .x:hover{background:rgba(255,143,53,.25)}

/* ---------------- cards ---------------- */
.kcard{position:relative;border-radius:18px;padding:34px 32px 30px;background:var(--night-2);
  border:1px solid var(--line-d);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.kcard:hover{transform:translateY(-5px);border-color:rgba(255,143,53,.34);background:var(--night-3)}
.sec-paper .kcard{background:#FCFAF5;border-color:rgba(34,30,23,.12);
  box-shadow:0 10px 30px rgba(34,30,23,.07)}
.sec-paper .kcard:hover{border-color:rgba(233,124,31,.4);background:#fff}

/* ---------------- stats ---------------- */
.bignum{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(44px,5vw,76px);color:var(--ink-d)}
.bignum .o{color:var(--orange)}.bignum .g{color:var(--green-bright)}
.sec-paper .bignum{color:var(--ink-p)}
.sec-paper .bignum .o{color:var(--orange-deep)}.sec-paper .bignum .g{color:var(--green-deep)}

/* ---------------- footer ---------------- */
.kfoot{background:#0A0805;border-top:1px solid rgba(245,242,236,.08);padding:74px 0 0;color:#C9C3B6}
.kfoot .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.kfoot .brand img{height:36px;width:auto}
.kfoot p.tag{margin:18px 0 0;font-size:14px;font-weight:300;line-height:1.65;color:#96907F;max-width:34ch}
.kfoot h4{margin:4px 0 16px;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:#8A8171}
.kfoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.kfoot a{font-size:14.5px;color:#CFC9BC;text-decoration:none}
.kfoot a:hover{color:var(--orange)}
.kfoot .base{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:60px;padding:22px 0;border-top:1px solid rgba(245,242,236,.07);
  font-size:12.5px;color:#7E7869}
.kfoot .base a{font-size:12.5px;color:#98917F}
@media (max-width:860px){.kfoot .grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.kfoot .grid{grid-template-columns:1fr}}

/* ---------------- reveals & motion ---------------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .rv.in{opacity:1;transform:none}
  .rvs{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .rvs.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.rv,.rvs{opacity:1;transform:none}}

/* ---------------- helpers ---------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,84px);align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.grid2.asym{grid-template-columns:1.2fr .8fr}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,30px)}
@media (max-width:960px){.grid2,.grid2.asym{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr;gap:34px 20px}}
.mt0{margin-top:0}.tc{text-align:center}
.hr-d{border:0;height:1px;background:var(--line-d);margin:0}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(245,242,236,.18);color:var(--mut-d)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--green-bright);flex:none}
.sec-paper .chip{border-color:rgba(34,30,23,.2);color:var(--mut-p)}
.sec-paper .chip i{background:var(--green-deep)}

/* ================= cinematic layer ================= */
/* cross-page transitions (progressive enhancement) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}

/* nav scroll progress */
.knav .progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--orange),var(--green-bright));pointer-events:none}

/* scene hero: full generated plate, copy composed inside the frame (never cropped) */
.cine{position:relative;background:var(--night);overflow:hidden}
.cine .stage{position:relative;width:100%;container-type:inline-size;--hu:1cqw}
.cine .plate{display:block;width:100%}
@media (min-width:861px){
  .cine{height:min(56.25vw,100svh);min-height:560px}
  .cine .stage{height:100%;--hu:min(1cqw,19px)}
  .cine .plate{height:100%;object-fit:cover;object-position:50% 45%}
}
.cine .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,8,5,.78) 0%,rgba(10,8,5,.5) 30%,rgba(10,8,5,.08) 55%),
             linear-gradient(0deg,rgba(13,11,7,1) 0%,rgba(13,11,7,0) 18%)}
.cine .veil.center{background:linear-gradient(0deg,rgba(13,11,7,1) 0%,rgba(13,11,7,.12) 26%,rgba(10,8,5,.42) 100%)}
.cine .copy{position:absolute;z-index:2;left:6cqw;top:50%;transform:translateY(-50%);width:44cqw}
.cine .copy .eb{font-size:calc(var(--hu)*1);margin-bottom:1.6cqw}
.cine .copy .h1{font-size:calc(var(--hu)*4.6);line-height:1.03}
.cine .copy .lead{font-size:calc(var(--hu)*1.25);line-height:1.6;margin-top:1.6cqw;max-width:36cqw}
.cine .copy .row{display:flex;gap:1cqw;flex-wrap:wrap;margin-top:2.2cqw}
.cine .copy .btn{font-size:calc(var(--hu)*1.1);padding:1.05cqw 2.1cqw;border-radius:.85cqw;gap:.7cqw}
.cine .copy .btn svg{width:1.05cqw;height:1.05cqw}
.cine .copy .btn-ghost{font-size:calc(var(--hu)*1.05);padding:1cqw 1.8cqw;border-radius:.85cqw;gap:.7cqw}
.cine .copy .btn-ghost svg{width:1cqw;height:1cqw}
.cine .copy.mid{left:50%;top:42%;transform:translate(-50%,-50%);width:66cqw;text-align:center}
.cine .copy.mid .eb{justify-content:center}
.cine .copy.mid .lead{margin-left:auto;margin-right:auto}
.cine .copy.mid .row{justify-content:center}
@media (max-width:860px){
  .cine{display:block;height:auto;min-height:0}
  .cine .stage{max-width:none;height:auto}
  .cine .plate{height:auto;object-fit:fill}
  .cine .veil{display:none}
  .cine .copy,.cine .copy.mid{position:static;transform:none;width:auto;text-align:left;
    padding:9cqw 6cqw 4cqw}
  .cine .copy .eb,.cine .copy.mid .eb{font-size:3cqw;justify-content:flex-start;margin-bottom:3cqw}
  .cine .copy .h1{font-size:9.6cqw;line-height:1.1}
  .cine .copy .lead{font-size:4cqw;max-width:none;margin-top:4cqw}
  .cine .copy .row{gap:3cqw;margin-top:6cqw;justify-content:flex-start}
  .cine .copy .btn{font-size:3.9cqw;padding:3.2cqw 6cqw;border-radius:2.4cqw;gap:2.2cqw}
  .cine .copy .btn svg{width:3.6cqw;height:3.6cqw}
  .cine .copy .btn-ghost{font-size:3.8cqw;padding:3cqw 5.4cqw;border-radius:2.4cqw;gap:2.2cqw}
}

/* composed module hero: text left, evidence in 3D right, index numeral behind */
.mhero{position:relative;overflow:hidden;padding:clamp(70px,8vw,120px) 0 clamp(40px,4vw,70px)}
.mhero .num{position:absolute;z-index:0;right:-1.5vw;top:-4vw;pointer-events:none;user-select:none;
  font-family:var(--sans);font-weight:800;line-height:1;font-size:clamp(220px,30vw,480px);
  color:transparent;-webkit-text-stroke:1.5px rgba(255,143,53,.13)}
.mhero .grid{position:relative;z-index:1;display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(30px,4vw,70px);align-items:center}
.mhero .shot3d{perspective:1400px}
.mhero .shot3d .shot{transform:rotateY(-9deg) rotateX(2.5deg) rotateZ(.4deg);
  transform-style:preserve-3d;box-shadow:-30px 40px 90px rgba(0,0,0,.55);
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mhero .shot3d:hover .shot{transform:none}
@media (max-width:960px){
  .mhero .grid{grid-template-columns:1fr}
  .mhero .num{font-size:200px;right:-30px;top:-30px}
  .mhero .shot3d .shot{transform:none}
}
@media (prefers-reduced-motion:reduce){.mhero .shot3d .shot{transform:none}}

/* sentence chapter (scroll-completed manifesto) */
.sent{position:relative;height:260vh}
.sent .hold{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.sent .lines{width:100%}
.sent .line{display:block;font-family:var(--sans);font-weight:800;letter-spacing:-.025em;line-height:1.04;
  font-size:clamp(42px,6.4vw,104px);color:var(--ink-d);opacity:.1;transform:translateY(22px);
  will-change:opacity,transform}
.sent .line .o{color:var(--orange)}.sent .line .g{color:var(--green-bright)}
.sent .after{margin-top:clamp(26px,3vw,44px);opacity:0;transform:translateY(14px);will-change:opacity,transform}
@media (prefers-reduced-motion:reduce){
  .sent{height:auto;padding:var(--sec) 0}
  .sent .hold{position:static;height:auto}
  .sent .line{opacity:1;transform:none}
  .sent .after{opacity:1;transform:none}
}
@media (max-width:860px){.sent{height:230vh}}

/* evidence deck (fanned captures that resolve on scroll) */
.deck{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.deck .card{will-change:transform}
@media (max-width:860px){.deck{grid-template-columns:1fr}.deck .card{transform:none!important}}

/* module rows: floating preview thumb */
.modlist{position:relative}
.thumbf{position:absolute;z-index:5;width:min(300px,26vw);pointer-events:none;opacity:0;
  transform:scale(.94);transition:opacity .25s ease,transform .25s ease;
  border-radius:12px;overflow:hidden;border:1px solid rgba(255,143,53,.3);
  box-shadow:0 26px 60px rgba(0,0,0,.55);background:var(--paper)}
.thumbf img{display:block;width:100%;height:auto}
.thumbf.on{opacity:1;transform:none}
@media (hover:none),(max-width:960px){.thumbf{display:none}}

/* full-bleed scene CTA */
.cta-cine{position:relative;display:flex;justify-content:center;background:var(--night);overflow:hidden;
  border-top:1px solid rgba(245,242,236,.07)}
.cta-cine .stage{position:relative;width:100%;max-width:calc(100dvh*2.2);container-type:inline-size}
.cta-cine .plate{display:block;width:100%;height:auto}
.cta-cine .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(13,11,7,.94) 0%,rgba(13,11,7,.2) 34%,rgba(13,11,7,.55) 100%)}
.cta-cine .copy{position:absolute;z-index:2;left:50%;top:44%;transform:translate(-50%,-50%);
  width:72cqw;text-align:center}
.cta-cine .h2{font-size:3.4cqw;text-shadow:0 2px 22px rgba(8,6,3,.7)}
.cta-cine .lead{font-size:1.2cqw;margin:1.4cqw auto 0;max-width:40cqw;color:#DDD9D0;text-shadow:0 1px 14px rgba(8,6,3,.8)}
.cta-cine .row{display:flex;justify-content:center;gap:1cqw;flex-wrap:wrap;margin-top:2.2cqw}
.cta-cine .btn{font-size:1.1cqw;padding:1.05cqw 2.1cqw;border-radius:.85cqw;gap:.7cqw}
.cta-cine .btn svg{width:1.05cqw;height:1.05cqw}
.cta-cine .btn-ghost{font-size:1.05cqw;padding:1cqw 1.8cqw;border-radius:.85cqw;gap:.7cqw}
@media (max-width:860px){
  .cta-cine{display:block}
  .cta-cine .stage{max-width:none}
  .cta-cine .copy{position:static;transform:none;width:auto;text-align:center;padding:10cqw 6cqw 12cqw}
  .cta-cine .h2{font-size:8.4cqw}
  .cta-cine .lead{font-size:4cqw;max-width:none}
  .cta-cine .row{gap:3cqw;margin-top:6cqw}
  .cta-cine .btn{font-size:3.9cqw;padding:3.2cqw 6cqw;border-radius:2.4cqw;gap:2.2cqw}
  .cta-cine .btn-ghost{font-size:3.8cqw;padding:3cqw 5.4cqw;border-radius:2.4cqw}
  .cta-cine .veil{background:linear-gradient(0deg,rgba(13,11,7,.5) 0%,rgba(13,11,7,.1) 60%)}
}

/* ================= editorial light theme (site-wide, body.edpage) =================
   Token flip: components that referenced the night tokens render on the editorial
   palette instead: white ground, cream bands, ink type, deep green and orange. */
body.edpage{
  --night:#FDFDFC;--night-2:#F3F8EE;--night-3:#E9F2E1;
  --paper:#F4F8F0;--paper-2:#EAF2E4;
  --ink-d:#1B1A16;--mut-d:#5C5951;--dim-d:#95907F;
  --line-d:rgba(34,30,23,.14);
  --orange:#DD7A12;--green-bright:#3FA33F;--green:#4E9C42;
  background:#FDFDFC;color:#1B1A16;
}
body.edpage ::selection{background:rgba(221,122,18,.25);color:#1B1A16}
body.edpage .sent{background:#F1F6EB}
body.edpage .kcard{background:#fff;border:1px solid rgba(34,30,23,.12);
  box-shadow:0 10px 30px rgba(60,48,30,.08)}
body.edpage .kcard:hover{border-color:rgba(221,122,18,.45);box-shadow:0 16px 40px rgba(60,48,30,.13)}
body.edpage .btn-ghost{color:#1B1A16;border-color:rgba(34,30,23,.3)}
body.edpage .btn-ghost:hover{border-color:#DD7A12;background:rgba(221,122,18,.07)}
body.edpage .kfoot{background:#F1F6EB;border-top:1px solid rgba(34,30,23,.12);color:#55524A}
body.edpage .kfoot p.tag{color:#7A7567}
body.edpage .kfoot a{color:#3D3A33}
body.edpage .kfoot a:hover{color:#C96A0C}
body.edpage .kfoot h4{color:#95907F}
body.edpage .kfoot .base{border-top:1px solid rgba(34,30,23,.12)}
body.edpage .kfoot .base a{color:#8A8577}
body.edpage .thumbf{background:#fff;border-color:rgba(221,122,18,.45)}
/* fixed nav, light glass */
body.edpage .knav{background:rgba(253,253,252,.82);border-bottom:1px solid rgba(34,30,23,.1)}
body.edpage .knav a.top{color:#3A382F}
body.edpage .knav a.top:hover,body.edpage .knav a.top[aria-current="page"]{background:rgba(34,30,23,.07);color:#161511}
body.edpage .knav .drop{background:rgba(253,252,249,.98);border:1px solid rgba(34,30,23,.12);
  box-shadow:0 24px 60px rgba(40,32,16,.16)}
body.edpage .knav .drop a{color:#2E2C25}
body.edpage .knav .drop a:hover{background:rgba(221,122,18,.1);color:#161511}
body.edpage .knav .drop a small{color:#8A8577}
body.edpage .knav .mbtn{background:rgba(34,30,23,.06)}
body.edpage .knav .mbtn span,body.edpage .knav .mbtn span::before,body.edpage .knav .mbtn span::after{background:#22211C}
@media (max-width:1080px){
  body.edpage .knav ul.menu{background:rgba(253,252,249,.98);border-bottom:1px solid rgba(34,30,23,.12)}
}
/* module hero on light ground */
body.edpage .mhero .num{-webkit-text-stroke:1.5px rgba(221,122,18,.22)}
body.edpage .mhero .shot3d .shot{box-shadow:-26px 36px 80px rgba(60,48,30,.22)}
/* scene heroes: keep the photography, cut clean into the light page */
body.edpage .cine{background:#FDFDFC}
body.edpage .cine .veil{background:linear-gradient(90deg,rgba(10,8,5,.78) 0%,rgba(10,8,5,.5) 30%,rgba(10,8,5,.08) 55%)}
body.edpage .cine .veil.center{background:linear-gradient(0deg,rgba(13,11,7,.55) 0%,rgba(13,11,7,.12) 30%,rgba(10,8,5,.42) 100%)}
/* editorial CTA band (replaces the dusk-photo band) */
.cta-ed{background:#FDF2E3;border-top:1px solid rgba(34,30,23,.1);
  padding:clamp(90px,10vw,150px) 0;text-align:center}
.cta-ed .h2{max-width:22ch;margin:0 auto}
.cta-ed .lead{max-width:52ch;margin:24px auto 0}
.cta-ed .row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:38px}
body.edpage .cta-ed .h2{color:#1B1A16}

/* ============ section curves (odoo.com reference): full-bleed bands separated
   by huge sweeping arcs. Bands stay full width; their edges carry either a
   shallow full-width dome or one giant asymmetric corner. ============ */
body.edpage .sec-night2{
  border-top-left-radius:50% clamp(46px,7vw,120px);
  border-top-right-radius:50% clamp(46px,7vw,120px)}
body.edpage .sec-night2:nth-of-type(odd){border-bottom-right-radius:clamp(140px,20vw,380px)}
body.edpage .sec-night2:nth-of-type(even){border-bottom-left-radius:clamp(140px,20vw,380px)}
body.edpage .cta-ed{border-top:0;border-top-left-radius:clamp(140px,20vw,380px)}
body.edpage .kfoot{border-top:0;
  border-top-left-radius:50% clamp(40px,6vw,100px);
  border-top-right-radius:50% clamp(40px,6vw,100px)}
/* floating marker dashes, the hand-drawn strokes near band edges */
.mstroke{position:absolute;height:10px;border-radius:6px;background:#F5A93B;opacity:.85;
  pointer-events:none;transform:rotate(-.6deg)}
.mstroke.s2{height:7px;opacity:.55}
/* giant background circle behind a showcase moment */
.bigring{position:absolute;border-radius:50%;background:#fff;pointer-events:none}

/* ============ handwritten accent system (marker, not pen) ============ */
.mk{position:relative;z-index:0}
.mk::before{content:"";position:absolute;z-index:-1;left:-.14em;right:-.1em;top:.1em;bottom:0;
  background:rgba(255,177,61,.55);border-radius:.2em .12em .24em .1em;transform:rotate(-1.1deg)}
.mu{position:relative}
.mu::after{content:"";position:absolute;left:0;right:6%;bottom:-.12em;height:.13em;
  background:#3FA33F;border-radius:.1em .2em .12em .22em;transform:rotate(-.7deg)}
.mu.o::after{background:#F5A93B}
.hand{font-family:'Caveat',cursive;font-weight:600;color:#55524A}

/* ============ editorial page hero: light ground, tilted plate cut at the edge ============
   Replaces the dark full-bleed scene hero. Same language as the home collage:
   white world left, cream wedge right, the photograph as a tilted card whose
   crop coincides with the viewport edge. */
.edph{position:relative;overflow:hidden;background:#FDFDFC;container-type:inline-size}
.edph::after{content:"";position:absolute;z-index:0;top:0;bottom:0;right:0;width:58cqw;
  background:#F1F6EB;clip-path:polygon(30% 0,100% 0,100% 100%,10% 100%)}
.edph .inner{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:5cqw;align-items:center;padding:4.8cqw 0 5.6cqw 6cqw}
.edph .eb{margin-bottom:1.4cqw}
.edph .h1{font-size:clamp(34px,4.1cqw,68px);line-height:1.04}
.edph .lead{margin-top:1.4cqw;max-width:44ch}
.edph .row{display:flex;gap:16px;flex-wrap:wrap;margin-top:2.4cqw}
.edph .chip{margin-top:2.4cqw;border-color:rgba(34,30,23,.2);color:#6B675C}
.edph .plate{position:relative;margin:0 -5cqw 0 0;transform:rotate(-4deg);
  border:1px solid rgba(60,48,30,.13);border-radius:.9cqw;overflow:hidden;background:#fff;
  box-shadow:0 2cqw 4.4cqw rgba(50,40,20,.17)}
.edph .plate img{display:block;width:100%;height:auto}
@media (max-width:860px){
  .edph::after{width:100%;top:auto;height:44%;clip-path:polygon(0 14%,100% 0,100% 100%,0 100%)}
  .edph .inner{grid-template-columns:1fr;gap:9cqw;padding:10cqw 6cqw 12cqw}
  .edph .plate{margin:0 -10cqw 0 4cqw;transform:rotate(-2.5deg)}
  .edph .h1{font-size:9.4cqw}
}