/* K-SOLAR visual system: clear navigation, quiet surfaces, and a focused planning journey. */
:root {
  --ink:#102f3b; --ink-soft:#526b70; --paper:#f4f7f5; --paper-2:#fff;
  --line:#dce7e3; --sun:#dda944; --sun-deep:#186b5d; --coral:#e5ad49;
  --sand:#f1c76f; --sea:#174b46; --sea-soft:#e8f2ee; --shadow:0 18px 48px rgba(18,52,54,.09);
}
body { background:#f7f9f8; color:var(--ink); }
h1,h2,h3,h4 { word-break:keep-all; letter-spacing:-.035em; }
a { color:#176b5e; }
a:hover { color:#104c43; }
.topbar,.source-top { background:#0c2a34; border-bottom:1px solid rgba(255,255,255,.09); box-shadow:none; }
.topbar { min-height:82px; }
.nav a { font-size:14px; font-weight:600; border-radius:8px; }
.nav a:hover { background:rgba(255,255,255,.08); }
.lang-toggle { border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.04); }
.lang-toggle button[aria-pressed="true"] { background:#f0c66e; color:#102e36; }
.nav-toggle { border-color:rgba(255,255,255,.4); }
.wrap { width:min(1180px,calc(100% - 48px)); }
.hero { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:0; padding:42px 0 30px; }
.hero > div:first-child {
  min-height:560px; padding:clamp(40px,5vw,72px); display:flex; flex-direction:column; justify-content:center;
  border-radius:18px 0 0 18px; background:linear-gradient(90deg,rgba(7,35,42,.94),rgba(7,35,42,.67)),url('../images/official/hero-solar-ess.webp') center/cover; color:white;
}
.hero > div:first-child::before,.hero > div:first-child::after { display:none; }
.hero .kicker { color:#f4cf80; font-size:11px; letter-spacing:.16em; margin:0 0 20px; }
.hero h1 { max-width:14ch; font-size:clamp(38px,4vw,58px); line-height:1.18; margin:0 0 24px; }
.hero .lede { color:#ecf4f1; max-width:33rem; font-size:16px; line-height:1.85; }
.hero-image-note { color:#d1e1dd; font-size:11px; margin:26px 0 0; }
.hero-card { padding:clamp(30px,4vw,54px); background:#fff; border:1px solid var(--line); border-left:0; border-radius:0 18px 18px 0; }
.hero-card h2 { font-size:25px; line-height:1.3; }
.hero-card .segment { margin-top:24px; }
.segment label { background:#fff; border-color:#dce6e2; }
.segment label:has(input:checked) { background:#edf6f2; border-color:#328578; }
.peso-row { border-bottom:2px solid #adbfba; }
.btn { border-radius:8px; font-weight:700; }
.btn.sun { background:#e7b44e; color:#102e36; }
.btn.sun:hover { background:#f1c86e; }
.section { padding:70px 0; }
.section + .section { border-top:1px solid #dce7e3; }
.section h2 { font-size:clamp(28px,3vw,40px); line-height:1.25; }
.section h2::after,.page-hero h1::after { background:#d5aa50; height:3px; }
.section > .lede { color:#526b70; max-width:48rem; line-height:1.8; }
.kicker { color:#98702e; }
.steps { gap:0; border:1px solid var(--line); background:#fff; border-radius:14px; }
.steps article { padding:30px; }
.steps article strong { font-size:17px; }
.panel { border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:none; transition:transform .18s,border-color .18s,box-shadow .18s; }
a.panel:hover { transform:translateY(-3px); border-color:#8fbdb1; box-shadow:0 12px 28px rgba(20,75,62,.09); }
a.panel::after { color:#408d7a; }
.library-card { min-height:90px; }
.current-library .library-grid { gap:12px; }
.current-library .library-card { min-height:88px; justify-content:center; }
.page-hero { padding-top:64px; }
.page-hero h1 { line-height:1.18; }
.choice,.result-card { background:#fff; border-color:var(--line); }
.choice.on { background:#edf7f2; border-color:#348779; }
.progress { background:#dce9e3; }
.site-footer { background:#0c2a34; color:#d3e2de; border:0; margin-top:70px; padding:38px 0; }
.site-footer a { color:#f2cf8a; }
/* The company library uses the same visual language as the planning site. */
.source-top { min-height:82px; padding-left:max(24px,calc((100% - 1180px)/2)); padding-right:max(24px,calc((100% - 1180px)/2)); }
.source-top nav { align-items:center; gap:20px; }
.source-top nav a { font-size:14px; font-weight:600; }
.source-heading { padding:64px 0 28px; }
.source-heading h1 { font-size:clamp(36px,4vw,54px); }
.source-heading > p:last-child { font-size:15px; line-height:1.7; margin-top:14px; }
.source-nav { gap:10px; margin-bottom:36px; }
.source-nav a { background:#fff; border:1px solid var(--line); padding:16px; border-radius:10px; color:#174b46; }
.source-nav a:hover { border-color:#8fbdb1; background:#f1f8f5; }
.source-section { border-color:var(--line); border-radius:14px; }
.source-end { padding:54px 0 10px; }
@media (max-width:860px) {
  .wrap { width:calc(100% - 32px); }
  .topbar { min-height:72px; }
  .nav a:hover { background:#edf6f2; }
  .hero { grid-template-columns:minmax(0,1fr); padding:20px 0 12px; }
  .hero > div:first-child { min-height:330px; padding:34px 28px; border-radius:14px 14px 0 0; }
  .hero h1 { font-size:clamp(34px,8vw,44px); }
  .hero-card { border:1px solid var(--line); border-top:0; border-radius:0 0 14px 14px; padding:30px 26px; }
  .section { padding:48px 0; }
  .source-heading { padding:44px 0 24px; }
}
@media(max-width:760px) {
  .source-top { min-height:0; padding:16px; }
  .source-top nav { gap:12px; }
  .source-nav a { padding:14px; }
  .source-section { margin:16px 0; }
}
@media(max-width:380px) {
  .topbar { padding-left:14px; padding-right:14px; }
  .wrap { width:calc(100% - 28px); }
  .hero > div:first-child { padding:30px 24px; }
  .hero-card { padding:28px 24px; }
  .hero h1 { font-size:34px; }
}
@media print { .site-footer { color:#333; background:white; } .hero > div:first-child { background:white; color:#111; } .hero .lede { color:#333; } }
/* The source video's original grid left a large empty area on desktop. */
.source-section:has(> .source-grid > .source-node.source-video) > .source-grid { display:flex; flex-direction:column; align-items:center; gap:28px; padding:clamp(24px,4vw,48px); }
.source-section:has(> .source-grid > .source-node.source-video) .source-node { width:100%; padding:0; }
.source-section:has(> .source-grid > .source-node.source-video) .source-node.source-video { max-width:900px; }
.source-video iframe { background:#102f3b; border-radius:8px; }
/* Frontend design: a clear, practical energy-planning experience. */
:root { --ink:#173c38; --ink-soft:#536c65; --paper:#f2f6f2; --paper-2:#fff; --line:#d8e3dc; --sun:#c79338; --sun-deep:#176451; --sea:#173c38; --sea-soft:#e8f1eb; }
body { background:#fff; }
.topbar,.source-top { background:#fff; border-bottom:1px solid #dce7df; color:#173c38; }
.topbar .nav a,.source-top nav a { color:#173c38; }
.topbar .nav a:hover,.topbar .nav a[aria-current="page"] { color:#124a3e; background:#eaf3ed; }
.lang-toggle { border-color:#a7beb2; background:#fff; }
.lang-toggle button { color:#173c38; }
.lang-toggle button[aria-pressed="true"] { background:#195a49; color:#fff; }
.nav-toggle { color:#173c38; border-color:#9bb6a8; }
.home-page .hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); gap:0 7%; align-items:center; padding:55px 0 18px; }
.home-page .hero .hero-copy { min-height:0; padding:30px 0; display:block; border-radius:0; background:none; color:#173c38; }
.home-page .hero .hero-copy::before,.home-page .hero .hero-copy::after { display:none; }
.home-page .hero h1 { max-width:12ch; margin:0 0 25px; color:#173c38; font-size:clamp(40px,4.3vw,64px); line-height:1.16; letter-spacing:-.045em; }
.home-page .hero .lede { color:#536c65; max-width:31rem; line-height:1.8; font-size:17px; }
.hero-link { display:inline-block; margin-top:24px; color:#176451; font-weight:700; text-underline-offset:5px; }
.hero-visual { position:relative; margin:0; min-width:0; }
.hero-visual img { display:block; width:100%; height:clamp(360px,35vw,500px); object-fit:cover; border-radius:90px 0 0 0; }
.hero-visual figcaption { position:absolute; right:14px; bottom:12px; padding:4px 8px; color:#fff; background:rgba(17,45,38,.8); font-size:11px; line-height:1.4; }
.home-page .hero-card { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.65fr); align-items:center; gap:36px; margin:38px 0 0; padding:32px 36px; border:0; border-radius:0; box-shadow:none; background:#eaf2eb; }
.estimate-intro h2 { font-size:24px; line-height:1.3; }
.estimate-intro .fine { font-size:13px; line-height:1.7; max-width:32ch; margin:10px 0 0; }
.estimate-inputs { min-width:0; }
.home-page .hero-card .segment { margin:0; }
.home-page .hero-card .bill-label { margin-top:15px; }
.home-page .hero-card .peso-row { margin:0; }
.home-page .hero-card .peso-row input { font-size:32px; }
.estimate-action .fine { margin:12px 0 0; line-height:1.6; }
.btn.sun { background:#1a654f; color:#fff; }
.btn.sun:hover { background:#124c3c; color:#fff; }
.section h2::after,.page-hero h1::after { display:none; }
.home-page .section { padding:72px 0; }
.home-page .section > .lede { margin-top:14px; }
.home-page .steps { border:0; border-top:2px solid #195a49; border-radius:0; background:transparent; }
.home-page .steps article { border-radius:0; background:transparent; padding:28px 24px 16px 0; }
.home-page .steps article + article { padding-left:24px; border-left:1px solid #d8e3dc; }
.home-page .steps article::before { background:none; color:#a87522; border-radius:0; margin-bottom:14px; }
.home-page .panel { border-radius:0; box-shadow:none; border:0; border-top:1px solid #b5c9bc; background:transparent; padding:24px 38px 24px 0; transition:none; }
.home-page a.panel:hover { transform:none; box-shadow:none; border-color:#176451; }
.home-page a.panel::after { right:4px; color:#176451; }
.home-page .current-library .library-card { min-height:76px; }
.home-page .current-library .kicker { font-size:13px; letter-spacing:0; text-transform:none; }
.source-nav a { border-radius:0; border-width:0 0 1px; border-color:#c9d9cf; background:transparent; }
.source-nav a:hover { background:#edf5ef; }
.site-footer { background:#173c38; }
@media (max-width:860px) {
 .topbar .nav { background:#fff; }
 .home-page .hero { grid-template-columns:minmax(0,1fr); gap:0; padding:32px 0 0; }
 .home-page .hero .hero-copy { padding:12px 0 32px; }
 .home-page .hero h1 { font-size:clamp(35px,7.2vw,52px); }
 .hero-visual img { height:clamp(250px,55vw,390px); border-radius:58px 0 0 0; }
 .home-page .hero-card { grid-column:1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin-top:0; padding:28px; }
 .estimate-action { grid-column:1/-1; }
 .estimate-action .full { width:auto; min-width:200px; }
 .home-page .section { padding:50px 0; }
 .home-page .steps article:nth-child(n+3) { border-top:1px solid #d8e3dc; }
 .home-page .steps article:nth-child(odd) { padding-left:0; border-left:0; }
}
@media (max-width:540px) {
 .home-page .hero-card { grid-template-columns:minmax(0,1fr); gap:20px; padding:24px; }
 .estimate-action { grid-column:auto; }
 .estimate-action .full { width:100%; }
 .hero-link { margin-top:16px; }
 .home-page .steps { grid-template-columns:1fr; }
 .home-page .steps article,.home-page .steps article + article { padding:20px 0; border-left:0; border-top:1px solid #d8e3dc; }
 .home-page .steps article:first-child { border-top:0; }
 .home-page .current-library .library-grid { gap:0; }
}
.home-page .hero h1 { max-width:none; }
.source-heading .kicker, .home-page .current-library .kicker { display:none; }