/* Substance Digital — light studio review. Structural styles are shared by the home, project, service, pricing and policy pages. */
:root { --ink:#14182d; --sub:#53586b; --blue:#3256cd; --blue-dark:#233e9d; --navy:#182248; --mist:#f3f5ff; --lavender:#e6ebff; --line:#dfe3ee; --white:#fff; --gutter:clamp(1.2rem,4.8vw,4.5rem); --shell:83rem; --type:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-padding-top:6.25rem; }
body { margin:0; color:var(--ink); background:#fff; font:500 1rem/1.58 var(--type); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,p,figure,dl,dd { margin:0; }
h1,h2,h3,h4 { font-weight:700; color:var(--ink); line-height:1.04; letter-spacing:-.052em; text-wrap:balance; }
h1 { font-size:clamp(3.15rem,5.9vw,5.8rem); }h2 { font-size:clamp(2.3rem,3.7vw,3.75rem); }h3 { font-size:clamp(1.35rem,2.15vw,2.1rem); }
h1 em,h2 em { font-style:normal; color:var(--blue); }
p { text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }button { cursor:pointer; }
svg { display:block; width:1.15rem; height:1.15rem; flex:0 0 auto; }
img { display:block; max-width:100%; }
[hidden] { display:none!important; }
::selection { background:#d1dcff; color:var(--navy); }
:focus-visible { outline:3px solid #5b79d9; outline-offset:4px; }
#main:focus { outline:none; }
.sr-only,.skip:not(:focus),.honey { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip:focus { position:fixed; z-index:60; top:.4rem; left:1rem; padding:.6rem .9rem; color:white; background:var(--blue); }
.shell { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow { display:flex; align-items:center; gap:.55rem; color:var(--blue); font-size:.68rem; line-height:1.45; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow + :is(h1,h2) { margin-top:.85rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; width:fit-content; min-height:2.95rem; padding:.78rem 1.35rem; border:1px solid var(--blue); border-radius:9rem; color:white; background:var(--blue); text-align:center; font-size:.84rem; font-weight:700; line-height:1.3; }
.button:hover { background:var(--blue-dark); border-color:var(--blue-dark); }
.button.outline,.button.secondary { color:var(--ink); background:white; border-color:#cbd0df; }
.button.outline:hover,.button.secondary:hover { border-color:var(--blue); color:var(--blue); }
.button svg,.textlink svg,.price-link svg { width:1rem; height:1rem; transition:transform .2s ease; }.button:hover svg:last-child,.textlink:hover svg,.price-link:hover svg { transform:translateX(3px); }
.textlink,.servicecard>a,.website-secondary { display:inline-flex; align-items:center; gap:.48rem; min-height:2.75rem; color:var(--blue); font-size:.85rem; font-weight:700; }
.textlink:hover,.servicecard>a:hover,.website-secondary:hover { text-decoration:underline; text-underline-offset:.25em; }
.actions { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }
.topbar { position:sticky; top:0; z-index:12; background:#fffffff5; border-bottom:1px solid var(--line); }
.nav-shell { min-height:4.85rem; display:flex; align-items:center; gap:clamp(1rem,4vw,4rem); }
.brand { display:inline-flex; width:fit-content; align-items:center; }
.wordmark,.art-wordmark { display:inline-block; color:var(--navy); font-family:'Helvetica Neue',Arial,sans-serif; font-weight:800; font-size:1.56rem; letter-spacing:-.085em; line-height:.79; }
.wordmark span { color:var(--blue); }.nav-shell>.brand { margin-right:auto; }
#site-nav { display:flex; align-items:center; gap:clamp(.75rem,2.2vw,2.25rem); }
#site-nav>a { display:inline-flex; align-items:center; min-height:2.7rem; font-size:.84rem; font-weight:620; color:#3f4459; }
#site-nav>a:hover,#site-nav>a[aria-current] { color:var(--blue); }
.nav-actions { display:flex; align-items:center; gap:.45rem; }
.nav-actions .button { min-height:2.62rem; padding:.7rem 1.1rem; }.nav-actions .button svg { width:.9rem; height:.9rem; }
.menu { display:none; }
.home-section { padding-block:clamp(3.8rem,6.7vw,6.8rem); }
.hero { background:linear-gradient(130deg,#fff 52%,#f6f8ff 100%); }
.hero-shell { display:grid; grid-template-columns:minmax(0,1.17fr) minmax(0,.86fr); align-items:center; gap:clamp(2rem,5.6vw,6rem); padding-block:clamp(3rem,5.2vw,5.6rem); }
.hero-copy { max-width:43rem; }
.hero-copy .eyebrow { width:fit-content; }
.status-dot { position:relative; width:.44rem; height:.44rem; background:var(--blue); border-radius:50%; box-shadow:0 0 0 4px #e7ebfd; margin-right:.25rem; }
.hero-copy h1 { margin-top:1.25rem; font-size:clamp(3.55rem,5.2vw,5.6rem); letter-spacing:-.056em; line-height:1.005; text-wrap:initial; }
.hero-copy h1>span { color:var(--blue); }
.hero-copy>p { max-width:36rem; margin:1.25rem 0 1.55rem; color:var(--sub); font-size:clamp(1.02rem,1.26vw,1.23rem); line-height:1.62; }
.price-link { display:inline-flex; align-items:center; gap:.65rem; margin-top:1.55rem; padding:.58rem .85rem; border:1px solid var(--line); border-radius:9rem; background:white; }
.price-link>span:first-child { display:grid; place-items:center; width:1.85rem; height:1.85rem; border-radius:50%; color:var(--blue); background:var(--lavender); font-weight:750; }
.price-link>span:nth-child(2) { display:grid; } .price-link strong { font-size:.75rem; line-height:1.35; }.price-link small { color:var(--sub); font-size:.62rem; line-height:1.4; }.price-link svg { margin-left:.35rem; color:var(--blue); }
.brief-card { position:relative; padding:clamp(1.3rem,2.6vw,2.4rem); border-radius:1.65rem; border:1px solid #dce1f3; background:white; box-shadow:-.55rem -.55rem 0 #edf0ff,0 10px 35px #1722450a; scroll-margin-top:6rem; }
.brief-title { display:flex; align-items:center; gap:.55rem; }.brief-icon { display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:.65rem; background:var(--lavender); color:var(--blue); }.brief-icon svg { width:1.05rem; }
.brief-card h2 { margin:.65rem 0 .35rem; font-size:clamp(1.65rem,2.35vw,2.45rem); letter-spacing:-.052em; line-height:1.1; }
.brief-card>p { color:var(--sub); font-size:.84rem; line-height:1.5; }
.brief-card form { display:grid; gap:.7rem; margin-top:1.1rem; }
.brief-card label,.field label { display:grid; gap:.28rem; color:#31384d; font-size:.76rem; font-weight:650; }
input:not([type='checkbox']):not([type='radio']),select,textarea { width:100%; min-width:0; border:1px solid #cbd1df; border-radius:.55rem; background:white; color:var(--ink); padding:.62rem .75rem; font-size:.9rem; font-weight:500; line-height:1.4; }
textarea { min-height:4.1rem; resize:vertical; }.brief-card ::placeholder { color:#788092; }.brief-card select { min-height:2.57rem; }
.whatsapp-btn { width:100%; min-height:2.85rem; margin-top:.1rem; }.whatsapp-btn>svg:first-child { width:1.05rem; height:1.05rem; }
.service-tape { overflow:hidden; color:white; background:var(--blue); }
.tape-track,.tape-track>div { display:flex; width:max-content; align-items:center; }
.tape-track>div { gap:1.5rem; padding:1.1rem .75rem; }
.tape-track span,.tape-track i { white-space:nowrap; font-size:.7rem; font-weight:750; line-height:1; text-transform:uppercase; letter-spacing:.12em; }.tape-track i { color:#b8c8ff; font-style:normal; font-size:.84rem; }
@media (prefers-reduced-motion:no-preference) { .tape-track { animation:ticker 49s linear infinite; } .service-tape:hover .tape-track,.service-tape:focus-within .tape-track { animation-play-state:paused; } @keyframes ticker { to { transform:translateX(-50%); } } }
.intro-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.studio-art { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:clamp(17rem,25vw,25rem); padding:clamp(1.3rem,2.7vw,2.8rem); border-radius:1.3rem; color:#e5eaff; background:radial-gradient(ellipse at 110% 112%,#6c8aff 0%,#3e5ed6 33%,#283f9d 61%,#1b2c69 100%); }
.studio-art-label,.studio-art-base { position:relative; display:flex; justify-content:space-between; gap:.5rem; font-size:.59rem; font-weight:650; letter-spacing:.15em; text-transform:uppercase; }
.art-orbit { position:absolute; inset:0; z-index:-1; background:repeating-radial-gradient(ellipse at 105% 78%,transparent 0 19px,#ffffff21 20px 21px,transparent 22px 34px); mask-image:linear-gradient(110deg,transparent 5%,black 78%); }
.art-wordmark { color:white; font-size:clamp(3.3rem,5.6vw,6.1rem); }.art-wordmark span { color:#b6c9ff; }
.intro-layout>div>p,.signpost-inner p,.contact-home p { color:var(--sub); font-size:clamp(.97rem,1.2vw,1.13rem); line-height:1.65; max-width:38rem; margin-top:1rem; }
.ticks { padding:0; margin:1.1rem 0 .3rem; list-style:none; }.ticks li { display:flex; gap:.6rem; align-items:baseline; font-size:.9rem; padding:.18rem 0; }.ticks li::before { content:'✓'; color:var(--blue); font-weight:750; }
.featured,.pricing-signpost { background:var(--mist); }
.section-title-row { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1.1rem; margin-bottom:clamp(1.6rem,3vw,2.8rem); }
.workgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.05vw,2rem); }
.workcard { min-width:0; padding:.62rem; border:1px solid var(--line); background:white; border-radius:1.15rem; transition:border-color .23s ease,box-shadow .23s ease; }
.workcard:hover { border-color:#9dadf0; box-shadow:0 7px 20px #243d7a0c; }.workcard>a { display:block; height:100%; }
.device-stage { position:relative; isolation:isolate; overflow:hidden; aspect-ratio:1.75; border-radius:.8rem; background:linear-gradient(135deg,#d7dcf4,#b9c3eb); }
.color-hannah { background:linear-gradient(125deg,#e5cddf,#e9ddfa); }.color-premier { background:linear-gradient(130deg,#dee4f0,#c7d9d7); }.color-studio { background:linear-gradient(130deg,#dde5fc,#bfcbef); }
.desktop-device { position:absolute; left:7.1%; top:12%; width:74%; overflow:hidden; border:3px solid #27303e; border-radius:.5rem; box-shadow:0 12px 20px #1c284a26; background:#232b3e; }
.chrome-rail { display:flex; align-items:center; gap:3px; height:.55rem; padding:0 .35rem; background:#27303e; }.chrome-rail i { width:3px; height:3px; border-radius:100%; background:#8b93a1; }
.desktop-device img { width:100%; height:auto; }.phone-device { position:absolute; right:6.5%; bottom:5.8%; width:21%; overflow:hidden; border:3px solid #202734; border-radius:clamp(.37rem,.8vw,.8rem); background:#202734; box-shadow:0 8px 17px #1c284a3a; }.phone-device img { width:100%; height:auto; }
.workimage { overflow:hidden; aspect-ratio:1.75; border-radius:.8rem; background:#e5e9f4; }.workimage img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.workcardcopy { padding:clamp(.82rem,1.7vw,1.55rem) clamp(.55rem,1.35vw,1.2rem) .6rem; }.workmeta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.6rem; }.workmeta span { display:block; color:var(--sub); font-size:.66rem; font-weight:650; }.workmeta span+span { padding:.16rem .56rem; color:#315197; border-radius:6rem; background:#eff3ff; }
.workcardcopy h3 { font-size:clamp(1.45rem,2.23vw,2.25rem); }.workcardcopy p { margin:.5rem 0 .15rem; color:var(--sub); font-size:.88rem; line-height:1.55; }
.processgrid,.servicegrid { display:grid; gap:1rem; }
.processgrid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:1.65rem; }
.processgrid article,.servicecard { min-width:0; padding:clamp(1.1rem,2.1vw,2.1rem); border:1px solid var(--line); border-radius:1.05rem; background:#fff; }
.number { display:inline-grid; place-items:center; width:2rem; height:2rem; color:var(--blue); background:var(--lavender); border-radius:50%; font-size:.67rem; font-weight:750; }
.processgrid h3,.servicecard h3 { font-size:clamp(1.25rem,1.72vw,1.72rem); margin:1rem 0 .55rem; }
.processgrid p,.servicecard p { color:var(--sub); font-size:.9rem; line-height:1.6; }
.process-block { padding-bottom:0; }.servicegrid { grid-template-columns:repeat(3,minmax(0,1fr)); }.servicecard { display:flex; flex-direction:column; }.servicecard:last-child:nth-child(3n+1) { grid-column:1/-1; display:grid; grid-template-columns:auto minmax(7rem,.55fr) 1.4fr auto; gap:1.2rem; align-items:center; }.servicecard:last-child:nth-child(3n+1)>* { margin:0; }.servicecard>a { margin-top:auto; padding-top:.55rem; width:fit-content; }
.signpost-inner,.contact-home { display:flex; justify-content:space-between; align-items:center; gap:2rem; }.signpost-inner>div,.contact-home>div:first-child { flex:1; }.signpost-inner>div { max-width:45rem; }.contact-links { display:grid; gap:.45rem; }.contact-links .button { margin-bottom:.3rem; }.contact-links>a:not(.button) { font-size:.94rem; color:var(--sub); }
.site-footer { padding-block:clamp(2.8rem,4.5vw,4.6rem) 1.2rem; color:#e3e8fa; background:var(--navy); }.site-footer .brand .wordmark { color:#fff; font-size:1.95rem; }.site-footer .wordmark span { color:#adc1ff; }.foot-grid { display:grid; grid-template-columns:1.15fr .7fr 1fr 1.25fr; gap:clamp(1.2rem,3vw,3.35rem); }.foot-grid>div { min-width:0; }.foot-grid h2 { color:#b5c6ff; font-size:.75rem; font-weight:700; letter-spacing:.01em; margin-bottom:.65rem; }.foot-grid p,.foot-grid a:not(.brand) { color:#e3e8fa; font-size:.82rem; }.foot-grid p { max-width:15rem; margin-top:.8rem; }.foot-grid a:not(.brand) { display:flex; gap:.4rem; align-items:center; width:fit-content; min-height:1.8rem; overflow-wrap:anywhere; }.foot-grid svg { width:.8rem; }.site-footer a:hover { text-decoration:underline; text-underline-offset:.2rem; }.foot-base { display:flex; justify-content:space-between; gap:1rem; align-items:center; border-top:1px solid #ffffff32; padding-top:1rem; margin-top:2rem; color:#c0c9e3; font-size:.68rem; }.foot-base>div { display:flex; gap:.8rem; }
/* Existing service briefs, work pages, detailed prices and legal notices. */
.interior { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.interior>.pagehead,.website-hero { position:relative; padding-block:clamp(3.1rem,6vw,6.4rem) clamp(2.4rem,4.7vw,5rem); }
.pagehead::before,.website-hero::before { content:''; position:absolute; z-index:-1; inset:0 calc(-1 * var(--gutter)); background:linear-gradient(125deg,#f6f8ff 0%,#fff 82%); }
.pagehead h1,.website-hero h1 { max-width:55rem; }.pagehead .lead,.website-hero .lead { max-width:48rem; font-size:clamp(1.02rem,1.3vw,1.23rem); color:var(--sub); margin-top:1.15rem; }.pagehead>.button,.website-hero .hero-actions { margin-top:1.4rem; }
.interior>.section,.interior>.work-section,.interior>.website-comparison,.interior>.bodycopy,.interior>.website-care { padding-block:clamp(2.8rem,5vw,5.5rem); border-top:1px solid var(--line); }
.interior>.section+.section,.interior>.work-section+.work-section { padding-top:clamp(2.3rem,4.3vw,4.8rem); }
.interior h2 { font-size:clamp(2rem,3.3vw,3.35rem); }.interior h3 { font-size:clamp(1.22rem,1.65vw,1.7rem); }
.sectionhead { margin-bottom:1.5rem; }.sectionhead h2 { margin-top:.45rem; }.sectionhead p:not(.eyebrow),.work-intro,.twocol p:not(.eyebrow),.bodycopy p,.website-enquiry>div>p:not(.eyebrow),.provenance,.website-comparison p { color:var(--sub); line-height:1.67; }
.sectionhead p:not(.eyebrow),.work-intro { max-width:47rem; margin-top:.65rem; }.work-intro { margin:-.65rem 0 1.5rem; }
.twocol,.website-hero,.website-care,.website-enquiry { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:start; gap:clamp(1.65rem,5.6vw,6rem); }.twocol>*,.website-hero>*,.website-enquiry>* { min-width:0; }.twocol p:not(:first-child),.website-enquiry>div>p,.website-care p:not(:first-child) { margin-top:.8rem; }.twocol h2 { max-width:36rem; }.scope-list,.proposal-card ul,.bodycopy ul { padding-left:1.25rem; color:#485063; margin:1rem 0; }.scope-list li,.proposal-card li,.bodycopy li { margin:.35rem 0; }.scope-list li::marker,.proposal-card li::marker { color:var(--blue); }
.twocol .bodycopy { max-width:45rem; }.interior>.bodycopy { max-width:54rem; margin-inline:auto; }.bodycopy p+p { margin-top:.9rem; }.bodycopy h2 { font-size:clamp(1.5rem,2.3vw,2.25rem); margin:1.8rem 0 .65rem; }.bodycopy a,.form-message a,.requiredhint a,.notice a { color:var(--blue); text-decoration:underline; text-underline-offset:.16em; }
.preview-note,.notice,.proposal-support { padding:1.15rem 1.3rem; color:var(--sub); border:1px solid var(--line); border-radius:.9rem; background:var(--mist); }.preview-note { margin-bottom:1.6rem; }.preview-note p { margin-top:.3rem; font-size:.87rem; }
.cta { margin:clamp(2.5rem,4.8vw,5rem) 0; padding:clamp(1.6rem,3.7vw,3.65rem); display:flex; align-items:center; justify-content:space-between; gap:1.7rem; border:1px solid #dce2ff; border-radius:1.45rem; background:var(--mist); }.cta h2 { margin-top:.55rem; }.cta p { margin-top:.65rem; color:var(--sub); }
.proposal-jump { display:flex; flex-wrap:wrap; gap:.45rem; padding-block:.9rem 1.65rem; }.proposal-jump a { display:inline-flex; align-items:center; min-height:2.45rem; padding:.43rem .77rem; color:var(--blue); border:1px solid var(--line); border-radius:8rem; background:white; font-size:.74rem; font-weight:650; }.proposal-jump a:hover { background:var(--mist); }
.proposal-grid,.website-scope-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr)); gap:1rem; }
.proposal-card,.website-scope-grid article,.website-offer { min-width:0; padding:clamp(1.15rem,2.5vw,2.55rem); border:1px solid var(--line); border-radius:1.1rem; background:#fff; }
.proposal-card { display:flex; flex-direction:column; }.proposal-card .eyebrow { margin-bottom:.55rem; }.proposal-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; }.proposal-price strong,.website-price,.website-care-price { font-size:clamp(1.85rem,2.65vw,3rem); font-weight:750; letter-spacing:-.055em; color:var(--navy); }.proposal-price span,.proposal-note,.proposal-currency,.requiredhint,.comparison-note,.project-capture figcaption,.website-comparison figure p { color:var(--sub); font-size:.77rem; line-height:1.5; }.proposal-summary { margin-top:.55rem; color:var(--sub); }.proposal-card :is(p:not(.eyebrow):not(.proposal-price),li) { font-size:.88rem; }.proposal-card .proposal-note { padding-bottom:.6rem; }.proposal-card>.textlink { width:fit-content; margin-top:auto; padding-top:.45rem; }.proposal-currency { margin:.7rem 0; }.proposal-support { margin-top:1rem; font-size:.85rem; }.proposal-end>p { max-width:52rem; color:var(--sub); margin:.9rem 0 1.2rem; }
.work-section>.workgrid { margin-top:1.5rem; }.project-capture { margin:0 0 clamp(2rem,3vw,3rem); }.project-capture>img { width:100%; max-height:50rem; object-fit:contain; object-position:top center; border:1px solid var(--line); border-radius:1rem; background:var(--mist); }.project-capture figcaption { margin-top:.6rem; }
.comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.9rem,2.2vw,2rem); }.comparison-frame { display:block; overflow:hidden; margin:.5rem 0; border:1px solid var(--line); border-radius:.85rem; }.comparison-frame img { width:100%; }.comparison-note { margin-top:.85rem; }
.formsheet { display:grid; gap:1rem; padding:clamp(1.2rem,2.4vw,2.4rem); border:1px solid var(--line); border-radius:1.1rem; background:#fff; box-shadow:0 8px 26px #22307808; }.formsheet label { margin-bottom:.25rem; }.formsheet fieldset { min-width:0; border:0; margin:0; padding:0; }.formsheet legend { margin:0 0 .45rem; padding:0; color:var(--ink); font-weight:650; font-size:.83rem; }.fieldrow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }.field label>span { display:inline; }.choices { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; }.choice { display:inline-flex; align-items:center; gap:.4rem; padding:.44rem .65rem; border:1px solid var(--line); border-radius:.6rem; font-size:.77rem; cursor:pointer; }.choice:has(:checked) { color:var(--blue); background:var(--mist); border-color:#7894ed; }.choice input { accent-color:var(--blue); width:.85rem; height:.85rem; }.formsheet>textarea,.formsheet textarea { min-height:6rem; }.whatsapp-contact svg { width:1.15rem; height:1.15rem; }.requiredhint { display:block; }.fieldrow:empty { display:none; }
.website-offer { background:var(--mist); }.website-price { margin:.4rem 0; font-size:clamp(2.5rem,4.2vw,4.5rem); }.website-price>span:first-child { font-size:1rem; letter-spacing:0; margin-right:.3rem; }.website-offer>p { margin-bottom:.55rem; }.website-offer>p:not(.eyebrow):not(.website-price),.website-scope-grid p,.website-care p:not(.eyebrow),.website-steps p { color:var(--sub); }.website-payment { display:grid; grid-template-columns:1fr auto; gap:.5rem; border-top:1px solid var(--line); padding-top:.75rem; margin-top:.8rem; font-size:.83rem; }.website-hero .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; }.website-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap:1rem; padding:0; list-style:none; }.website-steps li { border:1px solid var(--line); border-radius:.9rem; padding:1.1rem; }.website-steps li>span { color:var(--blue); font-size:.75rem; }.website-steps h3 { margin:.55rem 0; }.website-steps p { font-size:.88rem; }.website-faq details { padding:.7rem 0; border-bottom:1px solid var(--line); }.website-faq summary { cursor:pointer; font-weight:650; }.website-faq details[open]>p { margin-top:.5rem; color:var(--sub); }.website-enquiry .live-form-link { padding:1rem; background:var(--mist); border-radius:.8rem; }.website-enquiry .live-form-link p { margin:0 0 .65rem; font-size:.88rem; }.website-enquiry .formsheet { grid-column:2; }.website-enquiry .form-message { font-size:.85rem; color:var(--sub); }
@media (prefers-reduced-motion:no-preference) { .hero-copy>* { animation:fade-rise .66s cubic-bezier(.16,.65,.28,1) both; }.hero-copy>:nth-child(2) { animation-delay:.045s; }.hero-copy>:nth-child(3) { animation-delay:.1s; }.hero-copy>:nth-child(4) { animation-delay:.15s; }.brief-card { animation:fade-rise .7s ease-out both; }@keyframes fade-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } }
@media (max-width:900px) { .hero-shell { gap:2rem; grid-template-columns:minmax(0,1.06fr) minmax(0,.96fr); }.hero-copy h1 { font-size:clamp(3.2rem,6.1vw,4.2rem); }.servicegrid,.processgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }.servicecard:last-child:nth-child(3n+1) { grid-column:auto; display:flex; align-items:initial; gap:0; }.servicecard:last-child:nth-child(3n+1) h3 { margin:1rem 0 .55rem; }.servicecard:last-child:nth-child(3n+1)>a { margin-top:auto; }.foot-grid { grid-template-columns:1.1fr .7fr .9fr 1.2fr; gap:1rem; } }
@media (max-width:730px) {
  html { scroll-padding-top:4.6rem; }.nav-shell { min-height:4rem; gap:.6rem; }.wordmark { font-size:1.32rem; }.nav-actions .button { min-height:2.45rem; padding:.63rem .92rem; font-size:.76rem; }.menu { display:grid; place-content:center; gap:5px; width:2.55rem; height:2.55rem; padding:0; color:var(--navy); background:transparent; border:0; }.menu span { width:1.25rem; height:1.5px; background:currentColor; }.menu[aria-expanded='true'] span:first-child { transform:translateY(3.25px) rotate(45deg); }.menu[aria-expanded='true'] span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
  .js #site-nav { display:none; }.js #site-nav.open { position:absolute; left:0; right:0; top:100%; display:flex; align-items:stretch; flex-direction:column; gap:0; padding:.5rem var(--gutter) .95rem; border-bottom:1px solid var(--line); background:white; box-shadow:0 7px 20px #18234515; }.js #site-nav>a { padding:.1rem .12rem; border-bottom:1px solid var(--line); }.js #site-nav>a:last-child { border-bottom:0; }html:not(.js) .nav-shell { flex-wrap:wrap; padding-block:.55rem; }html:not(.js) #site-nav { order:3; width:100%; flex-wrap:wrap; gap:.75rem; }html:not(.js) .menu { display:none; }
  .hero-shell,.intro-layout,.twocol,.website-hero,.website-care,.website-enquiry { grid-template-columns:1fr; }.hero-shell { gap:2.15rem; padding-block:2.55rem 2.7rem; }.hero-copy { max-width:36rem; }.hero-copy h1 { font-size:clamp(3.25rem,9.3vw,4.65rem); }.hero-copy>p { max-width:32rem; font-size:1rem; margin:1rem 0 1.2rem; }.price-link { margin-top:1.05rem; }.brief-card { border-radius:1.1rem; padding:1.3rem; box-shadow:-.35rem -.35rem 0 #edf0ff; }.intro-layout { gap:1.7rem; }.studio-art { min-height:15rem; }.art-wordmark { font-size:3.9rem; }.tape-track>div { padding-block:.9rem; }
  .section-title-row { align-items:flex-start; }.workgrid { gap:1rem; }.workcard { padding:.45rem; }.workcardcopy { padding:.8rem .4rem .55rem; }.workmeta { gap:.35rem; }.signpost-inner,.contact-home,.cta { align-items:flex-start; flex-direction:column; gap:1.3rem; }.foot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.55rem 1rem; }.foot-base { align-items:flex-start; flex-direction:column; }.pagehead h1 br { display:initial; }.website-enquiry .formsheet { grid-column:auto; }.route-contact>.twocol { gap:1.5rem; }
}
@media (max-width:530px) { .workgrid,.comparison-grid,.servicegrid { grid-template-columns:1fr; }.section-title-row { gap:.25rem; }.processgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }.processgrid article { padding:.95rem; }.processgrid p { font-size:.82rem; }.device-stage { aspect-ratio:1.77; }.fieldrow { grid-template-columns:1fr; }.work-section .work-intro { margin-top:0; }.intro-layout h2 br,.contact-home h2 br { display:none; }.contact-home h2 br::after,.intro-layout h2 br::after { content:' '; }.button { min-height:2.75rem; font-size:.8rem; padding:.65rem 1.05rem; }.topbar .nav-actions .button { padding:.57rem .8rem; }.eyebrow { font-size:.61rem; } }
@media (max-width:360px) { .hero-copy h1 { font-size:2.85rem; }.foot-grid { grid-template-columns:1fr; }.processgrid { grid-template-columns:1fr; }.actions { gap:.4rem; }.actions .button { padding:.62rem .8rem; gap:.4rem; }.hero-copy .eyebrow { letter-spacing:.1em; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } }

.service-tape { position:relative; }
.tape-toggle { position:absolute; top:50%; right:.65rem; transform:translateY(-50%); display:grid; place-items:center; width:1.9rem; height:1.9rem; padding:0; border:1px solid #acbbf0; border-radius:50%; color:white; background:#2947aa; font-size:.85rem; line-height:1; font-weight:700; }
.service-tape.is-paused .tape-track { animation-play-state:paused; }
@media (max-width:530px) {
  .hero-copy h1 { font-size:clamp(2.15rem,11.2vw,3.3rem); }
}
/* Substance's portfolio-first direction and local service content. */
.hero { color:#fff; background:radial-gradient(ellipse at 100% 15%,#294a9b 0,transparent 54%),#101d3f; }
.hero-shell { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5.5rem); padding-block:clamp(3.3rem,6.2vw,6.8rem); }
.hero-copy h1 { color:#fff; line-height:.99; font-size:clamp(3.6rem,5.75vw,6rem); }
.hero-copy h1>span { color:#a4bbff; }
.hero-copy .eyebrow { color:#b8caff; }.hero-copy .status-dot { background:#adc1ff; box-shadow:0 0 0 4px #ffffff14; }
.hero-copy>p { color:#d4ddf0; max-width:32rem; }
.hero .button { background:#fff; color:#15265b; border-color:#fff; border-radius:.55rem; }
.hero .button.outline { color:white; background:transparent; border-color:#7c8db8; }.hero .button:hover { background:#dce5ff; color:#15265b; }
.hero-showcase { min-width:0; }.showcase-meta,.showcase-caption { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.showcase-meta { margin-bottom:1rem; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:#c8d6f7; }.showcase-meta span:last-child { text-align:right; }
.hero-showcase .device-stage { background:radial-gradient(ellipse at 20% 25%,#6a88d1,#29477e 68%); aspect-ratio:1.4; border-radius:1.6rem .3rem 1.6rem .3rem; }
.hero-showcase .desktop-device { top:16%; width:80%; left:5%; }.hero-showcase .phone-device { width:23%; right:5%; bottom:10%; }
.showcase-caption { margin-top:1.2rem; }.showcase-caption>div { display:grid; }.showcase-caption span { color:#bac9e8; font-size:.68rem; }.showcase-caption strong { font-size:1.1rem; }.showcase-caption .textlink { color:white; font-size:.75rem; }
.enquiry-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(2rem,7vw,7rem); }.enquiry-layout>div>p { color:var(--sub); margin:1.2rem 0; max-width:34rem; }.enquiry-layout h2 { max-width:35rem; }.enquiry-layout .contact-links { margin-top:1.5rem; }
.home-areas { background:#f6f7fb; }.home-areas>.shell>p { max-width:46rem; color:var(--sub); }
.area-shortlist { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }.area-shortlist>a { display:inline-flex; justify-content:space-between; align-items:center; gap:1.2rem; padding:.85rem 1rem; background:#fff; border:1px solid var(--line); border-radius:.55rem; color:var(--blue); font-size:.85rem; font-weight:650; }.area-shortlist>a:hover { border-color:var(--blue); background:var(--mist); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.5rem; color:var(--sub); font-size:.75rem; margin-bottom:2rem; }.breadcrumbs>*+*::before { content:'/'; margin-right:.5rem; color:#8d96ac; }.breadcrumbs a:hover { color:var(--blue); text-decoration:underline; }
.area-feature,.area-budget { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(2rem,5vw,5rem); align-items:start; }.area-feature p,.area-budget p { color:var(--sub); margin-top:1rem; }.area-feature .button { margin-top:1.5rem; }
.area-note { background:var(--mist); border-left:3px solid var(--blue); padding:clamp(1.3rem,3vw,2.6rem); border-radius:0 1rem 1rem 0; }.area-note h3 { font-size:clamp(1.4rem,2.4vw,2rem); }.area-note p { font-size:.93rem; }
.area-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.area-card { display:flex; flex-direction:column; min-width:0; padding:clamp(1.2rem,2.3vw,2rem); border:1px solid var(--line); border-radius:.75rem; transition:border-color .2s; }.area-card:hover { border-color:var(--blue); }.area-card>span { color:var(--sub); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; }.area-card h3 { margin:.7rem 0; }.area-card p { color:var(--sub); font-size:.9rem; padding-bottom:1rem; }.area-card strong { display:flex; align-items:center; gap:.6rem; color:var(--blue); font-size:.78rem; margin-top:auto; }
.brief-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; margin:1.8rem 0 0; padding:0; gap:1.4rem; }.brief-steps li { border-top:2px solid var(--blue); padding:1.3rem .2rem; }.brief-steps span { color:var(--blue); font-size:.75rem; font-weight:700; }.brief-steps p { color:var(--sub); margin-top:.8rem; }
.area-services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }.area-services .servicecard:last-child:nth-child(3n+1) { display:flex; grid-column:auto; }.area-services .servicecard h3 { margin-top:0; }.area-services .servicecard>a { padding-top:1rem; }
.area-resource { padding:1.5rem; background:#f6f7fb; border-radius:.8rem; }.area-resource h3 { font-size:1.3rem; }.area-resource p,.local-service-link>p { color:var(--sub); margin-top:.7rem; }.area-resource a { color:var(--blue); text-decoration:underline; }
.single-device { overflow:hidden; border:5px solid #27303e; border-radius:1rem; background:#27303e; }.single-device img { width:100%; }.single-device .chrome-rail { height:1.3rem; gap:5px; }.single-device .chrome-rail i { width:6px; height:6px; }
.project-capture>.device-stage { max-height:none; }.project-capture .desktop-device { border-width:5px; }.project-capture .phone-device { border-width:5px; }.project-capture .chrome-rail { height:.9rem; }
@media (max-width:900px) { .hero-copy h1 { font-size:clamp(3.4rem,6vw,4.9rem); }.area-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:730px) { .hero-shell,.enquiry-layout,.area-feature,.area-budget { grid-template-columns:1fr; }.hero-shell { gap:2.8rem; }.hero-copy h1 { font-size:clamp(3.35rem,11vw,4.7rem); }.hero-showcase { max-width:35rem; width:100%; }.hero-showcase .device-stage { aspect-ratio:1.6; }.showcase-caption { align-items:flex-start; }.area-grid,.area-services,.brief-steps { grid-template-columns:1fr; }.brief-steps { gap:.3rem; }.area-shortlist>a { flex:1 1 10rem; }.enquiry-layout { gap:2.5rem; } }
@media (max-width:360px) { .hero-copy h1 { font-size:3.1rem; }.showcase-meta { font-size:.53rem; }.showcase-caption .textlink { font-size:.65rem; } }
/* Paired studio presentation boards, using the real desktop and mobile captures. */
.featured { background:#fff; }.featured .section-title-row { margin-bottom:2.8rem; }.featured .section-title-row h2 { max-width:55rem; }
.workcard.portfolio-card { padding:clamp(.8rem,1.8vw,1.65rem); border:1px solid #dedfe4; border-radius:1.55rem; box-shadow:none; }
.workcard.portfolio-card:hover { border-color:#a5b5ec; box-shadow:0 14px 32px #1d30600b; }
.portfolio-boards { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(.65rem,1.5vw,1.4rem); aspect-ratio:1.2; width:100%; }
.mockup-board { position:relative; isolation:isolate; overflow:hidden; border-radius:1rem; min-width:0; background:linear-gradient(115deg,#aaadb1 0%,#d3d4d5 39%,#e5e5e5 40%,#bfc1c4 100%); border:1px solid #e6e6e8; }
.mobile-board { background:radial-gradient(ellipse at 20% 30%,#f7f7f7 0%,#e7e7e7 60%,#d3d5d8 100%); }
.poster-brand { position:absolute; z-index:2; top:12%; left:50%; transform:translateX(-50%); color:#101c3e; font-family:'Helvetica Neue',Arial,sans-serif; font-weight:800; font-size:clamp(.95rem,1.9vw,1.9rem); line-height:.82; letter-spacing:-.085em; text-align:left; }.poster-brand>span { color:var(--blue); }
.poster-domain { position:absolute; z-index:3; bottom:4.2%; left:0; width:100%; padding-inline:.3rem; color:#242a35; font-size:clamp(.43rem,.65vw,.7rem); text-align:center; letter-spacing:-.02em; white-space:nowrap; }
.poster-laptop { position:absolute; z-index:1; width:104%; left:8%; top:34%; filter:drop-shadow(0 12px 9px #141b3e3b); transform:rotate(-2deg); }
.laptop-lid { position:relative; width:100%; padding:4.5% 3% 3%; background:linear-gradient(120deg,#555963 0%,#111318 3%,#030405 50%,#202329 98%,#92969d 100%); border:1px solid #5a5d62; border-radius:.65rem .65rem .18rem .18rem; }
.laptop-display { aspect-ratio:1.58; overflow:hidden; background:#fff; border:1px solid #06080d; }.laptop-display>img { width:100%; height:100%; object-fit:cover; object-position:top; }
.laptop-camera { position:absolute; top:1.7%; left:50%; width:3px; height:3px; background:#384550; border:1px solid #6c737b; border-radius:50%; }.laptop-lid>span { display:block; text-align:center; font-size:clamp(.2rem,.33vw,.35rem); line-height:1.5; font-weight:700; letter-spacing:.13em; color:#959ba5; padding-top:1.2%; }
.laptop-deck { position:relative; width:111%; margin-left:-5.5%; aspect-ratio:2.75; background:linear-gradient(112deg,#969ba2,#edf0f2 36%,#aeb4ba 75%,#d2d5d9); clip-path:polygon(5% 0,95% 0,100% 94%,97% 100%,3% 100%,0 94%); border-bottom:3px solid #858b93; border-radius:0 0 .5rem .5rem; }
.keyboard { position:absolute; top:5%; left:11%; width:78%; height:56%; display:grid; grid-template-rows:repeat(5,1fr); gap:2px; padding:3px; background:#737980; border-radius:3px; transform:perspective(100px) rotateX(13deg); }.keyboard>div { display:flex; gap:2px; }.keyboard i { display:block; flex:1; border-radius:1px; background:linear-gradient(#292d33,#080a0d); box-shadow:0 1px 0 #b4b9bf; }.keyboard>div:last-child>i:nth-child(5) { flex:5; }
.trackpad { position:absolute; width:28%; height:24%; left:36%; bottom:7%; border:1px solid #8e959e; border-radius:3px; background:linear-gradient(120deg,#bdc3ca,#d8dce0); }
.phone-lineup { position:absolute; top:32%; left:0; width:100%; height:57%; }
.poster-phone { position:absolute; z-index:2; left:22%; top:0; width:56%; aspect-ratio:370/800; padding:3% 2.2% 2.7%; overflow:hidden; border-radius:clamp(.55rem,1.3vw,1.1rem); background:linear-gradient(110deg,#a5a7ac 0%,#1a1c22 4%,#020304 94%,#72777d); box-shadow:0 6px 5px #14182140,inset 0 0 0 1px #7f838a; }
.poster-phone>img { width:100%; height:100%; border-radius:clamp(.35rem,.85vw,.7rem); object-fit:cover; object-position:top; background:#fff; }
.phone-notch { position:absolute; z-index:3; width:40%; height:3.7%; left:30%; top:1.2%; border-radius:0 0 .3rem .3rem; background:#040506; }
.phone-echo { left:-38%; z-index:1; transform:scale(.96); transform-origin:center; }.phone-echo:last-child { left:82%; }
.portfolio-card .workcardcopy { padding:1.4rem .3rem .3rem; }.portfolio-card .workcardcopy h3 { font-size:clamp(1.6rem,2.3vw,2.4rem); }.portfolio-card .workcardcopy>p { color:#777b86; margin:.65rem 0 .2rem; }.portfolio-card .workmeta { display:none; }.portfolio-card .workcardcopy>.textlink { margin-top:.35rem; }
.project-capture>.portfolio-boards { max-width:70rem; margin-inline:auto; }.project-capture .poster-brand { font-size:clamp(1.4rem,3vw,3.3rem); }.project-capture .poster-domain { font-size:clamp(.65rem,1vw,1rem); }.project-capture .laptop-camera { width:5px; height:5px; }.project-capture .poster-phone { border-radius:clamp(1rem,2.4vw,2rem); }.project-capture .poster-phone>img { border-radius:clamp(.7rem,1.7vw,1.5rem); }
@media (max-width:730px) { .portfolio-boards { gap:.65rem; }.workcard.portfolio-card { border-radius:1.05rem; padding:.75rem; }.poster-brand { font-size:clamp(.95rem,3vw,1.3rem); }.poster-domain { font-size:clamp(.4rem,1.2vw,.55rem); }.poster-phone { border-radius:clamp(.55rem,2.3vw,1rem); }.poster-phone>img { border-radius:clamp(.35rem,1.6vw,.65rem); }.portfolio-card .workcardcopy { padding:1.1rem .2rem .3rem; }.portfolio-card .workcardcopy h3 { font-size:1.6rem; }.project-capture .poster-brand { font-size:clamp(1rem,3vw,1.8rem); }.project-capture .poster-domain { font-size:clamp(.45rem,1.5vw,.7rem); }.keyboard { gap:1px; padding:2px; }.keyboard>div { gap:1px; } }
/* Google Business Profile: a prominent, plain-English route into local visibility. */
.hero-google-link { display:inline-flex; align-items:center; gap:.55rem; color:#c2d2ff; font-size:.86rem; font-weight:650; margin-top:1.3rem; text-decoration:underline; text-underline-offset:.25em; }.hero-google-link:hover { color:#fff; }
.google-presence { background:linear-gradient(115deg,#f3f6ff 0%,#fff 76%); border-bottom:1px solid var(--line); scroll-margin-top:5rem; }
.google-layout { display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); gap:clamp(2rem,5.5vw,6rem); align-items:center; }
.google-copy h2 { font-size:clamp(2.4rem,3.6vw,3.8rem); line-height:1.07; max-width:39rem; }
.google-copy>p { color:var(--sub); font-size:1.03rem; margin-top:1.25rem; max-width:38rem; }.google-copy .ticks { margin-block:1.1rem 1.6rem; }.google-copy .ticks li { font-size:.88rem; padding:.3rem 0; }.google-copy .actions { gap:1rem; }
.presence-board { position:relative; padding:clamp(1.4rem,2.9vw,2.7rem); border:1px solid #dce3f3; background:#fff; border-radius:1.5rem; box-shadow:0 18px 44px #243c7e0e; }
.presence-board-top { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; margin-bottom:1.7rem; }.presence-board-top>span:last-child { font-size:.76rem; font-weight:650; color:var(--sub); border-left:1px solid #d8dce6; padding-left:.7rem; }
.google-word { display:flex; font:600 1.5rem/1.1 Arial,sans-serif; letter-spacing:-.09em; padding-right:.1rem; }.google-word i { font-style:normal; }.google-word i:nth-child(1),.google-word i:nth-child(4) { color:#4285f4; }.google-word i:nth-child(2),.google-word i:nth-child(6) { color:#ea4335; }.google-word i:nth-child(3) { color:#fbbc05; }.google-word i:nth-child(5) { color:#34a853; }
.presence-board h3 { font-size:clamp(1.65rem,2.45vw,2.6rem); line-height:1.08; }.presence-board>p { color:var(--sub); font-size:.88rem; margin:.8rem 0 1.2rem; }
.presence-row { display:flex; align-items:center; gap:.8rem; padding:1rem 0; border-top:1px solid var(--line); }.presence-icon { display:grid; place-items:center; width:2.65rem; height:2.65rem; flex:0 0 auto; background:var(--mist); color:var(--blue); border-radius:.8rem; font-size:1.5rem; line-height:1; }.presence-row>div { display:grid; gap:.2rem; }.presence-row strong { font-size:.86rem; }.presence-row>div>span { color:var(--sub); font-size:.75rem; line-height:1.4; }
.presence-board-base { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; border-top:1px solid var(--line); padding-top:1rem; color:var(--sub); font-size:.57rem; letter-spacing:.05em; text-transform:uppercase; }
.google-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.google-service-grid article { padding:clamp(1.3rem,2.8vw,2.5rem); border:1px solid var(--line); border-radius:1rem; }.google-service-grid article>span { color:var(--blue); font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.google-service-grid h3 { margin:.85rem 0; font-size:clamp(1.55rem,2.4vw,2.3rem); }.google-service-grid p { color:var(--sub); font-size:.94rem; }
.ranking-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.ranking-grid article { padding:1.5rem; background:var(--mist); border-radius:.9rem; }.ranking-grid h3 { font-size:1.55rem; margin-bottom:.8rem; }.ranking-grid p { color:var(--sub); font-size:.9rem; }.google-source { color:var(--sub); font-size:.8rem; margin-top:1.3rem; max-width:55rem; }.google-source a { color:var(--blue); text-decoration:underline; }.local-profile-link>p { color:var(--sub); max-width:48rem; margin:1rem 0 .5rem; }
@media (max-width:1000px) {
 .nav-shell { min-height:4rem; gap:.6rem; }.menu { display:grid; place-content:center; gap:5px; width:2.55rem; height:2.55rem; padding:0; color:var(--navy); background:transparent; border:0; }.menu span { width:1.25rem; height:1.5px; background:currentColor; }.menu[aria-expanded='true'] span:first-child { transform:translateY(3.25px) rotate(45deg); }.menu[aria-expanded='true'] span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
 .js #site-nav { display:none; }.js #site-nav.open { position:absolute; left:0; right:0; top:100%; display:flex; align-items:stretch; flex-direction:column; gap:0; padding:.5rem var(--gutter) .95rem; border-bottom:1px solid var(--line); background:#fff; box-shadow:0 7px 20px #18234515; }.js #site-nav>a { padding:.1rem .12rem; border-bottom:1px solid var(--line); }html:not(.js) .nav-shell { flex-wrap:wrap; padding-block:.55rem; }html:not(.js) #site-nav { order:3; width:100%; flex-wrap:wrap; gap:.75rem; }html:not(.js) .menu { display:none; }
}
@media (max-width:730px) { .google-layout,.google-service-grid,.ranking-grid { grid-template-columns:1fr; }.google-layout { gap:2.1rem; }.google-copy h2 { font-size:clamp(2.3rem,8vw,3.4rem); }.google-copy>p { font-size:.97rem; }.presence-board { border-radius:1.1rem; }.hero-google-link { font-size:.78rem; }.google-copy .actions { align-items:flex-start; flex-direction:column; gap:.5rem; } }
/* Local Google services form a visible hierarchy beneath the main service. */
.google-area-group { margin-top:2rem; }.google-area-group>h3 { font-size:1.5rem; margin-bottom:1rem; }.google-area-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }.google-area-links>a { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-width:0; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:.65rem; color:var(--blue); font-size:.9rem; font-weight:650; background:#fff; }.google-area-links>a:hover { border-color:var(--blue); background:var(--mist); }.google-local-page .pagehead h1 { max-width:64rem; font-size:clamp(2.8rem,5.4vw,5.4rem); }.google-local-page .pagehead>.button { margin-top:1.5rem; }.google-local-page .ranking-grid+.textlink { margin-top:1rem; }
@media (max-width:900px) { .google-area-links { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:530px) { .google-area-links { grid-template-columns:1fr; }.google-local-page .pagehead h1 { font-size:clamp(2.5rem,10vw,3.3rem); }.google-local-page .breadcrumbs { font-size:.68rem; } }