/* Whole Story Planning — production stylesheet.
   Design tokens are the design-system source of truth; do not edit values here by hand. */
/* Whole Story Planning — brand webfonts (source OTF files as delivered by the firm).
   Convert to .woff2 for production sites; keep these family-name strings. */
@font-face{font-family:"Rose Garden Deluxe Serif";src:url("/assets/fonts/RoseGardenDeluxeSerif1.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sky Sans Book";src:url("/assets/fonts/skysans-book.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}

/* Palette source of truth: Whole Story Planning Brand Identity Deck 2026, p.4 */
:root{
  /* Base palette */
  --wsp-ink:#000233;
  --wsp-plum:#11034B;
  --wsp-orchid:#983498;
  --wsp-dusk:#DCE0F1;
  --wsp-cloud:#F6F6F5;
  --wsp-haze:#AAABBD;
  --wsp-white:#FFFFFF;
  /* Logo-only tints — present in the delivered lockup art, NOT documented in the
     brand deck. Do not introduce into new layouts without firm confirmation. */
  --wsp-orchid-tint:#B977B2;
  --wsp-single-color-black:#221f20;

  /* Derived tones (mixes of the base palette only — no new hues) */
  --wsp-plum-hover:#1B0A63;
  --wsp-orchid-hover:#7E2A7E;
  --wsp-orchid-press:#6A2369;
  --wsp-dusk-deep:#C6CCE8;
  --wsp-ink-80:rgba(0,2,51,.8);
  --wsp-ink-60:rgba(0,2,51,.6);
  --wsp-ink-12:rgba(0,2,51,.12);
  --wsp-ink-08:rgba(0,2,51,.08);
  --wsp-white-70:rgba(255,255,255,.7);
  --wsp-white-16:rgba(255,255,255,.16);

  /* Semantic aliases — use these in components */
  --surface-page:var(--wsp-cloud);
  --surface-card:var(--wsp-white);
  --surface-subtle:var(--wsp-dusk);
  --surface-inverse:var(--wsp-plum);
  --surface-inverse-deep:var(--wsp-ink);
  --surface-accent:var(--wsp-orchid);

  --text-heading:var(--wsp-ink);
  --text-body:var(--wsp-ink-80);
  --text-muted:var(--wsp-haze);
  --text-accent:var(--wsp-orchid);
  --text-on-inverse:var(--wsp-white);
  --text-on-inverse-muted:var(--wsp-white-70);
  --text-on-accent:var(--wsp-white);

  --border-subtle:var(--wsp-ink-12);
  --border-strong:var(--wsp-haze);
  --border-inverse:var(--wsp-white-16);
  --divider-accent:var(--wsp-orchid);

  --link:var(--wsp-orchid);
  --link-hover:var(--wsp-orchid-hover);
  --link-on-inverse:var(--wsp-dusk);

  --focus-ring:var(--wsp-orchid);
}

/* Type system. Deck spec: Header = Rose Garden Deluxe Serif, ALL CAPS, 1.05 kerning.
   Subheader = Sky Sans Book, ALL CAPS, 1.78 kerning. Body = Sky Sans Book, sentence case, 0. */
:root{
  --font-serif-display:"Rose Garden Deluxe Serif","Playfair Display",Georgia,serif;
  --font-sans:"Sky Sans Book","Jost","Century Gothic",system-ui,sans-serif;
  --font-body:var(--font-sans);
  --font-heading:var(--font-serif-display);

  /* Weights. Both brand faces ship in ONE weight only — these render as
     browser-synthesized bold. Replace with real weight files when available. */
  --weight-heading:600;
  --weight-eyebrow:600;
  --weight-body:400;

  /* Tracking (deck kerning values expressed in em) */
  --tracking-header:.105em;
  --tracking-subheader:.178em;
  --tracking-body:0em;

  /* Display / heading scale */
  --text-display-1:clamp(44px,6vw,86px);
  --text-display-2:clamp(36px,4.4vw,62px);
  --text-h1:clamp(32px,3.4vw,48px);
  --text-h2:clamp(26px,2.6vw,36px);
  --text-h3:22px;

  /* Sans scale */
  --text-eyebrow:13px;
  --text-lead:20px;
  --text-body-lg:18px;
  --text-body-md:16px;
  --text-body-sm:14px;
  --text-caption:12.5px;
  --text-disclosure:12px; /* ≈9pt floor — never smaller than body copy */

  --leading-tight:1.06;
  --leading-heading:1.18;
  --leading-body:1.62;
  --leading-loose:1.75;
}

:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --section-y:clamp(64px,8vw,128px); /* @kind spacing */
  --gutter:clamp(20px,5vw,64px); /* @kind spacing */
  --measure:68ch;
  --content-max:1200px;
  --content-narrow:760px;
}

:root{
  /* Radii — restrained. Cards and images are near-square; pills only for tags. */
  --radius-none:0;
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:8px;
  --radius-pill:999px;

  /* Shadows — soft, plum-tinted, never grey/black */
  --shadow-sm:0 1px 2px rgba(0,2,51,.06);
  --shadow-card:0 10px 30px -12px rgba(0,2,51,.14);
  --shadow-raised:0 18px 48px -18px rgba(0,2,51,.22);
  --shadow-focus:0 0 0 3px rgba(152,52,152,.32);

  /* Borders */
  --border-hairline:1px solid var(--border-subtle);
  --rule-accent:2px solid var(--divider-accent);
  --dash-accent:2px dashed var(--wsp-orchid);

  /* Motion — gentle, no bounce */
  --ease-brand:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:240ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */

  /* Image treatment over dark fields */
  --scrim-plum:linear-gradient(180deg,rgba(0,2,51,0) 30%,rgba(0,2,51,.72) 100%); /* @kind color */
}

/* Minimal element defaults so specimens, cards and kits share a baseline. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body-md);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--font-heading);font-weight:var(--weight-heading);color:var(--text-heading);text-transform:uppercase;letter-spacing:var(--tracking-header);line-height:var(--leading-heading)}
h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--link);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)}
a:hover{color:var(--link-hover);border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- page baseline (ported from the source pages) ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wsp-cloud);overflow-x:clip}
img,svg,video{max-width:100%}
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:767px){input,select,textarea{font-size:16px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
a{color:var(--link)}
a:hover{color:var(--link-hover)}

/* ---- buttons ---- */
.btn{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:var(--tracking-subheader);font-weight:var(--weight-eyebrow);border:1px solid transparent;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-3);white-space:nowrap;text-decoration:none;transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)}
.btn-md{font-size:12px;padding:13px 26px}
.btn-lg{font-size:13px;padding:17px 34px}
.btn-primary{background:var(--wsp-orchid);color:var(--wsp-white)}
.btn-primary:hover{background:var(--wsp-orchid-hover);color:var(--wsp-white)}
.btn-outline{background:transparent;color:var(--wsp-plum);border-color:var(--wsp-plum)}
.btn-outline:hover{background:var(--wsp-dusk);color:var(--wsp-plum)}
.btn-inverse{background:var(--wsp-white);color:var(--wsp-plum)}
.btn-inverse:hover{background:var(--wsp-dusk);color:var(--wsp-plum)}
.btn-outline-inverse{background:transparent;color:var(--wsp-white);border-color:var(--wsp-white)}
.btn-outline-inverse:hover{background:rgba(255,255,255,.14);color:var(--wsp-white)}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);padding:14px clamp(16px,3vw,48px);background:rgba(246,246,245,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle);max-width:100%;box-sizing:border-box}
.site-header .brand{display:block;flex:0 0 auto;border:none}
.site-header .brand img{display:block;height:clamp(38px,10vw,52px);width:auto}
.nav-desktop{display:none;align-items:center;gap:clamp(12px,1.6vw,26px);min-width:0}
.nav-item{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.nav-item>a,.nav-row>a{font-family:var(--font-sans);font-size:15px;white-space:nowrap;color:var(--text-heading);padding:10px 0;border:none}
.nav-item>a:hover,.nav-row>a:hover{color:var(--text-heading)}
.nav-row{display:flex;align-items:center;gap:2px}
.nav-caret{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;margin:0;background:none;border:none;cursor:pointer;color:var(--text-heading)}
.nav-caret i{display:block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform var(--dur-base) var(--ease-brand)}
.nav-caret[aria-expanded="true"] i{transform:rotate(-135deg)}
.nav-underline{display:block;height:1px;width:100%;background:var(--wsp-orchid)}
.nav-panel{position:absolute;top:100%;left:-16px;padding-top:10px;z-index:50;display:none}
.nav-item.open .nav-panel{display:block}
.nav-panel-inner{min-width:280px;max-width:calc(100vw - 32px);display:grid;gap:2px;padding:12px 16px;background:var(--wsp-white);border:1px solid var(--border-subtle);border-radius:8px;box-shadow:var(--shadow-raised)}
.nav-panel-wide .nav-panel-inner{min-width:330px}
.nav-panel-inner a{font-family:var(--font-sans);font-size:15px;color:var(--text-heading);padding:10px 0;border:none;display:flex;align-items:center;min-height:40px}
.nav-panel-inner a:hover{color:var(--wsp-orchid)}
.nav-panel-inner a.nav-panel-all{font-size:11px;text-transform:uppercase;letter-spacing:.32em;color:var(--text-accent);padding:8px 0 10px;min-height:0}
.nav-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;padding:0 10px;background:none;border:1px solid var(--border-subtle);border-radius:2px;cursor:pointer;flex:0 0 auto}
.nav-burger span{display:block;height:1.5px;width:100%;background:var(--wsp-ink);transform-origin:center;transition:transform var(--dur-base) var(--ease-brand),opacity 160ms linear}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-mobile{position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;gap:2px;padding:20px clamp(16px,3vw,48px) 28px;background:var(--wsp-cloud);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-raised);z-index:45}
.nav-mobile[hidden]{display:none}
.nav-mobile a{font-family:var(--font-sans);font-size:16px;color:var(--text-heading);padding:11px 0;border:none;min-height:48px;display:flex;align-items:center}
.nav-mobile a.nav-mobile-group{font-size:12px;text-transform:uppercase;letter-spacing:var(--tracking-subheader);color:var(--text-accent);padding:18px 0 8px;min-height:44px;align-items:flex-end}
.nav-mobile a.nav-mobile-faq{padding:20px 0 11px;align-items:flex-end}
.nav-mobile-cta{margin-top:14px}
@media (min-width:1080px){.nav-desktop{display:flex}.nav-burger{display:none}.nav-mobile{display:none}}

/* ---- footer ---- */
.site-footer{background:var(--surface-inverse-deep);color:var(--text-on-inverse);padding:clamp(64px,8vw,110px) clamp(20px,5vw,64px) 48px}
.f-inner{max-width:1200px;margin:0 auto}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:48px;align-items:start}
.f-col{display:grid;gap:10px;align-content:start}
.f-grid>.f-col:first-child{gap:20px}
.f-logo{height:38px;width:auto}
.f-address{margin:0;color:var(--text-on-inverse-muted);font-family:var(--font-sans);font-size:16px;line-height:1.62;max-width:34ch}
.f-contact{display:grid;gap:6px;font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--text-on-inverse-muted)}
.f-col-title{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.32em;color:var(--wsp-dusk);margin-bottom:6px}
.f-link{font-family:var(--font-sans);font-size:14px;color:var(--wsp-dusk);border:none}
.f-link:hover,.f-link-plain:hover{color:var(--wsp-white)}
.f-link-plain{color:inherit;border:none}
.f-disclosures{margin-top:48px;padding-top:32px;border-top:1px solid var(--border-inverse);display:grid;gap:12px}
.f-copy{margin-top:32px;display:flex;align-items:center;gap:12px}
.f-copy span{font-family:var(--font-sans);font-size:12.5px;color:var(--text-on-inverse-muted)}

/* ---- FAQ accordion ---- */
.faq-a[hidden]{display:none}

/* ---- contact form ---- */
.contact-form{display:grid;gap:22px}
.contact-form .field{display:grid;gap:var(--space-2)}
.contact-form label{font-family:var(--font-sans);font-size:11.5px;text-transform:uppercase;letter-spacing:var(--tracking-subheader);font-weight:var(--weight-eyebrow);color:var(--text-heading)}
.contact-form .req{color:var(--text-accent)}
.contact-form .field-hint{font-size:var(--text-caption);color:var(--text-muted)}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;font-family:var(--font-sans);font-size:var(--text-body-md);color:var(--text-heading);background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:13px 14px}
.contact-form select{appearance:none}
.contact-submit{justify-self:start;margin-top:6px;letter-spacing:.32em;font-size:11px;font-weight:600}
.contact-note{margin:0;font-family:var(--font-sans);font-size:12px;line-height:1.6;color:var(--text-body)}
.contact-form[hidden],.contact-sent[hidden]{display:none}
.contact-sent{display:grid;gap:20px;justify-items:center;text-align:center;padding:32px 0}
.contact-sent h2{margin:0;font-family:var(--font-heading);font-weight:400;text-transform:none;letter-spacing:.005em;font-size:clamp(20px,1.7vw,23px);line-height:1.32;color:var(--text-heading)}
.contact-sent p{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.62;color:var(--text-body);max-width:42ch}
.contact-sent p a{color:var(--text-accent)}
.contact-sent button{background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--text-accent);padding:6px 0;border-bottom:1px solid currentColor}

/* ---- 404 ---- */
.nf{max-width:760px;margin:0 auto;padding:clamp(72px,10vw,140px) clamp(20px,5vw,64px);display:grid;gap:26px;justify-items:center;text-align:center}
.nf h1{font-size:clamp(32px,4.4vw,62px);letter-spacing:.075em;line-height:1.08}
.nf p{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.62;color:var(--text-body);max-width:48ch}

/* ---- element hover states ported from source inline styles ---- */
.hv1:hover{border-top-color:var(--wsp-orchid) !important}
.hv2:hover{color:var(--wsp-white) !important}
.hv3:hover{background:var(--wsp-dusk) !important}
.hv4:hover{box-shadow:var(--shadow-raised) !important;color:var(--wsp-orchid) !important}
.hv5:hover{color:var(--text-accent) !important}
.hv6:hover{color:var(--text-accent) !important;border-bottom-color:var(--wsp-orchid) !important}
.hv7:hover{background:var(--wsp-orchid-hover) !important;color:var(--wsp-white) !important}