/* =========================================================================
   careers.susangage.net — landing page
   Restyled to match susangage.com: its palette, typography and section
   rhythm, applied to the careers page's own content.

   Brand tokens taken from susangage.com's Elementor globals:
     primary / text  #39343A      accent band  #E2DDDB
     secondary       #8B9495      warm tan     #BE9367

   Type: susangage.com sets headings in Classico Regular (self-hosted, no
   CORS, so unusable here) and body in Montserrat. Tenor Sans stands in for
   Classico — same light, slightly flared, wide-tracked uppercase feel.
   Parisienne stands in for Retro Signature, the script accent.

   Scoped to index.php only; css/style.css is untouched for other pages.
   ========================================================================= */

:root{
  --ink:        #39343A;   /* headings + body copy */
  --ink-soft:   #5a5358;
  --band:       #E2DDDB;   /* alternating section background */
  --muted:      #8B9495;
  --tan:        #BE9367;
  --tan-dark:   #a87e55;
  --white:      #ffffff;
  --hairline:   rgba(57, 52, 58, .22);

  --shell:      1120px;
  --measure:    760px;     /* narrow centred text column */

  --display:    'Tenor Sans', 'Optima', 'Palatino Linotype', 'Gill Sans', sans-serif;
  --body:       'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --script:     'Parisienne', 'Segoe Script', cursive;

  --track:      0.19em;    /* 5.6px at 30px, as on susangage.com */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body);
  font-size:15px;
  font-weight:400;
  line-height:1.86;
  letter-spacing:.04em;
  color:var(--ink);
  background:var(--white);
}

img{ max-width:100%; display:block; }

.container{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 24px;
}

.container.narrow{ max-width:var(--measure); }
.center{ text-align:center; }

a{ color:var(--ink); }

/* ------------------------------------------------------- typography ---- */

/* The brand's one heading voice: light, uppercase, widely tracked, centred. */
.display{
  margin:0 0 26px;
  font-family:var(--display);
  font-weight:400;
  font-size:30px;
  line-height:1.34;
  letter-spacing:var(--track);
  text-transform:uppercase;
  text-align:center;
  color:var(--ink);
}

.display-invert{ color:var(--white); }

h1.display{ font-size:34px; }

/* Small label-style heading used inside columns and steps. */
.col-title{
  margin:0 0 12px;
  font-family:var(--display);
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}

.lead{
  margin:0 auto 32px;
  max-width:var(--measure);
}

.section-lead{
  margin:0 auto 54px;
  max-width:620px;
  text-align:center;
  color:var(--ink-soft);
}

/* The thin rule susangage.com uses to separate a heading from its content. */
.rule{
  width:100%;
  max-width:664px;
  margin:0 auto 46px;
  border:0;
  border-top:1px solid var(--hairline);
}

.script{
  margin:0 0 6px;
  font-family:var(--script);
  font-size:40px;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  color:var(--tan);
}

/* ---------------------------------------------------------- buttons ---- */

.btn{
  display:inline-block;
  padding:15px 38px;
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--white);
  background:var(--tan);
  border:1px solid var(--tan);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}

.btn:hover{ background:var(--tan-dark); border-color:var(--tan-dark); }

.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.btn-on-dark{ background:var(--tan); border-color:var(--tan); }
.btn-on-dark:hover{ background:var(--white); border-color:var(--white); color:var(--ink); }

/* ----------------------------------------------- header / utility bar --- */

.utility-bar{
  background:var(--band);
  font-size:11px;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.utility-inner{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:34px;
}

.utility-bar a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
}

.utility-bar a:hover{ color:var(--tan-dark); }

/* Centred wordmark, as on susangage.com. */
.site-header{
  background:var(--white);
  padding:34px 24px 30px;
  text-align:center;
}

.logo{ display:inline-block; }
.logo img{ width:360px; max-width:82vw; height:auto; margin:0 auto; }

/* --------------------------------------------------------- sections ---- */

/* The brand's rhythm: a generous top, a slightly tighter bottom. */
.section{ padding:86px 0 80px; }
.section-top{ padding-top:70px; }
.band{ background:var(--band); }

/* Full-bleed photography between sections. */
.photo-band img{
  width:100%;
  height:clamp(300px, 42vw, 560px);
  object-fit:cover;
  object-position:center;
}

/* ------------------------------------------------- why work here ------- */

.columns{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:48px;
  max-width:1000px;
  margin:0 auto;
  text-align:center;
}

.col p{ margin:0; }

/* -------------------------------------------------- how hiring works --- */

.steps{
  list-style:none;
  margin:0 0 56px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:40px;
}

.step{ text-align:center; }
.step p{ margin:0; }

/* A tracked numeral instead of a filled badge — the brand uses no solid
   shapes of that kind. */
.step-num{
  display:block;
  margin-bottom:14px;
  font-family:var(--display);
  font-size:26px;
  letter-spacing:.12em;
  color:var(--tan);
}

/* --------------------------------------------------- open positions ---- */

.positions{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:40px 28px;
  margin-bottom:56px;
}

.pos{ text-align:center; }

.pos-photo{
  width:218px;
  height:218px;
  margin:0 auto 20px;
  border-radius:50%;
  overflow:hidden;
}

.pos-photo img{ width:100%; height:100%; object-fit:cover; }

.pos-label{
  display:block;
  font-family:var(--display);
  font-size:14px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink);
}

/* ----------------------------------------------------- testimonials ---- */

.quotes{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:46px 64px;
  max-width:1000px;
  margin:0 auto;
}

.quote{
  margin:0;
  text-align:center;
  font-style:italic;
  font-weight:300;
  color:var(--ink);
}

.quote::before{
  content:"";
  display:block;
  width:34px;
  margin:0 auto 18px;
  border-top:1px solid var(--tan);
}

/* --------------------------------------------------------- CTA band ---- */

/* susangage.com closes with a dark plum band carrying a white statement. */
.cta-band{
  background:var(--ink);
  color:var(--white);
  padding:92px 0 96px;
}

.cta-band .display{ margin-bottom:34px; }

/* ----------------------------------------------------------- footer ---- */

.site-footer{
  background:var(--band);
  padding:48px 0 44px;
  font-size:11.5px;
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:2.2;
}

.footer-contact{ margin:0 0 10px; }
.footer-contact a{ text-decoration:none; }
.footer-contact a:hover{ color:var(--tan-dark); }
.sep{ padding:0 8px; color:var(--muted); }

.footer-legal{
  margin:0;
  color:var(--muted);
  letter-spacing:.13em;
}

/* ======================================================== responsive ==== */

@media (max-width:1040px){
  .positions{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:44px 24px; }
  .steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:44px 32px; }
  .columns{ gap:40px 36px; }
}

@media (max-width:860px){
  body{ font-size:14.5px; }

  .section{ padding:66px 0 60px; }
  .display{ font-size:25px; letter-spacing:.15em; }
  h1.display{ font-size:27px; }
  .script{ font-size:34px; }

  .columns{ grid-template-columns:1fr; gap:38px; max-width:460px; }
  .logo img{ width:270px; }
  .rule{ margin-bottom:36px; }
  .section-lead{ margin-bottom:40px; }
}

@media (max-width:600px){
  .positions{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; max-width:380px; margin-left:auto; margin-right:auto; }
  .quotes{ grid-template-columns:1fr; gap:36px; }
  .pos-photo{ width:200px; height:200px; }
  .btn{ padding:14px 30px; letter-spacing:.16em; }
  .footer-contact .sep{ display:block; height:0; overflow:hidden; }
}

@media (prefers-reduced-motion:reduce){
  .btn{ transition:none; }
}