:root{--bg:#fff;--ink:#1c1c1e;--secondary:#5b6170;--panel:#f1f2f4;--line:#e3e5ea;--accent:#2f45ff;--lilac:#dedfff;--butter:#fff0c3;--mint:#cef0e5;--font:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;--mono:'DM Mono',monospace;--ease:cubic-bezier(.16,1,.3,1);--gutter:32px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;object-fit:cover}button{border:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;text-wrap:balance}h2{font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.035em}h3{font-size:24px;line-height:1.14;letter-spacing:-.02em}::selection{background:var(--accent);color:#fff}:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:4px}.wrap{width:min(100%,1520px);padding-inline:var(--gutter);margin-inline:auto}.section{padding-top:32px;padding-bottom:120px}.eyebrow{font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:-.02em}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:10px;left:16px;padding:12px 20px;background:var(--ink);color:#fff;z-index:100;translate:0 -150%}.skip-link:focus{translate:0}.header{height:96px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px;font-size:17px;font-weight:500;letter-spacing:-.035em}.header-right{display:flex;gap:48px;align-items:center}.header-contact{font-size:14px}.header-contact span{padding-left:16px}.header-contact:hover{color:var(--accent)}.menu-toggle,.icon-button{width:48px;height:48px;display:grid;place-items:center;background:transparent;border-radius:8px}.menu-toggle:hover,.icon-button:hover{background:var(--panel)}.plus{position:relative;display:inline-block;flex:none;width:22px;height:22px;transition:rotate .4s var(--ease)}.plus:before,.plus:after{content:'';position:absolute;background:currentColor;top:50%;left:0;width:100%;height:1px}.plus:after{rotate:90deg}.is-cross{rotate:45deg}.menu-toggle .plus{width:28px;height:28px}.link-plus{display:inline-flex;align-items:center;gap:20px;min-height:44px;font-size:15px;position:relative}.link-plus:after{content:'';position:absolute;bottom:5px;left:0;height:1px;width:calc(100% - 42px);background:currentColor;scale:0 1;transform-origin:left;transition:scale .4s var(--ease)}.link-plus:hover:after{scale:1}.link-plus:hover .plus{rotate:90deg}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:var(--ink);color:#fff;border-radius:8px;padding:18px 24px;font-family:var(--mono);text-transform:uppercase;font-size:12px;line-height:1.4;transition:background .3s,translate .3s}.button:hover{background:var(--accent);translate:0 -2px}.button span{font-family:var(--font);font-size:22px;line-height:1}
/* Introduction and shared typography. */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:24px;padding-bottom:120px;align-items:center}.hero-copy{padding-bottom:34px}.hero-eyebrow{margin-bottom:48px}.hero h1{font-size:clamp(48px,5.3vw,80px);line-height:1.015;letter-spacing:-.055em}.full-stop{color:var(--accent)}.hero-description{max-width:360px;font-size:18px;line-height:1.5;color:var(--secondary);margin-top:28px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:32px}.hero-note{font-size:12px;color:var(--secondary);margin-top:48px}
/* Original illustrative websites. Their controls are non-interactive presentation graphics. */
.preview{display:block;background:#f8f8f4;container-type:inline-size;overflow:hidden;text-align:left;border-radius:5px;line-height:1.2;color:#24352b;font-family:var(--font)}.preview>img{width:100%}.mock-header{display:flex;justify-content:space-between;align-items:center;padding:4cqw 5cqw;font-size:2.3cqw}.mock-logo{font-size:4.8cqw;font-weight:600;letter-spacing:-.06em}.mock-links{display:flex;align-items:center;gap:3cqw;font-size:1.8cqw}.mock-nav-cta{background:#24352b;color:#fff;padding:1.6cqw 2.2cqw;border-radius:2px}.mock-top{padding:4cqw 5cqw 5cqw;display:flex;justify-content:space-between;align-items:end;gap:4cqw}.mock-headline{font-size:8cqw;line-height:1.04;letter-spacing:-.045em;font-weight:500}.mock-kicker{font-size:1.6cqw;text-transform:uppercase;letter-spacing:.09em;margin-bottom:2cqw;display:block}.mock-description{font-size:2.1cqw;line-height:1.4;max-width:23cqw;margin-bottom:1cqw}.mock-photo{width:100%;height:47cqw;object-fit:cover}.mock-bottom{display:flex;justify-content:space-between;align-items:center;padding:4cqw 5cqw;font-size:1.9cqw}.mock-bottom strong{font-weight:500;font-size:3cqw}.mock-salon{background:#f9f4eb;color:#483623}.mock-salon .mock-logo{font-family:Georgia,serif;font-style:italic;font-size:5.8cqw;font-weight:400}.mock-salon .mock-nav-cta{background:#e8dfef;color:#483623;border-radius:8cqw}.mock-salon .mock-top{padding-top:2cqw;justify-content:center;text-align:center;display:block}.mock-salon .mock-headline{font-family:Georgia,serif;font-weight:400;font-size:8.2cqw;letter-spacing:-.05em}.mock-salon .mock-description{display:block;max-width:none;margin-top:2cqw}.mock-salon .mock-photo{width:90%;margin:0 5%;height:42cqw;border-radius:40cqw 40cqw 0 0}.mock-salon .mock-bottom{background:#f3e9c9;margin-top:4cqw}.mock-electric{background:#fff;color:#192b40}.mock-electric .mock-header{border-bottom:1px solid #e1e5eb}.mock-electric .mock-logo{color:#234df1;font-weight:700;letter-spacing:-.06em}.mock-electric .mock-nav-cta{background:#234df1}.mock-electric .mock-top{background:#eef3ff;padding-top:5cqw;padding-bottom:5cqw}.mock-electric .mock-headline{font-size:8cqw}.mock-electric .mock-bottom{background:#234df1;color:#fff}.mock-electric .mock-photo{height:44cqw}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:40px}.section-head .eyebrow{padding-bottom:5px}.work-section{border-top:1px solid var(--line);padding-top:56px}.work-intro{display:flex;justify-content:space-between;gap:24px;margin-bottom:40px;font-size:18px}.work-disclosure{color:var(--secondary);font-size:14px;line-height:1.5;max-width:330px}.statement{text-align:center;max-width:900px;padding-top:20px}.statement .eyebrow{margin-bottom:28px}.statement h2{font-size:clamp(36px,4.4vw,64px);line-height:1.12;letter-spacing:-.035em}.statement>p:last-child{font-size:18px;color:var(--secondary);line-height:1.5;margin-top:24px}.scrub-word{color:var(--ink);transition:color .25s}.motion .scrub-word{color:color-mix(in srgb,var(--ink) calc(var(--fill,0) * 100%),#a1a5af)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{background:var(--lilac);border-radius:32px;padding:32px;min-height:368px;display:flex;flex-direction:column;justify-content:space-between;transition:translate .5s var(--ease)}.service-card:nth-child(2){background:var(--butter)}.service-card:nth-child(3){background:var(--mint)}.service-number{font-family:var(--mono);font-size:11px}.pixel-icon{width:56px;height:56px;align-self:center;fill:var(--ink);margin:36px 0 48px}.service-card h3{font-size:24px;margin-bottom:12px}.service-card p{font-size:16px;line-height:1.45;max-width:300px}.service-card:hover{translate:0 -6px}
.about{display:grid;grid-template-columns:5fr 6fr;gap:8%;align-items:center}.about-photo{position:relative;border-radius:32px;overflow:hidden;max-height:700px}.about-photo img{width:100%;height:100%;aspect-ratio:4/5;object-position:center 35%}.about-content>.eyebrow{margin-bottom:32px}.about-content h2{font-size:clamp(40px,4.2vw,60px)}.about-lead{font-size:24px;line-height:1.3;letter-spacing:-.015em;margin-top:28px;max-width:480px}.about-body{color:var(--secondary);font-size:16px;max-width:470px;line-height:1.5;margin-top:16px}.process{margin-top:40px}.process-row{display:flex;gap:24px;padding:20px 0;border-top:1px solid var(--line)}.process-row>span{font-family:var(--mono);font-size:11px;padding-top:4px;color:var(--secondary)}.process-row h3{font-size:20px}.process-row p{margin-top:6px;font-size:14px;color:var(--secondary)}.faq{display:grid;grid-template-columns:5fr 6fr;gap:8%;align-items:start}.faq-title{position:sticky;top:40px}.faq-title>.eyebrow{margin-bottom:28px}.faq-title .link-plus{margin-top:28px}.faq-list{padding-top:8px}.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:27px 0;font-size:20px;line-height:1.3;letter-spacing:-.01em}.faq summary::-webkit-details-marker{display:none}.faq summary:hover{color:var(--accent)}.faq details[open] summary .plus{rotate:45deg}.faq details>p{padding:0 44px 28px 0;color:var(--secondary);font-size:16px;line-height:1.6}.footer{background:var(--panel);border-radius:32px 32px 0 0;padding-top:64px;overflow:hidden}.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end}.footer-top .eyebrow{margin-bottom:28px}.footer-top h2{font-size:clamp(44px,4.7vw,68px)}.footer-contact{padding-bottom:4px}.footer-contact>p{color:var(--secondary);margin-bottom:24px;font-size:16px;line-height:1.5}.email-link{font-size:clamp(19px,2.2vw,32px);letter-spacing:-.035em;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--ink);width:fit-content;max-width:100%;overflow-wrap:anywhere;transition:color .3s}.email-link:hover{color:var(--accent)}.email-link>span{margin-left:8px}.copy-email{padding:16px 0;background:transparent;color:var(--secondary);font-size:12px;display:flex;gap:14px;align-items:center}.copy-email:hover{color:var(--accent)}.footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #d9dbe0;padding-top:24px;margin-top:72px;font-size:12px;color:var(--secondary)}.footer-bottom nav{display:flex;gap:24px}.footer-bottom a:hover{color:var(--accent)}.footer-word{font-size:clamp(120px,23vw,348px);font-weight:700;letter-spacing:-.075em;line-height:.8;white-space:nowrap;margin-top:70px;margin-left:-.03em;padding-bottom:0;translate:0 .2em}.footer-word>span{color:var(--accent)}
/* Native dialogs provide a focus trap, Escape handling and an inert background. */
body:has(dialog[open]){overflow:hidden}dialog{color:var(--ink);border:0;padding:0}dialog::backdrop{background:rgba(28,28,30,.5);backdrop-filter:blur(8px)}.menu-dialog{width:100%;height:100%;max-width:none;max-height:none;background:rgba(255,255,255,.96);margin:0;padding:24px max(32px,calc((100vw - 1456px)/2));}.menu-top{display:flex;align-items:center;justify-content:space-between}.menu-dialog nav{max-width:950px;margin:7vh auto 5vh}.menu-dialog nav>a{display:flex;align-items:center;gap:32px;font-size:clamp(44px,7vw,96px);letter-spacing:-.04em;border-bottom:1px solid var(--line);padding:14px 0;line-height:1.15;transition:color .3s,padding .5s var(--ease)}.menu-dialog nav>a:hover{color:var(--accent);padding-left:12px}.menu-dialog nav>a>span:last-child{margin-left:auto}.menu-email{display:block;max-width:950px;margin:auto;font-size:clamp(16px,2vw,24px);overflow-wrap:anywhere}.menu-dialog[open] nav>a{animation:menu-in .6s var(--ease) both}.menu-dialog nav>a:nth-child(2){animation-delay:.04s}.menu-dialog nav>a:nth-child(3){animation-delay:.08s}.menu-dialog nav>a:nth-child(4){animation-delay:.12s}@keyframes menu-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0}}.project-dialog{width:min(1120px,calc(100% - 48px));max-height:90dvh;border-radius:24px;overscroll-behavior:contain}.project-toolbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;background:#fff;z-index:2;border-bottom:1px solid var(--line)}.project-toolbar h2{font-size:28px;margin-top:7px}.project-preview-wrap{background:var(--panel);padding:32px 11%;}.project-details{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:32px}.project-details>p{font-size:20px;line-height:1.4;letter-spacing:-.015em}.project-disclosure{font-size:13px;color:var(--secondary);margin-bottom:16px}.project-navigation{display:flex;justify-content:space-between;padding:20px 32px;border-top:1px solid var(--line);gap:16px}.project-navigation button{background:transparent;font-size:14px;padding:8px 0}.project-navigation button:hover{color:var(--accent)}.noscript-note{padding:20px;background:var(--butter)}
/* Only enhance content that is outside the initial viewport; no hidden-content dependency. */
.motion [data-reveal].will-reveal{opacity:0;translate:0 32px;transition:opacity .85s var(--ease),translate .85s var(--ease)}.motion [data-reveal].is-visible{opacity:1;translate:0}.motion .hero-copy{animation:menu-in 1s var(--ease) both}
@media(min-width:1600px){.hero h1{font-size:80px}}
@media(max-width:1100px){.hero{gap:28px}.hero h1{font-size:clamp(44px,5.5vw,66px)}.hero-eyebrow{margin-bottom:32px}.hero-note{margin-top:32px}.hero-actions{gap:20px}.button{padding:16px 20px}.hero-description{font-size:16px;max-width:320px}.service-card{padding:28px 24px}.service-card h3{font-size:22px}.about,.faq{gap:6%}.footer-bottom>span:last-child{display:none}.hero-eyebrow{font-size:11px}.section{padding-bottom:88px}.hero{padding-bottom:88px}}
@media(max-width:800px){.header{height:80px}.header-right{gap:24px}.hero{gap:24px;grid-template-columns:1fr 1fr;align-items:center;padding-top:16px}.hero h1{font-size:44px}.hero-description{font-size:16px}.hero-eyebrow{font-size:10px;margin-bottom:28px}.hero-actions{gap:16px;flex-wrap:wrap;margin-top:24px}.hero-note{font-size:11px;margin-top:24px}.hero-copy{padding-bottom:0}.section-head{align-items:start;margin-bottom:32px}.section-head h2{font-size:44px}.section-head .eyebrow{white-space:nowrap;padding-top:12px}.service-grid{grid-template-columns:minmax(0,1fr);gap:16px}.service-card{min-width:0}.about{gap:32px;grid-template-columns:1fr 1fr}.about-content h2{font-size:40px}.about-lead{font-size:20px}.about-photo{align-self:start}.about-body{font-size:15px}.process-row{gap:16px}.process-row p{font-size:13px}.about-content>.eyebrow{font-size:11px}.faq summary{font-size:18px}.footer-top{gap:32px}.footer-top h2{font-size:44px}.footer-contact>p{font-size:14px}.email-link{font-size:20px}.project-dialog{width:calc(100% - 32px)}}
@media(max-width:620px){:root{--gutter:16px}html{scroll-padding-top:16px}.header{height:76px}.brand{font-size:15px;gap:10px}.header-contact{display:none}.hero{grid-template-columns:1fr;gap:36px;padding-top:24px;padding-bottom:72px}.hero-copy{padding-inline:4px}.hero-eyebrow{font-size:11px;margin-bottom:28px}.hero h1{font-size:clamp(44px,11.4vw,68px);letter-spacing:-.045em;line-height:1.05}.hero-description{font-size:17px;max-width:330px;margin-top:24px}.hero-actions{gap:24px;margin-top:28px}.hero-note{font-size:12px;margin-top:24px}.section{padding-top:24px;padding-bottom:72px}h2{font-size:44px}.work-section{padding-top:32px}.section-head{margin-bottom:24px;gap:12px;flex-wrap:wrap}.section-head h2{font-size:42px;line-height:1.04}.section-head>.eyebrow{padding-top:0;font-size:11px}.work-intro{display:block;margin-bottom:28px;font-size:17px}.work-disclosure{font-size:12px;margin-top:16px}.statement{padding-top:12px;padding-bottom:72px}.statement h2{font-size:36px;line-height:1.13}.statement>p:last-child{font-size:16px}.statement .eyebrow{font-size:11px;margin-bottom:24px}.service-card{min-height:350px;padding:28px}.service-card h3{font-size:24px}.services .section-head{margin-bottom:28px}.services .section-head .link-plus{font-size:14px}.about{grid-template-columns:1fr;gap:36px}.about-photo{max-width:100%;max-height:520px}.about-photo img{height:520px;max-height:128vw;object-position:center 35%}.about-content>.eyebrow{margin-bottom:24px}.about-content h2{font-size:44px}.about-lead{font-size:24px;margin-top:24px}.about-body{font-size:16px;margin-top:16px}.process{margin-top:32px}.process-row{padding:20px 0}.process-row h3{font-size:20px}.process-row p{font-size:14px;max-width:290px}.faq{grid-template-columns:1fr;gap:32px}.faq-title{position:static}.faq-title h2 br{display:none}.faq-title h2{font-size:44px}.faq-title>.eyebrow{margin-bottom:20px}.faq-title .link-plus{margin-top:16px}.faq summary{padding:23px 0;font-size:18px}.faq details>p{font-size:15px;padding-right:24px}.footer{padding-top:40px;border-radius:24px 24px 0 0}.footer-top{grid-template-columns:1fr;gap:32px}.footer-top h2{font-size:48px}.footer-top .eyebrow{margin-bottom:24px}.footer-contact>p{font-size:16px;margin-bottom:24px}.email-link{font-size:clamp(18px,5.5vw,28px);width:100%;letter-spacing:-.025em}.copy-email{font-size:12px;min-height:44px}.footer-bottom{margin-top:40px;flex-wrap:wrap;gap:20px;font-size:11px;padding-top:24px}.footer-bottom nav{gap:24px}.footer-word{font-size:24.1vw;margin-top:48px;line-height:.9}.menu-dialog{padding:16px}.menu-dialog nav{margin:9vh 0 6vh}.menu-dialog nav>a{font-size:48px;gap:20px;padding:20px 0}.menu-dialog nav .eyebrow{font-size:10px}.menu-email{font-size:18px}.project-dialog{width:calc(100% - 20px);max-height:94dvh;border-radius:16px}.project-toolbar{padding:16px}.project-toolbar .eyebrow{font-size:10px}.project-toolbar h2{font-size:24px}.project-preview-wrap{padding:20px 12px}.project-details{grid-template-columns:1fr;gap:24px;padding:24px 20px}.project-details>p{font-size:18px}.project-navigation{padding:16px 20px}.project-navigation button{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.scrub-word{color:var(--ink)!important}}
.static{scroll-behavior:auto}.static *,.static *:before,.static *:after{animation:none!important;transition:none!important}.static .scrub-word{color:var(--ink)!important}
@media(hover:none){.service-card:hover{translate:0}}

/* Refinement: bold controls, soft surfaces and a work-led opening. */
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.ui-icon{width:20px;height:20px;display:block;flex-shrink:0;fill:currentColor}
.button,.header-contact{min-height:54px;padding:17px 26px;border-radius:16px;font-family:var(--font);font-weight:500;font-size:15px;letter-spacing:-.01em;text-transform:none;justify-content:center;gap:12px;transition:background .2s ease,color .2s ease,scale .16s var(--ease),translate .2s var(--ease)}
.button--soft{background:var(--lilac);color:var(--ink)}
.button--soft:hover{background:#ccceff;color:var(--ink)}
.button:active,.header-contact:active,.menu-toggle:active,.icon-button:active,.copy-email:active{scale:.97}
.header{height:100px}
.header-right{gap:12px}
.header-contact{display:inline-flex;align-items:center;background:var(--ink);color:#fff;min-height:48px;padding:14px 22px;font-size:14px}
.header-contact:hover{color:#fff;background:var(--accent)}
.menu-toggle{width:48px;height:48px;border-radius:16px;background:var(--panel);transition:background .2s,scale .16s}
.plus:before,.plus:after{height:2px;border-radius:2px}
.menu-toggle .plus{width:20px;height:20px}
.icon-button{background:var(--panel);border-radius:14px;transition:background .2s,scale .16s}
.link-plus:after{display:none}
.hero{display:block;padding-top:44px;padding-bottom:96px}
.hero-copy{text-align:center;padding:0}
.hero-eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;margin-bottom:28px}
.pixel-spark{display:inline-block;width:16px;height:16px;background:var(--accent);clip-path:polygon(37.5% 0,62.5% 0,62.5% 25%,75% 25%,75% 37.5%,100% 37.5%,100% 62.5%,75% 62.5%,75% 75%,62.5% 75%,62.5% 100%,37.5% 100%,37.5% 75%,25% 75%,25% 62.5%,0 62.5%,0 37.5%,25% 37.5%,25% 25%,37.5% 25%)}
.hero h1{font-size:clamp(60px,7.7vw,112px);line-height:1.015;letter-spacing:-.065em;font-weight:500;max-width:1220px;margin:auto}
.hero-title-last{display:inline-block}
.hero-description{font-size:18px;line-height:1.5;max-width:740px;margin:26px auto 0;color:var(--secondary)}
.hero-actions{justify-content:center;gap:12px;margin-top:28px}
.work-section{border-top:0;padding-top:32px}
.services .section-head{align-items:center}
.process{display:grid;gap:10px}
.process-row{border:0;background:var(--panel);border-radius:16px;padding:20px}
.process-row>span{background:#fff;border-radius:8px;display:grid;place-content:center;width:32px;height:32px;padding:0;flex-shrink:0;color:var(--ink)}

.faq-title .eyebrow{margin-bottom:24px}
.faq-list{padding-top:0;display:grid;gap:12px}
.faq details,.faq details:first-child{border:0;background:var(--panel);border-radius:20px;transition:background .2s ease}
.faq details.is-expanded{background:var(--lilac)}
.faq summary{padding:23px 24px;min-height:90px;gap:20px;letter-spacing:-.02em;font-weight:500}
.faq summary .plus{width:36px;height:36px;border-radius:12px;background:#fff;color:var(--ink);transition:background .2s ease,rotate .25s var(--ease),color .2s ease;flex-shrink:0}
.faq summary .plus:before,.faq summary .plus:after{left:10px;width:16px}
.faq details[open] summary .plus{rotate:0deg}
.faq details.is-expanded summary .plus{rotate:0deg;background:var(--ink);color:#fff}
.faq-answer{padding:0 80px 28px 24px}
.faq-answer p{font-size:16px;line-height:1.6;color:var(--secondary);opacity:0;translate:0 -6px;transition:opacity .2s ease,translate .25s var(--ease)}
.faq details.is-expanded .faq-answer p,.faq details[open]:not(.js-accordion) .faq-answer p{opacity:1;translate:0}
.footer-top{gap:56px;align-items:center}
.footer-contact>p{margin-bottom:24px}
.email-link{display:flex;width:100%;gap:18px;align-items:center;justify-content:flex-start;max-width:100%;border:0;padding:24px;background:var(--lilac);border-radius:24px;letter-spacing:0;transition:background .2s ease,scale .16s var(--ease)}
.email-link:hover{background:#ccceff;color:var(--ink)}
.email-link:active{scale:.98}
.email-link>span{margin-left:0}
.email-icon{display:grid;place-content:center;background:var(--ink);color:#fff;border-radius:16px;width:64px;height:64px;flex-shrink:0}
.email-icon .ui-icon{width:28px;height:28px}
.email-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.email-label{font-size:28px;font-weight:500;letter-spacing:-.035em;line-height:1.1}
.email-address{font-size:15px;line-height:1.4;letter-spacing:-.01em;overflow-wrap:anywhere}
.copy-email{margin-top:12px;padding:12px 16px;border-radius:12px;background:#fff;color:var(--ink);min-height:42px;transition:background .2s ease,scale .16s var(--ease)}
.copy-email:hover{color:var(--ink);background:#e5e6f1}
.footer-bottom{border:0;margin-top:56px;padding-top:16px}
.menu-dialog nav{display:grid;gap:8px}
.menu-dialog nav>a{border:0;border-radius:20px;padding:12px 24px;gap:32px;transition:background .2s ease,color .2s ease,translate .2s var(--ease)}
.menu-dialog nav>a>.eyebrow{margin-left:0!important;font-size:12px}
.menu-dialog nav>a:nth-child(1){background:var(--lilac)}
.menu-dialog nav>a:nth-child(2){background:var(--butter)}
.menu-dialog nav>a:nth-child(3){background:var(--mint)}
.menu-dialog nav>a:nth-child(4){background:var(--panel)}
.menu-dialog nav>a:hover{padding-left:24px;color:var(--ink)}
.menu-email{padding:16px 24px}
.project-toolbar,.project-navigation{border:0}
.project-navigation button{padding:12px 18px;border-radius:12px;background:var(--panel);transition:background .2s ease,scale .16s var(--ease)}
.project-navigation button:active{scale:.97}
@media(hover:hover) and (pointer:fine){.header-contact:hover,.button:hover{translate:0 -2px}.email-link:hover{translate:0 -2px}.faq summary:hover{color:var(--ink)}.faq details:not(.is-expanded):hover{background:#eaeaf4}.menu-dialog nav>a:hover{translate:6px 0}}
@media(max-width:1100px){.hero{padding-top:36px}.hero h1{font-size:clamp(64px,7.7vw,88px)}.footer-top{gap:32px}.email-link{padding:20px;gap:16px}.email-icon{width:52px;height:52px;border-radius:14px}.email-label{font-size:24px}.email-address{font-size:13px}}
@media(max-width:800px){.hero h1{font-size:62px}.hero-description{font-size:17px;max-width:570px}.faq summary{padding:20px;font-size:18px;min-height:88px}.faq-answer{padding:0 24px 24px 20px}.email-link{align-items:flex-start}.email-copy{gap:8px}.email-icon{width:40px;height:40px;border-radius:12px}.email-icon .ui-icon{width:22px;height:22px}.email-label{font-size:23px}.email-address{font-size:12px}.project-navigation button{font-size:13px}}
@media(max-width:620px){.header{height:84px}.header-contact{display:flex;min-height:42px;padding:11px 15px;font-size:12px;border-radius:13px}.header-contact .ui-icon{display:none}.header-right{gap:8px}.menu-toggle{width:42px;height:42px;border-radius:13px}.hero{padding-top:32px;padding-bottom:64px}.hero-copy{padding:0;text-align:left}.hero-eyebrow{font-size:10px;justify-content:flex-start;gap:9px;margin-bottom:24px}.pixel-spark{width:14px;height:14px}.hero h1{font-size:clamp(40px,10.65vw,66px);letter-spacing:-.055em;line-height:1.045;margin:0;max-width:500px;text-wrap:initial}.hero-title-last{max-width:100%}.hero-description{font-size:16px;line-height:1.5;max-width:370px;margin:24px 0 0}.hero-description br{display:none}.hero-actions{justify-content:flex-start;gap:10px;margin-top:24px;flex-wrap:wrap}.hero-actions .button{font-size:13px;padding:15px 18px;min-height:48px;border-radius:14px}.hero-actions .button--soft{padding-inline:16px}.hero-actions .ui-icon{width:16px;height:16px}.work-section{padding-top:24px}.services .section-head{align-items:flex-start;gap:20px}.services .section-head .button{font-size:14px;min-height:48px;padding:14px 20px}.process-row{padding:18px 16px;gap:14px}.process-row h3{font-size:19px}.process-row p{font-size:13px}.faq{gap:28px}.faq-list{gap:10px}.faq details{border-radius:18px}.faq summary{font-size:17px;min-height:84px;padding:20px;gap:16px}.faq summary .plus{width:32px;height:32px;border-radius:10px}.faq summary .plus:before,.faq summary .plus:after{left:9px;width:14px}.faq-answer{padding:0 24px 24px 20px}.faq-answer p{font-size:15px}.footer-top{gap:28px}.email-link{align-items:center;padding:22px 18px;gap:14px;border-radius:20px}.email-icon{width:46px;height:46px;border-radius:13px}.email-icon .ui-icon{width:24px;height:24px}.email-label{font-size:26px}.email-address{font-size:clamp(11px,3.25vw,15px);line-height:1.4}.copy-email{font-size:11px;min-height:42px;padding:12px 14px}.footer-bottom{margin-top:40px}.menu-dialog nav>a{font-size:42px;gap:20px;padding:18px 20px;border-radius:18px}.menu-dialog nav>a:hover{padding-left:20px}.menu-dialog nav>a>.eyebrow{font-size:10px}.menu-email{padding:16px 20px;font-size:16px}.project-details .button{font-size:14px}.project-navigation{padding:16px}.project-navigation button{font-size:12px;padding:12px 14px}}
@media(max-width:360px){.brand{font-size:13px;gap:8px}.header-contact{padding:11px 12px;font-size:11px}.hero h1{font-size:38px}.hero-actions{gap:8px}.hero-actions .button{font-size:12px;padding:14px 15px}.hero-actions .button--soft{padding-inline:13px}.hero-eyebrow{font-size:9px}.email-link{padding:20px 14px;gap:10px}.email-icon{width:38px;height:38px}.email-label{font-size:24px}.email-address{font-size:11px}}
@media(prefers-reduced-motion:reduce){.faq-answer p{translate:0;transition:none}}

/* Theme surfaces keep the original light palette; concept artwork keeps its own colours. */
:root {
  color-scheme: light;
  --surface: #fff;
  --button-bg: #1c1c1e;
  --button-ink: #fff;
  --button-hover: #2f45ff;
  --soft-hover: #ccceff;
  --panel-hover: #eaeaf4;
  --copy-hover: #e5e6f1;
  --menu-bg: rgba(255,255,255,.96);
  --footer-bg: #f1f2f4;
  --timber-panel: #e4e9e1;
  --salon-panel: #ece3f0;
  --electric-panel: #dbe6ff;
  --scrub-rest: #a1a5af;
  --service-design: #b2c5ff;
  --service-build: #ffdf80;
  --service-copy: #9be6c6;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080808;
  --ink: #f5f5f5;
  --secondary: #b0b0b0;
  --panel: #171717;
  --line: #303030;
  --surface: #252525;
  --accent: #a8c7ff;
  --lilac: #1d1d1d;
  --butter: #1d1d1d;
  --mint: #1d1d1d;
  --button-bg: #f5f5f5;
  --button-ink: #080808;
  --button-hover: #dcdcdc;
  --soft-hover: #2c2c2c;
  --panel-hover: #242424;
  --copy-hover: #353535;
  --menu-bg: rgba(8,8,8,.97);
  --footer-bg: #101010;
  --timber-panel: #181818;
  --salon-panel: #181818;
  --electric-panel: #181818;
  --scrub-rest: #787878;
}
::selection { background: #2f45ff; color: #fff; }
.button:not(.button--soft), .header-contact, .skip-link, .email-icon,
.faq details.is-expanded summary .plus{
  background: var(--button-bg);
  color: var(--button-ink);
}
.button:not(.button--soft):hover, .header-contact:hover { background: var(--button-hover); color: var(--button-ink); }
.button--soft:hover, .email-link:hover { background: var(--soft-hover); }
.process-row>span, .faq summary .plus, .copy-email { background: var(--surface); }
.faq details.is-expanded summary .plus { background: var(--button-bg); }
.copy-email:hover { background: var(--copy-hover); }
.motion .scrub-word { color: color-mix(in srgb, var(--ink) calc(var(--fill,0) * 100%), var(--scrub-rest)); }
.footer { background: var(--footer-bg); }
.menu-dialog { background: var(--menu-bg); }
.project-dialog, .project-toolbar { background: var(--bg); }
.preview { color-scheme: light; }
.header-contact .header-contact-label { padding: 0; }
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  transition: background .2s ease, scale .16s var(--ease);
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:active { scale: .94; }
.theme-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  transition: opacity .18s ease, rotate .24s var(--ease), scale .24s var(--ease);
}
.theme-icon--sun { opacity: 0; rotate: -45deg; scale: .5; }
[data-theme="dark"] .theme-icon--moon { opacity: 0; rotate: 45deg; scale: .5; }
[data-theme="dark"] .theme-icon--sun { opacity: 1; rotate: 0deg; scale: 1; }
.theme-changing :where(body,
  .hero-description, .button, .header-contact, .menu-toggle, .theme-toggle,
  
  .work-disclosure, .service-card, .pixel-icon, .process-row,
  .about-body, .faq details, .faq summary .plus, .faq-answer p, .footer,
  .email-link, .email-icon, .copy-email, .footer-bottom, .footer-word>span,
  .menu-dialog, .menu-dialog nav>a, .project-dialog, .project-toolbar) {
  transition: background-color .24s ease, color .24s ease, fill .24s ease;
}

/* Webrigg: a text-only wordmark, shared by header and menu. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 11px; }
.brand-name { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.055em; }
.footer-word { font-size: clamp(100px, 22.8vw, 346px); letter-spacing: -.065em; }
.footer-word .brand-pixel { display: inline-block; width: .08em; height: .08em; margin-left: .035em; background: var(--accent); }
@media (max-width:620px) {
  .brand { gap: 9px; }
  .brand-name { font-size: 28px; }
}
@media (max-width:360px) {
  .brand { gap: 7px; }
  .brand-name { font-size: 22px; }
}
@media (hover:hover) and (pointer:fine) {
  .theme-toggle:hover, .menu-toggle:hover, .icon-button:hover,
  .faq details:not(.is-expanded):hover { background: var(--panel-hover); }
}
@media (max-width:620px) {
  .theme-toggle { width: 42px; height: 42px; border-radius: 13px; }
  .header-contact { width: 42px; height: 42px; min-height: 42px; padding: 0; }
  .header-contact .header-contact-label { display: none; }
  .header-contact .ui-icon { display: block; width: 18px; height: 18px; }
}

/* The same pixel vocabulary in navigation, section labels and service cards. */
.eyebrow, .service-number{
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: .015em;
  text-transform: none;
}
.section-heading { min-width: 0; }
.section-heading>.eyebrow { color: var(--secondary); margin-bottom: 20px; padding: 0; }
.section-head:has(.section-heading) { align-items: end; }
.work-intro>p:first-child { max-width: 580px; }
.hero-description { max-width: 660px; }
.ui-icon { width: 24px; height: 24px; }
.plus:before, .plus:after { height: 3px; border-radius: 0; }
.service-card {
  background: var(--service-design);
  color: #171717;
  min-height: 400px;
}
.service-card:nth-child(2) { background: var(--service-build); }
.service-card:nth-child(3) { background: var(--service-copy); }
.service-number { font-size: 12px; }
.service-card .pixel-icon { width: 70px; height: 70px; fill: currentColor; margin: 38px 0 44px; }
.service-card h3 { max-width: 310px; }
.service-card p { max-width: 330px; }
.footer-contact>p { max-width: 460px; }
.footer-bottom>span:last-child { font-family: var(--mono); font-size: 10px; }
@media (max-width:800px) {
  .section-heading>.eyebrow { font-size: 11px; }
  .service-card { min-height: 390px; }
}
@media (max-width:620px) {
  .section-heading>.eyebrow { margin-bottom: 18px; }
  .service-number { font-size: 11px; }
  .service-card .pixel-icon { width: 63px; height: 63px; }
  .work-intro>p:first-child br { display: none; }
  .project-details .button { font-size: 13px; }
}
.cover-label {
  position: absolute;
  top: 24px;
  left: 24px;
  background: #f8f8f2;
  color: #232820;
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
}
.concept-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 10px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 13px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  transition: background-color .2s ease, color .2s ease, scale .2s var(--ease);
}
.concept-action .ui-icon { width: 18px; height: 18px; }

.concept-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.concept-card { display: block; width: 100%; min-width: 0; padding: 0; background: none; border-radius: 24px; text-align: left; }
.concept-cover { display: block; position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 24px; background: var(--panel); }
.concept-cover>img { width: 100%; height: 100%; transition: scale .65s var(--ease); }
.concept-cover--timber>img { object-position: 58% center; }
.concept-cover--salon>img { object-position: 65% center; }
.concept-cover--electric>img { object-position: 14% center; }
.concept-cover .cover-label { top: 20px; left: 20px; font-size: 10px; }
.concept-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 0; }
.concept-title-group { display: flex; flex-direction: column; gap: 5px; }
.concept-name { font-size: 32px; line-height: 1; letter-spacing: -.04em; }
.concept-category { font-size: 13px; line-height: 1.4; color: var(--secondary); }
.project-preview-wrap { padding: 32px; }
.project-preview-wrap>.preview { max-width: 980px; margin-inline: auto; border-radius: 12px; }
.theme-changing :where(.concept-cover, .concept-action, .concept-category) {
  transition: background-color .24s ease, color .24s ease;
}
@media (hover:hover) and (pointer:fine) {
  .concept-card:hover .concept-cover>img { scale: 1.035; }
  .concept-card:hover .concept-action { background: var(--button-bg); color: var(--button-ink); }
}
.concept-card:focus-visible .concept-action { background: var(--button-bg); color: var(--button-ink); } .concept-card:active .concept-action { scale: .96; }
@media (max-width:1100px) {
  .concept-gallery { gap: 20px; }
  .concept-caption { align-items: flex-start; flex-direction: column; gap: 16px; }
}
@media (max-width:900px) {
  .concept-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .concept-card:first-child { grid-column: 1 / -1; }
  .concept-card:first-child .concept-cover { aspect-ratio: 1.9; }
  .concept-caption { flex-direction: row; align-items: center; }
  .concept-caption .concept-action { padding-inline: 12px; font-size: 12px; gap: 8px; }
  .concept-category { font-size: 12px; }
}
@media (max-width:620px) {
  .cover-label { top: 16px; left: 16px; padding: 8px 10px; font-size: 10px; }
  .concept-gallery { grid-template-columns: 1fr; gap: 36px; }
  .concept-card:first-child { grid-column: auto; }
  .concept-cover, .concept-card:first-child .concept-cover { aspect-ratio: 1.12; border-radius: 22px; }
  .concept-cover .cover-label { top: 16px; left: 16px; }
  .concept-caption { padding-top: 16px; gap: 12px; }
  .concept-name { font-size: 30px; }
  .concept-category { font-size: 12px; }
  .project-preview-wrap { padding: 16px 12px; }
}
@media (max-width:360px) {
}

/* A concise, type-led hero with the shared pixel vocabulary. */
.hero { padding-top: 68px; padding-bottom: 92px; }
.hero h1 { max-width: 1280px; font-size: clamp(60px, 7.4vw, 106px); }
.hero-description { max-width: 650px; }
.hero-assurances { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 32px; margin-top: 46px; color: var(--secondary); font-size: 13px; }
.hero-assurances>span { display: inline-flex; align-items: center; gap: 10px; }
.hero-assurances .ui-icon { width: 15px; height: 15px; color: var(--ink); }
.work-section .section-heading { max-width: 920px; }

/* Device covers are shown whole, so laptop and phone stay visible at every width. */
.concept-gallery { grid-template-columns: 1fr; gap: 44px; }
.concept-card { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, .8fr); gap: 48px; align-items: center; }
.concept-card:first-child { grid-column: auto; }
.concept-cover, .concept-card:first-child .concept-cover { aspect-ratio: 3/2; border-radius: 24px; }
.concept-cover>img { object-fit: cover; object-position: center; }
.concept-caption { display: flex; align-items: flex-start; flex-direction: column; gap: 28px; padding: 0; }
.concept-title-group { gap: 12px; }
.concept-name { font-size: clamp(36px, 3.5vw, 52px); }
.concept-category { font-size: 16px; }
.concept-summary { display: block; max-width: 300px; font-size: 17px; line-height: 1.5; color: var(--secondary); }
.concept-action { background: var(--button-bg); color: var(--button-ink); padding-inline: 20px; min-height: 50px; }
@media (hover:hover) and (pointer:fine) {
  .concept-card:hover .concept-cover>img { scale: 1.015; }
  .concept-card:hover .concept-action { background: var(--button-hover); }
}

/* Inquiry form with a clear next step and calm validation states. */
.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 112px); align-items: start; padding-top: 16px; }
.contact-intro { padding-top: 16px; }
.contact-intro>.eyebrow { margin-bottom: 28px; color: var(--secondary); }
.contact-intro h2 { font-size: clamp(42px, 4.5vw, 64px); line-height: 1.06; }
.contact-lead { font-size: 22px; line-height: 1.45; margin-top: 28px; max-width: 450px; }
.contact-next { font-size: 16px; line-height: 1.6; color: var(--secondary); margin-top: 20px; max-width: 430px; }
.contact-form { background: var(--bg); padding: 36px; border-radius: 28px; }
.form-fields { display: grid; gap: 24px; }
.form-fields[hidden] { display: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: grid; gap: 9px; min-width: 0; }
.form-field>label, .project-types legend { font-size: 14px; font-weight: 500; }
.optional { color: var(--secondary); font-weight: 400; font-size: 12px; }
.form-field input, .form-field textarea { width: 100%; min-width: 0; border: 0; border-radius: 13px; padding: 16px; background: var(--panel); color: var(--ink); font: inherit; line-height: 1.5; box-shadow: inset 0 0 0 2px transparent; transition: background .2s, box-shadow .2s; }
.form-field textarea { resize: vertical; min-height: 144px; max-height: 500px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--secondary); opacity: 1; font-size: 14px; }
.form-field input:focus, .form-field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.form-field input:user-invalid, .form-field textarea:user-invalid { box-shadow: inset 0 0 0 2px #c53c31; }
.project-types { padding: 0; margin: 0; border: 0; min-width: 0; }
.project-types legend { margin-bottom: 12px; padding: 0; }
.project-type-options { display: flex; flex-wrap: wrap; gap: 8px; }
.project-type-options>label { position: relative; cursor: pointer; }
.project-type-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.project-type-options label>span { display: block; padding: 12px 15px; min-height: 44px; border-radius: 12px; background: var(--panel); font-size: 13px; transition: background .2s, color .2s; }
.project-type-options input:checked+span { background: var(--button-bg); color: var(--button-ink); }
.project-type-options input:focus-visible+span { outline: 3px solid var(--accent); outline-offset: 3px; }
.form-submit { width: 100%; justify-content: center; min-height: 58px; }
.button .submit-label { font: inherit; line-height: inherit; }
.form-note { font-size: 12px; line-height: 1.6; color: var(--secondary); margin-top: -10px; }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.theme-changing :where(.contact-form, .form-field input, .form-field textarea, .project-type-options label>span) { transition: background-color .24s ease, color .24s ease; }
@media (max-width:1000px) {
  .contact-layout { gap: 36px; grid-template-columns: .85fr 1.15fr; }
  .contact-form { padding: 28px; }
  .form-row { grid-template-columns: 1fr; gap: 24px; }
  .contact-intro h2 { font-size: 44px; }
  .concept-card { grid-template-columns: minmax(0, 1.5fr) minmax(220px, .8fr); gap: 28px; }
  .concept-summary { font-size: 15px; }
}
@media (max-width:760px) {
  .hero { padding-top: 52px; padding-bottom: 72px; }
  .hero h1 { font-size: clamp(40px, 8.1vw, 62px); }
  .hero-assurances { gap: 16px 24px; font-size: 12px; }
  .concept-card { grid-template-columns: 1fr; gap: 20px; }
  .concept-caption { display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; }
  .concept-summary { grid-row: 2; grid-column: 1 / -1; max-width: 500px; }
  .concept-caption .concept-action { grid-column: 2; grid-row: 1; }
  .concept-name { font-size: 34px; }
  .concept-category { font-size: 14px; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 0; }
  .contact-intro { padding-top: 0; }
  .contact-intro h2 { font-size: 46px; max-width: 550px; }
  .contact-lead { max-width: 550px; }
  .contact-next { max-width: 550px; }
  .form-row { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width:620px) {
  .hero { padding-top: 36px; padding-bottom: 64px; }
  .hero h1 { font-size: clamp(38px, 9vw, 56px); }
  .hero h1 br { display: none; }
  .hero-title-last { display: inline; }
  .hero-assurances { align-items: flex-start; flex-direction: column; gap: 13px; margin-top: 30px; }
  .hero-description { margin-top: 22px; }
  .concept-gallery { gap: 36px; }
  .concept-cover, .concept-card:first-child .concept-cover { aspect-ratio: 3/2; border-radius: 18px; }
  .concept-cover .cover-label { font-size: 9px; left: 12px; top: 12px; padding: 7px 9px; }
  .concept-caption { gap: 12px; }
  .concept-title-group { gap: 7px; }
  .concept-category { font-size: 12px; }
  .concept-summary { font-size: 15px; }
  .work-section .section-heading h2 { font-size: 42px; }
  .contact-intro h2 { font-size: 42px; }
  .contact-lead { font-size: 20px; margin-top: 24px; }
  .contact-next { font-size: 15px; margin-top: 16px; }
  .contact-form { padding: 24px 20px; border-radius: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .form-fields { gap: 20px; }
  .project-type-options { gap: 6px; }
  .project-type-options label>span { padding: 11px 12px; font-size: 12px; }
  .form-field input, .form-field textarea { font-size: 16px; padding: 14px; }
}

/* Shared pixel details: email control and centered FAQ toggle. */
.contact-email-row { position: relative; display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin-top: 30px; padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--bg); }
.contact-email { display: inline-flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; color: var(--ink); font-size: 15px; }
.contact-email>.ui-icon { width: 22px; height: 22px; flex-shrink: 0; }
.contact-email>span { overflow-wrap: anywhere; }
.email-copy-button { position: relative; flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--panel); color: var(--ink); transition: background .18s ease, scale .16s var(--ease); }
.email-copy-button .ui-icon { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .16s ease, scale .16s var(--ease); }
.copied-glyph { opacity: 0; scale: .75; }
.email-copy-button[data-copied="true"] .copy-glyph { opacity: 0; scale: .75; }
.email-copy-button[data-copied="true"] .copied-glyph { opacity: 1; scale: 1; }
.email-copy-button:active { scale: .94; }
.email-copy-feedback { position: absolute; top: calc(100% + 6px); right: 4px; font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--secondary); }

.faq summary .plus { display: grid; place-items: center; }
.faq summary .plus::before, .faq summary .plus::after { position: static; grid-area: 1 / 1; inset: auto; width: 16px; height: 3px; transition: rotate .2s var(--ease); }
.faq details.is-expanded summary .plus::before { rotate: 45deg; }
.faq details.is-expanded summary .plus::after { rotate: 135deg; }
@media (hover:hover) and (pointer:fine) {
  .email-copy-button:hover { background: var(--copy-hover); }
  .contact-email:hover { color: var(--accent); }
}
@media (max-width:620px) {
  .hero-assurances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 34px; max-width: 480px; }
  .hero-assurances>span { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 11px; line-height: 1.5; }
  .hero-assurances .assurance-text { max-width: 125px; text-wrap: balance; }
  .hero-assurances .ui-icon { width: 14px; height: 14px; flex-shrink: 0; }
  .contact-email-row { gap: 8px; padding-left: 12px; margin-top: 24px; }
  .contact-email { gap: 9px; font-size: 14px; }
  
}
@media (max-width:360px) {
  .contact-email { font-size: 12px; gap: 7px; }
  .contact-email>.ui-icon { width: 18px; height: 18px; }
  .contact-email-row { gap: 6px; padding-left: 10px; }
  .hero-assurances { gap: 12px; }
  .hero-assurances>span { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .email-copy-button, .email-copy-button .ui-icon { transition: none; }
}

.assurance-break { display: none; }
@media (max-width:620px) { .assurance-break { display: initial; } }

/* One centered plus construction for the menu and dialog controls. */
.menu-toggle, .menu-close { padding: 0; }
.menu-toggle .plus, .icon-button .plus { display: grid; place-items: center; width: 20px; height: 20px; }
.menu-toggle .plus::before, .menu-toggle .plus::after,
.icon-button .plus::before, .icon-button .plus::after { position: static; grid-area: 1 / 1; inset: auto; width: 20px; height: 3px; transition: rotate .2s var(--ease); }
.menu-toggle[aria-expanded="true"] .plus::before, .menu-dialog.is-open .menu-close .plus::before { rotate: 45deg; }
.menu-toggle[aria-expanded="true"] .plus::after, .menu-dialog.is-open .menu-close .plus::after { rotate: 135deg; }
.menu-dialog { padding-top: 26px; }
.menu-close { background: var(--panel); }
.menu-dialog.instant-menu .plus::before, .menu-dialog.instant-menu .plus::after { transition: none; }
.service-card .pixel-icon { width: 72px; height: 72px; }
.pixel-eye { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; }
.concept-action .pixel-eye>.ui-icon { grid-area: 1 / 1; width: 22px; height: 22px; transform-origin: center; }
.eye-closed { opacity: 0; }
@keyframes eye-blink-open {
  0%, 12%, 100% { transform: scaleY(1); opacity: 1; }
  36%, 54% { transform: scaleY(.1); opacity: 0; }
}
@keyframes eye-blink-closed {
  0%, 23%, 70%, 100% { opacity: 0; }
  36%, 54% { opacity: 1; }
}
@media (hover:hover) and (pointer:fine) {
  .motion .concept-card:hover .eye-open { animation: eye-blink-open .48s cubic-bezier(.4,0,.2,1); }
  .motion .concept-card:hover .eye-closed { animation: eye-blink-closed .48s cubic-bezier(.4,0,.2,1); }
}
@keyframes pixel-spark-turn {
  0%, 64% { transform: rotate(0deg) scale(1); }
  77% { transform: rotate(90deg) scale(.8); }
  92%, 100% { transform: rotate(180deg) scale(1); }
}
.motion .pixel-spark { animation: pixel-spark-turn 5.5s cubic-bezier(.65,0,.35,1) infinite; }
@media (max-width:620px) {
  .menu-dialog { padding-top: 21px; }
  .menu-close { width: 42px; height: 42px; border-radius: 13px; }
  .service-card .pixel-icon { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion:reduce) {
  .pixel-spark, .eye-open, .eye-closed { animation: none !important; }
  .menu-toggle .plus::before, .menu-toggle .plus::after,
  .icon-button .plus::before, .icon-button .plus::after { transition: none; }
}