/*
Theme Name: Sirtica Maritime
Theme URI: https://sirticamaritime.com
Author: Dinani Tech (Aditya Sharma)
Author URI: https://dinani.tech
Description: A lightweight, fast, SEO-ready custom WordPress theme for Sirtica Maritime — a corporate ship-management website. Built-in SEO (meta tags, Open Graph, JSON-LD schema) and a built-in contact form, so no premium plugins are required.
Version: 2.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary — built for Sirtica Maritime
Text Domain: sirtica
*/

/* ===========================================================================
   Built to the "Website Layout Option" mockup (Oct 2026).
   Colours are sampled from the approved logo and the mockup itself, not guessed.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Brand typography. LT Wave sets the headings, Roboto the body copy — the two
   faces the designer supplied with the layouts, so the site matches the
   approved artwork rather than approximating it with Poppins.

   LT Wave is licensed under the SIL Open Font License (see assets/fonts/
   OFL-LTWave.txt, which the licence requires us to ship with it); Roboto is
   Apache 2.0. Both are self-hosted, so no request leaves for a font CDN.
   --------------------------------------------------------------------------- */
@font-face{font-family:"LT Wave";src:url(assets/fonts/LTWave-Medium.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"LT Wave";src:url(assets/fonts/LTWave-MediumItalic.woff2) format("woff2");
  font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"LT Wave";src:url(assets/fonts/LTWave-Bold.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"LT Wave";src:url(assets/fonts/LTWave-BoldItalic.woff2) format("woff2");
  font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Roboto;src:url(assets/fonts/Roboto-Light.woff2) format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(assets/fonts/Roboto-Regular.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(assets/fonts/Roboto-Medium.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(assets/fonts/Roboto-Bold.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --font-head:"LT Wave","Century Gothic",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --font-body:Roboto,"Helvetica Neue",Arial,system-ui,-apple-system,sans-serif;
}

:root{
  --navy:#1f2a7a;          /* headings, nav, footer type */
  --navy-deep:#161e5c;
  --blue:#2f6fd0;
  --green:#12b886;         /* the brand green: buttons, card heads, icons */
  --green-dark:#0ea97a;
  --ink:#394150;           /* body copy */
  --muted:#6b7280;
  --line:#e3e8f0;
  --panel:#dbeafe;         /* the pale blue "What we believe" panel */
  --white:#fff;
  --radius:14px;
  --radius-lg:22px;
  --wrap:1180px;
  --shadow:0 10px 30px rgba(31,42,122,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--navy);line-height:1.2;margin:0 0 .5em;font-family:var(--font-head)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;
  background:var(--white);padding:10px 16px;border-radius:8px;z-index:100}

/* Section headings — the mockup sets them in heavy navy caps. */
.sec-title{font-size:clamp(22px,3vw,30px);font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;margin:0 0 22px}

/* ---------------------------------------------------------------- header */
.site-nav{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid transparent}
.site-nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 14px rgba(31,42,122,.06)}
.site-nav .wrap{display:flex;align-items:center;gap:20px;min-height:84px}
.logo img{height:46px;width:auto}
.menu-main{margin-left:auto;display:flex;align-items:center;gap:26px}
.menu-main ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.menu-main a{color:var(--navy);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.menu-main a:hover{color:var(--green);text-decoration:none}
.btn-quote{background:var(--green);color:#fff!important;border-radius:999px;
  padding:9px 20px;font-size:12.5px;font-weight:600;white-space:nowrap}
.btn-quote:hover{background:var(--green-dark);text-decoration:none}

.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;width:42px}
.nav-toggle span{display:block;height:2px;background:var(--navy);border-radius:2px;margin:5px 0;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------------------ hero */
.hero{padding:0 0 10px}
.hero-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:1774/887;background:var(--navy)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,6vw,76px)}
.hero-copy h1{color:#fff;margin:0;max-width:min(560px,60%);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-copy em{display:block;font-style:italic;font-weight:600;font-size:clamp(26px,4.6vw,52px);line-height:1.05}
.hero-copy span{display:block;font-weight:500;font-size:clamp(16px,2.4vw,27px);margin-top:.25em}
.hero-copy span::first-line{font-weight:400}

/* ----------------------------------------------------------------- about */
.about{padding:52px 0 10px}
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,4vw,56px);align-items:center}
.about-copy h2{font-size:clamp(26px,3.4vw,34px);font-weight:800}
.about-copy p{margin:0 0 14px;max-width:46ch}
.about-art img{margin-inline:auto}

/* -------------------------------------------------------------- believe */
.believe{padding:34px 0}
.believe-panel{background:var(--panel);border-radius:var(--radius-lg);
  padding:clamp(18px,3vw,30px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(18px,3.5vw,38px);align-items:center}
.believe-img{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.believe-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.believe-copy h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin-bottom:.6em}
.believe-copy ul{list-style:none;margin:0;padding:0}
.believe-copy li{font-size:13.5px;margin-bottom:9px;color:var(--ink)}
.believe-copy li b{color:var(--navy)}

/* ----------------------------------------------------- mission & vision */
.mv{padding:46px 0}
.mv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,64px);align-items:center}
.mv-img{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.mv-img img{width:100%;aspect-ratio:1100/1375;object-fit:cover}
.mv-copy article+article{margin-top:34px}
.mv-copy h3{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2.6vw,27px);font-weight:800;margin-bottom:.45em}
.mv-copy h3 img{width:34px;height:34px;flex:none}
.mv-copy p{margin:0;max-width:40ch;font-size:13.5px}
.mv-tag{display:inline-block;margin-top:6px;color:var(--navy);font-weight:600}

/* ----------------------------------------------------------- why choose */
.why{padding:30px 0 10px}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.why-card{border:1px solid var(--green);border-radius:var(--radius);overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.why-card h3{background:var(--green);color:#fff;margin:0;padding:12px 16px;
  font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;min-height:58px;
  display:flex;align-items:center}
.why-card p{margin:0;padding:14px 16px 18px;font-size:13px;color:var(--ink)}

/* -------------------------------------------------------------- services */
.services{padding:44px 0}
.svc-rail{position:relative;display:flex;align-items:center;gap:10px}
.svc-track{list-style:none;margin:0;padding:4px;display:grid;
  grid-auto-flow:column;
  /* exactly three across, however many services the client adds — 1fr would divide the
     track between all of them and give six slivers instead of a row of three. */
  grid-auto-columns:calc((100% - 2*22px)/3);gap:22px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;flex:1}
.svc-track::-webkit-scrollbar{display:none}
.svc-card{scroll-snap-align:start}
.svc-card a{display:block;position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
.svc-card img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .35s ease}
.svc-card a:hover img{transform:scale(1.04)}
.svc-card a:hover{text-decoration:none}
.svc-label{position:absolute;left:14px;right:14px;bottom:14px;
  background:linear-gradient(180deg,var(--blue),var(--navy));color:#fff;
  border-radius:10px;padding:11px 10px;text-align:center;
  font-size:15px;font-weight:600;box-shadow:0 8px 18px rgba(22,30,92,.3)}
.rail-btn{flex:none;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:transparent;color:var(--blue);font-size:30px;line-height:1;
  display:grid;place-items:center}
.rail-btn:hover{color:var(--navy)}
.rail-btn[disabled]{opacity:.25;cursor:default}

/* ----------------------------------------------------------- core values */
.values{padding:30px 0 52px}
.values-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.value-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start;
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:#fff}
.value-card img{width:62px;height:62px}
.value-card h3{font-size:16px;font-weight:700;margin:0 0 4px}
.value-card p{margin:0;font-size:12.5px;color:var(--ink)}

/* ----------------------------------------------------------------- quote */
.quote{padding:10px 0 60px}
.quote-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy)}
.quote-bg{width:100%;aspect-ratio:1600/1016;object-fit:cover;max-height:520px}
.quote-panel{position:absolute;top:50%;right:clamp(16px,5%,58px);transform:translateY(-50%);
  width:min(440px,54%);background:var(--green);border-radius:var(--radius-lg);
  padding:clamp(18px,2.6vw,28px);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.quote-panel h2{color:#fff;font-size:clamp(18px,2.4vw,26px);font-weight:800;
  text-transform:uppercase;margin:0 0 16px}
.quote-form .q-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.quote-form input,.quote-form textarea{
  width:100%;border:0;border-radius:9px;padding:11px 14px;font:inherit;font-size:13.5px;
  color:var(--ink);background:#fff}
.quote-form textarea{resize:vertical;min-height:74px;margin-bottom:14px}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:#9aa3b2}
.quote-form input:focus,.quote-form textarea:focus{outline:2px solid var(--navy);outline-offset:1px}
.q-send{background:#fff;color:var(--navy);border:0;border-radius:9px;
  padding:10px 26px;font:inherit;font-size:13.5px;font-weight:700;text-transform:uppercase;cursor:pointer}
.q-send:hover{background:#eef4ff}
.q-note{border-radius:9px;padding:9px 12px;font-size:13px;margin:0 0 12px}
.q-note.ok{background:#e9fbf3;color:#0b6b4a}
.q-note.err{background:#fde8e8;color:#8a1c1c}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}

/* ---------------------------------------------------------------- footer */
.site-foot{border-top:1px solid var(--line);padding:46px 0 0;margin-top:10px}
.foot-grid{display:grid;grid-template-columns:1.1fr .8fr 1.1fr 1fr;gap:clamp(20px,3vw,40px)}
.foot-brand img{width:min(200px,70%)}
.foot-col h3{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--navy);margin:0 0 12px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:7px}
.foot-col a{color:var(--ink);font-size:12.5px}
.foot-col a:hover{color:var(--green);text-decoration:none}
.foot-contact address{font-style:normal;font-size:12.5px;color:var(--ink);margin:0 0 8px}
.foot-contact p{margin:0 0 5px;font-size:12.5px}
.foot-base{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);margin-top:34px;padding-top:16px;padding-bottom:22px}
.foot-base small,.foot-base a{font-size:11.5px;color:var(--muted)}
.foot-base nav{display:flex;gap:18px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1024px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .mv-grid{gap:28px}
  .svc-track{grid-auto-columns:calc((100% - 22px)/2)}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .menu-main{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 18px;display:none;
    box-shadow:0 14px 24px rgba(31,42,122,.08)}
  .menu-main.open{display:flex}
  .menu-main ul{flex-direction:column;align-items:stretch;gap:0}
  .menu-main li{border-bottom:1px solid var(--line)}
  .menu-main a{display:block;padding:12px 0}
  .btn-quote{margin-top:12px;text-align:center}

  .about-grid,.believe-panel,.mv-grid{grid-template-columns:minmax(0,1fr)}
  .about-art{order:-1}
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .values-grid{grid-template-columns:minmax(0,1fr)}
  .svc-track{grid-auto-columns:minmax(230px,78%)}
  .svc-card img{aspect-ratio:3/4}

  /* The form sits over the photo on desktop; on a phone that is unreadable, so the
     picture becomes a header and the panel sits beneath it. */
  .quote-card{background:transparent}
  .quote-bg{aspect-ratio:16/10;border-radius:var(--radius-lg)}
  .quote-panel{position:static;transform:none;width:auto;margin-top:-28px}
  .quote-form .q-row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero-card{aspect-ratio:4/5}
  .hero-copy h1{max-width:100%}
  .foot-grid{grid-template-columns:1fr}
  .value-card{grid-template-columns:54px minmax(0,1fr);gap:12px;padding:16px}
  .value-card img{width:48px;height:48px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ===========================================================================
   Inner pages (About, Services, Contact, posts) — page.php, single.php,
   archive.php and template-contact.php were written against the previous
   stylesheet. Rewriting the sheet for the new homepage would have left every
   one of them unstyled, so their rules are carried over here, remapped onto the
   new palette. Worth folding into the sections above when those pages are next
   redesigned to the same layout.
   =========================================================================== */
.btn{display:inline-block;padding:12px 24px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer;border:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-amber{background:var(--green);color:#1a1200}
.btn-ghost{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.eyebrow{color:var(--blue);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
h2.sec{font-size:32px;color:var(--navy);margin:0 0 14px;line-height:1.2}
/* two-col */
.two .grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.two .ph,.two img{height:340px;border-radius:12px;object-fit:cover;width:100%}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;transition:.2s}
.card:hover{box-shadow:0 12px 30px rgba(10,37,64,.10);transform:translateY(-3px)}
.card .ic{width:52px;height:52px;border-radius:12px;background:#e8f1fb;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.card h3{color:var(--navy);font-size:18px;margin:0 0 8px}
.card p{color:var(--muted);font-size:14.5px;margin:0}
.card a.more{color:var(--blue);font-weight:600;font-size:14px;display:inline-block;margin-top:12px}
/* split */
.split .grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.presence h2.sec{color:#fff}
/* news */
.news .card{padding:0;overflow:hidden}
.ctaband h2.sec{color:#fff;font-size:30px;margin-bottom:10px}
/* page content */
.page-hero{background:var(--navy);color:#fff;padding:60px 0}
.page-hero h1{margin:0;font-size:40px}
.page-hero .crumbs{color:#9fb3c8;font-size:14px;margin-top:8px}
.content{padding:60px 0;max-width:820px}
.content h2{color:var(--navy)}
.content img{border-radius:10px;margin:14px 0}
/* contact form */
.sirtica-form{max-width:640px;margin-top:10px}
.sirtica-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sirtica-form label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px;color:var(--navy)}
.sirtica-form input,.sirtica-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:6px;font-size:15px;font-family:inherit}
.sirtica-form textarea{min-height:130px;resize:vertical}
.sirtica-form .hp{position:absolute;left:-9999px}
.sirtica-note{padding:12px 16px;border-radius:6px;margin-bottom:14px;font-size:14px}
.sirtica-note.ok{background:#e3f2e8;color:#1f6b39;border:1px solid #b7ddc4}
.sirtica-note.err{background:#fbe3e3;color:#a12a2a;border:1px solid #edbcbc}
.two .grid,.split .grid{grid-template-columns:1fr}
.cards{grid-template-columns:1fr 1fr}
.cards,.sirtica-form .row{grid-template-columns:1fr}
/* ---- motion: cards, buttons, icons ---- */
.card{transition:box-shadow .25s ease,transform .25s ease}
.card .ic{transition:transform .3s ease}
.card:hover .ic{transform:scale(1.12) rotate(-4deg)}
.btn{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,37,64,.18);filter:brightness(1.05)}
header.site-nav .wrap>a.btn-primary{display:none}
h2.sec{font-size:26px}
.card,.btn,.office,.card .ic{transition:none}

/* ===========================================================================
   v2.1.0 — the pages from the "Website Materials" pack (Nov 2026):
   homepage slider, service detail pages, Careers, Employee Well-being.
   Everything above this line already matched the artwork and is untouched.
   =========================================================================== */

/* ------------------------------------------------------- homepage slider */
/* Four frames, cross-fading. The first is painted by the server and eagerly
   loaded; the rest are lazy, so the hero costs one image on first paint. */
.hero-slider{position:relative}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hero-slide.is-on{opacity:1;pointer-events:auto}
.hero-cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,6vw,76px);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-cap b{font-family:var(--font-head);font-style:italic;font-weight:700;
  font-size:clamp(26px,4.6vw,52px);line-height:1.05}
.hero-cap b span{font-style:italic;font-weight:500;font-size:.62em}
.hero-cap i{font-family:var(--font-head);font-style:italic;font-weight:500;
  font-size:clamp(16px,2.6vw,30px);margin-top:.1em}
.hero-dots{position:absolute;left:0;right:0;bottom:clamp(10px,2vw,18px);
  display:flex;justify-content:center;gap:9px;z-index:2}
.hero-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5)}
.hero-dots button[aria-current="true"]{background:#fff;width:24px;border-radius:999px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;color:#fff;font-size:26px;
  line-height:1;background:rgba(14,22,60,.35);display:grid;place-items:center}
.hero-arrow:hover{background:rgba(14,22,60,.6)}
.hero-arrow.prev{left:clamp(8px,1.6vw,18px)}
.hero-arrow.next{right:clamp(8px,1.6vw,18px)}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* ------------------------------------------------------- footer socials */
.foot-social{display:flex;gap:10px;margin-top:12px}
.foot-social a{display:grid;place-items:center;width:26px;height:26px;border-radius:50%}
.foot-social img{width:26px;height:26px}
.foot-social a:hover{opacity:.75}

/* --------------------------------------------------- service detail page */
.svc-banner{padding:0 0 6px}
.svc-banner .wrap{position:relative}
.svc-banner figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy)}
.svc-banner img{width:100%;aspect-ratio:1774/887;object-fit:cover;max-height:520px}
.svc-banner h1{position:absolute;left:clamp(42px,7vw,90px);top:50%;transform:translateY(-50%);
  margin:0;color:#fff;font-style:italic;font-weight:700;max-width:min(460px,52%);
  font-size:clamp(24px,4vw,44px);line-height:1.1;text-shadow:0 2px 18px rgba(0,0,0,.4)}

.svc-detail{padding:40px 0 10px}
.svc-detail-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,5vw,64px);align-items:start}
.svc-detail h2{font-size:clamp(21px,2.8vw,28px);font-weight:700;margin-bottom:.7em}
.svc-detail-body ul{margin:0;padding:0 0 0 18px}
.svc-detail-body li{margin-bottom:12px;font-size:14px}
.svc-detail-body p{font-size:14px}

/* the sibling-service column: a green arrow disc and the service name */
.svc-siblings{list-style:none;margin:0;padding:6px 0 0}
.svc-siblings li{margin-bottom:18px}
.svc-siblings a{display:flex;align-items:center;gap:13px;color:var(--ink);font-size:15px}
.svc-siblings a:hover{color:var(--green);text-decoration:none}
.svc-siblings img{width:21px;height:21px;flex:none}

/* ------------------------------------------------------------- page lede */
/* Shared by Careers and Employee Well-being: intro copy beside a photo. */
.lede{padding:38px 0 8px}
.lede-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,5vw,56px);align-items:start}
.lede h2{font-size:clamp(23px,3.1vw,31px);font-weight:700;margin-bottom:.6em}
.lede p{font-size:14px;margin:0 0 12px;max-width:58ch}
.lede-art{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.lede-art img{width:100%;object-fit:cover}
.lede dl{margin:14px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;
  font-size:14px}
.lede dt{font-weight:700;color:var(--navy)}
.lede dd{margin:0}

/* --------------------------------------------- employee well-being lists */
.wellness{padding:26px 0 10px}
.wellness-list{list-style:none;margin:0;padding:0;max-width:72ch}
.wellness-list li{display:grid;grid-template-columns:82px minmax(0,1fr);gap:18px;
  align-items:start;margin-bottom:26px}
.wellness-list img{width:66px;height:66px}
.wellness-list h3{font-size:16px;font-weight:700;margin:0 0 4px;color:var(--blue)}
.wellness-list p{margin:0;font-size:13.5px}

.inclusion{padding:18px 0 46px}
.inclusion-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,5vw,56px);align-items:center}
.inclusion h2{font-size:clamp(18px,2.3vw,23px);font-weight:700;color:var(--blue)}
.inclusion p{font-size:13.5px}
.inclusion .lead-in{font-weight:700;color:var(--navy);margin-bottom:6px}
.inclusion ul{list-style:none;margin:0;padding:0}
.inclusion li{font-size:13.5px;margin-bottom:4px}
.inclusion figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

/* --------------------------------------------------- careers apply form */
.apply{padding:16px 0 54px}
.apply h2{font-size:clamp(23px,3.1vw,31px);font-weight:700;margin-bottom:.5em}
.apply-form{max-width:620px}
.apply-form .field{margin-bottom:16px}
.apply-form label{display:block;font-size:13.5px;font-weight:500;color:var(--navy);
  margin-bottom:6px}
.apply-form input[type=text],.apply-form input[type=email],.apply-form input[type=tel],
.apply-form input[type=date],.apply-form input[type=number],.apply-form textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 13px;
  font:inherit;font-size:13.5px;color:var(--ink);background:#fff}
.apply-form textarea{resize:vertical;min-height:64px}
.apply-form input:focus,.apply-form textarea:focus{outline:2px solid var(--green);
  outline-offset:1px;border-color:transparent}
.apply-form .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.apply-roles{display:flex;gap:22px;margin-bottom:18px;font-size:13.5px}
.apply-roles label{display:flex;align-items:center;gap:7px;font-weight:400;color:var(--ink);
  margin:0;cursor:pointer}
.apply-form input[type=file]{font-size:13px}
.apply-hint{font-size:12px;color:var(--muted);margin:6px 0 0}
.apply-send{width:100%;background:var(--navy);color:#fff;border:0;border-radius:8px;
  padding:14px 20px;font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;margin-top:8px}
.apply-send:hover{background:var(--navy-deep)}

/* ------------------------------------------- responsive, the new pieces */
@media (max-width:1024px){
  .svc-detail-grid,.lede-grid,.inclusion-grid{grid-template-columns:minmax(0,1fr)}
  .lede-art{max-width:520px}
}
@media (max-width:860px){
  .hero-arrow{display:none}
  .svc-banner h1{left:0;right:0;top:auto;bottom:0;transform:none;max-width:none;
    padding:46px clamp(20px,5vw,34px) 20px;
    background:linear-gradient(180deg,transparent,rgba(12,18,52,.72))}
  .wellness-list li{grid-template-columns:62px minmax(0,1fr);gap:14px}
  .wellness-list img{width:52px;height:52px}
}
@media (max-width:560px){
  .apply-form .pair{grid-template-columns:minmax(0,1fr)}
  .hero-cap{padding:0 20px}
}

/* The inner-page hero paints white type on navy, but the global heading rule
   sets every h1 navy — so these titles were rendering navy-on-navy, i.e.
   invisible, on About, Contact and the archives. */
.page-hero h1{color:#fff}
.page-hero .crumbs a{color:#cdd9e8}

/* Services listing: the homepage card, laid out as a grid instead of a rail. */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  list-style:none;margin:0;padding:4px}
@media (max-width:1024px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svc-grid{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------- FAQs
   Native <details>/<summary>, styled. The marker is replaced with our own
   chevron so the control reads the same in every browser; :focus-visible is
   kept because the summary is the keyboard target. */
.faqs{padding:34px 0 52px}
.faq-lede{margin:-12px 0 26px;color:var(--ink);opacity:.8;max-width:62ch}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px;align-items:start}
.faq-group h3{font-size:15px;text-transform:uppercase;letter-spacing:.02em;
  margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--green)}
.faq-group h3 a{color:var(--navy)}
.faq-group h3 a:hover{color:var(--green);text-decoration:none}

.faq-item{background:#fff;border:1px solid var(--line);border-radius:10px;
  margin:0 0 8px;overflow:hidden}
.faq-item+.faq-item{margin-top:8px}
.faq-item summary{cursor:pointer;list-style:none;padding:12px 40px 12px 14px;position:relative;
  font-weight:500;color:var(--navy);font-size:14px;line-height:1.45}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;
  margin-top:-6px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(45deg);transition:transform .18s ease}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-item summary:hover{background:#fafcff}
.faq-item summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.faq-a{padding:0 16px 14px;font-size:14px;color:var(--ink)}
.faq-a p{margin:0}

/* The same list, on a single service page. */
.svc-faqs{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.svc-faqs h3{font-size:18px;margin:0 0 14px}

@media (max-width:860px){.faq-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}}

/* ------------------------------------------------- policy page drafts
   A visible marker on the three policy pages until the client's lawyer has
   signed them off. Deliberately hard to miss, so a draft cannot quietly
   become the live policy. Delete the <p class="policy-draft"> from each page
   once approved — no CSS change needed. */
.policy-draft{background:#fff6e5;border:1px solid #f0c674;border-left:4px solid #e0a106;
  border-radius:8px;padding:12px 16px;margin:0 0 24px;font-size:14px;color:#6b4f05}

/* Long-form content: the policy pages set their own headings and a table. */
.content table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px}
.content th,.content td{border:1px solid var(--line);padding:9px 12px;text-align:left;
  vertical-align:top}
.content th{background:#f6f9fd;color:var(--navy);font-family:var(--font-head)}
.content h2{font-size:20px;margin:28px 0 .4em}
.content h3{font-size:16px;margin:20px 0 .4em}
.content code{background:#f1f5fa;padding:1px 6px;border-radius:4px;font-size:13px}