/* =========================================================
   THE TALENT DIVISION — homepage (calm composition)
   Palette: Burnt Peach · Graphite · Soft Stone
   Type: Helvetica Neue (headings) / Lato (body)
   ========================================================= */

:root{
  --peach:#E86942;
  --peach-deep:#D4502B;
  --graphite:#2A2521;
  --stone:#F4ECE2;
  --stone-deep:#EADFD1;
  --ink:#2A2521;
  --muted:#6A615A;
  --head:"Faculty Glyphic", "Helvetica Neue", Georgia, serif;
  --body:"DM Sans","Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);color:var(--ink);background:var(--stone);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.02em;line-height:1.04;}
a{text-decoration:none;color:inherit;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;padding:14px 28px;border-radius:3px;font-weight:700;font-size:.9rem;
  transition:transform .15s,background .2s,color .2s,border-color .2s;}
.btn--primary{background:var(--peach);color:#fff;}
.btn--primary:hover{background:var(--peach-deep);transform:translateY(-2px);}
.btn--ghost{border:1.5px solid var(--ink);color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--stone);}

/* ---------- HEADER ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;padding:30px 6vw;
  transition:background .35s,backdrop-filter .35s,padding .35s,box-shadow .35s;}
.site-header.scrolled{background:rgba(42,37,33,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:18px 6vw;box-shadow:0 2px 24px rgba(0,0,0,.25);}
.brand img{height:40px;display:block;}
.nav{display:flex;align-items:center;gap:36px;}
.nav a{font-size:.85rem;font-weight:700;letter-spacing:.02em;color:var(--stone);transition:color .2s;}
.nav a:hover{color:var(--peach);}
.nav-cta{background:var(--peach);color:#fff!important;padding:11px 22px;border-radius:40px;}
.nav-cta:hover{background:var(--peach-deep);}

/* Hamburger toggle — hidden on desktop, shown in mobile media query */
.nav-toggle{display:none;position:relative;z-index:101;background:none;border:0;
  width:42px;height:42px;cursor:pointer;padding:9px;}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--stone);border-radius:2px;
  transition:transform .3s ease, opacity .25s ease;}
.nav-toggle span + span{margin-top:6px;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100vh;background:var(--graphite);overflow:hidden;
  display:flex;align-items:center;}

/* LAYER 1 — background photo + grey overlay */
.hero-bg{position:absolute;inset:-9%;z-index:1;will-change:transform;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% center;
  filter:brightness(.5) grayscale(.15) blur(4px);}
.hero-overlay{position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg, rgba(26,23,20,.96) 0%, rgba(26,23,20,.78) 34%, rgba(26,23,20,.12) 64%, rgba(26,23,20,.45) 100%),
    linear-gradient(0deg, rgba(26,23,20,.7) 0%, rgba(26,23,20,0) 40%);}

/* LAYER 2 — stroke-line shapes */
/* oversized brand-star watermark: faint filled logo mark drifting behind the headline.
   Parallax JS sets transform on .hero-star (translate); the rotation lives on the inner
   svg so the two don't fight. */
.hero-star{position:absolute;left:-7%;top:-14%;width:760px;z-index:3;
  opacity:.12;pointer-events:none;will-change:transform;}
.hero-star svg{width:100%;height:auto;display:block;}
.hero-star polygon{fill:var(--peach);}

.hero-shapes{position:absolute;inset:0;z-index:3;pointer-events:none;}
.shape{position:absolute;fill:none;stroke:rgba(232,105,66,.95);stroke-width:2.5;
  will-change:transform;animation:drift 14s ease-in-out infinite;}
.shape polygon{vector-effect:non-scaling-stroke;}
.shape--1{top:8%;left:42%;width:540px;opacity:.8;animation-delay:0s;}
.shape--2{bottom:2%;left:26%;width:300px;opacity:.75;stroke:rgba(244,236,226,.55);animation-delay:-5s;}
.shape--3{top:24%;right:2%;width:680px;opacity:.55;animation-delay:-9s;}
@keyframes drift{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-22px) rotate(6deg);}
}

/* LAYER 3 — foreground people cutout */
/* top anchored where it sits; height >100% so the bottom bleeds off (clipped by hero overflow);
   right overscan gives the mouse-parallax room so no edge is ever exposed */
.hero-foreground{position:absolute;right:-2.5%;top:4%;z-index:4;height:108%;
  will-change:transform;}
.hero-foreground img{height:100%;width:auto;object-fit:contain;object-position:top right;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.5));}

/* CONTENT */
.hero-content{position:relative;z-index:6;width:100%;padding:120px 6vw 80px;}
.hero-copy{max-width:560px;}
.eyebrow{font-family:var(--body);font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  font-size:.72rem;color:var(--peach);margin-bottom:22px;}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.8rem);font-weight:400;color:var(--stone);margin-bottom:26px;line-height:1.05;text-shadow:0 0 20px rgba(26,23,20,.6),0 0 40px rgba(26,23,20,.4);}
.hero-sub{max-width:440px;font-size:1.05rem;color:rgba(244,236,226,.72);margin-bottom:34px;text-shadow:0 0 16px rgba(26,23,20,.7),0 0 32px rgba(26,23,20,.5);}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.btn--ghost-light{border:1.5px solid rgba(244,236,226,.5);color:var(--stone);
  display:inline-block;padding:14px 28px;border-radius:3px;font-weight:700;font-size:.9rem;
  transition:transform .15s,background .2s,color .2s,border-color .2s;}
.btn--ghost-light:hover{background:var(--stone);color:var(--graphite);border-color:var(--stone);
  transform:translateY(-2px);}

/* =========================================================
   INTRO
   ========================================================= */
.intro{position:relative;background:var(--stone);padding:140px 6vw;overflow:hidden;}
/* Fixed to the viewport, clipped (in JS) to the section's on-screen bounds, so the
   text and star scroll over a locked video — a window into depth. */
.intro-media{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;
  will-change:clip-path;clip-path:inset(0 0 100% 0);}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9);}
.intro-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(244,236,226,.86), rgba(244,236,226,.82));}
.intro-mark{position:absolute;z-index:1;top:50%;right:-200px;
  width:min(830px,68vw);transform:translateY(calc(-50% + var(--sy,0px)));
  opacity:.28;pointer-events:none;will-change:transform;}
.intro-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
.intro-kicker{display:inline-block;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.16em;font-weight:700;color:var(--peach);margin-bottom:22px;}
.intro-lead{position:relative;padding-left:26px;}
.intro-lead::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:var(--peach);}
.intro-vision{font-family:var(--head);font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:400;
  color:var(--graphite);line-height:1.35;}
.intro-body p{font-size:1.02rem;color:var(--muted);line-height:1.8;margin-bottom:1.2em;}
.intro-body p:last-child{margin-bottom:0;}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;}
.reveal[data-delay="1"]{transition-delay:.15s;}
.reveal.in-view{opacity:1;transform:none;}

@media(max-width:820px){
  .intro-inner{grid-template-columns:1fr;gap:36px;}
}

/* =========================================================
   SECTOR OVERLAY
   ========================================================= */
.sector-overlay{position:fixed;inset:0;z-index:200;pointer-events:none;
  background:rgba(42,37,33,0);transition:background .35s ease;}
.sector-overlay.open{pointer-events:all;background:rgba(42,37,33,.55);}
.sector-panel{position:absolute;left:0;top:0;bottom:0;width:min(520px,90vw);
  background:var(--stone);padding:60px 48px;display:flex;flex-direction:column;gap:28px;
  transform:translateX(-100%);transition:transform .4s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;}
.sector-overlay.open .sector-panel{transform:translateX(0);}
.sector-close{position:absolute;top:24px;right:24px;background:none;border:none;
  font-size:1.2rem;color:var(--muted);cursor:pointer;line-height:1;padding:6px;
  transition:color .2s;}
.sector-close:hover{color:var(--graphite);}
.sector-panel-kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;color:var(--peach);}
.sector-panel-title{font-family:var(--head);font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:400;color:var(--graphite);line-height:1.2;}
.sector-panel-desc{font-size:1rem;color:var(--muted);line-height:1.8;}
.sector-panel-roles h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--graphite);margin-bottom:14px;}
.sector-roles-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.sector-roles-list li{background:var(--stone-deep);border-radius:4px;
  padding:6px 14px;font-size:.9rem;color:var(--graphite);}
.sector-panel-cta{align-self:flex-start;margin-top:auto;}

/* =========================================================
   WHY DIFFERENT
   ========================================================= */
.why{background:var(--graphite);color:var(--stone);
  padding:120px 6vw;display:grid;grid-template-columns:.85fr 2fr;column-gap:60px;align-items:start;}
/* Brand star marker above every section title */
/* Brand star sits inline to the left of the section title, centred against both lines */
.why-head h2,
.sectors-intro h2{display:flex;align-items:center;gap:10px;}
.why-head h2::before,
.sectors-intro h2::before{
  content:"";flex:none;width:60px;height:74px;margin-left:-6px;
  background:url("assets/logos/logomark-peach.svg") no-repeat center/contain;}
.why-head{grid-column:1;grid-row:1;}
.why-head h2{font-size:clamp(2.2rem,3.8vw,3.4rem);font-weight:400;margin-bottom:22px;}
.why-head p{max-width:280px;color:rgba(244,236,226,.65);font-size:.98rem;}
.why-tabs{grid-column:2;grid-row:1;}
.why-panel{grid-column:2;grid-row:2;}
/* Jumbotron pattern: five fixed-size tab buttons in a row, one shared content panel
   below that swaps text on select / auto-cycle. Because every button is identical in
   size, nothing distorts and the layout never reflows on reveal.
   Each tile is a solid faceted panel: the chamfer is the real shape (clip-path), with
   a hairline edge drawn by a slightly-larger clipped layer behind a slightly-smaller
   clipped fill. No SVG, no line-on-flat cheapness. */
.why-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.why-frame{display:none;}
.why-tab{
  --chamfer:18px;
  position:relative;border:0;cursor:pointer;text-align:left;
  height:150px;padding:26px 22px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:14px;color:inherit;background:transparent;
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  transition:transform .25s, background .3s;
  background:rgba(232,105,66,.22);}            /* edge colour (shows as hairline) */
.why-tab::before{                               /* fill, inset 1.5px = the hairline */
  content:'';position:absolute;inset:1.5px;z-index:0;
  --chamfer:17px;
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  background:#332D28;transition:background .3s;} /* raised facet, lighter than section */
.why-tab:hover{background:rgba(232,105,66,.5);}
.why-tab:hover::before{background:#3A332D;}
.why-tab.is-active{background:var(--peach);transform:translateY(-5px);}
.why-tab.is-active::before{background:#3E342D;}
.why-icon{color:var(--peach);display:block;position:relative;z-index:1;}
.why-icon svg{width:30px;height:30px;}
.why-tab h3{font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.8rem;color:rgba(244,236,226,.55);
  position:relative;z-index:1;transition:color .3s;}
.why-tab.is-active h3{color:var(--stone);}

.why-panel{position:relative;margin-top:36px;min-height:96px;}
.why-panel p{position:absolute;inset:0;max-width:760px;
  font-size:1.08rem;line-height:1.7;color:rgba(244,236,226,.72);
  opacity:0;transform:translateY(8px);transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;}
.why-panel p.is-active{opacity:1;transform:none;}

/* =========================================================
   SECTORS
   ========================================================= */
.sectors{padding:90px 6vw 110px;display:grid;grid-template-columns:.85fr 2fr;gap:60px;align-items:start;}
.sectors-intro h2{font-size:clamp(2.1rem,3.6vw,3.2rem);margin-bottom:18px;}
.sectors-intro p{max-width:280px;color:var(--muted);margin-bottom:26px;}
.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
/* Same faceted-tile construction as Why Different (chamfer = real clip-path shape,
   hairline edge = larger clipped layer behind a 1.5px-inset clipped fill) — but in a
   light stone palette so the tiles complement the section background instead of fighting
   it. Icon top, title bottom, no arrow — matching the Why Different layout exactly. */
.sector-card{
  --chamfer:18px;
  position:relative;border:0;cursor:pointer;text-align:left;
  min-height:150px;padding:26px 22px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:14px;color:inherit;font:inherit;
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  transition:transform .25s, background .3s;
  background:var(--stone-deep);}               /* edge colour (shows as hairline) */
.sector-card::before{                           /* fill, inset 1.5px = the hairline */
  content:'';position:absolute;inset:1.5px;z-index:0;
  --chamfer:17px;
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  background:#FBF5EC;transition:background .3s;} /* raised facet, lighter than section */
.sector-card:hover{background:var(--peach);transform:translateY(-5px);}
.sector-card:hover::before{background:#FFFFFF;}
.sector-icon{color:var(--peach);display:block;position:relative;z-index:1;}
.sector-icon svg{width:30px;height:30px;}
.sector-card h3{font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.8rem;line-height:1.35;
  color:var(--muted);position:relative;z-index:1;transition:color .3s;}
.sector-card:hover h3{color:var(--graphite);}
.sector-card .arrow{position:absolute;top:24px;right:22px;color:var(--muted);transition:color .2s,transform .2s;}
.sector-card:hover .arrow{color:var(--peach);transform:translateX(4px);}

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.quote{background:var(--peach);color:#fff;padding:90px 6vw 80px;
  position:relative;overflow:hidden;}
/* Oversized background quote mark — bleeds out of the container for scale, sits behind
   all content at low opacity as a watermark. */
.quote::before{content:'"';position:absolute;font-family:var(--head);font-weight:700;
  color:#fff;opacity:.13;pointer-events:none;z-index:0;user-select:none;
  /* Oversized so it fills full section height — overflow:hidden on .quote clips it.
     Anchored top:0 so it starts flush with the section top and bleeds to bottom. */
  font-size:90vh;line-height:.9;
  top:0;left:4vw;}
.quote-inner{max-width:1000px;margin:0 auto;position:relative;z-index:1;}
.quote-kicker{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;color:rgba(255,255,255,.7);margin-bottom:26px;}
/* Cycling jumbotron: all slides occupy the same grid cell, so the stage always sizes to
   the TALLEST quote and the peach band never resizes as it cycles. Inactive slides stay
   in flow (opacity:0, not display:none) so they keep contributing to the locked height. */
.quote-stage{display:grid;}
.quote-slide{grid-area:1/1;opacity:0;transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;pointer-events:none;}
.quote-slide.is-active{opacity:1;transform:none;pointer-events:auto;}
.quote-slide blockquote{font-family:var(--head);font-weight:700;
  font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.25;letter-spacing:-.01em;
  margin-bottom:22px;}
.quote-slide figcaption{font-weight:700;letter-spacing:.04em;opacity:.85;}
.quote-dots{display:flex;gap:10px;margin-top:34px;}
.quote-dots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;
  padding:0;background:rgba(255,255,255,.35);transition:background .25s,transform .25s;}
.quote-dots button:hover{background:rgba(255,255,255,.6);}
.quote-dots button.is-active{background:#fff;transform:scale(1.25);}

/* =========================================================
   TEAM
   ========================================================= */
.team{background:var(--stone-deep);padding:100px 6vw;position:relative;overflow:hidden;}
.team-mark{position:absolute;top:-60px;left:-100px;
  width:min(580px,52vw);opacity:.2;pointer-events:none;user-select:none;}
.team-shapes{position:absolute;inset:0;pointer-events:none;}
.team-shape{position:absolute;fill:none;stroke:var(--peach);stroke-width:2;
  will-change:transform;animation:drift 14s ease-in-out infinite;}
.team-shape polygon{vector-effect:non-scaling-stroke;}
.team-shape--1{top:5%;right:2%;width:520px;opacity:.35;animation-delay:0s;}
.team-shape--2{bottom:5%;right:18%;width:320px;opacity:.25;animation-delay:-5s;}
.team-shape--3{top:35%;right:-4%;width:700px;opacity:.18;animation-delay:-9s;}
.team-head{text-align:center;margin-bottom:60px;}
.team-head h2{font-size:clamp(2.2rem,3.8vw,3.4rem);font-weight:400;margin-bottom:14px;}
.team-head p{color:var(--muted);font-size:1rem;}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px;max-width:960px;margin:0 auto;}
.team-member{display:flex;flex-direction:column;gap:24px;}
/* The chamfer clip lives on the INNER .team-photo so the frame stays unclipped and can
   cast a drop-shadow that traces the chamfer without the clip cutting it away. Shadow on
   the frame only affects the photo — the name/title text underneath stays clean. */
.team-photo-frame{
  --chamfer:28px;
  width:100%;aspect-ratio:3/4;
  transition:filter .4s ease, transform .3s ease;
  filter:drop-shadow(0 0 0 rgba(42,37,33,.12));}
.team-member:hover .team-photo-frame{
  transform:translateY(-8px);
  filter:drop-shadow(0 16px 5px rgba(42,37,33,.28));}
.team-photo{width:100%;height:100%;overflow:hidden;background:rgba(42,37,33,.1);
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:top;}
.team-info h3{font-family:var(--head);font-size:1.7rem;font-weight:400;margin-bottom:4px;}
.team-title{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--peach);
  font-weight:700;margin-bottom:14px;display:block;}
.team-info p{font-size:.95rem;color:var(--muted);line-height:1.75;}

/* =========================================================
   TWO JOURNEYS
   ========================================================= */
/* One shared handshake image behind both cards — employer + candidate, two sides of the
   same deal. Cards sit on top transparently; each keeps a directional gradient so its text
   stays legible over its half of the photo. */
.journeys{position:relative;display:grid;grid-template-columns:1fr 1fr;
  aspect-ratio:5/2;min-height:420px;
  background-image:url("assets/journeys/handshake.png");
  background-size:cover;background-position:center;}
.journey{position:relative;min-height:380px;display:flex;align-items:flex-end;padding:46px;
  overflow:hidden;color:var(--stone);}
.journey-overlay{position:absolute;inset:0;
  background:linear-gradient(35deg,rgba(42,37,33,.9) 0%,rgba(42,37,33,.55) 38%,rgba(42,37,33,.05) 72%);}
.journey-body{position:relative;z-index:2;}
.journey-body h3{font-size:2rem;margin-bottom:12px;}
.journey-body p{max-width:320px;opacity:.9;margin-bottom:18px;}
.journey-link{font-weight:700;color:#fff;}
.journey:hover .journey-link{color:var(--peach);}

/* =========================================================
   FAQS
   ========================================================= */
.faqs{background:var(--stone-deep);padding:120px 6vw;}
.faqs-inner{max-width:860px;margin:0 auto;}
.faqs-header{text-align:center;margin-bottom:56px;}
.faqs-header h2{font-family:var(--head);font-size:clamp(2rem,3.6vw,3.2rem);font-weight:400;color:var(--graphite);line-height:1.1;margin-top:14px;}


/* =========================================================
   PAGE BANNER (inner pages)
   ========================================================= */
.page-hero{position:relative;overflow:hidden;padding:180px 6vw 90px;
  background-image:url("assets/journeys/handshake.png");
  background-size:cover;background-position:center 40%;}
.page-hero::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(26,23,20,.92) 0%,rgba(26,23,20,.7) 55%,rgba(26,23,20,.35) 100%),
             linear-gradient(0deg,rgba(26,23,20,.65) 0%,rgba(26,23,20,0) 40%);}
.page-hero-shapes{position:absolute;inset:0;z-index:1;pointer-events:none;}
.page-shape{position:absolute;fill:none;stroke:rgba(232,105,66,.9);stroke-width:2.5;
  animation:drift 14s ease-in-out infinite;}
.page-shape polygon{vector-effect:non-scaling-stroke;}
.page-shape--1{top:-60%;right:12%;width:672px;opacity:.45;animation-delay:0s;}
.page-shape--2{top:25%;right:48%;width:352px;opacity:.28;stroke:rgba(244,236,226,.45);animation-delay:-5s;}
.page-shape--3{top:20%;right:-12%;width:896px;opacity:.22;animation-delay:-9s;}
.page-hero-mark{position:absolute;left:-120px;top:50%;transform:translateY(-50%);
  width:min(600px,52vw);opacity:.12;pointer-events:none;z-index:1;}
.page-hero-inner{position:relative;z-index:2;max-width:600px;}
.page-hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:400;color:var(--stone);
  margin-bottom:18px;line-height:1.05;text-shadow:0 0 20px rgba(26,23,20,.6);}
.page-hero-sub{font-size:1.05rem;color:rgba(244,236,226,.7);max-width:480px;
  text-shadow:0 0 16px rgba(26,23,20,.7);}

/* =========================================================
   FAQs
   ========================================================= */
.faqs{background:var(--stone-deep);padding:90px 6vw 120px;}
.faqs-inner{max-width:860px;margin:0 auto;}
.faqs-header{text-align:center;margin-bottom:56px;}
.faqs-eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;
  color:var(--peach);margin-bottom:16px;}
.faqs-header h2{font-size:clamp(2rem,4vw,3.2rem);color:var(--graphite);}
.faqs-tabs{display:flex;gap:12px;justify-content:center;margin-bottom:48px;}
.faqs-tab{background:none;border:1.5px solid var(--muted);color:var(--muted);
  padding:11px 28px;border-radius:40px;font-family:var(--body);font-size:.88rem;
  font-weight:700;cursor:pointer;transition:all .2s;}
.faqs-tab:hover{border-color:var(--peach);color:var(--peach);}
.faqs-tab.is-active{background:var(--peach);border-color:var(--peach);color:#fff;}
.faqs-panel{display:none;}
.faqs-panel.is-active{display:block;}
.faq-item{border-bottom:1px solid rgba(42,37,33,.12);}
.faq-item:first-child{border-top:1px solid rgba(42,37,33,.12);}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:22px 0;
  font-family:var(--body);font-size:1rem;font-weight:700;color:var(--graphite);
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  transition:color .2s;}
.faq-q:hover{color:var(--peach);}
.faq-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;
  border:1.5px solid currentColor;position:relative;transition:transform .3s,background .2s,border-color .2s;}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;
  top:50%;left:50%;background:currentColor;transition:opacity .25s,transform .25s;}
.faq-icon::before{width:10px;height:1.5px;transform:translate(-50%,-50%);}
.faq-icon::after{width:1.5px;height:10px;transform:translate(-50%,-50%);}
.faq-item.is-open .faq-q{color:var(--peach);}
.faq-item.is-open .faq-icon{background:var(--peach);border-color:var(--peach);}
.faq-item.is-open .faq-icon::before{filter:brightness(10);}
.faq-item.is-open .faq-icon::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg);}
.faq-a{overflow:hidden;max-height:0;transition:max-height .4s ease,padding .3s ease;}
.faq-a p{font-size:.98rem;color:var(--muted);line-height:1.8;padding-bottom:22px;}
.faq-item.is-open .faq-a{max-height:400px;}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.page-hero--contact{background-image:url("assets/journeys/sheffield.jpg");background-position:center 60%;}

.contact-section{background:var(--stone);padding:90px 6vw 120px;}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1100px;margin:0 auto;align-items:start;}

/* Left — details */
.contact-details h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--graphite);margin-bottom:18px;}
.contact-intro{color:var(--muted);line-height:1.8;margin-bottom:40px;font-size:.98rem;}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:20px;margin-bottom:36px;}
.contact-list li{display:flex;flex-direction:column;gap:4px;}
.contact-label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--peach);}
.contact-list a,.contact-list span{font-size:.98rem;color:var(--graphite);font-weight:500;}
.contact-list a:hover{color:var(--peach);}
.contact-divider{height:1px;background:rgba(42,37,33,.12);margin-bottom:28px;}
.contact-hours{font-size:.92rem;color:var(--muted);line-height:1.8;}
.contact-hours strong{color:var(--graphite);}

/* Right — form */
.contact-form-wrap{background:#fff;border-radius:8px;padding:48px 44px;box-shadow:0 4px 40px rgba(42,37,33,.08);}
.contact-form{display:flex;flex-direction:column;gap:22px;}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);}
.form-optional{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);}
.form-input{padding:13px 16px;border:1.5px solid rgba(42,37,33,.18);border-radius:4px;
  font-family:var(--body);font-size:.95rem;color:var(--graphite);background:#fff;
  transition:border-color .2s,box-shadow .2s;}
.form-input:focus{outline:none;border-color:var(--peach);box-shadow:0 0 0 3px rgba(232,105,66,.12);}
.form-textarea{resize:vertical;min-height:120px;}

/* Radio toggle */
.form-toggle{display:flex;gap:10px;}
.toggle-opt{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 18px;
  border:1.5px solid rgba(42,37,33,.18);border-radius:40px;font-size:.88rem;font-weight:600;
  color:var(--graphite);transition:border-color .2s,background .2s,color .2s;}
.toggle-opt input[type="radio"]{display:none;}
.toggle-opt:has(input:checked){background:var(--peach);border-color:var(--peach);color:#fff;}

.form-submit{margin-top:6px;width:100%;padding:15px;font-size:1rem;border:none;cursor:pointer;}
.form-note{font-size:.8rem;color:var(--muted);text-align:center;line-height:1.6;}

/* Map strip */
.contact-map{width:100%;height:420px;overflow:hidden;}
.contact-map iframe{width:100%;height:450px;border:0;display:block;filter:saturate(.85) contrast(1.05);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--graphite);color:var(--stone);padding:70px 6vw 50px;text-align:center;}
.footer-logo{height:42px;margin-bottom:30px;}
.footer-nav{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;}
.footer-nav a{font-weight:700;font-size:.9rem;opacity:.8;}
.footer-nav a:hover{color:var(--peach);opacity:1;}
.footer-fine{font-size:.8rem;opacity:.5;}
.footer-legal{font-size:.74rem;opacity:.4;margin-top:10px;line-height:1.6;}
.footer-legal a{color:inherit;text-decoration:underline;}
.footer-legal a:hover{color:var(--peach);opacity:1;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  /* --- Mobile nav: hamburger + slide-down drawer --- */
  .nav-toggle{display:block;}
  .nav{display:none;position:fixed;top:0;left:0;right:0;z-index:100;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(42,37,33,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    padding:88px 8vw 32px;box-shadow:0 12px 30px rgba(0,0,0,.3);}
  .nav.open{display:flex;}
  .nav a{padding:17px 2px;font-size:1.05rem;border-bottom:1px solid rgba(244,236,226,.12);}
  .nav-cta{margin-top:18px;text-align:center;border-radius:40px;padding:14px 22px;}
  .nav-cta:last-child{border-bottom:0;}

  /* Simplified, text-first mobile hero: drop the sharp foreground cutout (the blurred
     background photo already carries people), even out the overlay so the headline stays
     crisp top-to-bottom, and keep the pale star clear of the buttons. */
  .hero-foreground{display:none;}
  .hero-overlay{background:linear-gradient(0deg, rgba(26,23,20,.92) 0%, rgba(26,23,20,.72) 55%, rgba(26,23,20,.6) 100%);}
  .hero-content{padding-top:140px;}
  .shape--2{bottom:auto;top:6%;left:auto;right:8%;width:220px;opacity:.5;}
  .shape--1{width:380px;opacity:.55;}

  .why,.sectors{grid-template-columns:1fr;padding-top:80px;padding-bottom:80px;}
  /* Reset the explicit desktop grid placement so nothing spills into a phantom column */
  .why-head{grid-column:1;grid-row:auto;}
  .why-tabs{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,1fr);gap:12px;}
  .why-panel{grid-column:1;grid-row:auto;}
  .why-tab{height:128px;padding:20px 16px;}
  .why-head h2 br{display:none;}
  .sector-grid{grid-template-columns:1fr 1fr;}
  .quote-inner{grid-template-columns:1fr;}

  /* Team: stack the two members instead of cramming side-by-side */
  .team{padding:72px 6vw;}
  .team-grid{grid-template-columns:1fr;gap:44px;max-width:420px;}
  .team-head{margin-bottom:40px;}

  /* Intro: drop the fixed-video parallax window (janky on mobile) and tighten padding */
  .intro{padding:72px 6vw;}
  .intro-media{display:none;}

  /* Journeys: stacked cards need real height, not a wide aspect ratio */
  .journeys{grid-template-columns:1fr;aspect-ratio:auto;min-height:0;}
  .journey{min-height:300px;padding:36px;}

  .contact-inner{grid-template-columns:1fr;gap:48px;}
  .contact-form-wrap{padding:32px 24px;}
  .form-toggle{flex-direction:column;}
}

@media(max-width:520px){
  .why-tabs{grid-template-columns:1fr;}
  .why-tab{height:auto;min-height:96px;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;}
  .sector-grid{grid-template-columns:1fr;}
  .faqs-tabs{flex-wrap:wrap;}
}

/* =========================================================
   APPROACH BLOCKS  (Employers & Candidates pages)
   ========================================================= */
.approach{background:var(--stone);padding:100px 6vw;}
.approach-inner{max-width:1080px;margin:0 auto;}
.approach-head{max-width:680px;margin:0 auto 60px;text-align:center;}
.approach-eyebrow{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;color:var(--peach);margin-bottom:16px;}
.approach-head h2{font-family:var(--head);font-size:clamp(2rem,3.6vw,3rem);font-weight:400;
  color:var(--graphite);line-height:1.1;margin-bottom:18px;}
.approach-head p{color:var(--muted);font-size:1.02rem;line-height:1.8;}
.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 48px;}
.approach-item{position:relative;padding-left:54px;}
.approach-item::before{content:"";position:absolute;left:0;top:0;width:36px;height:44px;
  background:url("assets/logos/logomark-peach.svg") no-repeat center/contain;}
.approach-item h3{font-family:var(--head);font-size:1.3rem;font-weight:400;color:var(--graphite);
  margin-bottom:10px;line-height:1.2;}
.approach-item p{font-size:.97rem;color:var(--muted);line-height:1.75;}

/* Detail / pricing band */
.detail-band{background:var(--stone-deep);padding:90px 6vw;}
.detail-inner{max-width:860px;margin:0 auto;}
.detail-inner > .approach-eyebrow{text-align:left;}
.detail-inner h2{font-family:var(--head);font-size:clamp(1.9rem,3vw,2.6rem);font-weight:400;
  color:var(--graphite);line-height:1.15;margin-bottom:20px;}
.detail-inner h3{font-family:var(--head);font-size:1.25rem;font-weight:400;color:var(--graphite);
  margin:38px 0 12px;}
.detail-inner p{font-size:1rem;color:var(--muted);line-height:1.8;margin-bottom:14px;}
.detail-fee{font-family:var(--head);color:var(--peach);font-size:1.15rem;}
.detail-list{list-style:none;display:grid;gap:12px;margin:22px 0 6px;}
.detail-list li{position:relative;padding-left:28px;color:var(--graphite);font-size:.98rem;line-height:1.6;}
.detail-list li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--peach);}

/* Page CTA strip — peach band so it separates clearly from the dark footer */
.page-cta{background:var(--peach);color:#fff;text-align:center;padding:84px 6vw;}
.page-cta h2{font-family:var(--head);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);
  margin-bottom:16px;line-height:1.15;}
.page-cta p{color:rgba(255,255,255,.88);max-width:540px;margin:0 auto 30px;line-height:1.75;}
.page-cta .btn--primary{background:#fff;color:var(--peach);}
.page-cta .btn--primary:hover{background:var(--graphite);color:#fff;transform:translateY(-2px);}

@media(max-width:900px){
  .approach{padding:72px 6vw;}
  .approach-grid{grid-template-columns:1fr;gap:34px;}
  .detail-band{padding:64px 6vw;}
  .page-cta{padding:64px 6vw;}
}

/* =========================================================
   LEGAL PAGE  (Terms / Privacy)
   ========================================================= */
.legal{background:var(--stone);padding:80px 6vw 110px;}
.legal-inner{max-width:820px;margin:0 auto;}
.legal-updated{display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--peach);margin-bottom:26px;}
.legal-inner .legal-lead{font-size:1.05rem;color:var(--graphite);line-height:1.8;margin-bottom:10px;}
.legal-inner h2{font-family:var(--head);font-size:1.35rem;font-weight:400;color:var(--graphite);
  margin:40px 0 12px;}
.legal-inner p{font-size:1rem;color:var(--muted);line-height:1.8;margin-bottom:14px;}
.legal-inner ul{list-style:none;display:grid;gap:10px;margin:6px 0 18px;}
.legal-inner ul li{position:relative;padding-left:26px;color:var(--muted);font-size:1rem;line-height:1.6;}
.legal-inner ul li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--peach);}
.legal-inner a{color:var(--peach);}
.legal-contact{margin-top:6px;color:var(--graphite);font-weight:500;line-height:1.7;}

/* =========================================================
   INSIGHTS — public article listing & pagination
   ========================================================= */
.insights-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:28px;
  margin-top:8px;
}
.insight-card{
  background:#fff;border:1px solid var(--stone-deep);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .2s,transform .2s;
}
.insight-card:hover{box-shadow:0 8px 32px rgba(42,37,33,.1);transform:translateY(-3px);}
.insight-card-body{padding:24px 24px 16px;flex:1;display:flex;flex-direction:column;gap:10px;}
.insight-cat{
  display:inline-block;background:var(--peach);color:#fff;
  border-radius:999px;padding:.2rem .75rem;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;align-self:flex-start;
}
.insight-title{font-family:var(--head);font-size:1.2rem;line-height:1.25;margin:0;}
.insight-title a{color:var(--graphite);}
.insight-title a:hover{color:var(--peach);}
.insight-excerpt{font-size:.9rem;color:var(--muted);line-height:1.6;margin:0;}
.insight-card-foot{
  padding:14px 24px;border-top:1px solid var(--stone-deep);
  display:flex;align-items:center;justify-content:space-between;
}
.insight-date{font-size:.8rem;color:var(--muted);}
.insight-read{font-size:.85rem;font-weight:600;color:var(--peach);}
.insight-read:hover{color:var(--peach-deep);}
.insights-pager{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin-top:48px;font-size:.9rem;color:var(--muted);
}
@media(max-width:600px){
  .insights-grid{grid-template-columns:1fr;}
}

/* =========================================================
   JOBS — vacancy listing & detail pages
   ========================================================= */

/* Search bar */
.jobs-search-band{background:var(--graphite);padding:28px 6vw;}
.jobs-search-inner{max-width:860px;margin:0 auto;}
.jobs-search-form{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
.jobs-search-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:160px;}
.jobs-search-field label{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,236,226,.6);}
.jobs-search-field input,
.jobs-search-field select{padding:11px 14px;border:1px solid rgba(244,236,226,.2);border-radius:3px;
  background:rgba(244,236,226,.08);color:var(--stone);font:inherit;font-size:.92rem;}
.jobs-search-field select option{background:var(--graphite);color:var(--stone);}
.jobs-search-field input::placeholder{color:rgba(244,236,226,.35);}
.jobs-search-field input:focus,
.jobs-search-field select:focus{outline:none;border-color:var(--peach);}
.jobs-search-form .btn{flex-shrink:0;align-self:flex-end;white-space:nowrap;}

/* Result count */
.jobs-result-count{font-size:.9rem;color:var(--muted);margin-bottom:28px;}
.jobs-result-count a{color:var(--peach);}

/* Job list */
.jobs-list{list-style:none;display:flex;flex-direction:column;gap:20px;}
.job-card{background:#fff;border:1px solid var(--stone-deep);border-radius:6px;
  padding:28px 28px 24px;display:flex;align-items:flex-start;gap:24px;
  transition:box-shadow .2s,transform .2s;}
.job-card:hover{box-shadow:0 6px 28px rgba(42,37,33,.09);transform:translateY(-2px);}
.job-card-main{flex:1;}
.job-card-type{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--peach);margin-bottom:6px;}
.job-card-title{font-family:var(--head);font-size:1.2rem;font-weight:400;margin-bottom:10px;line-height:1.2;}
.job-card-title a{color:var(--graphite);}
.job-card-title a:hover{color:var(--peach);}
.job-card-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.84rem;color:var(--muted);margin-bottom:12px;}
.job-card-ref{margin-left:auto;font-style:italic;}
.job-card-excerpt{font-size:.9rem;color:var(--muted);line-height:1.6;}
.job-card-btn{flex-shrink:0;align-self:center;white-space:nowrap;}

/* Empty state */
.jobs-empty{padding:48px 0;color:var(--muted);}
.jobs-empty p{margin-bottom:10px;line-height:1.7;}
.jobs-empty a{color:var(--peach);}

/* Job detail */
.job-detail-layout{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start;}
.job-detail-body h2{font-family:var(--head);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:400;
  color:var(--graphite);margin-bottom:20px;}
.job-detail-body h3{font-family:var(--head);font-size:1.1rem;font-weight:400;color:var(--graphite);
  margin-bottom:10px;}
.job-detail-desc{font-size:1rem;color:var(--muted);line-height:1.85;}
.job-detail-desc p{margin-bottom:14px;}

.job-sidebar-card{background:#fff;border:1px solid var(--stone-deep);border-radius:6px;padding:24px;}
.job-sidebar-card h3{font-family:var(--head);font-size:1rem;font-weight:400;margin-bottom:16px;color:var(--graphite);}
.job-meta-list{list-style:none;display:flex;flex-direction:column;gap:12px;}
.job-meta-list li{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.88rem;border-bottom:1px solid var(--stone-deep);padding-bottom:10px;}
.job-meta-list li:last-child{border-bottom:0;padding-bottom:0;}
.job-meta-list span{color:var(--muted);}
.job-meta-list strong{color:var(--graphite);text-align:right;max-width:60%;}

@media(max-width:860px){
  .jobs-search-form{flex-direction:column;}
  .jobs-search-field{min-width:100%;}
  .job-card{flex-direction:column;}
  .job-card-btn{width:100%;text-align:center;}
  .job-detail-layout{grid-template-columns:1fr;}
  .job-detail-sidebar{order:-1;}
}