/* Real brand mono, self-hosted on the Dazzl Webflow site (same font used live) */
  @font-face{

    font-family:'Maison Neue Mono';

    src:url('/assets/c6515990eb3543e4-6941705f3483a007a3bd7b6a_FontsFree-Net-Maison-Neue-Mono.ttf') format('truetype');

    font-weight:400;
font-style:normal;
font-display:swap;

  }

  :root{

    --black:#1E1E1E;
--dark-grey:#727272;
--light-grey:#D9D9D9;
--neon:#E7F6A0;
--white:#FFFFFF;

    --radius:14px;
--maxw:1180px;
--mono:'Maison Neue Mono','Courier New',monospace;

  }

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

  html{
scroll-behavior:smooth}

  body{
font-family:'Inter',Arial,sans-serif;
background:var(--black);
color:var(--white);
-webkit-font-smoothing:antialiased;
line-height:1.6}

  img{
display:block;
max-width:100%}

  a{
color:inherit;
text-decoration:none}


  .wrap{
max-width:var(--maxw);
margin:0 auto;
padding:0 28px}

  .section{
padding:96px 0}

  .eyebrow{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:2.5px;
font-size:12px;
color:var(--neon);
display:inline-block;
margin-bottom:22px}

  .eyebrow.dark{
color:var(--black);
opacity:.7}

  .eyebrow.muted{
color:var(--dark-grey)}

  h1,h2,h3{
font-weight:700;
letter-spacing:-.02em;
line-height:1.04;
color:var(--white)!important}

  p{
font-size:18px}

  .lead{
font-size:20px;
color:var(--light-grey);
max-width:60ch}


  /* Real brand button: matches the live main-btn class (2px radius, mono uppercase) */
  .btn{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--neon);
color:var(--black);
font-family:var(--mono);
font-weight:500;
font-size:13px;
letter-spacing:-.05em;
text-transform:uppercase;
line-height:1;
padding:10px;
border-radius:2px;
transition:transform .15s ease,filter .15s ease}

  .btn:hover{
transform:translateY(-1px);
filter:brightness(.96)}

  .btn:focus-visible{
outline:3px solid var(--white);
outline-offset:3px}

  .btn.ghost{
background:transparent;
color:var(--white);
border:1px solid rgba(255,255,255,.25)}

  .btn.ghost:hover{
border-color:var(--neon);
color:var(--neon)}

  .btn .arrow{
font-family:var(--mono);
font-size:13px}

  .btn-row{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:34px}


  .ph{
background:#242424;
border:2px dashed rgba(255,255,255,.18);
border-radius:var(--radius);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:20px;
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.3px;
font-size:11px;
color:var(--dark-grey);
line-height:1.6}

  .ph.light{
background:#efefef;
border-color:#cfcfcf;
color:#8a8a8a}



  .img-slot{
position:relative;
overflow:hidden;
border-radius:var(--radius);
background:#242424}

  .img-slot.light{
background:#efefef}

  .img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover}

  .img-slot.vimg{
aspect-ratio:5/4}

  .img-slot.square{
aspect-ratio:1/1}

  .wall-grid .img-slot{
aspect-ratio:3/4;
background:#ececec}

  .excl .img-slot{
aspect-ratio:4/5}

  .proof-visual.img-slot{
border-left:1px solid rgba(255,255,255,.1);
border-radius:0;
min-height:300px}


  /* ===== manifesto hero ===== */
  .hero{
padding:120px 0 0}

  .hero .eyebrow{
margin-bottom:30px}

  .hero h1{
font-weight:900;
font-size:clamp(3rem,9vw,8rem);
line-height:.92;
letter-spacing:-.04em;
text-transform:uppercase}

  .hero h1 .strike{
color:var(--dark-grey);
position:relative;
display:inline-block}

  .hero h1 .strike::after{
content:"";
position:absolute;
left:-2%;
right:-2%;
top:52%;
height:6px;
background:var(--neon);
transform:rotate(-2deg)}

  .hero h1 .yours{
color:var(--neon)}

  .hero .lead{
margin-top:34px}

  .hero .btn-row{
margin-top:38px}


  /* ===== vs split ===== */
  .vs{
padding:96px 0}

  .vs-head{
max-width:60ch;
margin-bottom:48px}

  .vs-head h2{
font-size:clamp(1.9rem,4vw,3.1rem);
margin-bottom:16px}

  .vs-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px}

  .vs-card{
border-radius:var(--radius);
overflow:hidden;
border:1px solid rgba(255,255,255,.12)}

  .vs-card .vimg{
aspect-ratio:5/4}

  .vs-card .square{
aspect-ratio:1/1}

  .vs-card .vbody{
padding:28px 26px}

  .vs-card .vk{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:2px;
font-size:12px;
margin-bottom:16px}

  .vs-card.gen .vk{
color:var(--dark-grey)}

  .vs-card.dz .vk{
color:var(--neon)}

  .vs-card h3{
font-size:1.4rem;
margin-bottom:18px}

  .vs-card ul{
list-style:none;
display:grid;
gap:12px}

  .vs-card li{
position:relative;
padding-left:26px;
font-size:15.5px;
color:var(--light-grey);
line-height:1.5}

  .vs-card.gen li::before{
content:"\00D7";
position:absolute;
left:0;
top:-1px;
color:var(--dark-grey);
font-size:18px}

  .vs-card.dz li::before{
content:"";
position:absolute;
left:0;
top:8px;
width:13px;
height:13px;
border-radius:4px;
background:var(--neon)}

  .vs-card.dz{
border-color:rgba(231,246,160,.4)}


  /* ===== consistency wall (centerpiece) ===== */
  .wall{
background:var(--white);
color:var(--black)}

  .wall .whead{
display:flex;
justify-content:space-between;
align-items:flex-end;
flex-wrap:wrap;
gap:20px;
margin-bottom:42px}

  .wall .whead h2{
font-size:clamp(2rem,4.4vw,3.4rem);
max-width:16ch;
color:var(--black)!important}

  .wall .whead p{
font-size:16px;
color:#555;
max-width:34ch}

  .wall-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px}

  .wall-grid .ph{
aspect-ratio:3/4;
background:#ececec;
border-color:#d2d2d2;
color:#9a9a9a;
font-size:9.5px;
letter-spacing:1px;
padding:10px}

  .wall-foot{
display:flex;
align-items:center;
gap:14px;
margin-top:30px;
flex-wrap:wrap}

  .wall-chip{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px;
color:#3f6d00;
background:#f1f7da;
border:1px solid #e2eeb6;
border-radius:999px;
padding:8px 14px}


  /* ===== exclusive model (dark feature) ===== */
  .excl{
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
align-items:center}

  .excl h2{
font-size:clamp(1.9rem,4vw,3rem);
max-width:14ch;
margin-bottom:20px}

  .excl p{
font-size:18px;
color:var(--light-grey);
max-width:52ch;
margin-bottom:16px}

  .excl .ph{
aspect-ratio:4/5;
font-size:11px}

  .excl-points{
list-style:none;
display:grid;
gap:14px;
margin-top:26px}

  .excl-points li{
position:relative;
padding-left:28px;
font-size:16px;
color:var(--white)}

  .excl-points li::before{
content:"";
position:absolute;
left:0;
top:8px;
width:13px;
height:13px;
border-radius:4px;
background:var(--neon)}

  .excl-points li span{
color:var(--dark-grey);
display:block;
font-size:14px;
margin-top:2px}


  /* ===== style-guide dimensions ===== */
  .dims{
background:var(--white);
color:var(--black)}

  .dims h2{
font-size:clamp(1.9rem,4vw,3rem);
max-width:18ch;
margin-bottom:14px;
color:var(--black)!important}

  .dims .lead{
color:#555;
margin-bottom:46px}

  .dims-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:14px}

  .dim{
border:1px solid var(--light-grey);
border-radius:var(--radius);
padding:24px 20px;
background:#fafafa}

  .dim .dk{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px;
color:var(--dark-grey);
margin-bottom:14px}

  .dim h3{
font-size:17px;
margin-bottom:8px;
color:var(--black)!important}

  .dim p{
font-size:14px;
color:#555;
line-height:1.5}


  /* ===== fidelity band ===== */
  .band{
background:var(--neon);
color:var(--black);
padding:90px 0}

  .band h2{
font-size:clamp(1.8rem,3.8vw,2.8rem);
max-width:20ch;
letter-spacing:-.02em;
line-height:1.14;
color:var(--black)!important}

  .band p{
font-size:18px;
color:rgba(30,30,30,.78);
max-width:60ch;
margin-top:20px}

  .band-chips{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:30px}

  .band-chip{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px;
color:var(--black);
border:1px solid rgba(30,30,30,.35);
border-radius:999px;
padding:9px 15px}


  /* ===== proof ===== */
  .proof-card{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:0;
border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius);
overflow:hidden}

  .proof-copy{
padding:48px 44px}

  .proof-copy .eyebrow{
margin-bottom:18px}

  .proof-copy blockquote{
font-size:clamp(1.4rem,2.6vw,2rem);
font-weight:700;
letter-spacing:-.02em;
line-height:1.2;
margin-bottom:22px;
color:var(--white)!important}

  .proof-copy .byline{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:2px;
font-size:12px;
color:var(--dark-grey)}

  .proof-copy .byline strong{
color:var(--white);
font-weight:500}

  .proof-visual{
border-left:1px solid rgba(255,255,255,.1)}


  /* responsive */
  @media(max-width:980px){

    .wall-grid,.dims-grid{
grid-template-columns:repeat(3,1fr)}

  }

  @media(max-width:900px){

    .vs-grid{
grid-template-columns:1fr}

    .excl{
grid-template-columns:1fr;
gap:32px}

    .proof-card{
grid-template-columns:1fr}

    .proof-visual{
border-left:none;
border-top:1px solid rgba(255,255,255,.1);
min-height:300px}

  }

  @media(max-width:720px){

    .section{
padding:64px 0}

    .hero{
padding-top:88px}

    .wall-grid{
grid-template-columns:repeat(2,1fr)}

    .dims-grid{
grid-template-columns:1fr 1fr}

  }

  @media(prefers-reduced-motion:reduce){
*{
transition:none!important;
scroll-behavior:auto!important}
}