/* DamyCorp — site styles */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-var.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-var.woff2) format("woff2")}
/* Metric-matched fallbacks: keep layout stable (CLS≈0) while web fonts load */
@font-face{font-family:"Bricolage Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:100.27%;ascent-override:92.75%;descent-override:26.93%;line-gap-override:0%}
@font-face{font-family:"Mono Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:128.65%;ascent-override:79.28%;descent-override:23.32%;line-gap-override:0%}

:root{
  --bg:#F2F0EA;--ink:#121212;--accent:#FF4F1A;--accent-ink:#B5370C;--hover:#E9E6DC;--track:#ECE9E1;--ok:#2BB673;
  --sans:"Bricolage Grotesque","Bricolage Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","Mono Fallback",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1240px;--gut:28px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}
h1,h2,h3,p{margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
img,svg{display:block;max-width:100%}
section[id]{scroll-margin-top:72px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:700}
.skip:focus{top:12px;color:var(--bg)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* Buttons */
.btn{display:inline-block;border-radius:999px;font-weight:700;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{background:var(--accent);color:var(--ink)}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--ink);color:var(--bg)}
.btn-line{border:1.5px solid var(--ink);font-weight:500}
.btn-line:hover{background:var(--ink);color:var(--bg)}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(242,240,234,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(18,18,18,.1)}
.site-header .wrap{padding-top:18px;padding-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo-mark{width:22px;height:22px;flex:none}
.nav{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;letter-spacing:.04em}
.nav ul{display:contents;list-style:none}
.head-cta{padding:11px 18px;font-size:15px;font-weight:500}

/* Hero */
.hero{padding-top:88px;padding-bottom:72px}
.eyebrow{font-size:13px;letter-spacing:.06em;display:flex;gap:10px;align-items:center;margin-bottom:34px}
.hero h1{font-size:clamp(46px,8.4vw,124px);line-height:.93;letter-spacing:-.045em;font-weight:800;max-width:1150px;text-wrap:balance}
.hero-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px;margin-top:56px;align-items:end}
.lead{font-size:clamp(19px,1.8vw,23px);line-height:1.4;max-width:560px;text-wrap:pretty}
.endrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.btn-lg{padding:18px 26px;font-size:17px}
.btn-lg.btn-line{padding:17px 26px}

/* Stats band */
.stats{background:var(--ink);color:var(--bg);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden}
.stats dl{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.stat{padding:26px 28px;border-right:1px solid rgba(242,240,234,.15);display:flex;flex-direction:column-reverse;justify-content:flex-end}
.stat:last-child{border-right:0}
.stat dd{margin:0;font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.stat dt{font-size:12px;opacity:.75;margin-top:4px}
.stat .hl{color:var(--accent)}

/* Section headings */
.h2{font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.035em;font-weight:800}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.sec-head .h2{max-width:720px}
.sec-head p{font-size:18px;line-height:1.45;max-width:380px;opacity:.78}

/* Services */
.work{padding-top:110px;padding-bottom:40px}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:2px;background:var(--ink);border:2px solid var(--ink);border-radius:22px;overflow:hidden}
.cards>li{display:flex}
.card{flex:1;background:var(--bg);padding:32px 28px 30px;display:flex;flex-direction:column;gap:18px;min-height:300px;transition:background-color .15s}
.card:hover{background:var(--hover)}
.card-meta{display:flex;justify-content:space-between;font-size:12px}
.card-meta span:last-child{opacity:.72}
.card h3{margin-top:24px;font-size:31px;line-height:1.02;letter-spacing:-.03em;font-weight:700}
.card p{font-size:16.5px;line-height:1.5;opacity:.8;text-wrap:pretty}
.chips{margin:auto 0 0;padding:0;list-style:none;display:flex;gap:6px;flex-wrap:wrap}
.chips li{font-family:var(--mono);font-size:11.5px;padding:6px 10px;border:1px solid rgba(18,18,18,.3);border-radius:999px}
.card h3 a:hover{color:var(--accent-ink)}
.card-link{font-size:12px;border-bottom:1px solid currentColor;align-self:flex-start}

/* Featured product */
.product{padding-top:80px;padding-bottom:80px}
.product-box{background:var(--ink);color:var(--bg);border-radius:28px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:56px;align-items:center}
.kicker{font-size:12px;letter-spacing:.06em;color:var(--accent);margin-bottom:22px}
.product h2{font-size:clamp(40px,5.4vw,72px);line-height:.95;letter-spacing:-.04em;font-weight:800}
.product-copy{margin-top:26px;font-size:19px;line-height:1.5;opacity:.88;max-width:500px;text-wrap:pretty}
.ticks{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;font-size:16px}
.ticks li{display:flex;gap:12px}
.ticks li::before{content:"→";color:var(--accent);font-family:var(--mono)}
.product .btn{margin-top:36px;padding:16px 24px;font-size:16px;white-space:normal}
.product .btn-accent:hover{background:var(--bg);color:var(--ink)}
.mock{margin:0;background:var(--bg);color:var(--ink);border-radius:18px;padding:22px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.mock-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;padding-bottom:16px;border-bottom:1px solid rgba(18,18,18,.12)}
.live{display:flex;align-items:center;gap:6px}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.variants{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.variant{border:1.5px solid rgba(18,18,18,.12);border-radius:12px;padding:16px;background:#fff}
.variant.win{border-color:var(--accent)}
.v-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.v-name{font-weight:700;font-size:16px}
.badge{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:6px;background:var(--track);white-space:nowrap}
.win .badge{background:#FFD9CB}
.v-desc{font-size:14px;opacity:.72;margin-top:4px}
.v-bar{display:flex;align-items:center;gap:12px;margin-top:14px}
.bar{flex:1;height:10px;background:var(--track);border-radius:6px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--ink);border-radius:6px}
.win .bar span{background:var(--accent)}
.cr{font-family:var(--mono);font-size:14px;font-weight:500;min-width:52px;text-align:right}
.mock-note{margin-top:14px;font-family:var(--mono);font-size:11px;opacity:.7}
.product-next{padding-top:0}
.reels{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.reel{position:relative;aspect-ratio:9/16;border-radius:12px;background:linear-gradient(160deg,#3a3733,#121212);border:2px solid transparent;overflow:hidden}
.reel.win{border-color:var(--accent);background:linear-gradient(160deg,#FF8A5C,#B5370C)}
.play{position:absolute;top:38%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.9)}
.play::after{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ink)}
.reel-card{position:absolute;left:6px;right:6px;bottom:6px;background:#fff;border-radius:8px;padding:6px 8px;display:grid;gap:2px;font-size:12px;line-height:1.2}
.reel-card span{font-family:var(--mono);font-size:10.5px;opacity:.72}
.reel-stats{margin-top:16px}

/* Principles */
.how{padding-top:80px;padding-bottom:100px}
.how .h2{margin-bottom:48px;max-width:860px;text-wrap:balance}
.grid3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:36px}
.principle{border-top:2px solid var(--ink);padding-top:20px}
.num{font-family:var(--mono);font-size:12px;color:var(--accent-ink);letter-spacing:.05em}
.principle h3{margin:14px 0 10px;font-size:25px;letter-spacing:-.02em;font-weight:700;line-height:1.1}
.principle p{font-size:16.5px;line-height:1.5;opacity:.8;text-wrap:pretty}

/* FAQ */
.faq{padding-top:20px;padding-bottom:110px}
.faq .h2{margin-bottom:40px}
.faq-list{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid rgba(18,18,18,.18)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:24px;color:var(--accent-ink);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent-ink)}
.faq details p{padding:0 0 26px;max-width:780px;font-size:17px;line-height:1.55;opacity:.82}

/* Contact / footer */
.contact{background:var(--accent);color:var(--ink)}
.contact .wrap{padding-top:100px;padding-bottom:60px}
.contact .eyebrow{margin-bottom:26px}
.contact h2{font-size:clamp(46px,8vw,116px);line-height:.93;letter-spacing:-.045em;font-weight:800;max-width:1100px}
.contact-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:36px;margin-top:64px;align-items:end}
.contact-col{display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.45;font-style:normal}
.label{font-size:12px}
.email{font-size:clamp(22px,2.8vw,38px);font-weight:700;letter-spacing:-.02em;border-bottom:2px solid var(--ink);align-self:flex-start;white-space:nowrap}
.contact a:hover{color:var(--bg);border-color:var(--bg)}
.contact .btn-ink{padding:20px 30px;font-size:18px}
.contact .btn-ink:hover{background:var(--bg);color:var(--ink)}
.foot{margin-top:90px;padding-top:22px;border-top:1.5px solid var(--ink);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px}
.foot a{border-bottom:1px solid currentColor}

/* Simple pages (404, privacy) */
.page{padding-top:80px;padding-bottom:110px;max-width:860px}
.page h1{font-size:clamp(40px,6vw,84px);line-height:.95;letter-spacing:-.04em;font-weight:800;margin-bottom:28px}
.page h2{font-size:26px;letter-spacing:-.02em;margin:40px 0 12px}
.page p,.page li{font-size:18px;line-height:1.6;opacity:.85}
.page a{border-bottom:1.5px solid currentColor}
.page .btn{border:0;margin-top:30px;padding:16px 24px}

@media (max-width:820px){
  .contact-row{grid-template-columns:1fr}
  :root{--gut:20px}
  .nav{display:none}
  .endrow{justify-content:flex-start}
  .endrow>a{flex:1 1 auto;text-align:center}
  .hero{padding-top:56px;padding-bottom:48px}
  .stat{border-right:0;border-bottom:1px solid rgba(242,240,234,.15)}
  .stat:last-child{border-bottom:0}
  .stat{padding-left:20px;padding-right:20px}
}
@media (max-width:420px){.head-cta{padding:10px 14px;font-size:14px}.stat dd{font-size:38px}}
@media print{.site-header,.skip{display:none}.contact{background:none}}