:root{--navy:#0b1b2b;--blue:#00a8ff;--silver:#c0c6d0;--ink:#3e5365;--wash:#f2f5f8;--line:#d8dfe7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--navy);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.22em}
:focus-visible{outline:3px solid #0073b2;outline-offset:4px}
.dark :focus-visible{outline-color:var(--blue)}
.skip{position:absolute;left:12px;top:12px;transform:translateY(-150%);padding:.6rem 1rem;background:white;z-index:2}
.skip:focus{transform:none}
.wrap{width:min(100% - 3rem,1220px);margin-inline:auto}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:82px}
.mast{border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{display:block;width:194px;height:auto}
nav{display:flex;align-items:center;gap:clamp(.75rem,3vw,2.4rem);font-size:.89rem;font-weight:650}
nav a{display:inline-flex;align-items:center;gap:.38rem;min-height:44px}
.nav-cta{padding:.35rem .82rem;border:1px solid var(--line);border-radius:999px}
.nav-cta span{color:#006ca4}
.hero{padding-block:clamp(3.4rem,8vw,7rem) clamp(3rem,6vw,5rem);display:grid;grid-template-columns:1.25fr .75fr;align-items:end;column-gap:clamp(2rem,7vw,7rem);row-gap:clamp(2rem,5vw,4rem)}
.kicker,.signature{font-size:.78rem;letter-spacing:.19em;text-transform:uppercase;font-weight:750}
.kicker{color:#00699f;margin:0 0 .9rem}
h1,h2,h3,p,figure{margin-top:0}
h1,h2{line-height:1.02;letter-spacing:-.065em;text-wrap:balance}
h1{font-size:clamp(4.5rem,9.6vw,9rem);margin-bottom:1.4rem}
h2{font-size:clamp(2.65rem,5.6vw,5rem);margin-bottom:1.5rem}
h3{line-height:1.25;margin-bottom:.55rem}
p{color:var(--ink);margin-bottom:1rem}
.dot{color:var(--blue)}
.signature{color:var(--navy);margin:0}
.signature span{color:#00699f}
.lead{font-size:clamp(1.22rem,2.2vw,1.65rem);line-height:1.32;letter-spacing:-.035em;color:var(--navy);font-weight:620}
.story-line{font-weight:650;color:var(--navy)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:48px;padding:.78rem 1.2rem;border:0;background:var(--navy);color:white;border-radius:999px;font:inherit;font-size:.92rem;font-weight:700;cursor:pointer}
.button span{color:var(--blue)}
.hero-image{grid-column:1/-1;position:relative;margin:0;background:var(--navy);overflow:hidden;border-radius:20px}
.hero-image img{display:block;width:100%;height:clamp(235px,40vw,510px);object-fit:cover;object-position:center 51%}
.hero-image figcaption{position:absolute;bottom:.75rem;right:.75rem;background:var(--navy);color:white;padding:.3rem .7rem;border-radius:999px;font-size:.72rem}
.section{padding-block:clamp(3.75rem,8vw,7.5rem)}
.intro{border-top:1px solid var(--line)}
.split,.craft{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,6vw,6rem)}
.split p:last-child,.craft p:last-child{margin-bottom:0}
.dark{background:var(--navy);color:white}
.dark p,.dark label span{color:#cbd4df}
.dark .lead{color:white}
.dark .kicker{color:var(--blue)}
.craft h2{font-size:clamp(2.35rem,4.2vw,3.85rem)}
.craft .note{font-size:.88rem}
.wash{background:var(--wash)}
.applications,.steps{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:0 2rem}
.applications{grid-template-columns:repeat(3,1fr)}
.steps{grid-template-columns:repeat(4,1fr);counter-reset:step}
.applications li,.steps li{border-top:1px solid var(--line);padding:1.15rem 0 .65rem}
.steps li:before{counter-increment:step;content:"0" counter(step);display:block;font-variant-numeric:tabular-nums;color:#00699f;font-size:.84rem;font-weight:700;margin-bottom:.75rem}
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.7rem}
.frame{aspect-ratio:16/9;border-radius:14px;margin-bottom:1rem;background-color:var(--wash);border:1px solid var(--line)}
.interior{background-image:repeating-linear-gradient(130deg,transparent 0 24px,#c0c6d0 25px 26px,transparent 27px 48px)}
.exterior{background-image:repeating-radial-gradient(ellipse at 80% 115%,transparent 0 18px,#c0c6d0 19px 20px,transparent 21px 31px)}
.editing{background-image:repeating-linear-gradient(0deg,transparent 0 18px,#c0c6d0 19px 20px,transparent 21px 30px)}
.portfolio p{font-size:.87rem}
form{display:grid;gap:.55rem;align-content:start}
form label{font-weight:650;font-size:.92rem}
input,textarea,select{width:100%;padding:.8rem;border:1px solid var(--silver);border-radius:8px;background:white;color:var(--navy);font:inherit;margin-bottom:.45rem}
textarea{resize:vertical}
form .button{justify-self:start;background:var(--blue);color:var(--navy);margin-top:.35rem}
#status:empty{display:none}
#status{margin-top:.6rem}
footer{padding-block:1rem;font-size:.86rem}
footer p{margin:0}
@media(max-width:850px){.applications{grid-template-columns:repeat(2,1fr)}}
@media(max-width:690px){
.wrap{width:calc(100% - 2rem)}
.mast .bar{flex-wrap:wrap;gap:0;min-height:0;padding-block:.55rem}
nav{width:100%;justify-content:space-between;gap:.5rem}
.brand img{width:168px}
.hero,.split,.craft{grid-template-columns:1fr}
.hero{row-gap:1.75rem}
.desktop-break{display:none}
h1{font-size:clamp(3.25rem,12.5vw,5.2rem);text-wrap:initial;margin-bottom:1rem}
.hero-image{border-radius:13px}
.steps{grid-template-columns:repeat(2,1fr)}
.portfolio{grid-template-columns:1fr}
footer{flex-wrap:wrap}
}
@media(max-width:390px){.applications{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){.hero-image img{animation:settle 750ms ease-out both}@keyframes settle{from{transform:scale(1.035)}to{transform:scale(1)}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.mobile-float-nav{display:none}
@media(max-width:690px){
  .mobile-float-nav{
    display:flex;
    position:fixed;
    z-index:10;
    inset:0 0 auto;
    width:auto;
    padding:calc(env(safe-area-inset-top, 0px) + .3rem) max(1rem,env(safe-area-inset-right,0px)) .3rem max(1rem,env(safe-area-inset-left,0px));
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 4px 16px rgb(11 27 43 / .09);
    opacity:0;
    visibility:hidden;
    transition:opacity 180ms ease,visibility 0s linear 180ms;
  }
  .mobile-float-nav.is-visible{opacity:1;visibility:visible;transition-delay:0s}
  .motion-nav-ready #services,.motion-nav-ready #portfolio,.motion-nav-ready #contact{
    scroll-margin-top:calc(64px + env(safe-area-inset-top,0px));
  }
  .motion-nav-ready :focus-visible{scroll-margin-top:calc(64px + env(safe-area-inset-top,0px))}
  .skip:focus{z-index:11}
}
@media(prefers-reduced-motion:reduce){.mobile-float-nav{transition:none}}

#pricing .pricing-intro,#pricing .pricing-note{max-width:65ch}
#pricing table{width:100%;border-collapse:collapse;margin:1.6rem 0 1rem}
#pricing th,#pricing td{text-align:left;vertical-align:top;padding:.72rem 0;border-bottom:1px solid var(--line)}
#pricing thead th{font-size:.9rem;color:var(--ink);border-bottom:2px solid var(--blue)}
#pricing th:last-child,#pricing td:last-child{text-align:right;white-space:nowrap;padding-left:.75rem}
#pricing td:last-child{font-weight:750;font-variant-numeric:tabular-nums}
#pricing .pricing-note{font-size:.9rem}
.pricing-quote{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:1.5rem;padding:clamp(1rem,4vw,1.8rem);background:var(--navy);color:#fff;border-radius:14px}
.pricing-quote p{color:#e0e8f0;flex:1 1 19rem;max-width:60ch;margin:0}
.pricing-quote strong{color:#fff}
.pricing-quote .button{background:var(--blue);color:var(--navy)}
.pricing-quote .button:focus-visible{outline-color:var(--blue)}

.enquiry-phone{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 .45rem;min-height:44px;padding:.45rem .9rem;margin:0 0 1rem;border:1px solid var(--blue);border-radius:999px;color:#fff;font-size:.95rem;font-weight:700}
.enquiry-phone strong{color:#7dd7ff;white-space:nowrap}
.enquiry-privacy{font-size:.86rem}