/* ═══════════════════════════════════════════════════════════════
   TECHNOLOGIKI × SUNTREE  —  sub-landing page (suntree.html)
   Scoped to body[data-page="suntree"] so nothing here leaks into
   the rest of the site. Loaded after main.css; reuses its fonts,
   buttons, nav and theme variables.

   The page reads like a protection single-line diagram: a deep
   green ground for the hero and the "engineering" sections (the
   homepage banner, opened up), plain light sections for the
   catalogue parts, one amber accent reserved for the protection
   devices themselves. Light sections follow the site theme.
   ═══════════════════════════════════════════════════════════════ */

body[data-page="suntree"] {
  --st-green-deep:  #0b3d24;
  --st-green-deep-2:#0d4a2c;
  --st-green:       #1e7a3c;   /* wordmark green, deepened for text on light */
  --st-green-soft:  #9fe3b4;   /* text-level green on the dark ground */
  --st-amber:       #f2b33d;   /* protection devices, dark ground */
  --st-amber-ink:   #c47a0c;   /* protection devices, light ground */
  --st-line:        rgba(255,255,255,.13);
  --st-line-2:      rgba(255,255,255,.22);
  --st-dim:         rgba(226,240,232,.72);
  --st-shell:       min(1120px, 100% - 3rem);
}

.st-shell { width: var(--st-shell); margin-inline: auto; }
.st-sec { position: relative; padding: clamp(4rem, 7vw, 6.5rem) 0; }
.st-sec-dark { background: var(--st-green-deep); color: #fff; }
.st-sec-light { background: var(--theme-bg); color: var(--theme-text); }
.st-sec-soft { background: var(--theme-surface-soft); color: var(--theme-text); }
.st-sec-light + .st-sec-light, .st-sec-soft + .st-sec-soft { border-top: 1px solid var(--theme-border); }
.st-sec-dark + .st-sec-dark { border-top: 1px solid var(--st-line); }

/* ─── type ─── */
.st-h2 {
  margin: 0;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -.025em; max-width: 24ch; text-wrap: balance;
}
.st-sub { margin: .9rem 0 0; max-width: 56ch; font-size: 1.02rem; line-height: 1.7; color: var(--theme-muted); text-wrap: pretty; }
.st-sec-dark .st-sub { color: var(--st-dim); }
.st-sub + .st-sub { margin-top: .7rem; }
.st-sub b { font-weight: 600; color: inherit; }
.st-sec-dark .st-sub b { color: #fff; }

/* Section head with an optional right-hand note (used on the catalogue). */
.st-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.st-head .st-sub { margin-top: 0; }

/* ─── buttons ─── */
.st-btn-amber {
  background: var(--st-amber) !important; color: #2a1a00 !important; border-color: var(--st-amber) !important;
  box-shadow: none !important;
}
.st-btn-amber:hover, .st-btn-amber:focus-visible { background: #f7c766 !important; transform: translateY(-3px); }
.st-btn-amber::before { display: none !important; }
.st-btn-ghost {
  background: transparent !important; color: #fff !important;
  border: 1px solid var(--st-line-2) !important; box-shadow: none !important;
}
.st-btn-ghost:hover, .st-btn-ghost:focus-visible { border-color: rgba(255,255,255,.5) !important; transform: translateY(-3px); }
.st-btn-ghost::before { display: none !important; }
.st-btn-green {
  background: var(--st-green) !important; color: #fff !important; box-shadow: none !important;
}
.st-btn-green:hover, .st-btn-green:focus-visible { background: #24924a !important; transform: translateY(-3px); }
.st-btn-green::before { display: none !important; }
.st-btn-outline {
  background: transparent !important; color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important; box-shadow: none !important;
}
.st-btn-outline:hover, .st-btn-outline:focus-visible { border-color: var(--st-green) !important; color: var(--st-green) !important; transform: translateY(-3px); }
.st-btn-outline::before { display: none !important; }
.st-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; }

/* ─── HERO ─── */
.st-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + 4.5rem) 0 0;
  background: var(--st-green-deep); color: #fff;
}
.st-hero-inner { max-width: 780px; }

.st-lockup { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 0 0 2.2rem; }
.st-word {
  font-family: 'Ubuntu', 'Ubuntu Fallback', 'Inter', sans-serif;
  font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap;
}
.st-word em { font-style: normal; color: #6fdfd3; }
.st-lockup .st-times { font-weight: 300; font-size: 1.35rem; line-height: 1; opacity: .45; }
/* the ring sits above the wordmark, so the image is lifted until the
   wordmark, not the whole image, centres on the Technologiki line */
.st-lockup img { display: block; height: 44px; width: auto; margin-block: -8px; transform: translateY(-6px); }

/* The hero's descriptor speaks the diagram's language: the amber
   breaker symbol from the protection nodes, then plain sentence-case
   text. No caps, no tracking. */
.st-hero-scope {
  display: flex; align-items: center; gap: .65rem; margin: 0 0 1.1rem;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 1rem; font-weight: 500; color: rgba(226,240,232,.85);
}
.st-hero-scope svg { width: 30px; height: 15px; flex: 0 0 auto; color: var(--st-amber); }
.st-hero h1 {
  margin: 0 0 1.1rem;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: clamp(2.5rem, 5.6vw, 4.3rem); font-weight: 700;
  line-height: 1.02; letter-spacing: -.035em; max-width: 15ch; text-wrap: balance;
}
.st-hero-lead { margin: 0; max-width: 50ch; font-size: 1.12rem; line-height: 1.7; color: var(--st-dim); text-wrap: pretty; }

/* ─── THE DIAGRAM: two protection chains, panel to grid ───
   This is the page's one bold element. Nodes are plain text on a
   conductor line; the protection devices are the only amber things
   on the page and carry a breaker symbol. */
.st-diagram {
  margin-top: 4.5rem; padding: 2.4rem 0 3.2rem;
  border-top: 1px solid var(--st-line);
}
.st-diagram-title {
  margin: 0 0 1.8rem; font-size: .92rem; color: var(--st-dim);
}
.st-chain { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem 1.5rem; align-items: center; }
.st-chain + .st-chain { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px dashed var(--st-line); }
.st-chain-name {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
}
.st-chain-name small { display: block; margin-top: .25rem; font-size: .78rem; font-weight: 400; color: var(--st-dim); }
.st-chain-nodes { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; min-width: 0; }
.st-chain-nodes li { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.st-chain-nodes li:first-child { flex-grow: 0; }
.st-chain-nodes li + li::before {
  content: ''; flex: 1 1 14px; min-width: 14px; height: 1px; background: var(--st-line-2); margin: 0 .55rem;
}
.st-node {
  display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
  padding: .45rem .7rem; border: 1px solid var(--st-line-2); border-radius: 6px;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: .8rem; font-weight: 600; line-height: 1; white-space: nowrap; color: #fff;
}
.st-node--end { border-style: dashed; color: var(--st-dim); }
.st-node--prot { border-color: var(--st-amber); color: var(--st-amber); background: rgba(242,179,61,.08); }
.st-node--prot svg { width: 22px; height: 12px; display: block; }

/* ─── ROLES: who brings what ─── */
.st-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; }
.st-role + .st-role { border-left: 1px solid var(--theme-border); padding-left: 4rem; }
.st-role-brand { display: flex; align-items: center; min-height: 40px; margin: 0 0 1.4rem; }
.st-role-brand img { display: block; height: 42px; width: auto; }
.st-role-brand .st-word { font-size: 1.55rem; color: var(--theme-text); }
.st-role-brand .st-word em { color: #21b6a8; }
.st-role h2 {
  margin: 0 0 .8rem;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance;
}
.st-role p { margin: 0; font-size: .98rem; line-height: 1.68; color: var(--theme-muted); text-wrap: pretty; max-width: 42ch; }
.st-role p + p { margin-top: .7rem; }

/* ─── CATALOGUE: three product families, laid out as a spec sheet ─── */
.st-catalogue { margin-top: 3.2rem; border-top: 1px solid var(--theme-border); }
.st-family { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 1.5rem 3rem; padding: 2.2rem 0; border-bottom: 1px solid var(--theme-border); }
.st-family h3 {
  margin: 0 0 .5rem;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.st-family p { margin: 0; font-size: .95rem; line-height: 1.62; color: var(--theme-muted); text-wrap: pretty; max-width: 34ch; }
.st-family ul {
  list-style: none; margin: 0; padding: 0;
  columns: 3; column-gap: 2rem;
  font-size: .93rem; line-height: 1.5; color: var(--theme-text);
}
.st-family li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px solid var(--theme-border); }

/* ─── CRITERIA: what the selection depends on ─── */
.st-criteria {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem;
  border-top: 1px solid var(--st-line);
}
.st-criteria li { padding: .95rem 0; border-bottom: 1px solid var(--st-line); font-size: 1rem; line-height: 1.5; }
.st-criteria li span { display: block; font-size: .85rem; color: var(--st-dim); margin-top: .15rem; }

/* ─── SEGMENTS: rule-separated columns ─── */
.st-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid var(--theme-border); }
.st-col { padding: 1.8rem 1.5rem 0 0; }
.st-col + .st-col { border-left: 1px solid var(--theme-border); padding-left: 1.5rem; }
.st-col h3 {
  margin: 0 0 .5rem;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25;
}
.st-col p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--theme-muted); text-wrap: pretty; }
.st-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-cols--2 .st-col { padding-right: 3rem; }
.st-cols--2 .st-col + .st-col { padding-left: 3rem; }
.st-cols--2 h3 { font-size: 1.35rem; margin-bottom: .8rem; }
.st-cols--2 p { font-size: .98rem; line-height: 1.68; max-width: 42ch; }
.st-cols--2 p + p { margin-top: .7rem; }
.st-cols--2 ul { margin: 1rem 0 0; padding: 0 0 0 1.1rem; font-size: .95rem; line-height: 1.7; color: var(--theme-muted); }

/* ─── BESS: statement with the reasons alongside ─── */
.st-bess { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem 5rem; align-items: start; }
.st-reasons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--theme-border); }
.st-reasons li { padding: .85rem 0; border-bottom: 1px solid var(--theme-border); font-size: .98rem; line-height: 1.5; }
.st-reasons-title { margin: 0 0 1rem; font-size: .92rem; color: var(--theme-muted); }

/* ─── DC 1500 V: the one big figure on the page ─── */
.st-volt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 5rem; align-items: center; }
.st-volt-figure {
  margin: 0;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: clamp(4.2rem, 11vw, 8.5rem); font-weight: 800; line-height: .92; letter-spacing: -.05em; color: #fff;
}
.st-volt-figure small { display: block; margin-top: .6rem; font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; color: var(--st-amber); }
.st-volt-figure + p { margin: 1.4rem 0 0; max-width: 34ch; font-size: 1rem; line-height: 1.65; color: var(--st-dim); }
.st-range { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--st-line); }
.st-range li { padding: .8rem 0; border-bottom: 1px solid var(--st-line); font-size: 1rem; }
.st-range-note { margin: 1.4rem 0 0; font-size: .95rem; line-height: 1.65; color: var(--st-dim); max-width: 44ch; }
.st-range-note b { color: #fff; font-weight: 600; }

/* ─── SCOPE: seven engineering steps, in the order they happen ─── */
.st-steps { list-style: none; margin: 3rem 0 0; padding: 0; counter-reset: st-step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--theme-border); }
.st-steps li { counter-increment: st-step; padding: 1.6rem 1.25rem 1.6rem 0; }
.st-steps li + li { border-left: 1px solid var(--theme-border); padding-left: 1.25rem; }
.st-steps li:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.st-steps li:nth-child(n+5) { border-top: 1px solid var(--theme-border); }
.st-steps li::before {
  content: counter(st-step, decimal-leading-zero); display: block; margin-bottom: 1.1rem;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--st-green);
}
.st-steps h3 {
  margin: 0 0 .45rem;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
}
.st-steps p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--theme-muted); text-wrap: pretty; }

/* ─── APPLICATIONS: a plain table ─── */
.st-table-wrap { margin-top: 3rem; overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.st-table th, .st-table td { text-align: left; vertical-align: top; padding: 1.05rem 1.5rem 1.05rem 0; border-bottom: 1px solid var(--theme-border); }
.st-table thead th { font-size: .8rem; font-weight: 600; color: var(--theme-muted); border-bottom-color: var(--theme-text); padding-top: 0; }
.st-table th[scope="row"] {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-weight: 700; letter-spacing: -.01em; white-space: nowrap; width: 15rem;
}
.st-table td { color: var(--theme-muted); }
.st-table td ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.st-table td li { position: relative; }
.st-table td li + li::before { content: ''; position: absolute; left: -.5rem; top: .35em; height: .9em; width: 1px; background: var(--theme-border); }

/* ─── CTA ─── */
.st-cta-box {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: center;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--st-line); border-radius: 22px; background: var(--st-green-deep-2);
}
.st-cta-box .st-h2 { max-width: 18ch; }
.st-cta-tags { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: .95rem; color: var(--st-dim); }
.st-cta-tags b { color: #fff; font-weight: 600; }
.st-contact { display: grid; gap: .45rem; justify-items: start; font-size: .98rem; }
.st-contact span { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--st-dim); margin-bottom: .3rem; }
.st-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.st-contact a:hover { border-color: var(--st-amber); }
.st-sign { margin: 3rem 0 0; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--st-dim); }
.st-sign b { color: #fff; font-weight: 700; }

/* ─── dark theme: light sections follow the site theme, the green stays ─── */
html[data-theme='dark'] body[data-page="suntree"] .st-role-brand .st-word { color: #fff; }
html[data-theme='dark'] body[data-page="suntree"] .st-steps li::before { color: var(--st-green-soft); }
html[data-theme='dark'] body[data-page="suntree"] .st-btn-outline:hover { border-color: var(--st-green-soft) !important; color: var(--st-green-soft) !important; }
html[data-theme='dark'] body[data-page="suntree"] .st-role-brand img { filter: none; }

/* ─── responsive ─── */
@media (max-width: 1000px) {
  .st-family ul { columns: 2; }
}
@media (max-width: 900px) {
  .st-head { grid-template-columns: 1fr; gap: 1rem; }
  .st-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-col { padding: 1.6rem 1.25rem 1.6rem 0; }
  .st-col + .st-col { padding-left: 1.25rem; }
  .st-cols .st-col:nth-child(odd) { border-left: 0; padding-left: 0; }
  .st-cols .st-col:nth-child(n+3) { border-top: 1px solid var(--theme-border); }
  .st-bess, .st-volt { grid-template-columns: 1fr; gap: 2.2rem; }
  .st-cta-box { grid-template-columns: 1fr; }
  .st-family { grid-template-columns: 1fr; gap: 1.2rem; }
  .st-criteria { grid-template-columns: 1fr; }
  .st-chain { grid-template-columns: 1fr; gap: .8rem; }
}
@media (max-width: 720px) {
  .st-hero { padding-top: calc(var(--nav-h) + 3rem); }
  .st-roles { grid-template-columns: 1fr; gap: 2.5rem; }
  .st-role + .st-role { border-left: 0; padding-left: 0; border-top: 1px solid var(--theme-border); padding-top: 2.5rem; }
  .st-cols--2 { grid-template-columns: 1fr; }
  .st-cols--2 .st-col { padding-right: 0; }
  .st-cols--2 .st-col + .st-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--theme-border); }
  .st-lockup img { height: 36px; margin-block: -6px; transform: translateY(-5px); }
  .st-word { font-size: 1.3rem; }
  .st-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-steps li:nth-child(4n+1) { border-left: 1px solid var(--theme-border); padding-left: 1rem; }
  .st-steps li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .st-steps li:nth-child(n+3) { border-top: 1px solid var(--theme-border); }
  /* the diagram turns vertical: the conductor runs down the page */
  .st-chain-nodes { flex-direction: column; align-items: flex-start; }
  .st-chain-nodes li { flex-direction: column; align-items: flex-start; }
  .st-chain-nodes li + li::before { flex: 0 0 auto; width: 1px; height: 16px; min-width: 0; margin: 0 0 0 1.1rem; }
}
@media (max-width: 560px) {
  .st-cols, .st-cols--2 { grid-template-columns: 1fr; }
  .st-cols .st-col { padding: 1.4rem 0; border-left: 0 !important; border-top: 1px solid var(--theme-border); }
  .st-cols .st-col:first-child { border-top: 0; }
  .st-family ul { columns: 1; }
  .st-steps { grid-template-columns: 1fr; }
  .st-steps li { padding: 1.3rem 0 !important; border-left: 0 !important; border-top: 1px solid var(--theme-border); }
  .st-steps li:first-child { border-top: 0; }
  .st-actions .btn { width: 100%; justify-content: center; }
  .st-table th[scope="row"] { white-space: normal; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .st-btn-amber, .st-btn-ghost, .st-btn-green, .st-btn-outline, .st-contact a { transition: none; }
}