/* Shared stylesheet for all generated sites. Per-site accent colors come from
   --accent / --accent-dark, set inline in each page's <head>. */

*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#151a1f;--ink-2:#232a32;--muted:#5b6470;--line:#e3e7ec;--bg:#fff;--bg-alt:#f4f6f8;
  --accent-soft:color-mix(in srgb,var(--accent) 12%,white);
  --accent-text:color-mix(in srgb,var(--accent) 55%,white);
  --radius:14px;--pill:999px;--shadow:0 10px 30px rgba(20,30,40,.10);--shadow-lg:0 24px 60px rgba(10,20,30,.25);
  --font-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font:var(--font-body);
}
/* Per-site identity knobs, set as body classes by the builder (theme.corners / mark / headings / hero). */
body.corners-soft{--radius:8px;--pill:10px}
body.corners-sharp{--radius:3px;--pill:4px}
body.headings-upper h1,body.headings-upper h2,body.headings-upper h3,body.headings-upper .btn,body.headings-upper .brand,body.headings-upper .footer-h{text-transform:uppercase;letter-spacing:.03em}
body.headings-upper h1{font-size:clamp(2.4rem,5.5vw,3.6rem);line-height:1.02}
body.headings-upper h2{font-size:clamp(1.7rem,3.4vw,2.3rem)}
html{scroll-behavior:smooth}
body{margin:0;font:500 17px/1.6 var(--font-body);color:var(--ink);background:var(--bg);padding-bottom:64px;-webkit-font-smoothing:antialiased}
@media(min-width:900px){body{padding-bottom:0}}
img{max-width:100%;height:auto}
a{color:var(--accent-dark)}
h1,h2,h3,.brand,.btn,.price{font-family:var(--font-display)}
h1,h2,h3{line-height:1.15;margin:0 0 .6em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.8vw,3rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.12rem;font-weight:700}
p{margin:0 0 1em}

.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.narrow{max-width:780px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:8px;background:#fff;padding:8px;z-index:99}

/* header */
.topbar{background:var(--ink);color:#c9d1da;font-size:.84rem;padding:7px 0;text-align:center;font-weight:600}
.site-header{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;gap:20px;min-height:70px}
.brand{font-weight:800;font-size:1.2rem;color:var(--ink);text-decoration:none;margin-right:auto;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.brand::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--accent);transform:rotate(45deg);flex:none}
body.mark-dot .brand::before{border-radius:50%;transform:none}
body.mark-square .brand::before{border-radius:2px;transform:none;width:11px;height:11px}
body.mark-bar .brand::before{width:5px;height:22px;border-radius:2px;transform:none}
body.mark-none .brand::before{display:none}
.brand-logo{height:34px;width:auto;display:block}
.brand-logo+*{display:none}
.brand:has(.brand-logo)::before{display:none}
.site-header nav{display:none;gap:24px}
.site-header nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.95rem}
.site-header nav a:hover{color:var(--accent-dark)}
@media(min-width:900px){.site-header nav{display:flex}}
.site-header .btn-call{display:none}
@media(min-width:600px){.site-header .btn-call{display:inline-block}}

/* buttons */
.btn{display:inline-block;padding:14px 24px;border-radius:var(--pill);font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font:inherit;font-weight:700;font-size:1rem;text-align:center;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary,.btn-call{background:var(--accent);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn-primary:hover,.btn-call:hover{background:var(--accent-dark)}
.btn-ghost{border-color:var(--accent);color:var(--accent-dark);background:transparent}
.hero-dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.hero-dark .btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-light{background:#fff;color:var(--accent-dark)}
.btn-outline-light{border-color:#fff;color:#fff}

/* hero */
.hero{padding:56px 0 64px;position:relative;overflow:hidden}
.hero-dark{color:#fff;background:
  radial-gradient(900px 500px at 85% -10%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 60%),
  radial-gradient(700px 400px at -10% 110%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 60%),
  linear-gradient(160deg,var(--ink-2),var(--ink))}
.hero-dark::before{content:"";position:absolute;inset:0;background:var(--hero-img) center/cover no-repeat;opacity:.28;mix-blend-mode:luminosity}
.hero-dark.has-img::before{opacity:1;mix-blend-mode:normal}
.hero-dark.has-img::after{background-image:linear-gradient(100deg,rgba(21,26,31,.93) 0%,rgba(21,26,31,.82) 45%,rgba(21,26,31,.55) 100%);background-size:auto;mask-image:none}
.hero-dark.has-img{background:var(--ink)}
.hero-dark::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 80%)}
.hero .wrap{position:relative;z-index:1}
.hero-dark h1{color:#fff}
.hero-dark .lead{color:rgba(255,255,255,.82)}
.hero-dark .eyebrow{color:var(--accent-text)}
.hero-dark ul.checks li{color:rgba(255,255,255,.92)}
/* Light hero: white/soft background, accent headline color, photo (if any) shown as a framed image instead of a backdrop. */
.hero-light{background:linear-gradient(180deg,var(--accent-soft),#fff);color:var(--ink)}
.hero-light h1{color:var(--ink)}
.hero-light .eyebrow{color:var(--accent-dark)}
.hero-light.has-img::before{content:"";position:absolute;inset:0;background:var(--hero-img) center/cover no-repeat;opacity:.12}
.hero-light .quote-form{box-shadow:var(--shadow)}
.page-hero{background:linear-gradient(180deg,var(--bg-alt),#fff);padding:48px 0}
.hero-grid{display:grid;gap:32px;align-items:start}
@media(min-width:900px){.hero-grid{grid-template-columns:1.25fr 1fr}}
.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:800;color:var(--accent-dark);margin-bottom:12px}
.lead{font-size:1.15rem;color:var(--muted);font-weight:500}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.price-note{background:#fff;border-left:4px solid var(--accent);padding:10px 14px;border-radius:8px;box-shadow:var(--shadow)}

/* lists */
ul.checks{list-style:none;padding:0;margin:0 0 1em}
ul.checks li{padding-left:30px;position:relative;margin:.4em 0;font-weight:600}
ul.checks li::before{content:"\2713";position:absolute;left:0;top:.25em;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;line-height:1}
ul.dots{padding-left:1.2em}
.area-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.area-list a{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:var(--pill);text-decoration:none;color:var(--ink);background:#fff;font-weight:600;font-size:.95rem;transition:all .15s}
.area-list a:hover{border-color:var(--accent);color:var(--accent-dark);background:var(--accent-soft)}

/* sections & cards */
.section{padding:64px 0}
.section.alt{background:var(--bg-alt)}
.section h2{position:relative;padding-bottom:14px;margin-bottom:28px}
.section h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:4px;border-radius:2px;background:var(--accent)}
.cards{display:grid;gap:18px}
@media(min-width:700px){.cards-3{grid-template-columns:repeat(2,1fr)}.cards-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards-3{grid-template-columns:repeat(3,1fr)}.cards-4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card p{color:var(--muted);margin:0}
.card-link{text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s,border-color .2s}
.card-link:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.card .more{display:inline-block;margin-top:12px;color:var(--accent-dark);font-weight:700}
.service-card{border-top:4px solid var(--accent)}
.service-card.has-img{padding-top:0;overflow:hidden}
.card-img{display:block;width:calc(100% + 48px);margin:0 -24px 16px;height:170px;object-fit:cover}

/* photos */
.page-photo{margin:0 0 8px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.page-photo img{display:block;width:100%;max-height:460px;object-fit:cover}
.page-photo figcaption{background:#fff;padding:10px 16px;font-size:.88rem;color:var(--muted);font-weight:600}
.photo-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:800px){.photo-grid{grid-template-columns:repeat(4,1fr)}}
.photo-grid figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1;background:var(--bg-alt)}
.photo-grid figure.wide{grid-column:span 2;aspect-ratio:2/1}
.photo-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.photo-grid figure:hover img{transform:scale(1.04)}
.photo-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;color:#fff;font-size:.82rem;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.trust{padding:0;margin-top:-34px;position:relative;z-index:2}
.trust-card{box-shadow:var(--shadow)}
.icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-dark);margin-bottom:14px}
.icon svg{width:22px;height:22px}
.steps{list-style:none;padding:0;display:grid;gap:18px;counter-reset:s}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps-col{grid-template-columns:1fr!important;margin:0 0 1em}
.steps li{counter-increment:s;background:var(--bg-alt);border-radius:var(--radius);padding:24px;border:1px solid var(--line)}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;margin-bottom:12px}
.prose h2{margin-top:1.4em}
.muted{color:var(--muted)}
.crumbs{font-size:.88rem;color:var(--muted);padding-top:14px;padding-bottom:0}
.crumbs a{color:var(--muted)}

/* form */
.quote-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:26px;display:grid;gap:12px;color:var(--ink)}
.quote-form h3{margin:0;font-size:1.25rem}
.quote-form label{display:grid;gap:5px;font-weight:700;font-size:.88rem;color:var(--ink-2)}
.quote-form input,.quote-form select,.quote-form textarea{font:inherit;font-weight:500;padding:12px 13px;border:1px solid #cfd6de;border-radius:10px;width:100%;background:#fff;color:var(--ink)}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.quote-form .btn{width:100%}
.form-note{font-size:.88rem;color:var(--muted);margin:0;text-align:center}
.booking{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0;display:grid;gap:10px;background:var(--bg-alt)}
.booking legend{font-weight:800;padding:0 6px;font-size:.92rem}
.windows{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;padding:8px 13px;border:1px solid #cfd6de;border-radius:var(--pill);background:#fff;font-size:.88rem;font-weight:700}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--accent-dark);outline-offset:2px}
.booking .alt{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem}
.booking .alt input{width:auto}
.book-msg{margin:0;font-size:.88rem;font-weight:600;color:#b42318;min-height:0}
.book-msg:empty{display:none}
.book-done{text-align:center;padding:12px 0}
.book-done .ok-big{font-size:2.6rem;line-height:1;color:var(--accent);margin:0 0 8px;font-weight:800}
.book-done h3{margin-bottom:8px}
.book-done p{color:var(--muted)}
.hp{position:absolute;left:-9999px}

/* reviews */
.reviews{padding-top:48px}
.rating-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 auto 24px;padding:10px 18px;border-radius:var(--pill);background:var(--bg-alt);border:1px solid var(--line);font-size:1rem;font-weight:600}
.reviews .wrap{text-align:center}
.reviews .cards{text-align:left}
.rating-badge .stars{color:#f5a623;letter-spacing:2px;font-size:1.25rem}
.rating-badge strong{font-size:1.2rem}
blockquote.card{margin:0;display:flex;flex-direction:column;gap:12px;position:relative;padding-top:34px}
blockquote.card::before{content:"\201C";position:absolute;top:6px;left:18px;font-size:3.2rem;line-height:1;color:var(--accent);opacity:.35;font-weight:800}
blockquote.card p{color:var(--ink);font-weight:500}
blockquote.card footer{color:var(--muted);font-size:.88rem;margin-top:auto;font-weight:600}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:800;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:10px 0 0;color:var(--muted)}

/* cta + footer */
.cta-band{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;padding:52px 0;text-align:center}
.cta-band h2{color:#fff;padding:0}
.cta-band h2::after{display:none}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.site-footer{background:var(--ink);color:#aeb7c1;padding:48px 0 20px;font-size:.95rem}
.site-footer a{color:#e7ebef;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .brand{color:#fff}
.footer-grid{display:grid;gap:28px}
@media(min-width:800px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.footer-h{font-weight:800;color:#fff}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.35em 0}
.disclosure{border-top:1px solid #2d343c;margin-top:28px;padding-top:18px;font-size:.82rem;color:#8a949e}

/* sticky mobile call bar */
.mobile-call{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--accent);color:#fff;text-align:center;font-weight:800;padding:16px;text-decoration:none;box-shadow:0 -4px 16px rgba(0,0,0,.2)}
@media(min-width:900px){.mobile-call{display:none}}

/* ---- playbook: phone-first hero, contact bar, before/after, equipment, owner, short form ---- */
.phone-only{display:none}
@media(max-width:699px){.desk-only{display:none}.phone-only{display:inline}}
/* On phones the hero photo sits above the headline, cropped short, so photo + headline + Call/Quote/Text all fit on the first screen. */
@media(max-width:699px){
  .hero .wrap.hero-grid{padding-top:20px;padding-bottom:28px;gap:16px}
  .hero-noform .hero-photo{order:-1;margin:0}
  .hero-noform .hero-photo img{aspect-ratio:auto;height:200px;width:100%;object-fit:cover}
  .hero h1{font-size:1.75rem;margin-bottom:.35em}
  .hero .lead{font-size:1rem}
  .hero ul.checks{display:none}
  .hero-actions{margin-top:14px;gap:8px}
  .hero-actions .btn{flex:1 1 auto;text-align:center;padding:12px 14px}
  .hero-dark.has-img{background-image:var(--hero-img-sm,var(--hero-img))}
}
.hero-promise{margin-top:14px;font-weight:700;font-size:.95rem;opacity:.9}
/* Fixed Call / Text / Quote bar on phones (replaces the single call button when texting is on). */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--accent);box-shadow:0 -4px 16px rgba(0,0,0,.2)}
.mobile-bar a{color:#fff;text-align:center;font-weight:800;padding:15px 8px;text-decoration:none;border-left:1px solid rgba(255,255,255,.25)}
.mobile-bar a:first-child{border-left:0}
@media(min-width:900px){.mobile-bar{display:none}}
/* Before / after pairs */
.ba-pair{margin:0 0 28px}
.ba-grid{display:grid;gap:10px}
@media(min-width:800px){.ba-grid{grid-template-columns:1fr 1fr}}
.ba-cell{position:relative}
.ba-cell img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.ba-tag{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.75);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--pill)}
.ba-pair figcaption{margin-top:10px;color:var(--muted);font-weight:600}
/* Equipment */
.equip-card{padding-top:0;overflow:hidden}.equip-card .card-img{height:190px}
/* Owner */
.owner-card{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.owner-photo{width:160px;height:160px;object-fit:cover;border-radius:50%;flex:0 0 auto}
/* Short quote form: optional fields folded away */
.more-fields{margin:4px 0 10px;border:1px dashed var(--line);border-radius:var(--radius);padding:0 12px}
.more-fields summary{cursor:pointer;font-weight:700;padding:10px 0;color:var(--accent-dark)}
.more-fields[open] summary{border-bottom:1px solid var(--line);margin-bottom:10px}
/* On the booking and contact pages the form is what the visitor came for, so on phones it comes before the steps and copy. Service and area pages keep their headline first. */
@media(max-width:899px){.form-first .hero-grid>div:has(.quote-form){order:-1}}