/*
Theme Name: Clymene Global
Theme URI: https://clymeneglobal.com
Author: Clymene Global LLC
Description: Tema a medida para Clymene Global LLC - comercializacion de equipamiento de energia renovable, accesorios e insumos. Bilingue ES/EN, accesible (WCAG 2.1 AA), sin dependencias externas.
Version: 1.2.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clymene
Tags: business, custom-logo, custom-menu, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand */
  --cg-ink:            #0A1512;
  --cg-ink-2:          #0E201A;
  --cg-primary:        #0B6E4F;
  --cg-primary-700:    #085840;
  --cg-primary-400:    #12A277;
  --cg-primary-200:    #8FD9C0;
  --cg-primary-50:     #E6F4EF;
  --cg-accent:         #F5B301;
  --cg-accent-50:      #FEF6E1;

  /* Surfaces & text */
  --cg-bg:             #FFFFFF;
  --cg-bg-alt:         #F4F8F6;
  --cg-card:           #FFFFFF;
  --cg-fg:             #0A1512;
  --cg-muted:          #4A5D57;   /* 7.0:1 on white */
  --cg-on-dark:        #FFFFFF;
  --cg-on-dark-muted:  #9FB3AB;   /* 8.4:1 on ink  */
  --cg-border:         #DCE7E2;
  --cg-border-dark:    #22453A;
  --cg-danger:         #B3261E;

  /* Typography */
  --cg-font-heading: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
  --cg-font-body:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --cg-fs-xs:   0.8125rem;
  --cg-fs-sm:   0.9375rem;
  --cg-fs-base: 1.0625rem;
  --cg-fs-lg:   1.1875rem;
  --cg-fs-xl:   1.5rem;
  --cg-fs-2xl:  clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --cg-fs-3xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --cg-fs-4xl:  clamp(2.4rem, 1.5rem + 4vw, 4rem);

  /* Space */
  --cg-s1: 0.25rem;  --cg-s2: 0.5rem;   --cg-s3: 0.75rem;  --cg-s4: 1rem;
  --cg-s5: 1.5rem;   --cg-s6: 2rem;     --cg-s7: 3rem;     --cg-s8: 4rem;
  --cg-s9: 6rem;     --cg-s10: 8rem;

  /* Shape & depth */
  --cg-r-sm: 8px; --cg-r-md: 14px; --cg-r-lg: 20px; --cg-r-xl: 28px; --cg-r-pill: 999px;
  --cg-shadow-sm: 0 1px 2px rgba(10,21,18,.06), 0 1px 3px rgba(10,21,18,.05);
  --cg-shadow-md: 0 4px 12px rgba(10,21,18,.07), 0 2px 4px rgba(10,21,18,.04);
  --cg-shadow-lg: 0 18px 40px -12px rgba(10,21,18,.18), 0 4px 12px rgba(10,21,18,.06);

  /* Motion */
  --cg-ease: cubic-bezier(.22,.61,.36,1);
  --cg-dur-fast: 150ms; --cg-dur: 240ms; --cg-dur-slow: 420ms;

  /* Layout */
  --cg-container: 1180px;
  --cg-container-narrow: 800px;
  --cg-header-h: 76px;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cg-bg);
  color: var(--cg-fg);
  font-family: var(--cg-font-body);
  font-size: var(--cg-fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--cg-font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--cg-s4);
  text-wrap: balance;
}
h1 { font-size: var(--cg-fs-4xl); letter-spacing: -0.03em; }
h2 { font-size: var(--cg-fs-3xl); letter-spacing: -0.025em; }
h3 { font-size: var(--cg-fs-xl); }
h4 { font-size: var(--cg-fs-lg); }
p  { margin: 0 0 var(--cg-s4); text-wrap: pretty; }
p:last-child, ul:last-child { margin-bottom: 0; }

a { color: var(--cg-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cg-primary-700); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.25em; }

:focus-visible { outline: 3px solid var(--cg-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--cg-primary-200); color: var(--cg-ink); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 999; background: var(--cg-ink); color: #fff; padding: 12px 22px;
  border-radius: 0 0 var(--cg-r-md) var(--cg-r-md); font-weight: 600; text-decoration: none;
  transition: transform var(--cg-dur) var(--cg-ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.cg-container { width: 100%; max-width: var(--cg-container); margin-inline: auto; padding-inline: var(--cg-s5); }
.cg-narrow    { max-width: var(--cg-container-narrow); margin-inline: auto; }
.cg-section   { padding-block: var(--cg-s9); }
.cg-section--tight { padding-block: var(--cg-s8); }
.cg-section--alt { background: var(--cg-bg-alt); }
.cg-dark { background: var(--cg-ink); color: var(--cg-on-dark); }
.cg-dark h1, .cg-dark h2, .cg-dark h3, .cg-dark h4 { color: var(--cg-on-dark); }
.cg-dark p, .cg-dark li { color: var(--cg-on-dark-muted); }
.cg-dark a { color: var(--cg-primary-200); }

.cg-grid { display: grid; gap: var(--cg-s5); }
.cg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cg-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cg-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.cg-sec-head { max-width: 660px; margin-bottom: var(--cg-s7); }
.cg-sec-head--center { margin-inline: auto; text-align: center; }
.cg-eyebrow {
  display: inline-flex; align-items: center; gap: var(--cg-s2);
  font-family: var(--cg-font-body); font-size: var(--cg-fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cg-primary);
  margin: 0 0 var(--cg-s3);
}
.cg-dark .cg-eyebrow { color: var(--cg-primary-200); }
.cg-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; flex: none; }
.cg-sec-head--center .cg-eyebrow::before { display: none; }
.cg-lead { font-size: var(--cg-fs-lg); color: var(--cg-muted); }
.cg-dark .cg-lead { color: var(--cg-on-dark-muted); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cg-s2);
  min-height: 48px; padding: 0 var(--cg-s5);
  font-family: var(--cg-font-heading); font-size: var(--cg-fs-sm); font-weight: 600;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--cg-r-pill);
  transition: background-color var(--cg-dur) var(--cg-ease),
              border-color var(--cg-dur) var(--cg-ease),
              color var(--cg-dur) var(--cg-ease),
              transform var(--cg-dur-fast) var(--cg-ease),
              box-shadow var(--cg-dur) var(--cg-ease);
}
.cg-btn:hover { transform: translateY(-1px); }
.cg-btn:active { transform: translateY(0); }
.cg-btn svg { width: 18px; height: 18px; flex: none; }

.cg-btn--primary { background: var(--cg-primary); color: #fff; box-shadow: var(--cg-shadow-md); }
.cg-btn--primary:hover { background: var(--cg-primary-700); color: #fff; box-shadow: var(--cg-shadow-lg); }

.cg-btn--accent { background: var(--cg-accent); color: var(--cg-ink); box-shadow: var(--cg-shadow-md); }
.cg-btn--accent:hover { background: #FFC526; color: var(--cg-ink); box-shadow: var(--cg-shadow-lg); }

.cg-btn--ghost { background: transparent; color: var(--cg-fg); border-color: var(--cg-border); }
.cg-btn--ghost:hover { background: var(--cg-bg-alt); border-color: var(--cg-primary); color: var(--cg-primary-700); }

/* Every dark surface: hero, interior page header, CTA band and .cg-dark sections. */
.cg-dark .cg-btn--ghost,
.cg-hero .cg-btn--ghost,
.cg-page-head .cg-btn--ghost,
.cg-cta .cg-btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.cg-dark .cg-btn--ghost:hover,
.cg-hero .cg-btn--ghost:hover,
.cg-page-head .cg-btn--ghost:hover,
.cg-cta .cg-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.cg-btn--block { width: 100%; }

/* Busy state while a form submission is in flight. */
.cg-btn.is-busy { pointer-events: none; opacity: .78; }
.cg-btn.is-busy svg { animation: cg-spin 900ms linear infinite; }
@keyframes cg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cg-btn.is-busy svg { animation: none; } }

.cg-link-arrow {
  display: inline-flex; align-items: center; gap: var(--cg-s2);
  font-weight: 600; font-family: var(--cg-font-heading); font-size: var(--cg-fs-sm);
  text-decoration: none; color: var(--cg-primary);
}
.cg-link-arrow svg { width: 16px; height: 16px; transition: transform var(--cg-dur) var(--cg-ease); }
.cg-link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   5. HEADER / NAV
   ========================================================================== */
.cg-topbar { background: var(--cg-ink); color: var(--cg-on-dark-muted); font-size: var(--cg-fs-xs); }
.cg-topbar__inner { display: flex; flex-wrap: wrap; gap: var(--cg-s2) var(--cg-s5); align-items: center; justify-content: space-between; min-height: 40px; padding-block: 6px; }
.cg-topbar__items { display: flex; flex-wrap: wrap; gap: var(--cg-s5); align-items: center; }
.cg-topbar a { color: var(--cg-on-dark-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.cg-topbar a:hover { color: #fff; text-decoration: underline; }
.cg-topbar svg { width: 15px; height: 15px; color: var(--cg-primary-200); flex: none; }
/* Styled here rather than inline: an inline `style` outranks the media query
   that hides this at narrow widths, which is what made the bar wrap. */
.cg-topbar__loc { display: inline-flex; align-items: center; gap: 7px; }

.cg-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease);
}
.cg-header.is-stuck { border-bottom-color: var(--cg-border); box-shadow: var(--cg-shadow-sm); }
.cg-header__inner { display: flex; align-items: center; gap: var(--cg-s5); min-height: var(--cg-header-h); }

.cg-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--cg-fg); margin-right: auto; }
.cg-brand__mark { width: 42px; height: 42px; flex: none; }
.cg-brand__text { display: flex; flex-direction: column; line-height: 1; }
.cg-brand__name { font-family: var(--cg-font-heading); font-weight: 600; font-size: 1.125rem; letter-spacing: .06em; }
.cg-brand__sub { font-size: 10px; font-weight: 600; letter-spacing: .28em; color: var(--cg-primary); margin-top: 5px; }
.cg-brand img.custom-logo { max-height: 46px; width: auto; }

.cg-nav__list { display: flex; align-items: center; gap: var(--cg-s2); list-style: none; margin: 0; padding: 0; }
.cg-nav__list a {
  display: block; padding: 10px 14px; border-radius: var(--cg-r-pill);
  font-size: var(--cg-fs-sm); font-weight: 600; color: var(--cg-fg); text-decoration: none;
  transition: background-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease);
}
.cg-nav__list a:hover { background: var(--cg-primary-50); color: var(--cg-primary-700); }
.cg-nav__list .current-menu-item > a,
.cg-nav__list .current_page_item > a,
.cg-nav__list .is-current > a { color: var(--cg-primary-700); background: var(--cg-primary-50); }

.cg-header__actions { display: flex; align-items: center; gap: var(--cg-s3); }

.cg-lang { display: inline-flex; padding: 3px; background: var(--cg-bg-alt); border: 1px solid var(--cg-border); border-radius: var(--cg-r-pill); }
.cg-lang__btn {
  min-width: 46px; min-height: 36px; padding: 0 12px; border: 0; cursor: pointer;
  background: transparent; color: var(--cg-muted); border-radius: var(--cg-r-pill);
  font-family: var(--cg-font-heading); font-size: var(--cg-fs-xs); font-weight: 700; letter-spacing: .06em;
  transition: background-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease);
}
.cg-lang__btn:hover { color: var(--cg-fg); }
.cg-lang__btn[aria-pressed="true"] { background: var(--cg-primary); color: #fff; }

.cg-burger {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--cg-border); border-radius: var(--cg-r-md); cursor: pointer;
}
.cg-burger__bars { position: relative; width: 20px; height: 2px; background: var(--cg-fg); border-radius: 2px; transition: background-color var(--cg-dur-fast) var(--cg-ease); }
.cg-burger__bars::before, .cg-burger__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--cg-fg); border-radius: 2px;
  transition: transform var(--cg-dur) var(--cg-ease), top var(--cg-dur) var(--cg-ease);
}
.cg-burger__bars::before { top: -6px; }
.cg-burger__bars::after  { top: 6px; }
.cg-burger[aria-expanded="true"] .cg-burger__bars { background: transparent; }
.cg-burger[aria-expanded="true"] .cg-burger__bars::before { top: 0; transform: rotate(45deg); }
.cg-burger[aria-expanded="true"] .cg-burger__bars::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 940px) {
  .cg-burger { display: inline-flex; }
  .cg-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cg-bg); border-bottom: 1px solid var(--cg-border);
    padding: var(--cg-s4) var(--cg-s5) var(--cg-s6);
    max-height: calc(100dvh - var(--cg-header-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    /* visibility is delayed only on close, so the panel is focusable the
       instant it starts opening rather than after the animation ends. */
    transition: opacity var(--cg-dur) var(--cg-ease),
                transform var(--cg-dur) var(--cg-ease),
                visibility 0s linear var(--cg-dur);
    box-shadow: var(--cg-shadow-lg);
  }
  .cg-nav.is-open {
    transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity var(--cg-dur) var(--cg-ease),
                transform var(--cg-dur) var(--cg-ease),
                visibility 0s linear 0s;
  }
  .cg-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .cg-nav__list a { padding: 14px 16px; border-radius: var(--cg-r-md); font-size: var(--cg-fs-base); }
  .cg-nav__cta { margin-top: var(--cg-s4); }
  .cg-header__actions .cg-btn { display: none; }
  /* Tablet: drop the address, keep phone and email on one line. */
  .cg-topbar__loc { display: none; }
}

/* Phones: the top bar goes entirely. It costs ~90px above the fold and every
   item in it is repeated in the footer and on the contact page. */
@media (max-width: 780px) {
  .cg-topbar { display: none; }
}
@media (min-width: 941px) { .cg-nav__cta { display: none; } }

/* ==========================================================================
   5b. BACKGROUND IMAGERY
   The image sits behind everything in its section, oversized so it can travel
   on scroll without ever exposing an edge. The veil keeps the measured text
   contrast intact over a photograph.
   ========================================================================== */
.cg-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cg-bg__img {
  position: absolute; left: 0; top: -15%;
  width: 100%; height: 130%;
  object-fit: cover; object-position: center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
/* Three layers, in paint order:
   1. A scrim over the side that carries the text. This is what protects
      legibility, so the flat veil no longer has to darken the whole picture.
      Even at the lowest slider setting the text zone lands near 85% opacity,
      which holds 8:1 against a pure-white photograph.
   2. Light shaping at the top and bottom edges so the band settles into the
      page instead of cutting hard.
   3. The flat base, which is the only part the Customizer slider moves. */
.cg-bg__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10,21,18,.88) 0%,
      rgba(10,21,18,.80) 45%,
      rgba(10,21,18,.40) 70%,
      rgba(10,21,18,.08) 100%),
    linear-gradient(180deg, rgba(10,21,18,.34) 0%, rgba(10,21,18,0) 32%, rgba(10,21,18,.46) 100%),
    rgba(10,21,18, var(--cg-veil, .30));
}
/* Mirrored for sections whose text is right-aligned. */
.cg-bg--right .cg-bg__veil {
  background:
    linear-gradient(270deg,
      rgba(10,21,18,.88) 0%,
      rgba(10,21,18,.80) 45%,
      rgba(10,21,18,.40) 70%,
      rgba(10,21,18,.08) 100%),
    linear-gradient(180deg, rgba(10,21,18,.34) 0%, rgba(10,21,18,0) 32%, rgba(10,21,18,.46) 100%),
    rgba(10,21,18, var(--cg-veil, .30));
}
/* On narrow screens the text spans the full width, so the scrim must too. */
@media (max-width: 760px) {
  .cg-bg__veil,
  .cg-bg--right .cg-bg__veil {
    background:
      linear-gradient(180deg, rgba(10,21,18,.62) 0%, rgba(10,21,18,.78) 45%, rgba(10,21,18,.86) 100%),
      rgba(10,21,18, var(--cg-veil, .30));
  }
}
/* Fade the picture in as its section arrives, rather than having it just be
   there — only when a script is present to do the fading. */
.cg-js .cg-bg { opacity: 0; }
.cg-bg.is-in { opacity: 1; transition: opacity 900ms var(--cg-ease); }

/* Sections that can carry an image need their own content lifted above it. */
.cg-hero > .cg-container,
.cg-page-head > .cg-container,
.cg-cta__inner,
.cg-dark > .cg-container { position: relative; z-index: 1; }
.cg-hero, .cg-page-head, .cg-cta, .cg-dark { position: relative; }

/* The muted greys were measured against solid ink. Over a photograph they
   drop below 4.5:1, so anything sitting directly on a picture gets a lighter
   value. At the 70% veil floor these hold AA even against a white photo. */
.cg-bg ~ .cg-container .cg-hero__sub,
.cg-bg ~ .cg-container .cg-hero__meta li,
.cg-bg ~ .cg-container .cg-quote-card__text,
.cg-bg ~ .cg-container .cg-quote-card__note,
.cg-bg ~ .cg-container .cg-crumbs,
.cg-bg ~ .cg-container .cg-lead,
.cg-bg ~ .cg-container .cg-checklist li,
.cg-bg ~ .cg-container > p,
.cg-bg ~ .cg-container .cg-band__inner p,
.cg-bg ~ .cg-container.cg-cta__inner p { color: #D9E5E1; }

/* `p.cg-eyebrow` so it outranks the paragraph rule above — the eyebrow is
   itself a <p>, and the greenish label is part of the brand, not an accident. */
.cg-bg ~ .cg-container p.cg-eyebrow,
.cg-bg ~ .cg-container .cg-eyebrow { color: #B6E8D6; }

/* The quote card sits on the far side of the hero, past the scrim, so over a
   photograph it needs to become a real panel rather than a tinted pane. */
.cg-bg ~ .cg-container .cg-quote-card {
  background: rgba(8,18,15,.80);
  border-color: rgba(255,255,255,.18);
}

/* Photo band: a full-bleed picture that carries one line of copy. */
.cg-band {
  position: relative; overflow: hidden;
  min-height: clamp(320px, 46vh, 520px);
  display: grid; align-items: center;
  background: var(--cg-ink);
  padding-block: var(--cg-s8);
}
.cg-band > .cg-container { position: relative; z-index: 1; }
.cg-band__inner { max-width: 620px; }
.cg-band h2 { color: #fff; font-size: var(--cg-fs-2xl); margin-bottom: var(--cg-s3); }
.cg-band p { color: #D6E2DD; margin: 0; font-size: var(--cg-fs-lg); }
.cg-band .cg-eyebrow { color: var(--cg-primary-200); }
.cg-band--right .cg-band__inner { margin-left: auto; text-align: right; }
.cg-band--right .cg-eyebrow { flex-direction: row-reverse; }
@media (max-width: 760px) {
  .cg-band--right .cg-band__inner { margin-left: 0; text-align: left; }
  .cg-band--right .cg-eyebrow { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  .cg-bg__img { transform: none !important; will-change: auto; }
  .cg-js .cg-bg { opacity: 1; }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.cg-hero { position: relative; background: var(--cg-ink); color: #fff; overflow: hidden; padding-block: var(--cg-s9) var(--cg-s10); }
.cg-hero__glow {
  position: absolute; inset: -30% -10% auto auto; width: 900px; height: 900px; pointer-events: none;
  background: radial-gradient(circle at 60% 40%, rgba(18,162,119,.30), rgba(18,162,119,0) 62%);
}
.cg-hero__arcs { position: absolute; top: -90px; right: -160px; width: 700px; color: var(--cg-primary-400); opacity: .16; pointer-events: none; }
.cg-hero__grid { position: relative; display: grid; grid-template-columns: 1.12fr .88fr; gap: var(--cg-s8); align-items: center; }
@media (max-width: 980px) { .cg-hero__grid { grid-template-columns: 1fr; gap: var(--cg-s7); } .cg-hero { padding-block: var(--cg-s8); } .cg-hero__arcs { display: none; } }

.cg-hero h1 { margin-bottom: var(--cg-s5); }
.cg-hero h1 .cg-hl { color: var(--cg-primary-200); }
.cg-hero__sub { font-size: var(--cg-fs-lg); color: var(--cg-on-dark-muted); max-width: 56ch; margin-bottom: var(--cg-s6); }
.cg-hero__cta { display: flex; flex-wrap: wrap; gap: var(--cg-s3); margin-bottom: var(--cg-s7); }
.cg-hero__meta { display: flex; flex-wrap: wrap; gap: var(--cg-s3) var(--cg-s6); font-size: var(--cg-fs-sm); color: var(--cg-on-dark-muted); margin: 0; padding: 0; list-style: none; }
.cg-hero__meta li { display: inline-flex; align-items: center; gap: 8px; color: var(--cg-on-dark-muted); }
.cg-hero__meta svg { width: 17px; height: 17px; color: var(--cg-primary-200); flex: none; }

.cg-quote-card {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--cg-r-xl);
  padding: var(--cg-s6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.cg-quote-card__title { font-family: var(--cg-font-heading); font-size: var(--cg-fs-lg); font-weight: 600; margin: 0 0 var(--cg-s2); color: #fff; }
.cg-quote-card__text { font-size: var(--cg-fs-sm); color: var(--cg-on-dark-muted); margin-bottom: var(--cg-s5); }
.cg-quote-card__note { display: block; margin-top: var(--cg-s4); font-size: var(--cg-fs-xs); color: var(--cg-on-dark-muted); text-align: center; }
.cg-chips { display: flex; flex-wrap: wrap; gap: var(--cg-s2); margin-bottom: var(--cg-s5); }
.cg-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px;
  border-radius: var(--cg-r-pill); border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05); color: #E4EEEA;
  font-size: var(--cg-fs-xs); font-weight: 600; white-space: nowrap;
  text-decoration: none; transition: background-color var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease);
}
a.cg-chip:hover { background: rgba(18,162,119,.22); border-color: var(--cg-primary-400); color: #fff; }

/* ==========================================================================
   7. TRUST STRIP
   ========================================================================== */
.cg-trust { border-bottom: 1px solid var(--cg-border); background: var(--cg-bg); }
.cg-trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--cg-s5); padding-block: var(--cg-s6); margin: 0; padding-left: 0; list-style: none; }
.cg-trust__item { display: flex; gap: var(--cg-s3); align-items: flex-start; }
.cg-trust__ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--cg-r-md); background: var(--cg-primary-50); color: var(--cg-primary); }
.cg-trust__ico svg { width: 21px; height: 21px; }
.cg-trust__t { display: block; font-family: var(--cg-font-heading); font-weight: 600; font-size: var(--cg-fs-sm); margin: 2px 0 3px; line-height: 1.3; }
.cg-trust__d { display: block; font-size: var(--cg-fs-xs); color: var(--cg-muted); margin: 0; line-height: 1.5; }

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.cg-card {
  position: relative; background: var(--cg-card); border: 1px solid var(--cg-border);
  border-radius: var(--cg-r-lg); padding: var(--cg-s6);
  transition: border-color var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease), transform var(--cg-dur) var(--cg-ease);
}
.cg-card--link:hover, .cg-card--link:focus-within { border-color: var(--cg-primary-200); box-shadow: var(--cg-shadow-lg); transform: translateY(-3px); }
.cg-card__ico {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: var(--cg-s4);
  border-radius: var(--cg-r-md); background: var(--cg-primary-50); color: var(--cg-primary);
  transition: background-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease);
}
.cg-card__ico svg { width: 26px; height: 26px; }
.cg-card--link:hover .cg-card__ico { background: var(--cg-primary); color: #fff; }
.cg-card h3 { font-size: var(--cg-fs-lg); margin-bottom: var(--cg-s2); }
.cg-card h3 a { color: inherit; text-decoration: none; }
.cg-card p { font-size: var(--cg-fs-sm); color: var(--cg-muted); margin: 0; }
.cg-card__list { list-style: none; padding: 0; margin: var(--cg-s4) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cg-card__list li { font-size: var(--cg-fs-xs); color: var(--cg-muted); background: var(--cg-bg-alt); border-radius: var(--cg-r-pill); padding: 4px 11px; }
.cg-card__cover { position: absolute; inset: 0; border-radius: inherit; }

.cg-dark .cg-card { background: var(--cg-ink-2); border-color: var(--cg-border-dark); }
.cg-dark .cg-card p { color: var(--cg-on-dark-muted); }
.cg-dark .cg-card__ico { background: rgba(18,162,119,.14); color: var(--cg-primary-200); }
.cg-dark .cg-card__list li { background: rgba(255,255,255,.06); color: var(--cg-on-dark-muted); }

/* ==========================================================================
   9. PROCESS
   ========================================================================== */
.cg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cg-s5); grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); counter-reset: cgstep; }
.cg-step { position: relative; padding-top: var(--cg-s5); border-top: 2px solid var(--cg-border); counter-increment: cgstep; }
.cg-step::before {
  content: counter(cgstep, decimal-leading-zero);
  position: absolute; top: -1px; left: 0; transform: translateY(-50%);
  background: var(--cg-bg-alt); padding-right: 12px;
  font-family: var(--cg-font-heading); font-size: var(--cg-fs-xs); font-weight: 700; letter-spacing: .1em; color: var(--cg-primary);
}
.cg-step h3 { font-size: var(--cg-fs-base); margin-bottom: 6px; }
.cg-step p { font-size: var(--cg-fs-sm); color: var(--cg-muted); margin: 0; }

/* ==========================================================================
   10. SPLIT / FIGURE
   ========================================================================== */
.cg-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cg-s8); align-items: center; }
@media (max-width: 900px) { .cg-split { grid-template-columns: 1fr; gap: var(--cg-s6); } }
.cg-checklist { list-style: none; padding: 0; margin: var(--cg-s5) 0 0; display: grid; gap: var(--cg-s3); }
.cg-checklist li { display: flex; gap: var(--cg-s3); align-items: flex-start; font-size: var(--cg-fs-sm); }
.cg-checklist svg { width: 21px; height: 21px; flex: none; color: var(--cg-primary); margin-top: 1px; }
.cg-dark .cg-checklist svg { color: var(--cg-primary-200); }

.cg-figure {
  position: relative; border-radius: var(--cg-r-xl); overflow: hidden;
  background: linear-gradient(160deg, var(--cg-ink) 0%, #123328 100%);
  min-height: 380px; display: grid; place-items: center; padding: var(--cg-s7);
}
.cg-figure__arcs { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cg-primary-400); opacity: .2; }
.cg-figure__stats { position: relative; display: grid; gap: var(--cg-s4); width: 100%; max-width: 330px; margin: 0; padding: 0; list-style: none; }
.cg-figure__stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--cg-r-md); padding: var(--cg-s4) var(--cg-s5); backdrop-filter: blur(8px); }
.cg-figure__stat b { display: block; font-family: var(--cg-font-heading); font-size: var(--cg-fs-lg); color: #fff; line-height: 1.25; }
.cg-figure__stat span { font-size: var(--cg-fs-xs); color: var(--cg-on-dark-muted); }

/* ==========================================================================
   11. CTA BAND
   ========================================================================== */
.cg-cta { position: relative; overflow: hidden; background: var(--cg-primary-700); color: #fff; }
.cg-cta::after {
  content: ""; position: absolute; inset: auto -5% -60% auto; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(245,179,1,.18), transparent 64%); pointer-events: none;
}
.cg-cta__inner { position: relative; display: flex; flex-wrap: wrap; gap: var(--cg-s6); align-items: center; justify-content: space-between; padding-block: var(--cg-s8); }
.cg-cta h2 { margin-bottom: var(--cg-s2); color: #fff; }
.cg-cta p { color: rgba(255,255,255,.87); margin: 0; max-width: 52ch; }
.cg-cta__actions { display: flex; flex-wrap: wrap; gap: var(--cg-s3); }

/* ==========================================================================
   12. PRODUCT CATEGORIES
   ========================================================================== */
.cg-cat { padding-block: var(--cg-s7); border-top: 1px solid var(--cg-border); scroll-margin-top: calc(var(--cg-header-h) + 24px); }
.cg-cat:first-of-type { border-top: 0; padding-top: 0; }
.cg-cat__head { display: flex; gap: var(--cg-s4); align-items: flex-start; margin-bottom: var(--cg-s5); }
.cg-cat__ico { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: var(--cg-r-md); background: var(--cg-primary-50); color: var(--cg-primary); }
.cg-cat__ico svg { width: 28px; height: 28px; }
.cg-cat__head h2 { font-size: var(--cg-fs-2xl); margin: 0 0 6px; }
.cg-cat__head p { color: var(--cg-muted); margin: 0; font-size: var(--cg-fs-sm); }
.cg-speclist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--cg-s3); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.cg-speclist li { display: flex; gap: var(--cg-s3); align-items: flex-start; background: var(--cg-bg-alt); border: 1px solid var(--cg-border); border-radius: var(--cg-r-md); padding: var(--cg-s4); }
.cg-speclist svg { width: 18px; height: 18px; flex: none; color: var(--cg-primary); margin-top: 4px; }
.cg-speclist b { display: block; font-family: var(--cg-font-heading); font-weight: 600; font-size: var(--cg-fs-sm); }
.cg-speclist span { color: var(--cg-muted); font-size: var(--cg-fs-xs); line-height: 1.5; display: block; }

/* `ul.` rather than `.cg-jump`: the base `ul:last-child { margin-bottom: 0 }`
   reset has the same weight plus a pseudo-class, so it was winning and
   collapsing this gap to nothing. */
ul.cg-jump {
  display: flex; flex-wrap: wrap; gap: var(--cg-s2);
  margin: 0 0 var(--cg-s8);
  padding: 0;
  list-style: none;
}
@media (max-width: 700px) { ul.cg-jump { margin-bottom: var(--cg-s7); } }
.cg-jump a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border-radius: var(--cg-r-pill);
  background: var(--cg-bg-alt); border: 1px solid var(--cg-border); color: var(--cg-fg);
  font-size: var(--cg-fs-xs); font-weight: 600; text-decoration: none;
  transition: background-color var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease);
}
.cg-jump a:hover { background: var(--cg-primary-50); border-color: var(--cg-primary-200); color: var(--cg-primary-700); }

/* ==========================================================================
   13. CONTACT
   ========================================================================== */
.cg-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cg-s8); align-items: start; }
@media (max-width: 900px) { .cg-contact { grid-template-columns: 1fr; gap: var(--cg-s7); } }

.cg-info { display: grid; gap: var(--cg-s4); margin: 0; padding: 0; list-style: none; }
.cg-info__item { display: flex; gap: var(--cg-s4); padding: var(--cg-s5); background: var(--cg-bg-alt); border: 1px solid var(--cg-border); border-radius: var(--cg-r-lg); }
.cg-info__ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--cg-r-md); background: #fff; border: 1px solid var(--cg-border); color: var(--cg-primary); }
.cg-info__ico svg { width: 22px; height: 22px; }
.cg-info__t { font-family: var(--cg-font-heading); font-weight: 600; font-size: var(--cg-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--cg-muted); margin: 0 0 4px; }
.cg-info__v { margin: 0; font-size: var(--cg-fs-base); font-weight: 600; line-height: 1.45; }
.cg-info__v a { text-decoration: none; color: var(--cg-fg); }
.cg-info__v a:hover { text-decoration: underline; color: var(--cg-primary-700); }
.cg-info small { display: block; color: var(--cg-muted); font-size: var(--cg-fs-xs); margin-top: 4px; font-weight: 400; }

.cg-map { border: 1px solid var(--cg-border); border-radius: var(--cg-r-lg); overflow: hidden; background: var(--cg-bg-alt); }
.cg-map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* Form */
.cg-form { background: #fff; border: 1px solid var(--cg-border); border-radius: var(--cg-r-xl); padding: var(--cg-s6); box-shadow: var(--cg-shadow-md); }
.cg-form__title { font-size: var(--cg-fs-xl); margin-bottom: var(--cg-s2); }
.cg-form__intro { font-size: var(--cg-fs-sm); color: var(--cg-muted); margin-bottom: var(--cg-s5); }
.cg-field { margin-bottom: var(--cg-s5); }
.cg-field label { display: block; font-family: var(--cg-font-heading); font-size: var(--cg-fs-sm); font-weight: 600; margin-bottom: 7px; }
.cg-req { color: var(--cg-danger); }
.cg-field__help { display: block; font-size: var(--cg-fs-xs); color: var(--cg-muted); margin-top: 6px; }
.cg-field input, .cg-field select, .cg-field textarea {
  width: 100%; min-height: 50px; padding: 12px 15px;
  font-family: inherit; font-size: var(--cg-fs-base); color: var(--cg-fg);
  background: var(--cg-bg-alt); border: 1.5px solid var(--cg-border); border-radius: var(--cg-r-md);
  transition: border-color var(--cg-dur) var(--cg-ease), background-color var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease);
}
.cg-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.cg-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A5D57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; }
.cg-field input:focus, .cg-field select:focus, .cg-field textarea:focus {
  background: #fff; border-color: var(--cg-primary); box-shadow: 0 0 0 3px rgba(11,110,79,.14); outline: none;
}
.cg-field input:focus-visible, .cg-field select:focus-visible, .cg-field textarea:focus-visible { outline: 3px solid var(--cg-accent); outline-offset: 2px; }
.cg-field.has-error input, .cg-field.has-error select, .cg-field.has-error textarea { border-color: var(--cg-danger); background: #FDF3F2; }
.cg-field__error { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--cg-danger); font-size: var(--cg-fs-xs); font-weight: 600; }
.cg-field__error svg { width: 15px; height: 15px; flex: none; }
.cg-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.cg-alert { display: flex; gap: var(--cg-s3); padding: var(--cg-s4) var(--cg-s5); border-radius: var(--cg-r-md); margin-bottom: var(--cg-s5); font-size: var(--cg-fs-sm); border: 1.5px solid; }
.cg-alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.cg-alert p { margin: 0; }
.cg-alert--ok  { background: var(--cg-primary-50); border-color: var(--cg-primary-200); color: #06412F; }
.cg-alert--err { background: #FDF3F2; border-color: #F0C4C1; color: #7A1A15; }
.cg-alert a { color: inherit; }
.cg-alert ul { margin: 6px 0 0; padding-left: 1.1em; }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.cg-footer { background: var(--cg-ink); color: var(--cg-on-dark-muted); font-size: var(--cg-fs-sm); }
.cg-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--cg-s7); padding-block: var(--cg-s8); }
@media (max-width: 900px) { .cg-footer__top { grid-template-columns: 1fr 1fr; gap: var(--cg-s6); } }
@media (max-width: 560px) { .cg-footer__top { grid-template-columns: 1fr; } }
.cg-footer h2 { font-size: var(--cg-fs-xs); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: var(--cg-s4); font-weight: 700; }
.cg-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.cg-footer a { color: var(--cg-on-dark-muted); text-decoration: none; }
.cg-footer a:hover { color: #fff; text-decoration: underline; }
.cg-footer__brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: var(--cg-s4); color: #fff; text-decoration: none; }
.cg-footer__brand .cg-brand__mark { width: 40px; height: 40px; }
.cg-footer__brand .cg-brand__name { color: #fff; }
.cg-footer__brand .cg-brand__sub { color: var(--cg-primary-200); }
.cg-footer__desc { max-width: 44ch; margin: 0 0 var(--cg-s5); color: var(--cg-on-dark-muted); }
.cg-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.cg-footer__contact svg { width: 17px; height: 17px; flex: none; color: var(--cg-primary-200); margin-top: 3px; }
.cg-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--cg-s3) var(--cg-s5); align-items: center; justify-content: space-between;
  padding-block: var(--cg-s5); border-top: 1px solid var(--cg-border-dark); font-size: var(--cg-fs-xs);
}
.cg-footer__legal { display: flex; flex-wrap: wrap; gap: var(--cg-s5); margin: 0; padding: 0; list-style: none; }
.cg-footer__bottom p { margin: 0; }

/* ==========================================================================
   15. PAGE HEADER (interior)
   ========================================================================== */
.cg-page-head { position: relative; background: var(--cg-ink); color: #fff; padding-block: var(--cg-s8); overflow: hidden; }
.cg-page-head__glow { position: absolute; inset: -50% auto auto -10%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(18,162,119,.24), transparent 62%); pointer-events: none; }
.cg-page-head h1 { margin-bottom: var(--cg-s4); position: relative; }
.cg-page-head p { color: var(--cg-on-dark-muted); font-size: var(--cg-fs-lg); max-width: 62ch; margin: 0; position: relative; }
.cg-crumbs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; margin: 0 0 var(--cg-s4); padding: 0; font-size: var(--cg-fs-xs); color: var(--cg-on-dark-muted); }
.cg-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.cg-crumbs a { color: var(--cg-primary-200); text-decoration: none; }
.cg-crumbs a:hover { text-decoration: underline; }
.cg-crumbs svg { width: 14px; height: 14px; opacity: .55; }

/* ==========================================================================
   16. EDITOR CONTENT
   ========================================================================== */
.cg-prose { font-size: var(--cg-fs-base); }
.cg-prose h2 { font-size: var(--cg-fs-2xl); margin-top: var(--cg-s7); }
.cg-prose h3 { margin-top: var(--cg-s6); }
.cg-prose > *:first-child { margin-top: 0; }
.cg-prose img { border-radius: var(--cg-r-lg); }
.cg-prose blockquote { margin: var(--cg-s6) 0; padding: var(--cg-s5) var(--cg-s6); border-left: 3px solid var(--cg-primary); background: var(--cg-bg-alt); border-radius: 0 var(--cg-r-md) var(--cg-r-md) 0; }
.cg-prose table { width: 100%; border-collapse: collapse; }
.cg-prose th, .cg-prose td { border: 1px solid var(--cg-border); padding: 10px 14px; text-align: left; }
.cg-prose th { background: var(--cg-bg-alt); font-family: var(--cg-font-heading); }
.cg-prose .wp-block-table, .cg-table-wrap { overflow-x: auto; }
.cg-prose ul, .cg-prose ol { margin-bottom: var(--cg-s4); }
.cg-prose li { margin-bottom: 6px; }

/* Long-form measure (posts, legal documents).
   The marketing pages carry short paragraphs, where the full 800px column is
   fine. Sustained reading is not: at 17px that column runs to ~110 characters
   per line, well past the comfortable 65-75. Larger type on a narrower column
   brings it to ~75 while staying easier to read, not harder. */
.cg-prose--long {
  max-width: 36rem;
  margin-inline: auto;
  font-size: 1.1875rem;
  line-height: 1.7;
}
.cg-prose--long h2 { font-size: var(--cg-fs-xl); }
.cg-prose--long h3 { font-size: var(--cg-fs-lg); }
/* Figures and tables may use the full column width. */
.cg-prose--long > figure,
.cg-prose--long > img,
.cg-prose--long > .wp-block-image,
.cg-prose--long > .wp-block-table,
.cg-prose--long > .cg-table-wrap {
  max-width: min(100vw - 3rem, 47rem);
  margin-inline: calc(50% - min(50vw - 1.5rem, 23.5rem));
}

/* ==========================================================================
   17. POSTS: meta, cover, tags, adjacent nav, search, pagination
   ========================================================================== */
.cg-post-meta {
  position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0; font-size: var(--cg-fs-sm); color: var(--cg-on-dark-muted);
}
.cg-post-meta a { color: var(--cg-primary-200); text-decoration: none; }
.cg-post-meta a:hover { text-decoration: underline; }

.cg-post-cover { margin-top: calc(var(--cg-s7) * -1); position: relative; z-index: 1; }
.cg-post-cover img { width: 100%; border-radius: var(--cg-r-xl); box-shadow: var(--cg-shadow-lg); }

.cg-post-tags { margin-top: var(--cg-s7); display: flex; flex-wrap: wrap; gap: var(--cg-s2); }
.cg-post-tags a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px;
  border-radius: var(--cg-r-pill); background: var(--cg-bg-alt); border: 1px solid var(--cg-border);
  color: var(--cg-muted); font-size: var(--cg-fs-xs); font-weight: 600; text-decoration: none;
}
.cg-post-tags a:hover { border-color: var(--cg-primary-200); color: var(--cg-primary-700); }

.cg-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cg-s4); }
@media (max-width: 640px) { .cg-postnav { grid-template-columns: 1fr; } }
.cg-postnav__item {
  display: flex; flex-direction: column; gap: 5px; padding: var(--cg-s5);
  background: #fff; border: 1px solid var(--cg-border); border-radius: var(--cg-r-lg);
  text-decoration: none; color: var(--cg-fg);
  transition: border-color var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease);
}
.cg-postnav__item:hover { border-color: var(--cg-primary-200); box-shadow: var(--cg-shadow-md); color: var(--cg-fg); }
.cg-postnav__item--next { text-align: right; grid-column: 2; }
@media (max-width: 640px) { .cg-postnav__item--next { grid-column: 1; text-align: left; } }
.cg-postnav__dir { font-size: var(--cg-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cg-primary); }
.cg-postnav__title { font-family: var(--cg-font-heading); font-weight: 600; font-size: var(--cg-fs-base); line-height: 1.3; }

.cg-search__row { display: flex; gap: var(--cg-s3); }
.cg-search__input {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 12px 16px;
  font-family: inherit; font-size: var(--cg-fs-base); color: var(--cg-fg);
  background: var(--cg-bg-alt); border: 1.5px solid var(--cg-border); border-radius: var(--cg-r-pill);
  transition: border-color var(--cg-dur) var(--cg-ease), background-color var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease);
}
.cg-search__input:focus { background: #fff; border-color: var(--cg-primary); box-shadow: 0 0 0 3px rgba(11,110,79,.14); outline: none; }
.cg-search__input:focus-visible { outline: 3px solid var(--cg-accent); outline-offset: 2px; }
@media (max-width: 480px) {
  .cg-search__row { flex-direction: column; }
  .cg-search__row .cg-btn { width: 100%; }
}

.cg-pagination { margin-top: var(--cg-s7); }
.cg-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--cg-s2); justify-content: center; }
.cg-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 46px; padding: 0 14px; border-radius: var(--cg-r-pill);
  background: var(--cg-bg-alt); border: 1px solid var(--cg-border);
  font-family: var(--cg-font-heading); font-weight: 600; font-size: var(--cg-fs-sm);
  color: var(--cg-fg); text-decoration: none;
  transition: background-color var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease);
}
.cg-pagination .page-numbers:hover { background: var(--cg-primary-50); border-color: var(--cg-primary-200); color: var(--cg-primary-700); }
.cg-pagination .page-numbers.current { background: var(--cg-primary); border-color: var(--cg-primary); color: #fff; }
.cg-pagination .page-numbers.dots { background: transparent; border-color: transparent; }

/* ==========================================================================
   18. FAQ
   ========================================================================== */
.cg-faq { display: grid; gap: var(--cg-s3); }
.cg-faq details { border: 1px solid var(--cg-border); border-radius: var(--cg-r-md); background: #fff; overflow: hidden; }
.cg-faq summary {
  cursor: pointer; list-style: none; padding: var(--cg-s5); min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--cg-s4);
  font-family: var(--cg-font-heading); font-weight: 600; font-size: var(--cg-fs-base);
  transition: background-color var(--cg-dur) var(--cg-ease);
}
.cg-faq summary::-webkit-details-marker { display: none; }
.cg-faq summary:hover { background: var(--cg-bg-alt); }
.cg-faq summary svg { width: 20px; height: 20px; flex: none; color: var(--cg-primary); transition: transform var(--cg-dur) var(--cg-ease); }
.cg-faq details[open] summary svg { transform: rotate(45deg); }
.cg-faq__body { padding: 0 var(--cg-s5) var(--cg-s5); color: var(--cg-muted); font-size: var(--cg-fs-sm); }
.cg-faq__body p { margin-bottom: var(--cg-s3); }

/* ==========================================================================
   19. TOUCH TARGETS
   On a touch device every interactive element gets the 44px minimum. On a
   mouse the denser inline lists stay compact — a 44px tall footer link would
   double the footer height for no benefit to a cursor.
   ========================================================================== */
.cg-lang__btn { min-height: 44px; }
.cg-chip { min-height: 40px; }

@media (pointer: coarse) {
  .cg-topbar a,
  .cg-footer a,
  .cg-crumbs a,
  .cg-card h3 a,
  .cg-link-arrow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .cg-footer ul { gap: 4px; }
  .cg-chip { min-height: 44px; padding-inline: 15px; }
  .cg-faq summary { min-height: 60px; }
  /* Card links cover the whole card, so the card itself is the target. */
  .cg-card--link h3 a { min-height: 0; }
}

/* ==========================================================================
   20. MOTION
   ========================================================================== */
/* Scoped to .cg-js so that if the script never runs — blocked, failed, or a
   crawler with no JS — every section is simply visible rather than blank. */
.cg-js .cg-reveal { opacity: 0; transform: translateY(18px); }
.cg-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--cg-dur-slow) var(--cg-ease), transform var(--cg-dur-slow) var(--cg-ease);
}
.cg-stagger > .cg-reveal.is-in:nth-child(2) { transition-delay: 70ms; }
.cg-stagger > .cg-reveal.is-in:nth-child(3) { transition-delay: 140ms; }
.cg-stagger > .cg-reveal.is-in:nth-child(4) { transition-delay: 210ms; }
.cg-stagger > .cg-reveal.is-in:nth-child(5) { transition-delay: 260ms; }
.cg-stagger > .cg-reveal.is-in:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0ms !important;
  }
  .cg-js .cg-reveal { opacity: 1 !important; transform: none !important; }
  .cg-btn:hover, .cg-card--link:hover { transform: none; }
}

/* ==========================================================================
   21. PRINT
   ========================================================================== */
@media print {
  .cg-header, .cg-topbar, .cg-footer, .cg-cta, .cg-burger, .cg-lang, .skip-link { display: none !important; }
  body { color: #000; background: #fff; }
  .cg-hero, .cg-page-head, .cg-dark { background: #fff !important; color: #000 !important; }
  .cg-hero h1, .cg-page-head h1, .cg-dark h2 { color: #000 !important; }
  .cg-hero__glow, .cg-hero__arcs, .cg-page-head__glow { display: none; }
}