/* Eastern Shore Mediation — shared production stylesheet
   Design tokens, motion, hover states, sticky nav, responsive, reduced-motion.
   Page content keeps the design's inline styling for pixel fidelity; this file
   supplies the keyframes those inline `animation:` declarations reference, the
   real hover behaviour (the design used non-functional `style-hover` attrs),
   and the responsive + accessibility layers. */

:root{
  --paper:#f4efe4;       /* light page background (warm cream) */
  --ink:#1e2a41;         /* default body text on paper */
  --navy:#0b1526;        /* page background */
  --navy-raised:#0e1a2e; /* hover / raised panels */
  --hairline:#1d2b42;    /* borders on navy */
  --border-2:#2c3a50;
  --border-3:#3a4a64;    /* button outlines */
  --cream:#f0ecdf;
  --body:#a7b3c6;
  --hero-sub:#b6c2cf;
  --muted:#8fa0b8;
  --faint:#5c6d87;
  --gold:#d1ab52;
  --gold-bright:#d5a95c;
  --green:#124048;   /* practice-cell hover fill — deep teal, matches the sheen */
  --green-text:#e9efe6;
  --green-text-2:#c3d0bf;
  --sage:#9cb096;
}

*{box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-family:'Libre Franklin',sans-serif;
  /* clip (not hidden) keeps sticky nav working while stopping full-bleed
     elements from spawning a horizontal scrollbar under the vertical one */
  overflow-x:clip;
}
img{max-width:100%}

/* Center each 1280px page as a stately column on wide screens */
.es-page{width:1280px;max-width:100%;margin:0 auto;background:var(--navy)}

/* ---------- Full-bleed utility ----------
   Element background/photo spans the whole viewport, but its inner content is
   padded so it lines up with the centered 1280px content column. Applied to the
   header nav, the home photo hero, and the interior teal top-bands so those
   read edge-to-edge (Sidley-style) while body sections stay columned.
   576px = half the 1280 column (640) minus the 64px section gutter. */
.es-fb{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding-left:calc(50vw - 576px) !important;
  padding-right:calc(50vw - 576px) !important;
}
.es-hero-fb.es-fb .fb-inner{padding-left:0 !important;padding-right:0 !important}
/* Editorial "headline layer": the nav, the home hero, and every interior page
   title band sit just off the left margin instead of indented to the content
   column. Body sections stay on the centered 1280 column for readability. */
.es-hero-fb.es-fb{padding-left:72px !important}
.es-nav.es-fb{padding-left:44px !important;padding-right:44px !important}
.es-pad.es-sheen.es-fb{padding-left:72px !important}
@media (max-width:760px){
  .es-hero-fb.es-fb{padding-left:24px !important}
  .es-nav.es-fb{padding-left:24px !important;padding-right:24px !important}
  .es-pad.es-sheen.es-fb{padding-left:24px !important}
}
@media (max-width:1280px){
  .es-fb{padding-left:64px !important;padding-right:64px !important}
}
@media (max-width:760px){
  .es-fb{padding-left:24px !important;padding-right:24px !important}
}

/* ---------- Bay sheen = two-color sweep (solid navy <-> solid teal, diagonal edge passes between) ---------- */
.es-sheen{position:relative;
  background:linear-gradient(115deg,#0b1526 0%,#0b1526 38%,#134650 62%,#134650 100%);
  background-size:300% 300%;
  animation:esDrift 24s ease-in-out infinite}

/* ---------- Full-bleed home hero (photo + navy gradient; headline on the left) ---------- */
.es-hero-fb{position:relative;min-height:calc(100svh - 85px);display:flex;align-items:center;overflow:hidden}
.es-hero-fb .fb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:brightness(1.02) contrast(1.02);transform-origin:52% 38%;animation:esKen 30s ease-in-out infinite alternate}
.es-hero-fb .fb-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,21,38,.9) 0%,rgba(11,21,38,.8) 30%,rgba(11,21,38,.6) 48%,rgba(11,21,38,.34) 58%,rgba(11,21,38,.14) 68%,transparent 82%),rgba(11,21,38,.36)}
.es-hero-fb .fb-inner{position:relative;z-index:1;padding:76px 64px;max-width:840px}
@media(max-width:760px){
  .es-hero-fb{min-height:calc(100svh - 150px)}
  .es-hero-fb .fb-inner{padding:48px 24px 56px;max-width:100%}
  .es-hero-fb .fb-veil{background:linear-gradient(180deg,rgba(11,21,38,.58) 0%,rgba(11,21,38,.80) 68%,rgba(11,21,38,.90) 100%)}
}

/* ---------- Keyframes ---------- */
@keyframes esDrift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes esShimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes esDrawIn{ to{transform:scaleX(1)} }
@keyframes esRiseIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes esKen{ from{transform:scale(1)} to{transform:scale(1.03)} }
@keyframes heroFade{ from{opacity:0} to{opacity:1} }

/* Home hero: a quiet block fade-in on load (opacity only, no movement) */
.es-hero-fb .fb-inner{opacity:0;animation:heroFade 1.5s ease-in-out both .2s}
@media (prefers-reduced-motion:reduce){
  .es-hero-fb .fb-inner{opacity:1 !important;animation:none !important}
}

/* Bright "neon" gold — the gold hero lines (eyebrow + "private resolution"
   tagline) are a luminous bright gold with a soft warm glow halo, so they read
   as lit / glowing against the dark hero. No animation. */
.gold-shimmer{
  background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  color:#ffce4d !important;
  -webkit-text-fill-color:#ffce4d;
  text-shadow:0 0 5px rgba(255,206,90,.6), 0 0 15px rgba(240,180,60,.4);
}
/* Matching soft glow on the white hero headline (homepage hero only, so
   interior page titles are unaffected). Keeps the warm cream color, just lit. */
.es-hero-fb .es-h1{
  text-shadow:0 0 7px rgba(245,240,225,.42), 0 0 20px rgba(255,255,255,.16);
}

/* ---------- Sticky translucent nav ---------- */
.es-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(11,21,38,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:padding .3s ease;
}
/* Shrink-to-compact on scroll: the band slims, the tagline drops, and the
   wordmark/logo ease down a touch. Inline styles carry the base values, so the
   scrolled overrides need !important. Toggled by the .scrolled class in site.js. */
.es-nav .es-logo,
.es-nav .es-wordmark,
.es-nav .es-tagline{transition:height .3s ease,font-size .3s ease,opacity .25s ease,margin .3s ease}
.es-nav.scrolled{padding-top:11px !important;padding-bottom:11px !important}
.es-nav.scrolled .es-logo{height:30px !important}
.es-nav.scrolled .es-wordmark{font-size:16px !important}
.es-nav.scrolled .es-tagline{
  opacity:0;height:0;margin-top:0 !important;overflow:hidden;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .es-nav,
  .es-nav .es-logo,
  .es-nav .es-wordmark,
  .es-nav .es-tagline{transition:none !important}
}
.nav-link{transition:color .25s ease}
.nav-link:hover{color:var(--cream)}

/* ---------- Buttons (subtle, quiet polish) ---------- */
/* Buttons set their colors inline, so hover states need !important to win. */
.btn-gold{transition:background .25s ease}
.btn-gold:hover{background:#e4c47c !important}
.btn-outline{transition:border-color .25s ease,color .25s ease,background .25s ease}
.btn-outline:hover{border-color:var(--gold) !important;color:var(--cream);background:rgba(209,171,82,.22)}
.link-gold{transition:opacity .25s ease}
.link-gold:hover{opacity:.72}

/* ---------- Practice-cell hover fill ---------- */
/* One calm color for all three: deep teal (matches the header sheen). */
.practice-cell{transition:background .35s ease}
.practice-cell:hover{background:var(--green)}

/* ---------- Date-card hover ---------- */
.date-card{transition:border-color .3s ease,background .3s ease}
.date-card:hover{border-color:var(--gold);background:var(--navy-raised)}

/* ---------- Dual-pathway hover ---------- */
.dual-cell{transition:background .35s ease}
.dual-cell:hover{background:rgba(255,255,255,.06)}

/* ---------- "Also in practice" / matter rows ---------- */
.row-link{transition:color .25s ease}
.row-link:hover{color:var(--gold)}

/* ---------- Credentials draw-in (scroll-triggered) ---------- */
.reveal-rule{
  height:2px;
  background:linear-gradient(90deg,#d1ab52,#d5a95c);
  transform-origin:left;transform:scaleX(0);
  margin-bottom:26px;
}
.reveal-body{opacity:0}
.reveal.in .reveal-rule{animation:esDrawIn 1.1s ease forwards}
.reveal.in .reveal-body{animation:esRiseIn .9s ease forwards}
.reveal.in .cell:nth-child(1) .reveal-rule{animation-delay:.2s}
.reveal.in .cell:nth-child(2) .reveal-rule{animation-delay:.55s}
.reveal.in .cell:nth-child(3) .reveal-rule{animation-delay:.9s}
.reveal.in .cell:nth-child(1) .reveal-body{animation-delay:.5s}
.reveal.in .cell:nth-child(2) .reveal-body{animation-delay:.85s}
.reveal.in .cell:nth-child(3) .reveal-body{animation-delay:1.2s}

/* ---------- Contact form fields ---------- */
.es-field{
  width:100%;
  background:transparent;
  border:none;border-bottom:1px solid var(--border-2);
  padding:12px 2px;
  font-family:'Libre Franklin',sans-serif;font-size:14px;font-weight:300;
  color:var(--cream);
  transition:border-color .25s ease;
}
.es-field::placeholder{color:var(--faint)}
.es-field:focus{outline:none;border-bottom-color:var(--gold)}
textarea.es-field{resize:vertical;min-height:44px}
.es-field.err{border-bottom-color:#c0703f}
.form-error{display:none;color:#d08a5c;font-family:'Libre Franklin',sans-serif;font-size:12px;letter-spacing:.04em}
.form-error.show{display:block}

/* From-the-Bench bleed image */
.es-fb-media{min-height:100%}

/* FAQ accordion (design screen 9b) */
.faq{border-top:1px solid var(--hairline)}
.faq:last-child{border-bottom:1px solid var(--hairline)}
.faq > summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 4px;cursor:pointer;list-style:none;font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--cream);transition:color .25s ease}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary:hover{color:var(--gold-bright)}
.faq-sign{color:var(--gold);font-family:'Libre Franklin',sans-serif;font-size:18px;flex:none}
.faq-sign::after{content:"+"}
.faq[open] .faq-sign::after{content:"\2212"}
.faq-a{padding:0 4px 24px;font-family:'Libre Franklin',sans-serif;font-size:15px;line-height:1.8;color:var(--body);font-weight:300;max-width:640px}

/* ---------- Responsive ---------- */
/* Narrow desktops/laptops: drop the wordmark tagline and tighten the nav so
   the single-row header never collides before the mobile wrap kicks in. */
@media (max-width:1240px){
  .es-tagline{display:none}
  .es-navlinks{gap:12px !important;font-size:11px !important;letter-spacing:.06em !important}
}
@media (max-width:1000px){
  .es-fb-media{min-height:360px}
  .es-grid-2,.es-grid-3,.es-grid-4,.es-hero{
    grid-template-columns:1fr !important;
  }
  .es-hero{gap:48px !important}
  .es-hero .es-hero-media{max-width:420px}
  .es-grid-3{gap:40px !important}
  .es-grid-4{gap:16px !important}
  .es-flex-2{flex-direction:column !important}
  .es-flex-2 > *{border-left:none !important;padding-left:0 !important;padding-right:0 !important}
  .es-dual{grid-template-columns:1fr !important}
  .es-dual > *{border-right:none !important;border-top:1px solid var(--hairline)}
  .es-how > *{border-left:none !important;padding:0 !important;margin-bottom:8px}
  .es-how{grid-template-columns:1fr !important;gap:40px !important}
}
@media (max-width:760px){
  .es-nav{padding:14px 20px !important;flex-wrap:wrap;gap:14px !important}
  .es-navlinks{gap:12px !important;flex-wrap:wrap;font-size:11px !important}
  .es-pad{padding-left:24px !important;padding-right:24px !important}
  .es-pad-y{padding-top:56px !important;padding-bottom:56px !important}
  .es-mx{margin-left:24px !important;margin-right:24px !important}
  .es-hero{padding:48px 24px !important}
  .es-h1{font-size:36px !important}
  .es-h2{font-size:30px !important}
  .es-panel{padding:36px 26px !important}
  .es-tagline{display:none}       /* nav sub-tagline hides on very small screens */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .reveal-rule{transform:scaleX(1)}
  .reveal-body{opacity:1}
  .es-sheen{animation:none !important;background:#12303a !important}
}

/* ---------- Human-centered homepage (Concept D, approved 2026-07-18) ---------- */
.es-hero-hc{position:relative;overflow:hidden;background:radial-gradient(1150px 760px at 74% 26%,#16273f 0%,var(--navy) 62%),var(--navy)}
.es-hero-hc::after{content:"";position:absolute;right:-6%;top:18%;width:760px;height:760px;background:radial-gradient(circle,rgba(209,171,82,.10) 0%,rgba(209,171,82,.04) 42%,transparent 68%);pointer-events:none}
.es-hero-hc .hc-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:88px 64px 104px;display:grid;grid-template-columns:6.2fr 5.8fr;gap:84px;align-items:center;opacity:0;animation:heroFade 1.5s ease-in-out both .2s}
@media (prefers-reduced-motion:reduce){.es-hero-hc .hc-in{opacity:1 !important;animation:none !important}}
.hc-txt{position:relative;padding-left:42px}
.hc-txt::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,transparent 0%,rgba(209,171,82,.55) 18%,rgba(209,171,82,.55) 82%,transparent 100%)}
.hc-h1{font-family:'Cormorant Garamond',serif;font-size:46px;line-height:1.24;color:var(--cream);font-weight:500;margin:0}
.hc-decided{display:block;font-size:70px;line-height:1.1;white-space:nowrap;color:#ddb964;font-style:italic;margin-top:30px;text-shadow:0 0 7px rgba(255,214,110,.5),0 0 22px rgba(244,190,80,.3)}
.hc-frame{position:relative;max-width:450px;justify-self:end;filter:drop-shadow(0 38px 66px rgba(0,0,0,.6))}
.hc-frame::before{content:"";position:absolute;inset:-16px 16px 16px -16px;border:1px solid #b08d4a;opacity:.75}
.hc-frame img{position:relative;display:block;width:100%;height:540px;object-fit:cover;object-position:50% 12%;filter:saturate(.98) brightness(1.03)}
.hc-capbar{position:relative;background:#d1ab52;color:var(--navy);padding:15px 20px;border-bottom:4px solid #b08d4a}
.hc-timeline{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.hc-timeline::before{content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:#1d2b42}
.hc-tcell{padding-right:40px;position:relative}
.hc-dot{width:15px;height:15px;border-radius:50%;border:1px solid #d1ab52;background:var(--navy);position:relative;z-index:1}
.hc-now .hc-dot{background:#d1ab52;box-shadow:0 0 14px rgba(209,171,82,.6)}
.hc-why{border:1px solid rgba(209,171,82,.35)}
.hc-pull-q{font-family:'Cormorant Garamond',serif;font-size:31px;line-height:1.4;color:#ddb964;font-style:italic;text-shadow:0 0 6px rgba(255,214,110,.38)}
.hc-cards{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.hc-card{background:var(--navy-raised,#0e1a2e);border:1px solid #1d2b42;border-top:2px solid #d1ab52;padding:48px 44px;transition:background .3s ease,border-color .3s ease}
.hc-card:hover{background:var(--green);border-color:#b08d4a;border-top-color:#d1ab52}
.hc-card:hover .link-gold{opacity:.85}
.hc-mono{width:52px;height:52px;border-radius:50%;border:1px solid #b08d4a;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:19px;color:#d1ab52;flex:none}
.hc-approach{display:grid;grid-template-columns:repeat(3,1fr)}
.hc-approach .hc-cell+.hc-cell{border-left:1px solid #1d2b42}
.nav-cta{transition:background .25s ease}
.nav-cta:hover{background:#e4c47c !important}
@media (max-width:960px){
  .es-hero-hc .hc-in{grid-template-columns:1fr;gap:56px;padding:56px 24px 72px}
  .hc-txt{padding-left:0}
  .hc-txt::before{display:none}
  .hc-h1{font-size:36px}
  .hc-decided{font-size:42px;white-space:normal}
  .hc-frame{justify-self:start;max-width:340px}
  .hc-frame img{height:420px}
  .hc-timeline{grid-template-columns:1fr;gap:36px}
  .hc-timeline::before{display:none}
  .hc-cards{grid-template-columns:1fr}
  .hc-approach{grid-template-columns:1fr}
  .hc-approach .hc-cell+.hc-cell{border-left:none;border-top:1px solid #1d2b42;padding-top:40px !important}
}