/* =====================================================================
   WorkKar Global — shared stylesheet
   Direction: "Tiranga Flow" (white canvas, forest headings, saffron CTAs,
   tricolour ribbon waves, hex industries) with ivory alternate ground.
   Load order on every page:
     1. Google Fonts   2. assets/css/styles.css   3. assets/css/pages/<page>.css
   Page authors: never invent a colour, radius, shadow or type size.
   Use the tokens below. Component reference: _partials/COMPONENTS.md
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root{
  /* --- Brand ramp: saffron (logo #F07D1A) --- */
  --saffron-50:#FFF6EC;  --saffron-100:#FFE9D1; --saffron-200:#FDD0A2; --saffron-300:#F9B26B;
  --saffron-400:#F5973D; --saffron-500:#F07D1A; --saffron-600:#DA6A0C; --saffron-700:#C2560A;
  --saffron-800:#9B440B; --saffron-900:#7C370D;

  /* --- Brand ramp: forest (logo #2F5627, card banner #115D2F) --- */
  --forest-50:#EFF6ED;  --forest-100:#DAEAD5; --forest-200:#B6D4AC; --forest-300:#8BB77D;
  --forest-400:#5F9552; --forest-500:#437A38; --forest-600:#2F5627; --forest-700:#27481F;
  --forest-800:#1F3D19; --forest-900:#162C12; --forest-950:#0C1A0A;
  --banner-green:#115D2F; --leaf:#1A7A3F;

  /* --- Ink: warm green-grey neutrals --- */
  --ink-900:#121712; --ink-800:#1E241E; --ink-700:#333B33; --ink-600:#4B544B;
  --ink-500:#677067; --ink-400:#8C948C; --ink-300:#B7BDB6; --ink-200:#DADFD8;
  --ink-100:#ECEFEA; --ink-50:#F6F8F5;  --white:#FFFFFF;

  /* --- Semantic --- */
  --success-bg:#D7F0DF; --success-fg:#0F6B39;
  --warning-bg:#FFF4D6; --warning-fg:#8A5A00;
  --danger-bg:#FDECEA;  --danger-fg:#B23A2E;
  --info-bg:#E6F0FA;    --info-fg:#1B5E96;
  --whatsapp:#25D366;   --whatsapp-deep:#128C5B;

  /* --- Applied surfaces (Tiranga Flow) --- */
  --canvas:#FFFFFF;
  --surface:#FFFFFF;          /* cards always pure white */
  --surface-2:#F7FAF5;        /* green-tinted band */
  --surface-warm:#FFFAF2;     /* warm ivory alternate ground */
  --surface-warm-2:#FFF3E3;   /* deeper ivory, tiles only */
  --surface-dark:#122B11;
  --surface-dark-2:#0C1A0A;
  --surface-glass:rgba(255,255,255,.07);
  --line:#E3E9E0; --line-soft:#EDF1EA; --line-strong:#D2DCCE;
  --line-dark:rgba(255,255,255,.13);

  /* --text-subtle was #7C857B (3.82:1 on white): every 11-12px line set in it
     failed WCAG AA. #6B746A measures 4.85:1 on white and 4.66:1 on the ivory
     ground, and still reads a clear step lighter than --text-muted. */
  --text:#1E241E;  --text-muted:#5C655C;  --text-subtle:#6B746A;
  --text-on-dark:#EAF1E7; --text-on-dark-muted:#A8B8A3;
  --heading:#27481F; --heading-accent:#C2560A;
  --brand:#F07D1A;  --brand-2:#2F5627;
  --focus:#C2560A;  --focus-on-dark:#F5973D;

  /* --- Gradients --- */
  --grad-ribbon-saffron:linear-gradient(100deg,#FBB05A 0%,#F07D1A 45%,#DA6A0C 100%);
  --grad-ribbon-green:linear-gradient(100deg,#4C8A3F 0%,#2F5627 55%,#1F3D19 100%);
  --grad-cta:linear-gradient(120deg,#F07D1A 0%,#F5973D 28%,#FFFFFF 50%,#3E7A33 72%,#1F3D19 100%);
  --grad-text:linear-gradient(90deg,#DA6A0C,#C2560A 60%,#2F5627);
  --grad-border:linear-gradient(135deg,#F07D1A,#2F5627);
  --grad-rule:linear-gradient(180deg,#F07D1A 0%,#F5973D 32%,#5F9552 70%,#2F5627 100%);
  --grad-sunrise:radial-gradient(120% 92% at 50% 108%,#FFD7A1 0%,#F9B26B 18%,#F07D1A 38%,#C2560A 58%,#2F5627 84%,#16301A 100%);
  --grad-dark-band:linear-gradient(168deg,#0C1A0A 0%,#173417 46%,#0F2410 100%);
  --glow-saffron:radial-gradient(58% 54% at 82% 12%,rgba(240,125,26,.30) 0%,rgba(240,125,26,0) 70%);
  --glow-green:radial-gradient(64% 60% at 8% 92%,rgba(95,149,82,.26) 0%,rgba(95,149,82,0) 72%);

  /* --- Type --- */
  --font-head:'Poppins','Noto Sans Devanagari',system-ui,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;
  --font-script:'Kaushan Script','Segoe Script',cursive;

  --fs-display:clamp(2.5rem,1.6rem + 4vw,4.5rem);
  --fs-h1:clamp(2.125rem,1.5rem + 3vw,3.5rem);
  --fs-h2:clamp(1.75rem,1.3rem + 2vw,2.75rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-h4:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --fs-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --fs-h5:1.03125rem;   /* 16.5px — accordion button, stepper heading, small card h3 */
  --fs-body:1rem; --fs-md:.9375rem; --fs-sm:.875rem; --fs-xs:.75rem; --fs-2xs:.6875rem;
  --fs-3xs:.625rem;     /* 10px — micro uppercase labels inside narrow mock columns */
  --fs-stat:1.625rem;   /* 26px — a single stat figure inside a hero or tile */
  --lh-display:1.04; --lh-head:1.12; --lh-body:1.62;
  --ls-display:-.03em; --ls-head:-.02em; --ls-body:-.005em; --ls-eyebrow:.14em;

  /* --- Space --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
  --section-y:clamp(4rem,3rem + 4vw,7rem);
  --container:1240px; --container-narrow:860px; --gutter:clamp(16px,4vw,32px);

  /* --- Radii --- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;

  /* --- Shadows --- */
  --sh-xs:0 1px 2px rgba(18,23,18,.06);
  --sh-sm:0 2px 6px rgba(18,23,18,.06), 0 1px 2px rgba(18,23,18,.04);
  --sh-md:0 8px 24px rgba(23,45,20,.10), 0 2px 6px rgba(23,45,20,.05);
  --sh-lg:0 18px 44px -6px rgba(23,45,20,.14), 0 6px 14px rgba(23,45,20,.06);
  --sh-xl:0 28px 80px -18px rgba(12,26,10,.30);
  --sh-saffron:0 10px 26px -8px rgba(240,125,26,.50);
  --sh-saffron-lg:0 18px 44px -14px rgba(240,125,26,.34);
  --sh-inset-top:inset 0 1px 0 rgba(255,255,255,.34);
  --ring-saffron:0 0 0 3px rgba(240,125,26,.18);   /* soft focus ring on inputs */

  /* --- Motion --- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-hover:cubic-bezier(.25,.46,.45,.94);
  --dur-fast:160ms; --dur-base:240ms; --dur-slow:640ms;

  /* --- z-index scale --- */
  --z-base:1; --z-raised:10; --z-sticky:100; --z-header:200; --z-fab:300;
  --z-drawer:400; --z-modal:500; --z-toast:600;

  /* --- Header metrics (read by JS scroll offsets and sticky elements) ---
     The header carries the client's complete logo: a crest whose heart holds
     two lines of type ("Work" over "कर"). That needs 60-76px of logo height
     before either line is readable, so the bar is sized around the logo
     instead of the logo being squeezed into a 72px bar. See section 24. */
  --header-h:92px;
}

@media (max-width:767.98px){ :root{ --header-h:80px; } }
@media (min-width:1180px){ :root{ --header-h:100px; } }

/* =====================================================================
   2. RESET + BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
/* Global [hidden] guard. Several shared components (.form-success, .field,
   .btn, .callout, .filter) set an explicit `display`, which beats the user
   agent's [hidden]{display:none} rule, so a panel that ships hidden paints
   anyway. One author-level rule protects every current and future component. */
[hidden]{display:none!important}
/* No `scroll-behavior:smooth` here on purpose: it hijacks every programmatic
   scroll (tests, screenshot tools, "jump to results"). main.js animates
   in-page anchor clicks instead, and respects prefers-reduced-motion. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--sp-4);font-family:var(--font-head);color:var(--heading);
  font-weight:700;line-height:var(--lh-head);letter-spacing:var(--ls-head);text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--sp-4)}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}
a{color:var(--forest-600);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--saffron-700)}
img,video{max-width:100%;height:auto;display:block}
/* Placeholder ground for content photography only. Scoped to unclassed images
   so every brand mark, cutout logo and icon no longer has to clear a grey
   square by hand. */
img:not([class]){background:var(--ink-50)}
/* Inline sprite icons default to the current text size. Decorative SVGs
   (ribbon, skyline, hex, rings, art) set their own size through a class,
   which wins on specificity. Never ship an <svg><use> without a size. */
svg{display:inline-block;vertical-align:-.18em;width:1.125em;height:1.125em;flex:none}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.2em}
li+li{margin-top:var(--sp-2)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-8) 0}
strong,b{font-weight:600;color:var(--ink-800)}
small{font-size:var(--fs-sm)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}
figure{margin:0}
blockquote{margin:0}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
:target{scroll-margin-top:calc(var(--header-h) + 24px)}
::selection{background:var(--saffron-200);color:var(--ink-900)}

:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:inherit}
.on-dark :focus-visible,.section--dark :focus-visible,.page-hero--dark :focus-visible,
.site-footer :focus-visible,.cta-band :focus-visible{outline-color:var(--focus-on-dark)}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-100px;left:var(--sp-4);z-index:calc(var(--z-toast) + 1);
  background:var(--forest-700);color:#fff;padding:12px 20px;border-radius:var(--r-pill);
  font-weight:600;font-size:var(--fs-sm);text-decoration:none;transition:top var(--dur-fast);
}
.skip-link:focus{top:12px;color:#fff}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.container--wide{max-width:1440px}

.section{padding-block:var(--section-y);position:relative}
.section--tint{background:var(--surface-2)}
.section--warm{background:var(--surface-warm)}
/* position:relative matters: the ::before glow below is inset:0, and without a
   positioning context it resolves against the page and washes the whole document. */
.section--dark{position:relative;background:var(--grad-dark-band);color:var(--text-on-dark);isolation:isolate;overflow:hidden}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark a:not(.btn):not(.chip):not(.ind-tile){color:var(--saffron-300)}
.section--dark b,.section--dark strong{color:#fff}
.section--dark .fineprint,.section--dark .card__body,.section--dark p{color:var(--text-on-dark-muted)}
.section--flush-bottom{padding-bottom:0}
.section--flush-top{padding-top:0}
.section--tight{padding-block:clamp(2.5rem,2rem + 2vw,4rem)}

/* dark band ambience */
.section--dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--glow-saffron),var(--glow-green);
}

.section-head{max-width:760px;margin:0 auto clamp(2rem,1.4rem + 2vw,3.5rem);text-align:center}
.section-head h2{margin-bottom:var(--sp-4)}
.section-head .lead{margin:0 auto;max-width:62ch}
.section-head--left{margin-inline:0;text-align:left}

/* Two-column header: heading left, context paragraph right (graft from B) */
.section-head--split{
  max-width:none;text-align:left;display:grid;gap:var(--sp-4) clamp(24px,4vw,64px);
  align-items:end;grid-template-columns:1fr;
}
.section-head--split h2{margin-bottom:0}
.section-head--split .section-head__aside{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.section-head--split .lead{margin:0;max-width:52ch}
@media (min-width:900px){
  .section-head--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--sp-4);
  font-family:var(--font-body);font-size:var(--fs-xs);font-weight:700;
  /* --saffron-700 (#C2560A) is 4.54:1 on pure white but only 4.37:1 on the
     ivory band and 4.31:1 on the tint. The eyebrow is 12px/700, which is not
     WCAG "large text", so it needs 4.5:1 on every ground it appears on.
     --saffron-800 measures 6.27:1 on ivory and reads identically saffron. */
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--saffron-800);
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-ribbon-saffron);flex:none}
.section--dark .eyebrow{color:var(--saffron-300)}
.section-head:not(.section-head--left):not(.section-head--split) .eyebrow{justify-content:center}

.lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:1.6;text-wrap:pretty}
.section--dark .lead{color:var(--text-on-dark-muted)}
.muted{color:var(--text-muted)}
.fineprint{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55}
.accent{color:var(--heading-accent)}
.accent-green{color:var(--forest-600)}
.section--dark .accent{color:var(--saffron-400)}
.script{font-family:var(--font-script);font-weight:400;color:var(--saffron-700);letter-spacing:0;line-height:1.3}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid>*,.duo>*,.doors>*,.legal-layout>*,.faq-layout>*{min-width:0}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* .grid--4 steps straight to 2x2 in the tablet band. The old 4 -> 3 step
   stranded the fourth card alone beside two empty cells on every four-item
   row. .grid--6 still passes through 3. */
@media (max-width:1023.98px){
  .grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* .grid--3 held three columns down to 768, where a column is about 213px and
   body copy breaks to three or four words a line. Two columns from 900 down. */
@media (max-width:899.98px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767.98px){
  .grid--4,.grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599.98px){
  .grid--2,.grid--3,.grid--4,.grid--6{grid-template-columns:minmax(0,1fr)}
  .grid--keep-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Card grids that are tuned to their card, not to a column count. Both were
   declared only in pages/home.css, so every other page that rendered job or
   course cards had to repeat them or stack in one column at every width. */
.jobs-grid{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:1fr}
@media (min-width:700px){ .jobs-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .jobs-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.course-grid{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:1fr}
@media (min-width:700px){ .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .course-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* A section whose bottom padding is replaced by a full-bleed ribbon. */
.section--ribbon{padding-bottom:0}

/* Two-column FAQ shell: questions beside a sticky "still stuck?" aside. */
.faq-layout{display:grid;gap:clamp(24px,3vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){
  .faq-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .faq-aside{position:sticky;top:calc(var(--header-h) + 24px)}
}

.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.stack--sm{gap:var(--sp-2)} .stack--lg{gap:var(--sp-8)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.cluster--sm{gap:var(--sp-2)}
.split{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between}

/* Media + copy two-up block */
.duo{display:grid;gap:clamp(28px,4vw,64px);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo--reverse>:first-child{order:2}
  .duo--wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .duo--wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
}

/* =====================================================================
   4. BRAND MOTIFS
   ===================================================================== */
/* Tricolour ribbon wave. Max TWO full-bleed ribbons per page, never text on it. */
.ribbon{
  position:absolute;left:0;right:0;bottom:-1px;width:100%;
  height:clamp(100px,9.5vw,140px);display:block;pointer-events:none;z-index:1;
}
.ribbon--divider{position:relative;bottom:auto;height:clamp(96px,8vw,128px);margin-bottom:-1px}
.ribbon--flip{transform:scaleX(-1)}

/* Slim 3px tricolour rule — the quiet version, unlimited use */
.tri-rule{height:4px;width:100%;border:0;margin:0;display:block;
  background:linear-gradient(90deg,var(--saffron-500) 0 33.33%,#fff 33.33% 66.66%,var(--forest-600) 66.66% 100%);}
.tri-rule--soft{height:3px;opacity:.9}

/* Vertical saffron-to-green tagline rule from the visiting card */
.brand-rule{
  position:relative;width:4px;border-radius:2px;background:var(--grad-rule);flex:none;align-self:stretch;min-height:56px;
}
.brand-rule::before,.brand-rule::after{
  content:"";position:absolute;left:50%;translate:-50% 0;width:10px;height:10px;border-radius:50%;
}
.brand-rule::before{top:-5px;background:var(--saffron-500)}
.brand-rule::after{bottom:-5px;background:var(--forest-600)}

/* Hexagon industry frame */
.hex{position:relative;width:64px;height:70px;display:grid;place-items:center;flex:none}
.hex>svg:first-child{position:absolute;inset:0;width:100%;height:100%}
.hex__icon{position:relative;width:26px;height:26px;stroke-width:1.75}

/* Dotted world-map / dot-grid watermark */
.dots-field{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,var(--forest-300) 1.4px,transparent 1.5px);
  background-size:18px 18px;opacity:.28;
  -webkit-mask-image:radial-gradient(68% 62% at 60% 45%,#000 0%,transparent 76%);
  mask-image:radial-gradient(68% 62% at 60% 45%,#000 0%,transparent 76%);
}

/* =====================================================================
   5. BUTTONS
   ===================================================================== */
.btn{
  --btn-h:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--btn-h);padding:0 22px;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.1;
  text-decoration:none;white-space:nowrap;background:none;color:inherit;
  transition:background var(--dur-fast) var(--ease-hover),color var(--dur-fast) var(--ease-hover),
             border-color var(--dur-fast) var(--ease-hover),transform var(--dur-fast) var(--ease-hover),
             box-shadow var(--dur-fast) var(--ease-hover);
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* A 45% opacity fade left saffron-on-ink under 3:1. An inert, fully opaque
   control keeps the disabled state legible instead. */
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--ink-100);color:var(--ink-500);border-color:var(--line);box-shadow:none;
  cursor:not-allowed;transform:none;pointer-events:none;
}
.btn--sm{--btn-h:40px;padding:0 16px;font-size:14px}
.btn--sm svg{width:16px;height:16px}
.btn--lg{--btn-h:56px;padding:0 30px;font-size:16px}
.btn--block{display:flex;width:100%}

.btn--primary{background:var(--saffron-500);color:var(--ink-900);box-shadow:var(--sh-saffron),var(--sh-inset-top)}
.btn--primary:hover{background:var(--saffron-600);color:var(--ink-900);box-shadow:0 14px 30px -8px rgba(240,125,26,.58),var(--sh-inset-top)}
.btn--saffron-deep{background:var(--saffron-700);color:#fff}
.btn--saffron-deep:hover{background:var(--saffron-800);color:#fff}
.btn--green{background:var(--forest-700);color:#fff;box-shadow:var(--sh-sm)}
.btn--green:hover{background:var(--forest-800);color:#fff}
.btn--outline{border-color:var(--forest-600);color:var(--forest-700);background:transparent}
.btn--outline:hover{background:var(--forest-50);color:var(--forest-800);border-color:var(--forest-700)}
.btn--ghost{color:var(--forest-700);padding-inline:14px}
.btn--ghost:hover{background:var(--forest-50);color:var(--forest-800)}
.btn--white{background:#fff;color:var(--ink-900);box-shadow:var(--sh-md)}
.btn--white:hover{background:var(--saffron-50);color:var(--ink-900)}
.btn--whatsapp{background:var(--whatsapp);color:var(--ink-900);box-shadow:var(--sh-sm)}
.btn--whatsapp:hover{background:#1FBA59;color:var(--ink-900)}
.btn--icon{--btn-h:44px;width:44px;min-width:44px;padding:0;border-radius:var(--r-md);border-color:var(--line);color:var(--text-muted);background:#fff}
.btn--icon:hover{border-color:var(--saffron-300);color:var(--saffron-700);background:var(--saffron-50)}
.section--dark .btn--outline,.on-dark .btn--outline{border-color:rgba(255,255,255,.4);color:#fff}
.section--dark .btn--outline:hover,.on-dark .btn--outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.section--dark .btn--ghost,.on-dark .btn--ghost{color:var(--saffron-300)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-sm);
  color:var(--forest-700);text-decoration:none;
}
.link-arrow svg{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease-hover)}
.link-arrow:hover{color:var(--saffron-700)}
.link-arrow:hover svg{transform:translateX(3px)}
.section--dark .link-arrow{color:var(--saffron-300)}

/* Button spinner shown while a submit is handed to the visitor's mail app */
.btn.is-loading{pointer-events:none;position:relative;color:transparent!important}
.btn.is-loading::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  border-color:rgba(18,23,18,.3);border-top-color:var(--ink-900);
  animation:wk-spin .7s linear infinite;
}
.btn--green.is-loading::after,.btn--saffron-deep.is-loading::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes wk-spin{to{transform:rotate(360deg)}}

/* =====================================================================
   6. CHIPS + BADGES
   ===================================================================== */
.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);background:#fff;
  font-size:13.5px;font-weight:500;color:var(--text);text-decoration:none;
  transition:all var(--dur-fast) var(--ease-hover);
}
.chip svg{width:15px;height:15px;color:var(--text-muted)}
.chip:hover{border-color:var(--saffron-300);background:var(--saffron-50);color:var(--saffron-800)}
.chip:hover svg{color:var(--saffron-700)}
.chip.is-active,.chip[aria-pressed="true"]{background:var(--forest-50);border-color:var(--forest-400);color:var(--forest-800);font-weight:600}
.chip--removable{padding-right:8px}
.chip__x{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:0;
  background:var(--ink-100);color:var(--ink-600);padding:0;
}
.chip__x:hover{background:var(--danger-bg);color:var(--danger-fg)}
.chip--skill{background:var(--ink-50);border-color:var(--line-soft);font-size:13px;min-height:30px;padding:0 11px;color:var(--ink-700)}
/* A skill the candidate is MISSING, beside the ticked ones they already have.
   Dashed, so the difference is never carried by colour alone. */
.chip--gap{border-color:var(--saffron-400);border-style:dashed;color:var(--saffron-800)}
.section--dark .chip--gap{color:var(--saffron-300)}
.chip--ghost{background:transparent}
.section--dark .chip{background:rgba(255,255,255,.07);border-color:var(--line-dark);color:var(--text-on-dark)}
.section--dark .chip:hover{background:rgba(245,151,61,.16);border-color:var(--saffron-400);color:#fff}
.section--dark .chip--skill{color:var(--text-on-dark-muted)}

.badge{
  display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:2px 10px;
  border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1.35;letter-spacing:.005em;
  background:var(--ink-100);color:var(--ink-700);border:1px solid transparent;white-space:nowrap;
}
.badge svg{width:13px;height:13px}
.badge--hiring{background:var(--forest-50);color:var(--forest-700)}
.badge--urgent{background:var(--saffron-100);color:var(--saffron-800)}
.badge--walkin{background:var(--saffron-500);color:var(--ink-900)}
.badge--walkin::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-900);animation:wk-pulse 1.8s var(--ease-out) infinite}
@keyframes wk-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.badge--fresher{background:var(--forest-50);color:var(--forest-700)}
.badge--remote{background:var(--info-bg);color:var(--info-fg)}
.badge--women{background:#FBECF4;color:#9A3168}
.badge--early{background:var(--saffron-50);color:var(--saffron-800)}
.badge--verified{background:var(--success-bg);color:var(--success-fg)}
.badge--agency{background:#fff;color:var(--ink-600);border-color:var(--line-strong)}
.badge--new{background:var(--saffron-500);color:var(--ink-900)}
.badge--sample{background:transparent;color:var(--text-muted);border:1px dashed var(--line-strong);font-weight:500}
/* The one label that marks fabricated content as fake has to stay legible on
   the dark band, where the saffron glow sits behind it. Its own scrim: 10.7:1. */
.section--dark .badge--sample{background:rgba(12,26,10,.72);border-color:rgba(234,241,231,.36);color:var(--text-on-dark)}
.badge--note{background:var(--saffron-50);color:var(--saffron-800);border-color:var(--saffron-200);font-variant-numeric:tabular-nums}
.section--dark .badge--note{background:rgba(245,151,61,.14);color:var(--saffron-300);border-color:rgba(245,151,61,.32)}
.badge--save{background:var(--forest-600);color:#fff}

/* Sample-content notice a visitor can read */
.sample-note{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);
  border:1px dashed var(--line-strong);background:#fff;color:var(--text-muted);
  font-size:var(--fs-sm);line-height:1.4;
}
.sample-note svg{width:16px;height:16px;color:var(--saffron-700);flex:none}
.section--dark .sample-note{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:var(--text-on-dark-muted)}

/* =====================================================================
   7. CARDS
   ===================================================================== */
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(20px,2.2vw,28px);box-shadow:var(--sh-sm);
  transition:transform var(--dur-fast) var(--ease-hover),box-shadow var(--dur-fast) var(--ease-hover),border-color var(--dur-fast) var(--ease-hover);
}
.card--flat{box-shadow:none}
.card--tint{background:var(--surface-2)}
/* A tint card on a tint band is the exact colour of its ground and survives
   only on its 1px border. Flip it to white so the card still reads as a card. */
.section--tint .card--tint{background:var(--surface)}
.card--warm{background:var(--surface-warm)}
.card--pad-sm{padding:var(--sp-5)}
.card--interactive:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--saffron-200)}
.card__title{font-size:var(--fs-h4);margin-bottom:var(--sp-2)}
.card__body{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.6}
.card__foot{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.card--topbar::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--grad-ribbon-saffron)}
.card--topbar-green::before{background:var(--grad-ribbon-green)}
/* Who-pays qualifier pill above a card title. Saffron marks the one audience
   that pays WorkKar, forest everyone who never does, so the two are
   deliberately different hues rather than decoration. */
.portal-card__tag{
  align-self:flex-start;margin:0;padding:3px 10px;
  border-radius:var(--r-pill);border:1px solid var(--saffron-200);background:var(--saffron-50);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--saffron-800);
}
.portal-card__tag--green{border-color:var(--forest-200);background:var(--forest-50);color:var(--forest-700)}
.portal-card__tag+.card__title{margin-top:0}
.section--dark .card{background:rgba(255,255,255,.045);border-color:var(--line-dark);box-shadow:none;color:var(--text-on-dark)}
.section--dark .card__body{color:var(--text-on-dark-muted)}

/* Feature tile */
.feature-tile{display:flex;flex-direction:column;gap:var(--sp-3)}
.feature-tile__icon{
  width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;
  background:var(--saffron-50);color:var(--saffron-700);
}
.feature-tile__icon svg{width:22px;height:22px}
.feature-tile__icon--green{background:var(--forest-50);color:var(--forest-600)}
.feature-tile h3{font-size:17px;margin:0}
.feature-tile p{font-size:var(--fs-sm);color:var(--text-muted);margin:0;line-height:1.6}
/* Declared AFTER .section--dark p at equal specificity, so without this a
   feature tile on the dark band rendered dark ink on dark green (2.68:1). */
.section--dark .feature-tile p{color:var(--text-on-dark-muted)}
.section--dark .feature-tile__icon{background:rgba(245,151,61,.14);color:var(--saffron-300)}
.section--dark .feature-tile__icon--green{background:rgba(139,183,125,.14);color:var(--forest-200)}

/* Bento grid */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.bento__tile{
  grid-column:span 12;display:flex;flex-direction:column;gap:var(--sp-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(18px,2vw,26px);transition:transform var(--dur-fast) var(--ease-hover),box-shadow var(--dur-fast) var(--ease-hover);
}
.bento__tile:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
@media (min-width:640px){
  .bento__tile--md{grid-column:span 6}
  .bento__tile--lg{grid-column:span 6}
  .bento__tile--xl{grid-column:span 12}
}
@media (min-width:1024px){
  .bento__tile--md{grid-column:span 4}
  .bento__tile--lg{grid-column:span 6}
  .bento__tile--xl{grid-column:span 6}
  .bento__tile--tall{grid-row:span 2}
}
.section--dark .bento__tile{
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.028));
  border-color:var(--line-dark);color:var(--text-on-dark);
}
.section--dark .bento__tile:hover{box-shadow:0 24px 60px -20px rgba(0,0,0,.6);border-color:rgba(245,151,61,.3)}
.bento__tile h3{font-size:17px;margin:0}
.bento__tile p{font-size:var(--fs-sm);color:var(--text-muted);margin:0;line-height:1.6}
.section--dark .bento__tile p{color:var(--text-on-dark-muted)}
.bento__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}

/* =====================================================================
   8. JOB CARD
   ===================================================================== */
.job-card{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-3);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--sp-5);box-shadow:var(--sh-xs);
  transition:transform var(--dur-fast) var(--ease-hover),box-shadow var(--dur-fast) var(--ease-hover),border-color var(--dur-fast) var(--ease-hover);
  height:100%;
}
.job-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(240,125,26,.24),var(--sh-sm);border-color:var(--saffron-200)}
.job-card.is-selected{border-color:var(--saffron-400)}
.job-card.is-selected::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--saffron-500)}
.job-card__top{display:flex;gap:var(--sp-3);align-items:flex-start}
.logo-tile{
  width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;
  font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.01em;
  background:var(--forest-50);color:var(--forest-700);
}
.logo-tile--saffron{background:var(--saffron-50);color:var(--saffron-800)}
.logo-tile--forest{background:var(--forest-50);color:var(--forest-700)}
.logo-tile--ink{background:var(--ink-100);color:var(--ink-700)}
.logo-tile--lg{width:56px;height:56px;font-size:17px}
.logo-tile--sm{width:32px;height:32px;font-size:12px;border-radius:var(--r-sm)}
.job-card__headings{flex:1;min-width:0}
.job-card__title{
  font-size:17px;font-weight:600;margin:0 0 4px;line-height:1.3;color:var(--heading);
  /* Three lines, not two: under about 380px a job card clipped the longest
     titles in the dataset mid-word. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.job-card__title a{color:inherit;text-decoration:none}
.job-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.job-card__title a:hover{color:var(--saffron-700)}
.job-card__co{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-muted)}
.job-card__co b{font-weight:600;color:var(--ink-700)}
.job-card__save{position:relative;z-index:2;flex:none}
.job-card__save.is-saved{color:var(--saffron-700);border-color:var(--saffron-300);background:var(--saffron-50)}
.job-card__save.is-saved svg{fill:var(--saffron-500)}
.job-card__meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-sm);color:var(--text-muted)}
.job-card__meta span{display:inline-flex;align-items:center;gap:6px}
.job-card__meta svg{width:16px;height:16px;color:var(--ink-400);flex:none}
.job-card__summary{
  font-size:var(--fs-sm);color:var(--text-muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.job-card__skills{display:flex;flex-wrap:wrap;gap:6px}
.job-card__foot{
  margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;
}
.job-card__stamp{font-size:var(--fs-xs);color:var(--text-subtle);display:flex;flex-wrap:wrap;gap:4px 10px}
.job-card__actions{position:relative;z-index:2;display:flex;gap:var(--sp-2);align-items:center}
.job-card__badges{display:flex;flex-wrap:wrap;gap:6px}
.job-card__ring{position:absolute;right:var(--sp-5);top:70px;display:none}
@media (min-width:1100px){ .job-card--wide .job-card__ring{display:block} }

/* Company card */
.company-card{display:flex;gap:var(--sp-4);align-items:flex-start}
.company-card__body{min-width:0}
.company-card h3{font-size:var(--fs-h4);margin:0 0 4px}
.company-card__meta{font-size:var(--fs-sm);color:var(--text-muted);margin:0 0 var(--sp-2)}

/* Course card */
.course-card{display:flex;flex-direction:column;gap:var(--sp-3);height:100%}
.course-card__inst{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-muted)}
.course-card__title{
  font-size:var(--fs-h4);margin:0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.course-card__title a{color:inherit;text-decoration:none}
.course-card__title a:hover{color:var(--saffron-700)}
.course-card__batch{font-size:var(--fs-sm);color:var(--text-muted)}
.course-card__batch b{color:var(--ink-700)}
.course-card__seats{color:var(--saffron-700);font-weight:600}
.course-card__fee{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--line-soft)}
.course-card__price{font-family:var(--font-head);font-size:24px;font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums}
.course-card__gst{font-size:var(--fs-xs);color:var(--text-muted)}
.course-card__emi{font-size:var(--fs-xs);color:var(--text-muted);width:100%}

/* Blog card */
.post-card{display:flex;flex-direction:column;overflow:hidden;padding:0;height:100%}
.post-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-100)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.post-card:hover .post-card__media img{transform:scale(1.04)}
.post-card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.post-card__title{font-size:var(--fs-h4);margin:0;line-height:1.35}
.post-card__title a{color:inherit;text-decoration:none}
.post-card__title a::after{content:"";position:absolute;inset:0}
.post-card__title a:hover{color:var(--saffron-700)}
.post-card__meta{font-size:var(--fs-xs);color:var(--text-subtle);margin-top:auto;padding-top:var(--sp-2)}
.post-card__excerpt{font-size:var(--fs-sm);color:var(--text-muted);margin:0}

/* Pricing card */
.pricing-card{display:flex;flex-direction:column;gap:var(--sp-4);height:100%}
.pricing-card__name{font-family:var(--font-head);font-weight:700;font-size:var(--fs-h4);color:var(--heading);margin:0}
.pricing-card__who{font-size:var(--fs-sm);color:var(--text-muted);margin:0;min-height:2.6em}
.pricing-card__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pricing-card__amount{
  font-family:var(--font-head);font-size:clamp(2rem,1.6rem + 1.2vw,2.5rem);font-weight:700;
  color:var(--heading);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.pricing-card__per{font-size:var(--fs-sm);color:var(--text-muted)}
.pricing-card__billed{font-size:var(--fs-xs);color:var(--text-subtle);min-height:1.5em;margin:0}
.pricing-card__features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pricing-card__features li{display:flex;gap:9px;font-size:var(--fs-sm);color:var(--ink-700);line-height:1.5;margin:0}
.pricing-card__features svg{width:17px;height:17px;color:var(--forest-500);flex:none;margin-top:2px}
.pricing-card__cta{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:center}
.pricing-card__note{font-size:var(--fs-xs);color:var(--text-subtle);text-align:center;margin:0}
.pricing-card__note a{color:var(--forest-600)}
.pricing-card--featured{
  border-color:var(--saffron-300);box-shadow:0 22px 52px -18px rgba(240,125,26,.34),var(--sh-sm);
}
@media (min-width:900px){ .pricing-card--featured{transform:translateY(-8px)} }
.pricing-card__flag{
  position:absolute;top:-13px;left:50%;translate:-50% 0;
  background:var(--saffron-500);color:var(--ink-900);font-size:12px;font-weight:700;
  padding:4px 14px;border-radius:var(--r-pill);white-space:nowrap;box-shadow:var(--sh-sm);
}

/* There is deliberately no billing toggle, no monthly/annual switch and no
   tier comparison in this stylesheet. WorkKar sells recruitment, not a plan:
   every fee is quoted per engagement and invoiced against a signed proposal.
   If a "monthly or annual" control is ever asked for, it is the brief that is
   wrong. See _partials/COMPONENTS.md, "Fees". */

/* =====================================================================
   9. STATS
   ===================================================================== */
.stat{display:flex;flex-direction:column;gap:2px}
.stat__num{
  font-family:var(--font-head);font-weight:700;color:var(--saffron-600);
  font-size:clamp(2.25rem,1.8rem + 1.6vw,3.25rem);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.stat__label{font-size:var(--fs-sm);color:var(--text-muted);font-weight:500}
.stat__foot{font-size:var(--fs-xs);color:var(--text-subtle)}
.section--dark .stat__num{color:var(--saffron-400)}
.section--dark .stat__label{color:var(--text-on-dark-muted)}

/* =====================================================================
   10. TESTIMONIAL + CAROUSEL
   ===================================================================== */
.testimonial{display:flex;flex-direction:column;gap:var(--sp-4);height:100%}
.testimonial__mark{width:34px;height:28px;color:var(--saffron-400);opacity:.55;flex:none}
.testimonial__quote{font-size:17px;line-height:1.6;color:var(--ink-700);margin:0;text-wrap:pretty}
.testimonial__metric{align-self:flex-start}
.testimonial__who{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.avatar{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--font-head);font-weight:700;font-size:14px;
  background:var(--forest-100);color:var(--forest-700);
}
.avatar--saffron{background:var(--saffron-100);color:var(--saffron-800)}
.avatar--sm{width:34px;height:34px;font-size:12px}
.avatar--lg{width:56px;height:56px;font-size:17px}
.testimonial__name{font-weight:600;font-size:var(--fs-sm);color:var(--ink-800);margin:0}
.testimonial__role{font-size:var(--fs-xs);color:var(--text-muted);margin:0}

.carousel{position:relative}
.carousel__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(88%,380px);gap:var(--sp-4);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-block:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>*{scroll-snap-align:start}
@media (min-width:900px){ .carousel__track{grid-auto-columns:min(46%,440px)} }
.carousel__nav{display:flex;gap:var(--sp-2);align-items:center;justify-content:center;margin-top:var(--sp-5)}
.carousel__dots{display:flex;gap:7px;align-items:center;margin-inline:var(--sp-3)}
.carousel__dot{
  width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--ink-300);cursor:pointer;
  transition:all var(--dur-fast);
}
.carousel__dot.is-active{background:var(--saffron-500);width:26px;border-radius:var(--r-pill)}

/* =====================================================================
   11. LOGO / TRUST WALL
   ===================================================================== */
.logo-wall{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:center}
.logo-wall__item{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-md);
  border:1px solid var(--line);background:#fff;font-size:var(--fs-sm);font-weight:600;color:var(--ink-700);
}
.logo-wall__item svg{width:17px;height:17px;color:var(--forest-500)}
.section--dark .logo-wall__item{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:var(--text-on-dark)}
.logo-wall--marquee{overflow:hidden;flex-wrap:nowrap;justify-content:flex-start;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 120px,#000 calc(100% - 120px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 120px,#000 calc(100% - 120px),transparent);}
.logo-wall--marquee .logo-wall__row{display:flex;gap:var(--sp-3);animation:wk-marquee 45s linear infinite;flex:none}
.logo-wall--marquee:hover .logo-wall__row{animation-play-state:paused}
@keyframes wk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .logo-wall--marquee .logo-wall__row{animation:none} }

/* =====================================================================
   12. TABS
   ===================================================================== */
.tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.tabs--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tabs--scroll::-webkit-scrollbar{display:none}
.tab{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:var(--r-pill);border:1px solid var(--line-strong);background:#fff;
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);white-space:nowrap;
  transition:all var(--dur-fast) var(--ease-hover);
}
.tab svg{width:17px;height:17px}
.tab:hover{border-color:var(--forest-300);color:var(--forest-700)}
.tab[aria-selected="true"]{background:var(--forest-700);border-color:var(--forest-700);color:#fff;box-shadow:var(--sh-sm)}
.tabs--underline{gap:var(--sp-5);border-bottom:1px solid var(--line);flex-wrap:nowrap;overflow-x:auto}
.tabs--underline .tab{
  border:0;border-radius:0;background:none;padding:0 2px 12px;min-height:40px;
  border-bottom:3px solid transparent;
}
.tabs--underline .tab[aria-selected="true"]{background:none;color:var(--forest-700);border-bottom-color:var(--saffron-500);box-shadow:none}
.tabpanel[hidden]{display:none!important}
.tabpanel:focus-visible{outline-offset:6px}
.section--dark .tab{background:rgba(255,255,255,.06);border-color:var(--line-dark);color:var(--text-on-dark-muted)}
.section--dark .tab[aria-selected="true"]{background:var(--saffron-500);border-color:var(--saffron-500);color:var(--ink-900)}

/* =====================================================================
   13. ACCORDION
   ===================================================================== */
.accordion{display:flex;flex-direction:column;gap:var(--sp-3)}
.accordion__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--dur-fast)}
.accordion__item:has(button[aria-expanded="true"]){border-color:var(--saffron-200);box-shadow:var(--sh-sm)}
.accordion__item h3{margin:0;font-size:inherit}
.accordion__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:18px var(--sp-5);border:0;background:none;text-align:left;
  font-family:var(--font-head);font-size:16.5px;font-weight:600;color:var(--heading);line-height:1.4;
}
.accordion__btn:hover{color:var(--saffron-800)}
.accordion__icon{
  width:30px;height:30px;border-radius:50%;background:var(--forest-50);color:var(--forest-600);
  display:grid;place-items:center;flex:none;transition:transform 200ms var(--ease-hover),background var(--dur-fast);
}
.accordion__icon svg{width:17px;height:17px}
.accordion__btn[aria-expanded="true"] .accordion__icon{transform:rotate(180deg);background:var(--saffron-100);color:var(--saffron-800)}
.accordion__panel{padding:0 var(--sp-5) var(--sp-5);color:var(--text-muted);font-size:var(--fs-sm);line-height:1.66}
.accordion__panel[hidden]{display:none}
.accordion--plain .accordion__item{border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none!important}
.accordion--plain .accordion__btn{padding-inline:0}
.accordion--plain .accordion__panel{padding-inline:0}

/* =====================================================================
   14. STEPPER / TIMELINE
   ===================================================================== */
.stepper{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-5);counter-reset:step;position:relative}
.stepper__item{display:flex;gap:var(--sp-4);position:relative}
.stepper__num{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--saffron-500);color:var(--ink-900);font-family:var(--font-head);font-weight:700;font-size:16px;
  box-shadow:var(--sh-inset-top);position:relative;z-index:2;
}
/* :is(h3,h4,h5): a stepper nested under a section heading needs h4 for a
   correct outline and must not lose its styling for it. */
.stepper__body :is(h3,h4,h5){font-size:var(--fs-h5);margin:0 0 4px}
.stepper__body p{font-size:var(--fs-sm);color:var(--text-muted);margin:0;line-height:1.6}
/* Declared after .section--dark p at equal specificity, so step copy inside a
   dark band kept the light-ground ink. */
.section--dark .stepper__body :is(h3,h4,h5){color:#fff}
.section--dark .stepper__body p{color:var(--text-on-dark-muted)}
/* vertical connector (mobile default) */
.stepper__item:not(:last-child)::before{
  content:"";position:absolute;left:20px;top:46px;bottom:calc(-1 * var(--sp-5) + 4px);width:2px;
  background:var(--forest-200);z-index:1;
}
@media (min-width:900px){
  .stepper--row{grid-template-columns:repeat(var(--steps,6),minmax(0,1fr));gap:var(--sp-4)}
  .stepper--row .stepper__item{flex-direction:column;gap:var(--sp-3)}
  .stepper--row .stepper__item:not(:last-child)::before{
    left:46px;right:-8px;top:20px;bottom:auto;width:auto;height:2px;
  }
}

/* =====================================================================
   15. MOCKUPS (kanban, ranked list, JD generator, chips, charts)
   ===================================================================== */
.mock{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.mock__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;
  padding:14px var(--sp-5);border-bottom:1px solid var(--line-soft);background:var(--surface-warm);
}
.mock__title{font-family:var(--font-head);font-weight:600;font-size:var(--fs-sm);color:var(--heading);margin:0}
.mock__body{padding:var(--sp-5)}
.mock__foot{
  padding:12px var(--sp-5);border-top:1px solid var(--line-soft);background:var(--ink-50);
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);color:var(--text-muted);
}
.section--dark .mock{background:rgba(255,255,255,.05);border-color:var(--line-dark);box-shadow:none}
.section--dark .mock__bar{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.section--dark .mock__title{color:#fff}
.section--dark .mock__foot{background:rgba(0,0,0,.18);border-color:var(--line-dark);color:var(--text-on-dark-muted)}

/* Kanban */
.kanban{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin}
.kanban__col{
  flex:1 0 210px;min-width:210px;scroll-snap-align:start;background:var(--ink-50);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;gap:10px;
}
.kanban__col--done{background:var(--forest-50);border-color:var(--forest-100)}
.kanban__colhead{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.kanban__count{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 8px;font-size:11px;letter-spacing:0;color:var(--ink-700)}
.kanban__card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:11px;
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-xs);
  transition:transform 500ms var(--ease-out),box-shadow 500ms var(--ease-out);
}
.kanban__card--lift{transform:rotate(-1.5deg);box-shadow:var(--sh-lg);border-color:var(--saffron-200)}
.kanban__who{display:flex;align-items:center;gap:8px}
.kanban__name{display:block;font-size:13px;font-weight:600;color:var(--ink-800);margin:0;line-height:1.3}
.kanban__role{display:block;font-size:11.5px;color:var(--text-muted);margin:0;line-height:1.3}
.kanban__meta{font-size:11.5px;color:var(--text-subtle);margin:0}
.kanban__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--text-subtle)}
.score-pill{
  display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 7px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--forest-50);color:var(--forest-700);
}
.score-pill--warm{background:var(--saffron-50);color:var(--saffron-800)}
.section--dark .kanban__col{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.section--dark .kanban__card{background:rgba(255,255,255,.07);border-color:var(--line-dark)}
.section--dark .kanban__name{color:#fff}

/* Ranked shortlist rows */
.rank-list{display:flex;flex-direction:column}
.rank-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.rank-row:last-child{border-bottom:0}
.rank-row__body{flex:1;min-width:0}
.rank-row__name{font-size:14.5px;font-weight:600;margin:0;color:var(--ink-800);line-height:1.3}
.rank-row__meta{font-size:12.5px;color:var(--text-muted);margin:2px 0 0;line-height:1.45}
.rank-row__why{font-size:12px;color:var(--text-subtle);margin:6px 0 0;line-height:1.5;display:flex;gap:6px}
.rank-row__why svg{width:14px;height:14px;color:var(--saffron-600);flex:none;margin-top:2px}
.rank-row__score{flex:none}
.section--dark .rank-row{border-color:var(--line-dark)}
.section--dark .rank-row__name{color:#fff}
.section--dark .rank-row__meta{color:var(--text-on-dark-muted)}
.section--dark .rank-row__why{color:var(--text-on-dark-muted)}
.section--dark .score-pill{background:rgba(139,183,125,.2);color:#CFE6C6}
.section--dark .score-pill--warm{background:rgba(245,151,61,.2);color:var(--saffron-300)}

/* Progress bar */
.bar{height:8px;border-radius:5px;background:var(--ink-100);overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;background:var(--grad-ribbon-saffron)}
.section--dark .bar{background:rgba(255,255,255,.12)}

/* JD generator mock */
/* auto-fit, not a media query: the old min-width:620px was measured against
   the PAGE, so inside a bento tile at 768 it squeezed the draft column to about
   eighteen characters. auto-fit measures the mock itself and splits only when
   the mock is genuinely wide enough. */
.jd-mock{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.jd-mock__fields{display:flex;flex-direction:column;gap:10px}
.jd-field{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 11px;background:#fff}
.jd-field__label{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:2px}
.jd-field__value{font-size:13.5px;font-weight:600;color:var(--ink-800)}
.jd-mock__out{
  background:var(--ink-50);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:14px;font-size:13px;line-height:1.7;color:var(--ink-700);min-height:150px;
}
.jd-mock__out b{display:block;color:var(--saffron-800);font-weight:600;margin-bottom:4px}
.jd-caret{display:inline-block;width:7px;height:15px;background:var(--saffron-500);vertical-align:-2px;animation:wk-blink 1s steps(2) infinite}
@keyframes wk-blink{50%{opacity:0}}
.section--dark .jd-field{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.section--dark .jd-field__value{color:#fff}
.section--dark .jd-mock__out{background:rgba(0,0,0,.24);border-color:var(--line-dark);color:var(--text-on-dark-muted)}
.section--dark .jd-mock__out b{color:var(--saffron-300)}

/* Floating glass chips over heroes and photos */
.float-chip{
  display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--sh-lg);
  font-size:13px;font-weight:600;color:var(--ink-800);backdrop-filter:blur(8px);white-space:nowrap;
}
.float-chip__dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--forest-600);color:#fff}
.float-chip__dot svg{width:14px;height:14px}
.float-chip__dot--saffron{background:var(--saffron-500);color:var(--ink-900)}
.float-chip__dot--wa{background:var(--whatsapp);color:#fff}

/* WhatsApp-style notification card */
.wa-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--sh-md);max-width:300px}
/* --whatsapp-deep is 4.26:1 on white and 3.87:1 on the forest-50 bubble, under
   AA for the 12px sender name. The forest ramp keeps it green and clears AA;
   the icon stays brand green, where the 3:1 non-text bar applies. */
.wa-card__head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--forest-700)}
.wa-card__head svg{width:15px;height:15px;color:var(--whatsapp-deep)}
.wa-card__msg{font-size:13px;color:var(--ink-700);margin:6px 0 0;line-height:1.5}
.wa-card__time{font-size:11px;color:var(--text-subtle);text-align:right;margin:4px 0 0}
/* .wa-card is a WHITE card that often floats on a dark band, but
   `.section--dark p` (0,1,1) beats `.wa-card__msg` (0,1,0) and dropped the
   bubbles to 2.1:1 against their own ground. Put the card's own ink back. */
.section--dark .wa-card__msg{color:var(--ink-700)}
.section--dark .wa-card__time{color:var(--text-muted)}
.section--dark .wa-card__head{color:var(--forest-700)}
.section--dark .wa-card b,.section--dark .wa-card strong{color:var(--ink-800)}

/* Salary range bar */
.salary-bar{display:flex;flex-direction:column;gap:6px}
.salary-bar__track{position:relative;height:10px;border-radius:5px;background:var(--ink-100)}
.salary-bar__band{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--grad-ribbon-saffron);opacity:.55}
.salary-bar__marker{position:absolute;top:-4px;width:3px;height:18px;border-radius:2px;background:var(--forest-700)}
.salary-bar__scale{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-subtle)}
.section--dark .salary-bar__track{background:rgba(255,255,255,.14)}
.section--dark .salary-bar__marker{background:#fff}
.section--dark .salary-bar__scale{color:var(--text-on-dark-muted)}

/* CSS charts.
   The columns STRETCH so a percentage height on .chart-bars__fill has a
   definite box to resolve against; with the old align-items:flex-end every
   bar collapsed to its 6px minimum and a 3 drew the same as a 2.
   The label strip is reserved as bottom padding and the label is lifted out of
   flow into it, so the column's content box IS the scale and 88% really draws
   1.47x the 60% bar. Two ways to set a bar, both supported:
     <span class="chart-bars__fill" style="height:88%">
     <div class="chart-bars__col" style="--bar:.6667">            */
.chart-bars{display:flex;align-items:stretch;gap:10px;height:140px}
.chart-bars__col{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;text-align:center;
  position:relative;height:100%;padding-bottom:22px;box-sizing:border-box;
}
.chart-bars__fill{
  border-radius:6px 6px 0 0;background:var(--grad-ribbon-green);min-height:6px;
  flex:0 0 auto;height:calc(var(--bar,0) * 100%);
}
.chart-bars__label{position:absolute;left:0;right:0;bottom:0;height:22px;display:flex;align-items:center;justify-content:center}
.chart-bars__col:nth-child(even) .chart-bars__fill{background:var(--grad-ribbon-saffron)}
.chart-bars__label{font-size:11px;color:var(--text-muted)}
.section--dark .chart-bars__label{color:var(--text-on-dark-muted)}
.chart-donut{width:132px;height:132px;border-radius:50%;flex:none;
  background:conic-gradient(var(--saffron-500) 0 42%,var(--forest-500) 42% 70%,var(--forest-300) 70% 88%,var(--ink-200) 88% 100%);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%)}

/* =====================================================================
   16. AI MATCH RING
   ===================================================================== */
.match-ring{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center}
.match-ring--sm{width:44px;height:44px}
.match-ring--lg{width:96px;height:96px}
.match-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.match-ring__track{fill:none;stroke:var(--forest-100);stroke-width:6}
.match-ring__fill{
  fill:none;stroke:var(--saffron-500);stroke-width:6;stroke-linecap:round;
  transition:stroke-dashoffset 1.1s var(--ease-out);
}
.match-ring__val{
  position:relative;font-family:var(--font-head);font-weight:700;font-size:16px;
  color:var(--forest-700);font-variant-numeric:tabular-nums;line-height:1;
}
.match-ring--sm .match-ring__val{font-size:13px}
.match-ring--lg .match-ring__val{font-size:26px}
.section--dark .match-ring__track{stroke:rgba(255,255,255,.15)}
.section--dark .match-ring__val{color:#fff}

.match-panel{display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap}
.match-panel__body{flex:1;min-width:210px}

/* =====================================================================
   17. INDUSTRY TILE
   ===================================================================== */
.ind-grid{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){ .ind-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .ind-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
.ind-tile{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;text-decoration:none;
  padding:clamp(18px,2vw,24px) var(--sp-3);border-radius:var(--r-xl);border:1px solid var(--line);
  background:#fff;box-shadow:var(--sh-xs);
  transition:transform var(--dur-fast) var(--ease-hover),box-shadow var(--dur-fast) var(--ease-hover),border-color var(--dur-fast),background var(--dur-fast);
}
.ind-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.ind-tile__name{font-family:var(--font-head);font-weight:600;font-size:15.5px;color:var(--heading);line-height:1.25}
.ind-tile__count{font-size:var(--fs-xs);color:var(--text-muted)}
/* alternating saffron / forest tiles (graft from B and C) */
.ind-tile--saffron{background:linear-gradient(170deg,#FFF6EC 0%,#FFFFFF 62%);border-color:var(--saffron-200)}
.ind-tile--saffron:hover{border-color:var(--saffron-400)}
.ind-tile--saffron .ind-tile__name{color:var(--saffron-800)}
.ind-tile--saffron .hex__icon{color:var(--saffron-700)}
.ind-tile--forest{background:linear-gradient(170deg,#EFF6ED 0%,#FFFFFF 62%);border-color:var(--forest-200)}
.ind-tile--forest:hover{border-color:var(--forest-400)}
.ind-tile--forest .ind-tile__name{color:var(--forest-700)}
.ind-tile--forest .hex__icon{color:var(--forest-600)}

/* =====================================================================
   18. FORMS
   ===================================================================== */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-800)}
.field__label .req{color:var(--danger-fg)}
.field__hint{font-size:13px;color:var(--text-muted)}
.field__error{display:none;align-items:center;gap:6px;font-size:13px;color:var(--danger-fg);font-weight:500}
.field__error svg{width:15px;height:15px;flex:none}
.field.has-error .field__error{display:flex}
.input,.select,.textarea{
  width:100%;min-height:48px;padding:12px 14px;font-size:16px;line-height:1.4;
  border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;color:var(--text);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-400)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--forest-300)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--saffron-500);box-shadow:var(--ring-saffron)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.textarea{min-height:120px;resize:vertical}
.select{
  appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235C655C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-width:1.5px;border-color:var(--danger-fg)}
/* Wrap an input in .field__control whenever something is overlaid on it
   (the +91 prefix, a leading icon). The wrapper is the positioning context. */
.field__control{position:relative;display:block}
.field--phone .input{padding-left:54px}
.field__prefix{
  position:absolute;left:1px;top:1px;bottom:1px;display:grid;place-items:center;width:46px;
  font-size:15px;font-weight:600;color:var(--text-muted);border-right:1px solid var(--line);
  border-radius:var(--r-md) 0 0 var(--r-md);pointer-events:none;
}

.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-700);line-height:1.55;cursor:pointer}
.check input{
  appearance:none;width:20px;height:20px;flex:none;margin-top:1px;border:2px solid var(--line-strong);
  border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:all var(--dur-fast);
}
.check input[type="radio"]{border-radius:50%}
.check input:checked{background:var(--forest-600);border-color:var(--forest-600)}
.check input:checked::after{
  content:"";width:11px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.check input[type="radio"]:checked::after{width:8px;height:8px;border:0;border-radius:50%;background:#fff;transform:none}
.check input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.form-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid .field--full{grid-column:1/-1}
@media (max-width:599.98px){ .form-grid{grid-template-columns:minmax(0,1fr)} .form-grid .field--full{grid-column:auto} }
.form-consent{font-size:13px;color:var(--text-muted);line-height:1.55}
/* margin-top: it sits outside .form-grid, so it inherits neither the grid gap
   nor a margin and used to land flush against whatever precedes it. */
.form-demo-note{
  margin-top:var(--sp-5);
  display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--text-muted);
  background:var(--saffron-50);border:1px solid var(--saffron-200);border-radius:var(--r-md);padding:11px 13px;line-height:1.55;
}
.form-demo-note svg{width:16px;height:16px;color:var(--saffron-700);flex:none;margin-top:2px}
.form-success[hidden]{display:none}
.form-success{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;
  padding:var(--sp-8) var(--sp-5);border:1px solid var(--forest-200);background:var(--forest-50);border-radius:var(--r-lg);
}
.form-success__icon{width:52px;height:52px;border-radius:50%;background:var(--success-bg);color:var(--success-fg);display:grid;place-items:center}
.form-success__icon svg{width:26px;height:26px}
.form-error-summary{
  border:1.5px solid var(--danger-fg);background:var(--danger-bg);color:var(--danger-fg);
  border-radius:var(--r-md);padding:12px 14px;font-size:var(--fs-sm);
}
.form-error-summary[hidden]{display:none}

/* --- One-time-code entry + auth furniture (login, signup, any OTP step) --- */
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,1.4vw,10px);max-width:392px}
.otp input{
  width:100%;min-height:56px;padding:0;text-align:center;
  font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:0;
  border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:#fff;color:var(--heading);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.otp input:hover{border-color:var(--forest-300)}
.otp input:focus{outline:none;border-color:var(--saffron-500);box-shadow:var(--ring-saffron)}
.otp input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.otp input.is-filled{border-color:var(--forest-400);background:var(--forest-50)}
.otp.has-error input{border-color:var(--danger-fg)}
@media (max-width:399.98px){ .otp input{min-height:50px;font-size:18px} }
.otp-timer{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0;
  font-size:var(--fs-sm);color:var(--text-muted);
}
.otp-timer svg{width:16px;height:16px;color:var(--saffron-700);flex:none}
.otp-timer b{color:var(--ink-800);font-variant-numeric:tabular-nums}
.auth-link{
  border:0;background:none;padding:0;font-size:var(--fs-sm);font-weight:600;
  color:var(--forest-700);text-decoration:underline;text-underline-offset:3px;
}
.auth-link:hover{color:var(--saffron-700)}
.auth-safety{
  display:flex;gap:10px;align-items:flex-start;margin:0;
  border:1px solid var(--forest-200);background:var(--forest-50);border-radius:var(--r-md);
  padding:12px 14px;font-size:13px;color:var(--ink-700);line-height:1.55;
}
.auth-safety svg{width:17px;height:17px;color:var(--forest-600);flex:none;margin-top:2px}
.auth-safety b{color:var(--forest-800)}

/* Search pill (hero + jobs page) */
.search-pill{
  display:grid;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:10px;box-shadow:var(--sh-lg);grid-template-columns:1fr;
}
.search-pill__field{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--ink-50);min-width:0}
.search-pill__field svg{width:19px;height:19px;color:var(--ink-400);flex:none}
/* 16px, not 15: below the 16px floor iOS zooms the page on focus. min-height
   40 so a thumb landing anywhere on the 46px row hits the control, not the
   padding (the label is visually hidden). */
.search-pill__field input,.search-pill__field select{
  border:0;background:none;width:100%;min-width:0;font-size:16px;padding:0;min-height:40px;
}
.search-pill__field input:focus,.search-pill__field select:focus{outline:none}
.search-pill__field:focus-within{background:var(--saffron-50);box-shadow:inset 0 0 0 1px var(--saffron-300)}
.search-pill .btn{width:100%}
@media (min-width:860px){
  .search-pill{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr) auto;align-items:center;border-radius:var(--r-pill);padding:8px 8px 8px 10px}
  .search-pill__field{background:none;padding:6px 12px;border-left:1px solid var(--line)}
  .search-pill__field:first-child{border-left:0}
  .search-pill__field:focus-within{background:none;box-shadow:none}
  .search-pill__field:focus-within svg{color:var(--saffron-600)}
  .search-pill .btn{width:auto}
}

/* =====================================================================
   19. TOASTS, MODAL, COOKIE BAR
   ===================================================================== */
.toast-stack{
  position:fixed;z-index:var(--z-toast);right:var(--sp-5);bottom:calc(var(--sp-5) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 32px));pointer-events:none;
}
@media (max-width:639.98px){
  .toast-stack{right:var(--sp-4);left:var(--sp-4);bottom:calc(92px + env(safe-area-inset-bottom,0px));max-width:none}
}
.toast{
  pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border-radius:var(--r-md);
  background:var(--forest-800);color:#fff;box-shadow:var(--sh-xl);font-size:var(--fs-sm);line-height:1.5;
  position:relative;overflow:hidden;animation:wk-toast-in 320ms var(--ease-out);
}
@keyframes wk-toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast.is-leaving{opacity:0;transform:translateY(8px);transition:all 200ms}
.toast svg{width:18px;height:18px;flex:none;margin-top:1px}
.toast__msg{flex:1}
.toast__close{background:none;border:0;color:inherit;opacity:.7;padding:0;width:20px;height:20px;display:grid;place-items:center}
.toast__close:hover{opacity:1}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--saffron-400);transform-origin:left;animation:wk-toast-bar 5s linear forwards}
@keyframes wk-toast-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast--warning{background:var(--saffron-700)}
.toast--error{background:var(--danger-fg)}
.toast--error::after,.toast--warning::after{background:rgba(255,255,255,.6)}

.modal{
  position:fixed;inset:0;z-index:var(--z-modal);display:none;place-items:center;padding:var(--sp-4);
}
.modal.is-open{display:grid}
.modal__backdrop{position:absolute;inset:0;background:rgba(12,26,10,.42);backdrop-filter:blur(4px);border:0;width:100%;height:100%;padding:0}
.modal__dialog{
  position:relative;width:100%;max-width:520px;max-height:min(86vh,720px);overflow:auto;
  background:#fff;border-radius:var(--r-xl);padding:clamp(22px,3vw,32px);box-shadow:var(--sh-xl);
  animation:wk-modal-in 260ms var(--ease-out);
}
@keyframes wk-modal-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal__close{position:absolute;top:14px;right:14px}

.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-fab);
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 34px -14px rgba(12,26,10,.24);
  padding:var(--sp-4) 0 calc(var(--sp-4) + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);transition:transform 360ms var(--ease-out);
}
.cookie-bar.is-open{transform:none}
.cookie-bar__inner{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;justify-content:space-between}
.cookie-bar__copy{flex:1;min-width:260px;font-size:13.5px;color:var(--text-muted);line-height:1.55}
.cookie-bar__copy b{color:var(--ink-800)}
.cookie-bar__actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-prefs{display:flex;flex-direction:column;gap:12px;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.cookie-prefs[hidden]{display:none}

/* =====================================================================
   20. BREADCRUMBS, PAGINATION, FILTER SIDEBAR
   ===================================================================== */
.breadcrumbs{font-size:13px;color:var(--text-muted)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center;gap:6px;margin:0}
.breadcrumbs li+li::before{content:"/";color:var(--ink-300)}
.breadcrumbs a{color:var(--text-muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--saffron-700);text-decoration:underline}
.breadcrumbs [aria-current="page"]{color:var(--ink-800);font-weight:500}

.pagination{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.pagination a,.pagination button,.pagination span{
  min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding:0 12px;
  border-radius:var(--r-md);border:1px solid var(--line);background:#fff;font-size:var(--fs-sm);
  font-weight:600;color:var(--ink-700);text-decoration:none;
}
.pagination a:hover,.pagination button:hover{border-color:var(--saffron-300);background:var(--saffron-50);color:var(--saffron-800)}
.pagination [aria-current="page"]{background:var(--forest-700);border-color:var(--forest-700);color:#fff}
.pagination .is-gap{border:0;background:none;min-width:24px;color:var(--ink-400)}

/* flex:0 0 auto on the children: .filter--sticky and .filter--sheet cap the
   panel's height, and the default flex-shrink:1 squashed every group and
   clipped the options inside it (groups are overflow:hidden). The panel
   scrolls instead. */
.filter{display:flex;flex-direction:column;gap:var(--sp-4)}
.filter>*{flex:0 0 auto}
.filter__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.filter__group{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.filter__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:13px var(--sp-4);border:0;background:none;font-size:var(--fs-sm);font-weight:600;color:var(--heading);text-align:left;
}
.filter__btn svg{width:17px;height:17px;transition:transform 200ms}
.filter__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.filter__panel{padding:0 var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:10px}
.filter__panel[hidden]{display:none}
.filter__opt{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--ink-700);min-height:28px}
.filter__opt .count{margin-left:auto;font-size:12px;color:var(--text-subtle);font-variant-numeric:tabular-nums}
@media (min-width:900px){ .filter--sticky{position:sticky;top:calc(var(--header-h) + 16px);max-height:calc(100vh - var(--header-h) - 32px);overflow:auto} }
@media (max-width:899.98px){
  .filter--sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-drawer);width:100%;max-width:100vw;box-sizing:border-box;
    display:none;background:#fff;height:min(86vh,760px);max-height:min(86vh,760px);overflow:auto;overscroll-behavior:contain;
    border-radius:var(--r-2xl) var(--r-2xl) 0 0;padding:var(--sp-5) var(--sp-4) calc(84px + env(safe-area-inset-bottom,0px));
    box-shadow:var(--sh-xl);transform:translateY(102%);transition:transform 300ms var(--ease-out);
  }
  .filter--sheet.is-open{display:flex;transform:none}
}

/* =====================================================================
   21. PAGE HERO (inner pages)
   ===================================================================== */
.page-hero{position:relative;background:var(--surface-warm);padding-block:clamp(2.5rem,2rem + 3vw,4.5rem) clamp(2.5rem,2rem + 3vw,4rem);overflow:hidden}
/* The middle third used to be #fff, which is invisible on an ivory hero above
   a white section, so the tricolour rule read as two disconnected bars.
   --ink-300 is about 1.9:1 on white and still clearly lighter than the flanks.
   .page-hero--dark keeps the white stop, below. */
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--saffron-500) 0 33.33%,var(--ink-300) 33.33% 66.66%,var(--forest-600) 66.66% 100%);opacity:.9}
.page-hero__inner{position:relative;z-index:2;display:grid;gap:clamp(24px,4vw,56px);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){ .page-hero--split .page-hero__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} }
.page-hero h1{margin:var(--sp-4) 0 var(--sp-4)}
.page-hero .lead{max-width:60ch}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.page-hero__media img{border-radius:var(--r-xl);box-shadow:var(--sh-lg);width:100%;object-fit:cover;aspect-ratio:4/3}
.page-hero--dark{background:var(--grad-dark-band);color:var(--text-on-dark)}
.page-hero--dark::after{background:linear-gradient(90deg,var(--saffron-500) 0 33.33%,#fff 33.33% 66.66%,var(--forest-600) 66.66% 100%)}
.page-hero--dark h1{color:#fff}
.page-hero--dark .lead{color:var(--text-on-dark-muted)}

/* =====================================================================
   22. CTA BAND (sunrise summit)
   ===================================================================== */
.cta-band{
  --ridge-h:clamp(170px,22vw,300px);   /* ridge art height, shared with the figures */
  --crest:.386;                        /* crest line as a fraction of --ridge-h from the bottom */
  position:relative;isolation:isolate;overflow:hidden;background:var(--forest-900);color:#fff;text-align:center;
}
/* The middle third is a light neutral, not #fff: the band nearly always sits
   under a white or ivory section, where a white stop is invisible and the rule
   reads as two disconnected bars. */
.cta-band__rule{
  height:5px;width:100%;
  background:linear-gradient(90deg,var(--saffron-500) 0 33.33%,var(--ink-300) 33.33% 66.66%,var(--forest-600) 66.66% 100%);
}
.cta-band__sky{position:absolute;inset:0;z-index:-2;background:var(--grad-sunrise)}
.cta-band__art{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;z-index:-1;display:block}
/* The ridge stretches horizontally (preserveAspectRatio="none"), so nothing
   with a recognisable shape may live in it. The climbers sit in their own
   uniformly scaled SVG parked exactly on the ridge's flat crest: the crest is
   at --crest of --ridge-h from the bottom at every width, so the two line up
   from 320px to 1920px with no rectangular seam. Never move --ridge-h and
   --crest independently. */
.cta-band__ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--ridge-h);z-index:-1;display:block}
.cta-band__figs{
  position:absolute;left:50%;translate:-50% 0;
  bottom:calc(var(--ridge-h) * var(--crest));
  width:clamp(158px,23vw,300px);height:auto;z-index:-1;display:block;
}
/* Saffron on the sunrise sky is 1.43:1 against the band beside the button, so
   the primary CTA needs a white ring of its own to be seen as the primary
   action next to the white secondary. Measured 4.39:1. */
.cta-band .btn--primary{box-shadow:0 0 0 2px rgba(255,255,255,.92),var(--sh-saffron),var(--sh-inset-top)}
.cta-band .btn--primary:hover{box-shadow:0 0 0 2px #fff,0 14px 30px -8px rgba(240,125,26,.58),var(--sh-inset-top)}
.cta-band__inner{position:relative;z-index:1;padding-block:clamp(4rem,3rem + 5vw,7.5rem) clamp(7rem,5rem + 8vw,12rem)}
.cta-band h2{
  color:#fff;font-size:clamp(1.75rem,1rem + 3.6vw,3.25rem);letter-spacing:-.02em;margin:0 0 6px;
  text-shadow:0 2px 18px rgba(12,26,10,.35);
}
.cta-band h2 .accent{color:var(--saffron-300)}
.cta-band__script{font-family:var(--font-script);font-size:clamp(1.4rem,1rem + 1.6vw,2rem);color:var(--saffron-200);margin:0 0 var(--sp-5);line-height:1.3}
.cta-band__sub{color:rgba(255,255,255,.88);max-width:56ch;margin:0 auto var(--sp-8);font-size:var(--fs-lead)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}

/* =====================================================================
   23. PROSE + LEGAL LAYOUT
   ===================================================================== */
.prose{max-width:72ch;font-size:16.5px;line-height:1.75;color:var(--ink-700)}
.prose h2{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);margin:var(--sp-10) 0 var(--sp-4)}
.prose h3{font-size:var(--fs-h4);margin:var(--sp-8) 0 var(--sp-3)}
.prose>:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.35em}
.prose li{margin-top:var(--sp-2)}
.prose a{color:var(--forest-600);text-decoration:underline}
.prose table{margin:var(--sp-6) 0;font-size:var(--fs-sm)}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--surface-2);font-weight:600;color:var(--heading)}
.prose blockquote{border-left:4px solid var(--saffron-400);padding-left:var(--sp-5);margin:var(--sp-6) 0;color:var(--ink-600);font-size:17px}
.callout{
  border:1px solid var(--saffron-200);background:var(--saffron-50);border-radius:var(--r-lg);
  padding:var(--sp-5);margin:var(--sp-6) 0;font-size:var(--fs-sm);line-height:1.65;color:var(--ink-700);
}
.callout--green{border-color:var(--forest-200);background:var(--forest-50)}
.callout__title{font-family:var(--font-head);font-weight:600;color:var(--heading);margin:0 0 6px;font-size:15.5px}

.legal-layout{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){ .legal-layout{grid-template-columns:260px minmax(0,1fr)} }
.toc{position:sticky;top:calc(var(--header-h) + 20px);font-size:var(--fs-sm)}
.toc__title{font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--sp-3)}
.toc ol{list-style:none;margin:0;padding:0;max-height:min(62vh,560px);overflow:auto;display:flex;flex-direction:column;gap:2px}
.toc li{margin:0}
.toc a{display:block;padding:6px 10px;border-radius:var(--r-sm);color:var(--text-muted);text-decoration:none;border-left:2px solid transparent}
.toc a:hover{background:var(--forest-50);color:var(--forest-700)}
.toc a.is-active{color:var(--forest-700);font-weight:600;border-left-color:var(--saffron-500);background:var(--saffron-50)}
.toc-select{display:block}
@media (min-width:1024px){ .toc-select{display:none} }
@media (max-width:1023.98px){ .toc{display:none} }

/* =====================================================================
   24. HEADER: utility bar, announcement, nav, mega-menu, drawer
   ===================================================================== */
.wk-sprite{position:absolute;width:0;height:0;overflow:hidden}

.util-bar{background:var(--forest-900);color:var(--text-on-dark-muted);font-size:13px}
.util-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:36px;flex-wrap:wrap}
.util-bar a{color:var(--text-on-dark-muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.util-bar a:hover{color:var(--saffron-300)}
.util-bar svg{width:15px;height:15px}
.util-bar__right{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.util-bar__sep{width:1px;height:14px;background:rgba(255,255,255,.18)}
@media (max-width:767.98px){ .util-bar{display:none} }

.announce{background:var(--saffron-50);border-bottom:1px solid var(--saffron-100);color:var(--ink-800);font-size:13.5px}
.announce[hidden]{display:none}
.announce__inner{
  margin:0;display:flex;align-items:center;justify-content:center;gap:4px 10px;
  min-height:40px;padding-block:8px;text-align:center;flex-wrap:wrap;line-height:1.45;
}
.announce b{color:var(--saffron-800)}
.announce a{color:var(--saffron-800);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.announce__close{
  position:absolute;right:var(--gutter);top:50%;translate:0 -50%;width:28px;height:28px;border:0;background:none;
  color:var(--ink-500);display:grid;place-items:center;border-radius:50%;
}
.announce__close:hover{background:var(--saffron-100);color:var(--ink-800)}
.announce .container{position:relative}
@media (max-width:639.98px){ .announce__close{right:6px} .announce__inner{padding-right:32px} }

.site-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);transition:background var(--dur-fast),box-shadow var(--dur-fast)}
.site-header.is-scrolled{background:rgba(255,255,255,.96);box-shadow:0 6px 24px -14px rgba(12,26,10,.3)}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--header-h);transition:min-height var(--dur-fast)}
/* Brand lockup. Header, drawer and footer all run the SAME artwork the client
   approved: the crest whose heart CONTAINS "Work" and "कर", together with the
   </> glyph, the square glyph and the sprout. Light grounds get
   workkar-logo-horizontal.svg (कर in deep green #186410, as on the client's
   visiting card — the artwork's white कर is invisible on a white header); the
   dark footer keeps workkar-logo-horizontal-white.svg. The only element the
   header drops is the "Global LLP" line, which is unreadable under ~150px.
   Aspect 1030:868 = 1.187:1, so every lockup is sized by height and the width
   follows: 76px tall is 90px wide. The footer also sets an HTML wordmark
   beside it, which is why .brand__name still exists. */
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none}
.brand img{height:60px;width:auto;background:none;flex:none}
.brand__name{display:flex;flex-direction:column;gap:2px;line-height:1.02;font-family:var(--font-head)}
.brand__name b{font-family:var(--font-head);font-size:16.5px;font-weight:700;color:var(--heading);letter-spacing:-.015em;white-space:nowrap}
.brand__name b i,.brand__name i{font-style:normal;color:var(--heading-accent)}
.brand__name span{
  font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-600);font-family:var(--font-body);
}
@media (max-width:479.98px){ .brand__name span{display:none} }
/* The crest stacks "Work" over "कर" inside the heart, so it needs real height
   before either line is legible. Measured off the rendered pixels: at a 76px
   logo "Work" is 18px tall and "कर" 20px; at 60px they are 14px and 16px,
   which is the floor. The header bar is sized from the logo, not the other way
   round (--header-h: 80 / 92 / 100 for logo 60 / 68 / 76). */
@media (min-width:768px){ .site-header .brand img{height:68px} }
/* Desktop header fit. .container is capped at 1240 at EVERY desktop width, so
   the lockup, the nav labels and the two actions share one budget that never
   grows. One tightened treatment therefore covers 1180 and up; a ladder that
   loosened again above 1360 pushed .header__actions past the container edge
   and put a horizontal scrollbar on every page. */
@media (min-width:1180px){
  /* 76px tall x 1.187 = 90px of brand — 60px LESS than the 150px wordmark-
     beside-the-heart lockup it replaced, because the crest stacks the type
     instead of running it out to the right. Room stays where it was made:
     "Recruiters" + "Institutes" are one "Partners" menu and the CTA reads
     "Hire talent". Measured at 1180, the narrowest desktop and the width that
     binds because .container is capped at 1240 above it: brand 90 + nav 660
     + actions 163 + 32 of gap = 945 inside a 1116 content box, 171px spare. */
  .site-header .brand img{height:76px}
  .nav{gap:0}
  .nav__link{padding-inline:8px;font-size:14px;gap:4px}
  .nav__link svg{width:13px;height:13px}
  .header__actions{gap:8px}
  .header__post{font-size:13.5px;padding-inline:13px}
  .header__login{padding-inline:10px}
}

/* align-self:stretch makes .nav as tall as the header row, so the mega panels
   (positioned against it with top:calc(100% + 10px)) hang 10px BELOW the
   header instead of 10px below the nav labels. With a 100px header and a 41px
   nav label, the difference is 20px of panel tucked up behind the header
   border. The links stay vertically centred: .nav is itself align-items:center. */
.nav{display:none;align-self:stretch;align-items:center;gap:2px;margin-inline:auto;position:relative}
@media (min-width:1180px){ .nav{display:flex} }
.nav__item{position:static}
.nav__link{
  position:relative;
  display:inline-flex;align-items:center;gap:5px;padding:10px 12px;border:0;background:none;border-radius:var(--r-md);
  font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--ink-700);text-decoration:none;white-space:nowrap;
  transition:color var(--dur-fast),background var(--dur-fast);
}
.nav__link svg{width:15px;height:15px;transition:transform 200ms var(--ease-hover);color:var(--ink-400)}
.nav__link:hover{color:var(--saffron-800);background:var(--saffron-50)}
.nav__link[aria-expanded="true"]{color:var(--saffron-800);background:var(--saffron-50)}
.nav__link[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__link.is-active{color:var(--forest-700)}
.nav__link.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--saffron-500)}
.header__actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
@media (min-width:1180px){ .header__actions{margin-left:0} }
.header__login{display:none}
@media (min-width:640px){ .header__login{display:inline-flex} }
.header__post{display:none}
@media (min-width:480px){ .header__post{display:inline-flex} }
.hamburger{display:inline-grid}
@media (min-width:1180px){ .hamburger{display:none} }

/* Mega-menu */
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;z-index:var(--z-header);
  width:min(calc(100vw - 48px),var(--mega-w,980px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-xl);
  padding:clamp(20px,2vw,28px);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 180ms;
}
.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega--sm{--mega-w:280px;left:auto;right:0;translate:0 0}
.mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.mega__grid{display:grid;gap:clamp(18px,2vw,28px);grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.mega__col h3{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-subtle);margin:0 0 10px;
}
.mega__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mega__col li{margin:0}
.mega__col a{
  display:block;padding:7px 9px;margin-inline:-9px;border-radius:var(--r-sm);
  font-size:14px;color:var(--ink-700);text-decoration:none;line-height:1.35;
}
.mega__col a:hover{background:var(--saffron-50);color:var(--saffron-800)}
.mega__feature{
  background:linear-gradient(160deg,var(--forest-800),var(--forest-950));color:#fff;border-radius:var(--r-lg);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:10px;justify-content:center;
}
.mega__feature h4{color:#fff;font-size:16px;margin:0}
.mega__feature p{font-size:13px;color:var(--text-on-dark-muted);margin:0;line-height:1.55}
.mega__feature .btn{align-self:flex-start;margin-top:4px}
.mega__feature--warm{background:linear-gradient(160deg,var(--saffron-500),var(--saffron-700));color:var(--ink-900)}
.mega__feature--warm h4{color:var(--ink-900)}
.mega__feature--warm p{color:rgba(18,23,18,.78)}

/* Mobile drawer */
.drawer-backdrop{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(12,26,10,.45);opacity:0;visibility:hidden;transition:all var(--dur-base);border:0;width:100%;padding:0}
.drawer-backdrop.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--z-drawer) + 1);width:min(400px,88vw);
  background:#fff;box-shadow:var(--sh-xl);transform:translateX(102%);transition:transform 240ms var(--ease-out);
  display:none;flex-direction:column;overflow:auto;padding-bottom:env(safe-area-inset-bottom,0px);
}
.drawer.is-open{display:flex;transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
/* The crest carries the name here too, so the span beside it is the descriptor
   alone. Without a 16.5px name above it, 8.5px reads as a stray micro-label. */
.drawer__brand img{height:64px}
.drawer__brand .brand__name span{font-size:9.5px}
.drawer__body{padding:var(--sp-4) var(--sp-5) var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4)}
.drawer__group{border-bottom:1px solid var(--line-soft)}
.drawer__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:14px 0;
  border:0;background:none;font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--heading);text-align:left;
}
.drawer__btn svg{width:18px;height:18px;color:var(--ink-400);transition:transform 200ms}
.drawer__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer__panel{padding-bottom:var(--sp-4);display:flex;flex-direction:column;gap:2px}
.drawer__panel[hidden]{display:none}
.drawer__panel a{padding:9px 12px;border-radius:var(--r-sm);font-size:14.5px;color:var(--ink-700);text-decoration:none}
.drawer__panel a:hover{background:var(--saffron-50);color:var(--saffron-800)}
.drawer__link{display:block;padding:14px 0;font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--heading);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.drawer__actions{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-4)}
.drawer__contact{display:flex;flex-direction:column;gap:8px;margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);font-size:var(--fs-sm)}
.drawer__contact a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-700);text-decoration:none}
.drawer__contact svg{width:16px;height:16px;color:var(--saffron-700)}
body.is-locked{overflow:hidden}

/* =====================================================================
   25. FOOTER
   ===================================================================== */
.site-footer{background:var(--forest-950);color:var(--text-on-dark-muted);font-size:var(--fs-sm)}
.site-footer a:not(.btn){color:var(--text-on-dark-muted);text-decoration:none}
.site-footer a:not(.btn):hover{color:var(--saffron-300)}
.site-footer h3{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin:0 0 var(--sp-4);
}
.footer__top{padding-block:clamp(3rem,2.4rem + 2vw,4.5rem) var(--sp-10)}
.footer__grid{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:minmax(0,1fr)}
@media (min-width:480px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1/-1}
}
@media (min-width:860px){ .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){
  .footer__grid{grid-template-columns:minmax(290px,1.45fr) repeat(5,minmax(0,1fr))}
  .footer__brand{grid-column:auto}
}
.footer__brand img{height:46px;width:auto;background:none}
/* Footer lockup: mirrors the header lockup, reversed for the dark band. */
.site-footer .footer__lockup{margin-bottom:var(--sp-3)}
.site-footer .footer__lockup img{height:68px;width:auto}
.site-footer .footer__lockup .brand__name b{color:#fff;font-size:22px}
.site-footer .footer__lockup .brand__name b i{color:var(--saffron-300)}
/* The strapline under the lockup already carries the descriptor line. */
.site-footer .footer__lockup .brand__name span{display:none}
.site-footer .footer__soon{margin:var(--sp-3) 0 0;font-size:var(--fs-xs)}
.footer__strapline{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron-300);margin:var(--sp-4) 0 var(--sp-4)}
.footer__tagline{display:flex;gap:14px;align-items:stretch;margin-bottom:var(--sp-6)}
.footer__tagline p{margin:0;font-family:var(--font-head);font-size:16px;line-height:1.5;color:#fff;font-weight:500}
.footer__tagline b{color:var(--saffron-300);font-weight:700;display:block}
.footer__addr{font-style:normal;line-height:1.7}
.footer__addr>b{color:#fff;display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;font-weight:700}
.footer__people{display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-4)}
.footer__people span{display:block}
.footer__people b{color:#fff;font-weight:600;display:inline;font-size:inherit;letter-spacing:normal;text-transform:none;margin:0}
.footer__links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer__links li{margin:0}
.footer__industries{padding-block:var(--sp-6);border-top:1px solid var(--line-dark)}
.footer__industries .chip{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:var(--text-on-dark)}
.footer__industries .chip:hover{background:rgba(245,151,61,.16);border-color:var(--saffron-400);color:#fff}
.footer__utility{padding-block:var(--sp-8);border-top:1px solid var(--line-dark);display:grid;gap:var(--sp-8);grid-template-columns:1fr}
@media (min-width:768px){ .footer__utility{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .footer__utility{grid-template-columns:repeat(4,minmax(0,1fr))} }
.social{display:flex;gap:10px}
.social a{width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--line-dark);display:grid;place-items:center;background:rgba(255,255,255,.04)}
.social a:hover{background:rgba(245,151,61,.18);border-color:var(--saffron-400)}
.social svg{width:18px;height:18px}
/* Social handles are not confirmed yet, so the marks are inert placeholders
   that mirror the .app-badge "coming soon" pattern rather than dead anchors. */
.social__placeholder{
  width:40px;height:40px;border-radius:var(--r-md);border:1px dashed var(--line-dark);
  display:grid;place-items:center;background:rgba(255,255,255,.03);color:var(--text-on-dark-muted);opacity:.7;
}
/* "Cookie settings" opens a panel, so it is a button styled as a footer link. */
.link-btn{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.site-footer .link-btn:hover{color:var(--saffron-300)}
.app-badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-md);
  border:1px dashed var(--line-dark);background:rgba(255,255,255,.03);color:var(--text-on-dark-muted);
  font-size:13px;opacity:.75;
}
.app-badge svg{width:16px;height:16px}
.footer__fraud{
  border:1px solid rgba(245,151,61,.42);background:rgba(240,125,26,.1);border-radius:var(--r-lg);
  padding:var(--sp-5);display:flex;gap:12px;align-items:flex-start;line-height:1.6;margin-block:var(--sp-6) 0;
}
.footer__fraud svg{width:20px;height:20px;color:var(--saffron-300);flex:none;margin-top:2px}
.footer__fraud b{color:#fff}
.footer__legal{padding-block:var(--sp-6);border-top:1px solid var(--line-dark);font-size:12.5px;line-height:1.7;color:#8E9B8A}
.footer__legal p{margin:0 0 4px}

/* =====================================================================
   26. WHATSAPP FAB + BACK TO TOP
   ===================================================================== */
.wa-fab{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:var(--z-fab);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--whatsapp);color:#0B3D24;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base);
}
.wa-fab.is-visible{opacity:1;visibility:visible;transform:none}
.wa-fab:hover{background:#1FBA59;color:#0B3D24;transform:translateY(-2px)}
.wa-fab svg{width:28px;height:28px}
.to-top{
  position:fixed;right:20px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:var(--z-fab);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);
  background:#fff;color:var(--forest-700);box-shadow:var(--sh-md);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--dur-base) var(--ease-out);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--forest-50);color:var(--forest-800)}
.to-top svg{width:20px;height:20px}
@media (min-width:768px){
  .to-top{right:88px;bottom:calc(26px + env(safe-area-inset-bottom,0px))}
}
body.cookie-open .wa-fab,body.cookie-open .to-top{transform:translateY(-92px)}
@media print{ .wa-fab,.to-top,.cookie-bar,.site-header,.drawer,.toast-stack{display:none!important} }

/* =====================================================================
   27. REVEAL ANIMATIONS + UTILITIES
   ===================================================================== */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 640ms var(--ease-out),transform 640ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none} }

.u-center{text-align:center}
.u-left{text-align:left}
.u-mt-0{margin-top:0} .u-mt-4{margin-top:var(--sp-4)} .u-mt-6{margin-top:var(--sp-6)}
.u-mt-8{margin-top:var(--sp-8)} .u-mt-10{margin-top:var(--sp-10)} .u-mt-12{margin-top:var(--sp-12)}
.u-mb-0{margin-bottom:0} .u-mb-4{margin-bottom:var(--sp-4)} .u-mb-6{margin-bottom:var(--sp-6)}
.u-mb-8{margin-bottom:var(--sp-8)} .u-mb-10{margin-bottom:var(--sp-10)} .u-mb-12{margin-bottom:var(--sp-12)}
.u-full{grid-column:1/-1}
.u-nowrap{white-space:nowrap}
.u-tabular{font-variant-numeric:tabular-nums}
.u-hide{display:none!important}
@media (max-width:639.98px){ .u-hide-sm{display:none!important} }
@media (min-width:640px){ .u-show-sm-only{display:none!important} }
@media (max-width:899.98px){ .u-hide-md{display:none!important} }
@media (min-width:1024px){ .u-hide-lg{display:none!important} }
.u-relative{position:relative}
.u-flow>*+*{margin-top:var(--sp-4)}