/* ==========================================================================
   Direction 05 — Soft Modern Aqua
   Airy and approachable: blue with teal and mint, heavy whitespace, pill
   shapes, icon-led sections, gentle scroll motion. The friendliest of the
   five for individual and domestic customers.
   ========================================================================== */
:root {
  --brand: #1a73c7;
  --brand-600: #1462ad;
  --brand-700: #0f4d8a;
  --brand-900: #0c3355;
  --accent: #14c6a4;
  --accent-2: #8ae6d4;

  --bg: #ffffff;
  --surface: #f0fbf8;
  --surface-2: #e2f4fb;
  --border: #d9ecf3;

  --text: #123143;
  --text-dim: #5e7d8d;

  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 34px;

  --shadow-sm: 0 2px 10px rgba(18, 49, 67, .05);
  --shadow: 0 12px 30px rgba(18, 49, 67, .08);
  --shadow-lg: 0 26px 60px rgba(18, 49, 67, .12);

  --font-display: "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.15rem, 1.3rem + 3.6vw, 3.9rem);
  --fs-h2: clamp(1.55rem, 1.1rem + 1.6vw, 2.4rem);
  --lh-display: 1.14;
  --tracking-display: -0.015em;

  --section-py: clamp(4rem, 2.5rem + 6.5vw, 8.5rem);
  --container: 1180px;
}

h1, h2, h3, h4 { font-weight: 700; }
.lede { font-size: 1.08em; line-height: 1.72; }

/* --- soft header -------------------------------------------------------- */
.site-header { background: rgba(255, 255, 255, .86); }
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(18, 49, 67, .07); border-bottom-color: transparent; }
.brand-mark { border-radius: 12px; background: linear-gradient(145deg, var(--brand), var(--accent)); }
.nav a { font-weight: 600; }
.nav a::after { height: 3px; border-radius: 3px; background: var(--accent); }
.icon-btn, .btn, .chip, .select { border-radius: 999px; }
.btn--primary { box-shadow: 0 10px 22px rgba(26, 115, 199, .22); }
.btn--accent { --btn-fg: #063d32; }

/* --- gentle hero -------------------------------------------------------- */
.hero {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(20, 198, 164, .16), transparent 62%),
    radial-gradient(50rem 28rem at 5% 10%, rgba(26, 115, 199, .12), transparent 60%),
    var(--bg);
}
.hero h1 { max-width: 22ch; }
.hero-media .ph {
  border-radius: 40% 40% 34% 34% / 12% 12% 10% 10%;
  border-style: solid; border-width: 0;
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
}
.hero-stats { border-top: 0; padding-top: 0; }
.hero-stats .stat { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.25rem; }
.hero-stats .stat-num { font-size: 1.6rem; }

/* --- rounded, illustration-led cards ----------------------------------- */
.card, .tile, .quote, .p-card, .project, .filters, .cfg-spec, .cfg-stage {
  border-radius: var(--radius);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.card { padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); text-align: center; align-items: center; }
.card::before { display: none; }
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); }
.card-icon {
  width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--surface); color: var(--brand);
  margin-inline: auto;
}
.card:hover .card-icon { background: linear-gradient(145deg, var(--brand), var(--accent)); color: #fff; }
.card-icon svg { width: 2rem; height: 2rem; }
.card-link { margin-inline: auto; }

.tile { text-align: center; padding: 1.5rem 1.1rem; }
.tile .card-icon { width: 3.4rem; height: 3.4rem; }

.eyebrow { color: var(--brand); background: var(--surface); padding: .4rem .8rem; border-radius: 999px; }
.eyebrow::before { width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }

.section--tint { background: var(--surface); }
.section--brand { background: linear-gradient(150deg, var(--brand-900), var(--brand) 70%, #0e7f6c); }
.section--brand .stat { background: rgba(255, 255, 255, .08); border-radius: var(--radius); padding: 1.5rem 1rem; }

.teaser { background: linear-gradient(140deg, var(--brand-700), var(--brand) 55%, var(--accent)); }
.teaser .ph { border-radius: var(--radius); }
.cta-band {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.cta-band .btn { --btn-bg: var(--brand); --btn-bd: var(--brand); --btn-fg: #fff; }
.site-footer { background: var(--brand-900); }
.social:hover { color: #063d32; }

.trust { background: var(--bg); border-block-color: var(--border); }
.quote { padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.quote-mark { color: var(--accent); }
.contact-item { border-radius: 999px; padding: 1rem 1.4rem; }
.contact-item svg { color: var(--accent); }
.ph--map { border-radius: var(--radius-lg); }

/* --- shop --------------------------------------------------------------- */
.p-media { background: var(--surface); }
.p-media svg { color: var(--brand); }
.p-badge { border-radius: 999px; }
.p-badge--stock { background: #d6f7ee; color: #06614f; }
.p-badge--custom { background: var(--surface-2); color: var(--brand-700); }
.p-body { padding: 1.1rem 1.35rem 1.4rem; }
.drawer, .drawer-nav { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.modal-card { border-radius: var(--radius-lg); }

/* --- configurator ------------------------------------------------------- */
.cfg-tabs { border-radius: 999px; background: var(--surface); }
.cfg-tab { border-radius: 999px; }
.cfg-tab[aria-selected="true"] { background: #fff; color: var(--brand); }
.step { border-radius: 999px; }
.step[aria-current="true"] { background: var(--surface); }
.step[data-done="true"] .step-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.stage-viz {
  background:
    radial-gradient(circle at 50% 35%, rgba(20, 198, 164, .14), transparent 65%),
    var(--surface);
}
.stage-viz svg { color: var(--brand); }
.opt { border-radius: var(--radius-sm); }
.opt[aria-pressed="true"] { background: var(--surface); }
.price-panel { border-radius: var(--radius-sm); border-style: solid; border-color: var(--border); background: var(--surface); }
.progress > i { background: linear-gradient(90deg, var(--brand), var(--accent)); }
.notice { border-radius: var(--radius-sm); }