/* ============ TOKENS ============ */
:root{
--white:#FFFFFF;
--sand:#F5F1EA;
--sand-2:#EAE3D7;
--stone:#F3F3F1;
--stone-2:#E6E6E2;
--text:#23262A;
--text-2:#676B71;
--text-3:#9A9EA3;
--blue:#3D5A75;
--blue-2:#2E4759;
--blue-soft:#E6EDF3;
--bronze:#A67C52;
--bronze-deep:#7F5B37;
--bronze-soft:#F1E8DC;
--line:rgba(35,38,42,.11);
--line-2:rgba(35,38,42,.06);
--shadow-sm:0 1px 2px rgba(35,38,42,.05), 0 8px 24px -12px rgba(35,38,42,.12);
--shadow:0 30px 70px -30px rgba(35,38,42,.28);
--radius:8px;
--gutter:clamp(16px, 5vw, 72px);
--container:1240px;
--ease:cubic-bezier(.22,.61,.36,1);
--d-slow:560ms;
--d-mid:360ms;
--d-fast:180ms;
--font-display:"Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
--font-body:"Figtree", "Helvetica Neue", Arial, sans-serif;
color-scheme: light;
}
/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
margin:0;background:var(--white);color:var(--text);
font-family:var(--font-body);font-size:17px;line-height:1.55;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.05;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px, 9vw, 128px)}
.eyebrow{
font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep);
display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--bronze);}
.lede{font-size:clamp(1.05rem, 1.4vw, 1.2rem);color:var(--text-2);max-width:60ch;line-height:1.6}
.h-display{font-size:clamp(2.8rem, 6.4vw, 5.6rem);font-weight:500}
.h-1{font-size:clamp(2.2rem, 4.3vw, 3.7rem);font-weight:500}
.h-2{font-size:clamp(1.5rem, 2.4vw, 2.1rem);font-weight:500}
.ital{font-style:italic;font-weight:400}
.num{font-variant-numeric:tabular-nums}
.accent{color:var(--blue)}
/* Buttons */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.6em;
min-height:52px;padding:0 26px;border-radius:999px;
font-weight:600;font-size:.95rem;letter-spacing:.01em;
transition:transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
cursor:pointer;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 14px 30px -14px rgba(61,90,117,.6)}
.btn-primary:hover{background:var(--blue-2)}
.btn-ghost{border:1px solid var(--line);color:var(--text);background:var(--white)}
.btn-ghost:hover{border-color:var(--text);background:var(--stone)}
.btn svg{width:18px;height:18px;flex:none}
/* ============ NAV ============ */
.nav{
position:fixed;inset-inline:0;top:0;z-index:50;
padding-top:env(safe-area-inset-top,0px);
background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
transition:box-shadow var(--d-mid) var(--ease);
}
.nav.solid{box-shadow:0 1px 0 var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.brand{display:flex;flex-direction:column;line-height:1;gap:3px}
.brand-name{font-family:var(--font-display);font-style:italic;font-size:1.55rem;font-weight:500;letter-spacing:-.01em}
.brand-sub{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--bronze-deep);padding-left:2px}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-size:.9rem;font-weight:500;white-space:nowrap;border-radius:999px;color:var(--text-2);transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease)}
.nav-links a:hover{background:var(--stone);color:var(--text)}
/* Colors dropdown */
.nav-links .has-menu{position:relative}
.menu-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:inherit;font-size:.9rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease)}
.menu-btn:hover{background:var(--stone);color:var(--text)}
.menu-btn svg{width:14px;height:14px;transition:transform var(--d-fast) var(--ease)}
.menu-btn[aria-expanded="true"]{background:var(--stone);color:var(--text)}
.menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:268px;list-style:none;margin:0;padding:8px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;z-index:60}
.submenu[hidden]{display:none}
.submenu a{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:8px;min-height:0}
.submenu a:hover{background:var(--stone)}
.submenu strong{font-size:.9rem;font-weight:600;color:var(--text)}
.submenu span{font-size:.78rem;color:var(--text-2)}
.drawer-group{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--bronze-deep);padding:16px 0 4px;border-bottom:0}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-phone{display:inline-flex;align-items:center;gap:.5em;min-height:44px;height:44px;padding:0 14px;font-weight:600;font-size:.92rem;white-space:nowrap;border-radius:999px;border:1px solid var(--line);transition:border-color var(--d-fast) var(--ease)}
.nav-phone span{white-space:nowrap;font-variant-numeric:tabular-nums}
.nav-phone:hover{border-color:var(--text);background:var(--blue-soft)}
.nav-phone svg{width:16px;height:16px;color:var(--blue)}
.nav .btn{min-height:44px;padding:0 20px;font-size:.9rem}
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;border-radius:999px}
.burger span{display:block;width:22px;height:2px;background:currentColor;position:relative;transition:transform var(--d-mid) var(--ease), background var(--d-mid) var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform var(--d-mid) var(--ease), top var(--d-mid) var(--ease)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.drawer{
position:fixed;inset:0;z-index:40;background:var(--white);color:var(--text);
padding:calc(96px + env(safe-area-inset-top,0px)) var(--gutter) calc(104px + env(safe-area-inset-bottom,0px));
display:flex;flex-direction:column;justify-content:space-between;
transform:translateY(-100%);opacity:0;visibility:hidden;
transition:transform var(--d-slow) var(--ease), opacity var(--d-mid) var(--ease), visibility 0s var(--d-slow);
}
.drawer.open{transform:none;opacity:1;visibility:visible;transition:transform var(--d-slow) var(--ease), opacity var(--d-mid) var(--ease), visibility 0s}
.drawer{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;height:100vh;height:100dvh}
.drawer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.drawer li a{display:flex;align-items:center;justify-content:space-between;padding:11px 0;font-family:var(--font-display);font-size:1.4rem;font-weight:500;border-bottom:1px solid var(--line)}
.drawer li a svg{width:18px;height:18px;color:var(--bronze)}
.drawer-foot{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.drawer-foot .btn{width:100%}
/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding-top:calc(76px + env(safe-area-inset-top,0px));background:var(--white)}
.hero-grid{
position:relative;z-index:1;
display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
align-items:center;gap:clamp(32px, 5vw, 72px);
padding-block:clamp(48px, 7vw, 104px) clamp(56px, 7vw, 104px);
}
/* The large house from the colour studio, washed out behind the headline the
same way the Residential panel sits over its photo. Heaviest white on the
left where the text is, lighter to the right so the house reads through. */
/* The house sits in its own strip BELOW the headline, buttons and badges -
the owner could not make it out with text over it. Cropped from the top of
the photo so the tower and roofline show (the lower half is driveway). The
top of the strip fades from white; the rest is the panel's light .2 wash. */
/* 39vw: the photo scales to the page width, and the house ends at y360 of
690 (920 wide), so 360/920 of the width shows the house and none of the
driveway - the owner asked for the driveway cropped out entirely. */
.hero{--hero-art-h:39vw}
.hero-art{position:absolute;left:0;right:0;bottom:0;height:var(--hero-art-h);z-index:0;pointer-events:none;overflow:hidden}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:40% 0}
/* Sits at the bottom of the section, behind the description, leaving white
space above it. Top edge fades in from white; across, the panel's wash
(.98 / .9 at 42% / .2) keeps the text readable on the left. */
.hero-art::after{content:"";position:absolute;inset:0;background:
linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 14%),
linear-gradient(to right, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.2) 100%)}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero h1{font-size:clamp(2.9rem, 6.6vw, 5.8rem);line-height:.98;font-weight:500}
.hero h1 em{font-style:italic;font-weight:400;color:var(--blue)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:8px;font-size:.84rem;color:var(--text-2)}
.hero-meta span{display:inline-flex;align-items:center;gap:.5em}
.hero-meta svg{width:14px;height:14px;color:var(--bronze)}
/* Tagline, not a button: bold brand blue, no box, no haze - on phones it
sits on plain white just below the house picture. */
.hero-meta .ppb{letter-spacing:.1em;text-transform:uppercase;font-weight:700;font-size:1rem;color:var(--blue)}
.hero-meta .ppb b{color:var(--bronze);font-weight:700;margin:0 .6em}
/* Photo-gallery link, directly under the hero photograph (owner, 2026-09-28).
The picture is the bottom band of .hero, so a strip straight after the
section reads as sitting under it on a phone and on a desktop alike. */
/* The two buttons under the studio's "As photographed" picture (owner moved
them here on 2026-09-28). Real buttons, not quiet links - the first version
was a text link and he could not find it. */
.banner-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.banner-links .btn{color:var(--blue-2);border:1px solid #B9C9D8;background:var(--blue-soft);
box-shadow:var(--shadow-sm)}
.banner-links .btn:hover{background:#DAE6F0;border-color:var(--blue);color:var(--blue-2)}
/* "Try a color scheme" carries the same S the preview's bar does */
.banner-links .btn-schemes{border-color:var(--blue);background:var(--blue);color:var(--white)}
.banner-links .btn-schemes:hover{background:var(--blue-2);border-color:var(--blue-2);color:var(--white)}
.banner-links .btn-schemes .s-mark{display:grid;place-items:center;flex:none;width:22px;height:22px;
border-radius:5px;background:rgba(255,255,255,.18);
font:600 1rem/1 "Cormorant Garamond",Georgia,serif}
/* "50" in Crabby Apple, the same mark the picker's 50 button carries */
.banner-links .btn-fifty{border-color:#5A2725;background:#753531;color:var(--white)}
.banner-links .btn-fifty:hover{background:#8C403B;border-color:#8C403B;color:var(--white)}
.banner-links .btn-fifty .n-mark{display:grid;place-items:center;flex:none;height:22px;padding-inline:5px;
border-radius:5px;background:rgba(255,255,255,.18);
font:700 .82rem/1 var(--font-body),Arial,sans-serif;letter-spacing:.02em}
/* "View every color" — the whole palette, in bronze so the four read as a set
without competing */
.banner-links .btn-all{border-color:var(--bronze-deep);background:var(--bronze-deep);color:var(--white)}
.banner-links .btn-all:hover{background:#6B4B2D;border-color:#6B4B2D;color:var(--white)}
.banner-links .btn-all .n-mark{display:grid;place-items:center;flex:none;height:22px;padding-inline:6px;
border-radius:5px;background:rgba(255,255,255,.18);
font:700 .76rem/1 var(--font-body),Arial,sans-serif;letter-spacing:.02em}
.banner-links .btn svg:last-child{transition:transform var(--d-fast) var(--ease)}
.banner-links .btn:hover svg:last-child{transform:translateX(3px)}
@media (max-width:900px){ .banner-links .btn{width:100%} }
@media (prefers-reduced-motion:reduce){ .banner-links .btn:hover svg:last-child{transform:none} }
/* Paint chip fan on a sand slab */
.fan-stage{
position:relative;border-radius:16px;background:#FFFFFF;border:1px solid #000000;
padding:clamp(28px, 4vw, 48px) clamp(16px, 3vw, 40px) 0;overflow:hidden;
}
.fan-stage::before{content:"";position:absolute;inset:auto -20% -30% -20%;height:60%;background:radial-gradient(closest-side, rgba(61,90,117,.16), transparent);pointer-events:none}
.fan-stage .stage-label{position:absolute;top:18px;left:22px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bronze-deep)}
.fan-stage .stage-label-r{left:auto;right:22px;color:var(--text-3)}
.fan{position:relative;height:clamp(340px, 42vw, 520px);display:flex;align-items:flex-end;justify-content:center;perspective:1200px}
.chip{
position:absolute;bottom:-14px;left:50%;
/* sized so all five stay inside the panel, fanned out and on hover */
width:clamp(112px, 13.2vw, 150px);height:clamp(290px, 38vw, 450px);
margin-left:calc(clamp(112px, 13.2vw, 150px) / -2);
border-radius:8px 8px 4px 4px;
transform-origin:50% 96%;
transform:rotate(var(--r, 0deg)) translateY(var(--y, 0px));
box-shadow:0 30px 50px -28px rgba(35,38,42,.45), inset 0 0 0 1px rgba(255,255,255,.25);
display:flex;flex-direction:column;justify-content:space-between;
padding:14px 14px 22px;color:rgba(35,38,42,.82);
transition:transform var(--d-slow) var(--ease);will-change:transform;
}
.chip::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%, rgba(0,0,0,.05));pointer-events:none}
.chip .swatch-name{font-family:var(--font-display);font-style:italic;font-size:1.1rem;line-height:1.1;position:relative;font-weight:500}
.chip .swatch-code{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;opacity:.7;position:relative;white-space:nowrap}
.chip .chip-head{display:flex;justify-content:space-between;align-items:flex-start;position:relative}
.chip .chip-hole{width:10px;height:10px;border-radius:50%;background:#FFFFFF;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
/* .swatch-hit sets position:relative for the colour pop-up; that would beat
.chip{position:absolute} on specificity and break the fan into a flat row
that runs off the panel, so the hero chips restate it. */
.hero .chip.swatch-hit{position:absolute}
.chip.c1{background:#EDEAE0;--r:-22deg;--y:0px}
.chip.c2{background:#D1CBC1;--r:-11deg;--y:-6px}
.chip.c3{background:#BCB7AD;--r:0deg;--y:-10px}
.chip.c4{background:#2B4360;--r:11deg;--y:-6px;color:rgba(255,255,255,.92)}
.chip.c5{background:#403330;--r:22deg;--y:0px;color:rgba(255,255,255,.92)}
.chip.c4 .chip-hole,.chip.c5 .chip-hole{background:rgba(245,241,234,.9)}
/* opens a little on hover, but not so far that the outer chips clip the panel */
.fan:hover .chip.c1{--r:-26deg}
.fan:hover .chip.c2{--r:-13deg}
.fan:hover .chip.c4{--r:13deg}
.fan:hover .chip.c5{--r:26deg}
@keyframes fan-in{from{transform:rotate(0deg) translateY(0px)}to{transform:rotate(var(--r,0deg)) translateY(var(--y,0px))}}
.chip{animation:fan-in 900ms var(--ease) 150ms backwards}
/* ============ TRUST STRIP ============ */
/* credentials strip: five tinted tiles, kept compact */
.trust{background:var(--white);padding-block:14px;border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.trust-item{background:var(--blue-soft);border-radius:10px;padding:13px 16px;display:flex;flex-direction:column;gap:3px}
.trust-item .big{font-family:var(--font-display);font-size:1.7rem;line-height:1;font-weight:500;color:var(--blue)}
.trust-item .small{font-size:.78rem;line-height:1.3;color:var(--text-2);letter-spacing:.01em}
.trust-item .small.tag,.trust-item .small .tag{font-weight:700;color:var(--blue);letter-spacing:.02em}
/* ============ WHY PAINT ============ */
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px, 6vw, 96px);align-items:start}
.why-copy{display:flex;flex-direction:column;gap:22px}
.why-copy p{max-width:60ch;color:var(--text-2)}
.threats{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.threats li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.threats .ico{width:44px;height:44px;border-radius:10px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue)}
.threats .ico svg{width:22px;height:22px}
.threats strong{display:block;font-family:var(--font-display);font-weight:600;font-size:1.35rem;margin-bottom:4px}
.threats span{color:var(--text-2);font-size:.95rem}
/* ============ PROCESS ============ */
.process{background:var(--sand)}
.process-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(40px, 5vw, 64px)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0;padding:0}
.step{background:var(--white);border-radius:var(--radius);padding:30px 26px 32px;display:flex;flex-direction:column;gap:16px;min-height:320px;box-shadow:var(--shadow-sm);border:1px solid var(--line-2)}
.step .n{font-family:var(--font-display);font-size:3rem;line-height:1;color:var(--bronze);font-weight:400;font-style:italic}
.step h3{font-size:1.45rem;font-weight:600}
.step p{color:var(--text-2);font-size:.95rem}
.step .tag{margin-top:auto;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blue)}
/* ============ SERVICES ============ */
.services-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(36px, 4vw, 56px)}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc{
display:flex;flex-direction:column;gap:14px;padding:28px 26px 30px;
border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
transition:border-color var(--d-mid) var(--ease), transform var(--d-mid) var(--ease), box-shadow var(--d-mid) var(--ease);
}
.svc:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.svc .ico{width:44px;height:44px;border-radius:10px;background:var(--bronze-soft);display:grid;place-items:center;color:var(--bronze-deep)}
.svc .ico svg{width:22px;height:22px}
.svc h3{font-size:1.4rem;font-weight:600}
.svc p{color:var(--text-2);font-size:.94rem}
/* Soft pastel cards. The tint is set per card in index.html as --tint, and
each one is a real Sherwin-Williams colour (named there in data-sw), so the
section reads as a paint company's own palette. Body copy is darkened on a
tint: the default --text-2 only reaches about 3:1 on these. */
.svc.tint{background:var(--tint);border-color:rgba(35,38,42,.12)}
.svc.tint .ico{background:rgba(255,255,255,.62);color:var(--text)}
.svc.tint p{color:#3C4046}
.svc.tint a{color:var(--text)}
.svc.tint:hover{border-color:var(--text)}
/* Exterior Repainting used to be a solid blue "featured" card. It is now a
soft blue tint like the rest of the section, so those rules are gone.
(.featured-quote in the testimonials is unrelated and still in use.) */
/* ============ RES / COM ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{
position:relative;overflow:hidden;border-radius:12px;
min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;
padding:36px;isolation:isolate;border:1px solid var(--line-2);
}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.2) 100%)}
.panel-art{position:absolute;inset:0;z-index:-2}
.panel-art img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.panel.res .panel-art{background:linear-gradient(160deg, #DCE4EC 0%, #F5F1EA 100%)}
.panel.com .panel-art{background:linear-gradient(160deg, #EAE3D7 0%, #F3F3F1 100%)}
.panel-art .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(35,38,42,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(35,38,42,.05) 1px, transparent 1px);background-size:64px 64px}
.panel .eyebrow{margin-bottom:12px}
.panel h3{font-size:clamp(1.9rem, 2.7vw, 2.5rem);margin-bottom:12px;font-weight:600}
.panel p{color:var(--text-2);max-width:48ch;font-size:.98rem}
.panel ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.panel li{font-size:.78rem;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);letter-spacing:.02em}
.panel .btn{align-self:flex-start;margin-top:22px}
/* ============ COMPARE ============ */
.compare{background:var(--stone)}
.compare-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(32px, 4vw, 48px)}
.table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow-sm)}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem}
.cmp th,.cmp td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp thead th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-2);background:var(--stone);border-bottom:1px solid var(--line)}
.cmp thead th.vp{color:#fff;background:var(--blue)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:first-child{font-weight:600}
.cmp td.vp{background:var(--blue-soft);font-weight:600;color:var(--blue-2)}
.cmp td .yes,.cmp td .no,.cmp td .maybe{display:inline-flex;align-items:flex-start;gap:8px}
.cmp td .yes svg,.cmp td .no svg,.cmp td .maybe svg{width:17px;height:17px;flex:none;margin-top:2px}
.cmp td .yes{color:var(--blue-2)}
.cmp td .yes svg{color:#1E7A4D}
.cmp td .no{color:var(--text-2)}
.cmp td .no svg{color:#C0463B}
.cmp td .maybe{color:var(--text-2)}
.cmp td .maybe svg{color:#A67C52}
.ast{color:var(--bronze-deep);font-weight:700;font-size:.8em;margin-left:1px}
.cmp-note{margin:16px 0 0;font-size:.84rem;color:var(--text-2)}
.cmp + .note .ast,#cmp-note .ast{font-size:1em}
/* stacked cards on small screens */
@media (max-width:760px){
.table-wrap{overflow:visible;border:0;background:transparent;box-shadow:none;border-radius:0}
table.cmp{min-width:0;display:block;font-size:.94rem}
.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp tbody{display:block}
.cmp tbody tr{display:block;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);padding:4px 0 10px;margin-bottom:12px}
.cmp tbody tr:last-child{margin-bottom:0}
.cmp td{display:block;border-bottom:0;padding:10px 18px}
.cmp td.q{font-family:var(--font-display);font-size:1.2rem;font-weight:500;line-height:1.2;padding:16px 18px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.cmp td[data-label]::before{content:attr(data-label);display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--text-3);margin-bottom:3px}
.cmp td.vp{background:var(--blue-soft);border-radius:8px;margin:6px 10px 0;padding:12px 14px}
.cmp td.vp[data-label]::before{color:var(--blue-2)}
}
/* ============ COLOR STUDIO ============ */
/* Whole frame, uncropped, capped at the file's own 920px so it stays sharp. */
.studio-banner{margin:0 0 clamp(26px, 3.5vw, 40px);max-width:920px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.studio-banner img{display:block;width:100%;height:auto}
.studio-banner figcaption,.studio-photo figcaption{padding:10px 2px 0;font-size:.8rem;color:var(--text-3)}
.studio-photo figcaption{padding:12px 2px 0}
.studio-banner{overflow:visible}
.studio-banner img{border-radius:18px;box-shadow:var(--shadow)}
.studio-photo{margin:0;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.studio-photo canvas{display:block;width:100%;height:auto;border-radius:6px;background:var(--stone)}
.studio-photo figcaption strong{display:block;color:var(--text);font-size:.92rem}
.studio-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(32px, 4vw, 48px)}
.studio-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px, 4vw, 56px);align-items:start}
/* drawing and photo stack here, so the column is taller than a screen: no sticky */
.studio-left{display:flex;flex-direction:column;gap:14px}
/* finished looks under the palette, beside the chips */
.looks{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.looks-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.looks-head strong{font-size:.95rem;color:var(--text)}
.looks-head a{font-size:.82rem;font-weight:600}
.looks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.look{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white);cursor:pointer;text-align:left;font:inherit;transition:border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease)}
.look img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--stone)}
.look .look-sw{display:flex;height:6px}
.look .look-sw i{flex:1}
.look .nm{padding:6px 8px 7px;font-size:.76rem;font-weight:600;line-height:1.25;color:var(--text)}
.look .nm small{display:block;font-weight:400;color:var(--text-2);font-size:.7rem;margin-top:1px}
.looks + .looks{margin-top:18px}
.look:hover{border-color:var(--blue)}
.look[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.look:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.house-frame{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.house-frame svg{width:100%;height:auto;aspect-ratio:16/10;border-radius:6px}
/* Opening scheme, matched to state.sel in site.js: Nomadic Desert body,
Crisp Linen trim, Sealskin roof, Sun Dried Tomato door, and Black Bean on
the garage door, soffits, corbels and shutters. */
.house{--body:#6A4238;--trim:#D7C5AE;--door:#6E423E;--roof:#48423C;--garage:#403330;--shutter:#403330;--corbel:#403330;--soffit:#403330}
/* apply-to segmented control */
.apply{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.apply button{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:56px;border:1px solid var(--line);border-radius:10px;background:var(--white);text-align:left;transition:border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease)}
.apply button:hover{border-color:var(--text)}
.apply button[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.apply .dot{width:30px;height:30px;border-radius:8px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:background var(--d-mid) var(--ease)}
.apply .lbl{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.apply .lbl small{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-2)}
.apply .lbl strong{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--sand)}
.palette-card .strip{display:flex;gap:6px}
.palette-card .strip span{width:34px;height:34px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:background var(--d-mid) var(--ease)}
.palette-card .btn{min-height:44px;padding:0 18px;font-size:.86rem}
/* elevation anatomy */
.elev-frame{margin:0;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:clamp(10px, 2vw, 22px);box-shadow:var(--shadow-sm)}
.elev-frame img{display:block;width:100%;height:auto;border-radius:6px}
.elev-frame img + .elev-cap{margin-top:26px}
.elev-cap{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--bronze-deep);margin-bottom:10px}
.elev-frame figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.85rem;color:var(--text-2)}
.elev-frame figcaption .btn{min-height:44px;padding:0 18px;font-size:.84rem}
.elev-links{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.elev-links a{font-weight:600;color:var(--blue);display:inline-flex;align-items:center;min-height:32px;border-bottom:1px solid transparent;transition:border-color var(--d-fast) var(--ease)}
.elev-links a:hover{border-color:var(--blue);background:var(--blue-soft)}
.to-top{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-weight:600;color:var(--text-2);transition:color var(--d-fast) var(--ease)}
.to-top:hover{color:var(--blue)}
.to-top svg{width:15px;height:15px}
/* top 50 */
.top50-group{font-family:var(--font-body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--bronze-deep);display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.top50-group:first-of-type{margin-top:0}
.top50-group::after{content:"";flex:1;height:1px;background:var(--line)}
.top50-group span{color:var(--text-3);font-weight:600}
.top50 .sw-grid{margin-bottom:4px} /* browser */
.sw-tools{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.sw-search{position:relative}
/* same pale blue as the Villa Portofino column in the comparison chart; white while typing */
.sw-search input{width:100%;min-height:50px;padding:12px 14px 12px 44px;border-radius:999px;border:1px solid #B9C9D8;background:var(--blue-soft);font:inherit;font-size:1rem;color:var(--text);transition:background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease)}
.sw-search input::placeholder{color:#4B6075;opacity:1}
.sw-search input:hover{border-color:var(--blue);background:#DCE7F0}
/* Search feedback: the box used to sit there looking inert while the grid
silently changed. Now the icon pulses while typing settles, the field
flashes when a search runs, and a miss shakes. */
.sw-search.is-busy svg{animation:sw-pulse .6s var(--ease) infinite}
@keyframes sw-pulse{0%,100%{opacity:1;transform:translateY(-50%) scale(1)}50%{opacity:.45;transform:translateY(-50%) scale(.88)}}
.sw-search.is-flash input{animation:sw-flash .7s var(--ease)}
@keyframes sw-flash{0%{box-shadow:0 0 0 0 rgba(61,90,117,.55)}100%{box-shadow:0 0 0 12px rgba(61,90,117,0)}}
.sw-search.is-miss input{animation:sw-shake .45s var(--ease);border-color:#9B3B35}
@keyframes sw-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.sw-count.is-flash{animation:sw-count 0.9s var(--ease)}
@keyframes sw-count{0%{background:rgba(61,90,117,.22)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){
.sw-search.is-busy svg,.sw-search.is-flash input,.sw-search.is-miss input,.sw-count.is-flash{animation:none}
.sw-search.is-miss input{border-color:#9B3B35}
.sw-count.is-flash{background:rgba(61,90,117,.18)}
}
.sw-search input:focus{outline:none;background:var(--white);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.sw-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--blue);pointer-events:none}
.sw-search input{padding-right:48px}
.sw-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sw-search .sw-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--blue);cursor:pointer;transition:background var(--d-fast) var(--ease)}
.sw-search .sw-clear svg{position:static;transform:none;width:16px;height:16px;color:currentColor}
.sw-search .sw-clear:hover{background:rgba(61,90,117,.12)}
.sw-search .sw-clear:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.sw-filters{display:flex;flex-wrap:wrap;gap:8px}
.sw-filters button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--white);font-size:.84rem;font-weight:500;color:var(--text-2);transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
/* Hover has to read at a glance: a border-colour change alone was too faint to notice. */
.sw-filters button:hover{border-color:var(--text);color:var(--text);background:var(--blue-soft);transform:translateY(-1px)}
.sw-filters button:active{transform:translateY(0)}
/* Not a filter but a jump to the Popular Florida colors section, so it carries
the bronze accent and an arrow instead of looking like another family chip. */
.sw-filters .fam-jump{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;
border-radius:999px;border:1px dashed var(--bronze-deep);background:transparent;
font-size:.84rem;font-weight:600;color:var(--bronze-deep);text-decoration:none;
transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.sw-filters .fam-jump svg{width:14px;height:14px;flex:none}
.sw-filters .fam-jump:hover{background:var(--bronze-deep);border-style:solid;border-color:var(--bronze-deep);color:#fff;transform:translateY(-1px)}
.sw-filters .fam-jump:active{transform:translateY(0)}
.sw-filters .fam-jump:focus-visible{outline:2px solid var(--bronze-deep);outline-offset:2px}
.sw-filters button[aria-pressed="true"]{background:var(--text);color:#fff;border-color:var(--text)}
/* colour chips: tap to enlarge into the detail pop-up */
.swatch-hit{cursor:pointer;transition:transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);position:relative}
.swatch-hit:hover,.swatch-hit:focus-visible{transform:scale(1.18);z-index:3;box-shadow:0 10px 22px -10px rgba(35,38,42,.5)}
.swatch-hit:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hero .chip.swatch-hit:hover,.hero .chip.swatch-hit:focus-visible{transform:rotate(var(--r,0deg)) translateY(calc(var(--y,0px) - 12px)) scale(1.04)}
.scheme ul li.swatch-hit:hover,.scheme ul li.swatch-hit:focus-visible{transform:none;box-shadow:none;background:var(--stone);border-radius:6px}
.pal span.swatch-hit:hover,.pal span.swatch-hit:focus-visible{transform:scale(1.06)} /* colour detail pop-up (same fields as the colour index page) */
.cm{border:0;padding:0;margin:auto;width:min(430px, calc(100% - 24px));border-radius:16px;background:var(--white);color:var(--text);box-shadow:var(--shadow);overflow:hidden}
.cm[open]{display:block;animation:cm-in var(--d-mid) var(--ease)}
.cm::backdrop{background:rgba(24,28,33,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
@keyframes cm-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cm .chip-big{display:block;height:190px;width:100%}
.cm .info{padding:20px 22px 22px}
.cm h2{font-family:var(--font-display);font-size:1.9rem;font-weight:500;margin:0 0 2px;line-height:1.1}
.cm .sub{font-size:.9rem;color:var(--text-2);margin:0 0 14px}
.cm dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 16px;font-size:.9rem}
.cm dt{color:var(--text-3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;align-self:center}
.cm dd{margin:0;font-weight:600}
.cm .apply-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.cm .apply-row button{min-height:42px;border-radius:8px;border:1px solid var(--line);background:var(--white);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.cm .apply-row button:hover{border-color:var(--blue);background:var(--blue-soft)}
.cm .close{width:100%;min-height:46px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:inherit;font-weight:600;cursor:pointer}
.cm .close:hover{border-color:var(--text)}
@media (prefers-reduced-motion:reduce){ .cm[open]{animation:none} } .swc .tone{display:block;font-size:.62rem;letter-spacing:.04em;color:var(--text-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* By undertone: Crabby Apple SW 7592 */
.sw-filters .tone-btn{background:#753531;border-color:#753531;color:#fff}
.sw-filters .tone-btn:hover{border-color:#5A2825;color:#fff}
.sw-filters .tone-btn[aria-pressed="true"]{background:#753531;border-color:#5A2825;color:#fff;box-shadow:0 0 0 3px rgba(117,53,49,.28)}
.sw-filters .star{background:#4E6342;border-color:#4E6342;color:#fff}
.sw-filters .star:hover{border-color:#3A4B31;color:#fff}
.sw-filters .star[aria-pressed="true"]{background:#4E6342;border-color:#3A4B31;color:#fff;box-shadow:0 0 0 3px rgba(78,99,66,.3)}
.sw-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.8rem;color:var(--text-2)}
.sw-meta label{display:inline-flex;align-items:center;gap:8px}
.sw-meta select{font:inherit;font-size:.84rem;min-height:36px;padding:0 30px 0 10px;border-radius:999px;border:1px solid var(--line);background:var(--white) url("data:image/svg+xml;utf8,") no-repeat right 10px center;appearance:none;-webkit-appearance:none;color:var(--text)}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(124px,1fr));gap:10px}
.swc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white);text-align:left;transition:transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);cursor:pointer}
.swc:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--text-3)}
.swc .block{position:relative;aspect-ratio:5/4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.swc .block .used{position:absolute;left:8px;top:8px;display:flex;gap:4px}
.swc .block .used span{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.swc.is-active{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.swc .info{padding:9px 10px 10px;display:flex;flex-direction:column;gap:3px}
.swc .name{font-size:.82rem;font-weight:600;line-height:1.2}
.swc .code{font-size:.7rem;color:var(--text-2);display:flex;justify-content:space-between;gap:6px}
.swc .lrv{display:flex;align-items:center;gap:6px;font-size:.66rem;color:var(--text-3);margin-top:2px}
.swc .lrv i{flex:1;height:3px;border-radius:2px;background:var(--stone-2);position:relative;overflow:hidden}
.swc .lrv i::after{content:"";position:absolute;inset:0;width:var(--w,50%);background:var(--bronze)}
.sw-empty{padding:32px;text-align:center;color:var(--text-2);border:1px dashed var(--line);border-radius:10px;font-size:.95rem}
.sw-legal{font-size:.76rem;color:var(--text-3);margin-top:18px;max-width:72ch}
.sw-more{display:flex;justify-content:center;margin-top:16px}
.sw-more .btn{min-height:46px}
/* Florida exterior picks: Olivetone SW 9670 */
.sw-filters button.star{background:#4E6342;border-color:#4E6342;color:#fff}
.sw-filters button.star:hover{background:#3F5136;border-color:#3A4B31;color:#fff}
.sw-filters button.star[aria-pressed="true"]{background:#4E6342;border-color:#3A4B31;color:#fff;box-shadow:0 0 0 3px rgba(78,99,66,.3)}
/* All colors: Tricorn Black SW 6258 */
.sw-filters button[data-fam="all"]{background:#2F2F30;border-color:#2F2F30;color:#fff}
.sw-filters button[data-fam="all"]:hover{background:#4A4A4C;border-color:#4A4A4C;color:#fff}
.sw-filters button[data-fam="all"][aria-pressed="true"]{background:#2F2F30;border-color:#2F2F30;color:#fff;box-shadow:0 0 0 3px rgba(47,47,48,.22)}
.swc .code i{font-style:normal;color:var(--text-3)}
/* ============ GALLERY ============ */
.gallery-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px, 4vw, 44px)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px}
.g{position:relative;overflow:hidden;border-radius:12px;background:var(--stone);isolation:isolate}
.g img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms var(--ease)}
.g:hover img{transform:scale(1.04)}
.g.w2{grid-column:span 2}
.g.h2{grid-row:span 2}
.g .cap{position:absolute;inset:auto 0 0 0;padding:44px 16px 14px;background:linear-gradient(to top, rgba(35,38,42,.72), transparent);color:#fff;display:flex;flex-direction:column;gap:8px;z-index:1}
.g .cap strong{font-family:var(--font-display);font-size:1.25rem;font-weight:500;line-height:1.1}
.g .cap .pal{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.g .cap .pal span{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;letter-spacing:.02em;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:4px 8px 4px 4px;border-radius:999px}
.g .cap .pal i{width:16px;height:16px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.g .cap .try{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:7px 12px;min-height:32px;cursor:pointer;transition:background var(--d-fast) var(--ease)}
.g .cap .try:hover{background:rgba(255,255,255,.18)}
.gallery-note{font-size:.76rem;color:var(--text-3);margin-top:14px}
/* ============ IDEAS ============ */
.ideas{background:var(--sand)}
.ideas-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(28px, 4vw, 44px)}
.trend-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:clamp(32px, 4vw, 48px)}
.trend{background:var(--white);border:1px solid var(--line-2);border-radius:10px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm)}
.trend .sw-dot{width:100%;height:10px;border-radius:999px;display:flex;overflow:hidden}
.trend .sw-dot i{flex:1;display:block}
.trend strong{font-family:var(--font-display);font-size:1.2rem;font-weight:600;line-height:1.1}
.trend p{font-size:.84rem;color:var(--text-2)}
.ideas-tabs{display:flex;gap:8px;margin-bottom:18px}
.ideas-tabs button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);font-weight:600;font-size:.9rem;color:var(--text-2);transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease)}
.ideas-tabs button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.schemes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.scheme{background:var(--white);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.scheme .bars{display:grid;grid-template-columns:3fr 1fr 1fr;height:84px}
.scheme .bars i{display:block}
.scheme .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.scheme .kicker{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--bronze-deep)}
.scheme h3{font-size:1.3rem;font-weight:600}
.scheme ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--text-2)}
.scheme li{display:flex;align-items:center;gap:8px}
.scheme li i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.scheme li b{color:var(--text);font-weight:600}
.scheme p{font-size:.84rem;color:var(--text-2)}
.scheme .try{margin-top:auto;align-self:flex-start;font-size:.78rem;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px;min-height:36px;cursor:pointer}
.scheme .try svg{width:14px;height:14px}
.scheme .try:hover{color:var(--blue-2)}
.sources{margin-top:clamp(28px, 4vw, 40px);padding-top:20px;border-top:1px solid var(--line);font-size:.8rem;color:var(--text-2);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.sources strong{color:var(--text);letter-spacing:.12em;text-transform:uppercase;font-size:.68rem}
.sources a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.sources a:hover{color:var(--blue);text-decoration-color:var(--blue)}
.house .sky{fill:#E9EEF2}
.house .lawn{fill:#B7C2AA}
.house .body{fill:var(--body);transition:fill var(--d-slow) var(--ease)}
.house .trim{fill:var(--trim);transition:fill var(--d-slow) var(--ease)}
.house .door{fill:var(--door);transition:fill var(--d-slow) var(--ease)}
.house .garage{fill:var(--garage);transition:fill var(--d-slow) var(--ease)}
.house .shutter{fill:var(--shutter);transition:fill var(--d-slow) var(--ease)}
.house .corbel{fill:var(--corbel);transition:fill var(--d-slow) var(--ease)}
.house .soffit{fill:var(--soffit);transition:fill var(--d-slow) var(--ease)}
.house .roof{fill:var(--roof)}
.house .glass{fill:#9FB4C2;opacity:.9}
.house .shade{fill:rgba(35,38,42,.10)}
.house .shade-dk{fill:rgba(35,38,42,.2)}
.studio-note{font-size:.86rem;color:var(--text-2);border-left:2px solid var(--bronze);padding-left:14px}
/* ============ WARRANTY BAND ============ */
.warranty{background:var(--sand);position:relative;overflow:hidden}
.warranty-grid{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px, 5vw, 80px);align-items:center}
.warranty .years{font-family:var(--font-display);font-size:clamp(6rem, 16vw, 13rem);line-height:.85;font-weight:500;color:var(--blue);letter-spacing:-.03em}
.warranty .years small{display:block;font-family:var(--font-body);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-deep);margin-top:14px;font-weight:600}
.warranty-copy{display:flex;flex-direction:column;gap:16px}
.warranty-copy h2{font-size:clamp(1.8rem, 3vw, 2.7rem);font-weight:500}
.warranty-copy p{color:var(--text-2);max-width:60ch}
.covers{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.covers span{font-size:.78rem;padding:7px 12px;border:1px solid var(--line);background:var(--white);border-radius:999px}
.fine{font-size:.78rem;color:var(--text-3);max-width:64ch}
/* ============ TESTIMONIALS ============ */
.reviews-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(36px, 4vw, 56px)}
.featured-quote{display:grid;gap:24px;padding:clamp(28px, 4vw, 56px);background:var(--blue);color:#fff;border-radius:12px;margin:0 0 14px;position:relative}
.featured-quote .mark{font-family:var(--font-display);font-size:7rem;line-height:.6;color:rgba(255,255,255,.35);position:absolute;top:34px;left:clamp(28px, 4vw, 56px)}
.featured-quote blockquote{margin:0;padding-top:48px;font-family:var(--font-display);font-size:clamp(1.45rem, 2.4vw, 2.1rem);line-height:1.3;font-weight:500;max-width:34ch}
.featured-quote cite{font-style:normal;font-size:.85rem;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:12px}
.featured-quote cite::before{content:"";width:28px;height:1px;background:rgba(255,255,255,.5)}
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--bronze)}
.stars svg{width:14px;height:14px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;gap:14px;background:var(--white)}
.review blockquote{margin:0;font-size:.98rem;line-height:1.55;color:var(--text)}
.review cite{font-style:normal;font-size:.82rem;color:var(--text-2);font-weight:600;letter-spacing:.02em;margin-top:auto;display:flex;align-items:center;gap:10px}
.review cite::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bronze)}
/* ============ FAQ ============ */
.faq{background:var(--stone)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px, 5vw, 80px);align-items:start}
.faq-copy{display:flex;flex-direction:column;gap:20px;position:sticky;top:100px}
.faq-copy p{color:var(--text-2);max-width:44ch}
.faq-list{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:last-child{border-bottom:0}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;font-family:var(--font-display);font-size:1.4rem;font-weight:600;min-height:44px;transition:background var(--d-fast) var(--ease)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{background:var(--stone)}
.faq-list summary .plus{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);transition:transform var(--d-mid) var(--ease), background var(--d-fast) var(--ease)}
.faq-list summary .plus svg{width:14px;height:14px}
.faq-list details[open] summary .plus{transform:rotate(45deg);background:var(--blue-soft)}
.faq-list .ans{padding:0 26px 24px;color:var(--text-2);max-width:64ch;font-size:.97rem}
/* ============ AREAS ============ */
.areas-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px, 5vw, 80px);align-items:start}
.areas-copy{display:flex;flex-direction:column;gap:20px;position:sticky;top:100px}
.areas-copy p{color:var(--text-2);max-width:48ch}
.area-group{margin-bottom:26px}
.area-group h3{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-body);font-weight:600;color:var(--bronze-deep);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.area-group h3::after{content:"";flex:1;height:1px;background:var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:.84rem;padding:8px 13px;border-radius:999px;background:var(--stone);border:1px solid var(--line-2);color:var(--text);white-space:nowrap}
/* ============ CONTACT ============ */
.contact{background:var(--sand)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px, 5vw, 96px);align-items:start}
.contact-copy{display:flex;flex-direction:column;gap:22px}
.contact-copy p{color:var(--text-2);max-width:48ch}
.contact-big{font-family:var(--font-display);font-size:clamp(2.1rem, 4vw, 3.3rem);font-weight:500;color:var(--blue);display:inline-flex;align-items:center;gap:.4em;transition:color var(--d-fast) var(--ease)}
.contact-big:hover{color:var(--blue-2)}
.contact-list{list-style:none;margin:0;padding:20px 0 0;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line)}
.contact-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--text-2)}
.contact-list svg{width:18px;height:18px;color:var(--bronze);flex:none;margin-top:3px}
.contact-list strong{color:var(--text);font-weight:600}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--white);padding:clamp(22px, 3vw, 36px);border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.form .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--text-2)}
.field input,.field textarea,.field select{
width:100%;min-height:50px;padding:12px 14px;border-radius:6px;border:1px solid var(--line);
background:var(--white);color:var(--text);font:inherit;font-size:1rem;
transition:border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center}
.form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:6px}
.form-foot small{color:var(--text-2);font-size:.8rem;max-width:40ch}
.form-ok{grid-column:1 / -1;display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--blue);border-radius:6px;background:var(--blue-soft)}
.form-ok strong{font-family:var(--font-display);font-size:1.6rem;font-weight:600;color:var(--blue-2)}
.form-ok p{color:var(--text-2);font-size:.95rem}
.form-err{grid-column:1 / -1;padding:12px 14px;border:1px solid var(--bronze);border-radius:6px;background:var(--bronze-soft);color:var(--bronze-deep);font-size:.92rem}
.est-card{display:flex;flex-direction:column;gap:18px;background:var(--white);padding:clamp(22px, 3vw, 36px);border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.est-card h3{font-family:var(--font-display);font-size:clamp(1.6rem, 2.6vw, 2.2rem);font-weight:500;line-height:1.1}
.est-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.est-card li{display:flex;gap:10px;align-items:flex-start;color:var(--text-2);font-size:.95rem}
.est-card li svg{width:18px;height:18px;color:var(--bronze);flex:none;margin-top:3px}
.est-card .btn{align-self:flex-start}
/* Estimate pop-up */
.est-modal{border:0;padding:0;margin:auto;width:min(760px, calc(100% - 24px));max-height:calc(100dvh - 24px);border-radius:14px;background:var(--white);color:var(--text);box-shadow:var(--shadow);overflow:hidden}
.est-modal[open]{display:flex;flex-direction:column;animation:est-in var(--d-mid) var(--ease)}
.est-modal::backdrop{background:rgba(24,28,33,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
@keyframes est-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.est-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px clamp(20px, 3vw, 32px) 16px;border-bottom:1px solid var(--line)}
.est-head h2{font-family:var(--font-display);font-size:clamp(1.6rem, 3vw, 2.1rem);font-weight:500;line-height:1.05}
.est-head p{color:var(--text-2);font-size:.9rem;margin-top:6px}
.est-close{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.est-close:hover{background:var(--stone)}
.est-close svg{width:18px;height:18px}
.est-body{overflow-y:auto;overscroll-behavior:contain}
.est-modal .form{border:0;box-shadow:none;border-radius:0}
.est-legend{grid-column:1 / -1;font-family:var(--font-body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--bronze-deep);padding-top:10px;margin-top:4px;border-top:1px solid var(--line)}
.est-legend:first-of-type{border-top:0;padding-top:0;margin-top:0}
.field .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-3)}
.field .req{color:var(--bronze-deep)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
body.modal-open{overflow:hidden}
@media (max-width:700px){ .stage-label-r{display:none} }
@media (max-width:640px){
.est-modal{width:100%;max-width:100%;max-height:100dvh;height:100dvh;border-radius:0}
}
@media (prefers-reduced-motion:reduce){ .est-modal[open]{animation:none} }
/* ============ FOOTER ============ */
.footer{background:var(--white);color:var(--text-2);border-top:1px solid var(--line);padding-block:48px calc(40px + env(safe-area-inset-bottom,0px))}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.7fr));gap:32px;margin-bottom:36px}
.footer .brand{color:var(--text)}
.footer h4{font-family:var(--font-body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--text);margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer li a{font-size:.9rem;display:inline-flex;min-height:28px;align-items:center;transition:color var(--d-fast) var(--ease)}
.footer li a:hover{color:var(--blue)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.78rem;padding-top:22px;border-top:1px solid var(--line);color:var(--text-3)}
.footer-desc{font-size:.9rem;max-width:36ch;margin-top:14px}
.note-link{font-size:.88rem;color:var(--text-2);max-width:46ch}
.note-link a{color:var(--blue);font-weight:600}
/* Mobile call bar */
.callbar{
position:fixed;inset-inline:0;bottom:0;z-index:45;display:none;
padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-top:1px solid var(--line);gap:10px;
}
.callbar .btn{flex:1;min-height:50px;padding:0 12px;font-size:.88rem}
.callbar .callbar-colors{flex:0 0 auto;padding:0 16px}
.callbar .callbar-colors{flex:0 0 auto;padding:0 16px}
/* ============ REVEAL ============ */
.reveal{transition:opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease)}
.js .reveal:not(.in){opacity:0;transform:translateY(18px)}
.reveal.d1{transition-delay:80ms}.reveal.d2{transition-delay:160ms}.reveal.d3{transition-delay:240ms}
@media (prefers-reduced-motion:reduce){
.reveal,.chip,.btn,.svc,.sw{transition:none!important;animation:none!important}
.js .reveal:not(.in){opacity:1;transform:none}
}
/* ============ RESPONSIVE ============ */
/* Tight header widths: shrink the nav, then drop the phone number to an icon */
@media (max-width:1320px){
.nav-links a{padding:0 10px;font-size:.86rem}
.nav-inner{gap:16px}
}
@media (max-width:1240px){
.nav-phone span{display:none}
.nav-phone{padding:0;width:44px;justify-content:center}
.nav-links a{padding:0 8px;font-size:.84rem}
}
@media (max-width:1040px){
.nav-links{display:none}
.burger{display:inline-flex}
} @media (max-width:1100px){
.services{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.reviews{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.nav-links,.nav-cta .btn{display:none}
.burger{display:inline-flex}
.hero-grid{grid-template-columns:1fr;padding-block:28px 56px}
/* Narrow screens: zoom in on the tower and garages so the house is not a
thumbnail sitting on a band of pavers. */
/* Phones: tall enough to sit behind the description, not just the buttons.
The image is 281% of the screen width, so its house (the top 360 of 690
px) is exactly 110vw tall and no driveway shows; shifted left 55% to
centre the tower (x345 of 920). */
.hero{--hero-art-h:110vw}
/* Protect/Preserve/Beautify sits on white just BELOW the picture with a
small margin: the picture ends 96px up (grid's 56px bottom padding + the
26px line + 14px gap), and the line is pushed down 27px so the picture
keeps its place behind the paragraph and buttons. */
.hero-art{bottom:96px}
.hero-meta{margin-top:35px}
.hero-art img{position:absolute;top:0;left:-55.4%;width:281%;max-width:none;height:auto;object-fit:initial}
/* On phones the description overlaps the TOP of the picture, so the
panel's wash runs from the top down: heavy behind the words, clear below. */
.hero-art::after{background:linear-gradient(to bottom, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.2) 100%)}
/* Centred under the full-width buttons so the tagline balances them. */
.hero-meta{justify-content:center;align-self:stretch;text-align:center}
.hero-meta .ppb{font-size:.98rem;letter-spacing:.05em;max-width:100%}
.hero-meta .ppb b{margin:0 .45em}
.fan-stage{order:-1}
.fan{height:clamp(280px, 62vw, 400px)}
.chip{width:clamp(88px, 20vw, 140px);height:clamp(230px, 52vw, 360px);margin-left:calc(clamp(88px, 20vw, 140px) / -2)}
.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.trust-item{padding:10px 12px}
/* fifth tile spans the row so nothing sits alone; number beside its label */
.trust-item:last-child{grid-column:1 / -1;flex-direction:row;align-items:center;gap:12px}
.why-grid,.process-head,.split,.studio-grid,.studio-head,.areas-grid,.contact-grid,.compare-head,.faq-grid{grid-template-columns:1fr}
.areas-copy,.faq-copy,.studio-left{position:static}
.panel{min-height:420px;padding:28px}
.warranty-grid{grid-template-columns:1fr}
.callbar{display:flex}
body{padding-bottom:78px}
}
@media (max-width:640px){
.services,.steps,.reviews{grid-template-columns:1fr}
.form{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.nav-phone span{display:none}
.nav-phone{padding:0;width:44px;justify-content:center}
.step{min-height:0}
.hero-actions .btn{width:100%}
.trust-item .big{font-size:1.4rem}
.faq-list summary{font-size:1.25rem;padding:18px 20px}
.faq-list .ans{padding:0 20px 20px}
.apply{grid-template-columns:1fr}
.palette-card{flex-direction:column;align-items:stretch}
.palette-card .btn{width:100%}
.sw-grid{grid-template-columns:repeat(auto-fill, minmax(104px,1fr));gap:8px}
.sw-meta{flex-direction:column;align-items:flex-start;gap:8px}
.ideas-tabs{flex-wrap:wrap}
}
@media (max-width:1040px){
.nav-links{display:none}
.burger{display:inline-flex}
} @media (max-width:1100px){
.gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:200px}
.schemes{grid-template-columns:repeat(2,1fr)}
.trend-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.ideas-head{grid-template-columns:1fr}
}
@media (max-width:640px){
.trend-strip{grid-template-columns:1fr}
.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
.g.h2{grid-row:span 1}
.schemes{grid-template-columns:1fr}
}
/* Phones and small tablets: bring the colour chips up right under the drawing,
photo and surface buttons, and move the palette and the photo grids after them. */
@media (max-width:900px){
.studio-grid{row-gap:14px;grid-template-columns:minmax(0,1fr)}
.studio-left{display:contents}
/* The drawing stays where it sits, directly above the photo - it used to
follow the screen (position:sticky) and the owner asked for it to stop
(2026-09-23). The floating preview, which opens by itself at the chips,
is what keeps a live view in sight while scrolling. */
.studio-left > .house-frame{padding:8px}
.studio-left > .house-frame{order:1}
.studio-left > .studio-photo{order:2}
.studio-left > .apply{order:3}
.studio-grid > :not(.studio-left){order:4}
.studio-left > .palette-card{order:5}
.studio-left > .studio-note{order:6}
.studio-left > .looks{order:7}
}
/* Interior colour gallery (interior page) */
.ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(10px,1.4vw,16px)}
.ic-shot{margin:0;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.ic-shot button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.ic-shot img{display:block;width:100%;height:auto;aspect-ratio:1000/854;object-fit:cover;background:var(--stone)}
.ic-shot figcaption{padding:10px 12px 12px;font-size:.84rem;color:var(--text-2)}
.ic-shot button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.lb-ic{border:0;padding:0;margin:auto;width:min(1100px,calc(100% - 22px));background:transparent;overflow:visible}
.lb-ic::backdrop{background:rgba(20,23,27,.85)}
.lb-ic img{display:block;width:100%;height:auto;max-height:84vh;object-fit:contain;border-radius:12px;background:#111}
.ic-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;color:#fff}
.ic-bar strong{font-family:var(--font-display);font-size:1.25rem;font-weight:500}
.ic-nav{display:flex;gap:8px}
.ic-bar button{min-height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:600 .92rem var(--font-body);cursor:pointer}
.ic-bar button:hover{background:rgba(255,255,255,.14)}
/* Floating preview: drawing + photo, minimise or close (clears the mobile call bar) */
/* The bar carries eight controls (S, share, reset, C, expand, minimise, close
and the title). At the old width it needed 196px in a 150px panel on phones,
so the right-hand four were clipped — the close button entirely (owner,
2026-09-23). The panel is now wide enough for the row, the title truncates
instead of pushing, and the bar wraps rather than clipping if it ever runs
out of room again. */
.mini-house{position:fixed;right:16px;bottom:16px;z-index:44;width:clamp(250px,22vw,290px);
background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;
box-shadow:0 18px 40px -18px rgba(35,38,42,.5);animation:mini-in var(--d-mid) var(--ease)}
.mini-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 5px;padding:6px 6px 6px 10px;background:var(--blue-soft);border-bottom:1px solid var(--line)}
.mini-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-2);cursor:pointer}
/* Expand (owner, 2026-09-23): the preview grows to a large centred panel so
the colours can actually be judged; the same button shrinks it back. */
.mini-big{flex:none;width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;
background:transparent;color:var(--blue);cursor:pointer;
transition:background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.mini-big svg{width:13px;height:13px}
.mini-big:hover{background:var(--white);transform:scale(1.12)}
.mini-big[aria-pressed="true"]{background:var(--blue);color:#fff}
.mini-big:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
/* right/bottom need !important too: the phone rule further down still pins the
panel to the corner, and centring it from there threw it off screen. */
.mini-house.is-big{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
transform:translate(-50%,-50%);width:min(94vw,900px);max-height:92vh;overflow:auto;
box-shadow:0 30px 70px -20px rgba(35,38,42,.6)}
.mini-house.is-big .mini-body{flex-direction:row;gap:10px;padding:12px}
.mini-house.is-big .mini-art,.mini-house.is-big .mini-photo{flex:1;min-width:0}
.mini-house.is-big .mini-sw{width:30px;height:30px}
.mini-house.is-big .mini-title{font-size:.8rem}
@media (max-width:700px){ .mini-house.is-big .mini-body{flex-direction:column} }
/* Share (owner, 2026-09-23): the classic three-dot share mark, in the preview's
bar and as a row under "Your colors on this home". */
.mini-share{flex:none;width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;
background:transparent;color:var(--blue);cursor:pointer;
transition:background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.mini-share svg{width:13px;height:13px}
.mini-share:hover{background:var(--white);transform:scale(1.12)}
.mini-share.is-done{color:#2E7D5B}
.mini-share:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.share-scheme{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;
margin-top:2px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);
font:inherit;font-size:.85rem;font-weight:600;color:var(--blue);cursor:pointer;
transition:background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease)}
.share-scheme svg{width:16px;height:16px}
.share-scheme:hover{background:var(--blue-soft);border-color:var(--blue)}
.share-scheme:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.share-scheme.is-done{color:#2E7D5B;border-color:#2E7D5B;background:#EAF5EF}
.share-scheme.is-done span::after{content:" — copied"}
/* "S" beside "Your colors": the colour schemes, painted whole. VP blue. */
.mini-schemes{flex:none;width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:5px;
background:var(--blue);color:#fff;font-family:var(--font-display);font-size:.85rem;font-weight:600;line-height:1;
cursor:pointer;transition:background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.mini-schemes:hover{background:var(--blue-2);transform:scale(1.08)}
.mini-schemes:active{transform:scale(.94)}
.mini-schemes:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
/* Blue triangle beside "Your colors": reset to the starting colours. VP blue. */
.mini-reset{flex:none;width:22px;height:22px;display:grid;place-items:center;padding:0;margin-left:-2px;
border:0;border-radius:6px;background:transparent;color:var(--blue);cursor:pointer;
transition:background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.mini-reset svg{width:13px;height:13px}
.mini-reset:hover{background:var(--white);transform:scale(1.12)}
.mini-reset:active{transform:scale(.94)}
.mini-reset:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.mini-house .mini-title{flex:0 1 auto}
.mini-house .mini-reset + *{margin-left:auto}
/* The top bar is the drag handle (site.js makeMiniDraggable). */
.mini-head{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.mini-head .mini-title{cursor:grab}
.mini-house.is-dragging{animation:none;box-shadow:0 26px 50px -18px rgba(35,38,42,.6)}
.mini-house.is-dragging .mini-head,.mini-house.is-dragging .mini-title{cursor:grabbing}
.mini-btn{width:26px;height:26px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:7px;
background:transparent;color:var(--blue-2);cursor:pointer}
.mini-btn svg{width:13px;height:13px}
.mini-btn:hover{background:var(--white);border-color:var(--line)}
.mini-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.mini-body{display:flex;flex-direction:column;gap:6px;padding:8px}
.mini-art,.mini-photo{border-radius:7px;overflow:hidden;background:var(--stone);display:block;width:100%;height:auto}
.mini-house svg.house{display:block;width:100%;height:auto}
/* The scheme strip: stays put whether the panel is large or minimised, and has
its own show/hide so it can be folded away on its own. */
.mini-swatches{display:flex;flex-wrap:wrap;gap:4px;padding:7px 8px;background:var(--white);border-bottom:1px solid var(--line)}
.mini-house.hide-sw .mini-swatches{display:none}
.mini-sw{width:23px;height:23px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--white);cursor:pointer;
transition:transform var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease)}
.mini-sw i{display:block;width:100%;height:100%;border-radius:3px}
.mini-sw:hover{transform:translateY(-2px) scale(1.06);border-color:var(--text)}
.mini-sw:active{transform:translateY(0) scale(1)}
.mini-sw[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}
.mini-sw:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.mini-swatches{cursor:zoom-in}
.mini-sw-more{width:23px;height:23px;display:grid;place-items:center;padding:0;border:1px dashed var(--line);border-radius:6px;
background:var(--white);color:var(--blue);cursor:pointer;
transition:background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.mini-sw-more svg{width:12px;height:12px}
.mini-sw-more:hover{background:var(--blue-soft);border-color:var(--blue);border-style:solid;transform:translateY(-2px)}
.mini-sw-more:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
/* The whole scheme, opened from the strip */
.scheme-modal{border:0;padding:0;margin:auto;width:min(440px, calc(100% - 24px));border-radius:16px;
background:var(--white);color:var(--text);box-shadow:var(--shadow);overflow:hidden}
.scheme-modal[open]{display:block;animation:cm-in var(--d-mid) var(--ease)}
.scheme-modal::backdrop{background:rgba(24,28,33,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.scheme-head{display:flex;align-items:center;gap:10px;padding:16px 16px 0 20px}
.scheme-head h2{flex:1;font-family:var(--font-display);font-size:1.6rem;font-weight:500;margin:0;line-height:1.1}
.scheme-note{margin:4px 20px 12px;font-size:.84rem;color:var(--text-2)}
.scheme-grid{display:grid;gap:8px;padding:0 16px 18px}
.scheme-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px;text-align:left;
border:1px solid var(--line);border-radius:11px;background:var(--white);cursor:pointer;
transition:background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.scheme-row:hover{background:var(--blue-soft);border-color:var(--blue);transform:translateY(-1px)}
.scheme-row:active{transform:translateY(0)}
.scheme-row[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}
.scheme-row:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.scheme-chip{flex:none;width:52px;height:52px;border-radius:8px;border:1px solid rgba(35,38,42,.14)}
.scheme-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.scheme-surface{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.scheme-surface i{font-style:normal;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--bronze-deep)}
.scheme-name{font-size:1rem;font-weight:600;line-height:1.2}
.scheme-num{font-size:.78rem;color:var(--text-2);font-variant-numeric:tabular-nums}
@media (max-width:480px){ .scheme-grid{grid-template-columns:1fr} .scheme-chip{width:44px;height:44px} }
@media (prefers-reduced-motion:reduce){ .scheme-modal[open]{animation:none} .scheme-row:hover{transform:none} }
.mini-house.is-min .mini-swatches{border-bottom:0}
.mini-house.is-min.hide-sw .mini-head{border-bottom:0}
.mini-house.is-min .mini-body{display:none}
.mini-house.is-min{width:auto}
@keyframes mini-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .mini-house{animation:none} }
@media (max-width:900px){
.mini-house{width:min(300px,calc(100vw - 24px));right:12px;bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}
/* "Show more colors" — tinted so it reads as the next step, not a quiet outline */
.btn-more{border:1px solid #B9C9D8;background:var(--blue-soft);color:var(--blue-2);font-weight:700}
.btn-more:hover{background:#DAE6F0;border-color:var(--blue);color:var(--blue-2)}
.sw-more .btn{min-height:48px;padding-inline:26px}
/* "VP" tab: reopens the floating preview after it has been closed */
/* VP: back to the top. Its own control on every page, high on the right so it
never crowds the colour preview or the C tab below it. */
.top-tab{position:fixed;right:0;top:38%;z-index:46;display:flex;align-items:center;justify-content:center;
width:46px;height:44px;padding:0;border:1px solid var(--line);border-right:0;border-radius:10px 0 0 10px;
background:var(--blue);color:#fff;cursor:pointer;box-shadow:0 10px 26px -12px rgba(35,38,42,.6);
transition:width var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
animation:mini-in var(--d-mid) var(--ease)}
.top-tab span{font-family:var(--font-display);font-size:1.05rem;font-weight:600;letter-spacing:.04em}
.top-tab:hover{background:var(--blue-2);width:54px}
/* Switched on (at the colour search, tap to go back): Crabby Apple SW 7592,
the red the old C tab used. */
.top-tab.is-on{background:#753531}
/* Link target for "back to View any of 1,700+ colors" from other pages. */
#try-colors{scroll-margin-top:90px}
/* The square "C" inside the floating preview on the other pages: Crabby
Apple like the C tab, but a plain square. Takes you back to the heading. */
.mini-back{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:5px;
background:#753531;color:#fff;text-decoration:none;font-family:var(--font-display);font-size:1rem;
font-weight:600;line-height:1;box-shadow:0 4px 10px -6px rgba(35,38,42,.6);
transition:background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.mini-back:hover{background:#8C403B;transform:translateY(-1px)}
.mini-back:focus-visible{outline:2px solid #753531;outline-offset:2px}
.mini-house.is-away .mini-photo{aspect-ratio:320/200;object-fit:cover}
/* After a colour is changed away from the studio the photo no longer matches;
it is faded until the home page's engine redraws it. */
.mini-photo.is-stale{opacity:.4;filter:grayscale(.5)}
.top-tab.is-on:hover{background:#8C403B}
.top-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .top-tab{animation:none} }
/* The red "C" tab (.color-tab) was removed on 2026-09-28 at the owner's
request, ending the A/B test it ran against the VP switch. Its rules are
gone with it; the red C *inside* the preview (.mini-back) is a different
control and is styled further up. */