:root{font-family:Inter,system-ui,sans-serif;color:#23211e;background:#fffdf9;--accent:#a64309;--line:#e9dfd3}*{box-sizing:border-box}body{margin:0}a{color:inherit}img{display:block;width:100%;object-fit:cover}button,input,select{font:inherit}[hidden]{display:none!important}.wrap{width:min(1100px,calc(100% - 36px));margin:auto}header,nav,.buttons{display:flex;align-items:center;gap:22px}header{justify-content:space-between;min-height:68px}nav a,.brand{text-decoration:none}.brand{font-size:24px;font-weight:900}.brand span,.eyebrow,.work-link,.meta{color:var(--accent)}.hero{background:linear-gradient(90deg,#f7f2e9 24%,#f7f2e9e6 48%,#f7f2e97a),url('assets/atmosphere-0.jpg') center 54%/cover}.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(22px,5vw,72px);align-items:center}.hero .grid{min-height:550px;padding-block:56px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em}h1,h2,h3,p{margin:0 0 14px}h1{font-size:clamp(42px,6vw,76px);line-height:1;letter-spacing:-.06em}h2{font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.045em}h3{font-size:22px}p{line-height:1.55}.intro{max-width:39ch;font-size:18px}.price{display:inline-block;margin-bottom:16px}.minis,.cases,.features{display:grid;gap:12px}.minis,.cases{grid-template-columns:1fr 1fr}.minis{max-width:480px;margin-bottom:12px}.minis a,.cases article{border-radius:13px;overflow:hidden;background:white;border:1px solid var(--line);text-decoration:none}.minis img{height:105px}.minis span{display:block;padding:7px 10px;font-weight:700;font-size:13px}.quiz,.features article,.estimate{border-radius:18px;background:#fffdf9;color:#23211e;padding:clamp(20px,4vw,36px);border:1px solid var(--line)}.quiz{box-shadow:0 12px 34px #2d23171d}.quiz h2{font-size:29px}.quiz progress{width:100%;height:8px;accent-color:var(--accent);margin-bottom:22px}.quiz label,#calc label{display:grid;gap:8px;font-weight:650;margin:18px 0}.quiz select,input{min-height:48px;width:100%;border:1px solid #aa9c8a;border-radius:8px;padding:10px;background:white;color:#23211e}.cta,button,.outline{display:inline-block;border:1px solid transparent;border-radius:9px;padding:11px 16px;background:var(--accent);color:white;font-weight:700;text-decoration:none;cursor:pointer}.outline{color:#26221e;background:#fffdf9;border-color:#beab98}.section{padding-block:52px}.features{grid-template-columns:repeat(3,1fr)}.features article{background:#f6efe5}.cases{margin:23px 0}.cases img{height:240px}.cases article div{padding:21px}.dark{background:#25221e;color:#fffdf9}.dark .eyebrow{color:#ffb279}.estimate output{display:block;font-size:clamp(26px,5vw,46px);font-weight:850;margin-bottom:10px;color:var(--accent)}footer{padding-block:26px}#quiz-result:not(:empty){padding-top:16px;font-weight:700}@media(max-width:700px){nav{display:none}.grid,.features,.cases{grid-template-columns:1fr}.hero .grid{padding-block:34px}.section{padding-block:36px}.hero{background-position:center}.hero .pitch{background:#f7f2e9dd;border-radius:12px;padding:13px}.cases img{height:210px}}

/* The light reference places the proof cards below the offer and keeps the quiz in a separate panel. */
:root{color:#14213b;background:#fff;--accent:#164bc8;--line:#dce6f5}
.hero{background:linear-gradient(90deg,#f4f7fc 14%,#f4f7fcf7 42%,#f4f7fcaa 100%),url('assets/atmosphere-0.jpg') center 54%/cover}
.hero .grid{grid-template-columns:1.12fr 1fr;min-height:500px;padding-block:42px;gap:40px}
.hero h1{font-size:clamp(36px,4.7vw,62px);max-width:13ch}
.price{background:#164bc8;color:white;border-radius:20px;padding:6px 12px;margin-bottom:8px}
.proof{font-size:13px;font-weight:700;color:#263d65}
.minis a{position:relative;background:#14213b;border:none}
.minis img{height:110px}
.minis span{position:absolute;inset:auto 0 0;padding:18px 9px 8px;color:white;background:linear-gradient(transparent,#0c1738)}
.quiz,.estimate,.outline{background:white;color:#14213b;border-color:var(--line)}
.quiz{align-self:center}
.features article{background:#f1f5fc;color:#14213b}
.dark{background:#edf3ff;color:#14213b}
.dark .eyebrow{color:var(--accent)}
.quiz select,input{border-color:#9fb2d4}
@media(max-width:700px){.hero .grid{grid-template-columns:1fr;gap:20px;padding-block:26px}.hero .pitch{background:#f4f7fcef}.hero h1{font-size:clamp(33px,8vw,46px)}}

.hero .grid{align-items:start}
.hero .pitch,.hero .quiz{align-self:center}
.quiz{min-width:0}
.quiz .buttons button[type="submit"]{flex:1}
.quiz button:disabled{opacity:.65;cursor:wait}
#summary{padding:12px;background:#edf3ff;border-radius:8px}
.cases .cta{margin-top:5px}
#calc,#quiz,.cases article{scroll-margin-top:16px}

:root{font-family:"Golos Text",system-ui,sans-serif}
h1,h2,h3{font-weight:800;letter-spacing:-.035em}
.brand{font-size:18px;font-weight:800}
.cases article .gallery,.cases article .gallery-cover,.cases article .gallery-strip{padding:0}
.gallery-cover a{display:block}
.gallery-cover img{object-position:center 55%}
.gallery-strip{display:flex;gap:6px;overflow-x:auto;background:#eef3fb}
.gallery-strip a{flex:0 0 92px}
.cases .gallery-strip img{height:66px}
.reviews{margin-bottom:18px}
.reviews blockquote{margin:0 0 14px;font-size:17px;line-height:1.55}
.reviews p{font-size:14px;margin:0}
#photo-viewer{border:0;border-radius:14px;background:#14213b;color:white;width:min(96vw,1000px);padding:12px}
#photo-viewer::backdrop{background:#081125d9}
#photo-viewer img{height:min(72vh,720px);object-fit:contain}
#photo-viewer [data-close]{position:absolute;right:12px;top:12px}
.photo-controls{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:10px}
h1,h2{font-family:"Golos Text",system-ui,sans-serif;font-weight:600;letter-spacing:-.035em}
.hero h1{font-size:clamp(29px,4vw,54px);max-width:16ch;line-height:1.12}
.quiz h2{font-size:clamp(21px,2.3vw,29px);line-height:1.22}

.soft{background:#edf3ff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.split img{aspect-ratio:16/10;border-radius:16px}
.split p{max-width:52ch}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style-position:inside;margin:20px 0 0;padding:0}
.steps li{padding:20px;background:#f3f7ff;border:1px solid var(--line);border-radius:14px}
.steps p{margin:8px 0 0}
.faq details{padding:17px 0;border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:750}
.faq details p{margin:10px 0 0}
.final-section{background:#14213b;color:#fff}
.final-section .cta{background:#fff;color:#164bc8}
@media(max-width:700px){.split,.steps{grid-template-columns:1fr}.gallery{min-width:0}.split img{max-height:300px}}

.estimate{padding:clamp(22px,4vw,32px)}
.estimate output{color:#14213b;font-size:clamp(30px,4.2vw,52px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.12;letter-spacing:-.025em;margin:8px 0 14px}
.estimate p:first-child{font-size:15px;font-weight:600;margin-bottom:0}
.estimate p:not(:first-child){color:#44536b;max-width:38ch}
@media(max-width:420px){.estimate .cta{display:block;text-align:center}}

.step-count {
  color: #44536b;
  font-size: 14px;
  margin-bottom: 6px;
}
.quiz progress { margin-bottom: 12px; }
#calc-area { max-width: 240px; }
@media (max-width: 420px) {
  .hero h1 { font-size: 32px; }
  header { gap: 10px; }
  .brand { font-size: 16px; }
  header .outline { padding-inline: 10px; font-size: 14px; }
}

:root { font-family: Manrope, system-ui, sans-serif; --muted: #5b6577; --soft: #f0f3f8; --navy: #161c2a; }
.wrap { width: min(1320px, calc(100% - 64px)); }
.section { padding-block: clamp(48px, 6vw, 90px); }
h1, h2, .cases h3, .facts strong, .estimate output, .service-cards strong {
  font-family: Unbounded, Manrope, system-ui, sans-serif;
  font-weight: 700;
}
h2 { font-size: clamp(25px, 3.25vw, 46px); max-width: 27ch; }
.section-intro { color: var(--muted); margin-bottom: 28px; }
#work, #process, #steps { background: var(--soft); }
.features, .cases { gap: 16px; }
.assurance, .process-cards, .service-cards, .steps { margin-top: 30px; }
.features article, .cases article, .steps li { border: 0; border-radius: 22px; }
.assurance article, .service-cards article { background: var(--soft); }
.assurance article span {
  display: inline-block; padding: 12px 16px; margin-bottom: 16px;
  border-radius: 12px; background: #dce7ff; color: #1746a8; font-weight: 800;
}
.facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.facts div { padding: 18px; border: 1px solid var(--line); border-radius: 16px; }
.facts strong { display: block; color: var(--accent); font-size: clamp(16px,2vw,25px); margin-bottom: 6px; }
.filters button { border-radius: 999px; background: white; color: var(--navy); border-color: var(--line); }
.filters button[aria-pressed=true] { background: var(--navy); color: white; }
.gallery-cover a { position: relative; }
.gallery-cover img { height: auto; aspect-ratio: 1.65; }
.gallery-count { position: absolute; top: 12px; right: 12px; background: #161c2ac9; color: white; border-radius: 999px; padding: 6px 10px; }
.portfolio-cta, .quality { background: var(--navy); color: white; border-radius: 20px; padding: 22px; }
.portfolio-cta { display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; }
#calc { background: var(--navy); color: white; }
#calc .eyebrow, #calc .estimate output { color: #9dbbff; }
#calc .section-intro, #calc .estimate p, .range-bounds { color: #c3ccdc; }
.calc-grid { align-items: start; grid-template-columns: 1.12fr 1fr; }
#calc label[for=calc-area] { display: flex; justify-content: space-between; align-items: center; }
#calc-area { width: 110px; }
#calc-range { accent-color: #9dbbff; width: 100%; min-height: 28px; padding: 0; }
.range-bounds { display: flex; justify-content: space-between; font-size: 13px; }
.calc-type { border: 0; padding: 0; margin: 22px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.calc-type legend { margin-bottom: 8px; }
#calc .calc-type label { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; border-radius: 9px; background: #252e40; }
.calc-type input { min-height: 0; width: auto; accent-color: #9dbbff; }
#calc .estimate { background: #252e40; border: 0; color: white; }
#calc-to-quiz { display: block; text-align: center; margin-top: 14px; }
.process-cards article, .steps li { background: white; }
.process-cards article:nth-child(2) { background: #dce7ff; }
.process-cards li { margin-bottom: 10px; }
.process-cards img { border-radius: 14px; aspect-ratio: 1.55; }
.service-cards article { display: flex; flex-direction: column; align-items: start; }
.service-cards article:nth-child(2) { background: var(--navy); color: white; }
.service-cards strong { color: #9dbbff; margin-bottom: 12px; }
.service-cards a { margin-top: auto; }
.quality { margin-top: 20px; }
.quality .facts { margin-top: 0; }
.quality .facts div { background: #252e40; border: 0; }
.steps li::marker { color: var(--accent); font-weight: 800; }
@media(max-width:700px) {
  .wrap { width: calc(100% - 32px); }
  .calc-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .facts div { padding: 12px; }
  .hero h1 { font-size: clamp(24px,7vw,39px); }
}