/* ══ Wednesday Projects — Shared Styles ══
   Loaded by all pages. Page-specific styles remain in each file's <style> block.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══ RESET & ROOT ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ── Design tokens — never change these values without explicit instruction ── */
:root{
  --ivory-light:#F7F4EF; /* page background */
  --ivory:#F0EDE6;       /* slightly darker background */
  --ivory-mid:#E8E4DB;   /* section alternation, input backgrounds */
  --ivory-dark:#D2CEC5;  /* borders, dividers */
  --charcoal:#1C1C1A;    /* primary text, dark sections */
  --mid-grey:#6B6B65;    /* body text, secondary headings */
  --light-grey:#A8A49C;  /* placeholder text, notes */
  --gold:#B89B6A;        /* accent — borders, labels, hover states */
  --gold-light:#D4BC8F;  /* lighter gold — italic headings, hero text */
  --serif:"Cormorant Garamond",serif; /* headings */
  --sans:"Jost",sans-serif;           /* body, labels, buttons */
  --nav-h:68px;          /* fixed header height — used by all pages */
  --c-error:rgba(160,80,64,.6); /* validation error border colour */
  /* Spacing tokens */
  --padding-wrap:56px 32px 80px; /* standard page wrapper padding */
  --spacing-section:32px;        /* standard section/element bottom margin */
  /* Z-index layers — use these tokens, never raw numbers */
  --z-base:1;            /* stacking within a component */
  --z-drawer:199;        /* mobile nav drawer */
  --z-nav:200;           /* fixed header */
  --z-overlay:300;       /* modal overlay */
  --z-dropdown:500;      /* autocomplete, dropdowns */
  --z-toast:999;         /* validation toasts */
  --z-modal-back:9998;   /* modal backdrop */
  --z-modal:9999;        /* modal panel */
  --z-top:10000;         /* close buttons, highest UI layer */
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ivory-light);color:var(--charcoal);font-weight:300;overflow-x:hidden}

/* ══ HEADER ══ */
header{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 40px;transition:background .4s}
header.scrolled{background:rgba(240,237,230,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(184,155,106,.18)}
header.scrolled .logo-text-wednesday{color:var(--charcoal)}
header.scrolled .logo-text-projects{color:var(--mid-grey)}
header.scrolled .logo-divider{background:var(--mid-grey)}
header.scrolled nav.desktop-nav a{color:var(--mid-grey)}
header.scrolled .nav-cta{border-color:var(--gold);color:var(--gold)!important}
header.scrolled .hamburger span{background:var(--charcoal)}
.logo-link{display:flex;align-items:center;gap:0;text-decoration:none;flex-shrink:0;cursor:pointer}
.logo-text-wednesday{font-family:var(--sans);font-size:clamp(13px,1.4vw,17px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;transition:color .4s;white-space:nowrap}
.logo-divider{width:1px;height:1.1em;background:rgba(255,255,255,.5);margin:0 10px;transition:background .4s;flex-shrink:0}
.logo-text-projects{font-family:var(--sans);font-size:clamp(13px,1.4vw,17px);font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78);transition:color .4s;white-space:nowrap}
nav.desktop-nav{display:flex;gap:20px;align-items:center}
nav.desktop-nav a{font-size:11px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.82);text-decoration:none;transition:color .3s;white-space:nowrap}
nav.desktop-nav a:hover{color:var(--gold)!important}
.nav-cta{border:1px solid rgba(255,255,255,.45);padding:7px 14px;color:#fff!important;transition:background .3s,border-color .3s,color .3s!important;white-space:nowrap}
.nav-cta:hover{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--charcoal)!important}

/* ══ HAMBURGER ══ */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:5px}
.hamburger span{display:block;width:22px;height:1.5px;background:#fff;transition:background .4s}

/* ══ MOBILE DRAWER ══ */
.mobile-drawer{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(240,237,230,.98);backdrop-filter:blur(12px);z-index:var(--z-drawer);padding:24px 24px 32px;border-bottom:1px solid rgba(184,155,106,.2);flex-direction:column;gap:0;max-height:calc(100vh - var(--nav-h));overflow-y:auto}
.mobile-drawer.open{display:flex}
.mobile-drawer a{font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--mid-grey);text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(184,155,106,.15);transition:color .2s}
.mobile-drawer a:last-child{border-bottom:none;margin-top:12px;color:var(--gold)}
.mobile-drawer a:hover{color:var(--gold)}

/* ══ FOOTER ══ */
footer{background:var(--charcoal);padding:34px 48px;border-top:1px solid rgba(184,155,106,.14)}
.footer-main{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.footer-copy{font-size:11px;color:rgba(240,237,230,.6);letter-spacing:.06em}
.footer-legal{display:flex;gap:22px}
.footer-legal a,.footer-legal button{font-size:10px;color:rgba(240,237,230,.6);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;transition:color .3s;background:none;border:none;cursor:pointer;font-family:var(--sans)}
.footer-legal a:hover,.footer-legal button:hover{color:var(--gold-light)}

/* ══ MODALS ══ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(12,11,10,.88);z-index:var(--z-overlay);align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{background:var(--ivory-light);max-width:660px;width:100%;padding:48px;position:relative;animation:fadeUp .4s ease;max-height:88vh;overflow-y:auto}
.modal-close{position:absolute;top:16px;right:20px;background:none;border:none;cursor:pointer;font-size:22px;color:var(--mid-grey);line-height:1;transition:color .2s}
.modal-close:hover{color:var(--charcoal)}
.modal h2{font-family:var(--serif);font-size:26px;font-weight:300;margin-bottom:10px;color:var(--charcoal)}
.modal p{font-size:13px;color:var(--mid-grey);line-height:1.9;margin-bottom:10px}
.modal h3{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:20px 0 7px}

/* ══ SHARED CTA FORM ELEMENTS ══
   Used by all CTA forms. Apply variant modifier for section colour context. */

/* Field wrapper */
.cta-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}

/* Name row — two-column grid for fname/lname side by side */
.cta-name-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:480px){.cta-name-row{grid-template-columns:1fr}}

/* Label */
.cta-label{font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.cta-label--light{color:var(--mid-grey)}
.cta-label--dark{color:var(--gold)}

/* Input / textarea base */
.cta-input,.cta-textarea{font-family:var(--sans);font-size:13px;font-weight:300;border:none;border-bottom:1px solid var(--ivory-dark);padding:10px 12px;outline:none;transition:border-color .25s;appearance:none;width:100%}
.cta-input:focus,.cta-textarea:focus{border-bottom-color:var(--gold)}
.cta-textarea{resize:vertical;min-height:70px}

/* Light variant — ivory/charcoal sections */
.cta-input--light,.cta-textarea--light{color:var(--charcoal);background:var(--ivory-light)}
.cta-input--light::placeholder,.cta-textarea--light::placeholder{color:var(--light-grey)}

/* Dark variant — charcoal sections */
.cta-input--dark,.cta-textarea--dark{color:var(--ivory-light);background:rgba(255,255,255,.08);border-bottom-color:rgba(184,155,106,.3)}
.cta-input--dark::placeholder,.cta-textarea--dark::placeholder{color:rgba(240,237,230,.28)}

/* Submit button — dark variant (charcoal bg, ivory text, gold hover) */
.btn-dark{align-self:flex-start;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-light);background:var(--charcoal);border:none;padding:13px 36px;cursor:pointer;transition:background .3s}
.btn-dark:hover{background:var(--gold)}

/* ══ FORMHOLDER — shared submit → success → reset container ══ */
/* Size, colour and layout are always set per-instance; this class only provides the stacking context.
   REQUIRED per instance: set a background on .formholder__success matching the section background —
   without it the form will show through during the fade. */
.formholder{position:relative;overflow:hidden}
.formholder__form{transition:opacity 0.6s ease}
.formholder__success{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.6s ease,visibility 0s linear 0.6s}
.formholder__success.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 0.6s ease,visibility 0s linear 0s}

/* ══ CONTACT CTA FORM (modal) ══ */
#contact-cta-success{background:#fff}
.contact-cta-form{margin-top:24px;display:flex;flex-direction:column;gap:20px}


/* ══ CTA SUCCESS PANEL ══ */
.cta-success{max-width:620px;margin:0 auto;padding:72px 40px 80px;text-align:center;animation:fadeUp 1.4s cubic-bezier(0.25,0.46,0.45,0.94) 0.3s both}
.cta-success-icon{width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 32px;color:var(--gold);font-size:20px;flex-shrink:0}
.cta-success-label{font-size:9px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.cta-success-title{font-family:var(--serif);font-size:clamp(28px,4vw,44px);font-weight:300;color:inherit;line-height:1.2;margin-bottom:20px}
.cta-success-title em{font-style:italic;color:var(--gold)}
.cta-success-divider{width:40px;height:1px;background:var(--gold);margin:0 auto 28px}
.cta-success-body{font-size:14px;color:inherit;opacity:.7;line-height:1.9;max-width:440px;margin:0 auto}
/* modal variant — compact padding, smaller title */
.modal .cta-success{padding:40px 20px 32px}
.modal .cta-success-title{font-size:clamp(22px,3vw,32px);margin-bottom:16px}
.modal .cta-success-body{font-size:13px;max-width:340px}

/* ══ ANIMATIONS ══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ══ IMAGE PROTECTION ══ */
img{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}

/* ══ STUB BACK LINK ══ */
.stub-back{display:inline-flex;align-items:center;gap:10px;margin-top:48px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid-grey);cursor:pointer;background:none;border:none;font-family:var(--sans);transition:color .3s;text-decoration:none}
.stub-back:hover{color:var(--gold)}
.stub-back::before{content:"←";font-size:14px}

/* ══ GOLD BUTTON — shared across insights, locations, index ══ */
.loc-btn{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--charcoal);background:var(--gold-light);border:none;padding:15px 40px;cursor:pointer;transition:background .3s,letter-spacing .3s;text-decoration:none}
.loc-btn:hover{background:var(--gold);letter-spacing:.26em}

/* ══ REVEAL ANIMATION ══ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ══ RESPONSIVE — shared breakpoints ══ */
@media(max-width:860px){
  nav.desktop-nav{display:none}
  .hamburger{display:flex}
  header{padding:0 20px}
  footer{padding:28px 20px}
  .modal{padding:32px 20px}
}