/* ==========================================================================
   LinkedEfficiency — site stylesheet
   Design tokens per design handoff (mockup zip): purple + green, DM Sans.
   ========================================================================== */

:root{
  /* Brand — purple family sampled from the logo.
     --purple is the logo's exact background color (#3C3758), so the logo
     block sits invisibly on the nav. All other purples share its hue (249°)
     and saturation (23%), varying only in lightness. */
  --purple:#3C3758;        /* nav, CTA band, primary surfaces — matches logo */
  --purple-dark:#272339;   /* footer, headings */
  --purple-mid:#918BB6;    /* muted text on dark (lightened to 4.7:1 on footer) */
  --purple-soft:#A6A1C4;   /* links on dark */
  --purple-pale:#C1BDD6;   /* body copy on dark */
  /* Green — two roles, deliberately split.
     --green is the brand green from your printed collateral. It is DECORATIVE
     ONLY: card top-borders, active tab indicators, the eyebrow dot, focus
     rings. It never sits behind or beside text, because white on #69BF77 is
     only 2.25:1 (WCAG AA needs 4.5:1).
     --green-ink is the same hue and saturation, darkened until it passes:
     5.05:1 against white. Use it for anything involving text — filled
     buttons, links, eyebrow labels, required-field markers. */
  --green:#69BF77;         /* brand accent — decorative only, never behind text */
  --green-ink:#357D41;     /* text-safe green: button fills, links (5.05:1) */
  --green-ink-hover:#2B6434;  /* button/link hover (7.06:1) */
  --green-tint:#eef7f0;    /* accent wash */

  /* Neutrals — the mockup's #777/#888/#999 fell just under 4.5:1 on the
     light backgrounds they sit on, so the three lightest are nudged darker.
     The visual hierarchy is unchanged; each still reads lighter than the one
     above it. All now clear 4.5:1 on #fff, #f7f7f7, and #f5f5f5. */
  --text:#555;
  --text-2:#666;
  --text-3:#6C6C6C;
  --text-4:#707070;
  --text-5:#707070;
  --white:#fff;
  --bg-soft:#f7f7f7;
  --bg-card:#fafafa;
  --bg-crumb:#f5f5f5;
  --line:#e0e0e0;
  --line-2:#e5e5e5;
  --line-3:#eee;

  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Headline face only — the h1 on each page. Fredoka is the closest open
     match to the logo wordmark. Everything else stays in --font. */
  --font-h1:'Fredoka','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius:4px;
  --pad-x:48px;
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.65;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;color:var(--purple-dark);line-height:1.25;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--green-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:2px}
ul{margin:0;padding:0}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green-ink);color:#fff;padding:12px 20px;font-weight:600;
}
.skip-link:focus{left:0;text-decoration:none}

.section{padding:64px var(--pad-x)}
.inner{max-width:var(--max);margin:0 auto}

/* ---------- band alignment ----------
   .section centres its content in a --max column via .inner. The full-bleed
   bands (nav, breadcrumb, intro, hero, CTA, footer) have no such wrapper, so
   on screens wider than --max + 2*--pad-x their content used to sit flush
   left while the cards below were centred — everything misaligned.
   This pads each band to the same optical column without touching the markup:
   normal --pad-x on narrow screens, growing to match .inner once the viewport
   exceeds --max. Backgrounds still run edge to edge. */
.nav,.crumb,.intro,.hero,.pagehead,.cta,.footer{
  padding-left:max(var(--pad-x), calc((100% - var(--max)) / 2));
  padding-right:max(var(--pad-x), calc((100% - var(--max)) / 2));
}
/* .crumb sits inside .pagehead, which already carries the column padding. */
.pagehead .crumb{padding-left:0;padding-right:0}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--green-ink);margin:0 0 8px;
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 8px;
}
.label{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--text-5);margin:0 0 12px;
}
.lede{font-size:16px;line-height:1.7;color:var(--text-3);max-width:70ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--font);font-size:15px;font-weight:600;
  padding:14px 32px;border-radius:var(--radius);border:2px solid transparent;
  cursor:pointer;text-align:center;transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--green-ink);color:#fff;border-color:var(--green-ink)}
.btn--primary:hover{background:var(--green-ink-hover);border-color:var(--green-ink-hover);color:#fff}
.btn--ghost{background:transparent;color:var(--purple-dark);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--green-ink);color:var(--green-ink)}
.btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--on-dark:hover{background:rgba(255,255,255,.1);color:#fff}
.btn--sm{padding:10px 24px;font-size:14px}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad-x);background:var(--purple);position:relative;z-index:60;
}
.nav__logo img{height:38px;width:auto;object-fit:contain}
.nav__toggle{
  display:none;background:none;border:0;padding:8px;cursor:pointer;
}
.nav__toggle span{
  display:block;width:20px;height:2px;background:rgba(255,255,255,.8);border-radius:1px;
}
.nav__toggle span + span{margin-top:4px}
.nav__links{
  display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;
}
.nav__links a{
  font-size:15px;font-weight:500;color:rgba(255,255,255,.7);
}
.nav__links a:hover{color:#fff;text-decoration:none}
.nav__links a[aria-current="page"]{color:#fff;font-weight:600}
.nav__links .nav__cta{
  background:var(--green-ink);color:#fff;padding:10px 24px;border-radius:var(--radius);
  font-size:14px;font-weight:600;
}
.nav__links .nav__cta:hover{background:var(--green-ink-hover);color:#fff}

/* ---------- breadcrumb ---------- */
.crumb{
  padding:12px var(--pad-x);background:var(--bg-crumb);border-bottom:1px solid var(--line);
  font-size:13px;color:var(--text-4);
}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumb li::after{content:"›";margin-left:6px;color:var(--text-4)}
.crumb li:last-child::after{content:""}
.crumb a{color:var(--green-ink)}

/* ---------- page head (interior pages) ----------
   Same treatment as the home hero but shorter — a slim purple band with a
   photo behind it, carrying the breadcrumb, h1 and intro paragraph.
   The overlay differs from the hero's in shape, not just strength: it holds
   ~0.95 out to 56% (where the text actually ends) then falls away fast, so
   the right 40% of the photo stays visible. Several of these images are low
   in contrast and a gentler falloff made them disappear entirely.
   Measured against all four page photos, these stops hold the headline at
   9.3:1 and the body copy at 5.1:1. If you swap a photo, re-check the body
   copy — it's the binding constraint, not the headline. */
.pagehead{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--purple);color:#fff;
  padding:30px var(--pad-x) 38px;
}
.pagehead__media{position:absolute;inset:0;z-index:-2}
.pagehead__media img{width:100%;height:100%;object-fit:cover;display:block}
.pagehead::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(60,55,88,.96) 0%,
    rgba(60,55,88,.94) 56%,
    rgba(60,55,88,.58) 72%,
    rgba(60,55,88,.36) 100%);
}
.pagehead__content{position:relative;z-index:1}
.pagehead h1{margin-bottom:14px}
.pagehead p{font-size:15px;line-height:1.65;color:var(--purple-pale);max-width:760px;margin:0}

/* Breadcrumb on the dark band. The green link colour was only 3.4:1 over the
   photos, so links go white here and the current page uses the pale purple. */
.pagehead .crumb{
  background:transparent;border-bottom:0;margin-bottom:14px;
  color:var(--purple-pale);
}
.pagehead .crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pagehead .crumb a:hover{color:var(--green)}
.pagehead .crumb li::after{color:var(--purple-soft)}

/* ---------- inline links on dark bands ----------
   The global link colour (--green-ink #357D41) is tuned for white
   backgrounds. On the purple bands it measured 2.0:1 — worse than any other
   failure on the site. Inline links inside .pagehead, .hero and .cta copy go
   white instead: 10.3:1 over the page-head photos, and it stays safe if a
   photo is ever swapped, which a green would not.
   The underline is doing real work — the surrounding body copy is
   --purple-pale, so colour alone would be the only cue, and WCAG 1.4.1 says
   colour alone can't distinguish a link. */
.pagehead p a,
.hero p a,
.cta p a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.pagehead p a:hover,
.hero p a:hover,
.cta p a:hover{color:#fff;text-decoration-thickness:2px}

/* ---------- page intro (light variant — unused, kept for reuse) ---------- */
.intro{
  padding:44px var(--pad-x) 36px;background:var(--white);
  border-bottom:1px solid var(--line-2);
}
.intro h1{margin-bottom:16px}
.intro p{font-size:15px;line-height:1.65;color:var(--text);max-width:760px}

/* ---------- hero (home) ----------
   Full-bleed photo with a purple overlay on top. The overlay is a gradient,
   not a flat wash: heavy on the left where the text sits, lighter on the
   right so the photograph is actually visible.
   The 0.94 stop is not arbitrary — measured against a pure-white photo (the
   worst case) it keeps white headline text at 9.3:1 and the pale body copy
   at 5.1:1, both clearing WCAG AA. Do not lower it below 0.91 or the body
   copy fails on bright images.
   The purple background on .hero itself means the band still looks right if
   the image is missing or slow. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--purple);color:#fff;
  padding:80px var(--pad-x);
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(60,55,88,.96) 0%,
    rgba(60,55,88,.94) 42%,
    rgba(60,55,88,.74) 72%,
    rgba(60,55,88,.58) 100%);
}
.hero__content{position:relative;z-index:1}
.hero .eyebrow{color:var(--green)}
.hero h1{color:#fff;margin-bottom:20px}

/* ---------- headline (h1 only) ----------
   Fredoka. Nothing else changes face — h2, h3, nav, buttons, and body all
   stay in --font (DM Sans). Two sizes on purpose:
     · home hero  — 30px / 400, heavier to hold up as white on dark purple
     · interior   — 28px / 300, lighter reads fine as dark ink on white
   To revert either, delete its block. Note the home page only loads
   Fredoka 400 and the interior pages only load 300 — if you change a
   weight here, update that page's Google Fonts <link> to match. */
.hero h1,
.pagehead h1,
.intro h1{
  font-family:var(--font-h1);
  font-weight:400;
  line-height:1.3;
  letter-spacing:0;
  max-width:38ch;
}
.hero h1{font-size:30px}
.pagehead h1{font-size:28px;color:#fff}
.intro h1{font-size:28px}
.hero p{color:var(--purple-pale);font-size:17px;line-height:1.7;max-width:60ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ---------- generic card grids ---------- */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{
  padding:24px;background:var(--bg-card);border:1px solid var(--line-3);
  border-radius:var(--radius);border-top:3px solid var(--green);
}
.card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.card p{font-size:14px;line-height:1.65;color:var(--text)}
.card__link{
  display:inline-block;margin-top:12px;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ---------- section headers ---------- */
.sec-head{max-width:70ch;margin-bottom:32px}
.sec-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.01em;margin-bottom:12px}
.sec-head p{font-size:15px;color:var(--text-3)}
.section--soft{background:var(--bg-soft)}
.section--soft .card{background:#fff}

/* ---------- services: tabs ---------- */
.svc{display:flex;min-height:640px;align-items:stretch}
.svc__sidebar{
  flex:0 0 272px;background:var(--bg-soft);border-right:1px solid var(--line);
  padding:24px 0;
}
.svc__tablist{display:block}
.svc__tab{
  display:block;width:100%;text-align:left;background:none;cursor:pointer;
  padding:14px 28px;border:0;border-left:3px solid transparent;
  font-family:var(--font);font-size:14px;font-weight:500;color:var(--text-2);
  transition:color .15s,background .15s,border-color .15s;
}
.svc__tab:hover{color:var(--purple-dark)}
.svc__tab[aria-selected="true"]{
  background:var(--white);border-left-color:var(--green);
  font-weight:600;color:var(--purple-dark);
}
.svc__programs{
  margin:28px 28px 0;padding-top:24px;border-top:1px solid var(--line);
}
.svc__programs ul{list-style:none;font-size:13px;line-height:2;color:var(--text)}
.svc__panelwrap{flex:1;padding:36px 44px;background:var(--white);min-width:0}
.svc__panel[hidden]{display:none}
.svc__panel h2{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--green-ink);margin:0;
}
.svc__subhead{font-size:14px;line-height:1.6;color:var(--text-3);max-width:640px;margin:0 0 32px}
.programs-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.programs-chips li{
  font-size:12px;padding:6px 12px;background:var(--bg-card);
  border:1px solid var(--line);border-radius:3px;color:var(--text);
}

/* ---------- credential columns ---------- */
.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 32px;list-style:none}
.creds li{
  font-size:14px;color:var(--text);padding:8px 0 8px 22px;position:relative;
  border-bottom:1px solid var(--line-3);
}
.creds li::before{
  content:"";position:absolute;left:0;top:15px;
  width:8px;height:8px;border-radius:50%;background:var(--green);
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-2);max-width:820px}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 32px 20px 0;position:relative;
  font-size:16px;font-weight:600;color:var(--purple-dark);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:16px;
  font-size:22px;font-weight:400;color:var(--green-ink);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--green-ink)}
.faq__answer{padding:0 32px 22px 0;font-size:15px;line-height:1.7;color:var(--text)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.field{margin-bottom:20px}
.field label{
  display:block;font-size:13px;font-weight:600;color:var(--purple-dark);margin-bottom:6px;
}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--font);font-size:15px;color:var(--text);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--green);outline:none;box-shadow:0 0 0 3px var(--green-tint);
}
.field textarea{min-height:150px;resize:vertical}
.req{color:var(--green-ink)}
/* Form result banner. Empty and invisible until site.js fills it, so it
   takes up no space on a normal page load. Colours reuse the tokens:
   --green-ink on the tint for success, and a red that clears 4.5:1 on its
   own tint for failure. */
.form-status{margin:0}
.form-status--ok,
.form-status--err{
  margin:0 0 24px;padding:14px 18px;border-radius:var(--radius);
  font-size:15px;line-height:1.55;border-left:3px solid;
}
.form-status--ok{background:var(--green-tint);border-color:var(--green-ink);color:#255030}
.form-status--err{background:#fdf0ef;border-color:#a32d2d;color:#7d2222}

.contact-aside{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:28px;
}
.contact-aside h2{font-size:16px;margin-bottom:16px}
.contact-aside dt{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--text-5);margin-top:18px;
}
.contact-aside dt:first-of-type{margin-top:0}
.contact-aside dd{margin:4px 0 0;font-size:15px;color:var(--text)}

/* ---------- CTA band ---------- */
.cta{
  padding:56px var(--pad-x);background:var(--purple);
  display:flex;align-items:center;gap:48px;
}
.cta__copy{flex:1}
.cta h2{font-size:clamp(1.5rem,2.6vw,1.75rem);color:#fff;margin-bottom:10px}
.cta p{font-size:15px;line-height:1.7;color:var(--purple-pale);max-width:62ch;margin:0}
.cta .btn{flex-shrink:0}

/* ---------- footer ---------- */
.footer{
  padding:28px var(--pad-x);background:var(--purple-dark);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer p{font-size:13px;color:var(--purple-mid);margin:0}
.footer ul{display:flex;gap:24px;list-style:none}
.footer a{font-size:13px;color:var(--purple-soft)}
.footer a:hover{color:#fff}

/* ==========================================================================
   Responsive — breakpoint at 768px per design handoff
   ========================================================================== */
@media (max-width:1024px){
  :root{--pad-x:32px}
  .contact-grid{grid-template-columns:1fr;gap:32px}
}

@media (max-width:768px){
  :root{--pad-x:20px}
  body{font-size:15px}
  .section{padding:40px var(--pad-x)}
  .hero{padding:52px var(--pad-x)}
  /* On mobile the text spans the full width, so the left-to-right gradient
     would leave copy sitting over the thin end of the overlay. Go vertical
     instead — dense behind the text, easing toward the bottom. */
  .hero::before{
    background:linear-gradient(180deg,
      rgba(60,55,88,.95) 0%,
      rgba(60,55,88,.94) 62%,
      rgba(60,55,88,.80) 100%);
  }
  .intro{padding:28px var(--pad-x) 24px}

  .nav__toggle{display:block}
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--purple);padding:8px 0 16px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .nav__links.is-open{display:flex}
  .nav__links li{padding:0 var(--pad-x)}
  .nav__links a{display:block;padding:12px 0;font-size:16px}
  .nav__links .nav__cta{display:inline-block;margin-top:10px;padding:12px 24px}

  .grid--2,.grid--3{grid-template-columns:1fr;gap:14px}
  .creds{grid-template-columns:1fr}

  /* Services: sidebar tabs → horizontal scrolling tabs */
  .svc{flex-direction:column;min-height:0}
  .svc__sidebar{
    flex:none;width:100%;border-right:0;border-bottom:1px solid var(--line);padding:0;
  }
  .svc__tablist{
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .svc__tab{
    flex:0 0 auto;width:auto;white-space:nowrap;
    padding:14px 16px;font-size:13px;color:var(--text-4);
    border-left:0;border-bottom:2px solid transparent;
  }
  .svc__tab[aria-selected="true"]{
    background:transparent;border-left:0;border-bottom-color:var(--green);
    color:var(--purple-dark);
  }
  .svc__programs{display:none}
  .svc__panelwrap{padding:28px var(--pad-x)}

  .cta{flex-direction:column;align-items:flex-start;gap:24px;padding:40px var(--pad-x)}
  .footer{flex-direction:column;align-items:flex-start;gap:16px}
  .footer ul{flex-wrap:wrap;gap:16px}
}

/* Programs list shows as chips below mobile tabs */
.programs-mobile{display:none}
@media (max-width:768px){
  .programs-mobile{display:block;padding:24px var(--pad-x) 0}
}

@media print{
  .nav,.cta,.footer,.crumb{background:#fff!important;color:#000!important}
  .svc__panel[hidden]{display:block!important}
}