/* =========================================================
   ELearningTEK / Edianas — shared site styles
   Palette: "Brand Teal Blend" — a green mixed directly between
   the branding doc's Leaf Green (#9BBB59) and the cooler teal
   from the very first mockup, so it reads fresher than the
   doc's olive tone without becoming a full teal swap. Blue Gray
   (#7A8BAD) is unchanged from the branding doc. No section uses
   a solid dark-green fill anymore — the old .process dark block
   is now a light section with a colored top edge, like every
   other card on the site.

   --green-deep is the darker, text-safe shade (kickers, nav,
   labels — 6.3:1 on white); --green-cta is the brighter fill
   used for buttons and other solid color blocks (4.7:1, still
   AA-compliant for white text at button size).

   Logo: the approved mark ("Option 1A") — a chamfered bracket
   with three round dots, ring thickened slightly (inner radius
   94 vs. the original 100) to stay balanced against the lighter
   Outfit 500 wordmark. The mark now does double duty as the
   literal letter E in two places: once before "Learning" (E in
   "ELearning") and again inside "TEK" (E in "TEKnologies") — a
   hidden "E" span before each SVG keeps both readable to screen
   readers/SEO. Colors are strictly two: "Learning" is set in Leaf
   Green, while both marks + "T" + "Knologies" are set in Ink, so
   the lockup reads as one connected two-color unit rather than an
   icon next to a name. Each mark is sized to the true cap-height
   of the surrounding text (measured, not eyeballed) so it never
   overshoots the caps. No tagline runs in the header; "Est. 2010"
   and the location live in the About stats and footer instead.
   See .brand / .brand-mark / .brand-name / .learning / .tek below.

   Note on the "i" dot: Outfit's native lowercase "i" tittle is a
   flat square, not a circle — that's the correct, intended shape
   for this geometric-sans typeface and needs no CSS override. It
   simply reads as a deliberately different shape from the mark's
   round dots (letterform vs. icon), which is expected.

   Fonts, per the branding doc:
     Title    — WithoutSans-Semibold  (no free/licensed source
                yet, so titles use Outfit 600 as a geometric
                stand-in until the real font files are supplied)
     Subtitle — Helvetica Bold
     Body     — Helvetica Regular
   Helvetica itself only renders where it's actually installed
   (mainly macOS); everyone else — including Windows, with no
   Helvetica by default — sees the Arial fallback, which is
   metric-identical.
   ========================================================= */
:root{
  --ink:#2e3a4f;
  --ink-soft:#5b6b85;
  --green-deep:#3a6b3e;
  --green-cta:#45814a;
  --green:#5cac62;
  --green-bright:#9ecba0;
  --green-pale:#e7f3e7;
  --paper:#faf9f7;
  --card:#ffffff;
  --line:#e4e7e2;
  --radius:16px;
  --maxw:1080px;

  /* brand hues, straight from the branding doc */
  --blue-gray:#7a8bad;
  --leaf-green:#9bbb59;
  --dark-blue:#3a4760;

  /* type roles */
  --font-title:'Outfit','Without Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.text-link{color:var(--blue-gray);font-weight:700;text-decoration:none;}
.text-link:hover{color:var(--green-deep);}
img{max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section{padding:64px 0;}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,249,247,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;padding-bottom:14px;
}
.brand{display:flex;align-items:baseline;text-decoration:none;color:var(--ink);}
.brand-mark{width:17.55px;height:18px;margin-right:1px;}
.brand-mark.inline-e{margin-left:1px;margin-right:1px;}
.brand-name{font-size:27px;font-weight:500;letter-spacing:-.3px;font-family:var(--font-title);}
.brand-name .learning{color:var(--leaf-green);}
.brand-name .tek{color:var(--ink);font-size:inherit;}
.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;}
nav{display:flex;align-items:center;gap:28px;}
nav a{font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink-soft);}
nav a:hover{color:var(--green-deep);}
nav a.is-active{color:var(--green-deep);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green-cta);color:#fff;
  padding:11px 22px;border-radius:999px;
  font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 6px 16px rgba(69,129,74,.25);
  white-space:nowrap;
  border:none;cursor:pointer;
  font-family:inherit;
}
.btn:hover{background:var(--green);}
.btn-ghost{
  background:transparent;color:var(--green-deep);
  border:1.5px solid var(--green-deep);box-shadow:none;
}
.btn-ghost:hover{background:var(--green-pale);}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:72px 0 64px;
  background:
    radial-gradient(600px 300px at 85% -10%, rgba(158,203,160,.28), transparent 60%),
    radial-gradient(500px 280px at 100% 100%, rgba(122,139,173,.16), transparent 60%);
}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
.hero.hero-sm{padding:52px 0 46px;}
.hero.hero-sm .wrap{grid-template-columns:1fr;}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--green-deep);background:var(--green-pale);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
h1{font-size:42px;line-height:1.12;margin:0 0 16px;letter-spacing:-.5px;}
.hero-sm h1{font-size:34px;}
.hero p.lead{font-size:17px;color:var(--ink-soft);max-width:560px;margin:0 0 28px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:0 20px 40px -20px rgba(46,58,79,.18);
}
.hero-card h3{margin:0 0 14px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);}
.stat-row{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);}
.stat-row:first-of-type{border-top:none;}
.stat-row .num{font-weight:800;color:var(--green-deep);font-size:20px;}
.stat-row .lbl{font-size:14.5px;color:var(--ink-soft);max-width:170px;text-align:right;}

/* ---------- Section headings ---------- */
.kicker{
  font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--green-deep);margin:0 0 10px;
}
h2{font-size:28px;margin:0 0 12px;letter-spacing:-.3px;}
.about h2{font-size:22px;line-height:1.35;}
.section-lead{color:var(--ink-soft);max-width:640px;font-size:15.5px;margin:0 0 34px;}

/* ---------- Challenges ---------- */
.challenges{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.chip-grid{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--ink-soft);
}

/* ---------- Solutions / Services grid ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;
}
.card .icon{
  width:40px;height:40px;border-radius:10px;background:var(--green-pale);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  color:var(--green-deep);
}
.card h3{font-size:16px;margin:0 0 8px;}
.card p{font-size:13.5px;color:var(--ink-soft);margin:0;}

/* ---------- Process ---------- */
.process{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.process .kicker{color:var(--green-deep);}
.process h2{color:var(--ink);}
.process .section-lead{color:var(--ink-soft);}
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px;}
.pstep{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--green-cta);border-radius:var(--radius);padding:22px;}
.pstep .n{font-size:12px;font-weight:800;color:var(--green-deep);letter-spacing:1px;margin-bottom:8px;}
.pstep h3{margin:0 0 8px;font-size:16px;color:var(--ink);}
.pstep p{margin:0;font-size:13.5px;color:var(--ink-soft);}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;}
.pstep .tag-row{margin-top:14px;}
.tag{
  font-size:12.5px;font-weight:600;background:var(--green-pale);color:var(--green-deep);
  border:1px solid var(--line);padding:6px 12px;border-radius:999px;
}

/* ---------- Testimonial ---------- */
.testimonial{text-align:center;}
.testimonial blockquote{
  font-size:22px;font-weight:600;line-height:1.4;max-width:720px;margin:0 auto 18px;
  color:var(--ink);
}
.testimonial blockquote::before{content:"\201C";color:var(--green);}
.testimonial blockquote::after{content:"\201D";color:var(--green);}
.testimonial cite{font-style:normal;font-size:14px;color:var(--ink-soft);}
.testimonial cite strong{color:var(--ink);}

/* ---------- Clients ---------- */
.clients{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-bottom:50px;}
.logo-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%);
}
.logo-track{
  display:flex;align-items:center;width:max-content;
  animation:logo-scroll 36s linear infinite;
}
.logo-track:hover{animation-play-state:paused;}
.logo-item{
  flex:none;display:flex;align-items:center;justify-content:center;
  height:64px;padding:0 32px;
}
.logo-item img{
  height:38px;width:auto;max-width:140px;
  object-fit:contain;
  opacity:.82;filter:grayscale(100%) contrast(1.15);
  transition:opacity .2s ease,transform .2s ease;
}
.logo-item img:hover{opacity:1;transform:scale(1.06);}
@keyframes logo-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}
  .logo-track [aria-hidden="true"]{display:none;}
}
.industries-block{margin-top:32px;padding-top:28px;border-top:1px solid var(--line);}
.industries-block .kicker{margin-bottom:26px;}
.industry-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.industry-pill{
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);
  padding:7px 14px;border-radius:999px;
}

/* ---------- About ---------- */
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
.timeline-card{padding:26px 26px 22px;}
.timeline{display:flex;flex-direction:column;}
.tl-item{position:relative;padding-left:26px;padding-bottom:18px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";position:absolute;left:2px;top:4px;
  width:9px;height:9px;border-radius:50%;
  background:var(--green-cta);border:2px solid var(--green-pale);
}
.tl-item::after{
  content:"";position:absolute;left:6px;top:15px;bottom:-2px;width:1px;
  background:var(--line);
}
.tl-item:last-child::after{content:none;}
.tl-year{font-weight:800;color:var(--green-deep);font-size:14px;margin-bottom:3px;}
.tl-desc{font-size:13.5px;color:var(--ink-soft);line-height:1.45;}
.about .wrap+.wrap{display:block;margin-top:40px;padding-top:40px;border-top:1px solid var(--line);}
.values-heading{
  font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--green-deep);margin:0 0 20px;
}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 32px;}
.value{display:flex;gap:12px;align-items:flex-start;}
.value .dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:8px;flex:0 0 auto;
}
.value strong{display:block;font-size:14.5px;}
.value span{font-size:13.5px;color:var(--ink-soft);}
.value-prop{color:var(--ink);font-weight:600;font-size:16.5px;line-height:1.5;}
.mission-statement{
  border-left:3px solid var(--green-cta);background:var(--green-pale);
  padding:16px 20px;border-radius:0 10px 10px 0;
  font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5;
  margin:0 0 28px;max-width:640px;
}
.mission-label{color:var(--green-deep);}

/* ---------- CTA / Contact ---------- */
.cta{
  background:linear-gradient(135deg,var(--green-cta),var(--green));
  border-radius:24px;color:#fff;padding:48px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.cta h2{color:#fff;margin:0 0 8px;}
.cta p{color:rgba(255,255,255,.85);margin:0;max-width:420px;font-size:14.5px;}
.cta .btn{background:#fff;color:var(--green-deep);box-shadow:none;}
.cta .btn:hover{background:var(--green-pale);}
.contact-info{display:flex;gap:26px;flex-wrap:wrap;margin-top:20px;font-size:13.5px;color:var(--ink-soft);}
.contact-info div{display:flex;align-items:center;gap:8px;}

/* ---------- Footer ---------- */
footer{padding:30px 0;border-top:1px solid var(--line);}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
footer p{margin:0;font-size:12.5px;color:var(--ink-soft);}
footer .foot-links{display:flex;gap:18px;}
footer .foot-links a{font-size:12.5px;color:var(--ink-soft);text-decoration:none;}
footer .foot-links a:hover{color:var(--green-deep);}

/* =========================================================
   Gallery page — additions
   ========================================================= */

/* Intro / bio panel */
.bio{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.bio .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:start;}
.bio .section-lead{margin-bottom:0;}
.credentials{display:flex;flex-direction:column;gap:14px;margin-top:18px;}
.credentials .value{display:flex;gap:12px;align-items:flex-start;}

/* Filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;}
.filter-chip{
  background:var(--paper);border:1.5px solid var(--line);border-radius:999px;
  padding:9px 18px;font-size:13.5px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s;
}
.filter-chip:hover{border-color:var(--green);}
.filter-chip.is-active{
  background:var(--green-cta);border-color:var(--green-cta);color:#fff;
}

/* Project grid */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.project-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;display:flex;flex-direction:column;gap:12px;
}
.project-card .cat-tag{
  align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--green-deep);background:var(--green-pale);padding:4px 10px;border-radius:999px;
}
.project-card h3{margin:0;font-size:16.5px;}
.project-card p.desc{margin:0;font-size:13.5px;color:var(--ink-soft);flex:1;}
.project-card p.desc.desc-fixed{flex:none;}
.project-card .meta{
  font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line);
  padding-top:10px;margin-top:2px;display:flex;flex-direction:column;gap:3px;
}
.project-card .meta strong{color:var(--ink);font-weight:700;}
.project-card[hidden]{display:none;}

.shots{display:flex;flex-direction:column;gap:10px;}
.shot{
  position:relative;aspect-ratio:16/10;border-radius:10px;min-height:0;overflow:hidden;
  background:var(--paper);border:1.5px dashed var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--ink-soft);cursor:zoom-in;transition:background .15s,border-color .15s;
}
.shot:hover{border-color:var(--green-cta);background:var(--green-pale);}
.shot:has(img){border-style:solid;background:var(--paper);}
.shot svg.pic{opacity:.5;color:var(--green-deep);}
.shot span{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.shot .zoom-badge{
  position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--green-deep);
}
.shot img{width:100%;height:100%;object-fit:cover;border-radius:9px;}
.shot.shot-portrait{aspect-ratio:1102/1427;}

.shot-embed{cursor:pointer;}
.shot-embed .play-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;
  background:var(--green-cta);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.3);transition:background .15s;
}
.shot-embed .play-badge svg{margin-left:2px;}
.shot-embed:hover .play-badge{background:var(--green-deep);}
.shot-embed .shot-caption{
  position:absolute;left:8px;bottom:8px;font-size:10px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.55);border-radius:5px;padding:3px 7px;
}

.lightbox-overlay{
  position:fixed;inset:0;background:rgba(46,58,79,.85);
  display:flex;align-items:center;justify-content:center;padding:40px;
  opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:200;
}
.lightbox-overlay.is-open{opacity:1;pointer-events:auto;}
.lightbox-close{
  position:absolute;top:22px;right:26px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.4);color:#fff;
  font-size:24px;line-height:1;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .15s,border-color .15s;
}
.lightbox-close:hover{background:rgba(255,255,255,.22);border-color:#fff;}
.lightbox-inner{max-width:900px;max-height:85vh;width:100%;}
.lightbox-inner img{width:100%;height:100%;object-fit:contain;border-radius:10px;display:block;}
.lightbox-inner:has(.lightbox-embed){max-width:1100px;}
.lightbox-embed{width:100%;max-height:80vh;background:#fff;border-radius:10px;overflow:hidden;}
.lightbox-embed iframe{width:100%;height:100%;border:0;display:block;}
.lightbox-embed video{width:100%;height:100%;border:0;display:block;background:#000;}
.lightbox-placeholder{
  background:var(--card);border-radius:14px;padding:60px 40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--ink-soft);
}
.lightbox-placeholder svg{color:var(--green-deep);opacity:.6;}
.lightbox-placeholder span{font-size:13px;font-weight:600;}

.gallery-note{
  margin-top:36px;font-size:13px;color:var(--ink-soft);background:var(--green-pale);
  border-radius:var(--radius);padding:18px 20px;
}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .process-steps{grid-template-columns:1fr;}
  .about .wrap{grid-template-columns:1fr;}
  .bio .wrap{grid-template-columns:1fr;}
  .project-grid{grid-template-columns:repeat(2,1fr);}
  .values{grid-template-columns:repeat(2,1fr);}
  h1{font-size:32px;}
  nav{display:none;}
  .cta{padding:32px;}
}

@media (max-width:560px){
  .project-grid{grid-template-columns:1fr;}
  .values{grid-template-columns:1fr;}
}

/* ---------- Type roles (branding doc) ----------
   Title = WithoutSans-Semibold (Outfit stand-in) — h1/h2 only.
   Subtitle = Helvetica Bold — headings/labels below h2 and any
   bold UI text. Body = Helvetica Regular — the base body rule
   above already covers running text. Placed last so it wins
   over the earlier per-component font-weight declarations. */
h1,h2{font-family:var(--font-title);font-weight:600;}
h3,.kicker,.eyebrow,nav a,.btn,.stat-row .num,.tag,.chip,.cat-tag,
.testimonial cite strong,
.value strong,.client-pill,.filter-chip,.project-card .meta strong{
  font-family:var(--font-sans);font-weight:700;
}