/* Carnelian Dragon Production Services — shared styles.
   Layout: light header with the logo, dark "stage" bands for openers and process, calm cool-white content pages. */
:root{
  --bg:#F3F4F5; --surface:#FFFFFF; --ink:#16181B; --muted:#585E66; --line:#D8DBDF;
  --accent:#8E0F1B; --accent-hover:#6E0A14; --accent-ink:#FFFFFF; --accent-soft:#F5E3E4;
  --band:#141618; --band-2:#1F2225; --band-ink:#EEEFF0; --band-muted:#A4AAB1; --band-accent:#E35A66; --beam:rgba(255,236,214,.13);
  --display:"Libre Caslon Text", Georgia, "Times New Roman", serif;
  --body:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap:1120px; --radius:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111315; --surface:#191C1F; --ink:#ECEDEE; --muted:#A3A9B0; --line:#2B2F34;
  --accent:#E0505E; --accent-hover:#EC7480; --accent-ink:#140E0F; --accent-soft:#2A1719;
  --band:#0B0C0D; --band-2:#1B1E21; --band-ink:#EEEFF0; --band-muted:#A4AAB1; --band-accent:#E35A66; --beam:rgba(255,236,214,.10);
  color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#111315; --surface:#191C1F; --ink:#ECEDEE; --muted:#A3A9B0; --line:#2B2F34;
  --accent:#E0505E; --accent-hover:#EC7480; --accent-ink:#140E0F; --accent-soft:#2A1719;
  --band:#0B0C0D; --band-2:#1B1E21; --band-ink:#EEEFF0; --band-muted:#A4AAB1; --band-accent:#E35A66; --beam:rgba(255,236,214,.10);
  color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--surface)}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.15; text-wrap:balance; margin:0}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.label{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.dark .label{color:var(--band-accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.text-link{color:var(--accent); font-weight:600; text-decoration:none}
.text-link:hover{text-decoration:underline}

/* Header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line)}
.top .wrap{position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px}
.brand{display:flex; align-items:center; text-decoration:none; min-width:0}
.brand img{height:48px; width:auto; display:block}
.logo-on-dark{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-on-light{display:none!important}:root:not([data-theme="light"]) .logo-on-dark{display:block!important}}
:root[data-theme="dark"] .logo-on-light{display:none!important}
:root[data-theme="dark"] .logo-on-dark{display:block!important}
.nav{display:flex; gap:22px; align-items:center}
.nav a{text-decoration:none; font-size:15px; color:var(--muted); padding-block:4px; border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:var(--radius); font:600 15px/1 var(--body); text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:currentColor; background:transparent; color:var(--ink)}
.dark .btn-ghost{color:var(--band-ink)}
.nav .btn{color:var(--accent-ink); border-bottom:0; padding:11px 18px}
.menu-toggle{display:none; background:none; border:1px solid var(--line); color:var(--ink); border-radius:var(--radius); padding:8px 12px; font:600 14px var(--body); cursor:pointer}
@media (max-width: 1060px){
  .nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:8px max(16px, env(safe-area-inset-right,0px)) 16px max(16px, env(safe-area-inset-left,0px))}
  .nav.open{display:flex}
  .nav a{padding:12px 0; border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line); color:var(--accent)}
  .nav .btn{margin-top:12px}
  .menu-toggle{display:inline-block}
}
@media (max-width: 420px){.brand img{height:40px}}

/* Dark bands */
.dark{background:var(--band); color:var(--band-ink)}
.dark p{color:var(--band-muted)}
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; top:0; right:8%; width:min(560px,70vw); height:100%; background:conic-gradient(from 180deg at 50% 0%, transparent 160deg, var(--beam) 172deg, var(--beam) 188deg, transparent 200deg); pointer-events:none}
.pipe{position:absolute; top:28px; left:0; right:0; height:6px; background:linear-gradient(var(--band-2),#2A2E32 50%,var(--band-2)); opacity:.9}
.hero .wrap{position:relative; padding-block:96px 72px; display:grid; gap:28px}
.hero h1{font-size:clamp(36px, 6vw, 64px); max-width:16ch}
.hero h1 em{font-style:italic; color:var(--band-accent)}
.hero p.lede{font-size:clamp(17px,2vw,20px); max-width:58ch}
.hero-mark{position:absolute; right:max(16px, 6%); top:50%; transform:translateY(-46%); width:min(320px,28vw); height:auto; pointer-events:none}
@media (max-width: 900px){.hero-mark{display:none}}
.ctas{display:flex; flex-wrap:wrap; gap:12px}
.facts{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:12px; padding-top:24px; border-top:1px solid var(--band-2)}
.facts span{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--band-muted)}
.facts span b{color:var(--band-ink); font-weight:500}

/* Inner page opener */
.page-head{position:relative; overflow:hidden}
.page-head .wrap{position:relative; padding-block:72px 56px; display:grid; gap:16px}
.page-head h1{font-size:clamp(32px,5vw,52px); max-width:20ch}
.page-head p{font-size:clamp(17px,2vw,19px); max-width:60ch}

/* Sections */
section{padding-block:80px}
.sec-head{display:grid; gap:12px; margin-bottom:40px; max-width:62ch}
.sec-head h2{font-size:clamp(28px,4vw,40px)}
.sec-head p{color:var(--muted)}
.dark .sec-head p{color:var(--band-muted)}
.alt{background:var(--surface); border-block:1px solid var(--line)}

/* Service grid (home) */
.services{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.svc{padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); display:grid; gap:10px; align-content:start; min-width:0; text-decoration:none; color:inherit}
a.svc:hover h3{color:var(--accent)}
.svc .label{color:var(--muted)}
.svc h3{font-size:22px}
.svc p{color:var(--muted); font-size:16px}
.svc .more{font-size:14px; font-weight:600; color:var(--accent); margin-top:4px}
@media (max-width: 900px){.services{grid-template-columns:1fr 1fr}}
@media (max-width: 600px){.services{grid-template-columns:1fr}}

/* Service detail (services page) */
.svc-detail{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:48px; padding-block:48px; border-top:1px solid var(--line)}
.svc-detail:first-child{border-top:0; padding-top:0}
.svc-detail h2{font-size:clamp(26px,3.4vw,34px); margin-top:8px}
.svc-detail .intro{display:grid; gap:12px; align-content:start}
.svc-detail .intro p{color:var(--muted)}
.svc-detail .body{display:grid; gap:20px; align-content:start}
.ticks{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px}
.ticks li{padding-left:18px; position:relative; font-size:16px}
.ticks li::before{content:""; position:absolute; left:0; top:.68em; width:8px; height:2px; background:var(--accent)}
.ideal{font-size:15px; color:var(--muted); border-left:3px solid var(--accent); padding-left:14px}
.ideal b{color:var(--ink)}
@media (max-width: 760px){.svc-detail{grid-template-columns:1fr; gap:20px}.ticks{grid-template-columns:1fr}}

/* Two-column feature */
.split{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start}
.split > *{min-width:0}
.stack{display:grid; gap:18px}
.stack p{color:var(--muted)}
.callout{border-left:3px solid var(--accent); padding:4px 0 4px 16px; color:var(--ink)!important}
@media (max-width: 860px){.split{grid-template-columns:1fr; gap:32px}}

.checklist{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.checklist header{display:flex; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--bg); border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.checklist ol{margin:0; padding:0; list-style:none}
.checklist li{display:grid; grid-template-columns:2.2em 1fr; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:15px}
.checklist li:last-child{border-bottom:0}
.checklist li span{font-family:var(--mono); font-size:12px; color:var(--accent); padding-top:3px; font-variant-numeric:tabular-nums}

/* Who we serve */
.who{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
.who > div{display:grid; gap:8px; align-content:start; min-width:0}
.who h3{font-size:19px}
.who p{color:var(--muted); font-size:15px}
@media (max-width: 900px){.who{grid-template-columns:1fr 1fr}}
@media (max-width: 520px){.who{grid-template-columns:1fr}}

.recent{border-top:1px solid var(--line)}
.recent-row{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,.8fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:16px}
.recent-row .k{font-weight:600}
.recent-row .v{color:var(--muted)}
.recent-row .t{font-family:var(--mono); font-size:12px; color:var(--muted); text-align:right; letter-spacing:.04em; padding-top:4px}
@media (max-width: 640px){.recent-row{grid-template-columns:1fr}.recent-row .t{text-align:left}}

/* Process */
.steps{display:grid; grid-template-columns:repeat(5,1fr); counter-reset:step}
.step{padding:24px 20px 0 0; border-top:2px solid var(--band-2); position:relative; display:grid; gap:8px; align-content:start; min-width:0}
.step::before{counter-increment:step; content:"0" counter(step); font-family:var(--mono); font-size:12px; color:var(--band-accent); letter-spacing:.1em}
.step::after{content:""; position:absolute; top:-6px; left:0; width:10px; height:10px; border-radius:50%; background:var(--band-accent)}
.step h3{font-size:19px}
.step p{font-size:15px}
@media (max-width: 900px){.steps{grid-template-columns:1fr 1fr; row-gap:32px}}
@media (max-width: 520px){.steps{grid-template-columns:1fr}}
.chips{margin-top:48px; display:flex; flex-wrap:wrap; gap:10px}
.chip{font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:7px 12px; border:1px solid var(--band-2); border-radius:999px; color:var(--band-ink)}

/* Values / positions */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.cards3 .label{color:var(--accent)}
.cards3 > div{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:grid; gap:10px; align-content:start; min-width:0}
.cards3 h3{font-size:20px}
.cards3 p{color:var(--muted); font-size:16px}
@media (max-width: 860px){.cards3{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.cards3{grid-template-columns:1fr}}

.owner{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px}
.owner img{width:72px; height:auto}
.owner .stack{gap:10px}
.owner .role{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
@media (max-width: 520px){.owner{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid; gap:0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); padding:18px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-family:var(--mono); font-size:18px; line-height:1.3}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted); margin-top:10px; max-width:70ch}

/* CTA band */
.cta-band{background:var(--accent-soft); border-block:1px solid var(--line); padding-block:56px}
.cta-band .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px}
.cta-band h2{font-size:clamp(24px,3vw,32px)}
.cta-band p{color:var(--muted); max-width:56ch; margin-top:8px}

/* Contact + forms */
.contact-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:56px; align-items:start}
.contact-grid > *{min-width:0}
.lines{display:grid; gap:20px}
.line .label{color:var(--muted); display:block; margin-bottom:4px}
.line .val{font-size:20px; font-weight:600; user-select:all; overflow-wrap:anywhere}
.copy{margin-left:8px; font:600 13px var(--body); background:none; border:1px solid var(--line); color:var(--muted); border-radius:4px; padding:3px 8px; cursor:pointer; vertical-align:middle}
.copy:hover{color:var(--ink); border-color:var(--muted)}
form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:grid; gap:16px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width: 560px){.row{grid-template-columns:1fr}}
label{display:grid; gap:6px; font-size:14px; font-weight:600}
fieldset{border:0; padding:0; margin:0; display:grid; gap:8px}
legend{font-size:14px; font-weight:600; margin-bottom:6px}
.checks{display:flex; flex-wrap:wrap; gap:8px 18px}
.checks label{display:flex; align-items:center; gap:8px; font-weight:400; font-size:15px}
.checks input{width:auto}
input,select,textarea{font:16px var(--body); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:10px 12px; width:100%; min-width:0}
textarea{min-height:110px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.form-note{font-size:14px; color:var(--muted)}
.form-error{font-size:14px; color:var(--accent); font-weight:600}
.result{border:1px solid var(--accent); background:var(--accent-soft); border-radius:var(--radius); padding:16px; display:grid; gap:10px; font-size:15px}
.result pre{white-space:pre-wrap; font:13px/1.5 var(--mono); margin:0; max-height:220px; overflow:auto}
.result .actions{display:flex; flex-wrap:wrap; gap:10px}
.result .btn{font-size:14px; padding:9px 14px}
@media (max-width: 860px){.contact-grid{grid-template-columns:1fr; gap:32px}}

/* Footer */
footer{background:var(--band); color:var(--band-muted); font-size:15px}
footer .wrap{padding-block:48px 32px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
footer .wrap > *{min-width:0}
footer .fbrand{display:flex; gap:14px; align-items:flex-start}
footer .fbrand img{width:44px; height:auto}
footer b{color:var(--band-ink); font-family:var(--display); font-size:17px}
footer h4{margin:0 0 10px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--band-ink)}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
footer a{text-decoration:none}
footer a:hover{color:var(--band-ink)}
footer .legal{grid-column:1/-1; border-top:1px solid var(--band-2); padding-top:20px; font-size:13px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px}
@media (max-width: 760px){footer .wrap{grid-template-columns:1fr 1fr}footer .wrap > :first-child{grid-column:1/-1}}

/* Inspection picker */
.cards2{grid-template-columns:1fr 1fr}
.pick{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:grid; gap:10px; align-content:start; text-decoration:none; color:inherit; min-width:0}
.pick:hover{border-color:var(--accent)}
.pick h3{font-size:22px}
.pick p{color:var(--muted); font-size:16px}
.pick .more{font-size:14px; font-weight:600; color:var(--accent)}
@media (max-width: 600px){.cards2{grid-template-columns:1fr}}

/* ===================== Alternate looks =====================
   html[data-look="clean"]: bright, open, rounded, heavy grotesque headings, no dark bands in light mode.
   html[data-look="bold"]:  industrial spec-sheet, condensed uppercase headings, square corners, heavier rules. */

/* ---- Clean ---- */
html[data-look="clean"]{
  --bg:#FFFFFF; --surface:#F6F6F7; --line:#E4E5E8;
  --band:#FFFFFF; --band-2:#E4E5E8; --band-ink:#16181B; --band-muted:#585E66; --band-accent:#8E0F1B; --beam:transparent;
  --display:"Archivo", "Helvetica Neue", Arial, sans-serif; --radius:14px;
}
@media (prefers-color-scheme: dark){html[data-look="clean"]:not([data-theme="light"]){--bg:#121416; --surface:#1A1D20; --band:#121416; --band-2:#2B2F34; --band-ink:#ECEDEE; --band-muted:#A3A9B0; --band-accent:#E0505E; --beam:transparent}}
html[data-look="clean"][data-theme="dark"]{--bg:#121416; --surface:#1A1D20; --band:#121416; --band-2:#2B2F34; --band-ink:#ECEDEE; --band-muted:#A3A9B0; --band-accent:#E0505E; --beam:transparent}
html[data-look="clean"] h1, html[data-look="clean"] h2, html[data-look="clean"] h3{font-weight:800; letter-spacing:-.02em}
html[data-look="clean"] .hero h1 em{font-style:normal}
html[data-look="clean"] .pipe{display:none}
html[data-look="clean"] .hero, html[data-look="clean"] .page-head{border-bottom:1px solid var(--line)}
html[data-look="clean"] .hero .wrap{padding-block:88px 64px}
html[data-look="clean"] .hero-mark{width:min(380px,32vw)}
html[data-look="clean"] section.dark{background:var(--surface)}
html[data-look="clean"] .services{border:0; gap:20px}
html[data-look="clean"] .svc{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
html[data-look="clean"] .label{letter-spacing:.08em}
html[data-look="clean"] .btn{border-radius:999px; padding-inline:22px}
html[data-look="clean"] .checklist, html[data-look="clean"] form, html[data-look="clean"] .owner{border-radius:var(--radius)}
html[data-look="clean"] .cta-band{background:var(--accent); border:0}
html[data-look="clean"] .cta-band h2{color:var(--accent-ink)}
html[data-look="clean"] .cta-band p{color:var(--accent-ink); opacity:.85}
html[data-look="clean"] .cta-band .btn-primary{background:var(--accent-ink); color:var(--accent)}
html[data-look="clean"] .step{border-top-color:var(--line)}
html[data-look="clean"] .chip{border-color:var(--line)}
html[data-look="clean"] .top{border-bottom-color:transparent; box-shadow:0 1px 0 var(--line)}

/* ---- Bold ---- */
html[data-look="bold"]{
  --bg:#E9EAEC; --surface:#FFFFFF; --line:#C9CCD1;
  --display:"Barlow Condensed", "Arial Narrow", Arial, sans-serif; --radius:0px;
}
@media (prefers-color-scheme: dark){html[data-look="bold"]:not([data-theme="light"]){--bg:#0E0F10; --surface:#17191B; --line:#33373C}}
html[data-look="bold"][data-theme="dark"]{--bg:#0E0F10; --surface:#17191B; --line:#33373C}
html[data-look="bold"] h1, html[data-look="bold"] h2, html[data-look="bold"] h3{text-transform:uppercase; letter-spacing:.01em; line-height:1.02}
html[data-look="bold"] .hero h1{font-size:clamp(44px,8vw,92px); max-width:14ch}
html[data-look="bold"] .page-head h1{font-size:clamp(38px,6.5vw,72px)}
html[data-look="bold"] .hero h1 em{font-style:normal}
html[data-look="bold"] .sec-head h2{font-size:clamp(34px,5vw,54px)}
html[data-look="bold"] .svc h3, html[data-look="bold"] .pick h3{font-size:28px}
html[data-look="bold"] .hero::before{display:none}
html[data-look="bold"] .hero .wrap{border-left:6px solid var(--band-accent); padding-left:max(28px, env(safe-area-inset-left,0px))}
html[data-look="bold"] .services, html[data-look="bold"] .svc{border-width:2px}
html[data-look="bold"] .btn{border-radius:0; text-transform:uppercase; letter-spacing:.06em; font-size:14px}
html[data-look="bold"] .top{border-bottom:3px solid var(--accent)}
html[data-look="bold"] .step{border-top-width:4px}
html[data-look="bold"] .step::after{border-radius:0}
html[data-look="bold"] .cta-band{background:var(--band); border:0}
html[data-look="bold"] .cta-band h2{color:var(--band-ink)}
html[data-look="bold"] .cta-band p{color:var(--band-muted)}
html[data-look="bold"] .chip, html[data-look="bold"] .shows span{border-radius:0}
html[data-look="bold"] .checklist header{background:var(--band); color:var(--band-ink); border-bottom:0}

/* ---- Preview-only design switcher ---- */
.look-switch{position:fixed; z-index:40; left:max(12px, env(safe-area-inset-left,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:4px; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:999px; box-shadow:0 6px 24px rgba(0,0,0,.18); font:600 13px var(--body)}
.look-switch span{padding:0 8px 0 10px; color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.look-switch button{border:0; background:transparent; color:var(--ink); font:inherit; padding:7px 12px; border-radius:999px; cursor:pointer}
.look-switch button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}

/* ---- Hybrid: Stage's dark bands, beam and serif warmth + Bold's condensed caps and hard edges ---- */
html[data-look="hybrid"]{ --display:"Barlow Condensed", "Arial Narrow", Arial, sans-serif; --serif:"Libre Caslon Text", Georgia, serif; --radius:2px }
html[data-look="hybrid"] h1, html[data-look="hybrid"] h2{text-transform:uppercase; letter-spacing:.01em; line-height:1.0}
html[data-look="hybrid"] h3{font-family:var(--serif); letter-spacing:0}
html[data-look="hybrid"] .hero h1{font-size:clamp(46px,8vw,96px); max-width:13ch}
html[data-look="hybrid"] .hero h1 em{font-family:var(--serif); text-transform:none; font-style:italic; font-weight:700; letter-spacing:-.01em}
html[data-look="hybrid"] .page-head h1{font-size:clamp(40px,6.5vw,76px)}
html[data-look="hybrid"] .sec-head h2, html[data-look="hybrid"] .split h2{font-size:clamp(34px,5vw,56px)!important}
html[data-look="hybrid"] .svc-detail h2{font-size:clamp(32px,4vw,44px)}
html[data-look="hybrid"] .cta-band h2{font-size:clamp(28px,3.6vw,40px)}
html[data-look="hybrid"] .top{border-bottom:3px solid var(--accent)}
html[data-look="hybrid"] .btn{text-transform:uppercase; letter-spacing:.06em; font-size:14px}
html[data-look="hybrid"] .step{border-top-width:4px}
html[data-look="hybrid"] .step::after{border-radius:0}
html[data-look="hybrid"] .checklist header{background:var(--band); color:var(--band-ink); border-bottom:0}
html[data-look="hybrid"] .cta-band{background:var(--band); border:0}
html[data-look="hybrid"] .cta-band h2{color:var(--band-ink)}
html[data-look="hybrid"] .cta-band p{color:var(--band-muted)}
html[data-look="hybrid"] .services, html[data-look="hybrid"] .svc{border-width:2px}
html[data-look="hybrid"] .hero .wrap::before{content:""; position:absolute; left:0; top:96px; bottom:72px; width:4px; background:var(--band-accent)}
@media (max-width: 1160px){html[data-look="hybrid"] .hero .wrap::before{display:none}}

/* ---- Photo placeholders ---- */
.ph{margin:0; width:100%; max-width:100%; display:grid; place-content:center; justify-items:center; gap:10px; color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius);
  background:repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--bg) 14px 28px)}
.ph figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding-inline:12px}
.dark .ph{color:var(--band-muted); border-color:var(--band-2); background:repeating-linear-gradient(135deg, var(--band) 0 14px, var(--band-2) 14px 28px)}
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.strip > *{min-width:0}
@media (max-width: 700px){.strip{grid-template-columns:1fr 1fr}.strip > :last-child{display:none}}
.svc-detail .intro .ph{margin-top:8px}

/* ---- Photos ---- */
.photo{margin:0; width:100%; max-width:100%; overflow:hidden; border-radius:var(--radius); background:var(--band)}
.photo img{display:block; width:100%; height:100%; object-fit:cover}
.svc-detail .intro .photo{margin-top:8px}

/* Home photo bento: one large photo plus two stacked */
.bento{display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:auto auto; gap:16px}
.bento > *{min-width:0}
.bento .b-big{grid-row:1 / span 2; aspect-ratio:auto!important; height:100%}
@media (max-width: 700px){.bento{grid-template-columns:1fr 1fr}.bento .b-big{grid-column:1 / -1; grid-row:auto; aspect-ratio:3/2!important}}
.hoist-pair{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hoist-pair figcaption{grid-column:1 / -1; font-size:12px; color:var(--muted)}
.photo.light{background:#fff}
.photo.light img{object-fit:contain; padding:12px}

.photo-fig{margin:0; display:grid; gap:8px}
.photo-fig figcaption{font-size:12px; color:var(--muted)}

.creds-inline{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.creds-inline li{font-size:13px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted)}