:root{
  --page-max: 1540px;
  --gutter: 32px;
  --bg: #F2EDE6;
  --fg: #0F0F0F;
  --orange: #FF3D12;
  --cream: #E9E2D6;
  --cream-2: #E9E2D6;
  --paper: #FFFBF5;
  --white: #FFFBF5;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--fg); font-family:'Space Grotesk', sans-serif; line-height:1.45; overflow-x:hidden; font-size:15px}
::selection{background:var(--orange); color:white}
body::before{content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:9999; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");}
h1,h2,h3{font-family:'Syne', sans-serif; text-transform:uppercase; line-height:.9; letter-spacing:-0.03em}
h1{ font-size: clamp(3rem, 6vw, 5.2rem) !important; }
.mono{font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700}
a{color:inherit; text-decoration:none}
.btn{display:inline-flex; align-items:center; gap:.75rem; border:1.5px solid var(--fg); padding:1rem 1.8rem; font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; transition:.25s ease; cursor:pointer}
.btn-black{background:var(--fg); color:var(--bg)}
.btn-black:hover{background:var(--orange); border-color:var(--orange); color:white; transform:translateY(-2px)}
.btn-ghost:hover{background:var(--fg); color:var(--bg); transform:translateY(-2px)}

nav, .hero, .sec-02, .cards, .sec-03-head, .lookover, .doover, .how-head, .steps, .philo, .work-head, .work-grid, .final, footer,
.hero-eyebrow, .hero-grid, .section-label, .what, .packages, .refresh, .included, .seo, .domain, .copy-sec, .process, .boundary, .faq{
  max-width: var(--page-max);
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

nav{position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:1.1rem var(--gutter); background:rgba(242,237,230,.92); backdrop-filter:blur(12px); border-bottom:1.5px solid var(--fg);}
.logo{font-family:'Syne', sans-serif; font-weight:800; font-size:1.7rem; letter-spacing:-0.05em; line-height:1; text-transform:lowercase;}
.logo .dot{display:inline-block; width:.38em; height:.38em; background:var(--orange); border-radius:50%; margin-left:.05em;}
.nav-links{display:flex; gap:2rem; align-items:center}
.nav-links a{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; position:relative}
.nav-links a::after{content:""; position:absolute; bottom:-4px; left:0; width:0; height:1.5px; background:var(--fg); transition:.3s}
.nav-links a:hover::after{width:100%}
.hamburger{display:none; font-size:1.5rem; cursor:pointer}

.hero{padding:5vw var(--gutter) 4vw; border-bottom:1.5px solid var(--fg); position:relative; overflow:hidden; isolation:isolate}
.hero-top{display:flex; justify-content:space-between; align-items:flex-start; gap:6vw; position:relative; z-index:1}
.hero-left{flex:1.15}
.hero h1{max-width:13ch; margin-bottom:2rem}
.hero h1 .accent{color:var(--orange); font-family:'Instrument Serif', serif; font-style:italic; text-transform:lowercase; font-size:.95em; letter-spacing:-0.02em}
.hero-copy{max-width:48ch; font-size:1rem; line-height:1.6}
.hero-copy p{margin-bottom:1.2rem}
.hero-actions{margin-top:2.5rem; display:flex; gap:1rem; flex-wrap:wrap}
.hero-right{flex:.85; display:flex; flex-direction:column; gap:1rem; padding-top:1rem}
.hero-note{border:1.5px solid var(--fg); padding:1.2rem; background:var(--white); font-size:.85rem; transform:rotate(.6deg)}
.big-bg-text{
  position:absolute; 
  top:52%; left:50%;
  transform:translate(-50%,-50%);
  font-family:'Syne', sans-serif; 
  font-size:clamp(12rem, 28vw, 30rem);
  line-height:.8; 
  font-weight:800; 
  color:var(--fg); 
  opacity:.035; 
  pointer-events:none; 
  text-transform:lowercase;
  z-index:0;
  white-space:nowrap;
  letter-spacing:-0.06em;
}

.marquee{border-bottom:1.5px solid var(--fg); overflow:hidden; white-space:nowrap; padding:.9rem 0; background:var(--fg); color:var(--bg); width:100%; max-width:100vw}
.marquee-inner{display:flex; animation:marq 28s linear infinite; gap:3rem; width:max-content}
.marquee span{font-family:'Syne', sans-serif; font-weight:800; font-size:1.1rem; letter-spacing:.08em; text-transform:uppercase}
.marquee span i{color:var(--orange); font-style:normal; margin:0 .5rem}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.sec-02{display:grid; grid-template-columns:1.1fr .9fr; border-bottom:1.5px solid var(--fg)}
.sec-02-left{padding:4vw var(--gutter); border-right:1.5px solid var(--fg)}
.sec-02-left h2{font-size:clamp(2.2rem, 4.5vw, 4rem); max-width:10ch}
.sec-02-right{padding:4vw var(--gutter); display:flex; flex-direction:column; justify-content:center; gap:1.5rem; font-size:1.05rem; line-height:1.6}

.cards{display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch; border-bottom:1.5px solid var(--fg)}
.card{padding:2.2rem 1.8rem; border-right:1.5px solid var(--fg); display:flex; flex-direction:column; min-height:620px; transition:.3s}
.card:last-child{border-right:none}
.card:hover{background:var(--white)}
.card-num{font-family:'Instrument Serif', serif; font-size:1.2rem; margin-bottom:1.8rem; display:flex; justify-content:space-between}
.card h3{font-size:clamp(1.6rem, 2.2vw, 2.2rem); margin-bottom:1rem; min-height:3.2em}
.card p{font-size:.88rem; line-height:1.6; margin-bottom:1rem; opacity:.85}
.card ul{list-style:none; margin:1.2rem 0; display:flex; flex-direction:column; gap:.35rem}
.card ul li{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; display:flex; gap:.6rem}
.card ul li::before{content:"→"; color:var(--orange)}
.card-foot{margin-top:auto; padding-top:2.5rem}
.price{font-family:'Syne', sans-serif; font-weight:800; font-size:1rem; margin-bottom:1.2rem}

.sec-03{border-bottom:1.5px solid var(--fg)}
.sec-03-head{padding:2.5vw var(--gutter); display:flex; justify-content:space-between; align-items:end; border-bottom:1.5px solid var(--fg)}
.sec-03-head h2{font-size:clamp(1.8rem, 3.5vw, 3rem)}

.lookover{background:var(--fg); color:var(--bg); display:grid; grid-template-columns:1.1fr .9fr; border-bottom:1.5px solid var(--fg)}
.look-left{padding:4vw var(--gutter); border-right:1.5px solid rgba(255,255,255,.15)}
.look-left .mono{color:var(--orange); margin-bottom:1.5rem; display:block}
.look-left h2{font-size:clamp(2.4rem, 4.5vw, 4.5rem); color:var(--bg); line-height:.9}
.look-right{padding:3.5vw var(--gutter)}
.look-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0}
.look-item{border:1.5px solid rgba(255,255,255,.15); padding:1rem}

.doover{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg); background:var(--cream-2)}
.doover-left{padding:4vw var(--gutter)}
.doover-left h2{font-size:clamp(2.2rem, 4vw, 3.8rem)}
.doover-right{padding:4vw var(--gutter); border-left:1.5px solid var(--fg)}
.big-price{display:flex; flex-direction:column; gap:.3rem; margin:2rem 0; font-family:'Syne', sans-serif; font-weight:800; font-size:1.6rem}

.how{border-bottom:1.5px solid var(--fg)}
.how-head{padding:2.5vw var(--gutter); border-bottom:1.5px solid var(--fg); display:flex; justify-content:space-between; align-items:center}
.steps{display:grid; grid-template-columns:repeat(5,1fr)}
.step{padding:2rem 1.5rem; border-right:1.5px solid var(--fg)}
.step:last-child{border-right:none}
.step-num{font-family:'Syne', sans-serif; font-weight:800; margin-bottom:1rem}

.philo{padding:6vw var(--gutter); text-align:center; border-bottom:1.5px solid var(--fg)}
.philo p{font-family:'Syne', sans-serif; font-size:clamp(1.6rem, 3vw, 2.8rem); line-height:1.05; max-width:22ch; margin:0 auto}

.work-head{padding:2.5vw var(--gutter); display:flex; justify-content:space-between; align-items:end; border-bottom:1.5px solid var(--fg)}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1.5px solid var(--fg)}
.work-card{border-right:1.5px solid var(--fg); display:flex; flex-direction:column}
.work-card:last-child{border-right:none}
.work-img{aspect-ratio:4/3; background:#111; position:relative; overflow:hidden; border-bottom:1.5px solid var(--fg)}
.work-info{padding:1.5rem var(--gutter)}

.final{padding:5vw var(--gutter); display:grid; grid-template-columns:1.1fr .9fr; gap:4vw; border-bottom:1.5px solid var(--fg)}
.final h2{font-size:clamp(2.5rem, 5vw, 5rem); line-height:.9}

footer{padding:3vw var(--gutter); display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3vw; background:var(--white)}
footer a{display:block; margin:.3rem 0; font-size:.9rem}
.foot-logo{font-family:'Syne', sans-serif; font-weight:800; font-size:2rem; text-transform:lowercase}
.foot-bottom{grid-column:1 / -1; border-top:1.5px solid var(--fg); margin-top:2vw; padding-top:1.5vw; display:flex; justify-content:space-between; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; flex-wrap:wrap; gap:1rem}

/* WEB.HTML + DOC + VIDEO + LOOKOVER */
.hero-eyebrow{display:flex; justify-content:space-between; gap:2rem; margin-bottom:1.5rem; opacity:.6; flex-wrap:wrap}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:4vw; margin-top:2rem}
.hero-sub p{margin-bottom:.8rem; font-size:1rem; line-height:1.6}
.hero-price{font-family:'Syne', sans-serif; font-weight:800; font-size:1.6rem; margin:2rem 0}
.hero-price span{display:block; font-family:'Instrument Serif', serif; font-size:1rem; font-weight:400; opacity:.6; letter-spacing:.1em; text-transform:uppercase}

.section-label{padding:1.2rem var(--gutter); border-top:1.5px solid var(--fg); border-bottom:1.5px solid var(--fg); background:var(--white); display:flex; justify-content:space-between; align-items:center}
.section-label h2{font-size:1.1rem; letter-spacing:.08em}
.what{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg)}
.what-left{padding:4vw var(--gutter); border-right:1.5px solid var(--fg)}
.what-left h3{font-size:clamp(2rem,3.5vw,3rem); max-width:12ch}
.what-right{padding:4vw var(--gutter); display:flex; flex-direction:column; gap:1rem; line-height:1.6}
.what-right ul{list-style:none; margin:1rem 0}
.what-right li{padding:.3rem 0; border-bottom:1px solid rgba(0,0,0,.08); font-size:.9rem}
.what-right li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.packages{border-bottom:1.5px solid var(--fg)}
.package-row{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg); background:var(--bg)}
.package-row:last-child{border-bottom:none}
.pkg-big{padding:3vw var(--gutter); border-right:1.5px solid var(--fg); background:var(--paper); display:flex; flex-direction:column; justify-content:space-between}
.pkg-big h3{font-size:clamp(2.5rem,5vw,4.5rem); line-height:.85}
.pkg-big h3 span{display:block; font-family:'Space Grotesk', sans-serif; font-size:.9rem; font-weight:700; letter-spacing:.12em; margin-top:.6rem; opacity:.6}
.from{margin-top:2rem; font-family:'Syne', sans-serif; font-weight:800; font-size:1rem}
.from b{display:block; font-family:'Space Grotesk', sans-serif; font-size:.8rem; font-weight:400; letter-spacing:.05em; margin-top:.3rem; opacity:.7; text-transform:none}
.pkg-details{padding:3vw var(--gutter); background:var(--bg)}
.pkg-details h4{font-size:1.2rem; margin-bottom:1rem; max-width:28ch; line-height:1.3}
.pkg-details p{margin-bottom:.8rem; line-height:1.6; font-size:.95rem}
.ideal{border:1.5px solid var(--fg); padding:1rem; margin:1.5rem 0; background:var(--white)}
.ideal b{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase}
.ideal p{font-size:.85rem; margin-top:.3rem; line-height:1.4}
.pkg-list{list-style:none; columns:2; column-gap:2rem; margin:1rem 0}
.pkg-list li{font-size:.8rem; padding:.25rem 0; display:flex; gap:.4rem}
.pkg-list li::before{content:"→"; color:var(--orange)}
.pkg-cta{margin-top:2rem}

.refresh{display:grid; grid-template-columns:1fr 1fr; border-bottom:1.5px solid var(--fg); background:var(--cream)}
.refresh-left{padding:4vw var(--gutter); border-right:1.5px solid var(--fg)}
.refresh-left h2{font-size:clamp(2rem,4vw,3.5rem); margin-top:1rem}
.refresh-price{font-family:'Instrument Serif', serif; font-size:5rem; color:var(--orange); margin:1.5rem 0; line-height:.9}
.refresh-right{padding:4vw var(--gutter); background:var(--fg); color:var(--bg)}
.refresh-list{list-style:none; margin:1rem 0}
.refresh-list li{padding:.4rem 0; font-size:.85rem; border-bottom:1px solid rgba(255,255,255,.1)}
.refresh-list li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.included{border-bottom:1.5px solid var(--fg); background:var(--white)}
.included-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.inc-col{padding:2rem 1.5rem; border-right:1.5px solid var(--fg)}
.inc-col:last-child{border-right:none}
.inc-col h4{font-size:.8rem; letter-spacing:.12em; margin-bottom:1rem; color:var(--orange)}
.inc-col ul{list-style:none}
.inc-col li{font-size:.8rem; padding:.3rem 0; line-height:1.4}
.inc-note{grid-column:1 / -1; padding:1.5rem var(--gutter); border-top:1.5px solid var(--fg); font-size:.85rem; font-style:italic; opacity:.7; background:var(--bg)}

.seo{display:grid; grid-template-columns:1fr 1fr; border-bottom:1.5px solid var(--fg)}
.seo-left{padding:4vw var(--gutter); border-right:1.5px solid var(--fg)}
.seo-right{padding:4vw var(--gutter); background:var(--paper)}
.seo-right ul{list-style:none; margin-top:1rem}
.seo-right li{padding:.4rem 0; font-size:.9rem; border-bottom:1px solid rgba(0,0,0,.08)}
.seo-right li::before{content:"✕"; color:var(--orange); margin-right:.5rem; font-weight:700}

.domain{display:grid; grid-template-columns:1fr 1fr; border-bottom:1.5px solid var(--fg); background:var(--bg)}
.domain > div{padding:4vw var(--gutter)}
.domain > div:first-child{border-right:1.5px solid var(--fg)}
.highlight{border:1.5px solid var(--fg); padding:1rem; margin-top:1.5rem; background:var(--orange); color:white; font-weight:700; font-size:.9rem; transform:rotate(-.5deg)}

.copy-sec{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg)}
.copy-sec > div{padding:4vw var(--gutter)}
.copy-sec > div:first-child{border-right:1.5px solid var(--fg)}
.copy-sec ul{list-style:none; margin:1rem 0}
.copy-sec li{padding:.35rem 0; font-size:.9rem}
.copy-sec li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.process{border-bottom:1.5px solid var(--fg)}
.process-steps{display:grid; grid-template-columns:repeat(5,1fr)}
.pstep{padding:2.5vw 1.5rem; border-right:1.5px solid var(--fg); border-bottom:1.5px solid var(--fg)}
.pstep:last-child{border-right:none}
.pstep-num{font-family:'Instrument Serif', serif; font-size:2.5rem; color:var(--orange); line-height:1; margin-bottom:1rem}
.pstep h4{font-size:1rem; margin-bottom:.5rem}
.pstep p{font-size:.85rem; line-height:1.5; opacity:.85}

.boundary{display:grid; grid-template-columns:1fr 1fr; border-bottom:1.5px solid var(--fg)}
.bound-col{padding:4vw var(--gutter)}
.bound-col:first-child{border-right:1.5px solid var(--fg)}
.bound-col ul{list-style:none; margin-top:1rem}
.bound-col li{padding:.35rem 0; font-size:.9rem}
.bound-col li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.faq{padding:4vw var(--gutter); border-bottom:1.5px solid var(--fg); background:var(--cream)}
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:2rem 4vw; margin-top:2rem}
.faq-item{padding-bottom:1.5rem; border-bottom:1px solid rgba(0,0,0,.12)}
.faq-item b{display:block; font-family:'Syne', sans-serif; text-transform:uppercase; margin-bottom:.4rem; font-size:.95rem}
.faq-item p{font-size:.9rem; opacity:.8; line-height:1.5}

@media(max-width:980px){
  .nav-links{display:none}
  .hamburger{display:block}
  .hero-top, .sec-02, .lookover, .doover, .final, footer, .what, .package-row, .refresh, .seo, .domain, .copy-sec, .boundary{grid-template-columns:1fr}
  .cards, .steps, .work-grid, .included-grid, .process-steps, .faq-grid{grid-template-columns:1fr}
  .card, .step, .work-card, .inc-col{border-right:none; border-bottom:1.5px solid var(--fg); min-height:auto}
  .big-bg-text{display:none}
  .hero-grid{grid-template-columns:1fr}
  .pkg-big{border-right:none; border-bottom:1.5px solid var(--fg)}
  .pkg-list{columns:1}
  .section-label{flex-direction:column; align-items:flex-start; gap:.5rem}
}


/* ===== DOCUMENT.HTML STYLES ===== */
.big-watermark{position:absolute; top:52%; left:50%; transform:translate(-50%,-50%); font-family:'Syne', sans-serif; font-size:clamp(12rem, 28vw, 30rem); line-height:.8; font-weight:800; color:var(--fg); opacity:.035; pointer-events:none; text-transform:lowercase; z-index:0; white-space:nowrap; letter-spacing:-0.06em;}
.two-head{padding:2vw var(--gutter); display:flex; justify-content:space-between; align-items:end; border-top:1.5px solid var(--fg); border-bottom:1.5px solid var(--fg); background:var(--white); max-width: var(--page-max); margin:0 auto; width:100%}
.two-ways{border-bottom:1.5px solid var(--fg); max-width: var(--page-max); margin:0 auto; width:100%}
.split{display:grid; grid-template-columns:1fr 1fr; min-height:60vh}
.split-left, .split-right{padding:4vw var(--gutter); display:flex; flex-direction:column; gap:1rem}
.split-left{border-right:1.5px solid var(--fg); background:var(--paper)}
.split-right{background:var(--bg)}
.split-label{font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; opacity:.6; margin-bottom:.5rem; display:block}
.split h3{font-size:clamp(2rem,3.5vw,3.2rem); line-height:.9; margin-bottom:1rem}
.split h3 i{font-family:'Instrument Serif', serif; color:var(--orange); text-transform:none}
.split p{line-height:1.6; font-size:.95rem; margin-bottom:.6rem}
.pricing{margin:1.5rem 0; border-top:1.5px solid var(--fg); border-bottom:1.5px solid var(--fg)}
.price-row{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid rgba(0,0,0,.08); font-size:.85rem}
.price-row:last-child{border-bottom:none}
.price-row b{font-family:'Syne', sans-serif; white-space:nowrap}

.what-make{padding:4vw var(--gutter); border-bottom:1.5px solid var(--fg); background:var(--white); max-width: var(--page-max); margin:0 auto; width:100%}
.what-make h2{font-size:clamp(2rem,4vw,3.5rem); margin-top:1rem; max-width:18ch}
.doc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--fg); border:1.5px solid var(--fg); margin-top:2rem}
.doc-card{background:var(--bg); padding:2rem 1.5rem; min-height:280px}
.doc-card h4{font-size:1rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.8rem}
.doc-card p{font-size:.9rem; line-height:1.5; opacity:.85}

.real-problem{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg); max-width: var(--page-max); margin:0 auto; width:100%}
.real-left{padding:4vw var(--gutter); border-right:1.5px solid var(--fg)}
.real-right{padding:4vw var(--gutter); display:flex; flex-direction:column; gap:1rem}
.real-right ul{list-style:none; margin:1rem 0}
.real-right li{padding:.35rem 0; font-size:.9rem}
.real-right li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.giant-statement{padding:8vw var(--gutter); text-align:center; border-bottom:1.5px solid var(--fg); background:var(--fg); color:var(--bg); max-width: var(--page-max); margin:0 auto; width:100%}
.giant-statement p{font-family:'Syne', sans-serif; font-size:clamp(2rem,5vw,4.5rem); line-height:.9; max-width:16ch; margin:0 auto}
.giant-statement i{color:var(--orange); font-family:'Instrument Serif', serif; text-transform:none}

.what-we-do{display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1.5px solid var(--fg); max-width: var(--page-max); margin:0 auto; width:100%}
.wwd-col{padding:2.5vw 1.5rem; border-right:1.5px solid var(--fg)}
.wwd-col:last-child{border-right:none}
.wwd-col h4{font-size:.8rem; letter-spacing:.12em; margin-bottom:1rem; color:var(--orange)}
.wwd-col ul{list-style:none}
.wwd-col li{font-size:.8rem; padding:.25rem 0; line-height:1.4}

.mess{display:grid; grid-template-columns:1fr 1fr; border-bottom:1.5px solid var(--fg); max-width: var(--page-max); margin:0 auto; width:100%}
.mess-left, .mess-right{padding:4vw var(--gutter)}
.mess-left{border-right:1.5px solid var(--fg); background:var(--paper)}
.mess-right{background:var(--cream)}
.mess h3{font-size:clamp(1.6rem,2.8vw,2.4rem); margin-bottom:1rem}
.mess ul{list-style:none; margin:1rem 0}
.mess li{padding:.3rem 0; font-size:.9rem}
.mess li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.tidy{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg); max-width: var(--page-max); margin:0 auto; width:100%; background:var(--white)}
.tidy-left{padding:4vw var(--gutter); border-right:1.5px solid var(--fg)}
.tidy-price{font-family:'Instrument Serif', serif; font-size:5rem; color:var(--orange); margin:1rem 0; line-height:.9}
.tidy-right{padding:4vw var(--gutter); background:var(--fg); color:var(--bg)}
.tidy-grid{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0}
.tidy-tag{border:1px solid rgba(255,255,255,.2); padding:.4rem .8rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase}

.receive{display:grid; grid-template-columns:1fr 1fr; border-bottom:1.5px solid var(--fg); max-width: var(--page-max); margin:0 auto; width:100%}
.rec-col{padding:4vw var(--gutter)}
.rec-col:first-child{border-right:1.5px solid var(--fg)}
.rec-col ul{list-style:none; margin:1rem 0}
.rec-col li{padding:.35rem 0; font-size:.9rem}
.rec-col li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.work{border-bottom:1.5px solid var(--fg); max-width: var(--page-max); margin:0 auto; width:100%}
.work-spread{aspect-ratio:16/11; background:#111; border-bottom:1.5px solid var(--fg)}
.work-meta{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem}
.work-meta span{border:1px solid var(--fg); padding:.25rem .6rem; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase}

.hero-cta{display:flex; gap:1rem; align-items:center; margin-top:2rem; flex-wrap:wrap}
.btn-orange{background:var(--orange); border-color:var(--orange); color:white}
.btn-orange:hover{background:var(--fg); border-color:var(--fg)}

@media(max-width:980px){
  .split, .mess, .tidy, .receive, .real-problem, .what-we-do, .doc-grid{grid-template-columns:1fr}
  .split-left{border-right:none; border-bottom:1.5px solid var(--fg)}
  .wwd-col{border-right:none; border-bottom:1.5px solid var(--fg)}
  .mess-left{border-right:none; border-bottom:1.5px solid var(--fg)}
  .rec-col:first-child{border-right:none; border-bottom:1.5px solid var(--fg)}
  .real-left{border-right:none; border-bottom:1.5px solid var(--fg)}
  .tidy-left{border-right:none; border-bottom:1.5px solid var(--fg)}
}


/* ===== VIDEO.HTML STYLES ===== */
.crop-marks{position:absolute; top:1rem; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; font-size:.65rem; letter-spacing:.15em; opacity:.4; text-transform:uppercase; font-family:monospace; z-index:2}
.reel{background:var(--fg); color:var(--bg); border-bottom:1.5px solid var(--fg); overflow:hidden; padding:.6rem 0; max-width:100vw; width:100%}
.reel-track{display:flex; gap:2rem; animation:reel 30s linear infinite; width:max-content}
.reel-item{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid rgba(255,255,255,.15); padding:.4rem .8rem; white-space:nowrap; position:relative}
.reel-item::after{content:attr(data-time); margin-left:.8rem; opacity:.5; font-size:.65rem}
@keyframes reel{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.pricing{border-bottom:1.5px solid var(--fg); background:var(--bg); max-width:var(--page-max); margin:0 auto; width:100%}
.pricing-head{padding:2.5vw var(--gutter); display:flex; justify-content:space-between; align-items:end; border-bottom:1.5px solid var(--fg)}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--fg); border-bottom:1.5px solid var(--fg)}
.price-card{background:var(--paper); padding:2.5vw 1.8rem; display:flex; flex-direction:column; gap:.8rem; min-height:360px}
.price-card h4{font-size:1.2rem; text-transform:uppercase}
.price-card .from{font-family:'Syne', sans-serif; font-weight:800; font-size:1.1rem; margin:.5rem 0}
.price-card p{font-size:.85rem; line-height:1.5; opacity:.85}

.timeline{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.timeline > div{padding:4vw var(--gutter)}
.timeline > div:first-child{border-right:1.5px solid var(--fg)}
.timeline ul{list-style:none; margin:1rem 0}
.timeline li{padding:.35rem 0; font-size:.9rem}
.timeline li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.triple{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.tri-col{padding:3vw 1.8rem; border-right:1.5px solid var(--fg)}
.tri-col:last-child{border-right:none}
.tri-col.highlight{background:var(--orange); color:white}
.tri-col h4{font-size:1rem; margin-bottom:.8rem; text-transform:uppercase}
.tri-col ul{list-style:none; margin:1rem 0}
.tri-col li{padding:.3rem 0; font-size:.85rem; line-height:1.4}
.tri-col li::before{content:"→"; color:var(--orange); margin-right:.5rem}
.tri-col.highlight li::before{color:white}

.webvideo{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg); background:var(--cream); max-width:var(--page-max); margin:0 auto; width:100%}
.webvideo > div{padding:4vw var(--gutter)}
.webvideo > div:first-child{border-right:1.5px solid var(--fg)}
.webvideo ul{list-style:none; margin:1rem 0}
.webvideo li{padding:.35rem 0; font-size:.9rem}
.webvideo li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.source{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg); background:var(--paper); max-width:var(--page-max); margin:0 auto; width:100%}
.source > div{padding:4vw var(--gutter)}
.source > div:first-child{border-right:1.5px solid var(--fg)}
.file-list{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0}
.file-tag{border:1.5px solid var(--fg); padding:.4rem .8rem; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; background:var(--white)}
.file-tag.final{background:var(--fg); color:var(--bg); transform:rotate(.5deg)}

.bound{display:grid; grid-template-columns:1fr 1fr; border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.b-col{padding:4vw var(--gutter)}
.b-col:first-child{border-right:1.5px solid var(--fg)}
.b-col ul{list-style:none; margin:1rem 0}
.b-col li{padding:.35rem 0; font-size:.9rem}
.b-col li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.work-embed{aspect-ratio:16/9; background:#111; border-bottom:1.5px solid var(--fg); display:grid; place-items:center; color:#555; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase}

.concept-line{border:1.5px solid var(--fg); padding:1rem; margin-top:1.5rem; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; background:var(--white)}
.split-num{font-family:'Instrument Serif', serif; font-size:3rem; color:var(--fg); opacity:.3; line-height:1; margin-bottom:1rem}

@media(max-width:980px){
  .pricing-grid, .timeline, .triple, .webvideo, .source, .bound{grid-template-columns:1fr}
  .tri-col, .timeline > div:first-child, .webvideo > div:first-child, .source > div:first-child, .b-col:first-child{border-right:none; border-bottom:1.5px solid var(--fg)}
  .price-card{border-bottom:1.5px solid var(--fg)}
}


/* ===== LOOKOVER.HTML STYLES ===== */
.looking{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.looking > div{padding:4vw var(--gutter)}
.looking > div:first-child{border-right:1.5px solid var(--fg)}
.looking ul{list-style:none; margin:1rem 0; columns:2; column-gap:2rem}
.looking li{padding:.3rem 0; font-size:.85rem}
.looking li::before{content:"→"; color:var(--orange); margin-right:.5rem}

.output-intro{padding:2.5vw var(--gutter); display:flex; justify-content:space-between; align-items:end; border-bottom:1.5px solid var(--fg); background:var(--white); max-width:var(--page-max); margin:0 auto; width:100%}
.output-block{border-bottom:1.5px solid var(--fg); padding:5vw var(--gutter); display:grid; grid-template-columns:.45fr .55fr; gap:4vw; min-height:36vh; align-items:center; max-width:var(--page-max); margin:0 auto; width:100%}
.output-block h3{font-size:clamp(4rem,10vw,11rem); line-height:.85; letter-spacing:-.07em}
.output-block .desc h4{font-size:1.5rem; margin-bottom:.6rem}
.output-block .desc p{font-size:1rem; line-height:1.5; opacity:.85}
.output-block.keep{background:var(--white); color:var(--fg)}
.output-block.fix{background:var(--orange); color:white}
.output-block.inconsistent{background:var(--fg); color:var(--bg)}
.output-block.missing{background:#2A0C07; color:var(--paper)}
.output-block.fixfirst{background:#5A2E1A; color:var(--paper); border-bottom-color:var(--fg)}

.why{background:var(--fg); color:var(--bg); padding:6vw var(--gutter); display:grid; grid-template-columns:1fr 1fr; gap:4vw; border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.why h2{font-size:clamp(2.5rem,5.5vw,5.5rem); line-height:.9; color:var(--bg)}
.why h2 i{font-family:'Instrument Serif', serif; color:var(--orange); text-transform:none; display:block; font-size:.95em; margin-top:.5rem}
.why p{line-height:1.6; margin-bottom:1rem; opacity:.85}

.next{display:grid; grid-template-columns:1fr 1fr; border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.next-left{padding:4vw var(--gutter); background:var(--cream); border-right:1.5px solid var(--fg)}
.next-right{padding:4vw var(--gutter); background:var(--fg); color:var(--bg)}
.next-right h3{color:var(--paper)}
.next ul{list-style:none; margin-top:1rem}
.next li{padding:.4rem 0; font-size:.9rem}

.doover{background:var(--orange); color:white; padding:5vw var(--gutter); display:grid; grid-template-columns:.9fr 1.1fr; gap:4vw; border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.doover h2{font-size:clamp(2.5rem,5vw,4.5rem); color:white}
.doover-price{font-family:'Instrument Serif', serif; font-size:6rem; line-height:.9; margin:1.5rem 0}
.doover ul{list-style:none; columns:2; margin-top:1rem}
.doover li{padding:.4rem 0; font-size:.85rem}

.examples{padding:4vw var(--gutter); background:var(--paper); border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.examples-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:3vw}
.ex-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--fg); border:1.5px solid var(--fg)}
.ex-card{background:var(--white); padding:2vw}
.ex-card h4{font-size:.9rem; letter-spacing:.1em; margin-bottom:1rem; color:var(--orange)}
.ex-card .line{padding:.6rem 0; border-bottom:1px solid rgba(0,0,0,.08); font-size:.85rem; display:flex; justify-content:space-between}
.ex-card .line b{font-family:'Syne', sans-serif; text-transform:uppercase; font-size:.75rem}
.ex-card .rec{margin-top:1.5rem; background:var(--cream); border:1.5px solid var(--fg); padding:1rem; font-size:.85rem; line-height:1.5}

.whyprice{background:var(--fg); color:var(--bg); padding:5vw var(--gutter); display:grid; grid-template-columns:1fr 1fr; gap:4vw; border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.whyprice h2{font-size:clamp(2.5rem,5vw,4.5rem); color:var(--bg)}

.how{border-bottom:1.5px solid var(--fg); max-width:var(--page-max); margin:0 auto; width:100%}
.how-head{padding:2.5vw var(--gutter); border-bottom:1.5px solid var(--fg); display:flex; justify-content:space-between; align-items:center}
.good-fit{list-style:none; margin:1rem 0}
.good-fit li{padding:.5rem 0; font-style:italic; font-size:.95rem; border-bottom:1px solid rgba(0,0,0,.08)}
.good-fit li::before{content:"“"; font-family:'Instrument Serif', serif; font-size:1.2rem; color:var(--orange); margin-right:.3rem}

@media(max-width:980px){
  .looking, .why, .next, .doover, .whyprice, .output-block{grid-template-columns:1fr}
  .looking > div:first-child, .next-left, .looking ul{border-right:none; border-bottom:1.5px solid var(--fg); columns:1}
  .output-block h3{font-size:18vw}
  .ex-grid{grid-template-columns:1fr}
}