/* ============================================================
   DAMATRIX STUDIOS NETWORK
   Palette, type and the signature devices are lifted directly
   from the 3 P's print kit so the site and the manuals read as
   one system: Anton display, Archivo body, Space Mono labels,
   acid green on near-black.

   One deliberate departure. The kit sets acid #93DF00 as small
   text on white, which is about 1.6:1 and unreadable on screen.
   On light grounds the acid is kept for rules, borders and fills
   only, and --acid-ink carries any green *text*. Two greens on
   purpose — check the background before reaching for either.
   ============================================================ */
:root{
  --acid:#93DF00;          /* on ink — 13:1 */
  --acid-ink:#4E7A00;      /* the same accent as text on paper */
  --ink:#1C1A1B;
  --ink-2:#262425;
  --paper:#F4F4F2;
  --paper-2:#F7F7F5;
  --line:#C9C9C6;
  --line-dk:#4A484A;
  --mute:#8A8A87;
  --mid:#555354;
  --soft:#3A383A;
  --disp:"Anton","Archivo Black",Impact,sans-serif;
  --body:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.52;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 28px}

/* type */
h1,h2,h3.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.96;letter-spacing:.006em;text-wrap:balance}
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acid-ink)}
.eyebrow.on-dark{color:var(--acid)}
.rule{width:132px;height:5px;background:var(--acid);margin:26px 0 24px}
.deck{font-size:19px;color:var(--mid);max-width:60ch;padding-bottom:20px;border-bottom:3px solid var(--acid)}
.sec-dark .deck{color:#C9C9C6;border-bottom-color:var(--acid)}

/* skip */
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 18px}

/* header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(28,26,27,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dk);color:var(--paper)}
.hdr-in{display:flex;align-items:center;gap:26px;height:76px}
.brand{display:flex;flex-direction:column;text-decoration:none;flex:none;line-height:1}
.brand b{font-family:var(--disp);font-size:21px;letter-spacing:.02em;text-transform:uppercase;color:var(--paper)}
.brand span{font-family:var(--mono);font-size:8.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;color:#C9C9C6;transition:color .16s}
.nav a:hover{color:var(--acid)}
/* Buttons read as objects, not as coloured text. Each variant carries its own
   hard drop in a tone that shows against the ground it sits on — a single
   shadow colour would vanish on the dark sections. Hover lifts, press sinks,
   so the control answers back. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;padding:15px 26px;min-height:48px;border:1px solid transparent;border-radius:3px;cursor:pointer;position:relative;
  transition:transform .14s ease,box-shadow .14s ease,background .18s,color .18s,border-color .18s}
.btn:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
.btn-acid{background:var(--acid);color:var(--ink);box-shadow:0 4px 0 #5E8F00}
.btn-acid:hover{background:#A8F400;transform:translateY(-2px);box-shadow:0 6px 0 #5E8F00}
.btn-acid:active{transform:translateY(2px);box-shadow:0 1px 0 #5E8F00}
.btn-line{border-color:var(--paper);color:var(--paper);box-shadow:0 4px 0 rgba(244,244,242,.30)}
.btn-line:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 0 rgba(244,244,242,.42)}
.btn-line:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(244,244,242,.30)}
.btn-ink{border-color:var(--ink);color:var(--ink);background:#fff;box-shadow:0 4px 0 rgba(28,26,27,.30)}
.btn-ink:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);box-shadow:0 6px 0 rgba(28,26,27,.42)}
.btn-ink:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(28,26,27,.30)}
.btn-sm{padding:12px 18px;min-height:40px;font-size:11px}

/* two buttons side by side, wrapping cleanly on a phone */
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.topbar-actions{display:flex;align-items:center;gap:10px;flex:none}

/* hero */
.hero{background:var(--ink);color:var(--paper);padding:92px 0 0;position:relative;overflow:hidden}
.hero h1{font-size:clamp(46px,8.4vw,108px);color:var(--paper);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--acid)}
.hero .sub{margin-top:26px;font-size:clamp(17px,1.9vw,20px);max-width:52ch;color:#C9C9C6}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.stamp{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dk);border-top:1px solid var(--line-dk);margin-top:70px}
.stamp div{background:var(--ink);padding:26px 22px}
.stamp b{display:block;font-family:var(--disp);font-size:clamp(28px,3.6vw,42px);color:var(--paper);line-height:1}
.stamp span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}

/* sections */
.sec{padding:96px 0}
.sec-alt{background:var(--paper-2);border-top:1px solid var(--line)}
.sec-dark{background:var(--ink);color:var(--paper)}
.sec-dark h2{color:var(--paper)}
.sec-head h2{font-size:clamp(34px,5.4vw,62px);margin:0}

/* lane cards — the kit's signature */
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.lane{border:1px solid var(--line);border-top:5px solid var(--acid);background:#fff;padding:28px 24px 30px;transition:transform .2s ease,box-shadow .2s ease}
.sec-dark .lane{background:#232122;border-color:var(--line-dk)}
.lane:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,26,27,.12)}
.lane .n{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acid-ink)}
.sec-dark .lane .n{color:var(--acid)}
.lane .t{font-family:var(--disp);font-size:30px;text-transform:uppercase;letter-spacing:.015em;line-height:1;margin:12px 0 12px}
.lane p{font-size:15.5px;color:var(--soft);line-height:1.5}
.sec-dark .lane p{color:#C9C9C6}
.lane ul{list-style:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.sec-dark .lane ul{border-top-color:var(--line-dk)}
.lane li{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--mid);padding:5px 0 5px 16px;position:relative}
.sec-dark .lane li{color:var(--mute)}
.lane li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:2px;background:var(--acid)}

/* phase rows */
.phases{margin-top:46px}
.phase{border-top:3px solid var(--ink);padding:20px 0 22px;display:grid;grid-template-columns:88px 1fr 150px;gap:20px;align-items:baseline}
.sec-dark .phase{border-top-color:var(--acid)}
.phase .pn{font-family:var(--disp);font-size:34px;color:var(--acid-ink);line-height:1}
.sec-dark .phase .pn{color:var(--acid)}
.phase .pt{font-family:var(--disp);font-size:22px;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.phase .pb{font-size:15.5px;color:var(--mid);margin-top:8px;max-width:62ch}
.sec-dark .phase .pb{color:#C9C9C6}
.phase .pd{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:right;white-space:nowrap}

/* note + flag */
.note{border:1px solid var(--line);border-left:5px solid var(--acid);background:#fff;padding:24px 26px;margin-top:34px}
.note .lbl{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mid);margin-bottom:9px}
.note p{font-size:16px;color:var(--soft)}
.flag{background:var(--ink);color:var(--paper);padding:30px 32px;margin-top:34px}
.flag .lbl{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--acid);margin-bottom:10px}
.flag p{font-size:16.5px;color:#E4E4E1;max-width:64ch}
.flag strong{color:#fff}

/* offer grid */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px}
.offer{border:1px solid var(--line);background:#fff;padding:32px 30px 34px;display:flex;flex-direction:column}
.offer .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acid-ink)}
.offer h3{font-family:var(--disp);font-size:32px;text-transform:uppercase;line-height:1;margin:12px 0 14px;letter-spacing:.015em}
.offer p{font-size:15.5px;color:var(--soft);flex:1}
.offer .meta{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:22px;flex-wrap:wrap}
.offer .meta div{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mid)}
.offer .meta b{display:block;font-family:var(--disp);font-size:20px;color:var(--ink);letter-spacing:.02em;margin-bottom:2px}

/* speakers */
.speakers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:48px}
.spk{border:1px solid var(--line-dk);background:#232122;padding:26px 24px 28px}
.spk .topic{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--acid);margin-bottom:12px}
.spk h3{font-family:var(--disp);font-size:22px;text-transform:uppercase;line-height:1.05;letter-spacing:.02em;color:var(--paper);margin-bottom:10px}
.spk p{font-size:15px;color:#C9C9C6}
.spk .fmt{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-dk);font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--mute);text-transform:uppercase}

/* community */
.impact{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.impact div{background:#fff;padding:30px 26px}
.impact b{display:block;font-family:var(--disp);font-size:40px;line-height:1;color:var(--ink)}
.impact span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid)}
.impact em{display:block;margin-top:10px;font-style:normal;font-size:14.5px;color:var(--soft);line-height:1.45}

/* form */
.book{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start;margin-top:48px}
.form{background:#fff;border:1px solid var(--line);padding:32px}
.sec-dark .form{background:#232122;border-color:var(--line-dk)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);margin:18px 0 7px}
.sec-dark label{color:var(--mute)}
input,select,textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);padding:13px 14px;transition:border-color .16s,box-shadow .16s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acid-ink);box-shadow:0 0 0 3px rgba(147,223,0,.28)}
textarea{min-height:104px;resize:vertical}
.form .btn{width:100%;margin-top:24px}
.sidecard{background:var(--ink);color:var(--paper);padding:32px}
.sec-dark .sidecard{background:#232122;border:1px solid var(--line-dk)}
.sidecard h3{font-family:var(--disp);font-size:26px;text-transform:uppercase;line-height:1.05;margin-bottom:12px}
.sidecard p{color:#C9C9C6;font-size:15.5px}
.sidecard .row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-dk);font-family:var(--mono);font-size:12px;letter-spacing:.05em}
.sidecard .row:last-child{border-bottom:0}
.sidecard .row b{color:var(--acid)}

/* footer */
footer{background:var(--ink);color:var(--mute);padding:64px 0 44px;border-top:1px solid var(--line-dk);font-size:14.5px}
.foot{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot .cities{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acid);margin-top:8px}
.foot .right{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--acid)}
.credit{margin-top:36px;padding-top:24px;border-top:1px solid var(--line-dk);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:1000px){
  .nav{display:none}
  .lanes,.speakers,.impact{grid-template-columns:1fr}
  .offers,.book{grid-template-columns:1fr;gap:26px}
  .stamp{grid-template-columns:1fr 1fr}
  .phase{grid-template-columns:60px 1fr;gap:14px}
  .phase .pd{grid-column:2;text-align:left;margin-top:6px}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .hdr-in{height:64px;gap:10px}
  .hdr .btn{padding:10px 13px;font-size:10.5px}
  .brand b{font-size:17px}
  .hero{padding:60px 0 0}
  .sec{padding:64px 0}
  .grid2{grid-template-columns:1fr}
  .form,.sidecard,.offer,.flag{padding:22px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- PHOTOGRAPHY ----------
   Full colour. An acid tint over the rooms read as a filter rather than a
   treatment, and it buried the detail that sells the space. The rooms carry
   DSN green on their own screens and lighting, so colour ties back to the
   brand honestly instead of faking it. Only a light bottom scrim, and only
   where type or a border needs separating from the image. */
.ph{position:relative;overflow:hidden;background:var(--ink)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.04) contrast(1.03);transition:transform .5s ease}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,26,27,0) 68%,rgba(28,26,27,.22))}
.ph.plain::after{display:none}
/* opt-outs kept so a single image can be treated differently later */
.ph.bw img{filter:grayscale(1) contrast(1.14) brightness(1.04)}
.ph.color img,.ph.natural img{filter:none}
a:hover .ph img,.studio:hover .ph img{transform:scale(1.04)}

/* hero photo bed — stays dark because type sits on it */
.hero{isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% center;
  filter:grayscale(1) contrast(1.18) brightness(.66);transform:scale(1.05);
  animation:heroDrift 30s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.05) translate3d(0,0,0)}
  to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
.hero-tint{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(100deg,rgba(28,26,27,.96) 0%,rgba(28,26,27,.90) 40%,
  rgba(28,26,27,.66) 68%,rgba(28,26,27,.42) 100%)}
@media(prefers-reduced-motion:reduce){.hero-media img{animation:none}}