/* Site styles — single-file CSS */
/* IMPORTANT: Class names + existing CSS custom property names preserved for data-bind + site-wide linking. */

/* Fonts are loaded via <link> tags in HTML (faster than CSS @import). */


/* ---------------------------------------------------------
  1) TOKENS
  --------------------------------------------------------- */
:root{
  color-scheme: light dark;
/* =========================================================
   CLIENT COLOR PANEL (EDIT THIS)

   Goal: simple + fast edits during client calls.
   - Change ONLY the HEX values in the LIGHT MODE block (and optionally DARK MODE below).
   - Everything else in the stylesheet is derived from these values.

   Tip: If you don’t know what to put for “Primary Alt”, just copy “Primary”.
   ========================================================= */

/* LIGHT MODE (edit these hex values) */
--client-brand-primary: #0b3d91;        /* navy */
--client-brand-primary-alt: #1d4ed8;    /* bright blue */
--client-brand-secondary: #b91c1c;      /* red */
--client-brand-highlight: #dc2626;      /* vivid red highlight */
--client-danger: #b91c1c;               /* red */

--client-bg: #f8fafc;      /* off-white */
--client-bg-alt: #eef2f7;  /* cool light gray-blue */
--client-surface: #ffffff; /* white cards */
--client-mint: #f3f6fb;    /* subtle cool tint */

--client-text: #0b1020;    /* near-black */
--client-ink: #0b1020;     /* used for mixes/borders */

--client-button-text: #ffffff;
--client-hero-text: #000000; /* white hero text (safe on photo + scrim) */
/* Keep shadows dark even when --client-ink becomes light in dark mode. */
--client-shadow-ink: #28304e;

/* ---- Derived theme tokens (don’t edit below) ---- */
--brand-primary: var(--client-brand-primary);
--brand-primary-alt: var(--client-brand-primary-alt);
--brand-secondary: var(--client-brand-secondary);
--brand-highlight: var(--client-brand-highlight);
--danger: var(--client-danger);

--button-text: var(--client-button-text);
--hero-text: var(--client-hero-text);

--paper: var(--client-bg);
--paper-alt: var(--client-bg-alt);
--mint: var(--client-mint);
--white: var(--client-surface);
--text: var(--client-text);
--ink: var(--client-ink);
--shadowInk: var(--client-shadow-ink);
--scrimInk: var(--shadowInk);
/* =========================================================
   USUALLY NO NEED TO TOUCH — derived tokens (still editable)
   ========================================================= */

/* Core semantic colors */
--base: var(--paper);              /* legacy name */
--card: var(--white);             /* legacy name */
--whiteLegacy: var(--white);       /* legacy alias (do not edit) */
--onDark: var(--text);            /* legacy name */
--onLight: var(--text);           /* legacy name */

/* Blend strengths (safe to tweak) */
--mutedMix: 72%;
--kickerMix: 70%;
--borderMix: 12%;

--muted: color-mix(in srgb, var(--ink) var(--mutedMix), transparent);        /* legacy name */
--kickerColor: color-mix(in srgb, var(--ink) var(--kickerMix), transparent);  /* legacy name */
--border: color-mix(in srgb, var(--ink) var(--borderMix), transparent);       /* legacy name */

--button: var(--brand-primary);   /* legacy name */
--buttonText: var(--button-text); /* legacy name */
--phoneText: var(--text);         /* legacy name */

/* Shadows + focus */
--shadow: 0 22px 60px color-mix(in srgb, var(--shadowInk) 16%, transparent);
--shadowSm: 0 14px 36px color-mix(in srgb, var(--shadowInk) 10%, transparent);
--focus: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 22%, transparent);

/* Alternating section backgrounds */
--sectionA: var(--paper);
--sectionB: var(--paper-alt);
--sectionEdge: color-mix(in srgb, var(--ink) 8%, transparent);

/* Background aliases (used by per-section bg toggles) */
--bg-paper: var(--paper);
--bg-paper-alt: var(--paper-alt);
--bg-mint: var(--mint);
--bg-white: var(--white);


/* GRADIENTS + LAYERING
   - Switchboard controls (recommended on calls):
     assets/js/switchboard.js → layout.gradients ("on"/"off"), layout.gradientIntensity (0..1)
   - Advanced: the variables below fine-tune the hero scrim + glow strength.
*/
/* Gradient intensity (0 = flat / 1 = normal) */
--gradIntensity: 1;

/* Hero scrim strength */
--heroScrimTop: 0.18;
--heroScrimBottom: 0.55;

/* Glow strength */
--glowAAlpha: 0.16;
--glowBAlpha: 0.12;

--grad-divider: linear-gradient(90deg, transparent, var(--sectionEdge), transparent);
--grad-brand: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-alt) 100%);
--grad-btn-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-alt) 100%);

/* Subtle “sheen” on cards. Set to 'none' for fully flat cards. */
--grad-card-sheen: linear-gradient(180deg,
  rgb(from var(--white) r g b / 0.90) 0%,
  rgb(from var(--white) r g b / 0.76) 100%
);

/* Hero overlay to keep text readable over the hero image */
--hero-scrim: linear-gradient(180deg,
  rgb(from var(--scrimInk) r g b / calc(var(--heroScrimTop) * var(--gradIntensity))) 0%,
  rgb(from var(--scrimInk) r g b / calc(var(--heroScrimBottom) * var(--gradIntensity))) 100%
);

/* Hero image (edit this if you want a different default hero) */
--client-hero-image: url("../img/hero.jpg");
--hero-image: var(--client-hero-image);

/* Carousel edge fades */
--fade-left-paper: linear-gradient(90deg, var(--paper), transparent);
--fade-right-paper: linear-gradient(270deg, var(--paper), transparent);
--fade-left-mint: linear-gradient(90deg, var(--mint), transparent);
--fade-right-mint: linear-gradient(270deg, var(--mint), transparent);

/* Footer fade */
--grad-footer: linear-gradient(180deg, transparent 0%,
  rgb(from var(--mint) r g b / 0.55) 100%
);

/* Decorative glows (set to 'none' if you want less layering) */
--glowA: radial-gradient(900px 460px at 15% 25%, rgb(from var(--brand-primary) r g b / calc(var(--glowAAlpha) * var(--gradIntensity))) 0%, transparent 62%);
--glowB: radial-gradient(760px 420px at 85% 10%, rgb(from var(--brand-highlight) r g b / calc(var(--glowBAlpha) * var(--gradIntensity))) 0%, transparent 60%);

/* Tiny noise texture (set to 'none' for perfectly clean surfaces) */
--paperNoise: radial-gradient(circle at 1px 1px, rgb(from var(--ink) r g b / 0.04) 1px, rgba(0,0,0,0) 0);


/* Added (keeps your alias system from resolving to nothing) */
--onCard: var(--onLight);
--btn: var(--button);
--onBtn: var(--buttonText);

/* Aliases (easier names) */
--color-bg: var(--base);
--color-text: var(--onDark);
--color-muted: var(--muted);
--color-surface: var(--card);
--color-surface-text: var(--onCard);
--color-accent: var(--btn);
--color-accent-text: var(--onBtn);

/* Layout + type scale */
--container: 2000px;
--radius: 22px;
--radiusSm: 18px;

/* Spacing (slightly roomier) */
--space-1: 6px;
--space-2: 10px;
--space-3: 14px;
--space-4: 20px;
--space-5: 30px;
--space-6: 44px;
--space-7: 72px;
--space-8: 104px;

/* Type */
--h1: clamp(34px, 3.6vw, 58px);
--h2: clamp(24px, 2.1vw, 36px);
--h3: clamp(18px, 1.6vw, 22px);
--p: clamp(15px, 1.15vw, 17px);
--small: clamp(13px, 1vw, 14px);

/* Pricing font var referenced later */
--fs-3: clamp(18px, 1.6vw, 22px);

/* “Wide oval” radius controls */
--oval: 999px;      /* pill */
--ovalLg: 44px;     /* capsule */
--ovalMd: 28px;

/* =========================================================
   SHAPE DEFAULTS (controlled by ui.layout toggles)
   - Global cards use --cardRadius
   - Buttons + pill UI use --btnRadius
   ========================================================= */
--cardRadius: var(--ovalLg);
--btnRadius: var(--oval);
--trustRadius: var(--oval);

/* Typography — Claude/Anthropic vibe */
--font-sans: "Styrene B", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-heading: "Styrene B", var(--font-sans);
--font-body: "Tiempos Text", "Source Serif 4", "Georgia", "Times New Roman", serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;


}

@media (prefers-color-scheme: dark){
  :root{
    /* DARK MODE (edit hex values if you want a custom dark theme) */
    --client-bg: #0b0f1a;
    --client-bg-alt: #111827;
    --client-mint: #0f172a;
    --client-surface: #151b2f;
    --client-text: #e5e7eb;
    --client-ink: #e2e8f0;
    --client-button-text: #ffffff;
    --client-hero-text: #ffffff;
    --client-shadow-ink: #000000;

    /* Dark-mode blend tuning */
    --mutedMix: 55%;
    --kickerMix: 50%;
    --borderMix: 18%;

    --heroScrimTop: 0.32;
    --heroScrimBottom: 0.72;
    --glowAAlpha: 0.10;
    --glowBAlpha: 0.08;
    --paperNoise: radial-gradient(circle at 1px 1px, rgb(from var(--ink) r g b / 0.06) 1px, rgba(0,0,0,0) 0);
  }
}

/* ---------------------------------------------------------
  STYLE PRESETS
  - ui.layout.stylePreset in assets/js/site-inputs.js sets html[data-style]
  - "builder" = square services + clean modern look
  - "classic" = your original serif-forward look
--------------------------------------------------------- */

html[data-style="classic"]{
  --font-body: "anthropic-serif", Georgia, "Times New Roman", serif;
  --grad-card-sheen: var(--grad-card-sheen);
}

html[data-style="builder"]{
  /* slightly tighter + cleaner */
  --container: 2000px;
  --radius: 16px;
  --radiusSm: 14px;
  --ovalLg: 28px;
  --ovalMd: 18px;
  --shadow: 0 18px 45px rgb(from var(--shadowInk) r g b / 0.12);
  --shadowSm: 0 12px 28px rgb(from var(--shadowInk) r g b / 0.09);
  --grad-card-sheen: none;
  --hero-scrim: linear-gradient(180deg,
    rgb(from var(--scrimInk) r g b / 0.10) 0%,
    rgb(from var(--scrimInk) r g b / 0.46) 100%
  );
}

/* ---------------------------------------------------------
  GLOBAL SHAPE OVERRIDES (ui.layout)
  These are set by assets/js/main.js as html[data-*] attributes.
--------------------------------------------------------- */

/* Card corners */
html[data-card-corners="rounded"]{ --cardRadius: var(--ovalLg); }
html[data-card-corners="square"]{ --cardRadius: 14px; }

/* Button corners */
html[data-btn-shape="pill"]{ --btnRadius: var(--oval); }
html[data-btn-shape="rounded"]{ --btnRadius: var(--ovalMd); }
html[data-btn-shape="square"]{ --btnRadius: 14px; }
html[data-btn-shape="sharp"]{ --btnRadius: 6px; }

/* Trust item corners */
html[data-trust-shape="pill"]{ --trustRadius: var(--oval); }
html[data-trust-shape="rounded"]{ --trustRadius: var(--ovalMd); }
html[data-trust-shape="square"]{ --trustRadius: 14px; }


/* ---------------------------------------------------------
  2) BASE + RESET
  --------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
 margin:0;
 font-family: var(--font-body);
 background:var(--sectionA);
 color:var(--onDark);
 line-height:1.55;
 text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);}


/* Subtle site-wide texture (doesn't touch layout/markup) */
body::before{
 content:"";
 position:fixed; inset:0;
 pointer-events:none;
 opacity:.14;
 background-image: var(--paperNoise);
 background-size: 18px 18px;
 mix-blend-mode:multiply;
}


img{max-width:100%; display:block;}
a{color:inherit; text-decoration:underline; text-underline-offset:3px;}
a:hover{opacity:.92;}
p{font-size:var(--p); margin:0 0 var(--space-3);}
ul{margin:0; padding-left:18px;}
li{margin:6px 0; font-size:var(--p);}
small{font-size:var(--small);}
.hidden{display:none !important;}


/* ---------------------------------------------------------
  3) LAYOUT HELPERS
  --------------------------------------------------------- */
.container{
 max-width:var(--containerMax, var(--container));
 margin:0 auto;
 padding:0 var(--space-6);
 position:relative;
}
.section{
 padding: var(--sectionPadY, var(--space-7)) 0;
 position:relative;
 /* Each section is a gradient between Section Color A and Section Color B. */
 --section-bg-from-default: var(--sectionA);
 --section-bg-to-default: var(--sectionB);
 /* Allow per-section overrides via switchboard-set CSS vars (see "Section backgrounds" section below). */
 --section-bg-from: var(--section-bg-from-default);
 --section-bg-to: var(--section-bg-to-default);
 /* Hold the end colors near the edges so sections blend together. */
 background: linear-gradient(180deg,
   var(--section-bg-from) 0%,
   var(--section-bg-from) 14%,
   var(--section-bg-to) 86%,
   var(--section-bg-to) 100%
 );
 /* Performance: skip rendering offscreen sections until needed (supported browsers only). */
 content-visibility: auto;
 contain-intrinsic-size: 900px;
}
.section--tight{padding:var(--space-6) 0;}
.section:nth-of-type(even){
 /* Alternate direction so boundaries blend cleanly. */
 --section-bg-from-default: var(--sectionB);
 --section-bg-to-default: var(--sectionA);
}

/* Home page wraps each .section in a .home-block, so :nth-of-type(even) won't alternate. */
#main > .home-block:nth-of-type(odd) > .section{
 --section-bg-from-default: var(--sectionB);
 --section-bg-to-default: var(--sectionA);
}

/* Pricing has a <section class="page-hero"> before the .section stack — don't let it offset alternation. */
.page-hero ~ .section{
 --section-bg-from-default: var(--sectionA);
 --section-bg-to-default: var(--sectionB);
}
.page-hero ~ .section:nth-of-type(odd){
 --section-bg-from-default: var(--sectionB);
 --section-bg-to-default: var(--sectionA);
}
/* Remove hard divider rules between sections (use the gradient blend instead). */
.section::before,
.section::after{ display:none; }


@media (max-width: 900px){
 .container{padding:0 var(--space-4);}
 .section{padding:var(--space-7) 0;}
}


.hr{
 /* Default: no hard rule between major page sections (use gradient section backgrounds). */
 height:0;
 background:transparent;
 width:100%;
 margin:0;
 opacity:0;
}
.card .hr{
 height:1px;
 background:var(--border);
 opacity:.75;
}


/* Card system (capsule feel) */
.card{
 background:var(--card);
 color:var(--onLight);
 border:1px solid var(--border);
 border-radius:var(--cardRadius);
 box-shadow:var(--shadowSm);
 position:relative;
 overflow:hidden;
}
.card::before{
 content:"";
 position:absolute; inset:0;
 background: var(--grad-card-sheen);
 pointer-events:none;
 opacity:.55;
}
.card > *{ position:relative; z-index:1; }
.card--flat{box-shadow:none;}
.pad{padding:var(--space-6);}
.padSm{padding:var(--space-5);}


.grid{display:grid; gap:var(--space-5);}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width: 980px){
 .grid{grid-template-columns:1fr !important;}
 .grid-2,.grid-3{grid-template-columns:1fr !important;}
}

/* Detail pages (services + projects): make the media column fill the matched height (crop nicely) */
html[data-service-page] .grid.grid-2 > .card > img,
html[data-project-page] .grid.grid-2 > .card > img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ---------------------------------------------------------
  4) TYPOGRAPHY
  --------------------------------------------------------- */
.kicker,.lead{color:var(--kickerColor);}
.kicker{
 font-size:var(--small);
 letter-spacing:.10em;
 text-transform:uppercase;
 margin:0 0 var(--space-2);
}
.lead{
 font-size:var(--p);
 margin:0 0 var(--space-4);
 max-width: 74ch;
}


h1{font-size:var(--h1); line-height:1.06; margin:0 0 var(--space-3); letter-spacing:-.02em;}
h2{font-size:var(--h2); line-height:1.14; margin:0 0 var(--space-3); letter-spacing:-.01em;}
h3{font-size:var(--h3); line-height:1.22; margin:0 0 var(--space-2);}


/* ---------------------------------------------------------
  5) ACCESSIBILITY
  --------------------------------------------------------- */
.skip-link{
 position:absolute;
 left:12px; top:12px;
 padding:10px 12px;
 background:var(--white);
 color:var(--onLight);
 border:1px solid var(--border);
 border-radius:var(--oval);
 transform:translateY(-140%);
 transition:transform .2s ease;
 z-index:1850;
}
.skip-link:focus{transform:translateY(0); outline:none; box-shadow:var(--focus);}


.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
 outline:none;
 box-shadow:var(--focus);
}


/* ---------------------------------------------------------
  6) HEADER / NAV
  --------------------------------------------------------- */
.header{
 position:sticky;
 top:0;
 z-index:1000;
 background: rgb(from var(--paper) r g b / 0.78);
 backdrop-filter: saturate(160%) blur(12px);
 border-bottom:1px solid rgb(from var(--ink) r g b / 0.1);
}
.header__inner{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:var(--space-4);
 padding:16px 0;
}
.brand{
 display:flex; align-items:center; gap:10px;
 font-weight:900;
 letter-spacing:.2px;
 text-decoration:none;
 min-width: 0;
}
.brand__text{
 font-size:18px;
 white-space:nowrap;
 line-height:1;
}
.brand__logo{flex:0 0 auto;}
.brand__mark{
 width:38px;height:38px;border-radius:18px;
 background: var(--grad-brand);
 display:grid;place-items:center;
 color:var(--buttonText);
 font-weight:900;
 font-size:16px;
 box-shadow: 0 10px 26px rgb(from var(--brand-primary) r g b / 0.25);
}
.brand__name{font-size:18px;}


.nav{
 display:flex;
 align-items:center;
 gap:10px;
 margin-left:22px;
 padding: 6px;
 border-radius: var(--oval);
 border: 1px solid rgb(from var(--ink) r g b / 0.08);
 background: rgb(from var(--white) r g b / 0.55);
}
.nav a{
 text-decoration:none;
 padding:10px 14px;
 border-radius:var(--oval);
 border:1px solid transparent;
 transition: background .15s ease, transform .15s ease, border-color .15s ease;
 font-weight:800;
}
.nav a:hover{
 background: rgb(from var(--brand-primary) r g b / 0.08);
 border-color: rgb(from var(--brand-primary) r g b / 0.18);
 transform: translateY(-1px);
}
.nav a.active{
 background: rgb(from var(--brand-primary) r g b / 0.12);
 border-color: rgb(from var(--brand-primary) r g b / 0.24);
}


.header__right{
 display:flex;
 align-items:center;
 gap:10px;
 flex-wrap:nowrap;
 white-space:nowrap;
}


.phone-bubble{
 display:flex;
 align-items:center;
 gap:10px;
 padding:10px 14px;
 border-radius:var(--btnRadius);
 background: rgb(from var(--white) r g b / 0.78);
 border:1px solid rgb(from var(--ink) r g b / 0.1);
 text-decoration:none;
 color:var(--phoneText);
 box-shadow:0 12px 32px rgb(from var(--ink) r g b / 0.08);
}
.phone-bubble svg{width:18px;height:18px; flex:0 0 auto; color:var(--phoneText);}
.phone-bubble span{font-weight:900; color:var(--phoneText);}


.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 padding:13px 18px;
 border-radius:var(--btnRadius);
 border:1px solid transparent;
 cursor:pointer;
 text-decoration:none;
 font-weight:900;
 letter-spacing:.2px;
 line-height:1;
 user-select:none;
 transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}


.btn--primary{
 background: var(--grad-btn-primary);
 color: var(--buttonText);
 box-shadow: 0 18px 44px rgb(from var(--brand-primary) r g b / 0.22);
}
.btn--primary:hover{ transform: translateY(-1px); filter: saturate(1.05); }
.btn--primary:active{ transform: translateY(0px); box-shadow:none; }


.btn--ghost{
 background: rgb(from var(--white) r g b / 0.7);
 border-color: rgb(from var(--ink) r g b / 0.12);
 color: var(--onDark);
}
.btn--ghost:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgb(from var(--ink) r g b / 0.1); }
.btn--sm{padding:10px 12px; font-size:14px;}


.hamburger{
 width:46px; height:46px;
 border-radius:var(--btnRadius);
 border:1px solid rgb(from var(--ink) r g b / 0.12);
 background: rgb(from var(--white) r g b / 0.78);
 display:none;
 place-items:center;
 cursor:pointer;
 box-shadow:0 12px 28px rgb(from var(--ink) r g b / 0.08);
}
.hamburger svg{width:18px;height:18px;color:var(--onLight);}


.mobile-panel{
 border-top:1px solid rgb(from var(--ink) r g b / 0.1);
 background: rgb(from var(--paper) r g b / 0.96);
 padding:10px 0 14px;
 max-height:60vh;
 overflow:auto;
}
.mobile-panel a{
 display:block;
 padding:12px var(--space-5);
 text-decoration:none;
 border-bottom:1px solid rgb(from var(--ink) r g b / 0.06);
 font-weight:800;
}
.mobile-panel a:last-child{border-bottom:none;}


@media (max-width: 980px){
 .nav{display:none;}
 .hamburger{display:grid;}
 .phone-bubble span{display:inline;}
}
@media (max-width: 420px){
 .phone-bubble span{display:none;}
 .header__right{gap:8px;}
 .btn--primary{padding:12px 12px;}
 .brand__text{ font-size:16px; }
}

/* ---------------------------------------------------------
  MOBILE STICKY CTA (injected by assets/js/main.js)
  --------------------------------------------------------- */
:root{
  --mobileCtaH: 66px;
}

@media (max-width: 980px){
  html.has-mobile-cta body{
    padding-bottom: calc(var(--mobileCtaH) + 24px + env(safe-area-inset-bottom));
  }
  .mobile-cta{
    position:fixed;
    left:12px;
    right:12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index:1000;
    display:flex;
    gap:10px;
    padding:10px;
    border-radius:18px;
    background: rgb(from var(--paper) r g b / 0.92);
    border:1px solid rgb(from var(--ink) r g b / 0.14);
    box-shadow: 0 18px 50px rgb(from var(--ink) r g b / 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .mobile-cta .btn{
    flex:1;
    justify-content:center;
    white-space:nowrap;
    padding:12px 14px;
  }
}


/* ---------------------------------------------------------
  7) HERO (image backdrop + overlay)
  --------------------------------------------------------- */
.hero{padding:var(--space-8) 0 var(--space-7);}
.hero__wrap{
 position:relative;
 border-radius: calc(var(--ovalLg) + 10px);
 overflow:hidden;
 border:1px solid rgb(from var(--ink) r g b / 0.12);
 box-shadow:var(--shadow);
 min-height:560px;
 background:
   var(--glowA),
   var(--glowB),
   var(--hero-image-override, none) var(--hero-bg-pos, center)/cover no-repeat,
   var(--hero-image-override-alt, none) var(--hero-bg-pos, center)/cover no-repeat,
   var(--hero-image) var(--hero-bg-pos, center)/cover no-repeat;
 display:grid;
 align-items:stretch;
 padding:var(--space-7);
}

/* ---------------------------------------------------------
  HERO LAYOUT TOGGLES (driven by ui.layout)
  - ui.layout.heroContentSide -> html[data-hero-copy]
  - ui.layout.heroOverlay -> html[data-hero-overlay]
  - ui.layout.heroImageFocus -> sets --hero-bg-pos via JS
--------------------------------------------------------- */

html[data-hero-overlay="off"] .hero__wrap::after{ display:none; }

html[data-hero-copy="left"] .hero__copy{
  margin-left: clamp(0px, 3vw, 80px);
  margin-right: auto;
  text-align: left;
  align-items: flex-start;
}
html[data-hero-copy="center"] .hero__copy{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}
html[data-hero-copy="center"] .hero__copy p{ margin-left:auto; margin-right:auto; }
html[data-hero-copy="right"] .hero__copy{
  margin-left: auto;
  margin-right: clamp(0px, 3vw, 80px);
  text-align: right;
  align-items: flex-end;
}
.hero__wrap::after{
 content:""; position:absolute; inset:0;
 background: var(--hero-scrim);
 pointer-events:none;
}
.hero__media{display:none;}


.hero__copy{
 position:relative;
 z-index:1;
 max-width:var(--container);
 display:flex;
 flex-direction:column;
 justify-content:center;
 margin-left:clamp(0px, 3vw, 80px);
}
.hero__copy .card{
 background: rgb(from var(--white) r g b / 0.1);
 border-color: rgb(from var(--white) r g b / 0.18);
 box-shadow:none;
 backdrop-filter: saturate(140%) blur(14px);
 color: rgb(from var(--hero-text) r g b / 0.92);
}
.hero__copy h1{color:var(--hero-text); text-shadow:none;}
.hero__copy p{max-width:60ch; color:rgb(from var(--hero-text) r g b / 0.86);}
.hero__copy .kicker{color:rgb(from var(--hero-text) r g b / 0.76);}
.hero__bullets{margin:0 0 var(--space-4); padding-left:18px;}
.hero__bullets li{margin:10px 0; color:rgb(from var(--hero-text) r g b / 0.88);}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap;}
.hero__cta .btn--ghost{
 background: rgb(from var(--white) r g b / 0.1);
 border-color: rgb(from var(--white) r g b / 0.22);
 color: rgb(from var(--hero-text) r g b / 0.92);
}

/* When hero copy is centered/right-aligned, keep list markers aligned with the text (not stuck on the left). */
html[data-hero-copy="center"] .hero__bullets,
html[data-hero-copy="right"] .hero__bullets{
  padding-left:0;
  list-style-position:inside;
}

/* Page hero: optional background image (enabled by JS on detail pages without .hero__wrap) */
.page-hero[data-hero-image="on"]{
  padding: var(--space-8) 0 var(--space-7);
  position:relative;
  overflow:hidden;
  background:
    var(--glowA),
    var(--glowB),
    var(--hero-image-override, none) var(--hero-bg-pos, center)/cover no-repeat,
    var(--hero-image-override-alt, none) var(--hero-bg-pos, center)/cover no-repeat,
    var(--hero-image) var(--hero-bg-pos, center)/cover no-repeat;
}
.page-hero[data-hero-image="on"]::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hero-scrim);
  pointer-events:none;
}
.page-hero[data-hero-image="on"] .container{ position:relative; z-index:1; }
.page-hero[data-hero-image="on"] .kicker{ color:rgb(from var(--hero-text) r g b / 0.76); }
.page-hero[data-hero-image="on"] h1{ color:var(--hero-text); text-shadow:none; }
.page-hero[data-hero-image="on"] .lead{ color:rgb(from var(--hero-text) r g b / 0.86); }
.page-hero[data-hero-image="on"] .btn--ghost{
  background: rgb(from var(--white) r g b / 0.1);
  border-color: rgb(from var(--white) r g b / 0.22);
  color: rgb(from var(--hero-text) r g b / 0.92);
}


@media (max-width: 900px){
 .hero{padding:var(--space-7) 0 var(--space-6);}
 .hero__wrap{padding:var(--space-6); min-height:480px;}
 .page-hero[data-hero-image="on"]{ padding: var(--space-7) 0 var(--space-6); }
}

/* ---------------------------------------------------------
  HERO LAYOUT VARIANTS (ui.layout.heroLayout)
  html[data-hero-layout]
--------------------------------------------------------- */

/* Split layouts use the .hero__media element as the image */
html[data-hero-layout="split-left"] .hero__wrap,
html[data-hero-layout="split-right"] .hero__wrap{
  background: var(--glowA), var(--glowB);
  padding:0;
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items:stretch;
}
html[data-hero-layout="split-left"] .hero__media,
html[data-hero-layout="split-right"] .hero__media{
  display:block;
  background:
    var(--hero-image-override, none) var(--hero-bg-pos, center)/cover no-repeat,
    var(--hero-image-override-alt, none) var(--hero-bg-pos, center)/cover no-repeat,
    var(--hero-image) var(--hero-bg-pos, center)/cover no-repeat;
  position:relative;
  min-height:560px;
}
html[data-hero-layout="split-left"] .hero__copy,
html[data-hero-layout="split-right"] .hero__copy{
  margin:0;
  padding:var(--space-7);
}
html[data-hero-layout="split-right"] .hero__wrap{ grid-template-columns: 0.8fr 1.2fr; }
html[data-hero-layout="split-right"] .hero__media{ order:2; }

/* Overlay scrim for split layouts */
html[data-hero-layout="split-left"][data-hero-overlay="on"] .hero__media::after,
html[data-hero-layout="split-right"][data-hero-overlay="on"] .hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hero-scrim);
  pointer-events:none;
}
html[data-hero-layout="split-left"][data-hero-overlay="off"] .hero__media::after,
html[data-hero-layout="split-right"][data-hero-overlay="off"] .hero__media::after{ display:none; }

/* In split layouts, don't use the wrap overlay */
html[data-hero-layout="split-left"] .hero__wrap::after,
html[data-hero-layout="split-right"] .hero__wrap::after{ display:none; }

/* Stacked: image block on top, copy section underneath */
html[data-hero-layout="stacked"] .hero__wrap{
  background: var(--glowA), var(--glowB);
  padding:0;
  min-height:auto;
}
html[data-hero-layout="stacked"] .hero__media{
  display:block;
  height: 380px;
  background:
    var(--hero-image-override, none) var(--hero-bg-pos, center)/cover no-repeat,
    var(--hero-image-override-alt, none) var(--hero-bg-pos, center)/cover no-repeat,
    var(--hero-image) var(--hero-bg-pos, center)/cover no-repeat;
  position:relative;
}
html[data-hero-layout="stacked"] .hero__wrap::after{ display:none; }
html[data-hero-layout="stacked"][data-hero-overlay="on"] .hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hero-scrim);
  pointer-events:none;
}
html[data-hero-layout="stacked"] .hero__copy{
  padding:var(--space-6);
  margin:0;
}

/* Stacked order toggle */
html[data-hero-layout="stacked"][data-hero-stack="text-top"] .hero__copy{ grid-row: 1; }
html[data-hero-layout="stacked"][data-hero-stack="text-top"] .hero__media{ grid-row: 2; }

/* ---------------------------------------------------------
  HERO TEXT CARD (ui.layout.heroTextCard)
  html[data-hero-card]
--------------------------------------------------------- */
html[data-hero-card="solid"] .hero__copy .card{
  backdrop-filter:none;
  background: rgb(from var(--ink) r g b / 0.55);
  border-color: rgb(from var(--white) r g b / 0.16);
}
html[data-hero-card="none"] .hero__copy .card{
  background: transparent;
  border-color: transparent;
  box-shadow:none;
  backdrop-filter:none;
  padding:0;
  border-radius:0;
  overflow:visible;
}
html[data-hero-card="none"] .hero__copy .card::before{ content:none; }

/* Hero button alignment (ui.layout.heroButtonsAlign) */
html[data-hero-btn-align="left"] .hero__cta{ justify-content:flex-start; }
html[data-hero-btn-align="center"] .hero__cta{ justify-content:center; }
html[data-hero-btn-align="right"] .hero__cta{ justify-content:flex-end; }


/* ---------------------------------------------------------
  8) TRUST BAR + ICON BULLETS
  --------------------------------------------------------- */
.trustbar{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:14px;
 flex-wrap:wrap;
}
.trustbar__item{
 display:flex; align-items:center; gap:10px;
 padding:12px 14px;
 border:1px solid rgb(from var(--ink) r g b / 0.1);
 border-radius:var(--trustRadius);
 background: rgb(from var(--white) r g b / 0.75);
 color:var(--onLight);
 box-shadow:0 12px 30px rgb(from var(--ink) r g b / 0.08);
}
.trustbar__item svg{width:18px;height:18px;color:var(--button);}

/* Trust bar variants (ui.layout.trustStyle) */
html[data-trust-style="buttons"] .trustbar{ display:flex; }

html[data-trust-style="cards"] .trustbar{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
}
html[data-trust-style="cards"] .trustbar__item{
  padding:18px 18px;
  align-items:flex-start;
  justify-content:flex-start;
  flex-direction:column;
  gap:10px;
  background: var(--card);
  box-shadow: var(--shadowSm);
}
html[data-trust-style="cards"] .trustbar__item svg{ width:20px; height:20px; }

html[data-trust-style="blocks"] .trustbar{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
html[data-trust-style="blocks"] .trustbar__item{
  width:100%;
  justify-content:flex-start;
  padding:16px 18px;
}

/* "Chips" = compact pills (good for tight hero/trust layouts) */
html[data-trust-style="chips"] .trustbar{
  justify-content:flex-start;
  gap:10px;
}
html[data-trust-style="chips"] .trustbar__item{
  padding:9px 12px;
  box-shadow:none;
  background: transparent;
  border-color: rgb(from var(--ink) r g b / 0.14);
}
html[data-trust-style="chips"] .trustbar__item svg{ width:16px; height:16px; }

@media (max-width: 980px){
  html[data-trust-style="cards"] .trustbar{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  html[data-trust-style="cards"] .trustbar{ grid-template-columns: 1fr; }
}

/* Mobile trust bar: show 2 items per row (pills) */
@media (max-width: 980px){
  html[data-trust-style="buttons"][data-trust-carousel="off"] #trust .trustbar{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-content:stretch;
    gap:10px;
  }
  html[data-trust-style="buttons"][data-trust-carousel="off"] #trust .trustbar__item{
    width:100%;
    justify-content:flex-start;
    padding:10px 12px;
    gap:8px;
    font-size:13px;
    line-height:1.25;
  }
  html[data-trust-style="buttons"][data-trust-carousel="off"] #trust .trustbar__item svg{
    width:16px;
    height:16px;
  }
}
@media (max-width: 380px){
  html[data-trust-style="buttons"][data-trust-carousel="off"] #trust .trustbar__item{
    padding:9px 10px;
    font-size:12px;
  }
}


.iconline{display:flex; gap:10px; align-items:flex-start;}
.iconline svg{width:18px;height:18px; margin-top:2px; color:var(--button); flex:0 0 auto;}


/* ---------------------------------------------------------
  9) SERVICES — horizontal “bubble” slider (no text changes)
  --------------------------------------------------------- */
.services-carousel__wrap{
 position:relative;
 margin-top: var(--space-5);
}


#services .services-carousel{
 display:flex;
 gap: 16px;
 overflow-x:auto;
 padding: 6px 4px 12px;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}
#services .services-carousel::-webkit-scrollbar{ display:none; }


#services .services-carousel .card{
 flex: 0 0 auto;
 min-width: 360px;
 max-width: 420px;
 scroll-snap-align: start;
 border-radius: var(--ovalLg);
 border-color: rgb(from var(--ink) r g b / 0.1);
 box-shadow: 0 18px 44px rgb(from var(--ink) r g b / 0.12);
 transition: transform .18s ease, box-shadow .18s ease;
}
#services .services-carousel .card:hover{
 transform: translateY(-4px);
 box-shadow: 0 26px 66px rgb(from var(--ink) r g b / 0.16);
}
@media (max-width: 540px){
 #services .services-carousel .card{ min-width: 84vw; max-width: 84vw; }
}


#services .services-carousel .card::after{ content:none; }
#services .card[data-service-idx] h3{ margin-top: 10px; }
#services .card[data-service-idx]::before{ content:none; }


.learnmore{
 display:inline-flex;
 align-items:center;
 gap:10px;
 margin-top: var(--space-4);
 padding: 10px 14px;
 border-radius: var(--oval);
 border: 1px solid rgb(from var(--ink) r g b / 0.12);
 text-decoration:none;
 font-weight:900;
 background: rgb(from var(--white) r g b / 0.72);
}
.learnmore::after{
 content:"→";
 display:inline-block;
 transform: translateX(0);
 transition: transform .15s ease;
}
.learnmore:hover::after{ transform: translateX(3px); }


.services-carousel__btn{
 position:absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 46px;
 height: 46px;
 border-radius: var(--oval);
 border: 1px solid rgb(from var(--ink) r g b / 0.12);
 background: rgb(from var(--white) r g b / 0.82);
 box-shadow: 0 18px 40px rgb(from var(--ink) r g b / 0.12);
 display:grid;
 place-items:center;
 cursor:pointer;
 z-index: 5;
 transition: transform .15s ease, opacity .15s ease;
}
.services-carousel__btn:hover{ transform: translateY(-50%) scale(1.03); }
.services-carousel__btn:active{ transform: translateY(-50%) scale(.98); }
.services-carousel__btn[disabled]{ opacity:.35; cursor:default; }
.services-carousel__btn svg{ width:18px; height:18px; color: var(--onLight); }
.services-carousel__btn--prev{ left: -6px; }
.services-carousel__btn--next{ right: -6px; }


.services-carousel__fade{
 position:absolute; top:0; bottom:0;
 width: 80px;
 pointer-events:none;
 z-index: 4;
}
.services-carousel__fade--left{
 left:0;
 background: var(--fade-left-paper);
}
.services-carousel__fade--right{
 right:0;
 background: var(--fade-right-paper);
}
.section:nth-of-type(even) .services-carousel__fade--left{
 background: var(--fade-left-mint);
}
.section:nth-of-type(even) .services-carousel__fade--right{
 background: var(--fade-right-mint);
}


/* ---------------------------------------------------------
  9B) SERVICES — square cards grid (Site-Builder style)
  Turn this on with ui.layout.servicesLayout = "squares"
--------------------------------------------------------- */

html[data-services-layout="squares"] #services .grid{
  margin-top: var(--space-5);
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px){
  html[data-services-layout="squares"] #services .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  html[data-services-layout="squares"] #services .grid{ grid-template-columns: 1fr; }
}

.service-card{
  display:flex;
  flex-direction:column;
  gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Service card shapes (ui.layout.serviceCardsShape) */
html[data-service-shape="square"] .service-card{ border-radius: 14px; }
html[data-service-shape="rounded"] .service-card{ border-radius: var(--cardRadius); }

html[data-service-shape="circle"] .service-card{
  border-radius: 999px;
  aspect-ratio: 1 / 1;
  align-items:center;
  text-align:center;
}
html[data-service-shape="circle"] .service-card .learnmore{ margin-left:auto; margin-right:auto; }

html[data-service-shape="oval"] .service-card{
  border-radius: 999px;
  aspect-ratio: 4 / 3;
  align-items:center;
  text-align:center;
}
html[data-service-shape="oval"] .service-card .learnmore{ margin-left:auto; margin-right:auto; }

html[data-service-shape="star"] .service-card{
  border-radius: 0;
  aspect-ratio: 1 / 1;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 58px rgb(from var(--ink) r g b / 0.14);
  border-color: rgb(from var(--ink) r g b / 0.16);
}
.service-card__icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgb(from var(--brand-primary) r g b / 0.10);
  border: 1px solid rgb(from var(--brand-primary) r g b / 0.16);
  color: var(--brand-primary);
  margin-bottom: 2px;
}
.service-card__icon svg{ width: 22px; height: 22px; }
.service-card:hover .service-card__icon{
  background: var(--brand-primary);
  border-color: rgb(from var(--brand-primary) r g b / 0.20);
  color: var(--white);
}
.service-card h3{ margin: 0; }
.service-card .lead{ margin: 0; }
.service-card .learnmore{
  margin-top: auto;
  width: fit-content;
}

/* Row mode (optional): keep 2-col grid but make cards more compact */
html[data-services-layout="rows"] #services .grid{ margin-top: var(--space-5); }




/* ---------------------------------------------------------
  9C) MEDIA HELPERS (used on service/project detail pages)
--------------------------------------------------------- */
.media{
  width:100%;
  height:auto;
  display:block;
  border: 1px solid rgb(from var(--ink) r g b / 0.12);
  box-shadow: var(--shadowSm);
}

/* Project detail: optional A/B media cards (assets/img/project-a-N.jpg, project-b-N.jpg) */
html[data-project-page] .project-media{
  aspect-ratio: 4 / 3;
}
html[data-project-page] .project-media > img{
  width:100%;
  height:100%;
  object-fit:cover;
}
html[data-project-page] .project-media-grid[data-media-count="1"]{
  grid-template-columns: 1fr;
}
html[data-project-page] .project-media-grid[data-media-count="0"]{
  display:none;
}

/* Service detail media follows ui.layout.serviceCardsShape */
html[data-service-shape="square"] .media--service{ border-radius: 14px; clip-path:none; }
html[data-service-shape="rounded"] .media--service{ border-radius: var(--cardRadius); clip-path:none; }
html[data-service-shape="circle"] .media--service{ border-radius: 999px; clip-path:none; }
html[data-service-shape="oval"] .media--service{ border-radius: 999px; clip-path:none; }
html[data-service-shape="star"] .media--service{
  border-radius: 0;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

/* Project detail media follows ui.layout.projectCardsShape */
html[data-project-shape="square"] .media--project{ border-radius: 14px; clip-path:none; }
html[data-project-shape="rounded"] .media--project{ border-radius: var(--cardRadius); clip-path:none; }
html[data-project-shape="circle"] .media--project{ border-radius: 999px; clip-path:none; }
html[data-project-shape="oval"] .media--project{ border-radius: 999px; clip-path:none; }
html[data-project-shape="star"] .media--project{
  border-radius: 0;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}
/* ---------------------------------------------------------
  10) GALLERY
  --------------------------------------------------------- */
.gallery{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:var(--space-4);
}
.gallery img{
 width:100%;
 height:260px;
 object-fit:cover;
 border-radius: var(--ovalLg);
 border:1px solid rgb(from var(--ink) r g b / 0.1);
 box-shadow:var(--shadowSm);
 transition: transform .18s ease, box-shadow .18s ease;
}

/* Project gallery shapes follow ui.layout.projectCardsShape */
html[data-project-shape="square"] .gallery img{ border-radius: 14px; clip-path:none; }
html[data-project-shape="rounded"] .gallery img{ border-radius: var(--cardRadius); clip-path:none; }
html[data-project-shape="circle"] .gallery img{ border-radius: 999px; clip-path:none; aspect-ratio: 1 / 1; height:auto; }
html[data-project-shape="oval"] .gallery img{ border-radius: 999px; clip-path:none; aspect-ratio: 4 / 3; height:auto; }
html[data-project-shape="star"] .gallery img{
  border-radius: 0;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  aspect-ratio: 1 / 1;
  height:auto;
}
.gallery img:hover{
 transform: translateY(-3px);
 box-shadow: 0 24px 58px rgb(from var(--ink) r g b / 0.14);
}
@media (max-width: 980px){
 .gallery{grid-template-columns:1fr;}
 .gallery img{height:220px;}
}
@media (max-width: 540px){
 .gallery{grid-template-columns:1fr;}
 .gallery img{height:240px;}
}
.gallery__item{display:block;}
.gallery__item img{width:100%;height:auto;display:block;}


/* ---------------------------------------------------------
  11) FAQ
  --------------------------------------------------------- */
.faq details{
 border:1px solid rgb(from var(--ink) r g b / 0.12);
 border-radius: var(--ovalLg);
 background: rgb(from var(--white) r g b / 0.78);
 color:var(--onLight);
 padding:0;
 overflow:hidden;
 box-shadow:0 14px 34px rgb(from var(--ink) r g b / 0.1);
}
.faq summary{
 list-style:none;
 cursor:pointer;
 padding:18px 18px;
 font-weight:900;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
 content:"+";
 font-weight:900;
 display:inline-block;
 width:22px; height:22px;
 border:1px solid rgb(from var(--ink) r g b / 0.14);
 border-radius:var(--oval);
 line-height:20px;
 text-align:center;
 color:var(--onLight);
 transform:rotate(0deg);
 transition:transform .18s ease;
 flex:0 0 auto;
 background:rgb(from var(--ink) r g b / 0.02);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .answer{ padding:0 18px 18px; color:rgb(from var(--ink) r g b / 0.86); }


/* ---------------------------------------------------------
  12) FORMS
  --------------------------------------------------------- */
.form{display:grid; gap:12px;}
.field{display:grid; gap:6px;}
label{font-weight:900; font-size:14px;}
input, select, textarea{
 width:100%;
 border-radius: var(--ovalMd);
 border:1px solid rgb(from var(--ink) r g b / 0.14);
 background: rgb(from var(--white) r g b / 0.86);
 color:var(--onLight);
 padding:12px 14px;
 font:inherit;
 box-shadow:0 8px 20px rgb(from var(--ink) r g b / 0.06);
}
textarea{min-height:120px; resize:vertical;}
.field__error{font-size:13px; color:var(--danger); display:none;}
.field--error .field__error{display:block;}
.field--error input,
.field--error select,
.field--error textarea{
 border-color:rgb(from var(--danger) r g b / 0.55);
 box-shadow:0 0 0 4px rgb(from var(--danger) r g b / 0.12);
}


/* ---------------------------------------------------------
  13) FOOTER
  --------------------------------------------------------- */
.footer{
 border-top:1px solid rgb(from var(--ink) r g b / 0.1);
 padding:var(--space-7) 0;
 background: var(--grad-footer);
}
.footer__grid{
 display:grid;
 grid-template-columns:1.4fr .6fr;
 gap:var(--space-6);
}
.footer__grid--with-map{
 grid-template-columns: 1.1fr .6fr 1.3fr;
 align-items:start;
}
.footer__map{
 height: 220px;
 position: relative;
 border-radius: var(--cardRadius);
 overflow:hidden;
 border:1px solid rgb(from var(--ink) r g b / 0.12);
 background: rgb(from var(--white) r g b / 0.72);
}
.footer__map iframe{
 width:100%;
 height:100%;
 border:0;
 display:block;
}
.footer__map[data-map-state="loading"]::after,
.footer__map[data-map-state="error"]::after{
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 padding: 12px;
 font-size: 13px;
 font-weight: 800;
 color: var(--onLight);
 background: linear-gradient(180deg, rgb(from var(--white) r g b / 0.78) 0%, rgb(from var(--white) r g b / 0.88) 100%);
}
.footer__map[data-map-state="loading"]::after{ content: "Loading map…"; }
.footer__map[data-map-state="error"]::after{ content: attr(data-map-error); }
.footer a{text-decoration:none; font-weight:800;}
@media (max-width: 900px){
 .footer__grid{grid-template-columns:1fr;}
}


/* ---------------------------------------------------------
  14) PRICING HELPERS (required when pricing exists)
  --------------------------------------------------------- */
.badge{
 display:inline-block;
 padding:8px 12px;
 border-radius:var(--oval);
 border:1px solid rgb(from var(--ink) r g b / 0.12);
 background: rgb(from var(--white) r g b / 0.7);
 color:var(--onLight);
 font-size:12px;
 font-weight:900;
}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}


.plans{
 display:grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 16px;
}
.plan{
 border: 1px solid rgb(from var(--ink) r g b / 0.12);
 border-radius: var(--ovalLg);
 background: rgb(from var(--white) r g b / 0.86);
 box-shadow: var(--shadowSm);
 overflow:hidden;
}
.plan.padSm{ padding: var(--space-5); }
@media (max-width: 980px){
 .plans{ grid-template-columns: 1fr; }
 .plan.padSm{ padding: var(--space-4); }
}

/* Pricing page tier cards: stack sooner (prevents skinny 3-up columns on small screens). */
@media (max-width: 1100px){
  html[data-pricing-page="1"] #pricing .grid-3{ grid-template-columns: 1fr; }
}


.plan__title{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap: 10px;
}
.plan__price{
 margin: 14px 0 16px;
 padding: 14px;
 border-radius: var(--ovalLg);
 border: 1px solid rgb(from var(--ink) r g b / 0.1);
 background: rgb(from var(--brand-secondary) r g b / 0.06);
 color: var(--onLight);
}
.price-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.price-label{font-weight:900;}
.price-value{font-weight:900; font-size:var(--fs-3);}
.price-note{margin-top:8px;}
.price-row + .price-row{
 margin-top: 10px;
 padding-top: 10px;
 border-top: 1px solid rgb(from var(--ink) r g b / 0.1);
}


.learn{
 display:grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 14px;
}
.learn__item{
 padding: 16px;
 border: 1px solid rgb(from var(--ink) r g b / 0.12);
 border-radius: var(--ovalLg);
 background: rgb(from var(--white) r g b / 0.86);
 color: var(--onLight);
 box-shadow:var(--shadowSm);
}
@media (max-width: 980px){
 .learn{ grid-template-columns: 1fr; }
}


/* Pricing adjustments */
.starter-callout{margin-top: var(--space-5);}
.plan-more{margin-top: var(--space-3); display:flex; flex-direction:column;}
.plan-more summary.see-more{
 cursor:pointer;
 display:inline-block;
 font-weight:900;
 color: var(--onLight);
 text-decoration: underline;
 text-underline-offset: 3px;
}
.plan-more > summary.see-more{ order: 2; margin-top: var(--space-2); }
.plan-more__body{ order: 1; margin:0; padding:0; }
.plan-more__body p{ margin: 0 0 var(--space-2) 0; }
.plan-more__body ul{ margin:0; padding-left: 1.1em; }
.plan > .bullets{ margin-bottom: 0; }


/* Extra spacing helper */
.spacerLg{ height: var(--space-6); }


/* ---------------------------------------------------------
  15) REVEAL ANIMATIONS (optional; JS adds .is-visible)
  --------------------------------------------------------- */
@keyframes pageIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
html[data-ready="1"][data-anim="on"] body{
  animation: pageIn .38s ease-out both;
}

.reveal{
 opacity: 0;
 --revealY: 14px;
 transform: translateY(calc(var(--revealY) + var(--centerY, 0px))) scale(var(--centerScale, 1));
 transition: opacity .5s ease, transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.reveal.is-visible{
 opacity: 1;
 --revealY: 0px;
}


@media (prefers-reduced-motion: reduce){
 html{scroll-behavior:auto;}
 *{transition:none !important; animation:none !important;}
 .reveal{opacity:1 !important; transform:none !important;}
 [data-carousel-track] > .carousel-item{ transform:none !important; }
}






/* =========================================================
   CAROUSEL TOGGLES — per section (ui.layout.*Carousel)
   html[data-*-carousel="on"]
   ========================================================= */

/* Generic: hide scrollbars */
html[data-services-carousel="on"] #services .grid,
html[data-testimonials-carousel="on"] #testimonials .grid,
html[data-how-carousel="on"] #how .grid,
html[data-pricing-carousel="on"] #pricing .grid,
html[data-trust-carousel="on"] #trust .trustbar,
html[data-projects-carousel="on"] .gallery{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html[data-services-carousel="on"] #services .grid::-webkit-scrollbar,
html[data-testimonials-carousel="on"] #testimonials .grid::-webkit-scrollbar,
html[data-how-carousel="on"] #how .grid::-webkit-scrollbar,
html[data-pricing-carousel="on"] #pricing .grid::-webkit-scrollbar,
html[data-trust-carousel="on"] #trust .trustbar::-webkit-scrollbar,
html[data-projects-carousel="on"] .gallery::-webkit-scrollbar{ display:none; }

/* Services carousel (uses the existing .grid markup) */
html[data-services-carousel="on"] #services .grid{
  display:flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 12px;
}
html[data-services-carousel="on"] #services .service-card{
  flex: 0 0 auto;
  min-width: 320px;
  max-width: 420px;
  scroll-snap-align: start;
}

/* Testimonials carousel */
html[data-testimonials-carousel="on"] #testimonials .grid{
  display:flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 12px;
}
html[data-testimonials-carousel="on"] #testimonials .grid .card{
  flex: 0 0 auto;
  min-width: 320px;
  max-width: 520px;
  scroll-snap-align: start;
}

/* How / process carousel */
html[data-how-carousel="on"] #how .grid{
  display:flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 12px;
}
html[data-how-carousel="on"] #how .grid .card{
  flex: 0 0 auto;
  min-width: 320px;
  max-width: 480px;
  scroll-snap-align: start;
}

/* Pricing carousel */
html[data-pricing-carousel="on"] #pricing .grid{
  display:flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 12px;
}
html[data-pricing-carousel="on"] #pricing .grid .card{
  flex: 0 0 auto;
  min-width: 320px;
  max-width: 520px;
  scroll-snap-align: start;
}

/* Trustbar carousel */
html[data-trust-carousel="on"] #trust .trustbar{
  display:flex !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 12px;
}
html[data-trust-carousel="on"] #trust .trustbar__item{
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Projects gallery carousel */
html[data-projects-carousel="on"] .gallery{
  display:flex !important;
  flex-wrap: nowrap !important;
  gap: 14px;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 12px;
}
html[data-projects-carousel="on"] .gallery__item{
  flex: 0 0 auto;
  min-width: 320px;
  max-width: 520px;
  scroll-snap-align: start;
}

/* Mobile: disable carousels so cards stack vertically */
@media (max-width: 980px){
  html[data-services-carousel="on"] #services .grid,
  html[data-testimonials-carousel="on"] #testimonials .grid,
  html[data-how-carousel="on"] #how .grid,
  html[data-pricing-carousel="on"] #pricing .grid,
  html[data-trust-carousel="on"] #trust .trustbar,
  html[data-projects-carousel="on"] .gallery{
    display: grid !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
  }

  html[data-services-carousel="on"] #services .service-card,
  html[data-testimonials-carousel="on"] #testimonials .grid .card,
  html[data-how-carousel="on"] #how .grid .card,
  html[data-pricing-carousel="on"] #pricing .grid .card,
  html[data-projects-carousel="on"] .gallery__item{
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* =========================================================
   CAROUSEL — "Center card" feature
   JS marks the nearest-to-center item as `.is-center`.
   ========================================================= */
:root{
  --carouselCenterScale: 1.06;
  --carouselCenterScaleHover: 1.08;
  --carouselCenterLift: -10px;
  --carouselCenterLiftHover: -12px;
  --carouselCenterShadow: 0 32px 78px rgb(from var(--shadowInk) r g b / 0.18);
  --carouselCenterBorder: rgb(from var(--brand-primary) r g b / 0.22);
}

[data-carousel-track] > .carousel-item{
  position: relative;
  z-index: 1;
  transform: translateY(calc(var(--revealY, 0px) + var(--centerY, 0px))) scale(var(--centerScale, 1));
  transition: opacity .5s ease, transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
html[data-anim="off"] [data-carousel-track] > .carousel-item{ transition: none; }
[data-carousel-track] > .carousel-item.is-center{
  --centerY: var(--carouselCenterLift);
  --centerScale: var(--carouselCenterScale);
  z-index: 2;
  box-shadow: var(--carouselCenterShadow);
  border-color: var(--carouselCenterBorder);
}
[data-carousel-track] > .carousel-item.is-center:hover,
[data-carousel-track] > .carousel-item.is-center:focus-within{
  --centerY: var(--carouselCenterLiftHover);
  --centerScale: var(--carouselCenterScaleHover);
}


/* =========================================================
   SECTION SHAPES — follow ui.layout.*Shape toggles
   ========================================================= */

/* How cards */
html[data-how-shape="square"] #how .card{ border-radius: 14px; }
html[data-how-shape="rounded"] #how .card{ border-radius: var(--cardRadius); }
html[data-how-shape="circle"] #how .card{ border-radius: 999px; overflow:hidden; }
html[data-how-shape="oval"] #how .card{ border-radius: var(--ovalLg); overflow:hidden; }
html[data-how-shape="star"] #how .card{
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  overflow:hidden;
}

/* Testimonial cards */
html[data-testimonial-shape="square"] #testimonials .card{ border-radius: 14px; }
html[data-testimonial-shape="rounded"] #testimonials .card{ border-radius: var(--cardRadius); }
html[data-testimonial-shape="circle"] #testimonials .card{ border-radius: 999px; overflow:hidden; }
html[data-testimonial-shape="oval"] #testimonials .card{ border-radius: var(--ovalLg); overflow:hidden; }
html[data-testimonial-shape="star"] #testimonials .card{
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  overflow:hidden;
}

/* Pricing cards */
html[data-pricing-shape="square"] #pricing .card{ border-radius: 14px; }
html[data-pricing-shape="rounded"] #pricing .card{ border-radius: var(--cardRadius); }
html[data-pricing-shape="circle"] #pricing .card{ border-radius: 999px; overflow:hidden; }
html[data-pricing-shape="oval"] #pricing .card{ border-radius: var(--ovalLg); overflow:hidden; }
html[data-pricing-shape="star"] #pricing .card{
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  overflow:hidden;
}

/* FAQ blocks */
html[data-faq-shape="square"] #faq details{ border-radius: 14px; }
html[data-faq-shape="rounded"] #faq details{ border-radius: var(--cardRadius); }
html[data-faq-shape="circle"] #faq details{ border-radius: 999px; overflow:hidden; }
html[data-faq-shape="oval"] #faq details{ border-radius: var(--ovalLg); overflow:hidden; }
html[data-faq-shape="star"] #faq details{
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  overflow:hidden;
}

/* FAQ style toggle */
html[data-faq-style="cards"] #faq details{ border:1px solid rgb(from var(--ink) r g b / 0.12); background: var(--card); padding: 14px 16px; }
html[data-faq-style="cards"] #faq summary{ list-style:none; cursor:default; }
html[data-faq-style="cards"] #faq summary::-webkit-details-marker{ display:none; }
html[data-faq-style="cards"] #faq summary::after{ display:none; }


/* About section shapes (home index #about) */
html[data-about-shape="square"] #about .card{ border-radius: 14px; }
html[data-about-shape="rounded"] #about .card{ border-radius: var(--cardRadius); }
html[data-about-shape="circle"] #about .card{ border-radius: 999px; overflow:hidden; }
html[data-about-shape="oval"] #about .card{ border-radius: var(--ovalLg); overflow:hidden; }
html[data-about-shape="star"] #about .card{
  border-radius:0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  overflow:hidden;
}

/* Contact section shapes (contact page + home contact section) */
html[data-contact-shape="square"] #contact .card{ border-radius: 14px; }
html[data-contact-shape="rounded"] #contact .card{ border-radius: var(--cardRadius); }
html[data-contact-shape="circle"] #contact .card{ border-radius: 999px; overflow:hidden; }
html[data-contact-shape="oval"] #contact .card{ border-radius: var(--ovalLg); overflow:hidden; }
html[data-contact-shape="star"] #contact .card{
  border-radius:0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  overflow:hidden;
}


/* Contact layout (ui.layout.contactLayout) */
html[data-contact-layout="stacked"] #contact .grid{ grid-template-columns: 1fr !important; }
html[data-contact-layout="stacked-invert"] #contact .grid{ grid-template-columns: 1fr !important; }
html[data-contact-layout="stacked-invert"] #contact .grid > :first-child{ order: 2; }
html[data-contact-layout="stacked-invert"] #contact .grid > :last-child{ order: 1; }

/* About layout (ui.layout.aboutLayout) — affects home #about section only */
html[data-about-layout="stacked"] #about .grid{ grid-template-columns: 1fr !important; }
html[data-about-layout="stacked-invert"] #about .grid{ grid-template-columns: 1fr !important; }
html[data-about-layout="stacked-invert"] #about .grid > :first-child{ order: 2; }
html[data-about-layout="stacked-invert"] #about .grid > :last-child{ order: 1; }


/* =========================================================
   SWITCHBOARD — Global look & feel
   Controlled by ui.layout.*
   ========================================================= */

/* Dividers */
html[data-dividers="none"] .section::before,
html[data-dividers="none"] .section::after{ display:none; }
html[data-dividers="none"] main > .hr,
html[data-dividers="none"] main > .home-block > .hr{ display:none; }
html[data-dividers="space"] .section::before,
html[data-dividers="space"] .section::after{
  background: transparent;
  opacity: 0;
}
html[data-dividers="space"] main > .hr,
html[data-dividers="space"] main > .home-block > .hr{ display:none; }

/* Headings alignment */
html[data-headings="center"] .section .kicker,
html[data-headings="center"] .section h2,
html[data-headings="center"] .section .lead{ text-align:left; }

/* Kicker style */
html[data-kicker="normal"] .kicker{
  text-transform:none;
  letter-spacing: 0;
}

/* Density */
html[data-density="tight"]{ --gridGap: 14px; --cardPad: 16px; --cardPadSm: 14px; }
html[data-density="normal"]{ --gridGap: 18px; --cardPad: 22px; --cardPadSm: 16px; }
html[data-density="airy"]{ --gridGap: 26px; --cardPad: 26px; --cardPadSm: 18px; }

.grid{ gap: var(--gridGap, 18px); }

/* Override card padding tokens to follow density */
.card.pad{ padding: var(--cardPad, 22px); }
.card.padSm{ padding: var(--cardPadSm, 16px); }

/* Card style */
html[data-card-style="solid"] .card{ background: var(--card); }
html[data-card-style="outline"] .card{ background: transparent; }
html[data-card-style="glass"] .card{
  background: rgb(from var(--card) r g b / .62);
  backdrop-filter: blur(12px);
}

/* Card border */
html[data-card-border="off"] .card{ border-color: transparent; }
html[data-card-border="on"][data-card-style="outline"] .card{ border-color: rgb(from var(--ink) r g b / .14); }

/* Card shadow */
html[data-card-shadow="none"] .card{ box-shadow:none; }
html[data-card-shadow="soft"] .card{ box-shadow: var(--shadowSm); }
html[data-card-shadow="medium"] .card{ box-shadow: var(--shadow); }
html[data-card-shadow="strong"] .card{ box-shadow: 0 28px 70px rgb(from var(--ink) r g b / .22); }

/* Button style */
html[data-btn-style="solid"] .btn--primary{ background: var(--button); color: var(--buttonText); border-color: transparent; }
html[data-btn-style="outline"] .btn--primary{ background: transparent; color: var(--button); border-color: rgb(from var(--button) r g b / .55); box-shadow:none; }
html[data-btn-style="ghost"] .btn--primary{ background: transparent; color: var(--button); border-color: transparent; box-shadow:none; }

/* Button size */
html[data-btn-size="sm"] .btn{ padding: 10px 12px; font-size: 14px; }
html[data-btn-size="md"] .btn{ padding: 12px 14px; font-size: 15px; }
html[data-btn-size="lg"] .btn{ padding: 14px 16px; font-size: 16px; }

/* Button alignment for common action rows */
html[data-btn-align="center"] .actions,
html[data-btn-align="center"] .hero__actions{ justify-content:center; }
html[data-btn-align="right"] .actions,
html[data-btn-align="right"] .hero__actions{ justify-content:flex-end; }

/* Animation kill-switch */
html[data-anim="off"] .reveal{ opacity:1 !important; transform:none !important; }
html[data-anim="off"] *{ scroll-behavior:auto; transition:none !important; animation:none !important; }


/* =========================================================
   SWITCHBOARD — Section columns
   ========================================================= */
#services .grid{ grid-template-columns: repeat(var(--servicesCols, 2), minmax(0, 1fr)); }
#testimonials .grid{ grid-template-columns: repeat(var(--testimonialsCols, 2), minmax(0, 1fr)); }
#how .grid{ grid-template-columns: repeat(var(--howCols, 3), minmax(0, 1fr)); }
#about .grid{ grid-template-columns: repeat(var(--aboutCols, 2), minmax(0, 1fr)); }
#pricing .grid{ grid-template-columns: repeat(var(--pricingCols, 3), minmax(0, 1fr)); }
#faq .grid.faq{ grid-template-columns: repeat(var(--faqCols, 1), minmax(0, 1fr)); }
.gallery{ grid-template-columns: repeat(var(--projectsCols, 3), minmax(0, 1fr)); }

/* Mobile: always stack cards (override switchboard column counts) */
@media (max-width: 980px){
  #services .grid,
  #testimonials .grid,
  #how .grid,
  #about .grid,
  #pricing .grid,
  .gallery{
    grid-template-columns: 1fr !important;
  }
}

/* FAQ variant shortcut */
html[data-faq-variant="two-column"]{ --faqCols: 2; }
@media (max-width: 860px){
  html[data-faq-variant="two-column"]{ --faqCols: 1; }
}

/* =========================================================
   SWITCHBOARD — Section variants
   Controlled by ui.layout.*Variant
   ========================================================= */

/* Services variants (cards | minimal | icon | image) */
html[data-services-variant="minimal"] #services .grid{ gap: 12px; }
html[data-services-variant="minimal"] #services .service-card{
  background: transparent;
  border-color: transparent;
  box-shadow:none;
  padding: 10px 0;
  display:grid;
  grid-template-columns: 52px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items:start;
}
html[data-services-variant="minimal"] #services .service-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  grid-row: 1 / span 3;
  margin:0;
}
html[data-services-variant="minimal"] #services .service-card h3{ grid-column: 2; }
html[data-services-variant="minimal"] #services .service-card .lead{ grid-column: 2; }
html[data-services-variant="minimal"] #services .service-card .learnmore{ grid-column: 2; margin-top: 6px; }

html[data-services-variant="icon"] #services .service-card{
  display:grid;
  grid-template-columns: 64px 1fr;
  column-gap: 16px;
  row-gap: 6px;
  align-items:start;
}
html[data-services-variant="icon"] #services .service-card__icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  grid-row: 1 / span 3;
  margin:0;
}
html[data-services-variant="icon"] #services .service-card h3{ grid-column: 2; margin-top: 2px; }
html[data-services-variant="icon"] #services .service-card .lead{ grid-column: 2; }
html[data-services-variant="icon"] #services .service-card .learnmore{ grid-column: 2; margin-top: 10px; }

html[data-services-variant="image"] #services .service-card{
  position:relative;
  overflow:hidden;
}
html[data-services-variant="image"] #services .service-card::before{
  content:"";
  display:block;
  height: 140px;
  border-radius: inherit;
  background: var(--svcImg, var(--hero-image)) center/cover no-repeat;
  border:1px solid rgb(from var(--ink) r g b / 0.10);
  margin-bottom: 10px;
}
html[data-services-variant="image"] #services .service-card__icon{
  position:absolute;
  top: 14px;
  left: 14px;
  margin:0;
  background: rgb(from var(--white) r g b / 0.72);
  border-color: rgb(from var(--ink) r g b / 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-services-variant="image"] #services .service-card:hover .service-card__icon{
  background: rgb(from var(--white) r g b / 0.86);
  color: var(--brand-primary);
}
html[data-services-variant="image"] #services .service-card[data-service-idx="0"]{ --svcImg: url("../img/service-1.jpg"); }
html[data-services-variant="image"] #services .service-card[data-service-idx="1"]{ --svcImg: url("../img/service-2.jpg"); }
html[data-services-variant="image"] #services .service-card[data-service-idx="2"]{ --svcImg: url("../img/service-3.jpg"); }
html[data-services-variant="image"] #services .service-card[data-service-idx="3"]{ --svcImg: url("../img/service-4.jpg"); }
html[data-services-variant="image"] #services .service-card[data-service-idx="4"]{ --svcImg: url("../img/service-5.jpg"); }
html[data-services-variant="image"] #services .service-card[data-service-idx="5"]{ --svcImg: url("../img/service-6.jpg"); }
html[data-services-variant="image"] #services .service-card[data-service-idx="6"]{ --svcImg: url("../img/service-4.jpg"); }
html[data-services-variant="image"] #services .service-card[data-service-idx="7"]{ --svcImg: url("../img/service-5.jpg"); }

@media (max-width: 620px){
  html[data-services-variant="minimal"] #services .service-card{ grid-template-columns: 44px 1fr; }
  html[data-services-variant="icon"] #services .service-card{ grid-template-columns: 56px 1fr; }
}

/* Projects variants (gallery | cards | minimal) */
html[data-projects-variant="cards"] .gallery__item{
  position:relative;
  overflow:hidden;
  border-radius: var(--cardRadius);
  border:1px solid rgb(from var(--ink) r g b / 0.12);
  box-shadow: var(--shadowSm);
}
html[data-projects-variant="cards"] .gallery__item img{
  border-radius:0;
  border:none;
  box-shadow:none;
  transform: scale(1.03);
  transition: transform .45s ease, filter .45s ease;
}
html[data-projects-variant="cards"] .gallery__item::after{
  content: attr(data-cap);
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgb(from var(--scrimInk) r g b / 0.62);
  color: #fff;
  font-weight: 900;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-projects-variant="cards"] .gallery__item:hover img{
  transform: scale(1.08);
  filter: saturate(1.05);
}

html[data-projects-variant="minimal"] .gallery{
  grid-template-columns: 1fr !important;
  gap: 12px;
}
html[data-projects-variant="minimal"] .gallery__item{
  display:flex;
  gap:14px;
  align-items:center;
  padding: 12px;
  border-radius: var(--cardRadius);
  background: rgb(from var(--white) r g b / 0.78);
  border:1px solid rgb(from var(--ink) r g b / 0.12);
  box-shadow: var(--shadowSm);
}
html[data-projects-variant="minimal"] .gallery__item img{
  width: 160px;
  height: 104px;
  border-radius: 14px;
  border:none;
  box-shadow:none;
  object-fit:cover;
}
html[data-projects-variant="minimal"] .gallery__item::after{
  content: attr(data-cap);
  font-weight: 900;
  color: var(--onLight);
}
@media (max-width: 540px){
  html[data-projects-variant="minimal"] .gallery__item img{ width: 120px; height: 86px; }
}

/* How variants (cards | steps | minimal) */
html[data-how-variant="steps"] #how .grid{
  grid-template-columns: 1fr !important;
  counter-reset: howstep;
}
html[data-how-variant="steps"] #how .grid .card{
  position:relative;
  padding-left: 64px;
}
html[data-how-variant="steps"] #how .grid .card::before{
  counter-increment: howstep;
  content: counter(howstep);
  position:absolute;
  top: 18px;
  left: 18px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgb(from var(--brand-primary) r g b / 0.12);
  border: 1px solid rgb(from var(--brand-primary) r g b / 0.18);
  color: var(--brand-primary);
  font-weight: 900;
}
html[data-how-variant="steps"] #how .iconline svg{ display:none; }
html[data-how-variant="minimal"] #how .card{
  background: transparent;
  border-color: transparent;
  box-shadow:none;
  padding-left: 0;
}

/* Testimonials variants (cards | quotes | minimal) */
html[data-testimonials-variant="quotes"] #testimonials .card{
  position:relative;
  overflow:hidden;
}
html[data-testimonials-variant="quotes"] #testimonials .card::before{
  content:"“";
  position:absolute;
  top: -12px;
  left: 14px;
  font-size: 72px;
  line-height: 1;
  color: rgb(from var(--brand-primary) r g b / 0.18);
}
html[data-testimonials-variant="quotes"] #testimonials .card p:not(.kicker){
  font-style: italic;
}
html[data-testimonials-variant="minimal"] #testimonials .card{
  background: transparent;
  border-color: transparent;
  box-shadow:none;
  padding-left:0;
  padding-right:0;
}

/* About variants (cards | minimal) */
html[data-about-variant="minimal"] #about .card{
  background: transparent;
  border-color: transparent;
  box-shadow:none;
}

/* Pricing variants (cards | simple | compare) */
html[data-pricing-variant="simple"] #pricing .grid{
  grid-template-columns: 1fr !important;
}
html[data-pricing-variant="simple"] #pricing .plan{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items:start;
}
html[data-pricing-variant="simple"] #pricing .plan .cta-row{ grid-column: 1 / -1; }
html[data-pricing-variant="simple"] #pricing .plan .bullets{
  column-count: 2;
  column-gap: 18px;
}
@media (max-width: 900px){
  html[data-pricing-variant="simple"] #pricing .plan{ grid-template-columns: 1fr; }
  html[data-pricing-variant="simple"] #pricing .plan .bullets{ column-count: 1; }
}
html[data-pricing-variant="compare"] #pricing .grid{ gap: 12px; }
html[data-pricing-variant="compare"] #pricing .plan{ border-width: 2px; }

/* Contact variants (split | stacked | minimal) */
html[data-contact-variant="minimal"] #contact .grid{ grid-template-columns: 1fr !important; }
html[data-contact-variant="minimal"] #contact .grid > :first-child{ display:none; }

/* =========================================================
   SWITCHBOARD — Section backgrounds (gradients per section)
   JS sets these on :root:
     --services-bg-from / --services-bg-to
     --projects-bg-from / --projects-bg-to
     ...etc
   Each section falls back to the default A<->B gradient.
   ========================================================= */
#services{
  --section-bg-from: var(--services-bg-from, var(--section-bg-from-default));
  --section-bg-to: var(--services-bg-to, var(--section-bg-to-default));
}
#projects{
  --section-bg-from: var(--projects-bg-from, var(--section-bg-from-default));
  --section-bg-to: var(--projects-bg-to, var(--section-bg-to-default));
}
#trust{
  --section-bg-from: var(--trust-bg-from, var(--section-bg-from-default));
  --section-bg-to: var(--trust-bg-to, var(--section-bg-to-default));
}
#how{
  --section-bg-from: var(--how-bg-from, var(--section-bg-from-default));
  --section-bg-to: var(--how-bg-to, var(--section-bg-to-default));
}
#testimonials{
  --section-bg-from: var(--testimonials-bg-from, var(--section-bg-from-default));
  --section-bg-to: var(--testimonials-bg-to, var(--section-bg-to-default));
}
#about{
  --section-bg-from: var(--about-bg-from, var(--section-bg-from-default));
  --section-bg-to: var(--about-bg-to, var(--section-bg-to-default));
}
#pricing{
  --section-bg-from: var(--pricing-bg-from, var(--section-bg-from-default));
  --section-bg-to: var(--pricing-bg-to, var(--section-bg-to-default));
}
#faq{
  --section-bg-from: var(--faq-bg-from, var(--section-bg-from-default));
  --section-bg-to: var(--faq-bg-to, var(--section-bg-to-default));
}
#contact{
  --section-bg-from: var(--contact-bg-from, var(--section-bg-from-default));
  --section-bg-to: var(--contact-bg-to, var(--section-bg-to-default));
}

/* When gradients are globally off, use the start color (looks clean + predictable). */
html[data-gradients="off"] .section{
  background: var(--section-bg-from);
}


/* =========================================================
   SCROLL ARROWS (optional) — when *CarouselArrows = "on"
   ========================================================= */
.scrollwrap{
  position: relative;
}
.scrollbtn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 999px;
  border:1px solid rgb(from var(--ink) r g b / .16);
  background: rgb(from var(--card) r g b / .86);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadowSm);
  cursor:pointer;
  z-index: 3;
}
.scrollbtn svg{ width: 18px; height: 18px; }
.scrollbtn:hover{ transform: translateY(-50%) scale(1.03); }
.scrollbtn:active{ transform: translateY(-50%) scale(.98); box-shadow:none; }
.scrollbtn[disabled]{ opacity:.35; cursor:default; }

.scrollbtn--prev{ left: -6px; }
.scrollbtn--next{ right: -6px; }

.scrollfade{
  position:absolute;
  top:0; bottom:0;
  width: 60px;
  pointer-events:none;
  z-index:2;
  opacity: 0;
  transition: opacity .18s ease;
}
.scrollfade--left{
  left:0;
  background: linear-gradient(90deg, rgb(from var(--section-bg-from) r g b / 1) 0%, rgb(from var(--section-bg-from) r g b / 0) 100%);
}
.scrollfade--right{
  right:0;
  background: linear-gradient(270deg, rgb(from var(--section-bg-from) r g b / 1) 0%, rgb(from var(--section-bg-from) r g b / 0) 100%);
}

/* keep arrows usable on mobile */
@media (max-width: 820px){
  .scrollbtn{ width: 40px; height: 40px; }
  .scrollbtn--prev{ left: -2px; }
  .scrollbtn--next{ right: -2px; }
}


/* ---------------------------------------------------------
  GRADIENTS / LAYERING MODE (ui.layout.gradients)
  - on: normal
  - off: flat (removes glows, sheen, gradients)
--------------------------------------------------------- */
html[data-gradients="off"]{
  --grad-divider: var(--sectionEdge);
  --grad-brand: none;
  --grad-btn-primary: none;
  --grad-card-sheen: none;
  --hero-scrim: none;
  --glowA: none;
  --glowB: none;
  --paperNoise: none;
}
html[data-gradients="off"] .btn--primary{ background: var(--brand-primary); }