:root{
  /* fallbacks in case the page :root isn't loaded (QA harness provides real ones) */
  --orange:#F68529; --black:#000; --teal:#1A9D9C; --white:#fff; --teal-dark:#0F6E6D;
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --font-body:'Space Grotesk', sans-serif;
  --font-display: 'Fredoka', sans-serif;     
}

/* page-local tokens */
.jobs-apply, .jobs-hero{
  --jobs-container:1600px;
  --jobs-pad:36px;                 /* inner padding of each card */
  --card-tan:#EFCE8B;
  --card-radius:30px;
  --subcard-radius:22px;
  --dot:#FBF7E6;                   /* cream dotted keyline (scallop placeholder) */
  --keyline:#0d6b6a;
}

/* container helper */
.jobs-wrap{ max-width:var(--jobs-container); margin:0 auto; padding:0 24px; box-sizing:border-box; }

/* =====================================================================
   STICKER TEXT helpers (per handoff)
   .sticker2 -> fill + 1 outline (single element, multiline ok)
   .sticker3 -> 3 stacked spans (one per color), outer = thickest stroke
   ===================================================================== */
.sticker2{
  font-family:var(--font-display); line-height:.96; text-transform:uppercase;
  color:var(--s2-fill,#000);
  -webkit-text-stroke:var(--s2-stroke-w,6px) var(--s2-stroke,#fff);
  paint-order:stroke fill;
  margin:0;
}
.sticker3{ position:relative; font-family:var(--font-display); line-height:.96; text-transform:uppercase; margin:0; }
.sticker3 span{ display:block; }
.sticker3 .l-fill{ position:relative; color:var(--s3-fill,var(--teal)); -webkit-text-stroke:0; z-index:4; }
.sticker3 .l-band{ position:absolute; inset:0; color:transparent; -webkit-text-stroke:7px var(--s3-band,#fff); paint-order:stroke fill; z-index:3; }
.sticker3 .l-key { position:absolute; inset:0; color:transparent; -webkit-text-stroke:12px var(--s3-key,var(--keyline)); paint-order:stroke fill; z-index:2; }

/* =====================================================================
   HERO  (full-bleed teal · NOW HIRING · two apply CTAs · milk drip)
   ===================================================================== */
.jobs-hero{
  position:relative; background:var(--teal); overflow:hidden;
  padding:0; isolation:isolate;
}
.jobs-hero__bg{ position:absolute; inset:0; z-index:0; }
.jobs-hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.96; }
/* faint speckle like the comp */
.jobs-hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.6px);
  background-size:34px 34px;
}
.jobs-hero__inner{ position:relative; z-index:2; max-width:var(--jobs-container); margin:0 auto; padding:96px 24px 220px; box-sizing:border-box; }

.jobs-hero__title{ font-size:150px; --s2-fill:#111; --s2-stroke:#fff; --s2-stroke-w:8px; letter-spacing:1px; filter:drop-shadow(0 8px 0 rgba(0,0,0,.18)); }

.jobs-hero__cta{ display:flex; gap:22px; margin-top:30px; flex-wrap:wrap; }
.apply-pill{
  display:inline-flex; align-items:center; gap:14px; height:64px; padding:0 30px 0 12px;
  border-radius:999px; font-family:var(--font-body); font-weight:700; font-size:19px;
  letter-spacing:.4px; text-transform:uppercase; text-decoration:none; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.18); transition:transform .15s var(--ease-back), filter .2s ease;
}
.apply-pill:hover{ transform:translateY(-2px); }
.apply-pill .pin{
  flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-content:center;
  background:rgba(0,0,0,.06);
}
.apply-pill .pin svg{ width:20px; height:20px; display:block; }
.apply-pill--solid{ background:#FBF7EC; color:#111; }
.apply-pill--solid .pin{ background:#111; }
.apply-pill--solid .pin svg path{ stroke:#FBF7EC; }
.apply-pill--ghost{ background:transparent; color:#FBF7EC; border:2.5px solid #FBF7EC; height:64px; }
.apply-pill--ghost .pin{ background:rgba(251,247,236,.18); }
.apply-pill--ghost .pin svg path{ stroke:#FBF7EC; }

/* white milk drip at the bottom of the hero */
.jobs-hero__drip{ position:absolute; left:0; right:0; bottom:-1px; z-index:3; width:100%; height:170px; display:block; pointer-events:none; }
.jobs-hero__drip svg{ width:100%; height:100%; display:block; }
/* small floating milk dots above the wave */
.jobs-hero__dot{ position:absolute; z-index:3; width:16px; height:16px; border-radius:50%; background:#fff; pointer-events:none; }

/* =====================================================================
   INTRO  (headline sticker · paragraph · apply line)
   ===================================================================== */
.jobs-intro{ padding:18px 0 8px; }
.jobs-intro__head{ font-size:96px; letter-spacing:.5px; --s2-stroke:#fff; --s2-stroke-w:6px; }
.jobs-intro__head span{ display:block; }
.jobs-intro__head .muted{ color:#9a9a9a; -webkit-text-stroke:6px #fff; paint-order:stroke fill; }
.jobs-intro__head .solid{ color:#111; -webkit-text-stroke:6px #fff; paint-order:stroke fill; }
.jobs-intro__lead{
  font-family:var(--font-body); font-size:24px; line-height:1.4; color:#111; font-weight:500;
  max-width:760px; margin:26px 0 0;
}
.jobs-intro__apply{
  font-family:var(--font-body); font-weight:700; font-size:21px; text-transform:uppercase;
  letter-spacing:.6px; margin:26px 0 0; color:#8a8a8a; display:flex; align-items:center; gap:14px;
}
.jobs-intro__apply b{ color:#5e5e5e; -webkit-text-stroke:1.2px #efe9d8; paint-order:stroke fill; }
.jobs-intro__apply .dot{ width:9px; height:9px; border-radius:50%; background:#bdbdbd; flex:none; }

/* =====================================================================
   ===================================================================== */
.jobs-apply{ padding:6px 0 90px; }

.jobs-apply .gform_wrapper{ margin:0; }
.jobs-cards{ display:flex; flex-direction:column; gap:44px; list-style:none; margin:34px 0 0; padding:0; }

.jobs-card{
  position:relative; background:var(--card-tan); border-radius:var(--card-radius);
  padding:var(--jobs-pad) 44px 40px; box-sizing:border-box;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
/* dotted cream keyline = stand-in for the scalloped overlay.
   Swap for the existing scallop.svg overlay (as Contact / Account-removal). */
.jobs-card::before{
  content:""; position:absolute; inset:13px; border:3px dotted var(--dot);
  border-radius:calc(var(--card-radius) - 10px); pointer-events:none;
}
.jobs-card__title{
  font-size:54px; margin:0 0 20px; --s3-fill:var(--teal); --s3-band:#fff; --s3-key:var(--keyline);
}

/* the per-card field grid is a .gform_fields → already gridded by form-styles.css.
   give cards a tidy vertical rhythm */
.jobs-card .gform_fields{ row-gap:20px !important; }

/* small helper note rows (e.g. "Up to 3 prior positions…") */
.jobs-card__note{ font-family:var(--font-body); font-size:16px; color:#3b3b2e; margin:2px 0 22px; }

/* =====================================================================
   FIELD AFFIXES — date calendar icon + salary "$"  (visual only)
   Apply class on the .gfield in the mock; in GF use field CSS classes.
   ===================================================================== */
.gfield--date .ginput_container{ position:relative; }
.gfield--date .ginput_container::after{
  content:""; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; pointer-events:none; opacity:.55;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='17' rx='3'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
}
.gfield--money .ginput_container{ position:relative; }
.gfield--money .ginput_container::after{
  content:"$"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); font-weight:600; color:#000; opacity:.55; pointer-events:none;
}
.jobs-apply .gfield--date input, .jobs-apply .gfield--money input{ padding-right:48px !important; }

/* =====================================================================
   YOUR AVAILABILITY  (4 time rows × 7 day columns of checkboxes)
   ===================================================================== */
.jobs-availability{ margin-top:6px; }
.jobs-grid-table{ width:100%; }
.jga-row{ display:grid; grid-template-columns:1.6fr repeat(7,1fr); align-items:center; column-gap:8px; }
.jga-head{ margin-bottom:6px; }
.jga-head .jga-day{
  text-align:center; font-family:var(--font-body); font-weight:700; font-size:20px; color:#111;
}
.jga-slot{
  font-family:var(--font-body); font-weight:700; font-size:18px; text-transform:uppercase;
  letter-spacing:.4px; color:#222; padding:18px 0; -webkit-text-stroke:.5px var(--dot); paint-order:stroke fill;
}
.jga-cell{ display:grid; place-content:center; padding:14px 0; }
/* reuse the form-styles custom checkbox look */
.jga-cell input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:24px; height:24px; margin:0; border-radius:6px;
  border:2.5px solid #EFE8D6; background:#DEBE75; box-shadow:0 2px 5px rgba(0,0,0,.14);
  display:grid; place-content:center; cursor:pointer;
}
.jga-cell input[type=checkbox]::before{
  content:""; width:11px; height:7px; margin-top:-2px;
  border-left:3px solid var(--orange); border-bottom:3px solid var(--orange);
  transform:rotate(-45deg) scale(0); transition:transform .15s ease;
}
.jga-cell input[type=checkbox]:checked::before{ transform:rotate(-45deg) scale(1); }

/* =====================================================================
   EMPLOYMENT HISTORY  (nested "Prior job" sub-cards)
   ===================================================================== */
.jobs-subcards{ display:flex; flex-direction:column; gap:26px; }
.jobs-subcard{
  border:1.5px solid rgba(0,0,0,.18); border-radius:var(--subcard-radius);
  padding:26px 28px 24px; background:transparent;
}
.jobs-subcard__title{
  font-family:var(--font-body); font-weight:700; font-size:17px; text-transform:uppercase;
  letter-spacing:.6px; color:#111; margin:0 0 16px;
}
.jobs-subcard .gform_fields{ row-gap:18px !important; }
/* "Jones may contact this employer" inline consent inside a sub-card */
.jobs-subcard .jobs-inline-consent{ display:flex; align-items:center; gap:10px; margin-top:16px; }

/* a plain checkbox to match form-styles checkbox (for non-GF mock rows) */
.jobs-check{
  appearance:none; -webkit-appearance:none; width:22px; height:22px; flex:none; margin:0; border-radius:6px;
  border:2.5px solid #EFE8D6; background:#DEBE75; box-shadow:0 2px 5px rgba(0,0,0,.14);
  display:grid; place-content:center; cursor:pointer;
}
.jobs-check::before{
  content:""; width:11px; height:7px; margin-top:-2px;
  border-left:3px solid var(--orange); border-bottom:3px solid var(--orange);
  transform:rotate(-45deg) scale(0); transition:transform .15s ease;
}
.jobs-check:checked::before{ transform:rotate(-45deg) scale(1); }
.jobs-inline-consent label{ font-family:var(--font-body); font-weight:500; font-size:16px; color:#111; }

/* returning-member pill (light, sits after the sub-cards) */
.jobs-returning{ margin-top:26px; }
.jobs-returning button{
  height:54px; padding:0 30px; border:0; border-radius:999px; cursor:pointer;
  background:#FBF7EC; color:#111; font-family:var(--font-body); font-weight:700; font-size:16px;
  letter-spacing:.4px; text-transform:uppercase; box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* =====================================================================
   SMS OPT-IN + SUBMIT  (consent text, links, recaptcha, send button)
   ===================================================================== */
.jobs-sms__links{ font-family:var(--font-body); font-weight:600; font-size:14px; margin:6px 0 18px; color:#333; }
.jobs-sms__links a{ color:#222; text-decoration:underline; }
.jobs-sms__links .sep{ display:inline-block; margin:0 8px; color:#9a9a9a; }

/* SEND MY INQUIRY — brand dark teal, matching the comp (sampled #292929,
   = grayscale of the footer teal #103632, NOT the system orange which would
   sample ~#9c9c9c). To use the system orange instead: --send-bg:var(--orange). */
.jobs-send{ display:flex; align-items:center; gap:14px; margin-top:18px; --send-bg:#103632; }
.jobs-send__icon{
  flex:none; width:60px; height:60px; border-radius:50%; display:grid; place-content:center;
  background:var(--send-bg);
}
.jobs-send__icon svg{ width:24px; height:24px; }
.jobs-send button{
  flex:1 1 auto; height:60px; border:0; border-radius:999px; cursor:pointer; background:var(--send-bg);
  color:#fff; font-family:var(--font-body); font-weight:700; font-size:18px; letter-spacing:.6px;
  text-transform:uppercase; transition:filter .2s ease;
}
.jobs-send button:hover{ filter:brightness(1.12); }

/* recaptcha placeholder (mirrors form-styles .recaptcha-mock) */
.jobs-apply .recaptcha-mock{
  width:304px; max-width:100%; height:76px; background:#f9f9f9; border:1px solid #d3d3d3; border-radius:3px;
  display:flex; align-items:center; gap:12px; padding:0 14px; position:relative; margin-top:6px;
  font-family:Arial, sans-serif; font-size:14px; color:#222;
}
.jobs-apply .recaptcha-mock .rc-box{ width:26px; height:26px; border:2px solid #c1c1c1; border-radius:2px; background:#fff; }
.jobs-apply .recaptcha-mock .rc-logo{ position:absolute; right:10px; text-align:center; font-size:10px; color:#9aa; }

/* =====================================================================
   GRAVITY FORMS — live-form overrides (when the page uses [gravityform])
   The mock markup above is styled directly; these target the real GF output.
   REQUIRES the shortcode wrapped in <section class="jobs-apply"> (same as
   your other forms) so form-styles.css + these scope correctly.
   ===================================================================== */
/* SEND MY INQUIRY: recolor the system submit (arrow circle + pill) to the
   brand dark teal for THIS form only. For the system orange, delete this block. */
.jobs-apply .gform_wrapper .gform_footer::before{ background-color:#103632 !important; }
.jobs-apply .gform_wrapper .gform_footer input[type=submit].gform_button,
.jobs-apply .gform_wrapper .gform_footer input[type=submit].button,
.jobs-apply .gform_wrapper .gform_footer button.gform_button,
.jobs-apply .gform_wrapper .gform_footer .gform_button.button{ background:#103632 !important; }

/* AVAILABILITY: each time-slot is a GF checkbox field (class jobs-avail-row);
   its 7 day-choices (Sun…Sat) lay out as a 7-column row. */
.jobs-apply .jobs-avail-row .gfield_checkbox{
  display:grid !important; grid-template-columns:repeat(7,1fr) !important; gap:10px 8px !important;
}
.jobs-apply .jobs-avail-row .gchoice{
  flex-direction:column !important; align-items:center !important; gap:6px !important; text-align:center;
}
.jobs-apply .jobs-avail-row .gfield_checkbox label{ font-size:12px !important; letter-spacing:.3px; }

/* "returning team member" checkbox lands in the Employment history card,
   after the sub-cards — give it a little separation. */
.jobs-apply .jobs-returning-check{ margin-top:8px !important; padding-top:18px; border-top:1.5px dashed rgba(0,0,0,.18); }


section.jobs-apply {
    padding-bottom: 350px;
}

 .jobs-card {
    background: transparent;
    background-image: url(https://stage.jonesshakes.com/wp-content/themes/jones/assets/img/bg-dd-apply.svg);
    background-size: 101%;
    background-position: top center;
    box-shadow: 0 0px 0px rgba(0, 0, 0, .10);
}

.jobs-card::before{
    content: none;
}














/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px){
  .jobs-hero__title{ font-size:84px; }
  .jobs-intro__head{ font-size:54px; }
  .jobs-intro__lead{ font-size:19px; }
  .jobs-card{ padding:26px 22px 30px; }
  .jobs-card__title{ font-size:38px; }
  .jga-row{ grid-template-columns:1.3fr repeat(7,1fr); column-gap:4px; }
  .jga-head .jga-day{ font-size:14px; }
  .jga-slot{ font-size:14px; }
  .jga-cell input[type=checkbox]{ width:20px; height:20px; }
}
@media (max-width: 640px){
  .jobs-hero__inner{ padding:64px 18px 150px; }
  .jobs-hero__title{ font-size:56px; }
  .jobs-hero__cta{ gap:12px; }
  .apply-pill{ height:54px; font-size:15px; }
  .jobs-intro__head{ font-size:38px; }
  /* availability becomes horizontally scrollable on phones */
  .jobs-availability{ overflow-x:auto; }
  .jobs-grid-table{ min-width:560px; }
  .jobs-apply .jobs-avail-row .gfield_checkbox{ gap:8px 3px !important; }
  .jobs-apply .jobs-avail-row .gfield_checkbox label{ font-size:10px !important; }
}

/* Keep the application form above the footer. On phones the footer is pulled up 400px over the page
   (footer.footer margin-top:-400px), which covered the Send button so taps never reached it. */
.jobs-apply .js-form{ position:relative; z-index:3; }

/* 2026-09-29: between 999px and 1039px the shared tablet rule centered these title layers (left:50% + translateX(-50%))
   without the job page's reset, so the heading slid off the left edge. Keep them left-aligned and spaced as at 998px and below. */
@media (max-width:1039px){
  .jobs-intro .merch__title .t-outer, .jobs-intro .merch__title .t-white, .jobs-intro .merch__title .t-fill{ left:0 !important; transform:none !important; }
  .jobs-intro h2.merch__title{ height:80px; }
}
/* 2026-09-29: keep the page gutter between 999px and 1039px (998px and below uses 25px; 1040px+ centers the 1000px wrap). */
@media (min-width:999px) and (max-width:1039px){ section.jobs-apply .jobs-wrap{ padding-left:20px !important; padding-right:20px !important; } }

/* 2026-10-01 (Chris): keep the "Apply - <store> <address>" line on ONE line on phones. The size scales with the
   screen: (viewport - 30px side padding) / the line's width in em, measured at 390px (Mercer 19.1em, Pensacola
   24.4em) plus a safety margin; letter-spacing in em so it scales too. Never above the desktop 21px. */
@media (max-width:640px){
  .jobs-intro__apply--mercer, .jobs-intro__apply--pensacola{ white-space:nowrap; letter-spacing:.03em; gap:8px; }
  .jobs-intro__apply--mercer{ font-size:min(21px, calc((100vw - 30px) / 20)); }
  .jobs-intro__apply--pensacola{ font-size:min(21px, calc((100vw - 30px) / 25.5)); }
}
/* 2026-10-01 (Chris saw the last card title's outline layers drawn over "About you" on his phone): pin each
   job-card title's stacked outline layers to the title itself, so they can never position against an outer box. */
.jobs-card{ position:relative; }
.jobs-card__title.sticker3{ position:relative !important; display:block; height:auto; isolation:isolate; }
.jobs-card__title.sticker3 .l-key, .jobs-card__title.sticker3 .l-band{ top:0; left:0; right:0; bottom:0; }

/* SMS opt-in links (Terms / Privacy) sit in the normal flow inside the opt-in box, under the consent text.
   They used to be absolutely positioned a fixed 98px above the bottom of the form fields, so they landed on the
   consent text whenever the fields below them changed height (reCAPTCHA v3 hides the v2 box on live) or the text
   wrapped to more lines on a phone (Chris 2026-10-06, Chrome on Android + iPhone). The box's bottom padding holds
   the links: 1 line from 768px up, 2 lines on phones. Margin = -(links block height) - 14px (16px grid gap - 2px). */
div#field_5_66, div#field_7_66 { position: static !important; bottom: auto !important; left: auto !important; margin-top: -62px !important; padding: 0 20px 0 52px; }
@media (max-width: 767px) {
  fieldset#field_5_65, fieldset#field_7_65 { padding-bottom: 84px !important; }
  div#field_5_66, div#field_7_66 { margin-top: -86px !important; }
}