/*
 Theme Name:   Stayco Child
 Theme URI:    https://staystaffing.com
 Description:  Astra child theme for Stayco Saffing. Faithful clone of the Stayco Staffing design (ported from the Manus build). Global design tokens, typography and all page/section styles live in this file.
 Author:       Unknown
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  stayco-child
*/

/* ==========================================================================
   STAYCO GLOBAL STYLES  (ported from the Manus export index.css)
   Tailwind scaffolding removed; all custom rules preserved verbatim.
   Powers home + all inner pages + header/footer.
   ========================================================================== */

:root {
  --background: #fbfaf8;
  --foreground: #0c233b;
  --primary: #0c233b;
  --primary-foreground: #fbfaf8;
  --border: #0c233b29;
  --ring: #c9a55d;
  --radius: .75rem;
  --ink: #0c233b;
  --ink-deep: #071b2d;
  --lime: #c9a55d;
  --lime-light: #e1c989;
  --cream: #fbfaf8;
  --paper: #fff;
  --sand: #f0ede7;
  --muted: #657080;
  --mono: "Montserrat", Arial, sans-serif;
  --display: "Cormorant Garamond", Georgia, serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "Montserrat", Arial, sans-serif; font-size: 16px; line-height: 1.45; }
body::selection { background: var(--lime); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button:not(:disabled), a, select, input[type="checkbox"], input[type="file"] { cursor: pointer; }
button:active, .button:active { transform: scale(.97); }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 2rem; }
.site-shell { overflow: clip; }
.section-pad { padding-block: clamp(5.4rem, 9vw, 9rem); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font: 500 10px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 20px; height: 1px; background: currentColor; }
.eyebrow-light { color: #fff; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
h1 em, h2 em { color: var(--lime); font-style: italic; }
h1 { font-size: clamp(3.75rem, 6.3vw, 6.9rem); }
h2 { font-size: clamp(2.75rem, 4.5vw, 5rem); }
h3 { font-size: 1.22rem; font-weight: 600; letter-spacing: -.025em; }
p { color: var(--muted); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .62rem; border: 1px solid transparent; min-height: 51px; padding: 0 1.2rem; font-size: .76rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; transition: background-color .18s var(--ease-out), color .18s var(--ease-out), transform .16s var(--ease-out), border-color .18s var(--ease-out);border-radius:0; }
.button:hover { transform: translateY(-2px); }
.button-lime { background: var(--lime); color: var(--ink-deep); border-color: var(--lime); }
.button-lime:hover { background: var(--lime-light); }
.button-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.button-dark:hover { background: #1b384f; }
.button-ghost-light {    color: #fff;
    border-color: rgba(255, 255, 255, .45);
    background: transparent;}
.button-ghost-light:hover, .button-outline-light:hover { background: #fff; color: var(--ink); }
.button-outline-light { color: #fff; border-color: rgba(255,255,255,.5);background:transparent; }
.button-outline-dark { color: var(--ink); border-color: var(--ink); }
.button-outline-dark:hover { background: var(--ink); color: #fff; }
.button-small { min-height: 41px; padding-inline: .95rem; font-size: .67rem; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: .25rem; font-size: .78rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; transition: gap .18s var(--ease-out); }
.text-link:hover { gap: .85rem; }
.text-link-light { color: #fff; }

.site-header { position: fixed; z-index: 50; width: 100%; top: 0; color: #fff; transition: background-color .22s var(--ease-out), box-shadow .22s var(--ease-out), color .22s var(--ease-out); }
.site-header-scrolled { background: rgba(251,250,248,.93); color: var(--ink); box-shadow: 0 1px 0 rgba(12,35,59,.12); backdrop-filter: blur(12px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 82px; gap: 2rem; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 9px; font-size: 1.05rem; font-weight: 600; letter-spacing: .07em; line-height: .85; }
.brand small { display: block; padding-top: 4px; font: 500 7px/1 var(--mono); letter-spacing: .19em; }
.brand-mark { position: relative; display: inline-flex; width: 28px; height: 29px; transform: rotate(45deg); }
.brand-mark i { position: absolute; display:block; width: 16px; height: 16px; border: 1.8px solid var(--ink); }
.brand-mark i:first-child { left: 0; top: 0; }
.brand-mark i:last-child { right: 0; bottom: 0; }
.brand-mark-light i { border-color: var(--lime); }
.desktop-nav { display: flex; align-items: center; gap: clamp(1rem, 1.75vw, 1.8rem); margin-left: auto; }
.desktop-nav a, .header-link { position: relative; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.desktop-nav a::after { content: ""; position: absolute; height: 1px; width: 0; left: 0; bottom: -6px; background: currentColor; transition: width .18s var(--ease-out); }
.desktop-nav a:hover::after, .desktop-nav .nav-active::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 1.25rem; }
.mobile-menu-button { display: none; background: transparent; border: 0; color: inherit; padding: .4rem; }
.mobile-nav { display: none; }

.hero { position: relative; min-height: min(850px, 100vh); display: flex; align-items: center; color: white; background: var(--ink-deep); overflow: hidden; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#0c2a27f7,#0c2a27d1 39%,#0c2a2738 66%,#0c2a270f); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25; background-image: radial-gradient(rgba(255,255,255,.32) .5px, transparent .5px); background-size: 5px 5px; mix-blend-mode: soft-light; }
.hero-content { position: relative; z-index: 1; padding-top: 11rem; padding-bottom: 9rem; max-width: 1280px; }
.hero-content > p { max-width: 620px; color: rgba(255,255,255,.78); font-size: clamp(1rem,1.4vw,1.2rem); line-height: 1.65; margin: 2rem 0 2.15rem; }
.hero-content h1 { max-width: 770px; margin: 1.3rem 0 0;color: #fff; }
.hero-bottom { position: absolute; z-index: 1; bottom: 2.1rem; left: 0; right: 0; display: flex; justify-content: space-between; align-items: end; gap: 2rem; color: rgba(255,255,255,.72); }
.trust-line { max-width: 570px; display: flex; gap: .65rem; align-items: center; font-size: .78rem; line-height: 1.4; }
.trust-dot { display: inline-block; flex-shrink: 0; height: 8px; width: 8px; background: var(--lime); border-radius: 50%; }
.hero-scroll { display: flex; flex-direction: column; align-items: end; gap: .55rem; font: 500 9px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.hero-scroll svg { animation: gentle-bob 1.8s ease-in-out infinite; }
.hero-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }

.section-kicker { margin-bottom: 2.2rem; color: var(--muted); font: 500 9px/1 var(--mono); letter-spacing: .16em; }
.intro-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 7rem; align-items: end; padding-bottom: 4rem; border-bottom: 1px solid var(--border); }
.intro-title h2 { margin: 0; }
.intro-copy { font-size: 1.04rem; line-height: 1.75; margin: 0 0 .25rem; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; }
.audience-card { position: relative; display: flex; min-height: 340px; padding: 2rem 2rem 1.8rem; overflow: hidden; transition: transform .25s var(--ease-out); }
.audience-card:hover { transform: translateY(-4px); }
.audience-card h3 { font-family: var(--display); font-size: clamp(2rem,3vw,3.2rem); font-weight: 500; line-height: 1; letter-spacing: -.045em; margin: 1rem 0;color:#fff;}
.audience-card p { max-width: 390px; line-height: 1.55; margin: 0; }
.card-eyebrow { font: 500 9px/1 var(--mono); letter-spacing: .17em; }
.employer-card { background: var(--ink); color: #fff; }
.employer-card .card-eyebrow { color: var(--lime); }
.employer-card p { color: rgba(255,255,255,.67); }
.candidate-card { background: var(--lime); color: var(--ink); }
.candidate-card h3 {color:#fff;}
.candidate-card p { color: rgba(12,35,59,.75); }
.circle-arrow { width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s var(--ease-out), background .2s var(--ease-out); }
.audience-card .circle-arrow { position: absolute; bottom: 1.65rem; right: 1.7rem; }
.audience-card:hover .circle-arrow, .solution-row:hover .circle-arrow { transform: rotate(45deg); }

.services-section { background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; gap: 4rem; align-items: end; margin-bottom: 3.6rem; }
.section-heading h2 { margin: 1.1rem 0 0; }
.heading-aside, .section-heading > p { max-width: 350px; }
.heading-aside p, .section-heading > p { line-height: 1.7; margin-bottom: 1.35rem; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.service-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 330px; padding: 1.6rem; background: var(--paper); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; transition: background .25s var(--ease-out), color .25s var(--ease-out); }
.service-card::before { content:""; position: absolute; width: 200px; height: 200px; background: var(--lime); border-radius: 50%; top: -175px; right: -175px; transition: transform .4s var(--ease-out); }
.service-card:hover { background: var(--ink); color: #fff !important; }
.service-card:hover::before { transform: translate(-55px,55px); }
.service-card-top { display:flex; justify-content:space-between; align-items:center; color: var(--muted); font: 500 10px var(--mono); }
.service-card h3 { font-family: var(--display); font-size: 1.75rem; font-weight: 500; margin: 0 0 .75rem; }
.service-card p { max-width: 240px; font-size: .91rem; line-height: 1.6; margin: 0; }
.service-card:hover h3{color:#fff !important;}
.service-card:hover p { color: rgba(255,255,255,.68); }
.service-card:hover .service-card-top{color:#fff !important;}
.service-arrow { position: absolute; right: 1.6rem; bottom: 1.5rem; transition: transform .2s var(--ease-out); }
.service-card:hover .service-arrow { transform: translate(3px,-3px); }

.partner-section { position: relative; background: var(--ink-deep); color: #fff; padding-block: clamp(5.4rem, 9vw, 9rem); }
.partner-section::before { content:""; position:absolute; left: 47%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.18); }
.partner-grid { display:grid; grid-template-columns: .94fr 1.06fr; gap: 6rem; }
.partner-title h2 { margin: 1.25rem 0 1.8rem; color:#fff;}
.partner-title p { color: rgba(255,255,255,.68); line-height: 1.7; max-width: 460px; margin-bottom: 2rem; }
.principles { display: grid; grid-template-columns: 1fr 1fr; }
.principle { padding: 1.7rem 1rem 2.2rem 1.6rem; border-bottom: 1px solid rgba(255,255,255,.15); border-left: 1px solid rgba(255,255,255,.15); }
.principle > span { display:block; color:var(--lime); font:500 9px var(--mono); letter-spacing:.12em; margin-bottom:3.2rem; }
.principle h3 { margin:0 0 .6rem; font-size:1rem;font-family: "Montserrat", Arial, sans-serif !important;color:#fff; }
.principle p { color:rgba(255,255,255,.62); font-size:.86rem; line-height:1.55; margin:0; }

.industry-layout { display:grid; grid-template-columns: .83fr 1.17fr; gap: 7rem; }
.industry-title h2 { margin:1.2rem 0 1.55rem; }
.industry-title p { max-width:365px; line-height:1.65; margin-bottom:1.75rem; }
.industry-list { border-top:1px solid var(--border); }
.industry-item { display:grid; grid-template-columns: 50px 1fr 25px; align-items:center; min-height:64px; border-bottom:1px solid var(--border); transition: background .18s var(--ease-out), padding .18s var(--ease-out); }
.industry-item:hover { background:var(--lime); padding-inline: .8rem; }
.industry-item > span { color:var(--muted); font:500 9px var(--mono); letter-spacing:.08em; }
.industry-item strong { font-size:1.02rem; font-weight:500; letter-spacing:-.015em; }

.candidate-feature { background: var(--sand); padding-block: clamp(4rem,6vw,6rem); }
.candidate-feature-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem,8vw,9rem); align-items:center; }
.candidate-photo-wrap { position:relative; max-width:500px; }
.candidate-photo { width:100%; aspect-ratio:4/4.65; object-fit:cover; display:block; }
.photo-note { position:absolute; display:flex; align-items:center; gap:.7rem; left:-1rem; bottom:1.6rem; max-width:220px; background:var(--ink); color:#fff; padding:.9rem 1rem; font-size:.75rem; line-height:1.35; box-shadow:0 12px 20px rgba(12,35,59,.2); }
.photo-note svg { color:var(--lime); flex-shrink:0; }
.candidate-feature-content h2 { margin:1.2rem 0 1.6rem; }
.candidate-feature-content > p { max-width:515px; font-size:1.03rem; line-height:1.7; margin-bottom:1.6rem; }
.candidate-checks { display:grid; gap:.65rem; margin-bottom:2rem; }
.candidate-checks span { display:flex; align-items:center; gap:.6rem; font-size:.86rem; font-weight:500; }
.candidate-checks svg { color:var(--ink); background:var(--lime); border-radius:50%; padding:2px; }

.insights-section { background:var(--paper); }
.compact-heading { align-items:flex-end; }
.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.insight-grid article { min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; padding:1.6rem; border:1px solid var(--border); border-right:0; transition: background .2s var(--ease-out), transform .2s var(--ease-out); }
.insight-grid article:last-child { border-right:1px solid var(--border); }
.insight-grid article:hover { transform:translateY(-4px); }
.insight-grid article > span, .article-meta { font:500 9px/1.3 var(--mono); letter-spacing:.11em; color:var(--muted); text-transform:uppercase; }
.insight-grid h3 { font-family:var(--display); font-size:1.75rem; font-weight:500; line-height:1.08; margin:1rem 0 .7rem; }
.insight-grid p { font-size:.9rem; line-height:1.55; margin:0 0 1.35rem; }
.insight-grid article a, .article-grid article a { display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.insight-accent { background:var(--lime); }
.insight-accent p, .insight-accent > span { color:rgba(12,35,59,.74); }

.closing-cta { position:relative; padding-block: clamp(6rem,10vw,10rem); background:var(--ink-deep); color:#fff; overflow:hidden; }
.closing-content { position:relative; z-index:1; max-width:860px; }
.closing-content h2 { margin:1.2rem 0 1.6rem;color:#fff; }
.closing-content p { max-width:570px; color:rgba(255,255,255,.7); font-size:1.05rem; line-height:1.65; margin-bottom:2rem; }
.closing-shape { position:absolute; border:1px solid rgba(201,165,93,.35); transform:rotate(45deg); }
.closing-shape-a { height:470px; width:470px; right:-45px; top:-220px; }
.closing-shape-b { height:220px; width:220px; right:21%; bottom:-120px; }

.page-hero { position:relative; min-height:610px; display:flex; align-items:flex-end; background:var(--cream); padding: 10rem 0 5.2rem; overflow:hidden; }
.page-hero::before { content:""; position:absolute; height:min(68vw,870px); width:min(68vw,870px); right:-13vw; top:-31vw; background:var(--lime); border-radius:50%; opacity:.9; }
.page-hero::after { content:""; position:absolute; height:22vw; width:22vw; right:13vw; top:9vw; background:transparent; border:1px solid rgba(12,35,59,.38); transform:rotate(45deg); }
.page-hero-dark { background:var(--ink-deep); color:#fff; }
.page-hero-dark::before { background:var(--lime); opacity:.3; }
.page-hero-dark::after { border-color:rgba(255,255,255,.35); }
.page-hero .container { position:relative; z-index:1; max-width:1280px; }
.page-hero h1 { max-width:900px; margin:1.4rem 0 1.6rem; font-size:clamp(3.55rem,6.15vw,6.5rem); }
.page-hero:not(.page-hero-dark) h1 em { color:var(--ink); }
.page-hero-dark h1 em { color:var(--lime); }
.page-hero > .container > p { max-width:675px; font-size:1.07rem; line-height:1.7; margin-bottom:2rem; }
.page-hero-dark p { color:rgba(255,255,255,.72); }
.page-hero-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.page-hero-index { position:absolute; z-index:1; right:2rem; bottom:2rem; color:var(--ink); opacity:.8; font:500 9px/1.3 var(--mono); letter-spacing:.16em; }
.page-hero-dark .page-hero-index { color:#fff; }

.text-grid { display:grid; grid-template-columns:80px 1.1fr .9fr; gap:2.2rem; align-items:end; }
.section-index { color:var(--muted); font:500 10px var(--mono); letter-spacing:.12em; }
.text-grid h2 { margin:1.1rem 0 0; }
.text-grid > p { max-width:420px; font-size:1.04rem; line-height:1.72; margin-bottom:.2rem; }
.needs-section, .candidate-process { background:var(--ink-deep); color:#fff; padding-block: clamp(5.4rem,8vw,8.5rem); }
.needs-section .section-heading { margin-bottom:2rem; }
.needs-section .section-heading > p, .candidate-process .section-heading > p { color:rgba(255,255,255,.68); line-height:1.65; }
.needs-list { border-top:1px solid rgba(255,255,255,.2); }
.need-item { display:grid; grid-template-columns: 64px 1fr 1.25fr 24px; gap:1.5rem; align-items:center; min-height:106px; border-bottom:1px solid rgba(255,255,255,.2); transition:padding .2s var(--ease-out), background .2s var(--ease-out); }
.need-item:hover { background:rgba(255,255,255,.06); padding-inline:1rem; }
.need-item > span { color:var(--lime); font:500 10px var(--mono); }
.need-item h3 { margin:0; }
.need-item p { margin:0; color:rgba(255,255,255,.65); font-size:.91rem; line-height:1.55; }
.process-layout, .values-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap: 8rem; }
.process-layout h2, .values-layout h2 { margin:1.2rem 0 1.5rem; }
.process-layout > div > p, .values-layout > div > p { max-width:405px; line-height:1.7; margin-bottom:1.7rem; }
.process-list { border-top:1px solid var(--border); }
.process-item { display:grid; grid-template-columns:64px 1fr; gap:1rem; padding:1.55rem 0; border-bottom:1px solid var(--border); }
.process-item > span { color:var(--muted); font:500 10px var(--mono); }
.process-item h3 { margin:0 0 .45rem; }
.process-item p { margin:0; font-size:.92rem; line-height:1.6; }
.quote-section { background:var(--lime); padding-block:clamp(5rem,8vw,8rem); }
.quote-section .container { max-width:1000px; }
.quote-section blockquote { margin:1.5rem 0 1.6rem; font-family:var(--display); font-size:clamp(2.1rem,4vw,4.4rem); font-weight:500; letter-spacing:-.04em; line-height:1.08; }
.quote-section p { color:rgba(12,35,59,.75); margin:0; }
.form-section { background:var(--paper); }
.form-section-green { background:var(--ink-deep); color:#fff; }
.form-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap: clamp(3rem,10vw,10rem); }
.form-layout h2 { margin:1.15rem 0 1.5rem; }
.form-layout > div > p { max-width:420px; font-size:1.03rem; line-height:1.7; }
.form-section-green .form-layout > div > p { color:rgba(255,255,255,.68); }
.contact-note, .contact-detail { display:flex; gap:.65rem; align-items:flex-start; max-width:340px; margin-top:1.8rem; color:var(--muted); font-size:.82rem; line-height:1.5; }
.contact-note svg, .contact-detail svg { color:var(--ink); flex-shrink:0; }
.form-section-green .contact-note { color:rgba(255,255,255,.67); }
.form-section-green .contact-note svg { color:var(--lime); }
.contact-form { display:grid; gap:1rem; background:#fff; padding:1.75rem; box-shadow:0 20px 50px rgba(12,35,59,.08); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-form label { display:grid; gap:.45rem; color:var(--ink); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.contact-form input, .contact-form textarea, .contact-form select { width:100%; border:1px solid rgba(12,35,59,.24); border-radius:0; background:#fff; color:var(--ink); padding:.8rem .82rem; font:400 .87rem "Montserrat", sans-serif; letter-spacing:0; text-transform:none; outline:none; transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(201,165,93,.55); }
.contact-form textarea { resize:vertical; min-height:100px; }
.contact-form .consent { display:flex; grid-template-columns:none; grid-auto-flow:column; align-items:start; justify-content:start; gap:.65rem; color:var(--muted); font:400 .73rem/1.45 "Montserrat",sans-serif; letter-spacing:0; text-transform:none; }
.contact-form .consent input { width:14px; height:14px; margin-top:2px; accent-color:var(--ink); padding:0; }
.contact-form .button { justify-self:start; margin-top:.25rem; }

.solution-page { background:var(--paper); }
.solutions-list { border-top:1px solid var(--border); }
.solution-row { display:grid; grid-template-columns:70px 1.1fr .9fr 50px; gap:1.6rem; align-items:center; min-height:135px; border-bottom:1px solid var(--border); transition:background .2s var(--ease-out), padding .2s var(--ease-out); }
.solution-row:hover { background:var(--lime); padding-inline:1rem; }
.solution-row > span:first-child { color:var(--muted); font:500 10px var(--mono); }
.solution-row h3 { font-family:var(--display); font-size:1.8rem; font-weight:500; margin:0; }
.solution-row p { margin:0; font-size:.89rem; line-height:1.55; }
.compact-cta { padding-block:6rem; }

.industry-page { background:var(--paper); }
.industry-card-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--border); border-left:1px solid var(--border); }
.industry-card { position:relative; min-height:220px; padding:1.5rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); transition:background .2s var(--ease-out); }
.industry-card:hover { background:var(--ink); color:#fff; }
.industry-card > span { color:var(--muted); font:500 9px var(--mono); letter-spacing:.1em; }
.industry-card h3 { margin:2.8rem 0 .6rem; font-size:1.04rem; }
.industry-card p { max-width:390px; margin:0; font-size:.86rem; line-height:1.55; }
.industry-card:hover p { color:rgba(255,255,255,.68); }
.industry-card > svg { position:absolute; right:1.5rem; bottom:1.5rem; }
.industry-close { font-size:1.03rem; line-height:1.7; max-width:650px; margin:3rem 0 0; }

.candidate-hero { position:relative; min-height:680px; display:flex; align-items:flex-end; padding-block: 9rem 5rem; color:#fff; background:var(--ink-deep); }
.candidate-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.candidate-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,27,45,.98) 0%,rgba(7,27,45,.76) 43%,rgba(7,27,45,.25) 100%); }
.candidate-hero .container { position:relative; z-index:1; }
.candidate-hero h1 { margin:1.3rem 0 1.4rem; }
.candidate-hero p { max-width:600px; color:rgba(255,255,255,.75); font-size:1.06rem; line-height:1.7; margin-bottom:2rem; }
.candidate-step-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.2); }
.candidate-step-grid > div { padding:1.5rem 1.2rem 1.8rem; min-height:235px; border-right:1px solid rgba(255,255,255,.16); }
.candidate-step-grid > div:first-child { padding-left:0; }
.candidate-step-grid > div:last-child { border:0; }
.candidate-step-grid span { display:block; color:var(--lime); font:500 10px var(--mono); margin-bottom:3rem; }
.candidate-step-grid h3 { margin:0 0 .6rem; font-size:1.02rem; }
.candidate-step-grid p { color:rgba(255,255,255,.65); font-size:.86rem; line-height:1.55; margin:0; }
.candidate-resources { background:var(--sand); }
.candidate-resources h2 { margin:1.2rem 0 3rem; }
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.resource-grid > a { display:flex; flex-direction:column; min-height:260px; padding:1.4rem; background:var(--paper); transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.resource-grid > a:hover { transform:translateY(-4px); box-shadow:0 12px 22px rgba(12,35,59,.13); }
.resource-grid svg { color:var(--ink); }
.resource-grid h3 { font-family:var(--display); font-size:1.7rem; font-weight:500; margin:3rem 0 .7rem; }
.resource-grid p { font-size:.88rem; line-height:1.55; margin:0 0 1.3rem; }
.resource-grid .text-link { margin-top:auto; align-self:flex-start; font-size:.66rem; }

.about-purpose { background:var(--lime); padding-block:clamp(5rem,8vw,8rem); }
.about-purpose-grid { display:grid; grid-template-columns:1fr 1fr; gap:8rem; align-items:end; }
.about-purpose h2 { margin:1.1rem 0 0; }
.about-purpose h2 em { color:var(--ink); }
.about-purpose p { max-width:500px; color:rgba(12,35,59,.78); font:500 clamp(1.2rem,2vw,1.72rem)/1.45 var(--display); letter-spacing:-.02em; margin:0; }
.values-list { border-top:1px solid var(--border); }
.values-list > div { display:grid; grid-template-columns:64px 1fr 1.2fr; gap:1.2rem; align-items:center; padding:1.2rem 0; border-bottom:1px solid var(--border); }
.values-list span { color:var(--muted); font:500 10px var(--mono); }
.values-list h3 { margin:0; font-size:1rem; }
.values-list p { margin:0; font-size:.87rem; line-height:1.55; }

.filter-row { display:flex; gap:1.3rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; overflow:auto; white-space:nowrap; color:var(--muted); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.filter-row span:first-child { color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:1.24rem; margin-bottom:-1.25rem; }
.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.article-grid article { display:flex; flex-direction:column; min-height:310px; padding:1.5rem; background:#fff; border:1px solid transparent; transition:transform .2s var(--ease-out), border-color .2s var(--ease-out); }
.article-grid article:hover { transform:translateY(-3px); border-color:var(--ink); }
.article-grid .article-featured { grid-column:span 2; min-height:390px; background:var(--ink); color:#fff; }
.article-meta { display:flex; gap:.55rem; }
.article-grid h2 { font-family:var(--display); font-size:clamp(1.75rem,2.6vw,2.7rem); font-weight:500; line-height:1.05; margin:2.2rem 0 .85rem; }
.article-grid p { font-size:.9rem; line-height:1.6; margin-bottom:1.7rem; }
.article-grid article a { margin-top:auto; }
.article-featured .article-meta, .article-featured p { color:rgba(255,255,255,.65); }

.contact-options { background:var(--sand); }
.contact-options .container { display:grid; grid-template-columns:repeat(3,1fr); }
.contact-options a { position:relative; min-height:275px; padding:1.5rem; border-right:1px solid rgba(12,35,59,.17); transition:background .2s var(--ease-out); }
.contact-options a:first-child { border-left:1px solid rgba(12,35,59,.17); }
.contact-options a:hover { background:var(--lime); }
.contact-options a > span { display:block; font-family:var(--display); font-size:1.75rem; font-weight:500; margin:2.8rem 0 .6rem; }
.contact-options p { font-size:.88rem; max-width:300px; line-height:1.55; margin:0; }
.contact-options a > svg:last-child { position:absolute; bottom:1.4rem; right:1.4rem; }

.site-footer { background:#071b2d; color:#fff; }
.footer-main { display:grid; grid-template-columns:.9fr 1.1fr; gap:6rem; padding-top:5rem; padding-bottom:4rem; }
.footer-intro p { max-width:330px; color:rgba(255,255,255,.66); font-size:.95rem; line-height:1.65; margin:1.45rem 0 1.5rem; }
.footer-email { display:inline-flex; gap:.5rem; color:var(--lime); align-items:center; font-size:.84rem; font-weight:600; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.footer-links h3 { color:var(--lime); font:500 9px var(--mono); letter-spacing:.16em; text-transform:uppercase; margin:0 0 1.2rem; }
.footer-links a { display:block; color:rgba(255,255,255,.73); font-size:.83rem; margin-bottom:.72rem; transition:color .18s var(--ease-out); }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:space-between; padding-block:1.25rem; color:rgba(255,255,255,.5); font:400 9px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.footer-bottom > div { display:flex; gap:1.4rem; }

@keyframes gentle-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-content, .page-hero .container, .candidate-hero .container { animation: fade-up .65s var(--ease-out) both; }
  .service-card, .industry-card, .insight-grid article { animation: fade-up .6s var(--ease-out) both; }
  .service-card:nth-child(2), .industry-card:nth-child(2), .insight-grid article:nth-child(2) { animation-delay:.06s; }
  .service-card:nth-child(3), .industry-card:nth-child(3), .insight-grid article:nth-child(3) { animation-delay:.12s; }
  .service-card:nth-child(4), .industry-card:nth-child(4) { animation-delay:.18s; }
  @keyframes fade-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
}

@media (max-width: 960px) {
  .desktop-nav, .header-actions { display:none; }
  .mobile-menu-button { display:block; }
  .site-header-scrolled .brand > span:last-child { color:var(--ink) !important; }
  .mobile-nav { display:block; background:var(--paper); color:var(--ink); box-shadow:0 15px 28px rgba(12,35,59,.15); }
  .mobile-nav-inner { display:grid; padding-block:1.5rem 1.8rem; }
  .mobile-nav a:not(.button) { display:flex; align-items:center; justify-content:space-between; padding:.85rem 0; border-bottom:1px solid var(--border); font-family:var(--display); font-size:1.8rem; }
  .mobile-nav-ctas { display:flex; gap:.75rem; padding-top:1.5rem; }
  .mobile-nav-ctas .button { flex:1; }
  .hero { min-height:760px; }
  .hero-shade {background: linear-gradient(90deg, #0c2a27f7, #0c2a27d1 39%, #0c2a2738 66%, #0c2a270f); }
  .intro-grid, .industry-layout, .partner-grid, .candidate-feature-grid, .process-layout, .values-layout, .form-layout { grid-template-columns:1fr; gap:3rem; }
  .text-grid { grid-template-columns:50px 1fr; gap:1rem 2rem; }
  .text-grid > p { grid-column:2; }
  .partner-section::before { display:none; }
  .principles { grid-template-columns:1fr 1fr; }
  .partner-grid { gap:3rem; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .candidate-photo-wrap { max-width:480px; }
  .industry-layout { gap:3rem; }
  .candidate-feature-grid { gap:3rem; }
  .candidate-feature-content { order:-1; }
  .candidate-photo-wrap { margin:auto; }
  .candidate-step-grid { grid-template-columns:1fr 1fr; }
  .candidate-step-grid > div:nth-child(3) { padding-left:0; }
  .resource-grid { grid-template-columns:1fr 1fr 1fr; }
  .about-purpose-grid { gap:3rem; }
  .footer-main { grid-template-columns:1fr; gap:3rem; }
}

@media (max-width: 640px) {
  .container { padding-inline:1.15rem; }
  .header-inner { height:70px; }
  .brand { font-size:.93rem; }
  .brand-mark { transform:scale(.82) rotate(45deg); margin-right:-2px; }
  .hero { min-height:760px; align-items:flex-end; }
  .hero-image { object-position:62% center; }
  .hero-shade { background:linear-gradient(90deg,rgba(7,27,45,.96) 0%,rgba(7,27,45,.85) 62%,rgba(7,27,45,.32) 100%); }
  .hero-content { padding-top:7rem; padding-bottom:7.5rem; }
  h1 { font-size:clamp(3.2rem,14vw,4.5rem); }
  h2 { font-size:clamp(2.65rem,12vw,3.6rem); }
  .hero-content > p { font-size:.98rem; margin:1.4rem 0 1.7rem; }
  .hero-bottom { bottom:1.25rem; }
  .trust-line { font-size:.68rem; max-width:260px; }
  .hero-scroll span { display:none; }
  .intro-grid { padding-bottom:2.3rem; }
  .audience-grid, .service-grid, .insight-grid, .industry-card-grid, .article-grid, .contact-options .container { grid-template-columns:1fr; }
  .audience-card { min-height:270px; }
  .service-card { min-height:265px; }
  .service-grid { border-left:1px solid var(--border); }
  .section-heading { display:block; margin-bottom:2.25rem; }
  .heading-aside, .section-heading > p { margin-top:1.3rem; }
  .partner-grid, .industry-layout { gap:2.5rem; }
  .principles { grid-template-columns:1fr; }
  .principle { border-left:0; padding-left:0; padding-block:1.35rem; }
  .principle > span { margin-bottom:1.5rem; }
  .industry-item { min-height:59px; grid-template-columns:38px 1fr 25px; }
  .photo-note { left:0; bottom:1rem; }
  .need-item { grid-template-columns:35px 1fr 22px; gap:.7rem; padding-block:1.15rem; align-items:start; }
  .need-item p { grid-column:2 / -1; }
  .need-item > svg { grid-column:3; grid-row:1; }
  .text-grid { grid-template-columns:36px 1fr; gap:1.1rem; }
  .text-grid > p { grid-column:1 / -1; }
  .process-layout, .values-layout, .form-layout { gap:2.6rem; }
  .process-item { grid-template-columns:42px 1fr; }
  .quote-section blockquote { font-size:2rem; }
  .form-row { grid-template-columns:1fr; gap:1rem; }
  .contact-form { padding:1.1rem; }
  .page-hero { min-height:600px; padding-block:8.5rem 3.8rem; }
  .page-hero::before { height:340px; width:340px; top:-50px; right:-180px; }
  .page-hero::after { display:none; }
  .page-hero h1 { font-size:clamp(3rem,12vw,4rem); }
  .page-hero > .container > p { font-size:.98rem; }
  .page-hero-index { display:none; }
  .solutions-list .solution-row { grid-template-columns:38px 1fr 34px; gap:.6rem; padding-block:1.15rem; min-height:unset; }
  .solution-row p { grid-column:2 / -1; }
  .solution-row .circle-arrow { grid-column:3; grid-row:1; width:34px; height:34px; }
  .industry-card { min-height:195px; }
  .candidate-hero { min-height:680px; padding-block:7.7rem 4rem; }
  .candidate-hero > img { object-position:65% center; }
  .candidate-step-grid { grid-template-columns:1fr; }
  .candidate-step-grid > div, .candidate-step-grid > div:first-child, .candidate-step-grid > div:nth-child(3) { min-height:unset; border-right:0; border-bottom:1px solid rgba(255,255,255,.16); padding:1.2rem 0; }
  .candidate-step-grid > div:last-child { border-bottom:0; }
  .candidate-step-grid span { margin-bottom:1.5rem; }
  .resource-grid { grid-template-columns:1fr; }
  .resource-grid > a { min-height:220px; }
  .resource-grid h3 { margin-top:2rem; }
  .about-purpose-grid { grid-template-columns:1fr; }
  .values-list > div { grid-template-columns:35px 1fr; gap:.7rem; }
  .values-list p { grid-column:2; }
  .article-grid .article-featured { grid-column:auto; min-height:330px; }
  .contact-options a, .contact-options a:first-child { border-left:0; border-right:0; border-bottom:1px solid rgba(12,35,59,.17); min-height:205px; }
  .contact-options a > span { margin-top:1.5rem; }
  .footer-main { padding-top:3.5rem; }
  .footer-links { grid-template-columns:1fr 1fr; gap:2rem 1rem; }
  .footer-bottom { align-items:start; flex-direction:column; gap:.85rem; }
}

.not-found { position:relative; min-height:82vh; display:flex; align-items:center; padding-block:10rem 5rem; background:var(--cream); overflow:hidden; }
.not-found::after { content:""; position:absolute; width:420px; height:420px; border:1px solid rgba(12,35,59,.2); transform:rotate(45deg); right:-160px; top:80px; }
.not-found .container { position:relative; z-index:1; }
.not-found-number { color:var(--lime); font:500 clamp(4rem,10vw,10rem)/.8 var(--display); letter-spacing:-.07em; margin:2.4rem 0 -.3rem; }
.not-found h1 { margin:0 0 1.5rem; }
.not-found h1 em { color:var(--ink); }
.not-found p { max-width:520px; font-size:1.04rem; line-height:1.7; margin-bottom:2rem; }

.candidate-hero-overlay { background:linear-gradient(90deg,rgba(7,27,45,.94) 0%,rgba(7,27,45,.64) 47%,rgba(7,27,45,.12) 100%); }
@media (max-width: 640px) { .candidate-hero-overlay { background:linear-gradient(90deg,rgba(7,27,45,.96) 0%,rgba(7,27,45,.78) 65%,rgba(7,27,45,.4) 100%); } }

/* ==========================================================================
   ASTRA INTEGRATION  (added for the WordPress clone — not in the original)
   The Stayco sections are full-bleed and manage their own width via .container.
   Neutralise Astra's content container/padding on the cloned templates so the
   hero, dark bands and closing CTA stretch edge-to-edge.
   Also set this page to "Full Width / Stretched" in the Astra page settings.
   ========================================================================== */
.page-template-home-page #content .ast-container,
.page-template-home-page .ast-container,
.page-template-home-page .ast-container-div { max-width: 100%; padding-left: 0; padding-right: 0; }
.page-template-home-page #primary,
.page-template-home-page .site-content .ast-container > #primary { margin: 0; padding: 0; }
.page-template-home-page #content { padding: 0; }
.main-container { width: 100%; }

/* ==========================================================================
   HEADER / FOOTER — static-conversion helpers (added for the WordPress clone)
   In the original React build the mobile nav was only rendered while open, and
   the menu/close icons were swapped in JS. Here both are always in the DOM, so
   these rules gate them off .is-open / [aria-expanded] instead.
   ========================================================================== */

/* Mobile nav: always in the DOM, shown only when toggled open */
.mobile-nav { display: none; }
@media (max-width: 960px) {
  .mobile-nav { display: none; }
  .mobile-nav.is-open { display: block; }
}

/* Mobile menu button: show the menu icon by default, the X when open */
.mobile-menu-button .icon-close { display: none; }
.mobile-menu-button[aria-expanded="true"] .icon-open { display: none; }
.mobile-menu-button[aria-expanded="true"] .icon-close { display: block; }

/* Lock body scroll while the mobile menu is open */
body.stayco-nav-open { overflow: hidden; }

/* ==========================================================================
   INNER-PAGE DARK SECTIONS — white headings (Astra overrides heading colours)
   Same fix you applied on the home page, extended to the inner-page dark bands.
   ========================================================================== */
.page-hero-dark h1,
.needs-section h2, .needs-section .need-item h3,
.candidate-process h2, .candidate-step-grid h3,
.candidate-hero h1,
.form-section-green h2,
.article-featured h2 { color: #fff; }

/* Full-bleed on all Stayco templates (see stayco_body_class in functions.php) */
.stayco-fullwidth #content .ast-container,
.stayco-fullwidth .ast-container,
.stayco-fullwidth .ast-container-div { max-width: 100%; padding-left: 0; padding-right: 0; }
.stayco-fullwidth #primary,
.stayco-fullwidth .site-content .ast-container > #primary { margin: 0; padding: 0; }
.stayco-fullwidth #content { padding: 0; }

/* ==========================================================================
   CONTACT FORM 7 output — align CF7 wrappers with the .contact-form design
   ========================================================================== */
.wpcf7-form { margin: 0; }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form input[type="file"] { padding: .6rem .82rem; background: var(--paper); }
.wpcf7-response-output { margin: 1rem 0 0 !important; border: 1px solid var(--border); border-radius: 0; padding: .7rem .9rem; font: 400 .8rem/1.45 "Montserrat", Arial, sans-serif; }
.wpcf7-not-valid-tip { color: #b3261e; font: 500 .72rem/1.3 "Montserrat", Arial, sans-serif; margin-top: .35rem; }
.wpcf7-spinner { margin: 0 0 0 .6rem; }

/* ==========================================================================
   BLOG / PRESS-RELEASE — archives, pagination, and single-post body
   ========================================================================== */
.stayco-pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: var(--space-8); }
.stayco-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .8rem; border: 1px solid var(--border); font: 500 .9rem/1 "Montserrat", Arial, sans-serif; color: var(--ink); }
.stayco-pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.stayco-pagination a.page-numbers:hover { background: var(--lime); border-color: var(--lime); color: var(--ink-deep); }

.single-stayco .post-featured { width: 100%; max-height: 520px; object-fit: cover; margin: var(--space-7) 0 0; }
.single-stayco .article-body { max-width: 760px; margin: var(--space-8) auto 0; font-family: var(--mono); font-size: 1.0625rem; line-height: 1.75; color: var(--ink); }
.single-stayco .article-body > * + * { margin-top: 1.4rem; }
.single-stayco .article-body em { font-style: italic; color: inherit; }
.single-stayco .article-body strong { font-weight: 700; }
.single-stayco .article-body h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 2.4rem; }
.single-stayco .article-body h3 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; margin-top: 2rem; }
.single-stayco .article-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.single-stayco .article-body ul, .single-stayco .article-body ol { padding-left: 1.25rem; }
.single-stayco .article-body li { margin-top: .5rem; list-style: disc; }
.single-stayco .article-body ol li { list-style: decimal; }
.single-stayco .article-body blockquote { border-left: 3px solid var(--lime); padding-left: 1.25rem; font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--ink); }
.single-stayco .article-body img { height: auto; }
.single-stayco .post-back { max-width: 760px; margin: var(--space-7) auto 0; }

/* ==========================================================================
   HEADER — always solid + readable (replaces transparent/scroll-to-solid)
   The nav/logo were white on transparent, so they vanished over light
   sections. Solid cream + navy from the top works on every page.
   ========================================================================== */
.site-header { background: var(--cream); color: var(--ink); border-bottom: 1px solid var(--border); box-shadow: none; }
.site-header .brand-mark i { border-color: var(--ink); }
.site-header .brand > span:last-child { color: var(--ink); }

/* ==========================================================================
   SOLUTION LANDING PAGES — FAQ accordion + benefit grid
   ========================================================================== */
.faq-layout { display: grid; grid-template-columns: 0.85fr 1.35fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.faq-intro { position: sticky; top: 110px; }
.faq-intro .text-link { margin-top: var(--space-5); }
.faq-list { display: flex; flex-direction: column; gap: .85rem; }
.faq-item { border: 1px solid var(--border); background: var(--paper); transition: background .22s var(--ease-out), border-color .22s var(--ease-out); }
.faq-item[open] { background: var(--sand); border-color: var(--ink); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.3rem 1.5rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { display: flex; align-items: baseline; gap: 1rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.25; color: var(--ink); }
.faq-num { flex-shrink: 0; font: 500 .7rem/1 var(--mono); letter-spacing: .12em; color: var(--lime); }
.faq-toggle { position: relative; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--ink); border-radius: 999px; transition: background .22s var(--ease-out), border-color .22s var(--ease-out); }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.6px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s var(--ease-out), background .22s var(--ease-out); }
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-toggle { background: var(--lime); border-color: var(--lime); }
.faq-item[open] .faq-toggle::before, .faq-item[open] .faq-toggle::after { background: var(--ink-deep); }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 1.5rem 1.5rem 3.4rem; }
.faq-a p { margin: 0; max-width: 60ch; color: var(--muted); font-size: 1rem; line-height: 1.75; }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; } .faq-intro { position: static; } .faq-a { padding-left: 1.5rem; } }

.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: var(--space-7); }
.benefit-grid > div { background: var(--paper); padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; gap: .9rem; }
.benefit-grid svg { color: var(--ink); }
.benefit-grid h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.benefit-grid p { color: var(--muted); font-size: .96rem; line-height: 1.65; }
@media (max-width: 900px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefit-grid { grid-template-columns: 1fr; } }

.solution-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-6); }
.solution-tags span { border: 1px solid var(--border); padding: .55rem 1.1rem; font: 500 .8rem/1 var(--mono); letter-spacing: .04em; color: var(--ink); }

/* ==========================================================================
   HEADER — Solutions dropdown (desktop) + subnav (mobile)
   ========================================================================== */
.nav-dropdown { position: relative; display: inline-flex; }
.desktop-nav .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { transform: rotate(90deg); transition: transform .2s var(--ease-out); }
.nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(-90deg); }

.dropdown-panel { position: absolute; top: 100%; left: 0; padding-top: 16px; min-width: 250px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); z-index: 60; }
.nav-dropdown:hover .dropdown-panel, .nav-dropdown:focus-within .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-inner { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--border); box-shadow: 0 14px 36px rgba(12,35,59,.12); padding: .5rem; }
.desktop-nav .dropdown-inner a { padding: .72rem .95rem; font: 500 .8rem/1.2 var(--mono); letter-spacing: .02em; text-transform: none; opacity: 1; white-space: nowrap; }
.desktop-nav .dropdown-inner a::after { display: none; }
.desktop-nav .dropdown-inner a:hover { background: var(--sand); }

/* Mobile: solutions listed under the Solutions link */
.mobile-subnav { display: flex; flex-direction: column; margin: .1rem 0 .6rem 1.1rem; padding-left: 1rem; border-left: 1px solid var(--border); }
.mobile-subnav a { padding: .5rem 0; font-size: .95rem; color: var(--muted); }