:root{
  --bg:#0e0d0b;
  --bg-2:#15130f;
  --ink:#f4efe6;
  --ink-dim:#a8a097;
  --line:#2a2620;
  --accent:#ff7a1a;
  --accent-2:#ffd84d;
  --warm:#f4efe6;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 32px;
  background:rgba(14,13,11,.78);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.2px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,122,26,.18)}
.logo-mark{width:34px;height:34px;display:block}
footer .logo-mark{width:28px;height:28px}

/* LIVE COUNTER */
.counter{padding:80px 32px;text-align:center;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);border-bottom:1px solid var(--line)}
.counter-inner{max-width:900px;margin:0 auto}
.counter-num{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(72px,12vw,160px);line-height:1;letter-spacing:-.04em;
  color:var(--accent-2);
  margin:18px 0 14px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 60px rgba(255,216,77,.18);
}
.counter-label{font-family:var(--serif);font-size:clamp(18px,2vw,24px);color:var(--ink);max-width:46ch;margin:0 auto 18px;font-weight:400}
.counter-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);display:inline-flex;align-items:center;gap:10px;justify-content:center}
.live-dot{width:8px;height:8px;border-radius:50%;background:#3aff7a;box-shadow:0 0 0 0 rgba(58,255,122,.6);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(58,255,122,.5)}
  70%{box-shadow:0 0 0 10px rgba(58,255,122,0)}
  100%{box-shadow:0 0 0 0 rgba(58,255,122,0)}
}

/* SEATTLE BAND */
.seattle-band{padding:80px 32px 100px;max-width:1400px;margin:0 auto}
.seattle-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:14px;height:340px}
.seattle-grid figure{position:relative;margin:0;border-radius:18px;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--line)}
.sea-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,11,.05) 40%,rgba(14,13,11,.85) 100%)}
.seattle-grid figcaption{
  position:absolute;left:18px;bottom:14px;z-index:2;
  font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:-.01em;color:var(--ink);
}
/* Capitol Hill — Pike/Pine street scene with graffiti, daytime (Abner Campos, Unsplash) */
.sea-1{background-image:url('https://images.unsplash.com/photo-1679260974978-a57c0c38ba3f?w=1400&q=80&auto=format&fit=crop')}
/* Lower Queen Anne — Space Needle from Kerry Park (Andrea Leopardi, Unsplash) */
.sea-2{background-image:url('https://images.unsplash.com/photo-1542223616-740d5dff7f56?w=1000&q=80&auto=format&fit=crop')}
/* Pioneer Square — historic district (Unsplash) */
.sea-3{background-image:url('https://images.unsplash.com/photo-1740165886202-924690cf11e4?w=1000&q=80&auto=format&fit=crop')}
/* Belltown — Seattle skyline from Space Needle (Unsplash) */
.sea-4{background-image:url('https://images.unsplash.com/photo-1708157708573-6934147cec07?w=1200&q=80&auto=format&fit=crop')}
.seattle-caption{text-align:center;margin:28px auto 0;color:var(--ink-dim);font-family:var(--serif);font-style:italic;font-size:18px;max-width:60ch}
@media (max-width:880px){
  .seattle-grid{grid-template-columns:1fr 1fr;height:auto}
  .seattle-grid figure{height:200px}
}
.nav nav{display:flex;gap:28px;align-items:center;font-size:14px;color:var(--ink-dim)}
.nav nav a:hover{color:var(--ink)}
.nav .cta{color:var(--ink);border:1px solid var(--line);padding:8px 14px;border-radius:999px}
.nav .cta:hover{border-color:var(--accent);color:var(--accent)}

/* HERO */
.hero{padding:120px 32px 80px;max-width:1200px;margin:0 auto}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 24px}
.eyebrow.center{text-align:center}
.hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,6.4vw,84px);line-height:1.02;letter-spacing:-.02em;
  margin:0 0 28px;max-width:14ch;
}
.hero h1 em{font-style:italic;font-weight:500;color:var(--accent-2)}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--ink-dim);max-width:62ch;margin:0 0 36px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:64px}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:14px 22px;border-radius:999px;font-weight:500;font-size:15px;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn.small{padding:11px 18px;font-size:14px}
.btn.primary{background:var(--accent);color:#1a1208}
.btn.primary:hover{transform:translateY(-1px);background:var(--accent-2)}
.btn.ghost{border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:680px;padding-top:32px;border-top:1px solid var(--line)}
.hero-meta div{display:flex;flex-direction:column;gap:4px}
.hero-meta strong{font-family:var(--serif);font-size:32px;font-weight:500}
.hero-meta span{font-size:12px;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase}

/* MARQUEE */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);padding:18px 0}
.track{display:flex;gap:32px;white-space:nowrap;animation:scroll 38s linear infinite;font-family:var(--serif);font-size:18px;color:var(--ink-dim);letter-spacing:.05em}
.track span{flex:none}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:120px 32px;max-width:1200px;margin:0 auto}
.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.2vw,56px);line-height:1.08;letter-spacing:-.015em;text-align:center;margin:8px auto 18px;max-width:18ch}
.section-lede{text-align:center;color:var(--ink-dim);max-width:62ch;margin:0 auto 72px;font-size:17px}

/* PRODUCTS */
.product{margin-bottom:96px}
.product:last-child{margin-bottom:0}
.product-tag{font-size:11px;letter-spacing:.22em;color:var(--ink-dim);margin-bottom:18px}
.product-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start;padding-top:32px;border-top:1px solid var(--line)}
.product.alt .product-grid{grid-template-columns:1fr 1.4fr;direction:rtl}
.product.alt .product-grid > *{direction:ltr}
.product h3{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.6vw,64px);margin:0 0 18px;letter-spacing:-.02em}
.trade{font-size:.4em;vertical-align:super;color:var(--ink-dim);margin-left:4px}
.product-pitch{font-size:18px;color:var(--ink);margin:0 0 24px;max-width:46ch}
.bullets{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:14px}
.bullets li{padding-left:22px;position:relative;color:var(--ink-dim);font-size:15px}
.bullets li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.bullets li strong{color:var(--ink);font-weight:500}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:0}
.card-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);gap:16px}
.card-row:last-child{border-bottom:none}
.card-row span{color:var(--ink-dim);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.card-row strong{font-family:var(--serif);font-weight:500;font-size:17px;text-align:right}

/* STUDIO */
.studio{background:var(--bg-2);max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.studio .section-title,.studio .section-lede,.studio .eyebrow{margin-left:auto;margin-right:auto}
.studio > *{max-width:1200px;margin-left:auto;margin-right:auto}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pillar{padding:32px;background:var(--bg);border:1px solid var(--line);border-radius:18px}
.pillar-num{font-family:var(--serif);font-size:14px;color:var(--accent);letter-spacing:.1em}
.pillar h4{font-family:var(--serif);font-weight:500;font-size:22px;margin:14px 0 10px;letter-spacing:-.01em}
.pillar p{margin:0;color:var(--ink-dim);font-size:14.5px}

/* QUOTE */
.quote{padding:120px 32px;text-align:center;max-width:900px;margin:0 auto}
.quote blockquote{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(26px,3.4vw,44px);line-height:1.2;margin:0 0 24px;color:var(--ink);letter-spacing:-.01em}
.quote-attrib{color:var(--ink-dim);font-size:14px;letter-spacing:.08em;text-transform:uppercase}

/* CONTACT */
.contact-form{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-dim);letter-spacing:.04em;text-transform:uppercase}
.contact-form input,.contact-form textarea{
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  color:var(--ink);font:inherit;font-size:15px;text-transform:none;letter-spacing:normal;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.contact-form button{align-self:flex-start;border:none;cursor:pointer;font:inherit}
.micro{font-size:13px;color:var(--ink-dim)}
.micro a{color:var(--accent)}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:48px 32px;background:var(--bg-2)}
.foot-grid{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}

/* HERO META — smaller text for label-style */
.hero-meta strong{font-size:22px;font-family:var(--serif);font-weight:500}

/* VS GRID */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px;margin:0 auto}
.vs-col{padding:36px;border-radius:18px;border:1px solid var(--line);background:var(--bg-2)}
.vs-col.vs-us{background:linear-gradient(180deg,rgba(255,122,26,.08),transparent);border-color:rgba(255,122,26,.35)}
.vs-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 18px}
.vs-us .vs-label{color:var(--accent)}
.vs-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.vs-col li{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--ink-dim);letter-spacing:-.01em}
.vs-us li{color:var(--ink)}
.vs-them li{text-decoration:line-through;text-decoration-color:rgba(168,160,151,.35);text-decoration-thickness:1px}

/* PILLARS — 5-col variant */
.pillars.five{grid-template-columns:repeat(5,minmax(0,1fr))}

/* BIGGER (manifesto strip) */
.bigger{padding:140px 32px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bigger-inner{max-width:880px;margin:0 auto}
.bigger h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5vw,64px);line-height:1.06;letter-spacing:-.02em;margin:8px 0 24px}
.bigger-lede{color:var(--ink-dim);font-size:18px;max-width:62ch;margin:0 auto}

/* PRODUCT SECTIONS (rewrite for new layout) */
.product-section{padding:120px 32px}
.product-section.alt-bg{background:var(--bg-2);max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-section .product{max-width:1200px;margin:0 auto}
.sub-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:28px 0 14px;font-weight:500}
.bullets-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.caption{color:var(--ink-dim);font-style:italic;font-family:var(--serif);font-size:17px;margin:-8px 0 8px}

/* CARD list variants */
.card-title{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 14px}
.card-list{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:10px}
.card-list:last-child{margin-bottom:0}
.card-list li{font-family:var(--serif);font-size:17px;color:var(--ink);padding-left:18px;position:relative}
.card-list li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ECOSYSTEM */
.ecosystem{padding:120px 32px;max-width:1200px;margin:0 auto;text-align:center}
.eco-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:20px;align-items:stretch;margin:48px 0 64px}
.eco-card{padding:36px 28px;border:1px solid var(--line);border-radius:18px;background:var(--bg-2);text-align:left;display:flex;flex-direction:column;gap:10px}
.eco-num{font-family:var(--serif);color:var(--accent);font-size:14px;letter-spacing:.1em;margin:0}
.eco-card h4{font-family:var(--serif);font-weight:500;font-size:24px;margin:0;letter-spacing:-.01em}
.eco-card p{margin:0;color:var(--ink-dim);font-size:15px}
.eco-card strong{color:var(--ink);font-weight:500}
.eco-arrow{align-self:center;font-family:var(--serif);font-size:32px;color:var(--accent);font-weight:300}
.closer{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.2vw,28px);line-height:1.4;max-width:62ch;margin:0 auto;color:var(--ink)}
.closer em{font-style:italic;color:var(--accent-2);font-weight:500}

/* RESPONSIVE */
@media (max-width:880px){
  .nav nav{gap:16px}
  .nav nav a:not(.cta){display:none}
  .product-grid,.product.alt .product-grid{grid-template-columns:1fr;direction:ltr;gap:32px}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:80px 24px 48px}
  .section,.product-section,.bigger,.ecosystem{padding:80px 24px}
  .hero-meta{grid-template-columns:repeat(3,1fr);gap:16px}
  .hero-meta strong{font-size:18px}
  .contact-form .row{grid-template-columns:1fr}
  .vs-grid{grid-template-columns:1fr}
  .eco-grid{grid-template-columns:1fr;gap:14px}
  .eco-arrow{transform:rotate(90deg);font-size:24px}
  .bullets-2col{grid-template-columns:1fr}
}
@media (max-width:520px){
  .pillars,.pillars.five{grid-template-columns:1fr}
}