/* Preserve complete supplied logo artwork; never invert its colours. */
.hero h1{font-weight:300;font-size:clamp(64px,8cqi,112px);letter-spacing:-.065em;line-height:1.02;margin-block:36px 28px}
html[data-view=desktop] .hero h1{font-size:112px}
.human-studio{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.human-copy h2{font-weight:400;margin-block:26px;font-size:clamp(44px,5.5cqi,76px)}
.human-copy h2 span{color:var(--secondary)}
.human-copy .body-copy{font-size:17px;margin:20px 0;max-width:520px}
.human-copy .text-button{margin-top:12px}
.human-film{margin:0;min-width:0}
.human-film-frame{position:relative;overflow:hidden;border-radius:24px;background:var(--surface);aspect-ratio:778/720}
.human-film video{display:block;width:100%;height:100%;object-fit:cover}
.film-toggle{position:absolute;right:18px;bottom:18px;border:1px solid #ffffff60;background:#080808c9;color:#fff;padding:11px 16px;border-radius:30px;font-size:14px;backdrop-filter:blur(16px)}
.film-toggle[hidden]{display:none}
.human-film figcaption{font-size:12px;color:var(--secondary);line-height:1.7;margin-top:14px}
.human-film figcaption a{text-decoration:underline;text-underline-offset:3px}
@container(max-width:700px){.human-film-frame{aspect-ratio:1/1}.human-film figcaption{font-size:12px}}
.studio-milestones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:12px 0 48px;border-bottom:1px solid var(--line);margin-bottom:48px}
.studio-milestones .milestone-number{font-size:clamp(44px,6cqi,72px);font-weight:300;line-height:1.1;letter-spacing:-.05em;color:var(--accent);margin-bottom:18px}
.studio-milestones h3{font-size:17px;font-weight:500;margin-bottom:10px}
.studio-milestones article>p:last-child{font-size:15px;color:var(--secondary);line-height:1.65;max-width:270px;margin:0}
@container(max-width:700px){.hero h1{font-size:clamp(58px,15cqi,84px)}.human-studio{grid-template-columns:1fr;gap:36px}.human-copy h2{font-size:54px}.studio-milestones{grid-template-columns:1fr;gap:30px}.studio-milestones article{display:grid;grid-template-columns:100px 1fr;column-gap:20px}.studio-milestones .milestone-number{grid-row:1/3;font-size:46px;margin:0}.studio-milestones h3{margin:0 0 8px}.studio-milestones article>p:last-child{max-width:none}}
.brand{flex-shrink:0}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.contact-fields label{font-size:14px}
.contact-fields input{display:block;margin-top:10px;width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;padding:14px;background:transparent;color:var(--fg)}
@container(max-width:700px){.contact-fields{grid-template-columns:1fr}}
.pixel-logo{display:block;width:142px;aspect-ratio:1540/620}
.pixel-logo svg{display:block;width:100%;height:100%;overflow:hidden}
.pixel-logo .pixel-dark{display:none}
.pixel-light{mix-blend-mode:multiply}
html[data-theme=black] .pixel-logo .pixel-light{display:none}
html[data-theme=black] .pixel-logo .pixel-dark{display:block;mix-blend-mode:screen}
.quadra-signature{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.quadra-signature p{margin:0;font-size:14px;line-height:1.5}
/* Frame the supplied artwork without changing its geometry. The page theme
   supplies the background; monochrome treatment matches the parent brand. */
.quadra-signature .quadra-mark{display:block;width:132px;height:auto;aspect-ratio:260/240;overflow:hidden;filter:grayscale(1) brightness(.55) contrast(30);mix-blend-mode:multiply}
html[data-theme=black] .quadra-signature .quadra-mark{filter:grayscale(1) brightness(.55) contrast(30) invert(1);mix-blend-mode:screen}
/* Blend against the chosen surface, including within the masked hero. */
.hero-visual{background:var(--bg)}
/* Explicit desktop preview has a genuine desktop-sized layout canvas. */
html[data-view=desktop] .site-shell{width:1200px;max-width:none;margin:0;zoom:var(--desktop-scale,1)}
html[data-view=desktop] .hero{padding:76px 60px 42px}
html[data-view=desktop] h1{font-size:82px}
html[data-view=desktop] h2{font-size:60px}
html[data-view=desktop] .service-grid,html[data-view=desktop] .deliverables{grid-template-columns:1fr 1fr;gap:24px}
html[data-view=desktop] .service-card{padding:36px 32px;min-height:310px}
html[data-view=desktop] .service-card h3{font-size:29px}
html[data-view=desktop] .service-card p{font-size:16px}
html[data-view=desktop] .deliverables h3{font-size:29px}
html[data-view=desktop] .steps{grid-template-columns:1fr 1fr}
html[data-view=desktop] .footer-grid{grid-template-columns:2fr 1fr 1fr}
html[data-view=desktop] .footer-grid>div:first-child{grid-column:auto}
html[data-view=desktop] .footer-bottom{flex-direction:row}
@media(min-width:1200px){html[data-view=desktop] .site-shell{margin-inline:auto}}
@media(max-width:700px){.pixel-logo{width:126px}.header-actions{gap:14px}}
@media(max-width:360px){.pixel-logo{width:110px}.header-actions{gap:10px}}
.history { border-top: 1px solid var(--line); }
.history-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; margin:56px 0; }
.history-facts article { min-width:0; }
.history-number { font-size:clamp(2rem,5cqi,3.5rem); font-weight:600; letter-spacing:-.045em; margin:0 0 22px; color:var(--accent); }
.history-facts h3 { font-size:1.35rem; margin-bottom:16px; }
.history-facts article > p:last-child { font-size:1rem; color:var(--secondary); line-height:1.75; }
.history-estimate { padding:40px; border:1px solid var(--line); border-radius:24px; }
.history-estimate h3 { font-size:clamp(2rem,5cqi,3.75rem); letter-spacing:-.04em; line-height:1.12; margin:20px 0; }
.history-estimate-label { font-size:1.2rem; line-height:1.6; max-width:720px; }
.history-caveat { color:var(--secondary); font-size:1rem; line-height:1.7; max-width:780px; margin:20px 0 30px; }
.history-method { border-top:1px solid var(--line); }
.history-method summary { cursor:pointer; list-style:none; padding:24px 0 4px; font-size:1rem; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.history-method summary::-webkit-details-marker { display:none; }
.history-method summary:focus-visible { outline:2px solid var(--fg); outline-offset:5px; }
.history-method > div { padding-top:20px; font-size:1rem; line-height:1.75; color:var(--secondary); }
.history-method ul { padding-left:22px; }
.history-method li { margin:10px 0; }
.history-method p { margin:18px 0; }
.history-table-wrap { overflow-x:auto; }
.history-method table { border-collapse:collapse; width:100%; font-size:.9rem; color:var(--fg); margin:24px 0; }
.history-method caption { text-align:left; font-weight:600; margin-bottom:14px; }
.history-method th, .history-method td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
@container (max-width:700px) { .history-facts { grid-template-columns:1fr; gap:36px; margin:36px 0; } .history-estimate { padding:24px 20px; } }