/* Layout variants (config.design.hero / services / header / buttons) and one visual identity per site (config.design.name). Loaded last. */
:root{--font-head:var(--font);--head-weight:800;--head-transform:none;--head-spacing:-.01em;--btn-radius:var(--radius)}
h1,h2,h3,.stat .num,.price,.step-n,.row-n{font-family:var(--font-head);font-weight:var(--head-weight);text-transform:var(--head-transform);letter-spacing:var(--head-spacing)}
.brand{font-family:var(--font-head);letter-spacing:var(--head-spacing)}
.btn{border-radius:var(--btn-radius)}
[data-btn=pill]{--btn-radius:999px}
[data-btn=square]{--btn-radius:2px}

/* ---- header variants ---- */
.hdr-dark{background:var(--secondary);border-bottom-color:rgba(255,255,255,.1);backdrop-filter:none}
.hdr-dark .brand,.hdr-dark .nav a,.hdr-dark .phone-link{color:var(--on-secondary)}
.hdr-dark .nav a:hover{background:rgba(255,255,255,.1)}
.hdr-dark .nav a[aria-current=page]{background:var(--accent);color:var(--on-accent)}
.hdr-dark .nav-toggle{color:var(--on-secondary);border-color:rgba(255,255,255,.3)}
.hdr-center .nav-in{flex-wrap:wrap;justify-content:center;gap:.2rem 1.5rem;padding-block:.9rem}
.hdr-center .brand{order:1;flex:1 0 100%;justify-content:center;font-size:1.45rem}
.hdr-center .nav{order:2;margin:0}
.hdr-center .nav-actions{order:3}
@media (max-width:820px){
  .hdr-dark .nav{background:var(--secondary)}
  .hdr-center .nav-in{flex-wrap:nowrap;justify-content:flex-start;padding-block:0}
  .hdr-center .brand{flex:0 1 auto;justify-content:flex-start;font-size:1.1rem}
}

/* ---- hero variants ---- */
.hero-full{position:relative;color:#fff;padding:clamp(3rem,8vw,6rem) 0;background:var(--secondary);isolation:isolate}
.hero-full .hero-bg{position:absolute;inset:0;z-index:-2}
.hero-full .hero-bg img.photo,.hero-full .hero-bg .scene{width:100%;height:100%;object-fit:cover}
.hero-full::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,color-mix(in srgb,var(--secondary) 94%,transparent) 0%,color-mix(in srgb,var(--secondary) 72%,transparent) 55%,color-mix(in srgb,var(--secondary) 38%,transparent) 100%)}
.hero-full h1,.hero-full .lead{color:#fff}
.hero-full .lead{opacity:.92}
.hero-full .eyebrow{color:var(--accent)}
.hero-full .btn-outline{border-color:#fff;color:#fff}
.hero-full .btn-outline:hover{background:#fff;color:#0b1220}
.hero-full .chips li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.hero-full .chips .ic{color:var(--accent)}
.hero-full .quick{margin:0;color:var(--text)}
.hero-full .badge{position:static;display:inline-flex;margin-top:.9rem}
.hero-center{text-align:center;padding-bottom:3.5rem}
.hero-center .hero-copy{max-width:54rem;margin:0 auto}
.hero-center .btn-row,.hero-center .chips{justify-content:center}
.hero-wide{position:relative;margin-top:2.2rem}
.hero-art.wide{aspect-ratio:21/9;border-radius:calc(var(--radius) + 8px)}
.hero-center .quick{position:relative;max-width:660px;margin:-4.5rem auto 0;box-shadow:var(--shadow);text-align:left}
@media (max-width:720px){.hero-art.wide{aspect-ratio:16/10}.hero-center .quick{margin-top:-2.5rem}}

/* ---- service layouts ---- */
.svc-overlay{position:relative;padding:0;overflow:hidden;aspect-ratio:4/5;color:#fff;border:0;display:flex;align-items:flex-end}
.svc-overlay .ov-img{position:absolute;inset:0;display:block}
.svc-overlay .ov-img img.photo{transition:transform .6s ease}
.svc-overlay:hover .ov-img img.photo{transform:scale(1.07)}
.svc-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.9) 6%,rgba(8,8,8,.4) 52%,transparent 82%);pointer-events:none}
.svc-overlay .ov-body{position:relative;z-index:2;padding:1.3rem}
.svc-overlay h3,.svc-overlay h3 a{color:#fff}
.svc-overlay p{color:rgba(255,255,255,.86)}
.svc-overlay .ico{background:var(--accent);color:var(--on-accent)}
.svc-overlay .card-links a{color:#fff}
.svc-overlay .card-links .strong{color:var(--accent)}
.rows{display:grid;gap:clamp(2.2rem,5vw,4.2rem)}
.svc-row{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.svc-row.flip .row-img{order:2}
.row-img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.row-img img.photo{transition:transform .6s ease}
.svc-row:hover .row-img img.photo{transform:scale(1.04)}
.row-n{display:block;font-size:3.2rem;line-height:1;color:color-mix(in srgb,var(--accent) 75%,var(--bg));margin-bottom:.3rem}
.row-body h3{font-size:clamp(1.4rem,3vw,1.9rem)}
.row-body h3 a{color:inherit;text-decoration:none}
.row-body p{color:var(--muted)}
@media (max-width:820px){.svc-row{grid-template-columns:1fr}.svc-row.flip .row-img{order:0}}

/* =========================================================
   1. FORGE (roofing): industrial, charcoal + brick red
   ========================================================= */
[data-design=forge]{--head-weight:900;--head-transform:uppercase;--head-spacing:.02em;--btn-radius:3px}
[data-design=forge] h1{font-size:clamp(2.3rem,5.6vw,4rem);line-height:1.02}
[data-design=forge] h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
[data-design=forge] .sec-head h2::after{content:"";display:block;width:68px;height:6px;background:var(--accent);margin-top:.7rem}
[data-design=forge] .sec-head.center h2::after{margin-inline:auto}
[data-design=forge] .btn{text-transform:uppercase;letter-spacing:.07em;font-weight:800}
[data-design=forge] .card{border-radius:4px;box-shadow:none;border:2px solid var(--border)}
[data-design=forge] .service:hover,[data-design=forge] .project:hover{border-color:var(--accent);box-shadow:6px 6px 0 var(--accent);transform:translate(-3px,-3px)}
[data-design=forge] .chips li{border-radius:3px;font-weight:700}
[data-design=forge] .trust{background:var(--accent)}
[data-design=forge] .trust .stat .num{color:var(--on-accent)}
[data-design=forge] .trust .stat .lbl{color:var(--on-accent);opacity:.85}
[data-design=forge] .step-n{border-radius:3px;background:var(--accent);color:var(--on-accent)}
[data-design=forge] .ico{border-radius:3px;background:var(--secondary);color:var(--on-secondary)}
[data-design=forge] .cta-band{background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 14px,transparent 14px 28px),var(--secondary)}
[data-design=forge] .section.alt{background:var(--surface)}
[data-design=forge] .thumb,[data-design=forge] .card-img,[data-design=forge] .hero-art{border-radius:0}
[data-design=forge] .pill{border-radius:2px}

/* =========================================================
   2. BREEZE (hvac): airy, cool blue + cyan, soft shapes
   ========================================================= */
[data-design=breeze]{--head-weight:700;--head-spacing:-.02em;--btn-radius:14px}
[data-design=breeze] .hero{background:radial-gradient(1100px 480px at 88% -10%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 60%),linear-gradient(180deg,var(--surface),var(--bg))}
[data-design=breeze] .hero-art{border-radius:44px 44px 150px 44px;border:0;box-shadow:0 30px 60px color-mix(in srgb,var(--primary) 22%,transparent)}
[data-design=breeze] .card{border:0;border-radius:26px;box-shadow:0 14px 40px color-mix(in srgb,var(--primary) 12%,transparent)}
[data-design=breeze] .card-img{border-radius:26px 26px 0 0}
[data-design=breeze] .ico{border-radius:50%;background:color-mix(in srgb,var(--accent) 22%,var(--bg));color:var(--primary)}
[data-design=breeze] .sec-head h2::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--accent);margin-right:.55rem;vertical-align:.08em}
[data-design=breeze] .sec-head.center h2::before{display:none}
[data-design=breeze] .trust{background:linear-gradient(100deg,var(--primary),var(--secondary))}
[data-design=breeze] .trust .stat .num{color:#fff}
[data-design=breeze] .step-n{border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
[data-design=breeze] .cta-band{background:linear-gradient(120deg,var(--primary),var(--secondary))}
[data-design=breeze] .chips li{border-radius:999px;border:0;box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 12%,transparent)}
[data-design=breeze] .thumb{border-radius:26px 26px 0 0}

/* =========================================================
   3. ATELIER (remodeling): editorial, espresso + brass, square
   ========================================================= */
[data-design=atelier]{--head-weight:500;--head-spacing:-.01em;--btn-radius:0px}
[data-design=atelier] h1{font-weight:400;font-size:clamp(2.5rem,5.4vw,4.2rem);line-height:1.06}
[data-design=atelier] .eyebrow{letter-spacing:.22em;font-weight:600;color:var(--accent)}
[data-design=atelier] .btn{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:700}
[data-design=atelier] .card{border-radius:0;box-shadow:none;border:1px solid var(--border)}
[data-design=atelier] .hero{background:var(--bg)}
[data-design=atelier] .hero-art,[data-design=atelier] .thumb,[data-design=atelier] .row-img,[data-design=atelier] .card-img{border-radius:0}
[data-design=atelier] .sec-head h2::after{content:"\2014";display:block;color:var(--accent);font-weight:300;margin-top:.3rem}
[data-design=atelier] .trust{background:transparent;color:var(--text);border-block:1px solid var(--border)}
[data-design=atelier] .trust .stat .num{color:var(--primary);font-weight:400}
[data-design=atelier] .trust .stat .lbl{color:var(--muted);opacity:1}
[data-design=atelier] .ico{border-radius:0;background:transparent;border:1px solid var(--border);color:var(--accent)}
[data-design=atelier] .step-n{border-radius:0;background:transparent;color:var(--accent);border:1px solid var(--accent)}
[data-design=atelier] .cta-band{background:var(--primary)}
[data-design=atelier] .section.alt{background:var(--surface)}
[data-design=atelier] .chips li{border-radius:0;border-color:var(--border)}
[data-design=atelier] .pill{border-radius:0}
[data-design=atelier] .row-n{font-weight:300;color:var(--accent)}
[data-design=atelier] .site-footer{background:var(--primary)}

/* =========================================================
   4. TIMBER (tree service): rugged, bark brown + amber, leaf-cut corners
   ========================================================= */
[data-design=timber]{--head-weight:700;--head-transform:uppercase;--head-spacing:.02em;--btn-radius:2px}
[data-design=timber] h1{font-size:clamp(2.3rem,5.8vw,4.2rem);line-height:1.02}
[data-design=timber] .btn{text-transform:uppercase;letter-spacing:.06em;font-weight:800}
[data-design=timber] .card{border-radius:2px 30px 2px 30px;box-shadow:none;border:2px solid var(--border)}
[data-design=timber] .svc-overlay{border-radius:2px 38px 2px 38px;border:0}
[data-design=timber] .ico{border-radius:2px 14px 2px 14px}
[data-design=timber] .step-n{border-radius:2px 14px 2px 14px;background:var(--accent);color:var(--on-accent)}
[data-design=timber] .trust{background:var(--secondary);border-top:6px solid var(--accent)}
[data-design=timber] .section.alt{background-color:var(--surface);background-image:repeating-linear-gradient(90deg,transparent 0 38px,color-mix(in srgb,var(--primary) 7%,transparent) 38px 40px)}
[data-design=timber] .sec-head h2::before{content:"";display:inline-block;width:.5em;height:.5em;background:var(--accent);border-radius:0 60% 0 60%;margin-right:.5rem;vertical-align:.05em}
[data-design=timber] .sec-head.center h2::before{display:none}
[data-design=timber] .cta-band{background:var(--primary)}
[data-design=timber] .chips li{border-radius:2px 12px 2px 12px}
[data-design=timber] .hero-art{border-radius:2px 44px 2px 44px}
[data-design=timber] .thumb{border-radius:0}
[data-design=timber] .pill{border-radius:2px 8px 2px 8px}

/* =========================================================
   5. MEADOW (landscaping): organic, leaf green + peach, arches and pills
   ========================================================= */
[data-design=meadow]{--head-weight:700;--head-spacing:-.015em;--btn-radius:999px}
[data-design=meadow] .hero{background:linear-gradient(180deg,var(--surface),var(--bg))}
[data-design=meadow] .hero-art{border-radius:999px 999px 32px 32px;aspect-ratio:4/5;max-height:580px;border:0;box-shadow:none}
[data-design=meadow] .hero-art .badge{top:auto;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap}
[data-design=meadow] .card{border-radius:30px;border:0;background:var(--surface);box-shadow:none}
[data-design=meadow] .card-img{border-radius:30px 30px 0 0}
[data-design=meadow] .thumb{border-radius:30px 30px 0 0}
[data-design=meadow] .ico{border-radius:50%;background:var(--accent);color:var(--on-accent)}
[data-design=meadow] .trust{margin:2.2rem 1rem 0;border-radius:36px;background:var(--primary)}
[data-design=meadow] .trust .stat .num{color:var(--accent)}
[data-design=meadow] .sec-head h2::after{content:"";display:block;width:60px;height:10px;border-radius:99px;background:var(--accent);margin-top:.7rem}
[data-design=meadow] .sec-head.center h2::after{margin-inline:auto}
[data-design=meadow] .step-n{background:var(--accent);color:var(--on-accent)}
[data-design=meadow] .chips li{border-radius:999px;background:var(--bg);border:0}
[data-design=meadow] .pill{border-radius:999px}
[data-design=meadow] .cta-band{background:var(--primary);border-radius:40px 40px 0 0}
[data-design=meadow] .section.alt{background:var(--surface)}
[data-design=meadow] .section.alt .card{background:var(--bg)}
[data-design=meadow] .row-img{border-radius:200px 200px 30px 30px}

/* =========================================================
   6. SPARKLE (cleaning): bright, violet + lemon, bubbles and chunky shadows
   ========================================================= */
[data-design=sparkle]{--head-weight:800;--head-spacing:-.02em;--btn-radius:999px}
[data-design=sparkle] .hero-center{background:radial-gradient(circle at 10% 22%,color-mix(in srgb,var(--accent) 40%,transparent) 0 64px,transparent 65px),radial-gradient(circle at 91% 28%,color-mix(in srgb,var(--primary) 18%,transparent) 0 110px,transparent 111px),radial-gradient(circle at 80% 88%,color-mix(in srgb,var(--accent) 30%,transparent) 0 46px,transparent 47px),radial-gradient(circle at 22% 78%,color-mix(in srgb,var(--primary) 12%,transparent) 0 38px,transparent 39px),linear-gradient(180deg,var(--surface),var(--bg))}
[data-design=sparkle] .card{border-radius:28px;border:2px solid color-mix(in srgb,var(--primary) 16%,var(--bg));box-shadow:0 8px 0 color-mix(in srgb,var(--primary) 12%,transparent)}
[data-design=sparkle] .service:hover,[data-design=sparkle] .project:hover,[data-design=sparkle] .quote:hover{transform:translateY(-5px)}
[data-design=sparkle] .card-img,[data-design=sparkle] .thumb{border-radius:24px 24px 0 0}
[data-design=sparkle] .ico{border-radius:50%;background:var(--accent);color:var(--on-accent)}
[data-design=sparkle] .trust{background:var(--primary)}
[data-design=sparkle] .trust .stat .num{color:var(--accent)}
[data-design=sparkle] .sec-head h2::after{content:"\2726";color:var(--accent);margin-left:.45rem;font-size:.8em}
[data-design=sparkle] .step-n{border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:0 5px 0 color-mix(in srgb,var(--primary) 35%,transparent)}
[data-design=sparkle] .btn{font-weight:800}
[data-design=sparkle] .btn-accent{box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 60%,#000)}
[data-design=sparkle] .btn-accent:active{box-shadow:none;transform:translateY(4px)}
[data-design=sparkle] .chips li{border-radius:999px;border:2px solid color-mix(in srgb,var(--primary) 16%,var(--bg))}
[data-design=sparkle] .hero-art.wide{border-radius:36px;border:4px solid var(--bg);box-shadow:0 14px 0 color-mix(in srgb,var(--primary) 14%,transparent)}
[data-design=sparkle] .cta-band{background:linear-gradient(120deg,var(--primary),color-mix(in srgb,var(--primary) 60%,var(--accent)))}
[data-design=sparkle] .pill{border-radius:999px}

/* =========================================================
   7. TORQUE (pressure washing): dark, electric blue + lime, slanted and neon
   ========================================================= */
[data-design=torque]{--head-weight:400;--head-transform:uppercase;--head-spacing:.04em;--btn-radius:0px;--ink:var(--text);color-scheme:dark}
[data-design=torque] h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1}
[data-design=torque] a{color:var(--primary)}
[data-design=torque] .card,[data-design=torque] .faq details,[data-design=torque] .modal,[data-design=torque] .btn-ghost,[data-design=torque] .pill-x,[data-design=torque] .calc,[data-design=torque] .badge,[data-design=torque] .pill{background:var(--surface);color:var(--text)}
[data-design=torque] .chips li{background:var(--surface);color:var(--text)}
[data-design=torque] .btn-light{background:var(--text);color:var(--bg)}
[data-design=torque] .btn{text-transform:uppercase;letter-spacing:.09em;font-weight:800}
[data-design=torque] .btn-accent{box-shadow:0 0 26px color-mix(in srgb,var(--accent) 45%,transparent)}
[data-design=torque] .btn-accent,[data-design=torque] .btn-accent:hover,[data-design=torque] .promo a{color:var(--on-accent)}
[data-design=torque] .nav a{color:var(--text)}
[data-design=torque] .nav a[aria-current=page]{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
[data-design=torque] .card{border-radius:0;border:1px solid color-mix(in srgb,var(--primary) 40%,transparent);box-shadow:none}
[data-design=torque] .service,[data-design=torque] .project,[data-design=torque] .pkg,[data-design=torque] .svc-overlay{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
[data-design=torque] .service:hover,[data-design=torque] .project:hover{border-color:var(--accent);transform:translateY(-4px)}
[data-design=torque] .ico{border-radius:0;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
[data-design=torque] .step-n{border-radius:0;background:transparent;border:2px solid var(--accent);color:var(--accent)}
[data-design=torque] .trust{background:linear-gradient(90deg,var(--secondary),color-mix(in srgb,var(--primary) 35%,var(--secondary)));border-block:1px solid var(--accent)}
[data-design=torque] .trust .stat .num{color:var(--accent);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 50%,transparent)}
[data-design=torque] .sec-head h2::before{content:"//";color:var(--accent);margin-right:.45rem}
[data-design=torque] .sec-head.center h2::before{display:none}
[data-design=torque] .section.alt{background:var(--surface)}
[data-design=torque] .section.alt .card{background:var(--bg)}
[data-design=torque] .site-footer{background:#05080f}
[data-design=torque] .cta-band{background:linear-gradient(120deg,var(--secondary),color-mix(in srgb,var(--primary) 45%,var(--secondary)));border-block:1px solid var(--accent)}
[data-design=torque] .hero-art{border-radius:0;border:1px solid var(--primary);box-shadow:0 0 50px color-mix(in srgb,var(--primary) 30%,transparent)}
[data-design=torque] .thumb,[data-design=torque] .card-img{border-radius:0}
[data-design=torque] .promo{background:var(--accent)}
[data-design=torque] .hdr-dark{background:#05080f}
[data-design=torque] .ba-tag{background:var(--accent);color:var(--on-accent)}
[data-design=torque] .sum{background:var(--bg)}
[data-design=torque] .wiz-steps li span{background:var(--bg)}
[data-design=torque] .pkg-opt.on{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
[data-design=torque]{--success:#34d399;--danger:#ff7a7a}
[data-design=torque] .wiz-steps li[aria-current=step] span,[data-design=torque] .wiz-steps li.done span{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
[data-design=torque] .req{color:var(--danger)}

/* =========================================================
   8. VOYAGE (travel agency): clean ocean teal + sunset orange, soft rounded cards
   Same structure as Timber (full hero, overlay cards, dark header), calmer and more polished.
   ========================================================= */
[data-design=voyage]{--head-weight:700;--head-spacing:-.02em;--btn-radius:12px}
[data-design=voyage] h1{font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.05}
[data-design=voyage] .eyebrow{letter-spacing:.14em;font-size:.8rem}
[data-design=voyage] .card{border:0;border-radius:20px;box-shadow:0 10px 34px color-mix(in srgb,var(--secondary) 10%,transparent)}
[data-design=voyage] .svc-overlay{border-radius:22px}
[data-design=voyage] .svc-overlay::after{background:linear-gradient(to top,color-mix(in srgb,var(--secondary) 94%,transparent) 8%,color-mix(in srgb,var(--secondary) 42%,transparent) 55%,transparent 86%)}
[data-design=voyage] .ico{border-radius:14px;background:color-mix(in srgb,var(--accent) 22%,var(--bg));color:var(--primary)}
[data-design=voyage] .svc-overlay .ico{background:var(--accent);color:var(--on-accent)}
[data-design=voyage] .trust{background:linear-gradient(100deg,var(--secondary),var(--primary))}
[data-design=voyage] .trust .stat .num{color:var(--accent)}
[data-design=voyage] .sec-head h2::after{content:"";display:block;width:54px;height:5px;border-radius:99px;background:var(--accent);margin-top:.7rem}
[data-design=voyage] .sec-head.center h2::after{margin-inline:auto}
[data-design=voyage] .step-n{border-radius:50%;background:var(--primary);color:var(--on-primary)}
[data-design=voyage] .cta-band{background:linear-gradient(120deg,var(--secondary),var(--primary))}
[data-design=voyage] .chips li{border-radius:999px}
[data-design=voyage] .thumb{border-radius:20px 20px 0 0}
[data-design=voyage] .section.alt{background:var(--surface)}
[data-design=voyage] .project .btn{margin-top:.8rem}

/* =========================================================
   Shared polish (all designs)
   ========================================================= */
/* overlay cards: .service is a column flexbox, so the text block needs justify-content (not align-items) to sit at the bottom */
.svc-overlay{justify-content:flex-end}
.svc-overlay .ov-body{width:100%}

/* language switch (only rendered when config.i18n has more than one language) */
.lang{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;padding:2px;flex:none}
.lang button{border:0;background:transparent;color:inherit;font:inherit;font-size:.76rem;font-weight:800;letter-spacing:.05em;padding:.26rem .62rem;border-radius:999px;cursor:pointer;min-height:30px;line-height:1}
.lang button:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
.lang button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.hdr-dark .lang{color:var(--on-secondary)}
.hdr-light .lang,.hdr-center .lang{color:var(--ink)}

/* optional phone carousel for long card lists on the home page (design.mobileScroll) */
@media (max-width:720px){
  .svc-overlay{aspect-ratio:auto;min-height:350px}
  .grid.hscroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;margin-inline:-1rem;padding:.4rem 1rem 1.1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .grid.hscroll::-webkit-scrollbar{display:none}
  .grid.hscroll>*{flex:0 0 82%;scroll-snap-align:center;min-width:0}
}

/* =========================================================
   Voyage refinements (travel sites)
   ========================================================= */
[data-design=voyage] .hero-full h1{text-wrap:balance}
[data-design=voyage] .hero-full .quick{border-top:6px solid var(--accent);box-shadow:0 24px 60px rgba(0,0,0,.35)}
[data-design=voyage] .hero-full .quick h2{font-size:1.35rem}
[data-design=voyage] .card.service:hover,[data-design=voyage] .project:hover{transform:translateY(-4px);box-shadow:0 18px 44px color-mix(in srgb,var(--secondary) 18%,transparent)}
[data-design=voyage] .project .result{font-weight:700;color:var(--primary)}
[data-design=voyage] .site-footer{border-top:6px solid var(--accent)}
[data-design=voyage] .promo{font-weight:600}
@media (max-width:720px){
  [data-design=voyage] .section{padding:2.5rem 0}
  [data-design=voyage] .hero-full{padding:2rem 0 2.6rem}
  [data-design=voyage] .hero-full .chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-1rem;padding-inline:1rem;scrollbar-width:none;margin-top:1.1rem}
  [data-design=voyage] .hero-full .chips::-webkit-scrollbar{display:none}
  [data-design=voyage] .hero-full .chips li{flex:0 0 auto}
  [data-design=voyage] .grid.g4{grid-template-columns:1fr 1fr;gap:1.1rem .9rem}
  [data-design=voyage] .benefit h3{font-size:1rem;line-height:1.25}
  [data-design=voyage] .benefit p{font-size:.88rem}
  [data-design=voyage] .steps{grid-template-columns:1fr;gap:1.1rem}
  [data-design=voyage] .steps li{display:grid;grid-template-columns:44px 1fr;column-gap:.9rem;padding-top:0}
  [data-design=voyage] .steps .step-n{grid-row:span 2;margin:0}
  [data-design=voyage] .steps h3{margin:0 0 .15rem}
  [data-design=voyage] .steps p{margin:0}
  [data-design=voyage] .trust-in{grid-template-columns:1fr 1fr;padding:1.2rem 0}
  [data-design=voyage] .stat .num{font-size:1.5rem}
}

@media (max-width:980px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-copy,.hero-side{min-width:0}
}
@media (max-width:720px){
  .site-header .brand-name{white-space:nowrap;font-size:1rem}
  .lang button{padding:.22rem .5rem;font-size:.72rem;min-height:28px}
}
@media (max-width:480px){
  .site-header .phone-link{display:none}
}
@media (max-width:720px){
  .promo-in{flex-wrap:nowrap;gap:.7rem;padding-block:.5rem;font-size:.82rem;justify-content:space-between}
  .promo-in a{white-space:nowrap;flex:none}
}

@media (min-width:721px){
  [data-design=voyage] .steps li{position:relative}
  [data-design=voyage] .steps li:not(:last-child)::after{content:"";position:absolute;top:1.65rem;left:calc(44px + .8rem);right:-.9rem;border-top:2px dashed color-mix(in srgb,var(--primary) 35%,transparent)}
}