/* ORGX Proposition Sites — Orbicul/ORGX brand system
   Dark, premium SaaS-dashboard aesthetic, matching orbicul.com tokens:
   bg #060A0F, surface #0E141B, brand font Raleway, accent acid-green #95C11F */
/* Font itself is enqueued properly in functions.php (wp_enqueue_style,
   as a real <link>, not @import — @import blocks the CSS parser from
   fetching anything after it until the imported file has downloaded,
   which is exactly the kind of render-blocking Core Web Vitals
   penalises). Do not re-add an @import here. */

:root{
  --bg:#060A0F;
  --surface:#0E141B;
  --surface-raised:#131B24;
  --border:#1E2A35;
  --text:#F2F5F7;
  --muted:#8B96A3;
  --accent:#95C11F;
  --accent-strong:#B4E23A;
  --accent-ink:#06110A;
  --radius:10px;
  --measure:42rem;
  --wide:72rem;
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Raleway',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Raleway',system-ui,sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
  color:var(--text);
}
h1{ font-size:clamp(2.1rem,4.4vw,3.1rem); font-weight:800; }
h2{ font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:700; }
h3{ font-size:1.15rem; font-weight:600; }
p{ margin:0 0 1.1em; color:var(--text); }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
ul,ol{ padding-left:1.3em; margin:0 0 1.1em; }
li{ margin-bottom:0.5em; }

.wrap{ max-width:var(--wide); margin:0 auto; padding:0 1.5rem; }
.measure{ max-width:var(--measure); }

/* ---- Header ---- */
.site-header{
  border-bottom:1px solid var(--border);
  padding:1.5rem 0;
  background:var(--bg);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{
  font-family:'Raleway',sans-serif; font-weight:800; font-size:1.05rem; color:var(--text);
  text-decoration:none; display:flex; align-items:center; gap:.6rem; letter-spacing:.01em;
  min-width:0;
}
/* Phase 3: the ORGX mark is now the endorsement, shown deliberately
   small (was 56px) so the property name — which now comes first in the
   markup too — reads as the site's own identity, with ORGX as "operated
   by", not the other way around. No separate compact "X"-only asset
   exists to crop to (orgx-logo.webp is one combined wordmark+mark
   image, and this environment has no image-editing tooling to make
   one) — shrinking the existing asset achieves the same hierarchy
   without inventing an unofficial icon. */
.brand-mark{ display:block; height:26px; width:auto; flex-shrink:0; opacity:.92; }
/* The specialist property's own name — the header's PRIMARY visible
   identity (brief Phase 3: "property first, ORGX endorsement second").
   `headerName` (content/{slug}/{lang}.php) is a short, natural,
   per-language name written specifically for this — e.g. "Target State"
   rather than the full "Strategic Target State Definition" used
   everywhere else (breadcrumb, footer, schema, SEO title). Because the
   header name is already deliberately short (longest across the
   network is ~37 characters), the max-width/ellipsis below is a safety
   net for an unexpected edge case, not the mechanism doing the work —
   it should never actually trigger at normal desktop/tablet widths.
   Full formal name is always in the `title` attribute for a hover, and
   unaffected everywhere else on the page regardless. */
.brand-property{
  font-family:'Raleway',sans-serif; font-weight:700; font-size:clamp(1rem,1.7vw,1.2rem);
  color:var(--text); line-height:1.2; letter-spacing:0;
  min-width:0; max-width:min(60vw,32rem);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-cta{
  font-size:clamp(.78rem,2.6vw,.92rem); font-weight:600; color:var(--bg); text-decoration:none;
  background:var(--accent); border:1px solid var(--accent); padding:.55rem 1.1rem; border-radius:var(--radius);
  white-space:nowrap; transition:background .15s ease, border-color .15s ease, transform .15s ease;
  transform-origin:center;
}
.header-cta:hover{ background:var(--accent-strong); border-color:var(--accent-strong); transform:scale(1.03); }

/* ---- Hero ---- */
.hero{ background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%); border-bottom:1px solid var(--border); }
.hero-inner{ padding-top:4.5rem; padding-bottom:4rem; max-width:44rem; }
.eyebrow{ font-size:.85rem; color:var(--accent); font-weight:700; margin-bottom:1rem; letter-spacing:.02em; }
.hero h1{ margin-bottom:0.55em; }
.hero .subhead{ font-size:1.15rem; color:var(--muted); max-width:38rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.btn{
  display:inline-block; font-weight:600; font-size:.98rem; padding:.85rem 1.5rem;
  text-decoration:none; border:1px solid var(--border); border-radius:var(--radius);
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
  transform-origin:center;
}
.btn:hover{ transform:scale(1.03); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }
/* Resting state is what used to be the hover state — a plain grey
   outline read as too quiet for a Quick Scan CTA sitting next to a solid
   primary button. Hover now goes further (solid accent fill, dark text),
   matching .btn-primary's own resting look, so the two buttons still
   read as "primary vs. secondary" even though secondary is bolder now. */
.btn-secondary{ background:transparent; color:var(--accent); border-color:var(--accent); }
.btn-secondary:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* ---- Section rhythm ---- */
section{ padding:3.6rem 0; border-bottom:1px solid var(--border); }
section:last-of-type{ border-bottom:none; }
.section-label{
  font-size:.8rem; font-weight:700; color:var(--accent); margin-bottom:.6rem; letter-spacing:.02em;
}
.section-head{ max-width:40rem; margin-bottom:2rem; }
.section-head p{ color:var(--muted); font-size:1.05rem; }

/* ---- Problem list ---- */
.problem-list{ list-style:none; padding:0; margin:0; max-width:44rem; }
.problem-list li{
  padding:1.1rem 0; border-top:1px solid var(--border); margin:0; color:var(--text);
}
.problem-list li:last-child{ border-bottom:1px solid var(--border); }

/* ---- Solution blocks ---- */
.solution-block{ max-width:44rem; margin-bottom:1.8rem; }
.solution-block h3{ margin-bottom:.4rem; color:var(--accent-strong); }
.solution-block p{ color:var(--text); }
.solution-block ul{ margin-top:.6rem; }

/* ---- Cards ---- */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.card{
  background:var(--surface); padding:1.8rem 1.6rem;
  transition:background .15s ease;
}
.card:hover{ background:var(--surface-raised); }
.card .kicker{ font-size:.78rem; font-weight:700; color:var(--accent); margin-bottom:.6rem; letter-spacing:.02em; }
.card h3{ font-size:1.08rem; margin-bottom:.5rem; color:var(--text); }
.card p{ color:var(--muted); font-size:.96rem; margin:0; }

/* ---- FAQ ---- */
.faq-list{ max-width:44rem; }
.faq-item{
  border-top:1px solid var(--border); padding:1.1rem 0;
}
.faq-item:last-child{ border-bottom:1px solid var(--border); }
.faq-item summary{
  cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; color:var(--text);
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:'Raleway',sans-serif; font-weight:700; font-size:1.3rem; color:var(--accent); flex-shrink:0;
}
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item p{ margin:.8rem 0 0; color:var(--muted); max-width:40rem; }

/* ---- Cluster links ---- */
.cluster-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.cluster-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; text-decoration:none; color:var(--text); display:block;
  background:var(--surface); transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.cluster-card:hover{ border-color:var(--accent); transform:translateY(-2px); background:var(--surface-raised); }
.cluster-card h3{ font-size:1rem; margin-bottom:.4rem; color:var(--text); }
.cluster-card span{ font-size:.85rem; color:var(--accent); font-weight:700; }
.cluster-card p{ font-size:.92rem; color:var(--muted); margin:.4rem 0 .8rem; }

/* ---- Lead capture ---- */
.lead-block{ background:var(--surface); border-bottom:none; border-top:1px solid var(--border); }
.lead-block .section-label{ color:var(--accent); }
.lead-block h2{ color:var(--text); }
.lead-block p{ color:var(--muted); }
.lead-form{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; max-width:36rem; }
.lead-form .field{ flex:1 1 200px; }
.lead-form input{
  width:100%; padding:.85rem 1rem; border:1px solid var(--border); background:var(--bg); border-radius:var(--radius);
  color:var(--text); font-family:'Raleway',sans-serif; font-size:.95rem;
}
.lead-form input::placeholder{ color:var(--muted); }
.lead-form .btn-primary{ flex:0 0 auto; }

/* ---- Footer ---- */
footer.site-footer{ padding:2.2rem 0; background:var(--bg); }
footer.site-footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
footer.site-footer p{ margin:0; font-size:.85rem; color:var(--muted); }
footer.site-footer nav a{ font-size:.85rem; color:var(--muted); margin-left:1.2rem; text-decoration:none; }
footer.site-footer nav a:hover{ color:var(--accent); }

@media (max-width:640px){
  .hero-inner{ padding-top:3rem; padding-bottom:2.5rem; }
  section{ padding:2.6rem 0; }
  footer.site-footer .wrap{ flex-direction:column; }
  footer.site-footer nav a{ margin-left:0; margin-right:1rem; }

  /* The header previously crammed brand + language switcher + CTA button
     onto one unwrapping flex row — on narrow phones the CTA (translated
     text can run long, e.g. French/German) had nowhere to go but wrap
     into a tall, cramped, visibly misaligned stack. Splitting into two
     deliberate rows (brand row, then everything else) fixes that without
     touching any copy. */
  .site-header .wrap{ flex-wrap:wrap; row-gap:.75rem; }
  .brand{ flex:1 1 100%; }
  .header-right{ flex:1 1 100%; flex-wrap:wrap; row-gap:.6rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}