/* =================================================================
CAPE TOWN WRAPS AND BRANDING SERVICES: styles
Used by index.html and studio.html (studio.html adds css/studio.css).
Look: calm and premium. Warm cream background, very light large
headings with one serif italic word, tiny "(01) LABEL" tags, pill
buttons, big rounded photo cards and a few dark rounded panels.
HOW THIS FILE IS ORGANISED
1. TOKENS every colour, font and size, as CSS variables
2. BASE reset and default text styles
3. LAYOUT page width and section spacing
4. COMPONENTS labels, headings, pill buttons, cards
5. SECTIONS one block per page section, in page order
6. SHARED phone action bar, WhatsApp button, reveal, reduced motion
7. UTILITIES small helper classes
MOBILE-FIRST: the normal rules are for phones. Bigger screens get extra
rules inside @media (min-width: …) blocks.
================================================================= */
/* =================================================================
1. TOKENS: change a value here and it changes everywhere
================================================================= */
:root{
color-scheme:light;
/* fonts: Inter (it switches to its "Display" shape at big sizes by itself)
and Instrument Serif italic for the one highlighted word in a heading */
--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--serif:'Instrument Serif',Georgia,'Times New Roman',serif;
--mono:var(--sans); /* the studio's small labels use this; same font here */
/* colours */
--bg:#eeebe5; /* warm cream page background */
--bg-2:#f5f3ee; /* lighter panel */
--card:#f8f6f2; /* cards on the cream */
--card-2:#e6e2da; /* slightly darker cream */
--text:#121210; /* near-black ink */
--muted:#5f5c55; /* grey text (5.6:1 on the cream) */
--dim:#77736b; /* quieter text, small notes */
--line:rgba(18,18,16,.12); /* thin dividers */
--line-2:rgba(18,18,16,.24); /* button outlines */
--dark:#121210; /* dark panels */
--dark-2:#1c1c1a; /* cards inside dark panels */
--cream:#f4f1ea; /* text on dark panels and photos */
--cream-muted:#a9a59c; /* grey text on dark */
--accent:#121210; /* "selected" colour (black pills); used by the studio */
--accent-ink:#121210;
--on-accent:#f4f1ea;
--wa:#25d366; /* WhatsApp green (dots and the WhatsApp buttons) */
--star:#b8913c; /* review stars */
--glass:rgba(238,235,229,.82); /* see-through cream (header when scrolled, phone bar) */
--stage-bg:#e6e3dc; /* 3D view background in the Wrap Studio */
--err:#b42318; --ok:#0f6b35;
/* shapes and motion */
--r:20px; /* card corners */
--r-big:28px; /* big photo cards and dark panels */
--out:cubic-bezier(.16,1,.3,1);/* easing: fast start, soft finish */
--shadow:0 30px 60px -36px rgba(30,25,15,.35);
--bar-h:0px; /* height of the phone action bar (set in SHARED) */
}
/* =================================================================
2. BASE
================================================================= */
*,*::before,*::after{box-sizing:border-box} /* widths include padding and border */
html{scroll-behavior:smooth;scroll-padding-top:84px} /* in-page links stop below the fixed header */
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:var(--bar-h)}
img{max-width:100%;height:auto;display:block} /* height:auto keeps the shape when width/height are set in the HTML */
a{color:inherit}
h1,h2,h3,h4{font-weight:300;letter-spacing:-.035em;line-height:1.04;margin:0 0 .5em}
h3{font-size:1.3rem;font-weight:400;letter-spacing:-.02em;line-height:1.2}
p{margin:0 0 1em}
/* the one serif italic word in a heading, e.g. "Transform your car with vinyl" */
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.muted{color:var(--muted)}
.hl{font-family:var(--serif);font-style:italic;font-weight:400} /* used by the studio heading */
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px} /* keyboard focus ring */
.skip{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--cream);padding:10px 14px;border-radius:100px;z-index:900}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* for screen readers only */
.sprite{position:absolute} /* the hidden SVG that holds every icon */
/* =================================================================
3. LAYOUT
================================================================= */
.container{width:min(1280px,100% - 32px);margin-inline:auto} /* 16px gutter on phones */
.frame{padding-inline:10px} /* full-width rounded panels sit 10px from the screen edge */
section{padding:80px 0;position:relative}
@media (min-width:900px){section{padding:130px 0}.container{width:min(1280px,100% - 64px)}}
/* =================================================================
4. COMPONENTS
================================================================= */
/* "(01) WHAT WE DO" style tag above headings */
.label{display:block;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
/* big light heading */
.h-xl,.display{font-size:clamp(2.1rem,7vw,3.5rem);font-weight:300;letter-spacing:-.04em;line-height:1.04;margin:0 0 .45em}
.display .ln{display:inline}
.lead{color:var(--muted);font-size:1.02rem;max-width:560px}
.sec-head{display:grid;gap:8px;margin-bottom:44px}
.sec-head .btn{justify-self:start}
@media (min-width:900px){.sec-head{grid-template-columns:1fr auto;align-items:end;margin-bottom:64px}.sec-head .btn{justify-self:end}}
/* ---------- Pill buttons ----------
.btn is the base. Pick one colour: .btn-dark (black), .btn-light (cream),
.btn-line (outline on cream), .btn-glass (see-through, on photos and dark panels).
Every button starts with a small dot; .dot-wa makes it WhatsApp green. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px 0 22px;border-radius:100px;border:1px solid transparent;font:500 .82rem var(--sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .35s var(--out),background-color .25s,border-color .25s,color .25s}
.btn::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.btn.dot-wa::before{background:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.2)}
.btn.no-dot::before{display:none}
.btn svg{width:17px;height:17px;flex:none}
.btn:active{transform:scale(.97)}
.btn-dark{background:var(--text);color:var(--cream)}
.btn-dark:hover{background:#2a2a27}
.btn-light{background:var(--cream);color:var(--text)}
.btn-light:hover{background:#fff}
.btn-line{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-line:hover{border-color:var(--text)}
.btn-glass{background:rgba(255,255,255,.08);border-color:rgba(244,241,234,.35);color:var(--cream);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.btn-wa{background:var(--wa);color:#04210e}
.btn-sm{min-height:36px;padding:0 16px 0 14px;font-size:.76rem;gap:8px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
/* small pill tag, e.g. on photos: "• FULL WRAP" */
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:100px;background:rgba(244,241,234,.85);color:var(--text);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.tag.glass{background:rgba(255,255,255,.08);border:1px solid rgba(244,241,234,.35);color:var(--cream)}
/* =================================================================
5. SECTIONS (in page order)
================================================================= */
/* ---------- Header ----------
Logo on the left, a round black menu button on the right.
Gets a blurred cream background once you scroll (js/site.js adds .scrolled). */
.header{position:fixed;inset:0 0 auto;z-index:120;transition:background-color .3s,backdrop-filter .3s}
.header.scrolled{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:68px;padding-inline:16px}
/* REPLACE: logo. When the client sends their logo, swap the .logo contents for
*/
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:.9rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.logo-mark{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%;font:italic 400 .95rem var(--serif);letter-spacing:0;text-transform:none}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-right .btn{display:none}
.menu-btn{position:relative;width:42px;height:42px;border:0;border-radius:50%;background:var(--text);color:var(--cream);cursor:pointer;display:grid;place-items:center}
.menu-btn i{display:grid;gap:4px;width:14px}
.menu-btn i::before,.menu-btn i::after{content:"";height:1.5px;background:currentColor;transition:transform .35s var(--out)}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(2.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-2.75px) rotate(-45deg)}
@media (min-width:760px){.nav-right .btn{display:inline-flex}}
@media (min-width:900px){.nav{height:76px;padding-inline:24px}}
/* full-screen menu, opened by the round button (js/site.js) */
.menu{position:fixed;inset:0;z-index:110;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:96px 24px 40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;overflow-y:auto}
.menu.open{opacity:1;visibility:visible}
.menu ol{list-style:none;margin:0;padding:0;counter-reset:m}
.menu li a{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:clamp(1.8rem,7vw,3rem);font-weight:300;letter-spacing:-.04em;line-height:1.1;transition:padding .35s var(--out)}
.menu li a::before{counter-increment:m;content:"(" counter(m,decimal-leading-zero) ")";font-size:.68rem;font-weight:500;letter-spacing:.16em;color:var(--muted)}
.menu li a:hover{padding-left:10px}
.menu-foot{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.menu-foot small{color:var(--muted);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
@media (min-width:700px){.menu{padding:110px 8vw 50px}.menu-foot{flex-direction:row;flex-wrap:wrap;align-items:center}}
/* ---------- Hero: one big rounded photo card ---------- */
.hero{padding:72px 0 0}
.hero-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-big);min-height:calc(100svh - 82px);display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:20px;color:var(--cream)}
.hero-card picture img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 60%} /* keeps the shark mouth in view */
/* dark fade so the cream text is always readable */
.hero-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,13,11,.78) 0%,rgba(14,13,11,.45) 55%,rgba(14,13,11,.2) 100%),linear-gradient(0deg,rgba(14,13,11,.7) 0%,transparent 45%)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hero-top small{display:none;font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.8)}
.hero h1{font-size:clamp(2.5rem,9.5vw,4.6rem);font-weight:300;letter-spacing:-.045em;line-height:.98;margin:0 0 18px;max-width:780px}
.hero-sub{max-width:470px;color:rgba(244,241,234,.86);font-size:1.02rem;margin-bottom:26px}
.hero-actions{display:flex;flex-direction:column;gap:10px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:.78rem;color:rgba(244,241,234,.85)}
.hero-meta a{text-decoration:none}
.hero-meta .stars{color:#e3c27a;letter-spacing:1px}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--wa);margin-right:8px;box-shadow:0 0 0 3px rgba(37,211,102,.25)}
/* three short statements along the bottom of the card */
.hero-foot{display:none;grid-template-columns:repeat(3,1fr);padding-top:18px;border-top:1px solid rgba(244,241,234,.22);font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.hero-foot span:nth-child(2){text-align:center}
.hero-foot span:nth-child(3){text-align:right}
/* the headline fades up when the page opens */
.hero-in{animation:fadeUp 1.1s var(--out) both}
.hero-in.d1{animation-delay:.12s}.hero-in.d2{animation-delay:.24s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}}
@media (min-width:560px){.hero-actions{flex-direction:row;flex-wrap:wrap}}
@media (min-width:900px){
.hero{padding-top:76px}
.hero-card{padding:28px 32px;min-height:calc(100svh - 86px)}
.hero-top small{display:block}
.hero-foot{display:grid}
}
/* ---------- 24hr roadside: a dark rounded band ---------- */
.roadside{padding:10px 0 0}
.rs{display:grid;gap:22px;padding:30px 22px;border-radius:var(--r-big);background:var(--dark);color:var(--cream)}
.rs .label{color:var(--cream-muted);margin-bottom:14px}
.rs h2{font-size:clamp(1.8rem,5.5vw,2.8rem);margin:0 0 10px}
.rs p{color:var(--cream-muted);margin:0;max-width:480px}
.rs .btn-row{flex-direction:column}
@media (min-width:560px){.rs .btn-row{flex-direction:row}}
@media (min-width:900px){.rs{grid-template-columns:1fr auto;align-items:center;padding:44px 48px}}
/* ---------- (01) Intro statement + a row of service words ---------- */
.intro h2{max-width:900px}
.strip{margin-top:60px}
.strip p{text-align:center;font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
/* the words drift slowly sideways (a "marquee"); the list is written twice so it loops without a gap */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 40s linear infinite}
.marquee ul{display:flex;align-items:center;gap:56px;list-style:none;margin:0;padding:0 28px;color:#8f8a80}
.marquee li{font-size:1.5rem;white-space:nowrap;letter-spacing:-.02em}
.marquee li:nth-child(3n+1){font-family:var(--serif);font-style:italic;font-size:1.7rem}
.marquee li:nth-child(3n+2){font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:1.15rem}
@keyframes slide{to{transform:translateX(-50%)}}
/* ---------- (02) Dark panel with 4 numbered cards ---------- */
.dark-panel{border-radius:var(--r-big);background:var(--dark);color:var(--cream);padding:60px 18px 18px}
.dark-panel .label{color:var(--cream-muted)}
.dark-panel .h-xl{margin-bottom:40px}
.cards4{display:grid;gap:12px}
.dcard{display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-height:240px;padding:26px 24px;border-radius:var(--r);background:var(--dark-2);border:1px solid rgba(244,241,234,.06)}
.num{font-family:var(--serif);font-style:italic;font-size:2.6rem;line-height:1;color:#8e8a82}
.num::after{content:" —";font-size:.6em}
.dcard h3{color:var(--cream);margin:0 0 8px}
.dcard p{color:var(--cream-muted);margin:0;font-size:.92rem}
@media (min-width:760px){.cards4{grid-template-columns:1fr 1fr}.dark-panel{padding:80px 36px 36px}}
/* ---------- (03) About: oval photo + text ---------- */
.about{display:grid;gap:40px;align-items:center}
.oval{position:relative;margin:0;max-width:440px;width:100%;justify-self:center}
.oval img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:50%}
.oval figcaption{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);padding:10px 18px;border-radius:100px;background:rgba(238,235,229,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center;font-size:.85rem;font-weight:500;white-space:nowrap}
.oval figcaption small{display:block;font-size:.7rem;font-weight:400;color:var(--muted)}
.about-text p{color:var(--muted)}
.about-text blockquote{margin:26px 0;padding:0 0 26px;border-bottom:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:1.45rem;line-height:1.3;color:var(--text)}
@media (min-width:900px){.about{grid-template-columns:1fr 1.1fr;gap:80px}}
/* ---------- (04) Services: a list with thin dividers ---------- */
.svc-group + .svc-group{margin-top:64px}
.group-title{display:flex;justify-content:space-between;align-items:baseline;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-bottom:14px}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-row{display:grid;gap:6px;padding:26px 0;border-bottom:1px solid var(--line)}
.svc-row small{font-size:.68rem;font-weight:500;letter-spacing:.16em;color:var(--muted)}
.svc-row h3{font-size:clamp(1.45rem,4.5vw,2rem);font-weight:300;letter-spacing:-.035em;margin:4px 0 2px}
.svc-row p{color:var(--muted);margin:0 0 10px;max-width:640px}
.svc-row .btn{justify-self:start}
.svc-row.hot{background:var(--dark);color:var(--cream);border-radius:var(--r);padding:26px 22px;border:0;margin:12px 0}
.svc-row.hot small,.svc-row.hot p{color:var(--cream-muted)}
@media (min-width:900px){
.svc-row{grid-template-columns:70px 1fr auto;align-items:center;column-gap:24px}
.svc-row small{grid-row:1 / span 2}
.svc-row p{grid-column:2;margin:0}
.svc-row .btn{grid-column:3;grid-row:1 / span 2}
.svc-row.hot{padding:28px 30px}
}
/* ---------- (05) Preview your wrap (Wrap Studio) ---------- */
.panel-light{border-radius:var(--r-big);background:var(--bg-2);border:1px solid var(--line);padding:22px;display:grid;gap:30px;align-items:center}
.panel-light .lead{margin-bottom:26px}
.studio-pic{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#e6e3dc}
.studio-pic img{width:100%;height:100%;object-fit:cover}
.studio-pic .tag{position:absolute;left:14px;top:14px}
.studio-pic .dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;padding:8px 10px;border-radius:100px;background:rgba(238,235,229,.85);backdrop-filter:blur(8px)}
.studio-pic .dots i{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.sw-black{background:linear-gradient(160deg,#2a2c30,#0d0e10 60%)}
.sw-sand{background:radial-gradient(circle at 30% 25%,#e6d8bd,#b9a582 70%)}
.sw-olive{background:#4f5a35}
.sw-grey{background:radial-gradient(circle at 30% 20%,#b4b8bd,#5e6468 70%)}
.sw-gold{background:radial-gradient(circle at 30% 20%,#f3d48a,#b88a2e 60%)}
.sw-red{background:#8f1424}
@media (min-width:900px){.panel-light{grid-template-columns:1fr 1.1fr;padding:56px;gap:60px}}
/* ---------- (06) Recent work: case-study style cards ---------- */
.work-grid{display:grid;gap:40px 16px}
.work{display:block;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.work-img{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--card-2)}
.work-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--out)}
.work:hover .work-img img{transform:scale(1.04)}
.work-img .tag{position:absolute;left:14px;top:14px}
.work small{display:block;margin:16px 0 4px;font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.work b{display:block;font-size:1.25rem;font-weight:400;letter-spacing:-.02em;line-height:1.25}
.work span.desc{display:block;margin-top:6px;color:var(--muted);font-size:.94rem;line-height:1.55}
@media (min-width:760px){.work-grid{grid-template-columns:1fr 1fr}}
/* photo viewer that opens when a work card is tapped */
.lightbox{position:fixed;inset:0;z-index:500;background:rgba(18,18,16,.95);display:none;align-items:center;justify-content:center;padding:16px;color:var(--cream)}
.lightbox.open{display:flex}
.lightbox figure{margin:0;max-width:min(1000px,100%);text-align:center}
.lightbox img{max-height:76vh;width:auto;margin:auto;border-radius:16px}
.lightbox figcaption{margin-top:12px;font-size:.85rem;color:var(--cream-muted)}
.lb-btn{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(244,241,234,.3);color:var(--cream);width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.1rem}
.lb-btn:hover{background:var(--cream);color:var(--text)}
.lb-close{top:14px;right:14px}.lb-prev{left:14px;bottom:20px}.lb-next{right:14px;bottom:20px}
@media (min-width:700px){.lb-prev,.lb-next{bottom:auto;top:50%;transform:translateY(-50%)}}
/* ---------- (07) How it works: numbered cards on a light panel ---------- */
.center{text-align:center}
.center .lead{margin-inline:auto}
.steps{display:grid;gap:12px;list-style:none;margin:44px 0 0;padding:12px;border-radius:var(--r-big);background:var(--bg-2);border:1px solid var(--line)}
.step{display:flex;flex-direction:column;justify-content:space-between;gap:50px;min-height:220px;padding:26px 24px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.step .num{color:#b3aea4}
.step h3{margin:0 0 6px}
.step p{color:var(--muted);margin:0;font-size:.93rem}
@media (min-width:760px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
/* ---------- (08) Reviews: dark panel over a photo, glass card ---------- */
.reviews{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-big);padding:70px 18px;color:var(--cream);text-align:center}
.reviews > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:blur(3px) saturate(.6);transform:scale(1.05)}
.reviews::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(24,30,26,.78)} /* deep green-grey tint */
.reviews .label{color:var(--cream-muted)}
.glass-card{max-width:640px;margin:36px auto 0;padding:34px 24px;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(244,241,234,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.score{font-family:var(--serif);font-style:italic;font-size:clamp(4.5rem,18vw,7rem);line-height:.9}
.glass-card .stars{color:#e3c27a;font-size:1.2rem;letter-spacing:4px;margin:6px 0 4px}
.glass-card p{color:var(--cream-muted);margin-bottom:24px}
.glass-card .btn-row{justify-content:center}
@media (min-width:900px){.reviews{padding:110px 40px}}
/* ---------- (09) Pricing + quote form ---------- */
.price-grid{display:grid;gap:12px}
.price-card{padding:24px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.price-card h3{margin:0}
.price-list{list-style:none;margin:0;padding:0;flex:1}
.price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:.95rem}
.price-list li:first-child{border-top:0;padding-top:0}
.pl-price{flex:none;text-align:right;font-weight:500;white-space:nowrap}
.pl-price small{margin-right:4px;color:var(--muted);font-size:.72rem;font-weight:400}
.pl-price.ask{font-size:.72rem;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.price-card .btn{align-self:flex-start}
.notes{display:grid;gap:10px;margin-top:14px}
.note{display:flex;gap:12px;align-items:center;margin:0;padding:16px 20px;border-radius:100px;background:var(--dark);color:var(--cream);font-size:.92rem}
.note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cream);flex:none}
@media (min-width:700px){.price-grid{grid-template-columns:1fr 1fr}.notes{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.price-grid{grid-template-columns:repeat(4,1fr)}}
.quote{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:80px}
.quote-aside ul{list-style:none;padding:0;margin:22px 0}
.quote-aside li{display:flex;gap:12px;margin-bottom:10px;color:var(--muted)}
.quote-aside li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text);flex:none;margin-top:10px}
.form{padding:22px 18px;border-radius:var(--r-big);background:var(--bg-2);border:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-left:18px}
.req{color:var(--text)}
/* pill-shaped inputs; 16px text stops iPhones zooming in when a field is tapped */
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:100px;padding:15px 20px;width:100%;transition:border-color .2s,box-shadow .2s}
.field select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121210' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 20px center;padding-right:44px}
.field textarea{border-radius:22px;min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(18,18,16,.08)}
.field input::placeholder,.field textarea::placeholder{color:#9a958b}
.field.invalid input,.field.invalid select{border-color:var(--err)}
.err{color:var(--err);font-size:.8rem;min-height:1em;padding-left:18px}
.form-actions{margin-top:18px}
.form-note{font-size:.8rem;color:var(--dim);margin:14px 0 0;padding-left:18px}
.success{display:none;margin-top:16px;padding:14px 20px;border-radius:var(--r);background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4);color:var(--ok)}
.success a{color:inherit}
.success.show{display:block}
.studio-note{margin:0 0 16px;padding:12px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--line);font-size:.9rem}
@media (min-width:640px){.form{padding:34px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.field.full{grid-column:1/-1}}
@media (min-width:960px){.quote{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start}.quote-aside{position:sticky;top:110px}}
/* ---------- (10) FAQ: rows with a round + button (each is a , no JavaScript needed) ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-of-type{border-top:1px solid var(--line)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;cursor:pointer;list-style:none;font-size:1.08rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{flex:none;position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);transition:background-color .3s,transform .35s var(--out)}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;translate:-50% -50%}
.faq-item summary i::after{rotate:90deg}
.faq-item[open] summary i{background:var(--text);color:var(--cream);transform:rotate(45deg)}
.faq-item p{color:var(--muted);margin:0;padding:0 50px 24px 0;max-width:700px}
/* ---------- Call to action: rounded photo card ---------- */
.cta{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-big);padding:110px 22px;text-align:center;color:var(--cream)}
.cta > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,13,11,.55)}
.cta .h-xl{max-width:720px;margin-inline:auto}
.cta p{max-width:480px;margin:0 auto 28px;color:rgba(244,241,234,.85)}
.cta .btn-row{justify-content:center}
@media (min-width:900px){.cta{padding:170px 40px}}
/* ---------- (11) Find us ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.info-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.info-list li{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--line)}
.info-list small{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.info-list a,.info-list span{font-size:1.15rem;font-weight:300;letter-spacing:-.02em;text-decoration:none}
.info-list a:hover{text-decoration:underline}
.map{border-radius:var(--r-big);overflow:hidden;min-height:340px;background:var(--card-2)}
.map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.35) sepia(.12)} /* softer colours to match the cream */
@media (min-width:900px){.contact{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px}.map,.map iframe{min-height:460px}}
/* ---------- Footer: dark rounded panel with the name huge over a photo ---------- */
.footer{padding:0 0 10px}
.foot{border-radius:var(--r-big);background:var(--dark);color:var(--cream);padding:50px 22px 22px}
.foot-top{display:grid;gap:36px;padding-bottom:40px}
.foot-top h3{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:300;max-width:420px;margin:0}
.foot h4{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-muted);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px;font-size:.95rem}
.foot a{text-decoration:none;color:var(--cream)}
.foot a:hover{text-decoration:underline}
.foot .link-btn{color:var(--cream)}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.giant{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);display:grid;place-items:center;padding:30px 10px}
.giant img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;filter:brightness(.75)}
.giant span{font-size:clamp(2.6rem,12.5vw,11rem);font-weight:300;letter-spacing:-.05em;line-height:.9;color:var(--cream);white-space:nowrap;text-transform:uppercase}
.foot-bottom{display:flex;flex-direction:column;gap:10px;margin-top:22px;font-size:.8rem;color:var(--cream-muted)}
.foot-bottom p{margin:0;max-width:620px}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;text-decoration:underline}
@media (min-width:900px){.foot{padding:70px 40px 30px}.foot-top{grid-template-columns:1fr 1.2fr}.foot-cols{grid-template-columns:repeat(3,1fr)}.foot-bottom{flex-direction:row;justify-content:space-between}}
/* =================================================================
6. SHARED
================================================================= */
/* ---------- Phone action bar ----------
Fixed to the bottom on phones: Call / WhatsApp / Get a Quote always one tap away. */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:400;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.action-bar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;border-radius:100px;text-decoration:none;font-size:.8rem;font-weight:500;border:1px solid var(--line-2);color:var(--text)}
.action-bar a svg{width:17px;height:17px}
.action-bar .ab-wa{background:var(--wa);border-color:var(--wa);color:#04210e}
.action-bar .ab-quote{background:var(--text);border-color:var(--text);color:var(--cream)}
:root{--bar-h:calc(66px + env(safe-area-inset-bottom))}
/* ---------- Floating WhatsApp button (tablets and desktops) ---------- */
.wa-float{display:none}
@media (min-width:760px){
:root{--bar-h:0px}
.action-bar{display:none}
.wa-float{display:grid;position:fixed;right:20px;bottom:20px;z-index:400;width:58px;height:58px;border-radius:50%;background:var(--wa);place-items:center;box-shadow:0 12px 30px -10px rgba(37,211,102,.7);transition:transform .3s var(--out)}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:28px;height:28px;color:#fff}
}
/* ---------- Reveal on scroll ----------
Only when JavaScript works (class "js" on ): main.js adds .in when an element scrolls into view. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--out),transform .9s var(--out)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
/* People who turn on "reduce motion" on their phone get no animations */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.js .reveal{opacity:1;transform:none}
}
/* =================================================================
7. UTILITIES
================================================================= */
.flush-top{padding-top:0}
.u-mt0{margin-top:0}