@font-face { font-family:"Inter"; src:url("assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype"); font-style:normal; font-weight:100 900; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("assets/fonts/Outfit-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:100 900; font-display:swap; }
@font-face { font-family:"Lora"; src:url("assets/fonts/Lora-VariableFont_wght.ttf") format("truetype"); font-style:normal; font-weight:400 700; font-display:swap; }
@font-face { font-family:"Lora"; src:url("assets/fonts/Lora-Italic-VariableFont_wght.ttf") format("truetype"); font-style:italic; font-weight:400 700; font-display:swap; }

:root { --ink:#17231f; --muted:#607068; --paper:#f7f5ef; --cream:#efede5; --line:#d9ded6; --lime:#d8f46e; --deep:#173d35; --white:#fff; --orange:#ff8057; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.45; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.site-header { height:78px; max-width:1240px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:9px; font-weight:750; font-size:22px; letter-spacing:-1px; }.brand-mark { display:grid; place-items:center; width:28px; height:28px; color:var(--cream); background:var(--deep); font:800 17px Georgia,serif; border-radius:8px 8px 8px 1px; }.header-note { color:var(--muted); font-size:13px; }.header-actions { display:flex; align-items:center; gap:20px; }.header-cta { border:0; display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px; border-radius:6px; background:var(--primary,var(--deep)); color:#fff; font-weight:750; font-size:13px; white-space:nowrap; }.header-cta:hover { filter:brightness(.94); }
.hero { min-height:572px; background:var(--deep); color:white; position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); padding:86px max(32px,calc((100vw - 1176px)/2)); gap:50px; }.hero:before { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(216,244,110,.17); border-radius:50%; left:-180px; top:-250px; }.hero-copy { position:relative; z-index:1; max-width:660px; }.eyebrow { font-size:11px; letter-spacing:1.55px; font-weight:750; margin:0 0 16px; color:#608f7e; }.hero .eyebrow { color:var(--lime); }.hero h1 { margin:0; font-size:clamp(42px,5vw,67px); line-height:1.03; letter-spacing:-3.5px; font-weight:650; }.hero h1 em { font-family:Georgia,serif; font-weight:400; }.hero-intro { font-size:17px; line-height:1.6; max-width:570px; color:#d2ddd8; margin:25px 0 32px; }.industry-picker { max-width:475px; }.industry-picker label { display:block; font-size:13px; font-weight:650; margin-bottom:8px; }.select-wrap { position:relative; }.select-wrap select { appearance:none; -webkit-appearance:none; width:100%; padding:15px 47px 15px 17px; border:1px solid rgba(255,255,255,.38); border-radius:6px; background:white; color:var(--ink); font-weight:600; outline:none; }.select-wrap select:focus { box-shadow:0 0 0 3px rgba(216,244,110,.55); }.select-wrap span { pointer-events:none; position:absolute; right:17px; top:9px; color:var(--deep); font-size:25px; }.picker-helper { font-size:12px; color:#aec2ba; margin:10px 0; }
.hero-art { position:relative; min-height:345px; }.orb { position:absolute; border-radius:50%; }.orb-one { width:360px; height:360px; background:var(--lime); right:15px; top:-30px; opacity:.95; }.orb-two { width:130px; height:130px; background:var(--orange); left:35px; bottom:8px; }.signal-card { position:absolute; box-shadow:0 20px 45px rgba(0,0,0,.22); }.signal-card-main { width:min(344px,90%); right:0; top:60px; background:#faf9f5; color:var(--ink); padding:22px; border-radius:9px; transform:rotate(3deg); }.signal-top { display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:1px; font-weight:750; color:#63746d; }.signal-dot { display:block; width:7px; height:7px; border-radius:50%; background:#4fbe89; }.signal-lines { padding:27px 0 20px; display:grid; gap:11px; }.signal-lines i { display:block; height:8px; border-radius:8px; background:#dce6dd; }.signal-lines i:nth-child(1) { width:86%; background:var(--deep); }.signal-lines i:nth-child(2) { width:60%; }.signal-lines i:nth-child(3) { width:74%; }.signal-lines i:nth-child(4) { width:48%; }.signal-footer { border-top:1px solid var(--line); padding-top:16px; display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }.signal-footer b { color:var(--deep); font-size:18px; }.signal-card-small { left:10px; bottom:55px; display:flex; align-items:center; gap:9px; color:var(--ink); background:#fff; padding:13px 17px; border-radius:7px; font-size:12px; font-weight:650; transform:rotate(-5deg); }.small-icon { display:grid; place-items:center; height:20px; width:20px; border-radius:50%; background:var(--lime); }
.results { max-width:1176px; padding:100px 32px 72px; margin:auto; }.is-hidden { display:none !important; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:36px; }.section-heading h2, .download-copy h2, .modal h2 { font-size:clamp(30px,3.2vw,42px); line-height:1.1; letter-spacing:-2px; margin:0; font-weight:650; }.section-heading h2 span { font-family:Georgia,serif; font-weight:400; }.section-heading p:not(.eyebrow) { margin:12px 0 0; font-size:15px; color:var(--muted); }.text-button { border:0; padding:0; background:transparent; color:var(--deep); font-size:14px; font-weight:700; white-space:nowrap; }.text-button span { margin-left:5px; font-size:17px; }.framework-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.framework-card { background:var(--white); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:border-color .2s,transform .2s,box-shadow .2s; }.framework-card:hover { transform:translateY(-2px); border-color:#afc3b8; box-shadow:0 10px 25px rgba(26,48,40,.06); }.card-button { width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:17px; padding:23px; color:var(--ink); border:0; text-align:left; background:transparent; align-items:start; }.tag { font-size:10px; padding:6px 8px; color:#26594b; background:#dff3e6; border-radius:20px; line-height:1; white-space:nowrap; font-weight:750; letter-spacing:.45px; }.tag.high { color:#87482c; background:#ffe3d6; }.tag.medium { color:#6c5820; background:#fbefbd; }.card-title { font-size:20px; font-weight:700; letter-spacing:-.8px; line-height:1.12; margin:0 0 7px; }.card-summary { color:var(--muted); font-size:13px; line-height:1.5; margin:0; }.expand-icon { width:29px; height:29px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--deep); font-size:20px; transition:transform .25s; }.framework-card.open .expand-icon { transform:rotate(45deg); background:var(--deep); color:white; border-color:var(--deep); }.card-detail { display:none; padding:0 23px 24px; margin-left:74px; }.framework-card.open .card-detail { display:block; animation:reveal .2s ease-out; }.detail-line { border-top:1px solid #edf0eb; padding:15px 0; }.detail-label { display:block; color:#6e8076; font-size:10px; letter-spacing:1px; font-weight:750; margin-bottom:5px; }.detail-line p { margin:0; color:#394941; font-size:13px; line-height:1.55; }.card-cta { display:inline-flex; align-items:center; gap:8px; border:0; padding:0; margin-top:4px; background:transparent; color:var(--deep); font-weight:750; font-size:13px; }.card-cta span { font-size:17px; }.download-panel { background:var(--lime); margin-top:62px; padding:33px 38px; border-radius:11px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; }.download-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--deep); color:white; font-size:26px; }.download-copy .eyebrow { color:#426555; margin-bottom:9px; }.download-copy h2 { font-size:28px; }.download-copy p:last-child { margin:8px 0 0; max-width:595px; color:#365047; font-size:14px; }.button { border:0; display:inline-flex; align-items:center; justify-content:center; gap:20px; border-radius:5px; min-height:49px; padding:0 19px; font-weight:750; font-size:14px; white-space:nowrap; }.button span { font-size:19px; }.button-light { background:var(--white); color:var(--deep); letter-spacing:1px; }.button-dark { color:white; background:var(--deep); width:100%; margin-top:21px; }.button:hover { filter:brightness(.96); }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:22px; background:rgba(16,35,29,.67); backdrop-filter:blur(5px); }.modal { position:relative; width:min(100%,600px); max-height:calc(100vh - 44px); overflow:auto; background:var(--paper); border-radius:11px; padding:42px; box-shadow:0 25px 80px rgba(0,0,0,.3); }.close-button { position:absolute; right:18px; top:16px; width:34px; height:34px; color:var(--ink); border:0; background:#e8ece5; border-radius:50%; font-size:25px; line-height:1; }.modal .eyebrow { margin-bottom:12px; }.modal-intro { color:var(--muted); margin:12px 0 25px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.modal form > label, .form-row label { display:block; color:#34453d; font-size:12px; font-weight:700; margin-top:15px; }.modal input:not([type="checkbox"]), .modal textarea { display:block; width:100%; margin-top:6px; border:1px solid #cdd5cc; border-radius:5px; padding:11px 12px; background:#fff; color:var(--ink); outline:none; font-weight:400; }.modal input:focus, .modal textarea:focus { border-color:#4d7567; box-shadow:0 0 0 3px rgba(104,146,124,.17); }.modal textarea { resize:vertical; }.optional { color:#87958d; font-weight:400; }.consent { display:flex !important; align-items:flex-start; gap:10px; line-height:1.4; font-weight:500 !important; }.consent input { margin:2px 0 0; accent-color:var(--deep); }.form-error { color:#a33c2e; font-size:12px; margin:12px 0 0; }.privacy-note { text-align:center; margin:14px 0 0; color:#75827b; font-size:11px; }.form-success { text-align:center; padding:45px 15px 22px; }.success-mark { display:grid; place-items:center; margin:0 auto 18px; height:56px; width:56px; border-radius:50%; background:var(--lime); color:var(--deep); font-size:28px; font-weight:800; }.form-success p { color:var(--muted); margin:12px auto 26px; max-width:350px; }.form-success strong { color:var(--ink); }
@keyframes reveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) { .site-header { height:68px; padding:0 20px; }.header-note { display:none; }.hero { display:block; min-height:650px; padding:62px 22px; }.hero h1 { letter-spacing:-2.5px; }.hero-art { min-height:250px; margin-top:22px; }.orb-one { width:260px; height:260px; right:-25px; }.signal-card-main { top:35px; }.signal-card-small { bottom:17px; }.results { padding:65px 20px 48px; }.section-heading { display:block; }.section-heading .text-button { margin-top:20px; }.framework-grid { grid-template-columns:1fr; }.card-detail { margin-left:0; padding:0 22px 23px; }.download-panel { display:block; padding:28px; }.download-icon { margin-bottom:19px; }.download-copy h2 { font-size:27px; }.download-panel .button { width:100%; margin-top:23px; }.modal { padding:34px 22px; }.form-row { grid-template-columns:1fr; gap:0; }.card-button { gap:12px; padding:20px; }.tag { font-size:9px; } }

/* Dre Stivala brand palette */
:root { --ink:#302743; --muted:#6b6478; --line:#ded9e7; --primary:#7A35FF; --deep:#302743; --accent:#F5222D; }
.brand-mark { color:#fff; background:var(--primary); }
.hero:before { border-color:rgba(122,53,255,.45); }
.hero .eyebrow { color:#c9afff; }
.hero-intro { color:#e0d9ef; }
.select-wrap select:focus { box-shadow:0 0 0 3px rgba(122,53,255,.6); }
.select-wrap span { color:var(--primary); }
.picker-helper { color:#c1b8d2; }
.orb-one { background:var(--primary); }
.orb-two { background:var(--accent); }
.signal-top { color:#6d657c; }.signal-dot { background:var(--primary); }.signal-lines i { background:#e7e2ed; }.signal-lines i:nth-child(1) { background:var(--primary); }.signal-footer b { color:var(--primary); }.small-icon { background:var(--accent); color:#fff; }
.eyebrow { color:var(--primary); }.text-button, .expand-icon, .card-cta { color:var(--primary); }.framework-card.open .expand-icon { background:var(--primary); border-color:var(--primary); }
.framework-card:hover { border-color:#c5b3ef; box-shadow:0 10px 25px rgba(48,39,67,.07); }
.tag { color:#513c92; background:#eee7ff; }.tag.high { color:#a61a22; background:#ffe3e4; }.tag.medium { color:#6a4c00; background:#fff0bf; }
.detail-line { border-color:#eeeaf3; }.detail-label { color:#716a80; }.detail-line p { color:#494257; }
.download-panel { background:var(--primary); color:#fff; }.download-icon { background:var(--accent); }.download-copy .eyebrow { color:#ded0ff; }.download-copy p:last-child { color:#f0eaff; }.button-light { color:var(--primary); }.button-dark { background:var(--primary); }
.modal-backdrop { background:rgba(48,39,67,.72); }.close-button { color:var(--primary); background:#eee9f7; }.modal form > label, .form-row label { color:#443b53; }.modal input:not([type="checkbox"]), .modal textarea { border-color:#d2ccdc; }.modal input:focus, .modal textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(122,53,255,.16); }.optional { color:#897f97; }.consent input { accent-color:var(--primary); }.form-error { color:#b21520; }.privacy-note { color:#7d7489; }.success-mark { background:var(--primary); color:#fff; }

.official-link { display:inline-flex; align-items:center; gap:7px; margin:4px 0 0; color:var(--primary); font-size:13px; font-weight:750; text-decoration:none; }.official-link span { font-size:16px; }.official-link:hover { text-decoration:underline; }.services-section { margin-top:25px; padding-top:23px; border-top:1px solid #ded7eb; }.services-title { display:block; color:var(--primary); font-size:10px; letter-spacing:1px; font-weight:800; }.services-intro { margin:6px 0 15px; color:var(--muted); font-size:13px; }.service-card { margin-top:11px; padding:17px; background:#f7f4fc; border:1px solid #e4ddf0; border-radius:7px; }.service-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.service-card h4 { margin:0; color:var(--ink); font-size:15px; letter-spacing:-.35px; }.service-tag { display:inline-block; flex:none; padding:5px 7px; color:#513c92; background:#eee7ff; border-radius:20px; font-size:9px; letter-spacing:.25px; line-height:1; font-weight:800; }.service-tag.high { color:#a61a22; background:#ffe3e4; }.service-tag.medium { color:#6a4c00; background:#fff0bf; }.service-summary { margin:7px 0 0; color:#514a5d; font-size:13px; }.service-detail-list { margin:14px 0 4px; }.service-detail-list div { padding:9px 0; border-top:1px solid #e5dff0; }.service-detail-list dt { margin:0 0 3px; color:#756b85; font-size:9px; letter-spacing:.9px; font-weight:800; }.service-detail-list dd { margin:0; color:#514a5d; font-size:12px; line-height:1.5; }
.empty-framework-message { grid-column:1 / -1; margin:0; padding:28px; border:1px dashed #cfc6dc; border-radius:9px; color:var(--muted); background:#fbf9fd; }.empty-service-message { margin:0; color:var(--muted); font-size:13px; }

.modal-booking { width:min(100%,720px); }.booking-embed { position:relative; width:100%; min-height:420px; margin-top:6px; border-radius:8px; overflow-x:auto; background:#fff; }.booking-embed .zcal-inline-widget { display:block; width:100%; }.booking-embed .zcal-inline-widget iframe { max-width:100%; border:0; display:block; }.booking-embed .zcal-inline-widget > a { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:420px; color:var(--primary); font-weight:750; text-decoration:none; }
@media (max-width:760px) { #booking-modal { padding:10px; } .modal-booking { padding:26px 14px; } }

.framework-drawer { position:fixed; z-index:8; top:0; right:0; width:min(560px,calc(100vw - 22px)); height:100dvh; overflow-y:auto; background:var(--paper); border-left:1px solid #d9d1e8; box-shadow:-22px 0 55px rgba(48,39,67,.2); transform:translateX(104%); transition:transform .35s cubic-bezier(.2,.8,.2,1); visibility:hidden; }.framework-drawer.is-open { transform:translateX(0); visibility:visible; }.drawer-header { position:sticky; z-index:1; top:0; display:flex; align-items:center; justify-content:space-between; padding:20px 27px; background:rgba(247,245,239,.96); border-bottom:1px solid #ded7eb; backdrop-filter:blur(9px); }.drawer-label { color:var(--primary); font-size:10px; letter-spacing:1.2px; font-weight:800; }.drawer-close { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--primary); font-size:13px; font-weight:750; }.drawer-close:first-letter { font-size:25px; font-weight:400; }.drawer-content { padding:31px 29px 55px; }.drawer-framework-heading { padding-bottom:23px; border-bottom:1px solid #ded7eb; }.drawer-framework-heading h2 { margin:13px 0 9px; color:var(--ink); font-size:32px; line-height:1.08; letter-spacing:-1.5px; }.drawer-framework-heading p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }.drawer-details .detail-line { padding:17px 0; border-color:#e4deeb; }.drawer-details .detail-line p { color:#494257; }.drawer-details .services-section { margin-top:27px; }

/* Inverted hero palette */
.hero { background:var(--primary); }.hero:before { border-color:rgba(48,39,67,.45); }.orb-one { background:var(--deep); }
@media (max-width:760px) { .framework-drawer { width:calc(100vw - 10px); }.drawer-header { padding:18px 20px; }.drawer-content { padding:25px 20px 42px; }.drawer-framework-heading h2 { font-size:28px; } }

/* Dre Stivala typography: Inter for reading, Outfit for headings, Lora for editorial accents. */
.brand,
.hero h1,
.section-heading h2,
.download-copy h2,
.modal h2,
.card-title,
.service-card h4,
.drawer-framework-heading h2 {
  font-family:"Outfit", Inter, ui-sans-serif, system-ui, sans-serif;
}

.hero h1 em,
.section-heading h2 span {
  font-family:"Lora", Georgia, serif;
  font-style:italic;
  font-weight:400;
}

/* Give the key Outfit moments a more open, premium rhythm. */
.hero h1,
.card-title,
.download-panel .button {
  letter-spacing:.5px;
}

.download-panel .button {
  font-family:"Outfit", Inter, ui-sans-serif, system-ui, sans-serif;
}

.download-copy h2 {
  letter-spacing:-1px;
}

/* Root Click logo scaled to fit the header without cropping. */
.brand-logo {
  display:block;
  width:150px;
  height:60px;
  object-fit:contain;
  object-position:center;
}

/* On desktop, prioritise a two-line hero title while preserving the right-hand visual. */
@media (min-width:761px) {
  .hero {
    grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
    gap:40px;
  }

  .hero-art {
    min-height:315px;
  }

  .orb-one {
    width:320px;
    height:320px;
  }

  .orb-two {
    width:116px;
    height:116px;
  }

  .signal-card-main {
    width:min(310px,90%);
    top:54px;
  }

  .signal-card-small {
    bottom:45px;
  }
}

@media (max-width:760px) {
  .brand-logo {
    width:126px;
    height:50px;
  }
}

/* Root Map footer */
.site-footer {
  background:#000;
  color:rgba(255,255,255,.7);
}

.footer-inner {
  max-width:1176px;
  margin:auto;
  padding:56px 32px 0;
}

.footer-grid {
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:48px;
  padding-bottom:44px;
}

.footer-heading {
  margin:0 0 14px;
  color:#fff;
  font-family:"Outfit", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size:14px;
  font-weight:750;
  letter-spacing:-.2px;
}

.footer-wordmark {
  margin:0 0 12px;
  color:#fff;
  font-family:"Outfit", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size:20px;
  font-weight:750;
  letter-spacing:-.6px;
  line-height:1.2;
}

.footer-wordmark span {
  display:block;
  color:rgba(255,255,255,.55);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  margin-top:2px;
}

.footer-tagline {
  margin:0;
  max-width:260px;
  color:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.55;
}

.footer-newsletter-copy {
  margin:0 0 20px;
  max-width:400px;
  color:rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.6;
}

.footer-newsletter-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  padding:0 20px;
  border-radius:6px;
  background:var(--primary);
  color:#fff;
  font-weight:750;
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
}

.footer-newsletter-cta:hover {
  filter:brightness(.94);
}

.footer-social {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.footer-social-link {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.8);
  transition:background-color .15s, border-color .15s, color .15s;
}

.footer-social-link img {
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
}

/* The supplied X and Mastodon PNGs are drawn as a dark glyph on a transparent
   ground for use on light backgrounds; inverted here so the same asset reads
   correctly against this footer's black background. */
.footer-social-link img[alt="X"],
.footer-social-link img[alt="Mastodon"] {
  filter:invert(1);
}

.footer-social-link:hover {
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:12px;
  color:rgba(255,255,255,.5);
}

.footer-booking-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.3);
  background:transparent;
  border-radius:6px;
  height:38px;
  padding:0 16px;
  color:#fff;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}

.footer-booking-cta:hover {
  background:var(--primary);
  border-color:var(--primary);
}

@media (max-width:760px) {
  .footer-inner {
    padding:44px 20px 0;
  }

  .footer-grid {
    grid-template-columns:1fr;
    gap:32px;
    padding-bottom:32px;
  }

  .footer-tagline {
    max-width:none;
  }

  .footer-newsletter-copy {
    max-width:none;
  }

  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:20px 0 24px;
  }

  .footer-booking-cta {
    width:100%;
    justify-content:center;
  }
}