/* ------------------------------------------------------------------
   Application form — "forecourt signage".

   The page borrows the visual language of the station itself: a brand-red
   canopy as the opening screen every ad click lands on, a livery stripe at
   its foot, condensed signage type for headings and buttons. The boldness
   is spent there; the form steps stay quiet and workmanlike.

   Type: Barlow (drawn from California road-sign lettering) for text,
   Barlow Condensed for the signage voice, Noto Sans Gurmukhi for Punjabi.
   Gurmukhi has no capitals, so every uppercase/tracking treatment gets a
   body.lang-pa override back to sentence case.

   --brand / --brand-dark / --accent are authored per location in ACF
   (see ck_location_head() in inc/locations.php); the defaults below are the
   standard palette. --brand-ink is derived, not authored: it flips text on
   brand surfaces to near-black if a location picks a light brand. --red is
   fixed — it means "error", so it must not follow a location's palette.
   ------------------------------------------------------------------ */
:root{
  --brand:#E31837;
  --brand-dark:#B90F28;
  --accent:#F47B20;
  --brand-ink:#FFFFFF;
  --accent-ink:#201D1A;
  --red:#C4162E;
  /* Neutrals share one warm hue bias — stone, chosen, not templated cream. */
  --ink:#201D1A;
  --slate:#6A655D;
  --line:#E2DFD8;
  --line-strong:#C9C5BC;
  --paper:#F4F2ED;
  --card:#FFFFFF;
  --green:#0E7A46;
  --green-bg:#EDF6F0;
  --radius:12px;
  --radius-lg:20px;
  --shadow-card:0 1px 2px rgba(32,29,26,.04),0 16px 36px -20px rgba(32,29,26,.22);
  --ease:cubic-bezier(.2,.7,.3,1);
  --fast:.14s;
  --base:.3s;
  --display:'Barlow Condensed','Noto Sans Gurmukhi',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:'Barlow','Noto Sans Gurmukhi',system-ui,sans-serif;
  /* A warm brand-tinted wash pools under the masthead, with an accent
     glint top-right, fading into the paper — the reference's soft gradient
     ground, keyed to each location. (The dark night lives only on the
     language screen; the form stays light.) */
  background-color:var(--paper);
  background-image:
    radial-gradient(560px 300px at 88% -90px,color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--brand) 8%,var(--paper)),var(--paper) 380px);
  background-repeat:no-repeat;
  color:var(--ink);line-height:1.55;font-size:16.5px;
}
body.lang-pa{font-family:'Noto Sans Gurmukhi','Barlow',system-ui,sans-serif;line-height:1.75;}
body.lang-en .pa{display:none!important;}
body.lang-pa .en{display:none!important;}

/* Signature ground: faint topographic contour lines over the paper, drawn
   in the location's OWN colour (mask + background, since a data URI cannot
   read CSS vars). A map of the territory each store sits in — red terrain
   for Circle-K, purple for ampm — at whisper opacity so content floats
   above it untouched. */
/* Signature ground, serious cut: a fine dot grid in the location's own
   colour — the same grid that hangs on the dark language screen, so the two
   worlds share one texture. Fades away down the page to keep the lower form
   clean. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--brand) 1.2px,transparent 1.7px);
  background-size:26px 26px;
  opacity:.12;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.6) 70%,rgba(0,0,0,.4) 100%);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.6) 70%,rgba(0,0,0,.4) 100%);
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Registered ring-gradient colours: @property makes them animatable, so the
   chooser cards' lit rim can MELT from white into the accent instead of
   snapping (gradients themselves cannot transition). Older browsers simply
   snap — same look, less silk. */
@property --ring-a{syntax:'<color>';inherits:false;initial-value:rgba(255,255,255,.4);}
@property --ring-b{syntax:'<color>';inherits:false;initial-value:rgba(255,255,255,.07);}

/* ---------- invisible craft ----------
   Details nobody sees and everybody feels. */
/* Selecting text happens in the location's own colour. */
::selection{background:color-mix(in srgb,var(--brand) 18%,#fff);color:var(--ink);}
/* Our press states own the tap feedback — the OS's grey flash cheapens
   them on the phones 99% of applicants are holding. */
*{-webkit-tap-highlight-color:transparent;}
/* Chrome autofill paints fields yellow and would wreck the white outlined
   design for exactly the people who autofill phone and email — repaint it
   as a normal filled field. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 40px #fff inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
/* The pay-rate field keeps its numeric keyboard but loses the desktop
   spinner buttons — a cleaner slab. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;appearance:textfield;}

/* Icons share one grid and inherit colour from their label. */
.icon{width:1em;height:1em;flex-shrink:0;display:block;}

/* ---------- masthead ---------- */
/* One shared topbar for both the canopy screen and the form. It carries no
   accent rule of its own: on the canopy the livery stripe closes the red
   block, in the form the orange progress fill does. */
/* The masthead is now a BAND, not a bar: content rides at the top and the
   extra bottom padding is reserved dock space for the stepper card to sink
   into (the reference's overlapping-header move). The card only ever eats
   this empty band — it can no longer cover the masthead text on mobile. */
/* Flat brand, lit and textured — no gradient striping. A soft lamp bloom
   falls from the top-left (the same light language as the chooser's lamp),
   and the house dot grid whispers across the band in the masthead's own ink
   — the third surface carrying the one texture the whole site shares. */
.topbar{
  background-color:var(--brand);
  background-image:radial-gradient(120% 200% at 12% -40%,rgba(255,255,255,.16),transparent 55%);
  color:var(--brand-ink);padding:14px 20px 42px;
  display:flex;align-items:center;gap:12px;
  /* The livery: the location's second colour closes the band — two brand
     colours together read as the brand, one alone reads as a template. */
  border-bottom:3px solid var(--accent);
}
/* While the language chooser is on screen there is no stepper card to dock,
   so the masthead gives up its reserved band and sits slim. (The chooser is
   hidden with an inline display:none once a language is picked — that flips
   this selector off and the 42px dock space returns for the form.) */
.topbar:has(+ #langScreen:not([style*="none"])){padding-bottom:18px;}
.k-badge{
  width:38px;height:38px;border-radius:50%;background:var(--brand-ink);color:var(--brand);
  font-family:var(--display);font-weight:700;font-size:22px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 0 0 2.5px var(--accent),0 4px 10px -3px rgba(0,0,0,.35);
}
/* Real brand logos are wordmarks, mostly wide — a plate, not a circle. It
   sits in the bloom's light, so it casts a soft shadow onto the band. */
.k-badge--img{
  width:auto;max-width:112px;height:38px;border-radius:10px;object-fit:contain;
  background:#fff;padding:4px 8px;
  box-shadow:0 4px 10px -3px rgba(0,0,0,.35);
}
.brand{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.15;flex:1;letter-spacing:.02em;}
/* The region line speaks in the same micro-cap register as the form's field
   labels — one caption voice across the site. Gurmukhi has no capitals, so
   the treatment is Latin-only. */
.brand small{
  display:block;font-family:'Barlow','Noto Sans Gurmukhi',sans-serif;
  font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.85;margin-top:2px;
}
body.lang-pa .brand{font-family:'Noto Sans Gurmukhi',sans-serif;font-size:16px;}
body.lang-pa .brand small{font-size:12px;letter-spacing:.02em;text-transform:none;}
.lang-switch{
  display:flex;align-items:center;gap:7px;
  background:color-mix(in srgb,var(--brand-ink) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-ink) 55%,transparent);color:inherit;
  border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:500;
  cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background var(--fast) var(--ease);
}
.lang-switch.is-hidden{display:none;}
.lang-switch .icon{font-size:15px;transition:transform var(--base) var(--ease);}
.lang-switch:hover{background:color-mix(in srgb,var(--brand-ink) 22%,transparent);}
/* The globe turns rather than the button bouncing — motion that says "switch". */
.lang-switch:hover .icon{transform:rotate(-24deg);}

/* ---------- pages built around the scene ----------
   The masthead takes the height it needs and the scene takes the rest.

   It used to size itself with calc(100svh - 70px), and both halves of that
   were wrong. 70px was a guess at the masthead, which is 77px on a location
   whose brand name wraps to two lines — and different again in Punjabi, where
   .brand sets its own size. And svh is the viewport at its SMALLEST, i.e.
   with the phone's toolbars fully expanded: the moment iOS Safari collapses
   its toolbar the screen grows, the scene does not, and a band of paper opens
   under it. (100vh, the fallback above it, has the opposite fault — on iOS it
   tracks the LARGE viewport and overflows instead.)

   Measuring beats guessing: dvh follows the live viewport, and letting the
   scene absorb what is left deletes the magic number rather than re-tuning a
   figure that moves with the brand name, the badge and the language. */
body.page-template-apply-php,
body.page-template-thank-you-php{
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
}

/* ---------- language chooser: the lit forecourt ----------
   Every ad click lands here: a light ground with the warm glow of the
   canopy light spilling from above — colour as atmosphere, not surface.
   Both languages are visible by design; the reader's language is not yet
   known, so nothing here uses the .en/.pa visibility classes. */
#langScreen{
  /* The dusk forecourt — the hour the canopy lights come on. Between the
     black night (too aggressive) and plain daylight (too default): the
     location's colour sinks into a WARM CHARCOAL instead of near-black,
     and carries more of itself all the way down (62/30/14% vs the night's
     52/18/0). The sky stays coloured; white type stays safe. */
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--brand) 62%,#221F1D) 0%,
    color-mix(in srgb,var(--brand) 30%,#26221F) 55%,
    color-mix(in srgb,var(--brand) 14%,#282320) 100%);
  color:#fff;
  flex:1 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 22px 64px;text-align:center;position:relative;overflow:hidden;
}
/* The lamp: a pool of accent light spilling down from under the masthead. */
#langScreen::before{
  content:"";position:absolute;top:-12%;left:50%;transform:translateX(-50%);
  width:min(600px,140%);height:380px;pointer-events:none;
  background:radial-gradient(ellipse 52% 48% at center,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%);
}
/* The dotted night: a faint dot grid over the dark ground, fading out
   toward the bottom so it reads as depth, not wallpaper. */
#langScreen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,transparent 90%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,transparent 90%);
}
/* The glass panel: one rounded sheet holding the whole opening, with a lit
   top rim where the lamp above strikes it. */
.lang-card{
  position:relative;z-index:1;width:100%;max-width:530px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:26px;
  padding:38px 22px 30px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 34px 90px -34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18);
  text-align:center;
  animation:ck-step .5s var(--ease) both;
}
@media(min-width:560px){.lang-card{padding:46px 44px 38px;}}
.lang-card::before{
  content:"";position:absolute;top:-1px;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
}
/* The one orchestrated entrance: eyebrow, headline, lead, the two language
   cards, then the time hint. Everything after this screen stays still. */
/* The signature: a lit "NOW HIRING" sign chip — the forecourt's own
   vernacular. Tinted, outlined and lettered entirely in the location's brand
   colour so it stays one clean hue on every brand, with a softly glowing
   bulb standing in for the lit sign. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 24%,transparent);
  padding:7px 15px 7px 13px;border-radius:999px;
  animation:ck-step .45s var(--ease) both;
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);flex-shrink:0;
}
#langScreen h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(40px,10vw,58px);line-height:1.02;letter-spacing:.005em;
  margin-top:14px;text-wrap:balance;text-transform:uppercase;
  animation:ck-step .45s .06s var(--ease) both;
}
/* Equal billing for both scripts — the Punjabi line is a second heading,
   not a footnote under the English one. */
#langScreen .h1-pa{
  display:block;font-family:'Noto Sans Gurmukhi',sans-serif;font-weight:600;
  font-size:clamp(23px,5.6vw,32px);line-height:1.45;letter-spacing:0;text-transform:none;
  margin-top:8px;opacity:.92;
}
/* One serif-italic breath between the shouting condensed headline and the
   cards — the editorial accent from the reference set, used exactly once. */
/* The lead is really a divider between the headline and the cards — the
   reference's "OR" treatment: a micro-cap label held by hairlines that
   dissolve outward. Lines key off currentColor, so the same rule works on
   any ground. */
.lang-lead{
  display:flex;align-items:center;gap:14px;
  margin-top:26px;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);
  animation:ck-step .45s .12s var(--ease) both;
}
.lang-lead::before,.lang-lead::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,currentColor 45%,transparent));
}
.lang-lead::after{
  background:linear-gradient(90deg,color-mix(in srgb,currentColor 45%,transparent),transparent);
}
.lang-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;width:100%;max-width:440px;}
/* Both cards are one flex column, centred, sharing a min-height — so the
   Latin and Gurmukhi titles line up across the two cards instead of sitting
   on their own (different) script baselines. */
.lang-btn{
  display:flex;flex-direction:column;justify-content:center;min-height:112px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(32,29,26,.05),0 8px 20px -10px rgba(32,29,26,.22);
  padding:18px 12px;cursor:pointer;font-family:inherit;color:var(--ink);text-align:center;
  position:relative;overflow:hidden;
  transition:transform .38s var(--ease),border-color var(--fast) var(--ease),
             box-shadow .38s var(--ease),background .38s var(--ease);
  animation:ck-step .45s var(--ease) both;
}
/* Pressing still answers instantly — only the glide up is leisurely. */
.lang-btn:active{transition-duration:.08s;}
.lang-btn[data-lang=en]{animation-delay:.16s;}
.lang-btn[data-lang=pa]{animation-delay:.22s;}
/* Raised key: lifts and takes on a brand-tinted shadow on hover, presses
   flat into the page on tap (shadow collapses) — the same physical feel as
   the form's primary button. */
.lang-btn:hover{
  transform:translateY(-3px);border-color:var(--brand);
  box-shadow:0 2px 4px rgba(32,29,26,.06),0 18px 30px -12px color-mix(in srgb,var(--brand) 34%,rgba(32,29,26,.28));
}
.lang-btn:active{
  transform:translateY(0);
  box-shadow:0 1px 3px rgba(32,29,26,.12);
}
.lang-btn .big{font-family:var(--display);font-size:27px;font-weight:700;display:block;line-height:1.1;}
.lang-btn[data-lang=pa] .big{font-family:'Noto Sans Gurmukhi',sans-serif;font-weight:600;font-size:23px;line-height:1.25;}
.lang-btn .small{font-size:13px;color:var(--slate);display:block;margin-top:4px;}
/* The time note: a plain centred line with the clock, nothing dressed up. */
.lang-sub{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:24px;
  font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--slate);
  animation:ck-step .45s .3s var(--ease) both;
}
.lang-sub .icon{font-size:14px;}

/* ---------- night-screen voices ----------
   Everything on the dark opening speaks in light glass and the accent lamp;
   the light-theme components above keep their rules for the form pages. */
#langScreen .eyebrow{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;
}
#langScreen .eyebrow::before{
  background:var(--accent);
  box-shadow:0 0 12px var(--accent),0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);
}
#langScreen h1{color:#fff;}
#langScreen .lang-lead{color:rgba(255,255,255,.75);}
#langScreen .lang-btn{
  background:rgba(255,255,255,.06);border-color:transparent;color:#fff;
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* The fading border lives on its own ring layer: a gradient painted into a
   1px frame whose middle is masked out — the fill underneath stays exactly
   the flat glass it was. Lit at the top, dissolving to nothing at the foot. */
#langScreen .lang-btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,var(--ring-a),var(--ring-b) 70%,transparent);
  transition:--ring-a .45s var(--ease),--ring-b .45s var(--ease);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
#langScreen .lang-btn .small{color:rgba(255,255,255,.62);transition:color .35s var(--ease);}
/* The hover is one moment, not a pile of effects: the glass leans toward
   the lamp — it lifts, its top rim re-lights in the accent, and the accent
   light BLOOMS softly into the glass from above. The bottom stays dark and
   borderless, true to where the light comes from. ::after (the old
   underline) is repurposed as the bloom layer so it can fade in smoothly. */
#langScreen .lang-btn::after{
  content:"";position:absolute;inset:0;height:auto;border-radius:inherit;pointer-events:none;
  background:radial-gradient(92% 110% at 50% -25%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%);
  transform:none;transform-origin:center;
  opacity:0;transition:opacity .45s var(--ease);
}
#langScreen .lang-btn:hover,
#langScreen .lang-btn:focus-visible{
  background:rgba(255,255,255,.1);border-color:transparent;
  box-shadow:0 24px 50px -20px color-mix(in srgb,var(--accent) 30%,rgba(0,0,0,.7));
}
#langScreen .lang-btn:hover::after,
#langScreen .lang-btn:focus-visible::after{opacity:1;transform:none;}
#langScreen .lang-btn:hover::before,
#langScreen .lang-btn:focus-visible::before{
  --ring-a:var(--accent);
  --ring-b:color-mix(in srgb,var(--accent) 35%,transparent);
}
#langScreen .lang-btn:hover .small,
#langScreen .lang-btn:focus-visible .small{color:rgba(255,255,255,.82);}
#langScreen .lang-sub{color:rgba(255,255,255,.6);}

/* ---------- progress ---------- */
/* A light sheet under the red masthead. At the top of the page it shows the
   full picture — numbered stepper with captions, then the step label and the
   red bar. Once the visitor scrolls, the stepper folds away smoothly and the
   sticky strip slims down to label + bar. */
/* The stepper rides in a floating white card that overlaps the foot of the
   brand masthead (the reference's onboarding move) — the wrap itself is a
   transparent sticky rail, so when it pins to the top the card floats over
   the scrolling form with air on all sides. */
.progress-wrap{
  position:sticky;top:0;z-index:50;
  background:transparent;padding:0 12px 8px;
}
.progress-inner{
  max-width:680px;margin:-32px auto 0;
  background:#fff;border:0;border-radius:18px;
  box-shadow:0 12px 30px -16px rgba(32,29,26,.3),0 1px 2px rgba(32,29,26,.05);
  padding:12px 16px 14px;
  transition:margin var(--base) var(--ease);
}
.progress-wrap.compact .progress-inner{margin-top:8px;}

/* stepper (the "full" state) */
.stepper{
  max-height:96px;opacity:1;overflow:hidden;
  transition:max-height var(--base) var(--ease),opacity var(--base) var(--ease),margin var(--base) var(--ease);
  margin-bottom:10px;
}
.progress-wrap.compact .stepper{max-height:0;opacity:0;margin-bottom:0;}
/* Dots and captions share one grid track set (--step-cols): each dot and its
   caption sit in the same 28px column and centre within it, so a caption of
   any width stays centred on its number instead of hugging the row's edges
   the way justify-content:space-between did. padding-inline insets the end
   dots so their (wider) captions have room to centre without clipping the
   viewport edge. */
/* Dot size and the shared grid columns must move together — the caption
   alignment fix centres each caption on its dot's 34px track. */
.stepper-row,.stepper-cap{--step-cols:34px 1fr 34px 1fr 34px;max-width:430px;margin-inline:auto;padding-inline:26px;}
.stepper-row{display:grid;grid-template-columns:var(--step-cols);align-items:center;margin-top:5px;}
/* Solid pebble dots, as in the onboarding reference: pale when upcoming,
   filled brand with a halo when current, filled green when done. */
.sdot{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  border:0;background:color-mix(in srgb,var(--line) 55%,#fff);color:var(--slate);
  font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.sdot.now{background:var(--brand);color:var(--brand-ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 14%,transparent);}
.sdot.done{background:var(--green);color:#fff;}
.srail{height:3px;border-radius:3px;background:var(--line);margin:0 5px;transition:background var(--fast) var(--ease);}
.srail.done{background:var(--green);}
/* Captions speak in the site's micro-cap voice — the same register as the
   field labels and the masthead's region line. Gurmukhi has no capitals, so
   the treatment is Latin-only. */
.stepper-cap{
  display:grid;grid-template-columns:var(--step-cols);margin-top:7px;
  font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--line-strong);
}
body.lang-pa .stepper-cap{font-size:12px;letter-spacing:0;text-transform:none;}
/* Captions land in the same columns as the dots (1 / 3 / 5); centred on the
   28px track, text wider than 28px overflows evenly both sides. */
.stepper-cap [data-s]{justify-self:center;text-align:center;white-space:nowrap;}
.stepper-cap [data-s="1"]{grid-column:1;}
.stepper-cap [data-s="2"]{grid-column:3;}
.stepper-cap [data-s="3"]{grid-column:5;}
.stepper-cap .on{color:var(--ink);font-weight:600;}

/* label + bar. The text label and the stepper trade places: at the top of
   the page the stepper tells the story and the label stays folded; once the
   visitor scrolls and the stepper folds away, the label unfolds in the slim
   sticky strip — the same motion in opposite directions, so the swap reads
   as one gesture. The bar itself never hides. */
.progress-label{
  display:flex;justify-content:space-between;align-items:baseline;
  color:var(--ink);
  max-height:0;opacity:0;overflow:hidden;margin-bottom:0;
  transform:translateY(-5px);
  transition:max-height var(--base) var(--ease),opacity var(--base) var(--ease),
             margin var(--base) var(--ease),transform var(--base) var(--ease);
}
.progress-wrap.compact .progress-label{
  max-height:36px;opacity:1;margin-bottom:7px;transform:none;
}
.progress-label #stepLabel{
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.05em;text-transform:uppercase;
}
body.lang-pa .progress-label #stepLabel{font-family:'Noto Sans Gurmukhi',sans-serif;font-size:14.5px;letter-spacing:0;text-transform:none;}
/* The percentage borrows the bar's own colour and the signage face — the
   number and the red bar read as one instrument. */
.progress-label .pct{
  font-family:var(--display);font-weight:600;font-size:16px;
  font-variant-numeric:tabular-nums;color:var(--brand);
}
.progress-track{height:8px;background:var(--line);border-radius:999px;overflow:hidden;}
/* The red bar the brief asks for, filling smoothly. */
.progress-fill{
  height:100%;width:10%;
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 72%,#fff),var(--brand));
  border-radius:999px;transition:width .5s var(--ease);
}
/* The spec's "subtle pulse" on the final step: a soft breath in opacity,
   not a glow. Killed by prefers-reduced-motion along with everything else. */
.progress-fill.near-done{animation:ck-pulse 1.6s ease-in-out infinite;}
@keyframes ck-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* ---------- read-me banner ----------
   The client's spec calls for a prominent red banner here, verbatim. */
.banner-head{
  background:var(--brand);color:var(--brand-ink);border-radius:var(--radius);
  padding:13px 16px;margin-bottom:18px;text-align:center;
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.1em;
}
body.lang-pa .banner-head{font-family:'Noto Sans Gurmukhi',sans-serif;font-size:16px;letter-spacing:0;}

/* Honeypot: parked off-screen, not display:none — some bots skip hidden
   fields, and it must stay out of the tab order and screen readers. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- skip toggle ---------- */
.skip-toggle{
  width:100%;border:1.5px dashed var(--line-strong);background:color-mix(in srgb,var(--line) 20%,#fff);border-radius:var(--radius);
  padding:13px 14px;cursor:pointer;font-weight:400;font-size:14.5px;color:var(--slate);
  text-align:left;margin-bottom:18px;font-family:inherit;
  transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.skip-toggle:hover{border-color:var(--brand);color:var(--ink);}
/* Engaged state settles into the same brand-tinted wash as the section
   bands — one "location colour at rest" surface across the card. */
.skip-toggle.sel{
  border-style:solid;
  border-color:color-mix(in srgb,var(--brand) 30%,var(--line-strong));
  color:var(--ink);
  background:color-mix(in srgb,var(--brand) 5%,#fff);
  font-weight:500;
}

/* ---------- layout ---------- */
.wrap{max-width:680px;margin:0 auto;padding:22px 16px 72px;}
.step{display:none;}
.step.active{display:block;animation:ck-step var(--base) var(--ease) both;}
/* Content settles in place once; it does not slide, fade and scale at once. */
@keyframes ck-step{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* Borderless floating cards — the shadow alone holds them off the paper. */
.section{
  background:var(--card);border:0;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:22px 18px;margin-bottom:18px;
}
@media(min-width:640px){.section{padding:26px 28px;}}
/* Section headers are full-bleed tinted bands across the card top — each
   card opens with a breath of the location's colour instead of a hairline.
   Negative margins mirror the card padding exactly (mobile 22/18, desktop
   26/28) so the band reaches the card edges and the top corners match. */
.sec-head{
  display:flex;align-items:center;gap:11px;
  margin:-22px -18px 20px;padding:15px 18px;
  background:color-mix(in srgb,var(--brand) 5%,#fff);
  border-bottom:1px solid color-mix(in srgb,var(--brand) 10%,var(--line));
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
@media(min-width:640px){.sec-head{margin:-26px -28px 22px;padding:16px 28px;}}
/* Number plate: a small signage tab, brand-coloured. */
.sec-num{
  flex-shrink:0;width:30px;height:30px;border-radius:9px;
  background:var(--brand);color:var(--brand-ink);
  font-family:var(--display);font-weight:600;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px -2px color-mix(in srgb,var(--brand) 45%,transparent);
}
/* Section titles speak in the quiet uppercase register; the red numbered
   plate beside them stays the loud part. */
.sec-title{
  font-family:'Barlow','Noto Sans Gurmukhi',sans-serif;
  font-weight:700;font-size:13px;line-height:1.4;
  letter-spacing:.1em;text-wrap:balance;text-transform:uppercase;
  color:color-mix(in srgb,var(--slate) 62%,var(--line-strong));
}
body.lang-pa .sec-title{font-family:'Noto Sans Gurmukhi',sans-serif;font-size:14.5px;letter-spacing:0;text-transform:none;}

/* ---------- fields ---------- */
.field{position:relative;margin-bottom:20px;}
.field:last-child{margin-bottom:0;}
/* Two label voices, as in the clean-counter direction: captions over text
   inputs stay quiet and grey; questions over tap-button groups speak in
   full ink — they are the sentence the applicant is answering. */
label.lbl{display:block;font-weight:600;font-size:13.5px;color:var(--slate);margin-bottom:6px;}
/* Question labels over tap-button groups open with a short rule in the
   location's colour — the same accent language as the section bands, so a
   question reads as a heading, not a caption. */
.field:has(.choices) > label.lbl{
  position:relative;padding-left:13px;
  font-weight:600;font-size:15px;color:var(--ink);margin-bottom:10px;
}
/* The rule is a quiet pastel — one shade deeper than the section band's
   wash (on a blue brand ≈ #dceaf2), an accent that doesn't shout. */
.field:has(.choices) > label.lbl::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:3.5px;
  border-radius:2px;background:color-mix(in srgb,var(--brand) 14%,#fff);
}
label.lbl .req{color:var(--red);font-weight:400;}
/* The Codivoo signature: text-field captions float IN the input's border —
   a notched white tab riding the top edge. Only for fields whose direct
   child is a visible input/textarea; question labels over tap-button groups
   keep their full-ink block style above. Focus hands the caption the
   location's colour along with the border. */
.field:has(> input:not([type=hidden])) > label.lbl,
.field:has(> textarea) > label.lbl{
  position:absolute;top:-8px;left:12px;z-index:1;margin:0;
  max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:#fff;padding:0 8px;border-radius:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  transition:color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
/* Gurmukhi has no capitals — the tracking and casing treatment is Latin-only. */
body.lang-pa .field:has(> input:not([type=hidden])) > label.lbl,
body.lang-pa .field:has(> textarea) > label.lbl{
  font-size:12.5px;letter-spacing:0;text-transform:none;
}
/* On focus the caption takes the location's colour and draws the smallest
   possible breath upward — the field acknowledges you. */
.field:has(> input:not([type=hidden])):focus-within > label.lbl,
.field:has(> textarea):focus-within > label.lbl{color:var(--brand);transform:translateY(-1px);}
/* White outlined fields wearing their notched labels — the border is the
   line the caption sits on, so it stays visible and calm. Focus commits the
   whole field to the location's colour. */
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],textarea{
  width:100%;font-family:inherit;font-size:16px;padding:14px 16px;
  border:1.5px solid var(--line-strong);border-radius:var(--radius);
  background:#fff;color:var(--ink);
  appearance:none;-webkit-appearance:none;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
/* Placeholders are examples, not values — a quiet warm grey keeps them
   clearly distinct from typed answers. */
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--slate) 55%,var(--line-strong));}
input:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line-strong));}
input:focus,textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent);
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;}
@media(min-width:640px){.row2-desk{display:grid;grid-template-columns:1fr 1fr;gap:12px;}}
@media(max-width:420px){.row3{grid-template-columns:1fr 1fr;}.row3 .span2{grid-column:1/-1;}}

/* Row wrappers carry the same 18px rhythm as bare fields — without this,
   two adjacent .row2-desk blocks (References) sit flush: the wrapper has no
   margin of its own and its last field's margin is zeroed by :last-child. */
.row2,.row3,.row2-desk{margin-bottom:18px;}
.row2:last-child,.row3:last-child,.row2-desk:last-child{margin-bottom:0;}
/* Inside an active grid the gap owns the spacing; field margins would
   double-count into the track height. (On mobile .row2-desk is not a grid,
   so its stacked fields keep their own margins.) */
.row2 .field,.row3 .field{margin-bottom:0;}
@media(min-width:640px){.row2-desk .field{margin-bottom:0;}}

/* ---------- choice buttons ----------
   One row per question: auto-fit keeps Yes/No pairs and three-option groups
   side by side, wrapping only when a slot would drop under ~96px. At 375px a
   three-up slot is ~97px, so the longest label ("Immediately") gets a
   slightly smaller size there instead of wrapping. */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;}
/* When a label still wraps in its slot (long Punjabi strings, narrow phones),
   the group drops to one full-width column — JS measures and sets .stack. */
.choices.stack{grid-template-columns:1fr;}
@media(max-width:389px){
  .choice{font-size:13.5px;padding:12px 4px;}
}

/* Choice tiles, reference-style: white cards with a soft lift on the paper
   of the section, chunkier corners, room to breathe. */
/* Clean white tiles with a quiet lift; the micro-cap field labels now do
   the job of separating "type here" from "tap here". */
.choice{
  position:relative;
  border:1px solid var(--line-strong);background:#fff;border-radius:6px;
  box-shadow:0 1px 2px rgba(32,29,26,.05);
  padding:13px 10px;text-align:center;cursor:pointer;
  user-select:none;-webkit-user-select:none;font-family:inherit;color:inherit;
  font-weight:500;font-size:15px;min-height:50px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),transform .08s var(--ease);
}
/* Selection is stamped with an ink badge on the tile's corner — outside the
   text area, so long labels ("Immediately") never re-wrap when picked. It
   pops in with a small spring; reduced-motion shows it instantly. Ink, not a
   verdict colour: the state means "chosen", and it can't collide with any
   location's palette or with red-means-error. */
.choice::after{
  content:"";position:absolute;top:-8px;right:-8px;width:21px;height:21px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/11px no-repeat;
  box-shadow:0 0 0 2px #fff,0 2px 5px rgba(32,29,26,.25);
  transform:scale(0);opacity:0;
  transition:transform .18s var(--ease),opacity .12s var(--ease);
}
.choice.sel::after{transform:scale(1);opacity:1;}
.choice:hover{border-color:var(--brand);box-shadow:0 4px 10px -4px color-mix(in srgb,var(--brand) 30%,transparent);}
.choice:active{transform:scale(.98);}
/* One selected state for every answer: the green "answered" family, fixed
   across all four location palettes (an accent-based state turns reddish on
   brands whose accent is red, which reads as an error). Never a verdict on
   the answer itself — the reference tinted disliked answers red, which
   pressures people to lie on a form they then sign as truthful. Inset ring
   instead of a thicker border, so selection never shifts layout. */
.choice.sel{
  border-color:var(--ink);
  background:color-mix(in srgb,var(--ink) 4%,#fff);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.hint{font-size:13.5px;color:var(--slate);margin-top:7px;}

/* ---------- job info cards ---------- */
.jobcard{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;}
.jobcard-h{
  display:flex;align-items:center;gap:11px;
  padding:12px 16px;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  border-bottom:1px solid color-mix(in srgb,var(--brand) 10%,var(--line));
  background:color-mix(in srgb,var(--brand) 4%,#fff);
}
body.lang-pa .jobcard-h{font-family:'Noto Sans Gurmukhi',sans-serif;font-size:15.5px;letter-spacing:0;text-transform:none;}
/* The header icon rides in a small white chip on the tinted band — the same
   plate language as the section numbers. */
.jobcard-h .icon{
  font-size:16px;color:var(--accent);
  box-sizing:content-box;padding:7px;border-radius:9px;
  background:#fff;border:1px solid color-mix(in srgb,var(--brand) 12%,var(--line));
}
.jobcard ul{list-style:none;padding:4px 16px 6px;}
/* Divided rows instead of a run-on list: each point gets its own line and a
   hairline under it — organized, scannable, official. */
.jobcard li{
  font-size:14.5px;padding:9px 0 9px 20px;position:relative;color:#403C36;
  border-bottom:1px solid color-mix(in srgb,var(--line) 45%,#fff);
}
.jobcard li:last-child{border-bottom:0;}
/* Neutral pastel dot for requirement cards — a check would imply "met".
   Same pastel family as the question rules and the dotted ground. */
.jobcard li::before{
  content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:50%;
  background:color-mix(in srgb,var(--brand) 22%,#fff);
}
/* "What you get" — benefits, where a green tick is the honest marker. */
.jobcard--get li{padding-left:24px;}
.jobcard--get li::before{
  width:14px;height:14px;top:12px;border-radius:0;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- checkbox rows ----------
   Quiet rows on the sheet, separated by hairlines rather than boxed into
   cards — only the lead acknowledgement keeps a card of its own. */
/* Certification rows are cards, matching the tiles above — each statement
   is a discrete thing you agree to, not a line in a list. */
.checkrow{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;background:#fff;margin-bottom:10px;cursor:pointer;
  box-shadow:0 1px 2px rgba(32,29,26,.04);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.checkrow:hover{border-color:var(--line-strong);}
.checkrow:focus-within{border-color:var(--brand);}
/* A ticked statement settles into the green "answered" family. */
.checkrow:has(input:checked){border-color:color-mix(in srgb,var(--green) 45%,var(--line));background:color-mix(in srgb,var(--green-bg) 55%,#fff);}
/* Custom box, not the native accent-color control: same corner radius as the
   choice buttons, same green "answered" state, same masked check mark —
   drawn small so the box reads as a box, not a green button. */
.checkrow input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex-shrink:0;margin-top:2px;
  border:1.5px solid var(--line-strong);border-radius:6px;background:#fff;
  cursor:pointer;position:relative;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.checkrow input::after{
  content:"";position:absolute;inset:0;margin:auto;width:11px;height:11px;
  background:#fff;opacity:0;transform:scale(.4);
  transition:opacity var(--fast) var(--ease),transform var(--base) var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.checkrow:hover input{border-color:var(--slate);}
.checkrow input:checked{background:var(--green);border-color:var(--green);}
.checkrow input:checked::after{opacity:1;transform:scale(1);}
.checkrow span{font-size:14.5px;line-height:1.5;}
/* The requirements acknowledgement — the one row that keeps its card, and
   the whole card confirms when ticked. */
.checkrow--lead{
  border:1.5px solid var(--line-strong);border-radius:var(--radius);
  padding:14px;background:#fff;
}
.checkrow--lead:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line-strong));}
.checkrow--lead:has(input:checked){border-color:var(--green);background:var(--green-bg);}
/* The one statement that gates the whole submission speaks a step louder. */
.checkrow--lead span{font-size:15px;font-weight:600;}
.checkrow--lead input{width:22px;height:22px;}

/* ---------- nav buttons ---------- */
.nav-row{display:flex;gap:10px;margin-top:22px;}
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid transparent;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.05em;text-transform:uppercase;
  padding:16px 22px;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),transform .1s var(--ease);
}
body.lang-pa .btn{font-family:'Noto Sans Gurmukhi',sans-serif;font-size:16.5px;letter-spacing:0;text-transform:none;}
/* Physical press: the button pushes DOWN into the page and its shadow
   collapses, rather than just shrinking. */
.btn:active{transform:translateY(1px);}
.btn[disabled]:active{transform:none;}
.btn .icon{font-size:18px;transition:transform var(--base) var(--ease);}
/* The Continue chevron rides in its own translucent chip inside the pill —
   the small "go" affordance from the reference set, still leaning on hover. */
.btn-next .icon{
  font-size:14px;box-sizing:content-box;padding:6px;border-radius:50%;
  background:color-mix(in srgb,var(--brand-ink) 16%,transparent);
}
/* Primary CTA — a lit brand key. Two-layer brand-tinted shadow gives it real
   lift off the paper; it deepens on hover and collapses on press. */
/* Primary CTA — a lit brand key. Two-layer brand-tinted shadow gives it real
   lift off the paper; it deepens on hover and collapses on press. */
.btn-next{
  flex:1;background:var(--brand);color:var(--brand-ink);
  box-shadow:0 2px 4px -2px color-mix(in srgb,var(--brand) 45%,transparent),
             0 8px 18px -6px color-mix(in srgb,var(--brand) 55%,transparent);
}
.btn-next:hover{
  background:var(--brand-dark);
  box-shadow:0 3px 6px -2px color-mix(in srgb,var(--brand) 50%,transparent),
             0 12px 24px -6px color-mix(in srgb,var(--brand) 60%,transparent);
}
.btn-next:active{
  box-shadow:0 1px 3px -1px color-mix(in srgb,var(--brand) 45%,transparent);
}
/* The chevron leans the way the button goes — the only motion on hover. */
.btn-next:hover .icon{transform:translateX(3px);}
/* Secondary — a real, quiet button: white key with a hairline shadow, not a
   ghost outline floating on the paper. Warms toward the brand on hover. */
/* Back steps out of the button family entirely — a quiet text link beside
   the one big pill, exactly the reference's BACK / next-arrow pairing. */
.btn-back{
  background:transparent;color:var(--slate);border-color:transparent;
  box-shadow:none;padding-inline:12px;
}
.btn-back:hover{
  color:var(--brand);background:transparent;border-color:transparent;
}
.btn-back:active{box-shadow:none;}
.btn-back:hover .icon{transform:translateX(-3px);}
.btn[disabled]{opacity:.5;cursor:default;box-shadow:none;}
.btn[disabled]:hover .icon{transform:none;}
.privacy{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13px;color:var(--slate);margin-top:14px;
}
.privacy .icon{font-size:14px;}
/* The reassurance sits right above the submit it belongs to. */
.privacy + .nav-row{margin-top:12px;}

/* validation */
.field.err input,.field.err textarea{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:#FFF7F7;}
.err-msg{display:none;color:var(--red);font-size:13.5px;font-weight:500;margin-top:5px;}
.field.err .err-msg{display:block;animation:ck-step var(--fast) var(--ease) both;}
/* A missed choice group marks its own buttons, the same voice as a missed
   text field — not an outline drawn around the block. Clears per button the
   moment one is picked (.sel wins below, and JS drops the class). */
.choices.err-outline .choice{border-color:var(--red);background:#FFFAFA;}
/* A selected option keeps its stamped state even while the group errs —
   the red outline belongs to the unanswered options, not the answer. */
.choices.err-outline .choice.sel{
  border-color:var(--ink);
  background:color-mix(in srgb,var(--ink) 4%,#fff);
  color:var(--ink);
}
.checkrow.err{background:#FFF7F7;border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);}
.checkrow--lead.err{border-color:var(--red);padding:14px;}
.checkrow.err input{border-color:var(--red);}

.form-error{
  display:none;margin-top:12px;padding:12px 14px;border-radius:var(--radius);
  background:#FBEFF1;border:1px solid var(--red);color:var(--red);
  font-size:14px;font-weight:500;
}
.form-error.show{display:block;animation:ck-step var(--base) var(--ease) both;}
/* The per-step counter sits right above the button that was just pressed and
   nudges sideways on each failed attempt — enough to catch the eye, not a
   siren. Its count shrinks live as fields get fixed. */
.step-notice{margin:0 0 4px;}
.step-notice.show{animation:ck-step var(--base) var(--ease) both,ck-nudge .32s var(--ease);}
@keyframes ck-nudge{0%,100%{transform:none;}30%{transform:translateX(-5px);}65%{transform:translateX(4px);}}

/* ---------- success ---------- */
#successView{display:none;max-width:480px;margin:0 auto;padding:80px 24px;text-align:center;}
.success-mark{
  width:60px;height:60px;border-radius:50%;border:1.5px solid var(--green);color:var(--green);
  background:var(--green-bg);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
}
.success-mark .icon{font-size:26px;}
/* The tick draws itself once. It is the only thing on the page that animates
   for its own sake, and it earns it: it is the confirmation. */
.success-mark .icon path{
  stroke-dasharray:24;stroke-dashoffset:24;
  animation:ck-draw 1.5s .1s var(--ease) forwards;
}
@keyframes ck-draw{to{stroke-dashoffset:0;}}
#successView h2{font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
body.lang-pa #successView h2{font-family:'Noto Sans Gurmukhi',sans-serif;font-size:24px;letter-spacing:0;text-transform:none;}
#successView p{margin:10px auto 0;color:var(--slate);font-size:15.5px;max-width:400px;}

/* ---------- thank-you page ----------
   The opening's scene and panel, but in daylight: the dusk gradient and the
   white dot layer are switched off (the body's paper, wash and brand dots
   show through), the lamp softens, and the glass becomes a white sheet with
   a pastel brand rim. Content: the green confirmation lamp and ink type. */
/* The scene's whole light system turns GREEN here — the forecourt light
   switching to "go": green ambient glow, green pastel rim on the panel,
   solid green lamp. The location stays present through the masthead and the
   brand dots on the paper. */
#langScreen.thanks-scene{background:transparent;color:var(--ink);}
#langScreen.thanks-scene::after{display:none;}
#langScreen.thanks-scene::before{
  background:radial-gradient(ellipse 52% 48% at center,color-mix(in srgb,var(--green) 13%,transparent),transparent 70%);
}
.thanks-scene .lang-card{
  background:#fff;border:1px solid var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 30px 70px -30px rgba(32,29,26,.35),0 2px 6px rgba(32,29,26,.05);
}
.thanks-scene .lang-card::before{
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--green) 40%,#fff),transparent);
}
/* The lamp is a solid green disc with the check drawing in white — the same
   "done" language as the stepper's finished dots. When the stroke lands, a
   single ripple leaves the lamp. */
.thanks-scene .success-mark{
  position:relative;width:72px;height:72px;
  background:var(--green);border-color:var(--green);color:#fff;
  box-shadow:0 0 0 10px color-mix(in srgb,var(--green) 12%,transparent);
}
.thanks-scene .success-mark .icon{font-size:32px;}
.thanks-scene .success-mark::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  animation:ck-ripple .9s 1.55s var(--ease) forwards;
}
@keyframes ck-ripple{
  from{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 35%,transparent);}
  to{box-shadow:0 0 0 30px transparent;}
}
.thanks-scene h2{
  font-family:var(--display);font-size:34px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
  animation:ck-step .45s .15s var(--ease) both;
}
body.lang-pa .thanks-scene h2{font-family:'Noto Sans Gurmukhi',sans-serif;font-size:25px;letter-spacing:0;text-transform:none;}
.thanks-scene p{
  margin:12px auto 0;color:var(--slate);font-size:15.5px;max-width:400px;
  animation:ck-step .45s .28s var(--ease) both;
}

/* ---------- homepage ----------
   Two grounds, in the order the visitor meets them everywhere else on the
   site: the dusk forecourt opens, then the work happens in daylight on the
   paper. The scene is reused wholesale from #langScreen rather than restated
   — the same borrowing the thank-you page does — so a change to the lamp or
   the dot grid reaches all three pages. Here it opens the page rather than
   filling it — the store list is the point — so it takes the height of its
   own content and drops the glass panel: there is nothing to choose on the
   scene itself. (The form templates make their body a flex column so the
   scene absorbs the leftover height; the homepage deliberately does not.)

   English only; the language question belongs to the form (see front-page.php). */
#langScreen.home-scene{padding:46px 22px 56px;}
.home-hero{position:relative;z-index:1;max-width:620px;}
.home-lead{
  margin-top:14px;font-size:16.5px;color:rgba(255,255,255,.78);
  text-wrap:balance;
  animation:ck-step .45s .12s var(--ease) both;
}
/* No badge rides in the homepage masthead, so the wordmark carries the band
   alone — it steps up to meet the space a logo would have held. */
.topbar--home .brand{font-size:23px;}

/* .wrap's 680px is a reading measure, set for a column of form fields. A card
   grid is not read that way — held to 680 the two columns squeeze the region
   caption onto two lines — so the store list gets a wider field of its own. */
.wrap--home{max-width:900px;padding-top:32px;}
/* The divider heading arrives with the cards, a beat after the scene. */
.wrap--home .lang-lead{margin-top:0;animation-delay:.06s;}
.loc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;
  margin-top:18px;
}
/* Each card sets the three palette vars on ITSELF, which scopes that store's
   colours to that card: the stripe, badge, chevron chip and hover shadow all
   read --brand from here and none of them restates a colour. Four liveries,
   one rule set. */
.loc-card{
  position:relative;display:flex;align-items:center;gap:14px;
  background:var(--card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:20px 16px 18px;overflow:hidden;
  text-decoration:none;color:var(--ink);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
  animation:ck-step .45s var(--ease) both;
}
/* The livery: brand into accent across the card's head — the same two-colour
   pairing that closes the masthead band. */
.loc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
}
/* The same physics as the language cards: lifts into a brand-tinted shadow,
   presses flat into the page on tap. */
.loc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(32,29,26,.06),
             0 18px 30px -12px color-mix(in srgb,var(--brand) 34%,rgba(32,29,26,.28));
}
.loc-card:active{transform:translateY(0);box-shadow:0 1px 3px rgba(32,29,26,.12);transition-duration:.08s;}
/* Real wordmarks differ wildly in width — ampm is a long lozenge, Chevron a
   near-square shield. Left to themselves they start each card's text at a
   different place and the list reads as ragged. A fixed slot holds any mark,
   wide or square or a lettered badge, so every card's name begins on the same
   line down the column. */
.loc-mark{flex:0 0 88px;display:flex;align-items:center;justify-content:center;}
/* Filled with the store's colour, where the masthead's badge is reversed out
   of it — on white paper the brand has to be the ink, not the ground. */
.loc-badge{
  width:46px;height:46px;border-radius:50%;
  background:var(--brand);color:var(--brand-ink);
  font-family:var(--display);font-weight:700;font-size:25px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2.5px color-mix(in srgb,var(--accent) 32%,#fff),
             0 4px 10px -4px color-mix(in srgb,var(--brand) 50%,transparent);
}
/* A plate, as in the masthead, but hairlined instead of shadowed since it
   sits on white paper rather than in the band's light. */
.loc-logo{
  max-width:100%;height:46px;object-fit:contain;
  border-radius:10px;background:#fff;padding:3px 7px;
  border:1px solid var(--line);
}
.loc-text{display:flex;flex-direction:column;min-width:0;flex:1;}
.loc-name{
  font-family:var(--display);font-weight:700;font-size:22px;line-height:1.12;
  letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;
}
/* The region speaks in the site's one caption voice — the same micro-caps as
   the masthead's region line and the form's field labels. */
.loc-region{
  margin-top:4px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);
}
/* The card is the link; this is the word that says so. */
.loc-cta{
  margin-top:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);
}
/* The go chip, the same affordance as the form's Continue chevron: it fills
   with the brand and leans the way the card goes. */
.loc-go{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:color-mix(in srgb,var(--brand) 8%,#fff);color:var(--brand);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),
             transform var(--base) var(--ease);
}
.loc-go .icon{font-size:17px;}
.loc-card:hover .loc-go{background:var(--brand);color:var(--brand-ink);transform:translateX(3px);}

/* The same narrow-phone step the choice tiles take: the mark slot and the
   name give back a few pixels rather than let a hyphenated brand ("Circle-K")
   break across two lines at its hyphen. */
@media(max-width:389px){
  .loc-card{gap:12px;padding-inline:14px;}
  .loc-mark{flex-basis:68px;}
  .loc-name{font-size:20px;}
}

.loc-empty{
  text-align:center;color:var(--slate);font-size:15.5px;
  padding:38px 16px;
  border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);
}
/* The reassurance closes the page, as it closes the form. */
.wrap--home .privacy{margin-top:26px;}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  .success-mark .icon path{stroke-dashoffset:0;}
}