/* =====================================================================
   CITIHO — Site styles (homepage)
   Built on the Citiho Design System: Quicksand + DM Sans, graphite + orange,
   diagonal-wedge signature, ascending-bar motif.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --citiho-orange: #EF9924;
  --citiho-orange-600: #D9851A;
  --citiho-orange-700: #B86E12;
  --citiho-orange-300: #F5B85C;
  --citiho-orange-100: #FBE6C6;
  --citiho-orange-50: #FDF4E6;
  --citiho-graphite: #4E4E4E;

  --gray-950:#1F1E1D; --gray-900:#2B2A28; --gray-800:#3A3937; --gray-700:#4E4E4E;
  --gray-600:#6B6A67; --gray-500:#8A8884; --gray-400:#ABA9A4; --gray-300:#CFCCC6;
  --gray-200:#E6E3DE; --gray-150:#EEEBE6; --gray-100:#F4F2EE; --gray-50:#FAF9F6; --white:#fff;

  --fg-1:var(--gray-900); --fg-2:var(--gray-700); --fg-3:var(--gray-600); --fg-4:var(--gray-500);
  --fg-accent:var(--citiho-orange-700);
  --bg-1:var(--white); --bg-2:var(--gray-50); --bg-3:var(--gray-100);
  --border-1:var(--gray-200); --border-2:var(--gray-300);
  --focus-ring:rgba(239,153,36,.45);

  --font-display:'Quicksand','Segoe UI',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(31,30,29,.06);
  --shadow-sm:0 1px 3px rgba(31,30,29,.08),0 1px 2px rgba(31,30,29,.05);
  --shadow-md:0 4px 12px rgba(31,30,29,.08),0 2px 4px rgba(31,30,29,.05);
  --shadow-lg:0 12px 32px rgba(31,30,29,.12),0 4px 8px rgba(31,30,29,.06);
  --shadow-accent:0 6px 18px rgba(239,153,36,.30);

  --wrap:1160px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg-1); color:var(--fg-2);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.section { padding:104px 0; }
.section--tight { padding:72px 0; }

/* ---------- Type ---------- */
h1,h2,h3 { font-family:var(--font-display); color:var(--fg-1); margin:0; letter-spacing:-.01em; }
.display { font-size:clamp(40px,5.4vw,66px); font-weight:700; line-height:1.03; }
.h2 { font-size:clamp(30px,3.6vw,44px); font-weight:700; line-height:1.08; }
.h3 { font-size:22px; font-weight:600; line-height:1.25; }
.lead { font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--fg-2); }
.accent { color:var(--citiho-orange); }
.overline {
  font-family:var(--font-body); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-accent);
  display:inline-flex; align-items:center; gap:10px;
}
.overline::before { content:""; width:26px; height:3px; background:var(--citiho-orange); border-radius:3px; }
.overline--center { justify-content:center; }
.section-head { max-width:620px; margin:0 auto 56px; text-align:center; }
.section-head .overline { margin-bottom:18px; }
.section-head .lead { margin-top:16px; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:15.5px;
  padding:13px 24px; border-radius:var(--r-md); border:1.5px solid transparent;
  transition:background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease);
}
.btn svg { width:18px; height:18px; }
.btn--primary { background:var(--citiho-orange); color:#fff; box-shadow:var(--shadow-accent); }
.btn--primary:hover { background:var(--citiho-orange-600); }
.btn--primary:active { transform:scale(.98); box-shadow:var(--shadow-sm); }
.btn--ghost { background:transparent; color:var(--fg-1); border-color:var(--border-2); }
.btn--ghost:hover { background:var(--bg-3); border-color:var(--gray-400); }
.btn--light { background:#fff; color:var(--gray-900); }
.btn--light:hover { background:var(--gray-100); }
.btn--ondark { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn--ondark:hover { background:rgba(255,255,255,.1); }
:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }

/* ---------- Header ---------- */
.header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-1);
}
.header__inner { display:flex; align-items:center; gap:32px; height:84px; }
.header__logo img { height:44px; }
.nav { margin-left:auto; display:flex; align-items:center; gap:30px; }
.nav a { font-weight:500; font-size:15px; color:var(--fg-2); transition:color .15s; }
.nav a:hover { color:var(--citiho-orange-700); }
.nav__cta { margin-left:6px; }
.burger { display:none; background:none; border:none; cursor:pointer; color:var(--fg-1); }

/* ---------- Hero ---------- */
.hero { position:relative; background:var(--gray-950); color:#fff; overflow:hidden; }
.hero__wedge {
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(115deg, var(--gray-950) 0%, var(--gray-900) 46%, transparent 46.2%),
    linear-gradient(115deg, transparent 44%, var(--citiho-orange) 44.2%, var(--citiho-orange-600) 100%);
}
.hero__photo {
  position:absolute; top:0; right:0; bottom:0; width:48%; z-index:0;
  background-size:cover; background-position:center;
  clip-path:polygon(22% 0, 100% 0, 100% 100%, 4% 100%);
}
.hero__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, var(--gray-950) 0%, rgba(31,30,29,.2) 40%, transparent 70%); }
.hero__graphic { background:none; }
.hero__graphic::after { display:none; }
.hero__mark { position:absolute; top:50%; left:58%; transform:translate(-50%,-50%); width:300px; height:auto; opacity:.9; filter:drop-shadow(0 10px 30px rgba(31,30,29,.25)); }
.hero__picto { position:absolute; right:-60px; bottom:-80px; width:420px; opacity:.06; z-index:0; }
.hero__inner { position:relative; z-index:2; padding:96px 0 130px; max-width:660px; }
.hero .overline { color:var(--citiho-orange-300); }
.hero .overline::before { background:var(--citiho-orange-300); }
.hero .display { color:#fff; margin:22px 0 0; }
.hero__sub { font-size:19px; line-height:1.6; color:rgba(255,255,255,.82); margin:22px 0 0; max-width:30em; }
.hero__cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }
.hero__meta { display:flex; gap:26px; margin-top:40px; flex-wrap:wrap; }
.hero__meta-item { display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,.78); }
.hero__meta-item svg { width:18px; height:18px; color:var(--citiho-orange-300); }

/* phase strip overlapping hero */
.phasestrip {
  position:relative; z-index:5; margin-top:-66px;
}
.phasestrip__card {
  background:#fff; border:1px solid var(--border-1); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); display:grid; grid-template-columns:repeat(3,1fr);
  overflow:hidden;
}
.phasestrip__item { padding:26px 28px; display:flex; gap:16px; position:relative; }
.phasestrip__item + .phasestrip__item { border-left:1px solid var(--border-1); }
.phasestrip__no {
  font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--citiho-orange);
  font-variant-numeric:tabular-nums; line-height:1;
}
.phasestrip__t { display:block; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--fg-1); margin-bottom:4px; }
.phasestrip__d { display:block; font-size:13.5px; color:var(--fg-3); line-height:1.45; }

/* ---------- Mission ---------- */
.mission { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.principles { display:grid; gap:14px; }
.principle { display:flex; gap:16px; align-items:flex-start; background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-xs); transition:box-shadow .18s var(--ease), transform .18s var(--ease); }
.principle:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.principle__icon { width:46px; height:46px; border-radius:12px; background:var(--citiho-orange-50); display:grid; place-items:center; color:var(--citiho-orange-700); flex:0 0 auto; }
.principle__icon svg { width:22px; height:22px; }
.principle__t { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--fg-1); margin-bottom:3px; }
.principle__d { font-size:14px; color:var(--fg-3); line-height:1.5; }

/* ---------- Démarche / phases ---------- */
.phase { display:grid; grid-template-columns:88px 1fr; gap:34px; align-items:start; }
.phase + .phase { margin-top:72px; }
.phase__rail { position:relative; text-align:center; }
.phase__num {
  font-family:var(--font-display); font-weight:700; font-size:48px; color:var(--citiho-orange);
  line-height:1; font-variant-numeric:tabular-nums;
}
.phase__line { width:2px; flex:1; background:var(--border-2); margin:14px auto 0; min-height:60px; }
.phase__head { margin-bottom:22px; }
.phase__kicker { font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4); margin-bottom:8px; }
.phase__cards { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }

.offer {
  background:#fff; border:1px solid var(--border-1); border-radius:var(--r-lg);
  padding:26px 24px 24px; box-shadow:var(--shadow-sm); position:relative;
  clip-path:polygon(0 0,100% 0,100% 88%,93% 100%,0 100%);
  transition:box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.offer:hover { box-shadow:var(--shadow-md); border-color:var(--border-2); transform:translateY(-4px); }
.offer__icon {
  width:48px; height:48px; border-radius:12px; background:var(--citiho-orange-50);
  display:grid; place-items:center; color:var(--citiho-orange-700); margin-bottom:16px;
}
.offer__icon svg { width:24px; height:24px; }
.offer__t { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--fg-1); margin-bottom:8px; line-height:1.2; }
.offer__d { font-size:14px; color:var(--fg-3); line-height:1.5; }
.offer__free {
  display:inline-block; margin-top:14px; font-size:12px; font-weight:600;
  color:var(--citiho-orange-700); background:var(--citiho-orange-50);
  border:1px solid var(--citiho-orange-100); border-radius:var(--r-pill); padding:3px 11px;
}

/* ---------- Enquête band ---------- */
.survey { background:#fff; }
.survey__card {
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--bg-2); border:1px solid var(--border-1); box-shadow:var(--shadow-md);
  padding:54px 56px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.survey__cut { position:absolute; inset:0; background:var(--citiho-orange-50); clip-path:polygon(54% 0,100% 0,100% 100%,44% 100%); }
.survey__cut2 { position:absolute; inset:0; background:var(--citiho-orange-100); clip-path:polygon(60% 0,64% 0,50% 100%,46% 100%); opacity:.6; }
.survey__body { position:relative; z-index:2; }
.survey__body h2 { margin:16px 0 14px; }
.survey__body p { color:var(--fg-2); margin:0 0 26px; }
.survey__formules { position:relative; z-index:2; display:grid; gap:14px; }
.formule {
  background:#fff; border:1px solid var(--border-1);
  border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm);
}
.formule__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:10px; }
.formule__name { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--fg-1); }
.formule__tag { font-size:12px; font-weight:600; padding:3px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.formule__tag--free { background:var(--citiho-orange); color:#fff; }
.formule__tag--paid { background:var(--bg-3); color:var(--fg-2); border:1px solid var(--border-1); }
.formule__d { font-size:13.5px; color:var(--fg-3); line-height:1.5; }

/* ---------- Réseau ---------- */
.network { background:var(--bg-2); position:relative; overflow:hidden; }
.network__picto { position:absolute; left:-90px; top:-60px; width:380px; opacity:.045; }
.network .overline::before { background:var(--citiho-orange); }
.orbit { position:relative; height:360px; max-width:760px; margin:10px auto 0; }
.orbit__center {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:150px; height:150px; border-radius:50%;
  background:var(--citiho-orange); color:#fff; display:grid; place-items:center; text-align:center;
  box-shadow:var(--shadow-accent); z-index:3;
}
.orbit__center b { font-family:var(--font-display); font-weight:700; font-size:26px; display:block; }
.orbit__center span { font-size:12.5px; opacity:.92; }
.orbit__ring { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px dashed var(--border-2); border-radius:50%; }
.orbit__ring--1 { width:300px; height:300px; }
.orbit__ring--2 { width:440px; height:300px; }
.node {
  position:absolute; transform:translate(-50%,-50%);
  background:#fff; border:1px solid var(--border-1);
  border-radius:var(--r-pill); padding:9px 16px; font-size:13.5px; font-weight:500; color:var(--fg-1);
  display:flex; align-items:center; gap:8px; white-space:nowrap; box-shadow:var(--shadow-sm);
  transition:box-shadow .18s, border-color .18s;
}
.node:hover { box-shadow:var(--shadow-md); border-color:var(--citiho-orange); }
.node svg { width:15px; height:15px; color:var(--citiho-orange); }
.network__note { text-align:center; font-size:14.5px; color:var(--fg-3); max-width:600px; margin:44px auto 0; line-height:1.6; }
.network__note b { color:var(--fg-2); font-weight:600; }

/* ---------- Founder ---------- */
.founder { background:#fff; }
.founder__grid { display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:center; }
.founder__photo { position:relative; }
.founder__photo img { border-radius:var(--r-xl); box-shadow:var(--shadow-md); filter:saturate(1.06) brightness(.92) sepia(.12); }
.founder__photo::before {
  content:""; position:absolute; left:-16px; bottom:-16px; width:120px; height:120px;
  background:var(--citiho-orange); border-radius:var(--r-lg); z-index:-1; transform:rotate(-6deg);
}
.founder__role { color:var(--fg-accent); font-weight:600; font-size:14px; letter-spacing:.04em; }
.founder__name { font-size:34px; font-weight:700; margin:6px 0 18px; }
.founder__bio p { margin:0 0 14px; font-size:15.5px; }
.founder__credits { display:flex; gap:24px; flex-wrap:wrap; margin-top:22px; }
.founder__credit { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--fg-3); }
.founder__credit svg { width:18px; height:18px; color:var(--citiho-orange); }

/* ---------- References ---------- */
.refs { text-align:center; background:var(--bg-2); }
.refs__label { font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4); margin-bottom:34px; }
.refs__grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:30px 52px; max-width:980px; margin:0 auto; }
.refs__logo { display:inline-flex; align-items:center; justify-content:center; }
.refs__logo img {
  width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.62; mix-blend-mode:multiply;
  transition:filter .2s var(--ease), opacity .2s var(--ease);
}
.refs__logo img:hover { filter:none; opacity:1; }
.refs__logo--sytral img { height:34px; }
.refs__logo--monaco img { height:42px; }
.refs__logo--cnr img    { height:30px; }
.refs__logo--cns img    { height:38px; }
.refs__logo--raptdev img{ height:26px; }
@media (max-width:600px){
  .refs__grid { gap:24px 36px; }
  .refs__logo--sytral img { height:28px; }
  .refs__logo--monaco img { height:34px; }
  .refs__logo--cnr img    { height:24px; }
  .refs__logo--cns img    { height:30px; }
  .refs__logo--raptdev img{ height:22px; }
}

/* ---------- Contact ---------- */
.contact { background:#fff; position:relative; overflow:hidden; }
.contact__picto { position:absolute; right:-80px; bottom:-90px; width:360px; opacity:.04; }
.contact__grid { display:grid; grid-template-columns:1fr .85fr; gap:56px; position:relative; z-index:2; }
.contact h2 { margin:16px 0 14px; }
.contact__intro { color:var(--fg-2); margin:0 0 30px; max-width:34em; }

.intent { display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.intent__btn {
  flex:1; min-width:180px; cursor:pointer; text-align:left;
  background:var(--bg-2); border:1.5px solid var(--border-1);
  border-radius:var(--r-md); padding:16px 18px; color:var(--fg-1);
  font-family:var(--font-body); transition:border-color .16s, background .16s;
}
.intent__btn:hover { border-color:var(--border-2); }
.intent__btn.is-active { border-color:var(--citiho-orange); background:var(--citiho-orange-50); }
.intent__btn b { display:block; font-family:var(--font-display); font-weight:600; font-size:16px; margin-bottom:3px; color:var(--fg-1); }
.intent__btn span { font-size:13px; color:var(--fg-3); }

.form { display:grid; grid-template-columns:1fr 1fr; gap:16px 16px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field--full { grid-column:1 / -1; }
.field label { font-size:13.5px; font-weight:500; color:var(--fg-2); }
.field label .req { color:var(--citiho-orange-700); }
.field input, .field textarea {
  font-family:var(--font-body); font-size:15px; color:var(--fg-1);
  background:#fff; border:1.5px solid var(--border-2);
  border-radius:var(--r-md); padding:12px 14px; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder { color:var(--fg-4); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--citiho-orange); box-shadow:0 0 0 3px var(--focus-ring); }
.field textarea { resize:vertical; min-height:110px; }
.field.invalid input, .field.invalid textarea { border-color:var(--danger); }
.field__err { font-size:12.5px; color:var(--danger); display:none; }
.field.invalid .field__err { display:block; }
.form__submit { grid-column:1/-1; display:flex; align-items:center; gap:18px; margin-top:6px; flex-wrap:wrap; }
.form__note { font-size:12.5px; color:var(--fg-4); }
.form__success {
  display:none; grid-column:1/-1; align-items:center; gap:14px;
  background:var(--success-bg); border:1px solid rgba(46,139,87,.4);
  border-radius:var(--r-md); padding:18px 20px; color:#1d6b43;
}
.form__success svg { width:24px; height:24px; color:var(--success); flex:0 0 auto; }
.form.sent .form__success { display:flex; }

.contact__side { display:flex; flex-direction:column; gap:22px; }
.contact__map { border-radius:var(--r-lg); overflow:hidden; height:200px; background-size:cover; background-position:center; border:1px solid var(--border-1); }
.contact__info { display:grid; gap:16px; }
.contact__info-item { display:flex; align-items:flex-start; gap:13px; }
.contact__info-item svg { width:20px; height:20px; color:var(--citiho-orange); flex:0 0 auto; margin-top:2px; }
.contact__info-item b { display:block; font-family:var(--font-display); font-weight:600; color:var(--fg-1); font-size:15px; margin-bottom:2px; }
.contact__info-item span { font-size:14px; color:var(--fg-3); }

/* ---------- Footer ---------- */
.footer { background:var(--gray-900); color:rgba(255,255,255,.7); padding:60px 0 34px; }
.footer__top { display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer__logo img { height:64px; margin-bottom:18px; }
.footer__tag { font-size:14px; line-height:1.6; max-width:30em; color:rgba(255,255,255,.6); }
.footer__col h4 { font-family:var(--font-display); font-weight:600; font-size:15px; color:#fff; margin:0 0 16px; }
.footer__col a { display:block; font-size:14.5px; color:rgba(255,255,255,.68); margin-bottom:11px; transition:color .15s; }
.footer__col a:hover { color:var(--citiho-orange-300); }
.footer__social { display:flex; flex-direction:column; gap:14px; }
.footer__social-link {
  display:inline-flex; align-items:center; gap:10px; font-size:14.5px; color:rgba(255,255,255,.68);
}
.footer__in {
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08);
  display:grid; place-items:center; transition:background .16s;
}
.footer__in:hover { background:var(--citiho-orange); }
.footer__in svg { width:20px; height:20px; color:#fff; }
.footer__bottom { display:flex; justify-content:space-between; gap:20px; padding-top:26px; font-size:13px; color:rgba(255,255,255,.5); flex-wrap:wrap; }
.footer__bottom a:hover { color:var(--citiho-orange-300); }

/* reveal */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .mission{grid-template-columns:1fr;gap:40px}
  .founder__grid{grid-template-columns:220px 1fr;gap:36px}
  .contact__grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:820px){
  .section{padding:72px 0}
  .nav{display:none}
  .nav.nav--open{display:flex;position:absolute;top:84px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--border-1);box-shadow:var(--shadow-lg);padding:8px 0}
  .nav.nav--open a{padding:14px 28px;font-size:16px}
  .nav.nav--open .nav__cta{margin:12px 28px 8px;justify-content:center}
  .burger{display:inline-flex}
  .hero__photo{display:none}
  .hero__wedge{background:linear-gradient(150deg,var(--gray-950) 60%,var(--citiho-orange-600))}
  .hero__inner{padding:72px 0 110px;max-width:none}
  .phasestrip__card{grid-template-columns:1fr}
  .phasestrip__item+.phasestrip__item{border-left:none;border-top:1px solid var(--border-1)}
  .phase{grid-template-columns:54px 1fr;gap:18px}
  .phase__num{font-size:36px}
  .phase__cards{grid-template-columns:1fr}
  .survey__card{grid-template-columns:1fr;padding:38px 30px}
  .survey__cut{clip-path:polygon(0 86%,100% 70%,100% 100%,0 100%)}
  .survey__cut2{display:none}
  .founder__grid{grid-template-columns:1fr;gap:28px}
  .founder__photo{max-width:240px}
  .form{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr;gap:30px}
  .orbit{height:auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  .orbit__center{position:static;transform:none;margin-bottom:10px}
  .orbit__ring{display:none}
  .node{position:static;transform:none}
}
@media (max-width:520px){
  .footer__top{grid-template-columns:1fr}
  .hero__cta .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
}

/* =====================================================================
   HubSpot embedded form
   ===================================================================== */
.hs-wrap { max-width:560px; }
.hs-fallback { color:var(--fg-4); font-size:14px; padding:10px 0; }
.hs-wrap .hs-form-field { margin-bottom:16px; }
.hs-wrap .hs-form-field > label { display:block; font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--fg-2); margin-bottom:7px; }
.hs-wrap .hs-form-required { color:var(--citiho-orange-700); margin-left:2px; }
.hs-wrap .input { margin:0 !important; }
.hs-wrap .hs-input:not([type=checkbox]):not([type=radio]) {
  width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:15px; color:var(--fg-1);
  background:#fff; border:1.5px solid var(--border-2); border-radius:var(--r-md); padding:12px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.hs-wrap textarea.hs-input { min-height:120px; resize:vertical; }
.hs-wrap .hs-input:focus { outline:none; border-color:var(--citiho-orange); box-shadow:0 0 0 3px var(--focus-ring); }
.hs-wrap .hs-input.invalid.error, .hs-wrap .hs-input.error { border-color:var(--danger); }
.hs-wrap ul.hs-error-msgs, .hs-wrap .hs-error-msg { list-style:none; margin:6px 0 0; padding:0; color:var(--danger); font-size:12.5px; }
.hs-wrap .legal-consent-container, .hs-wrap .hs-richtext { font-size:12.5px; color:var(--fg-4); line-height:1.5; }
.hs-wrap .hs-richtext p { margin:0 0 8px; }
.hs-wrap .hs_submit { margin-top:8px; }
.hs-wrap .hs-button.primary, .hs-wrap input[type=submit].hs-button {
  font-family:var(--font-body); font-weight:600; font-size:15.5px; cursor:pointer;
  background:var(--citiho-orange); color:#fff; border:1.5px solid transparent; border-radius:var(--r-md);
  padding:13px 26px; box-shadow:var(--shadow-accent); transition:background .16s, transform .12s;
}
.hs-wrap .hs-button.primary:hover { background:var(--citiho-orange-600); }
.hs-wrap .hs-button.primary:active { transform:scale(.98); }
.hs-wrap fieldset { max-width:none !important; }
.hs-wrap .hs-form-booleancheckbox-display { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--fg-3); }

/* Offer card "more" cue */
.offer__more { display:inline-block; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--citiho-orange-700); }
.offer[role=link] { cursor:pointer; }
.offer[role=link]:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

/* =====================================================================
   Sub-page hero (offers, contact)
   ===================================================================== */
.pagehero { position:relative; background:var(--gray-950); color:#fff; overflow:hidden; padding:80px 0 92px; }
.pagehero__wedge { position:absolute; inset:0; background:
  linear-gradient(115deg,var(--gray-950) 0%,var(--gray-900) 52%,transparent 52.2%),
  linear-gradient(115deg,transparent 50%,var(--citiho-orange) 50.2%,var(--citiho-orange-600) 100%); }
.pagehero__photo { position:absolute; top:0; right:0; bottom:0; width:42%; background-size:cover; background-position:center; clip-path:polygon(26% 0,100% 0,100% 100%,6% 100%); filter:saturate(1.1) brightness(.82) sepia(.18); }
.pagehero__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,var(--gray-950),rgba(31,30,29,.15) 50%,transparent 78%); }
.pagehero__picto { position:absolute; right:-50px; bottom:-70px; width:340px; opacity:.06; }
.pagehero__inner { position:relative; z-index:2; max-width:640px; }
.pagehero .overline { color:var(--citiho-orange-300); }
.pagehero .overline::before { background:var(--citiho-orange-300); }
.pagehero h1 { color:#fff; font-size:clamp(34px,4.6vw,54px); font-weight:700; line-height:1.05; margin:16px 0 0; }
.pagehero h1 .accent { color:var(--citiho-orange); }
.pagehero__sub { color:rgba(255,255,255,.82); font-size:18px; margin:18px 0 0; max-width:34em; }
.breadcrumb { display:flex; gap:8px; align-items:center; font-size:13px; color:rgba(255,255,255,.62); margin-bottom:6px; }
.breadcrumb a:hover { color:#fff; }

/* svc intro */
.svc-intro { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.svc-intro__body .overline { margin-bottom:16px; }
.svc-intro__body h2 { margin-bottom:18px; }
.svc-intro__body p { margin:0 0 16px; font-size:15.5px; }
.svc-intro__img { position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3; background-size:cover; background-position:center; filter:saturate(1.1) brightness(.82) sepia(.18); }
.svc-intro__img::after { content:""; position:absolute; inset:0; background:linear-gradient(160deg,transparent 58%,rgba(239,153,36,.16)); }

/* checklist */
.checklist { display:grid; grid-template-columns:1fr 1fr; gap:18px 44px; max-width:860px; margin:0 auto; }
.check { display:flex; gap:13px; align-items:flex-start; }
.check__mk { width:26px; height:26px; border-radius:50%; background:var(--citiho-orange-50); color:var(--citiho-orange-700); display:grid; place-items:center; flex:0 0 auto; margin-top:1px; }
.check__mk svg { width:15px; height:15px; }
.check__t { font-size:15.5px; color:var(--fg-1); font-weight:500; line-height:1.4; }

/* reasons */
.reasons { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.reason { text-align:center; padding:8px; }
.reason__ic { width:64px; height:64px; border-radius:50%; background:var(--citiho-orange); color:#fff; display:grid; place-items:center; margin:0 auto 18px; box-shadow:var(--shadow-accent); }
.reason__ic svg { width:28px; height:28px; }
.reason__t { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--fg-1); margin-bottom:8px; }
.reason__d { font-size:14px; color:var(--fg-3); line-height:1.5; max-width:30ch; margin:0 auto; }

/* related offers */
.related { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.related a { font-size:14px; font-weight:500; color:var(--fg-2); background:#fff; border:1px solid var(--border-1); border-radius:var(--r-pill); padding:9px 18px; box-shadow:var(--shadow-xs); transition:border-color .15s, color .15s; }
.related a:hover { border-color:var(--citiho-orange); color:var(--citiho-orange-700); }
.related a.is-current { background:var(--citiho-orange-50); border-color:var(--citiho-orange-100); color:var(--citiho-orange-700); }

/* cta band */
.ctaband { background:var(--gray-950); color:#fff; position:relative; overflow:hidden; text-align:center; }
.ctaband__wedge { position:absolute; inset:0; background:var(--citiho-orange); clip-path:polygon(0 100%,100% 58%,100% 100%); opacity:.16; }
.ctaband .overline { color:var(--citiho-orange-300); justify-content:center; }
.ctaband .overline::before { background:var(--citiho-orange-300); }
.ctaband h2 { color:#fff; margin:14px 0 14px; }
.ctaband p { color:rgba(255,255,255,.8); max-width:48ch; margin:0 auto 26px; }

@media (max-width:820px){
  .svc-intro { grid-template-columns:1fr; gap:32px; }
  .checklist { grid-template-columns:1fr; }
  .reasons { grid-template-columns:1fr; gap:34px; }
  .pagehero__photo { display:none; }
  .pagehero__wedge { background:linear-gradient(150deg,var(--gray-950) 62%,var(--citiho-orange-600)); }
  .pagehero__inner { max-width:none; }
}

/* =====================================================================
   Legal / privacy page
   ===================================================================== */
.legal { max-width:800px; margin:0 auto; }
.legal__updated { color:var(--fg-4); font-size:13.5px; margin:0 0 8px; }
.legal h2 { font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--fg-1); margin:40px 0 12px; }
.legal h3 { font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--fg-1); margin:24px 0 8px; }
.legal p, .legal li { font-size:15.5px; color:var(--fg-2); line-height:1.7; }
.legal ul { padding-left:22px; margin:8px 0 16px; }
.legal li { margin-bottom:6px; }
.legal a { color:var(--fg-accent); text-decoration:underline; }
.legal .placeholder { color:var(--citiho-orange-700); background:var(--citiho-orange-50); border-radius:var(--r-sm); padding:1px 6px; font-size:13.5px; }

/* =====================================================================
   Cookie banner
   ===================================================================== */
.cookiebar {
  position:fixed; left:18px; right:18px; bottom:18px; z-index:200;
  background:#fff; border:1px solid var(--border-1); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:18px 22px;
  opacity:0; transform:translateY(14px); transition:opacity .3s var(--ease), transform .3s var(--ease);
  max-width:880px; margin:0 auto;
}
.cookiebar--in { opacity:1; transform:none; }
.cookiebar--out { opacity:0; transform:translateY(14px); pointer-events:none; }
.cookiebar__inner { display:flex; align-items:center; gap:26px; }
.cookiebar__title { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--fg-1); margin:0 0 4px; }
.cookiebar__desc { font-size:13.5px; color:var(--fg-3); line-height:1.5; margin:0; }
.cookiebar__desc a { color:var(--fg-accent); text-decoration:underline; }
.cookiebar__actions { display:flex; gap:10px; flex:0 0 auto; }
.cookiebar__actions .btn { padding:10px 20px; font-size:14.5px; box-shadow:none; }
.cookiebar__actions .btn--primary { box-shadow:var(--shadow-accent); }
@media (max-width:620px){
  .cookiebar { left:12px; right:12px; bottom:12px; padding:16px; }
  .cookiebar__inner { flex-direction:column; align-items:stretch; gap:14px; }
  .cookiebar__actions { justify-content:flex-end; }
}

/* =====================================================================
   Modal dialog (survey form popup)
   ===================================================================== */
.modal {
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(31,30,29,.45); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .2s var(--ease), visibility .2s var(--ease);
}
.modal--open { opacity:1; visibility:visible; }
.modal__card {
  position:relative; background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  width:min(580px,100%); max-height:90vh; overflow:auto; padding:38px 42px;
  transform:translateY(12px) scale(.985); transition:transform .22s var(--ease);
}
.modal--open .modal__card { transform:none; }
.modal__close {
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:var(--bg-3); border:none; cursor:pointer; display:grid; place-items:center;
  color:var(--fg-2); transition:background .15s, color .15s;
}
.modal__close:hover { background:var(--border-1); color:var(--fg-1); }
.modal__close svg { width:20px; height:20px; }
.modal__head { margin-bottom:22px; padding-right:30px; }
.modal__head h2 { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--fg-1); margin:14px 0 8px; }
.modal__head p { font-size:14.5px; color:var(--fg-3); line-height:1.55; margin:0; }
.modal .hs-form-frame { min-height:360px; }
.modal__loading { color:var(--fg-4); font-size:14px; padding:8px 0; }
@media (max-width:560px){ .modal__card { padding:30px 24px; } }

/* offer intro: free-version callout + cta row */
.svc-cta { display:flex; gap:12px; flex-wrap:wrap; }
.freecallout { display:flex; gap:14px; align-items:flex-start; background:var(--citiho-orange-50); border:1px solid var(--citiho-orange-100); border-radius:var(--r-lg); padding:18px 20px; margin:6px 0 22px; }
.freecallout__ic { width:40px; height:40px; border-radius:10px; background:#fff; display:grid; place-items:center; color:var(--citiho-orange-700); flex:0 0 auto; }
.freecallout__ic svg { width:20px; height:20px; }
.freecallout__t { display:block; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--fg-1); margin-bottom:3px; }
.freecallout__d { display:block; font-size:13.5px; color:var(--fg-2); line-height:1.5; }