/* =================================================================
REFLECTIONS DETAILING & CUSTOMS (RDC): styles
Used by index.html and 404.html.
Look: dark, glossy, high-end automotive. Deep black, white, one electric
blue accent and a little chrome silver. Very light large headings with
one serif italic word, "(01) LABEL" tags, pill buttons, big rounded photo
cards and dark rounded panels. Built on the Cape Town Wraps site.
HOW THIS FILE IS ORGANISED
1. TOKENS every colour, font and size (dark theme, then light)
2. BASE reset and default text styles
3. LAYOUT page width and section spacing
4. COMPONENTS labels, headings, pill buttons, tags, chips
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.
The theme is set by data-theme on (js/theme-init.js, saved as "rdc-theme").
================================================================= */
:root{
/* fonts: Inter, 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;
/* colours that stay the same in both themes */
--ink-on-dark:#f2f4f7; /* text on photos and dark panels */
--muted-on-dark:#a5abb5; /* grey text on dark */
--panel:#101216; /* dark rounded panels (why us, before/after, footer) */
--panel-2:#171a20; /* cards inside dark panels */
--wa:#25d366; /* WhatsApp green */
--star:#e2c27a; /* review stars */
--chrome:linear-gradient(100deg,#8d949e 0%,#f4f6f8 28%,#9aa1ab 46%,#ffffff 62%,#7f8690 100%); /* silver "chrome" text */
/* 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 */
--bar-h:0px; /* height of the phone action bar (set in SHARED) */
--head-h:110px; /* fixed header: logo row + row of links (phones) */
}
/* DARK theme (the default) */
:root,[data-theme="dark"]{
color-scheme:dark;
--bg:#08090b; /* near-black page */
--bg-2:#0e1013; /* slightly lighter panel */
--card:#121419; /* cards */
--card-2:#1a1d23; /* photo placeholders, hover */
--text:#f2f4f7;
--muted:#a5abb5; /* grey text (8:1 on the page) */
--dim:#858b95;
--line:rgba(255,255,255,.09);
--line-2:rgba(255,255,255,.22);
--accent:#3d8bff; /* electric blue: buttons, active states */
--accent-hover:#5c9dff;
--accent-text:#6aa8ff; /* blue that reads well as text on black */
--on-accent:#ffffff;
--input:#0c0e11;
--glass:rgba(8,9,11,.78); /* header when scrolled, phone bar */
--err:#ff8a80; --ok:#6ee7a0;
--shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
/* LIGHT theme */
[data-theme="light"]{
color-scheme:light;
--bg:#f3f4f6;
--bg-2:#ffffff;
--card:#ffffff;
--card-2:#e7e9ed;
--text:#0b0c0f;
--muted:#535862; /* 7:1 on the page */
--dim:#6b7079;
--line:rgba(11,12,15,.11);
--line-2:rgba(11,12,15,.24);
--accent:#1564e0;
--accent-hover:#0f55c4;
--accent-text:#1158c9;
--on-accent:#ffffff;
--input:#ffffff;
--glass:rgba(243,244,246,.84);
--err:#b42318; --ok:#0f6b35;
--shadow:0 30px 60px -36px rgba(20,25,35,.35);
--panel:#0b0c0f; /* dark panels stay dark in the light theme */
}
/* =================================================================
2. BASE
================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px)} /* 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);transition:background-color .35s,color .35s}
img{max-width:100%;height:auto;display:block}
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 */
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
/* polished-silver text, used on a few words over dark photos */
.chrome{background:var(--chrome);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite;padding-right:.08em}
@keyframes shine{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} /* keyboard focus ring */
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:100px;z-index:900}
.skip:focus{left:8px}
.sr-only{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* screen readers only */
.sprite{position:absolute}
/* =================================================================
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) SERVICES" 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}
.h-xl{font-size:clamp(2.1rem,7vw,3.5rem);font-weight:300;letter-spacing:-.04em;line-height:1.04;margin:0 0 .45em}
.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}
.sec-head .lead{margin:0}
@media (min-width:900px){.sec-head{grid-template-columns:1fr auto;align-items:end;margin-bottom:64px}.sec-head .btn{justify-self:end}.sec-head .lead{max-width:420px}}
/* ---------- Pill buttons ----------
.btn is the base. Pick one: .btn-main (electric blue), .btn-light (white),
.btn-line (outline), .btn-glass (see-through, on photos and dark panels).
Buttons start with a small dot; .dot-wa makes it WhatsApp green. A button with an icon has no dot. */
.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,box-shadow .25s}
.btn::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.btn:has(svg)::before{display:none}
.btn.dot-wa::before{background:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.2)}
.btn svg{width:17px;height:17px;flex:none}
.btn:active{transform:scale(.97)}
.btn-main{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 30px -12px rgba(61,139,255,.7)}
.btn-main:hover{background:var(--accent-hover)}
.btn-light{background:#fff;color:#0b0c0f}
.btn-light:hover{background:#e9edf3}
.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(242,244,247,.35);color:var(--ink-on-dark);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.btn-sm{min-height:38px;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 on photos: "• PPF" */
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:100px;background:rgba(8,9,11,.62);color:var(--ink-on-dark);border:1px solid rgba(255,255,255,.14);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:var(--accent)}
.tag.glass{background:rgba(255,255,255,.08);border-color:rgba(242,244,247,.3)}
/* filter chips (gallery) */
.chip{min-height:40px;padding:0 16px;border-radius:100px;border:1px solid var(--line-2);background:transparent;color:var(--text);font:500 .8rem var(--sans);cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.chip:hover{border-color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* "[Email address]" style placeholders the owner still needs to fill in */
.ph{border-bottom:1px dashed var(--dim);color:var(--muted)}
/* =================================================================
5. SECTIONS (in page order)
================================================================= */
/* ---------- Header ----------
Wordmark on the left; call, theme, Book now and the round menu button on the right.
Gets a blurred 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);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding-inline:16px}
/* Wordmark: "REFLECTIONS" with "DETAILING & CUSTOMS" under it and a small mark with a light streak.
REPLACE: logo. When the owner sends one, save it as images/logo.png (or .svg) and swap the
contents of .logo in index.html and 404.html for
then match --accent to the logo's colour. */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);white-space:nowrap}
.logo-mark{position:relative;width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,#2b3038,#07080a 60%);border:1px solid rgba(255,255,255,.18);overflow:hidden;flex:none}
.logo-mark::before{content:"R";position:absolute;inset:0;display:grid;place-items:center;font:500 15px/1 var(--sans);letter-spacing:0;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-mark::after{content:"";position:absolute;top:-10px;left:-14px;width:10px;height:56px;background:linear-gradient(180deg,transparent,rgba(110,170,255,.9),transparent);transform:rotate(35deg);animation:streak 6s var(--out) infinite}
@keyframes streak{0%,70%{left:-14px}100%{left:40px}}
.logo-words{display:flex;flex-direction:column;line-height:1}
.logo-words b{font-size:.9rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.logo-words small{margin-top:4px;font-size:.5rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.nav-right{display:flex;align-items:center;gap:8px}
.btn-book{display:none}
.theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;transition:border-color .25s}
.theme-toggle:hover{border-color:var(--text)}
.theme-toggle svg{width:18px;height:18px;grid-area:1/1}
[data-theme="dark"] .t-moon,[data-theme="light"] .t-sun{display:none}
.menu-btn{position:relative;width:42px;height:42px;border:0;border-radius:50%;background:var(--text);color:var(--bg);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:560px){.btn-book{display:inline-flex}}
@media (min-width:900px){.nav{padding-inline:24px}}
/* ---------- Navigation links ----------
Phones and tablets: a second row of link pills you can swipe sideways.
Wide screens (1100px+): one pill-shaped panel in the middle of the header.
The link for the section on screen gets .active (js/site.js). */
.nav-links{display:flex;gap:6px;overflow-x:auto;padding:2px 16px 10px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{flex:none;padding:8px 14px;border-radius:100px;border:1px solid var(--line);background:var(--glass);font-size:.8rem;font-weight:500;text-decoration:none;color:var(--text);white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s}
.nav-links a:hover{border-color:var(--line-2)}
.nav-links a.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-call{display:none!important} /* the phone-number button only shows on very wide screens */
@media (min-width:1100px){
:root{--head-h:76px}
.nav{height:76px}
.nav-links{position:absolute;left:50%;top:38px;transform:translate(-50%,-50%);padding:5px;gap:2px;overflow:visible;border:1px solid var(--line);border-radius:100px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);-webkit-mask-image:none;mask-image:none}
.nav-links a{border:0;background:transparent;padding:9px 14px;color:var(--muted)}
.nav-links a:hover{color:var(--text);background:var(--line)}
.nav-links a.active{color:var(--on-accent)}
}
@media (min-width:1360px){.btn-call{display:inline-flex!important}}
/* full-screen menu, opened by the round button */
.menu{position:fixed;inset:0;z-index:110;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--head-h) + 20px) 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.7rem,6.5vw,3rem);font-weight:300;letter-spacing:-.04em;line-height:1.1;transition:padding .35s var(--out),color .25s}
.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;color:var(--accent-text)}
.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:calc(var(--head-h) + 30px) 8vw 50px}.menu-foot{flex-direction:row;flex-wrap:wrap;align-items:center}}
/* ---------- Hero: one big rounded photo card with a light sweep ---------- */
.hero{padding:calc(var(--head-h) + 4px) 0 0}
.hero-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-big);min-height:calc(100svh - var(--head-h) - 14px);display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:20px;color:var(--ink-on-dark);background:#0a0b0f}
.hero-card picture{position:absolute;inset:0;z-index:-3}
.hero-card picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
/* dark fade so the text is always readable */
.hero-card::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(6,7,9,.85) 0%,rgba(6,7,9,.35) 50%,rgba(6,7,9,0) 75%),linear-gradient(0deg,rgba(6,7,9,.85) 0%,transparent 50%)}
/* the slow diagonal light sweep across a photo card */
.sweep{position:absolute;inset:-20% -60%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(160,200,255,.07) 47%,rgba(255,255,255,.14) 50%,rgba(160,200,255,.07) 53%,transparent 58%);transform:translateX(-60%);animation:sweep 9s var(--out) 1.2s infinite;mix-blend-mode:screen}
@keyframes sweep{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hero-top small{display:none;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:rgba(242,244,247,.85)}
.hero-kicker{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#9cc4ff;margin-bottom:18px}
.hero h1{font-size:clamp(2.7rem,10vw,5.2rem);font-weight:300;letter-spacing:-.045em;line-height:.98;margin:0 0 20px;max-width:780px}
.hero-sub{max-width:480px;color:rgba(242,244,247,.86);font-size:1.02rem;margin-bottom:26px}
.hero-actions{display:flex;flex-direction:column;gap:10px}
/* 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(242,244,247,.2);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-card{padding:28px 32px}
.hero-top small{display:block}
.hero-foot{display:grid}
}
/* ---------- Trust bar: four short facts under the hero ---------- */
.trust{padding:10px 0 0}
.trust-bar{list-style:none;margin:0;padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:var(--r-big);background:var(--bg-2);border:1px solid var(--line)}
.trust-bar li{display:flex;flex-direction:column;gap:2px;padding:16px 16px;border-radius:calc(var(--r-big) - 8px);background:var(--card)}
.trust-bar b{font-size:1.15rem;font-weight:400;letter-spacing:-.02em}
.trust-bar span{font-size:.78rem;color:var(--muted)}
@media (min-width:900px){.trust-bar{grid-template-columns:repeat(4,1fr)}.trust-bar li{padding:22px 24px}.trust-bar b{font-size:1.35rem}}
/* ---------- (01) About: oval photo + text ---------- */
.about{display:grid;gap:40px;align-items:center}
.oval{position:relative;margin:0;max-width:420px;width:100%;justify-self:center}
.oval img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:50%}
.oval::after{content:"";position:absolute;inset:-10px;border:1px solid var(--line-2);border-radius:50%;pointer-events:none}
.oval figcaption{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);padding:10px 18px;border-radius:100px;background:var(--glass);border:1px solid var(--line);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.7rem;line-height:1.3;color:var(--text)}
@media (min-width:900px){.about{grid-template-columns:1fr 1.1fr;gap:80px}}
/* ---------- (02) Services: photo cards ---------- */
.svc-grid{display:grid;gap:14px}
.svc{display:flex;flex-direction:column;padding:10px 10px 22px;border-radius:var(--r-big);background:var(--card);border:1px solid var(--line);transition:border-color .3s,transform .5s var(--out)}
.svc:hover{border-color:var(--line-2)}
.svc-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--card-2);margin-bottom:20px}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--out)}
.svc:hover .svc-img img{transform:scale(1.04)}
.svc-img .tag{position:absolute;left:12px;top:12px}
.svc h3,.svc p,.svc-points,.svc-foot{margin-inline:12px}
.svc h3{font-size:1.45rem;font-weight:300;letter-spacing:-.03em;margin-bottom:8px}
.svc p{color:var(--muted);font-size:.94rem}
.svc-points{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin-top:0;margin-bottom:20px}
.svc-points li{padding:5px 11px;border-radius:100px;border:1px solid var(--line);font-size:.74rem;color:var(--muted)}
.svc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
@media (min-width:700px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
/* prices filled in from PRICES (js/main.js) */
.pl-price{flex:none;font-weight:500;white-space:nowrap}
.pl-price small{margin-right:5px;color:var(--muted);font-size:.72rem;font-weight:400}
.pl-price.ask{font-size:.74rem;font-weight:500;letter-spacing:.04em;color:var(--muted)}
/* ---------- (03) Before / after compare sliders on a dark panel ---------- */
.dark-panel{border-radius:var(--r-big);background:var(--panel);color:var(--ink-on-dark);padding:60px 0 22px;border:1px solid var(--line);overflow:hidden}
.dark-panel .label,.on-dark{color:var(--muted-on-dark)}
.dark-panel .h-xl{margin-bottom:0}
.compare-grid{display:grid;gap:22px}
/* the two photos sit on top of each other; the top one ("before") is cut at --pos */
.compare{--pos:50%;position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;background:#000;user-select:none;-webkit-user-select:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare .before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-tag{position:absolute;top:12px;z-index:2;padding:5px 11px;border-radius:100px;background:rgba(8,9,11,.65);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
.cmp-tag.b{left:12px}.cmp-tag.a{right:12px}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.5);pointer-events:none;z-index:2}
.cmp-line i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.cmp-line i::before,.cmp-line i::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;margin-top:-6px}
.cmp-line i::before{left:7px;border-right-color:#0b0c0f}
.cmp-line i::after{right:7px;border-left-color:#0b0c0f}
/* the invisible range input covers the photo: drag anywhere, or use the arrow keys */
.compare input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.compare:has(input:focus-visible) .cmp-line i{outline:3px solid var(--accent);outline-offset:3px}
.compare figcaption{position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 12px;border-radius:100px;background:rgba(8,9,11,.65);font-size:.78rem;pointer-events:none}
.small-note{margin:22px 0 0;font-size:.8rem;color:var(--muted-on-dark)}
@media (min-width:760px){.compare-grid{grid-template-columns:1fr 1fr}.compare-grid .compare:first-child{grid-column:1/-1;aspect-ratio:21/9}}
@media (min-width:900px){.dark-panel{padding:90px 0 36px}}
@media (min-width:1100px){.compare-grid{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr}.compare-grid .compare:first-child{grid-column:1;grid-row:1/3;aspect-ratio:auto}}
/* ---------- (04) Packages + price tables ---------- */
.pkg-grid{display:grid;gap:14px}
.pkg{position:relative;display:flex;flex-direction:column;padding:28px 24px 24px;border-radius:var(--r-big);background:var(--card);border:1px solid var(--line)}
.pkg-tier{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pkg h3{font-size:2.2rem;font-weight:300;letter-spacing:-.04em;margin:14px 0 6px}
.pkg-price{margin:0 0 22px;font-size:1.6rem;letter-spacing:-.02em}
.pkg-price .pl-price{font-weight:400}
.pkg-price .pl-price.ask{font-size:.8rem}
.ticks{list-style:none;margin:0 0 22px;padding:20px 0 0;border-top:1px solid var(--line);flex:1}
.ticks li{position:relative;padding-left:28px;margin-bottom:11px;font-size:.93rem;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.pkg-time{font-size:.78rem;color:var(--dim);margin-bottom:16px}
/* the middle "Most popular" card: dark with a blue glow, in both themes */
.pkg-hot{background:radial-gradient(120% 70% at 50% 0%,rgba(61,139,255,.22),transparent 60%),var(--panel);color:var(--ink-on-dark);border-color:rgba(61,139,255,.45);box-shadow:0 30px 70px -40px rgba(61,139,255,.6)}
.pkg-hot .pkg-tier,.pkg-hot .ticks li,.pkg-hot .pl-price small,.pkg-hot .pl-price.ask{color:var(--muted-on-dark)}
.pkg-hot .ticks{border-color:rgba(255,255,255,.1)}
.pkg-hot .pkg-time{color:var(--muted-on-dark)}
.pkg-badge{position:absolute;top:24px;right:20px;padding:5px 11px;border-radius:100px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
@media (min-width:900px){.pkg-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}.pkg{padding:34px 30px 30px}.pkg-hot{transform:translateY(-12px)}}
.tables{display:grid;gap:14px;margin-top:40px}
.ptable{padding:26px 22px;border-radius:var(--r-big);background:var(--bg-2);border:1px solid var(--line)}
.ptable h3{margin:0 0 4px}
.ptable-sub{font-size:.8rem;color:var(--muted);margin-bottom:12px}
.ptable table{width:100%;border-collapse:collapse}
.ptable th,.ptable td{padding:13px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400;font-size:.94rem}
.ptable td{text-align:right;padding-left:12px}
.ptable th small{display:block;font-size:.76rem;color:var(--muted);margin-top:2px}
@media (min-width:1000px){.tables{grid-template-columns:repeat(3,1fr)}}
/* ---------- (05) Work gallery: filters + cards + photo viewer ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.work{display:block;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:var(--r);animation:fadeIn .5s var(--out)}
.work[hidden]{display:none}
@keyframes fadeIn{from{opacity:0;transform:scale(.98)}}
.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.05)}
.work-img .tag{position:absolute;left:10px;top:10px;font-size:.56rem;padding:6px 10px}
.work b{display:block;margin:10px 4px 12px;font-size:.9rem;font-weight:400;letter-spacing:-.01em;line-height:1.3}
@media (max-width:559px){.work-img .tag{display:none}}
@media (min-width:900px){.work-grid{grid-template-columns:repeat(3,1fr);gap:16px}.work b{font-size:1.05rem}}
@media (min-width:1200px){.work-grid{grid-template-columns:repeat(4,1fr)}}
/* photo viewer that opens when a work card is tapped */
.lightbox{position:fixed;inset:0;z-index:500;background:rgba(5,6,8,.95);display:flex;align-items:center;justify-content:center;padding:16px;color:var(--ink-on-dark)}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1100px,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(--muted-on-dark)}
.lb-btn{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(242,244,247,.3);color:var(--ink-on-dark);width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.1rem}
.lb-btn:hover{background:#fff;color:#0b0c0f}
.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%)}}
/* ---------- (06) Process: 5 numbered cards ---------- */
.center{text-align:center}
.center .lead{margin-inline:auto}
.steps{display:grid;gap:10px;list-style:none;margin:44px 0 0;padding:10px;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:44px;min-height:210px;padding:24px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.num{font-family:var(--serif);font-style:italic;font-size:2.6rem;line-height:1;color:var(--dim)}
.num::after{content:" —";font-size:.6em}
.step .num{color:var(--accent-text)}
.step h3{margin:0 0 6px}
.step p{color:var(--muted);margin:0;font-size:.92rem}
@media (min-width:640px){.steps{grid-template-columns:1fr 1fr}.step:last-child{grid-column:1/-1}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(5,1fr)}.step:last-child{grid-column:auto}}
/* ---------- (07) Why RDC: 4 cards on a dark panel ---------- */
.cards4{display:grid;gap:12px;margin-top:40px}
.dcard{display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-height:230px;padding:26px 24px;border-radius:var(--r);background:var(--panel-2);border:1px solid rgba(255,255,255,.06)}
.dcard .num{color:#8f96a1}
.dcard h3{color:var(--ink-on-dark);margin:0 0 8px}
.dcard p{color:var(--muted-on-dark);margin:0;font-size:.92rem}
@media (min-width:760px){.cards4{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cards4{grid-template-columns:repeat(4,1fr)}}
.dark-panel .container > .label{margin-bottom:22px}
/* ---------- (08) Reviews: dark panel over a photo, 3 glass cards ---------- */
.reviews{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-big);padding:70px 16px;color:var(--ink-on-dark);text-align:center}
.reviews > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:blur(2px) saturate(.6);transform:scale(1.05)}
.reviews::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,8,12,.8)}
.reviews .label{color:var(--muted-on-dark)}
.review-grid{display:grid;gap:12px;max-width:1100px;margin:36px auto 30px;text-align:left}
.review{margin:0;padding:26px 24px;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(242,244,247,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.review .stars{color:var(--star);letter-spacing:3px;margin-bottom:12px}
.review p{font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.35;margin-bottom:16px}
.review footer{font-size:.78rem;color:var(--muted-on-dark)}
.review.placeholder{border-style:dashed}
.review.placeholder .stars{opacity:.45}
.center-row{justify-content:center}
@media (min-width:900px){.reviews{padding:110px 40px}.review-grid{grid-template-columns:repeat(3,1fr)}}
/* ---------- (09) Aftercare tips ---------- */
.care-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.care{padding:24px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.care span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);font-size:.72rem;font-weight:500;color:var(--accent-text);margin-bottom:18px}
.care h3{margin:0 0 6px}
.care p{margin:0;color:var(--muted);font-size:.93rem}
@media (min-width:700px){.care-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.care-grid{grid-template-columns:repeat(3,1fr)}}
/* ---------- (10) FAQ: rows with a round + button (, no JavaScript needed) ---------- */
.faq-wrap{display:grid;gap:30px}
.faq-wrap .muted{margin-bottom:20px}
.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(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg)}
.faq-item p{color:var(--muted);margin:0;padding:0 50px 24px 0;max-width:700px}
@media (min-width:960px){.faq-wrap{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:60px;align-items:start}.faq-wrap > div:first-child{position:sticky;top:110px}}
/* ---------- (11) Booking form ---------- */
.quote{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.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(--accent);flex:none;margin-top:10px}
.form{padding:22px 16px;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{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field-label{font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-left:18px}
.req{color:var(--accent-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:var(--input);border:1px solid var(--line-2);border-radius:100px;padding:15px 20px;width:100%;min-width:0;transition:border-color .2s,box-shadow .2s}
.field input[type="date"]{min-height:54px}
.field select{appearance:none;-webkit-appearance:none;background:var(--input) 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='%238a909a' 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(--accent);box-shadow:0 0 0 3px rgba(61,139,255,.2)}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field.invalid input,.field.invalid select{border-color:var(--err)}
.err{color:var(--err);font-size:.8rem;min-height:1em;padding-left:18px}
/* photo upload: a dashed drop area (the real file input is visually hidden) */
.upload{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:22px;border:1px dashed var(--line-2);cursor:pointer;transition:border-color .2s,background-color .2s;text-transform:none!important;letter-spacing:0!important;font-size:1rem!important;color:var(--text)!important}
.upload:hover{border-color:var(--accent)}
.field:has(input[type="file"]:focus-visible) .upload{outline:2px solid var(--accent);outline-offset:3px}
.upload svg{width:26px;height:26px;color:var(--accent-text);flex:none}
.upload b{display:block;font-weight:500;font-size:.95rem}
.upload small{display:block;font-size:.8rem;color:var(--muted)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}
.thumbs:empty{display:none}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.thumbs p{width:100%;margin:0;font-size:.8rem;color:var(--muted)}
.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,.1);border:1px solid rgba(37,211,102,.4);color:var(--ok)}
.success a{color:inherit}
.success.show{display:block}
@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}}
/* ---------- 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(--ink-on-dark);background:#07080a}
.cta > img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(80% 90% at 50% 50%,rgba(6,7,9,.45),rgba(6,7,9,.85))}
.cta .h-xl{max-width:760px;margin-inline:auto}
.cta p{max-width:480px;margin:0 auto 28px;color:rgba(242,244,247,.85)}
.cta .btn-row{justify-content:center}
@media (min-width:900px){.cta{padding:170px 40px}}
/* ---------- (12) Contact ---------- */
.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:18px 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 li > a,.info-list li > span{font-size:1.1rem;font-weight:300;letter-spacing:-.01em;text-decoration:none}
.info-list a:hover{color:var(--accent-text)}
.map{border-radius:var(--r-big);overflow:hidden;min-height:340px;background:var(--card-2);border:1px solid var(--line)}
.map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
[data-theme="dark"] .map iframe{filter:invert(.9) hue-rotate(180deg) saturate(.4) brightness(.95)} /* a dark map to match */
@media (min-width:900px){.contact{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px}.map,.map iframe{min-height:520px}}
/* ---------- Footer: dark rounded panel with the name huge over a photo ---------- */
.footer{padding:0 0 10px}
.foot{border-radius:var(--r-big);background:var(--panel);color:var(--ink-on-dark);padding:50px 22px 22px;border:1px solid var(--line)}
.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(--muted-on-dark);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px;font-size:.95rem;color:var(--muted-on-dark)}
.foot a{text-decoration:none;color:var(--ink-on-dark)}
.foot a:hover{text-decoration:underline}
.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:34px 10px}
.giant img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.giant span{font-size:clamp(2.2rem,11vw,10rem);font-weight:300;letter-spacing:-.05em;line-height:.9;white-space:nowrap;text-transform:uppercase;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-bottom{display:flex;flex-direction:column;gap:10px;margin-top:22px;font-size:.8rem;color:var(--muted-on-dark)}
.foot-bottom p{margin:0;max-width:620px}
@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}}
/* ---------- 404 page ---------- */
.nf{min-height:100svh;display:grid;place-items:center;padding:calc(var(--head-h) + 20px) 10px 20px}
.nf .hero-card{min-height:70svh;width:100%;justify-content:center;align-items:center;text-align:center}
.nf .hero-card p{max-width:420px;margin-inline:auto;color:rgba(242,244,247,.85)}
.nf .btn-row{justify-content:center}
/* =================================================================
6. SHARED
================================================================= */
/* ---------- Phone action bar: Call / WhatsApp / Book 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-book{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
: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}.reveal.d4{transition-delay:.32s}
/* the "Most popular" package keeps its lift after revealing */
@media (min-width:900px){.js .pkg-hot.reveal.in{transform:translateY(-12px)}}
/* People who turn on "reduce motion" 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}
.sweep{display:none}
}
/* =================================================================
7. UTILITIES
================================================================= */
.flush-top{padding-top:0}
body.no-bar{padding-bottom:0}
/* phones: the tall hero photo has the car near the top, so centre it */
@media (max-width:899px){.hero-card picture img{object-position:50% 0}}