/*
 Theme Name:   Stayco Services Child
 Theme URI:    https://staycoservices.com
 Description:  Astra child theme for Stayco Services — luxury hospitality staffing, UAE.
 Author:       Stayco Services
 Author URI:   https://staycoservices.com
 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
*/
.ast-primary-header-bar .site-primary-header-wrap.ast-container{display:none;}
@media screen and (min-width: 921px) {.ast-theme-transparent-header #masthead{position:inherit;}}
.page .site-content .ast-container{margin-top: -26px;margin-bottom: -26px;}
ol, ul{margin:inherit;}
.site-logo-img .transparent-custom-logo img, .ast-theme-transparent-header .site-logo-img img{filter: none;}
.ast-mobile-header-wrap .ast-primary-header-bar, .ast-primary-header-bar .site-primary-header-wrap {min-height: 90px;}
.ast-primary-header-bar.main-header-bar{padding-block:0;}
.footer-brand img{width:50%;}


/* ==========================================================================
   1. ASTRA OVERRIDES
   ========================================================================== */
 
.page .site-content .ast-container,
.page .site-content .ast-container-div { max-width: none; padding: 0; margin: 0; }
#content.site-content { padding: 0; }
 
.ast-theme-transparent-header #masthead { position: absolute; inset: 0 0 auto 0; }
body.is-scrolled .ast-theme-transparent-header #masthead {
    position: fixed;
    background: #fff;
    box-shadow: 0 1px 0 var(--line);
}
 
.site-logo-img .transparent-custom-logo img,
.ast-theme-transparent-header .site-logo-img img { filter: none; }
.ast-primary-header-bar .site-primary-header-wrap { min-height: 92px; }
.ast-primary-header-bar.main-header-bar { padding-block: 0; }
 
ol, ul { margin: inherit; }
 
 
/* ==========================================================================
   2. TOKENS
   ========================================================================== */
 
:root {
    --navy:      #1A2B4A;
    --navy-deep: #12203A;
    --gold:      #C9A84C;
    --white:     #FFFFFF;
 
    --ink:       #333333;
    /*--ink-2:     rgba(51, 51, 51, 0.68);*/
    --ink-2:     rgb(51 51 51 / 94%);
    --ink-3:     rgb(51 51 51 / 82%);
 
    --on-dark:   #F5F0E8;
    --on-dark-2: rgba(245, 240, 232, 0.66);
    --on-dark-3: rgba(245, 240, 232, 0.38);
 
    --line:      rgba(26, 43, 74, 0.12);
    --line-dark: rgba(245, 240, 232, 0.16);
 
    --display: 'Cormorant Garamond', Georgia, serif;
    --body:    'Montserrat', system-ui, sans-serif;
 
    --fs-h1:    clamp(3.3rem, 4.3vw, 4.375rem);
    --fs-h2:    clamp(2.5rem, 3.6vw, 3.5rem);
    --fs-h3:    clamp(1.5rem, 2.2vw, 2.125rem);
    --fs-h4:    clamp(1.1875rem, 1.6vw, 1.5rem);
    --fs-count: clamp(4.5rem, 11vw, 10rem);
    --fs-small: 0.9375rem;
    --fs-cap:   0.85rem;
    --fs-label: 0.625rem;
 
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
 
    --section:    clamp(5.5rem, 10vw, 9.5rem);
    --section-sm: clamp(3.5rem, 6vw, 5.5rem);
 
    --max: 1360px;
    --px:  clamp(1.25rem, 5vw, 4.5rem);
    --edge: max(var(--px), calc((100vw - var(--max)) / 2));
 
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	--anim-dur:    1000ms;
    --anim-dur-lg: 1500ms;
    --anim-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
    --anim-step:   90ms;   /* stagger between siblings */

}
 
 
/* ==========================================================================
   3. BASE
   ========================================================================== */
 
*, *::before, *::after { box-sizing: border-box; }
 
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
 
body {
    margin: 0;
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
}
 
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
 
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 300;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: inherit;
}
 
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em, i, cite, blockquote { font-style: normal; }
 
::selection { background: var(--gold); color: var(--navy-deep); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
 
 
/* ==========================================================================
   4. SHARED
   ========================================================================== */
 
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--px); }
 
/* Used twice on the page only: Services and The house. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--s-5);
}
.eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: var(--gold); flex: none; }
 
.display { font-family: var(--display); font-size: var(--fs-h2); color: var(--navy); }
.display.light { color: var(--on-dark); }
 
.lede { font-size: 1.0625rem; line-height: 1.9; color: var(--ink-2); max-width: 46ch; }
.lede.light { color: var(--on-dark-2); }
 
.btn {
    display: inline-block;
    font-size: var(--fs-cap);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 1.25rem 2.5rem;
    border: 1px solid transparent;
    transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn-gold { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.btn-gold:hover { background: var(--navy); color: var(--on-dark); border-color: var(--navy); }
.btn-line { color: var(--navy); border-color: var(--line); }
.btn-line:hover { border-color: var(--navy); }
 
.section-head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s-6);
    align-items: end;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.section-head > div:first-child { grid-column: 1 / span 6; }
.section-head .lede { grid-column: 8 / span 5; }
 
/* Applied to four blocks only, not every element on the page. */
.reveal { opacity: 0; transform: translateY(1.5rem); }
.reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
 
 
/* ==========================================================================
   5. HEADER MENU
   ========================================================================== */
 
#masthead { z-index: 100; }
.ast-theme-transparent-header #masthead,
.ast-theme-transparent-header .ast-primary-header-bar {
    background: transparent;
    transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
 
.main-header-menu .menu-link {
    font-family: var(--body);
    font-size: var(--fs-cap);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link { color: var(--navy); }
 
/* Last primary menu item = "Request staff". Keep it last in Appearance > Menus. */
.main-header-menu > .menu-item:last-child > .menu-link {
    background: var(--navy);
    color: var(--on-dark) !important;
    padding: 0.875rem 1.75rem !important;
}
.main-header-menu > .menu-item:last-child > .menu-link:hover { background: var(--gold); color: var(--navy-deep) !important; }
 
/* Mobile drawer built by custom.js */
.fk-nav-toggle span { background: var(--navy) !important; }
.fk-mobile-menu { background: var(--white) !important; }
.fk-mobile-menu .fk-ml { font-family: var(--display) !important; color: var(--navy) !important; }
.fk-mobile-cta {
    background: var(--navy) !important;
    color: var(--on-dark) !important;
    border-radius: 0 !important;
    font-family: var(--body) !important;
    font-size: var(--fs-label) !important;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
 
 
/* ==========================================================================
   6. HERO
   ========================================================================== */
 
.hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--white);
}
 
.hero-content {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    padding: clamp(8rem, 14vw, 11rem) clamp(3rem, 6vw, 6rem) var(--s-8) var(--edge);
}
.hero-title { font-size: var(--fs-h1); line-height: 1.04; color: var(--navy); margin-bottom: var(--s-6);font-weight:500; }
.hero-title span { display: block; }
.hero-title .accent { color: var(--gold); }
.hero-lede { margin-bottom: var(--s-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }
 
.hero-figure { position: relative; overflow: hidden; background: var(--navy-deep); }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
 
 
/* ==========================================================================
   7. SERVICES
   ========================================================================== */
 
.services { padding: var(--section) 0 var(--section-sm); background: var(--white); }
.services-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 1.6vw, 1.75rem); }
 
.svc {
    position: relative;
    display: block;
    min-height: clamp(20rem, 30vw, 28rem);
    overflow: hidden;
    background: var(--navy-deep);
}
.svc:nth-child(6n+1), .svc:nth-child(6n+4), .svc:nth-child(6n+5) { grid-column: span 7; }
.svc:nth-child(6n+2), .svc:nth-child(6n+3), .svc:nth-child(6n+6) { grid-column: span 5; }
 
.svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18,32,58,.92) 0%, rgba(18,32,58,.55) 42%, rgba(18,32,58,.12) 100%);
    transition: background 0.6s var(--ease);
}
.svc:hover::after { background: linear-gradient(to top, rgba(18,32,58,.95) 0%, rgba(18,32,58,.72) 52%, rgba(18,32,58,.3) 100%); }
 
.svc-body {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    color: var(--on-dark);
}
.svc-num { font-size: var(--fs-label); letter-spacing: 0.28em; color: var(--gold); margin-bottom: var(--s-4); }
.svc-name {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.12;
    margin-bottom: var(--s-3);
    transition: color 0.4s var(--ease);
}
.svc:hover .svc-name { color: var(--gold); }
.svc-roles { font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--on-dark-2); line-height: 1.7; }
 
.services-note {
    margin-top: var(--s-6);
    color: var(--ink-3);
    font-size: 1.125rem;
    line-height: 1.85;
}
.services-note strong { color: var(--gold); font-weight: 500; }
 
 
/* ==========================================================================
   8. THE HOUSE
   ========================================================================== */
 
.about { padding: var(--section) 0; background: var(--white); }
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
 
.about-media { grid-column: 1 / span 6; margin: 0; }
.about-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
 
.about-body { grid-column: 7 / span 6; }
.about-body h2 { margin-bottom: var(--s-6); }
.about-body p { margin-bottom: 1.2em; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.95; }
.about-close {
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.5;
    color: var(--navy) !important;
}
 
/* One figure carries the weight; the rest is a supporting line. */
.count-block {
    display: flex;
    align-items: flex-end;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-top: clamp(3.5rem, 6vw, 5.5rem);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
}
.count-num {
    font-family: var(--display);
    font-weight: 300;
    font-size: var(--fs-count) !important;
    line-height: 0.82;
    letter-spacing: -0.03em;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    flex: none;
}
.count-num sup { font-size: 0.34em; vertical-align: super; color: var(--gold); }
.count-side { padding-bottom: 0.5rem; }
.count-label {
    font-family: var(--display);
    font-size: var(--fs-h4) !important;
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: var(--s-3);
}
.count-sub { font-size: 1.1rem; letter-spacing: 0.08em; color: var(--ink-3); }
 
 
/* ==========================================================================
   9. METHOD
   ========================================================================== */
 
.method { position: relative; padding: var(--section) 0; background: var(--navy); color: var(--on-dark); overflow: hidden; }
.method-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.2; }
.method-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--navy) 8%, rgba(26,43,74,.5) 100%); }
 
.method-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
.method-aside { grid-column: 1 / span 5; position: sticky; top: 8rem; align-self: start; }
.method-aside .lede { margin-top: var(--s-6); }
.method-body { grid-column: 7 / span 6; }
 
.method-item { padding: var(--s-7) 0; border-top: 1px solid var(--line-dark); }
.method-item:first-child { border-top: 0; padding-top: 0; }
.method-item h3 {
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--s-4);
}
.method-item p { font-family: var(--display); font-size: var(--fs-h4); line-height: 1.55; color: var(--on-dark); }
 
 
/* ==========================================================================
   10. GUARANTEE
   ========================================================================== */
 
.guarantee { padding: var(--section) 0; background: var(--white); }
.guarantee-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
.guarantee-head { grid-column: 1 / span 6; }
.guarantee-list { grid-column: 7 / span 6; }
.guarantee-head img{margin-top:50px;}
.g-item { padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.g-item:first-child { border-top: 0; padding-top: 0; }
.g-item dt {
    font-size: var(--fs-cap);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--s-3);
}
.g-item dd { margin: 0; font-size: var(--fs-small); line-height: 1.9; color: var(--ink-2); max-width: 50ch; }
.g-item.lead dd { font-family: var(--display); font-size: var(--fs-h4); line-height: 1.5; color: var(--navy); }
 
 
/* ==========================================================================
   11. SECTORS
   ========================================================================== */
 
.sectors {
    padding: var(--section) 0;
    background: var(--navy);
    color: var(--on-dark);
}
 
/* Six equal cells. The heading takes the first one, so nothing is orphaned. */
.sector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3.25rem);
    row-gap: 0;
}
 
.sector-cell {
    padding: var(--s-6) 0 clamp(2.5rem, 4vw, 3.5rem);
    border-top: 1px solid var(--line-dark);
}
 
/* The heading cell reads differently: gold rule, no numeral, larger type. */
.sector-cell.intro {border-top-color: var(--gold);
    background: var(--gold);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 7%;}
.sector-cell.intro h2 {
    font-family: var(--display);
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    line-height: 1.1;
    color: var(--on-dark);
    margin-bottom: var(--s-4);
}
.sector-cell.intro p {
    font-size: var(--fs-small);
    line-height: 1.85;
    color: #fff;
}
 
.sector-num {
    display: block;
    font-family: var(--display);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--s-5);
}
 
.sector-cell h3 {
    font-family: var(--display);
    font-size: clamp(1.55rem, 1.8vw, 1.625rem);
    line-height: 1.2;
    color: var(--on-dark);
    margin-bottom: var(--s-4);
}
 
.sector-cell p {
    font-size: var(--fs-small);
    line-height: 1.9;
    color: var(--on-dark-2);
}
 
 
/* ==========================================================================
   12. CONTACT
   ========================================================================== */
 
.contact { padding: var(--section) 0; background: var(--white); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
.contact-head { grid-column: 1 / span 5; }
.contact-head .lede { margin-top: var(--s-5); }
 
.contact-details { margin-top: var(--s-7); border-top: 1px solid var(--line); }
.contact-details li { display: flex; gap: var(--s-5); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.contact-details span { flex: 0 0 6.5rem; font-size: var(--fs-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3); }
.contact-details a:hover { color: var(--gold); }
 
.contact-form { grid-column: 7 / span 6; }
.contact-form .cf7-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); }
.contact-form .cf7-full { grid-column: 1 / -1; }
.contact-form label {
    display: block;
    font-size: var(--fs-label);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s-3);
}
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    font-family: var(--body);
    font-size: var(--fs-small);
    font-weight: 300;
    color: var(--navy);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0.75rem 0;
    box-shadow: none;
}
.contact-form textarea { resize: vertical; }
.contact-form select {
    appearance: none;
    cursor: pointer;
    padding-right: 1.5rem;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23C9A84C' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: 0; border-bottom-color: var(--gold); }
 
.contact-form .wpcf7-submit {
    width: 100%;
    margin-top: var(--s-5);
    background: var(--navy);
    color: var(--on-dark);
    border: 1px solid var(--navy);
    border-radius: 0;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 1.25rem 2.5rem;
    transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.contact-form .wpcf7-submit:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.contact-form .wpcf7-not-valid-tip { font-size: var(--fs-cap); color: #9C3A2E; margin-top: var(--s-3); }
.contact-form .wpcf7-response-output { margin: var(--s-5) 0 0 !important; padding: var(--s-4) !important; border-width: 1px !important; font-size: var(--fs-cap); }
 
 
/* ==========================================================================
   13. FOOTER
   ========================================================================== */
 
.site-footer { background: var(--navy-deep); color: var(--on-dark); padding: clamp(4rem, 7vw, 6.5rem) 0 0; }
 
.footer-top {
    display: grid;
    grid-template-columns: 1.3fr 2.2fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 5vw, 4rem);
    border-bottom: 1px solid var(--line-dark);
}
.footer-brand { max-width: 24rem; }
.footer-brand img { width: 180px; max-width: 100%; }
.footer-tagline { margin: var(--s-5) 0 var(--s-4); font-family: var(--display); font-size: 1.375rem; color: var(--gold); }
.footer-contact { display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--fs-small); }
.footer-contact a { color: var(--on-dark-2); }
.footer-contact a:hover { color: var(--gold); }
.footer-licence {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-dark);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 2;
    color: var(--on-dark-3);
}
 
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.footer-col h4 {
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--on-dark-3);
    margin-bottom: var(--s-5);
}
.footer-col li { margin-bottom: 0.75rem; }
.footer-col a, .footer-col p { font-size: var(--fs-small); color: var(--on-dark-2); }
.footer-col a:hover { color: var(--gold); }
 
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) 0 var(--s-6);
    font-size: var(--fs-cap);
    color: var(--on-dark-3);
}
.footer-address { line-height: 1.8; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.footer-legal a:hover { color: var(--gold); }
.footer-divider { color: rgba(245, 240, 232, 0.3); }
 
 
/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
 
@media (max-width: 1180px) {
    .hero { grid-template-columns: 1.15fr 1fr; }
    
}
 
@media (max-width: 1024px) {
    .method-aside { position: static; }
    .svc { min-height: 22rem; }
	.sector-grid { grid-template-columns: repeat(2, 1fr); }
}
 
@media (max-width: 921px) {
    .ast-theme-transparent-header #masthead { position: absolute; }
    body.is-scrolled .ast-theme-transparent-header #masthead { position: fixed; }
}
 
@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-content { padding: clamp(7.5rem, 20vw, 9rem) var(--px) var(--s-8); }
    .hero-figure { min-height: 62vh; order: 2; }
 
    .section-head, .about-grid, .method-grid,
    .guarantee-grid, .contact-grid { grid-template-columns: 1fr; }
    .section-head > div:first-child, .section-head .lede,
    .about-media, .about-body,
    .method-aside, .method-body,
    .guarantee-head, .guarantee-list,
    .contact-head, .contact-form { grid-column: 1 / -1; }
 
    .about-media img { aspect-ratio: 4 / 3; }
    .services-grid { grid-template-columns: 1fr; }
    .svc:nth-child(n) { grid-column: 1 / -1; }
 
    .count-block { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
    .count-side { padding-bottom: 0; }
 	.sector-grid { grid-template-columns: 1fr; }
    .sector-cell { padding: var(--s-5) 0 var(--s-6); }
    .sector-num { margin-bottom: var(--s-4); }
 
    .contact-form .cf7-grid { grid-template-columns: 1fr; }
 
    .footer-top { grid-template-columns: 1fr; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
}
 
@media (max-width: 560px) {
    .hero-actions .btn { flex: 1 1 100%; text-align: center; }
    .footer-cols { grid-template-columns: 1fr; }
}
 
 
/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */
 
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.001ms !important; animation: none !important; }
    .reveal { opacity: 1; transform: none; }
}
 

/* ==========================================================================
   INNER PAGES
   Append to style.css, before the RESPONSIVE block.
   These five components are shared by About, How we work, Who we serve
   and Contact. Only the page templates change from here on.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page hero. White, because the header menu is dark and overlays it.
   Top padding clears the fixed header.
   -------------------------------------------------------------------------- */

.page-hero {
    padding: clamp(9rem, 15vw, 12.5rem) 0 clamp(2.5rem, 4vw, 4rem);
    background: var(--white);
}
.page-hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
}
.page-hero-title { grid-column: 1 / span 7; }
.page-hero h1 {
    font-family: var(--display);
    font-size: var(--fs-h1);
    line-height: 1.06;
    color: var(--navy);
}
.page-hero .lede { grid-column: 9 / span 4; }


/* --------------------------------------------------------------------------
   Full-width page image, sits directly under the hero.
   -------------------------------------------------------------------------- */

.page-figure { margin: 0; background: var(--navy-deep); }
.page-figure img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}


/* --------------------------------------------------------------------------
   Principles. Four across, hairline above each.
   -------------------------------------------------------------------------- */

.principles { padding: var(--section) 0; background: var(--white); }
.principle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
}
.principle { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.principle h3 {
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: var(--s-3);
}
.principle p {
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   Academy. Navy, image beside text.
   -------------------------------------------------------------------------- */

.academy { background: var(--navy); color: var(--on-dark); }
.academy-inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    padding-block: clamp(3.5rem, 7vw, 6rem);
}
.academy-figure {
    margin: 0;
    align-self: stretch;
    min-height: clamp(18rem, 30vw, 28rem);
    overflow: hidden;
}
.academy-figure img { width: 100%; height: 100%; object-fit: cover; }

.academy-body h2 { margin-bottom: var(--s-5); }
.academy-list { margin-top: var(--s-6); }
.academy-list li {
    padding: var(--s-4) 0;
    border-top: 1px solid var(--line-dark);
    font-size: var(--fs-small);
    line-height: 1.7;
    color: var(--on-dark-2);
}


/* --------------------------------------------------------------------------
   Closing CTA.
   -------------------------------------------------------------------------- */

.page-cta {
    padding: var(--section) 0;
    background: var(--white);
    border-top: 1px solid var(--line);
}
.page-cta-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
}
.page-cta h2 { grid-column: 1 / span 6; }
.page-cta-side { grid-column: 8 / span 5; }
.page-cta-side .lede { margin-bottom: var(--s-6); }


/* --------------------------------------------------------------------------
   Responsive. Add these to the existing media queries.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .principle-grid { grid-template-columns: repeat(2, 1fr); }
    .academy-inner { grid-template-columns: 1fr; }
    .academy-figure { min-height: 20rem; order: -1; }
}

@media (max-width: 860px) {
    .page-hero { padding-top: clamp(7.5rem, 20vw, 9rem); }
    .page-hero-grid,
    .page-cta-grid { grid-template-columns: 1fr; }
    .page-hero-title,
    .page-hero .lede,
    .page-cta h2,
    .page-cta-side { grid-column: 1 / -1; }
    .page-figure img { aspect-ratio: 3 / 2; }
}

@media (max-width: 560px) {
    .principle-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   CONTACT PAGE ADDITIONS
   Append after the INNER PAGES block in style.css.
   Only two new things. Everything else on the page reuses what exists.
   ========================================================================== */


/* Ghost button for navy backgrounds. The existing .btn-line is navy on white. */
.btn-ghost-light {
    color: var(--on-dark);
    border-color: var(--line-dark);
}
.btn-ghost-light:hover {
    border-color: var(--gold);
    color: var(--gold);
}


/* --------------------------------------------------------------------------
   Two routes. Clients on the left, candidates on the right, so job seekers
   never end up in the client pipeline.
   -------------------------------------------------------------------------- */

.routes {
    padding: var(--section) 0;
    background: var(--navy);
    color: var(--on-dark);
}
.routes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
}
.route { display: flex; flex-direction: column; align-items: flex-start; }
.route h2 { margin-bottom: var(--s-5); }
.route .lede { margin-bottom: var(--s-6); }
.route .btn { margin-top: auto; }

/* A hairline between the two columns, dropped when they stack. */
.route + .route {
    padding-left: clamp(2.5rem, 5vw, 5rem);
    border-left: 1px solid var(--line-dark);
}


/* --------------------------------------------------------------------------
   Responsive. Add to the existing media queries.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .routes-grid { grid-template-columns: 1fr; }
    .route + .route {
        padding-left: 0;
        padding-top: clamp(2.5rem, 5vw, 3.5rem);
        border-left: 0;
        border-top: 1px solid var(--line-dark);
    }
    .route .btn { margin-top: var(--s-4); }
}


/* ==========================================================================
   HOW WE WORK ADDITIONS
   Append after the CONTACT PAGE block in style.css.
   One new component. Everything else on the page already exists.
   ========================================================================== */


/* --------------------------------------------------------------------------
   The standard. Five items, so a four-column grid would orphan one.
   Five narrow columns with a gold rule above each.
   -------------------------------------------------------------------------- */

.standard { padding: var(--section) 0; background: var(--white); }

.standard-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.standard-item { padding-top: var(--s-5); border-top: 1px solid var(--gold); }

.standard-item h3 {
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: var(--s-3);
}
.standard-item p {
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   Responsive. Add to the existing media queries.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .standard-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    .standard-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .standard-grid { grid-template-columns: 1fr; }
}



/* ==========================================================================
   WHO WE SERVE ADDITIONS
   Append after the HOW WE WORK block in style.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Alternating sector blocks. Image and text swap sides on every other one,
   using the .reverse class rather than nth-child so the order stays readable.
   -------------------------------------------------------------------------- */

.sector-blocks { background: var(--white); padding: var(--section-sm) 0 var(--section); }

.sector-block { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.sector-block + .sector-block { border-top: 1px solid var(--line); }

.sector-block-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.sector-block-media { grid-column: 1 / span 5; margin: 0; }
.sector-block-body  { grid-column: 7 / span 6; }

.sector-block.reverse .sector-block-media { grid-column: 8 / span 5; grid-row: 1; }
.sector-block.reverse .sector-block-body  { grid-column: 1 / span 6; grid-row: 1; }

.sector-block-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.sector-block-num {
    display: block;
    font-family: var(--display);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--s-4);
}
.sector-block-body h2 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: var(--s-5);
}
.sector-block-body p {
    font-size: var(--fs-small);
    line-height: 1.95;
    color: var(--ink-2);
}

/* The internal links are the reason this page earns its URL. */
.sector-block-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}
.sector-block-links a {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.375rem;
}
.sector-block-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }


/* --------------------------------------------------------------------------
   Navy variant of the closing CTA. Reusable on any inner page.
   -------------------------------------------------------------------------- */

.page-cta.dark {
    background: var(--navy);
    color: var(--on-dark);
    border-top: 0;
}


/* --------------------------------------------------------------------------
   Responsive. Add to the existing media queries.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .sector-block-grid { grid-template-columns: 1fr; }
    .sector-block-media,
    .sector-block-body,
    .sector-block.reverse .sector-block-media,
    .sector-block.reverse .sector-block-body { grid-column: 1 / -1; grid-row: auto; }
    .sector-block.reverse .sector-block-media { order: -1; }
    .sector-block-media img { aspect-ratio: 3 / 2; }
}


/* ==========================================================================
   SERVICE PAGES
   Replaces the previous service page block in style.css.

   Also add this token to :root, alongside --white:
       --ivory: #F5F0E8;
   ========================================================================== */


/* --------------------------------------------------------------------------
   Hero. Content left, image right, same split as the homepage.
   The left column is padded to --edge so the text lines up with every
   .container below it while the image bleeds to the viewport edge.
   -------------------------------------------------------------------------- */

.svc-hero {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    min-height: 78vh;
    background: var(--white);
}

.svc-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(8.5rem, 14vw, 11rem) clamp(2.5rem, 5vw, 5rem) clamp(3rem, 5vw, 4.5rem) var(--edge);
}

.svc-hero-title {
    font-family: var(--display);
    font-size: clamp(2.25rem, 3.6vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--navy);
    margin-bottom: var(--s-5);
}
.svc-hero-content .lede { max-width: 42ch; }
.svc-hero-actions { margin-top: var(--s-7); }

.svc-hero-figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--navy-deep);
}
.svc-hero-figure img { width: 100%; height: 100%; object-fit: cover; }


/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: var(--s-6);
    font-size: var(--fs-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--gold); }
.crumbs span:last-child { color: var(--navy); }


/* --------------------------------------------------------------------------
   Lead. Opening argument, no image, since the hero now carries it.
   -------------------------------------------------------------------------- */

.svc-lead { padding: var(--section) 0; background: var(--white); }
.svc-lead-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
}
.svc-lead-grid .eyebrow { grid-column: 1 / span 3; margin-bottom: 0; }
.svc-lead-body { grid-column: 5 / span 7; }

.svc-lead-body p {
    margin-bottom: 1.3em;
    font-size: var(--fs-small);
    line-height: 1.95;
    color: var(--ink-2);
}
.svc-lead-body p:first-child {
    font-family: var(--display);
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    line-height: 1.45;
    color: var(--navy);
}
.svc-lead-body p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   Roles and venues. Ivory surface, gold chips.
   The chip labels are the long-tail search terms, so keep them literal.
   -------------------------------------------------------------------------- */

.roles { padding: var(--section) 0; background: var(--ivory); }
.roles-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
}
.roles-col h2 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    color: var(--navy);
    margin-bottom: var(--s-6);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.chips li {
    padding: 0.875rem 1.5rem;
    border: 1px solid var(--gold);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.chips li:hover { background: var(--gold); color: var(--navy-deep); }

.venues li {
    padding: var(--s-4) 0;
    border-top: 1px solid rgba(26, 43, 74, 0.16);
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.3;
    color: var(--navy);
}


/* --------------------------------------------------------------------------
   Navy variant of the standard grid from How we work.
   -------------------------------------------------------------------------- */

.standard.dark { background: var(--navy); color: var(--on-dark); }
.standard.dark .standard-item h3 { color: var(--on-dark); }
.standard.dark .standard-item p  { color: var(--on-dark-2); }

.standard-note {
    margin-top: clamp(2rem, 4vw, 3rem);
    font-size: var(--fs-cap);
    letter-spacing: 0.06em;
    color: var(--ink-3);
}
.standard.dark .standard-note { color: var(--on-dark-3); }
.standard-note a { color: var(--gold); border-bottom: 1px solid var(--line-dark); padding-bottom: 2px; }
.standard-note a:hover { border-bottom-color: var(--gold); }


/* --------------------------------------------------------------------------
   FAQ. Native details and summary, so no JavaScript.
   -------------------------------------------------------------------------- */

.faq { padding: var(--section) 0; background: var(--white); }
.faq-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
}
.faq-head { grid-column: 1 / span 4; }
.faq-list { grid-column: 6 / span 7; }

.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-5);
    padding: var(--s-5) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.35;
    color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    flex: none;
    font-family: var(--body);
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--gold);
}
.faq-item[open] summary::after { content: "\2013"; }

.faq-answer {
    padding-bottom: var(--s-6);
    max-width: 60ch;
    font-size: var(--fs-small);
    line-height: 1.95;
    color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   Related. Image above, text below on the ivory surface.
   No dark overlay, no card, no box. A gold rule separates image from text.
   -------------------------------------------------------------------------- */

.related { padding: var(--section) 0; background: var(--ivory); }
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
}

.related-item { display: block; }
.related-media { margin: 0; overflow: hidden; background: var(--navy-deep); }
.related-media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}
.related-item:hover .related-media img { transform: scale(1.05); }

.related-body {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--gold);
}
.related-name {
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: var(--s-3);
    transition: color 0.4s var(--ease);
}
.related-item:hover .related-name { color: var(--gold); }

.related-desc {
    font-size: var(--fs-cap);
    line-height: 1.85;
    color: var(--ink-2);
    margin-bottom: var(--s-5);
}
.related-more {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .roles-grid { grid-template-columns: 1fr; }
    .faq-head,
    .faq-list { grid-column: 1 / -1; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .svc-hero { grid-template-columns: 1fr; min-height: 0; }
    .svc-hero-content { padding: clamp(7.5rem, 20vw, 9rem) var(--px) var(--s-8); }
    .svc-hero-figure { min-height: 55vh; order: 2; }

    .svc-lead-grid { grid-template-columns: 1fr; }
    .svc-lead-grid .eyebrow,
    .svc-lead-body { grid-column: 1 / -1; }

    .related-grid { grid-template-columns: 1fr; }
}



/* ==========================================================================
   HUB, CAREERS AND LEGAL
   Append after the SERVICE PAGES block in style.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Services hub. Reuses the .related-item card from the service pages.
   -------------------------------------------------------------------------- */

.hub { padding: var(--section-sm) 0 var(--section); background: var(--ivory); }
 
.hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
}
 
.hub-card { display: block; }
 
.hub-media { margin: 0; overflow: hidden; background: var(--navy-deep); }
.hub-media img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    transition: transform 1.1s var(--anim-ease);
}
.hub-card:hover .hub-media img { transform: scale(1.04); }
 
.hub-body {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--gold);
}
 
.hub-num {
    display: block;
    font-family: var(--display);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--s-3);
}
 
.hub-body h2 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.12;
    color: var(--navy);
    margin-bottom: var(--s-4);
    transition: color 400ms var(--anim-ease);
}
.hub-card:hover .hub-body h2 { color: var(--gold); }
 
.hub-body p {
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--ink-2);
    margin-bottom: var(--s-4);
}
 
/* The roles line carries the long-tail search terms, so keep it literal. */
.hub-roles {
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-label) !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3) !important;
    line-height: 1.9;
}
 
.hub-more {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
}
 
.hub-note {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    font-size: var(--fs-cap);
    letter-spacing: 0.06em;
    color: var(--ink-3);
}
.hub-note strong { color: var(--gold); font-weight: 500; }
 
 
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
 
@media (max-width: 860px) {
    .hub-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Careers: how to apply. Navy, three steps.
   -------------------------------------------------------------------------- */

.apply { padding: var(--section) 0; background: var(--navy); color: var(--on-dark); }
.apply-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
}
.apply-step { padding-top: var(--s-5); border-top: 1px solid var(--gold); }
.apply-num {
    display: block;
    font-family: var(--display);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--s-4);
}
.apply-step h3 {
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--on-dark);
    margin-bottom: var(--s-3);
}
.apply-step p {
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--on-dark-2);
}


/* --------------------------------------------------------------------------
   Legal pages. Editor output, so style the raw elements rather than classes.
   -------------------------------------------------------------------------- */

.legal { padding: var(--section-sm) 0 var(--section); background: var(--white); }
.legal-grid { display: grid; grid-template-columns: repeat(12, 1fr); }
.legal-body { grid-column: 3 / span 8; }

.legal-body h2 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.2;
    color: var(--navy);
    margin: clamp(2.5rem, 4vw, 3.5rem) 0 var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal-body h3 {
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    margin: var(--s-6) 0 var(--s-3);
}

.legal-body p,
.legal-body li {
    font-size: var(--fs-small);
    line-height: 1.95;
    color: var(--ink-2);
}
.legal-body p { margin-bottom: 1.2em; }

.legal-body ul,
.legal-body ol { margin: 0 0 1.6em; padding-left: 1.35rem; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { margin-bottom: 0.6em; padding-left: 0.35rem; }
.legal-body li::marker { color: var(--gold); }

.legal-body strong { font-weight: 500; color: var(--navy); }
.legal-body a { color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.legal-body a:hover { color: var(--gold); }

.legal-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.6em; }
.legal-body th,
.legal-body td {
    text-align: left;
    padding: var(--s-4) var(--s-4) var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-cap);
    line-height: 1.8;
    vertical-align: top;
}
.legal-body th { color: var(--navy); font-weight: 500; }


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .hub .related-grid { grid-template-columns: repeat(2, 1fr); }
    .legal-body { grid-column: 2 / span 10; }
}

@media (max-width: 860px) {
    .hub .related-grid { grid-template-columns: 1fr; }
    .apply-grid { grid-template-columns: 1fr; }
    .legal-body { grid-column: 1 / -1; }
}

/* ==========================================================================
   WARMTH PASS
   Append at the VERY END of style.css. Everything here is an override, so
   nothing above needs finding and editing. Delete this block to revert.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens. Warm Ivory joins the palette, and the type scale comes up a
      step. Small light type across wide sections reads as precise; luxury
      reads as generous.
   -------------------------------------------------------------------------- */

:root {
    --ivory: #F5F0E8;

    --fs-h3:    clamp(1.625rem, 2.6vw, 2.5rem);
    --fs-h4:    clamp(1.25rem, 1.8vw, 1.625rem);
    --fs-small: 1rem;
    --fs-cap:   0.9125rem;
    --fs-label: 0.7875rem;

    --section:    clamp(6rem, 11vw, 11rem);
    --section-sm: clamp(4rem, 7vw, 6.5rem);
}

.lede { font-size: 1.125rem; line-height: 1.85; }


/* --------------------------------------------------------------------------
   2. Surfaces. Was white, navy, navy, navy, white. Now only one navy block
      sits between the hero and the footer, and ivory carries the warmth.
   -------------------------------------------------------------------------- */

.hero      { background: var(--white); }
.services  { background: var(--ivory); }
.about     { background: var(--white); }
/* .method stays navy: it is the one dark, cinematic moment on the page */
.guarantee { background: var(--ivory); }
.sectors   { background: var(--white); }
.contact   { background: var(--ivory); border-top: 0; }


/* --------------------------------------------------------------------------
   3. Hero. The image was a third of the screen. On a hospitality site the
      opening photograph is the argument, not an illustration beside it.
   -------------------------------------------------------------------------- */

.hero { grid-template-columns: 1fr 1fr; }

@media (max-width: 1180px) { .hero { grid-template-columns: 1fr 0.95fr; } }
@media (max-width: 860px)  { .hero { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   4. Service tiles. The overlay was 92% navy at the base and 55% at the
      midpoint, which buried the photography almost completely. This lets the
      image through while keeping the type legible where it actually sits.
   -------------------------------------------------------------------------- */

.svc::after {
    background: linear-gradient(to top,
        rgba(18, 32, 58, 0.82) 0%,
        rgba(18, 32, 58, 0.34) 46%,
        rgba(18, 32, 58, 0.04) 100%);
}
.svc:hover::after {
    background: linear-gradient(to top,
        rgba(18, 32, 58, 0.88) 0%,
        rgba(18, 32, 58, 0.48) 54%,
        rgba(18, 32, 58, 0.14) 100%);
}

/* Keeps the name readable if a light image sits behind it. */
.svc-name  { text-shadow: 0 1px 24px rgba(18, 32, 58, 0.45); }
.svc-roles { text-shadow: 0 1px 18px rgba(18, 32, 58, 0.55); }


/* --------------------------------------------------------------------------
   5. Sectors on white. Cell type has to invert with the surface.
   -------------------------------------------------------------------------- */

.sector-cell        { border-top-color: var(--line); }
.sector-cell h3     { color: var(--navy); }
.sector-cell p      { color: var(--ink-2); }
.sector-num         { color: var(--gold); }

/* Gold intro cell. Ivory on gold measures 2.0:1 and white 2.3:1, both well
   under the 4.5:1 minimum. Navy on gold is 7.1:1. */
.sector-cell.intro     { background: var(--gold); border-top-color: var(--gold); }
.sector-cell.intro h2  { color: var(--navy-deep); }
.sector-cell.intro p   { color: rgba(18, 32, 58, 0.78); }


/* --------------------------------------------------------------------------
   6. Guarantee image. Was styled with margin-top only, so it rendered at its
      intrinsic size and shifted the layout as it loaded.
   -------------------------------------------------------------------------- */

.guarantee-head img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-top: clamp(2rem, 4vw, 3.25rem);
}


/* --------------------------------------------------------------------------
   7. OPTIONAL: readable gold for small text.

   Brand gold #C9A84C measures 2.29:1 on white and 2.02:1 on ivory. WCAG AA
   wants 4.5:1 for body text and 3:1 for large text, so every eyebrow label,
   numeral and "view service" link on the site currently fails. This predates
   the warmth pass; it is in the original palette.

   #7D6626 is the same hue and saturation, darkened until it passes on both
   surfaces (5.53:1 on white, 4.87:1 on ivory). It reads as an antique gold
   rather than a brighter one. Full-size gold stays untouched: rules,
   borders, the sectors panel, buttons and anything on navy.

   Uncomment to apply. Judge it on screen before you commit, and show your
   client, since it is a visible brand change on small type.
   -------------------------------------------------------------------------- */

/*
:root { --gold-text: #7D6626; }

.eyebrow,
.sector-num,
.services-note strong,
.related-more,
.crumbs a:hover,
.standard-note a,
.count-num sup                 { color: var(--gold-text); }
.eyebrow::before               { background: var(--gold-text); }

.method .eyebrow,
.apply .eyebrow,
.standard.dark .eyebrow,
.page-cta.dark .eyebrow,
.method-item h3,
.apply-num,
.guarantee-item dt,
.footer-tagline                { color: var(--gold); }
*/

/* --------------------------------------------------------------------------
   Base states. JS adds [data-anim], then .is-in when the element scrolls in.
   -------------------------------------------------------------------------- */
 
[data-anim] { will-change: opacity, transform; }
[data-anim].is-in { will-change: auto; }
 
/* Rise. The default for text blocks. */
[data-anim="rise"] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity var(--anim-dur) var(--anim-ease),
                transform var(--anim-dur) var(--anim-ease);
}
[data-anim="rise"].is-in { opacity: 1; transform: none; }
 
/* Image settle. Scale only, never opacity, so the largest image on the page
   still paints immediately and the LCP measurement is not delayed. */
[data-anim="image"] { overflow: hidden; }
[data-anim="image"] > img,
[data-anim="image"].is-img {
    transform: scale(1.06);
    transition: transform var(--anim-dur-lg) var(--anim-ease);
}
[data-anim="image"].is-in > img,
[data-anim="image"].is-in.is-img { transform: scale(1); }
 
/* Gold rule drawing out from the left. */
[data-anim="rule"] .eyebrow::before,
.eyebrow[data-anim="rule"]::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--anim-ease);
}
[data-anim="rule"].is-in .eyebrow::before,
.eyebrow[data-anim="rule"].is-in::before { transform: scaleX(1); }
 
 
/* --------------------------------------------------------------------------
   Stagger. Applied to the direct children of a grid marked [data-stagger].
   Nine steps covers the longest group on the page.
   -------------------------------------------------------------------------- */
 
[data-stagger] > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger] > *:nth-child(2) { transition-delay: calc(var(--anim-step) * 1); }
[data-stagger] > *:nth-child(3) { transition-delay: calc(var(--anim-step) * 2); }
[data-stagger] > *:nth-child(4) { transition-delay: calc(var(--anim-step) * 3); }
[data-stagger] > *:nth-child(5) { transition-delay: calc(var(--anim-step) * 4); }
[data-stagger] > *:nth-child(6) { transition-delay: calc(var(--anim-step) * 5); }
[data-stagger] > *:nth-child(7) { transition-delay: calc(var(--anim-step) * 6); }
[data-stagger] > *:nth-child(8) { transition-delay: calc(var(--anim-step) * 7); }
[data-stagger] > *:nth-child(9) { transition-delay: calc(var(--anim-step) * 8); }
 
 
/* --------------------------------------------------------------------------
   Hero. Runs on load rather than on scroll, since it is already in view.
   body.is-ready is set by JS once the document is ready.
   -------------------------------------------------------------------------- */
 
.hero-title span,
.hero-lede,
.hero-actions {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 1100ms var(--anim-ease),
                transform 1100ms var(--anim-ease);
}
body.is-ready .hero-title span,
body.is-ready .hero-lede,
body.is-ready .hero-actions { opacity: 1; transform: none; }
 
body.is-ready .hero-title span:nth-child(1) { transition-delay: 120ms; }
body.is-ready .hero-title span:nth-child(2) { transition-delay: 240ms; }
body.is-ready .hero-lede                    { transition-delay: 420ms; }
body.is-ready .hero-actions                 { transition-delay: 560ms; }
 
/* The hero photograph settles out of a slight scale. No opacity change. */
.hero-figure { overflow: hidden; }
.hero-figure img {
    transform: scale(1.07);
    transition: transform 1800ms var(--anim-ease);
}
body.is-ready .hero-figure img { transform: scale(1); }
 
 
/* --------------------------------------------------------------------------
   The 1,240 figure. It rises with its own block rather than counting up.
   A number does not become more true by animating.
   -------------------------------------------------------------------------- */
 
.count-block[data-anim] .count-num {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity 1200ms var(--anim-ease),
                transform 1200ms var(--anim-ease);
}
.count-block[data-anim].is-in .count-num { opacity: 1; transform: none; }
 
.count-block[data-anim] .count-side {
    opacity: 0;
    transition: opacity 1200ms var(--anim-ease) 260ms;
}
.count-block[data-anim].is-in .count-side { opacity: 1; }
 
 
/* --------------------------------------------------------------------------
   Hover refinements. Deliberately minimal: the service tiles keep the
   gradient-and-gold-title treatment they already have and gain no zoom.
   -------------------------------------------------------------------------- */
 
/* Primary nav: a gold rule draws under the link. */
.main-header-menu > .menu-item:not(:last-child) > .menu-link {
    position: relative;
}
.main-header-menu > .menu-item:not(:last-child) > .menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 500ms var(--anim-ease);
}
.main-header-menu > .menu-item:not(:last-child) > .menu-link:hover::after,
.main-header-menu > .menu-item.current-menu-item:not(:last-child) > .menu-link::after {
    transform: scaleX(1);
    transform-origin: left center;
}
 
/* Role chips already fill on hover; slow it slightly so it reads as considered. */
.chips li { transition: background 550ms var(--anim-ease), color 550ms var(--anim-ease); }
 
/* Contact rows */
.contact-details a { transition: color 400ms var(--anim-ease); }
 
 
/* --------------------------------------------------------------------------
   Reduced motion. Everything resolves to its final state immediately.
   -------------------------------------------------------------------------- */
 
@media (prefers-reduced-motion: reduce) {
    [data-anim],
    [data-anim="rise"],
    .hero-title span,
    .hero-lede,
    .hero-actions,
    .count-block[data-anim] .count-num,
    .count-block[data-anim] .count-side {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    [data-anim="image"] > img,
    .hero-figure img { transform: none !important; transition: none !important; }
    [data-anim="rule"] .eyebrow::before,
    .eyebrow[data-anim="rule"]::before { transform: scaleX(1) !important; transition: none !important; }
    .main-header-menu > .menu-item > .menu-link::after { transition: none !important; }
}
 
.page-template-about-page .principles { background: var(--ivory); }
 
/* The academy image is a portrait now rather than a full-bleed panel. */
.academy-figure img { aspect-ratio: 4 / 5; }
 
@media (max-width: 1024px) {
    .academy-figure img { aspect-ratio: 3 / 2; }
}


.stages {
    padding: var(--section) 0;
    background: var(--navy);
    color: var(--on-dark);
}
 
.stages-head {
    max-width: 62ch;
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.stages-head h2 {
    font-family: var(--display);
    font-size: var(--fs-h2);
    line-height: 1.04;
    color: var(--on-dark);
    margin-bottom: var(--s-5);
}
.stages-note {
    max-width: 46ch;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--on-dark-2);
}
 
.stage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.75rem, 3vw, 3rem);
}
 
.stage-figure {
    margin: 0;
    overflow: hidden;
    background: var(--navy-deep);
}
.stage-figure img {
    width: 100%;
    height: 100%;
    min-height: clamp(18rem, 24vw, 24rem);
    object-fit: cover;
}
 
.stage { padding-top: var(--s-5); border-top: 1px solid var(--gold); }
.stage-num {
    display: block;
    font-family: var(--display);
    font-size: 2rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--s-4);
}
.stage h3 {
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--on-dark);
    margin-bottom: var(--s-3);
}
.stage p {
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--on-dark-2);
}
 
 
/* --------------------------------------------------------------------------
   2. STATEMENT
   A gold band carrying one sentence and nothing else. Navy on gold measures
   7.1:1, so it clears AA comfortably.
   -------------------------------------------------------------------------- */
 
.statement {
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    background: var(--gold);
}
.statement p {
    max-width: 22ch;
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.75rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--navy-deep);
}
 
 
/* --------------------------------------------------------------------------
   3. LEDGER
   Five full-width rows rather than five narrow columns. Numeral, label and
   description sit on one line, hairline separated.
   -------------------------------------------------------------------------- */
 
.ledger { padding: var(--section) 0; background: var(--white); }
.ledger-rows { margin: 0; }
 
.ledger-title {
    font-family: var(--display);
    font-size: var(--fs-h2);
    line-height: 1.04;
    color: var(--navy);
    max-width: 20ch;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
 
.ledger-row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: baseline;
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
    border-top: 1px solid var(--line);
}
.ledger-row:last-child { border-bottom: 1px solid var(--line); }
 
.ledger-mark {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.ledger-row h3 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--navy);
}
.ledger-row p {
    font-size: var(--fs-small);
    line-height: 1.9;
    color: var(--ink-2);
}
 
 
/* --------------------------------------------------------------------------
   4. QUAD
   Four guarantees across, then the replacement promise as a navy panel
   beneath. It is the one with real persuasive weight, so it gets its own
   surface rather than being the fourth item in a list.
   -------------------------------------------------------------------------- */
 
.quad { padding: var(--section) 0; background: var(--ivory); }
 
.quad-title {
    font-family: var(--display);
    font-size: var(--fs-h2);
    line-height: 1.04;
    color: var(--navy);
    max-width: 22ch;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
 
.quad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
}
.quad-item { padding-top: var(--s-5); border-top: 1px solid var(--gold); }
.quad-item h3 {
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: var(--s-3);
}
.quad-item p {
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--ink-2);
}
 
.quad-lead {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding: clamp(2rem, 3.5vw, 3rem);
    background: var(--navy);
    color: var(--on-dark);
}
.quad-lead-label {
    font-size: var(--fs-cap);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
}
.quad-lead p {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.35;
    color: var(--on-dark);
}
 
 
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
 
@media (max-width: 1024px) {
    .stage-grid { grid-template-columns: repeat(2, 1fr); }
    .quad-grid { grid-template-columns: repeat(2, 1fr); }
    .ledger-row { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .ledger-row p { grid-column: 2; }
}
 
@media (max-width: 860px) {
    .stage-grid { grid-template-columns: 1fr; }
    .stage-figure { order: -1; }
    .stage-figure img { min-height: 16rem; }
    .quad-grid { grid-template-columns: 1fr; }
    .quad-lead { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
    .statement p { max-width: none; }
}


.engagement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30%);
    background: var(--navy);
    color: var(--on-dark);
}
 
.engagement-main {
    padding: var(--section) clamp(2.5rem, 5vw, 5rem) var(--section) var(--edge);
    min-width: 0;
}
 
.engagement-head { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.engagement-head h2 {
    font-family: var(--display);
    font-size: var(--fs-h2);
    line-height: 1.04;
    color: var(--on-dark);
    margin-bottom: var(--s-5);
}
.engagement-note {
    max-width: 44ch;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--on-dark-2);
}
 
.engagement-list { counter-reset: none; }
 
.engagement-step {
    display: grid;
    grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    padding: clamp(2rem, 3.5vw, 3rem) 0;
    border-top: 1px solid var(--line-dark);
}
.engagement-step:first-child { border-top: 0; padding-top: 0; }
.engagement-step:last-child { padding-bottom: 0; }
 
/* Outlined numerals. The stroke is the device that carries this section. */
.engagement-num {
    font-family: var(--display);
    font-size: clamp(3rem, 5.5vw, 5rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 1px var(--gold);
    text-stroke: 1px var(--gold);
    display: block;
}
/* Browsers without text-stroke get a solid, quieter numeral. */
@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
    .engagement-num { color: rgba(201, 168, 76, 0.45); }
}
 
.engagement-copy h3 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.12;
    color: var(--on-dark);
    margin-bottom: var(--s-4);
}
.engagement-copy p {
    max-width: 54ch;
    font-size: var(--fs-small);
    line-height: 1.9;
    color: var(--on-dark-2);
}
 
.engagement-figure {
    margin: 0;
    overflow: hidden;
    background: var(--navy-deep);
}
.engagement-figure img { width: 100%; height: 100%; object-fit: cover; }
 
 
/* --------------------------------------------------------------------------
   2. STATEMENT
   A gold band carrying one sentence and nothing else. Navy on gold measures
   7.1:1, so it clears AA comfortably.
   -------------------------------------------------------------------------- */
 
.statement {
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    background: var(--gold);
}
.statement p {
    max-width: 22ch;
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.75rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--navy-deep);
}
 
 
/* --------------------------------------------------------------------------
   3. LEDGER
   Five full-width rows rather than five narrow columns. Numeral, label and
   description sit on one line, hairline separated.
   -------------------------------------------------------------------------- */
 
.ledger { padding: var(--section) 0; background: var(--white); }
.ledger-rows { margin: 0; }
 
.ledger-title {
    font-family: var(--display);
    font-size: var(--fs-h2);
    line-height: 1.04;
    color: var(--navy);
    max-width: 20ch;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
 
.ledger-row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: baseline;
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
    border-top: 1px solid var(--line);
}
.ledger-row:last-child { border-bottom: 1px solid var(--line); }
 
.ledger-mark {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.ledger-row h3 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--navy);
}
.ledger-row p {
    font-size: var(--fs-small);
    line-height: 1.9;
    color: var(--ink-2);
}
 
 
/* --------------------------------------------------------------------------
   4. QUAD
   Four guarantees across, then the replacement promise as a navy panel
   beneath. It is the one with real persuasive weight, so it gets its own
   surface rather than being the fourth item in a list.
   -------------------------------------------------------------------------- */
 
.quad { padding: var(--section) 0; background: var(--ivory); }
 
.quad-title {
    font-family: var(--display);
    font-size: var(--fs-h2);
    line-height: 1.04;
    color: var(--navy);
    max-width: 22ch;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
 
.quad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
}
.quad-item { padding-top: var(--s-5); border-top: 1px solid var(--gold); }
.quad-item h3 {
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: var(--s-3);
}
.quad-item p {
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--ink-2);
}
 
.quad-lead {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding: clamp(2rem, 3.5vw, 3rem);
    background: var(--navy);
    color: var(--on-dark);
}
.quad-lead-label {
    font-size: var(--fs-cap);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
}
.quad-lead p {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.35;
    color: var(--on-dark);
}
 
 
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
 
@media (max-width: 1024px) {
    .engagement { grid-template-columns: minmax(0, 1fr) minmax(0, 26%); }
    .quad-grid { grid-template-columns: repeat(2, 1fr); }
    .ledger-row { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .ledger-row p { grid-column: 2; }
}
 
@media (max-width: 860px) {
    .engagement { grid-template-columns: 1fr; }
    .engagement-main { padding: var(--section-sm) var(--px); }
    .engagement-figure { order: 2; min-height: 20rem; }
    .engagement-step { grid-template-columns: 1fr; gap: var(--s-4); }
    .engagement-num { font-size: 3rem; }
    .quad-grid { grid-template-columns: 1fr; }
    .quad-lead { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
    .statement p { max-width: none; }
}
 

/* ==========================================================================
                                WHO WE SERVE PAGE
   ========================================================================== */

.who { padding: var(--section-sm) 0 var(--section); background: var(--white); }

.who-grid {
    display: grid;
    grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}

.sector-index {
    position: sticky;
    top: 8rem;
    align-self: start;
}

.sector-index-label {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
}

.sector-panels { min-width: 0; }

.sector-index li { border-bottom: 1px solid var(--line); }

.sector-index a {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--s-3);
    align-items: baseline;
    padding: var(--s-4) 0;
    color: var(--ink-3);
    transition: color 400ms var(--anim-ease);
}
.sector-index a:hover { color: var(--navy); }

.index-num {
    font-family: var(--display);
    font-size: 1rem;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
    transition: opacity 400ms var(--anim-ease);
}
.index-name {
    font-family: var(--display);
    font-size: 1.25rem;
    line-height: 1.25;
}

.sector-index a.is-current { color: var(--navy); }
.sector-index a.is-current .index-num { opacity: 1; }
.sector-index li:has(a.is-current) { border-bottom-color: var(--gold); }

.sector-panel { padding: clamp(2.5rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--line); }
.sector-panel:first-child { border-top: 0; padding-top: 0; }
.sector-panel:last-child { padding-bottom: 0; }

.sector-panel { scroll-margin-top: 7rem; }

.sector-panel-media { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); overflow: hidden; background: var(--navy-deep); }
.sector-panel-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sector-panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
.sector-panel-body h2 {
    grid-column: 1 / -1;
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--navy);
    margin-bottom: 0;
}
.sector-panel-body > p {
    font-size: var(--fs-small);
    line-height: 1.95;
    color: var(--ink-2);
}

.sector-panel-links { padding-top: var(--s-4); border-top: 1px solid var(--gold); }
.sector-panel-links-label {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s-4);
}
.sector-panel-links li { margin-bottom: 0.625rem; }
.sector-panel-links a {
    font-family: var(--display);
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--navy);
    transition: color 350ms var(--anim-ease);
}
.sector-panel-links a:hover { color: var(--gold); }

@media (max-width: 1024px) {
    .who-grid { grid-template-columns: 1fr; gap: var(--s-7); }

    /* The index becomes a horizontal strip above the panels. */
    .sector-index { position: static; }
    .sector-index ol { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
    .sector-index li { border-bottom: 0; }
    .sector-index a { grid-template-columns: auto auto; padding: var(--s-3) 0; }
    .sector-index .index-name { font-size: 1rem; }
    .sector-index li:has(a.is-current) { border-bottom: 0; }
    .sector-index a.is-current .index-name { border-bottom: 1px solid var(--gold); }
}

@media (max-width: 860px) {
    .sector-panel-body { grid-template-columns: 1fr; }
    .sector-panel-media img { aspect-ratio: 3 / 2; }
}



/* ==========================================================================
                                CONTACT PAGE
   ========================================================================== */

.enquiry { padding: var(--section-sm) 0 var(--section); background: var(--ivory); }

.enquiry-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}


.enquiry-aside h2 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--navy);
    margin-bottom: var(--s-4);
}
.enquiry-lede {
    font-size: var(--fs-small);
    line-height: 1.9;
    color: var(--ink-2);
    max-width: 34ch;
}

.enquiry-details { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.enquiry-details li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-cap);
    line-height: 1.7;
    color: var(--ink-2);
}
.enquiry-details span {
    font-size: var(--fs-label);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.enquiry-details a { color: var(--navy); }
.enquiry-details a:hover { color: var(--gold); }

.enquiry-figure { margin: clamp(2rem, 4vw, 3rem) 0 0; overflow: hidden; background: var(--navy-deep); }
.enquiry-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.form-panel {
    background: var(--white);
    padding: clamp(2rem, 4vw, 3.5rem);
}

.checklist {
    padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--line);
}
.checklist-label {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s-5);
}
.checklist ol {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) var(--s-6);
}
.checklist li {
    display: grid;
    /*grid-template-columns: 2rem 1fr;*/
    gap: var(--s-3);
    font-size: var(--fs-cap);
    line-height: 1.8;
    color: var(--ink-2);
}
.checklist li span {
    font-family: var(--display);
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.checklist li strong {
    display: block;
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: 0.25rem;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .enquiry-grid { grid-template-columns: 1fr; }
    .enquiry-figure { display: none; }
}

@media (max-width: 860px) {
    .form-panel { padding: var(--s-6) var(--s-5); }
    .checklist ol { grid-template-columns: 1fr; gap: var(--s-4); }
    .enquiry-details li { grid-template-columns: 1fr; gap: 0.25rem; }
}


/* ==========================================================================
                            CAREERS PAGE
   ========================================================================== */

.openings { padding: var(--section-sm) 0 var(--section); background: var(--white); }

.openings-head { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.openings-head h2 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--navy);
    margin-bottom: var(--s-3);
}
.openings-head p { font-size: var(--fs-cap); line-height: 1.8; color: var(--ink-3); }

.openings-note {
    margin-top: clamp(2rem, 3.5vw, 3rem);
    padding-top: var(--s-5);
    border-top: 1px solid var(--gold);
    max-width: 62ch;
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--ink-2);
}
.openings-note a { color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.openings-note a:hover { color: var(--gold); }


/* --------------------------------------------------------------------------
   2. Neutralise the Bootstrap scaffolding
   -------------------------------------------------------------------------- */

.jobs-board .sjb-page { max-width: none; }
.jobs-board .clearfix { display: none; }

/* Font Awesome is not loaded, so the icon elements render as empty boxes. */
.jobs-board .fa { display: none !important; }

/* The company logo is a grey placeholder building. Hide it until a real
   logo is set in the plugin settings. */
.jobs-board .company-logo { display: none; }


/* --------------------------------------------------------------------------
   3. Filter bar
   -------------------------------------------------------------------------- */

.jobs-board .sjb-filters {
    padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
    border-bottom: 1px solid var(--line);
}

.jobs-board .filters-form .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5) var(--s-5);
    align-items: end;
}
.jobs-board .sjb-search-keywords { grid-column: 1 / -1; }

.jobs-board .form-group { margin: 0; }

.jobs-board .form-control,
.jobs-board input[type="text"],
.jobs-board select {
    width: 100%;
    height: auto;
    font-family: var(--body);
    font-size: var(--fs-small);
    font-weight: 300;
    color: var(--navy);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0.75rem 0;
    box-shadow: none;
    appearance: none;
}
.jobs-board select {
    padding-right: 1.5rem;
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23C9A84C' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center;
}
.jobs-board .form-control:focus { outline: 0; border-bottom-color: var(--gold); box-shadow: none; }
.jobs-board ::placeholder { color: var(--ink-3); opacity: 1; }

/* The search button's value is a Font Awesome glyph, so the label is hidden
   and replaced with a magnifier drawn in the background. */
.jobs-board .btn-search {
    width: 100%;
    font-size: 0 !important;
    height: 3rem;
    background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23F5F0E8' stroke-width='1.4'/%3E%3Cpath d='M11 11l4 4' stroke='%23F5F0E8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    border: 1px solid var(--navy);
    border-radius: 0;
    box-shadow: none;
    transition: background-color 400ms var(--anim-ease);
}
.jobs-board .btn-search:hover { background-color: var(--gold); border-color: var(--gold); }


/* --------------------------------------------------------------------------
   4. Listing rows
   -------------------------------------------------------------------------- */

.jobs-board .sjb-listing,
.jobs-board .list-view { border-top: 1px solid var(--line); }

.jobs-board .list-data {
    border-bottom: 1px solid var(--line);
    transition: background 400ms var(--anim-ease);
}
/*.jobs-board .list-data:hover { background: var(--ivory); }*/
.jobs-board .list-data > div { padding: clamp(1.5rem, 2.5vw, 2rem) 0; }

.jobs-board .list-data header > .row { display: block; }

/* Title, type, location and posted date on one line. */
.jobs-board .sjb-list-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--s-4) var(--s-5);
    align-items: baseline;
}

.jobs-board .job-info h4 { margin: 0; }
.jobs-board .job-title,
.jobs-board .job-info h4 a {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--navy);
    transition: color 350ms var(--anim-ease);
}
.jobs-board .job-info h4 a:hover .job-title { color: var(--gold); }

.jobs-board .job-type,
.jobs-board .job-location,
.jobs-board .job-date {
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
}


/* --------------------------------------------------------------------------
   5. Short description and expanded content
   -------------------------------------------------------------------------- */

.jobs-board .job-description { padding-top: var(--s-4); }
.jobs-board .job-description p {
    font-size: var(--fs-cap);
    line-height: 1.85;
    color: var(--ink-2);
    margin-bottom: var(--s-4);
}

.jobs-board .sjb_more_content {
    padding: var(--s-5) 0 var(--s-3);
    max-width: 74ch;
}
.jobs-board .sjb_more_content p {
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--ink-2);
    margin-bottom: 1.1em;
}
.jobs-board .sjb_more_content strong {
    display: block;
    margin-top: var(--s-5);
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--navy);
}

/* The pasted job copy carries editor classes that have no styles here, so
   list markers have to be restored explicitly. */
.jobs-board .sjb_more_content ul,
.jobs-board .sjb_more_content ol {
    display: block !important;
    list-style: disc !important;
    padding-left: 1.25rem !important;
    margin: 0 0 1.4em !important;
}
.jobs-board .sjb_more_content ol { list-style: decimal !important; }
.jobs-board .sjb_more_content li {
    display: list-item !important;
    padding-left: 0.35rem !important;
    margin-bottom: 0.4em;
    font-size: var(--fs-cap);
    line-height: 1.85;
    color: var(--ink-2);
}
.jobs-board .sjb_more_content li::marker { color: var(--gold); }
.jobs-board .sjb_more_content em { font-style: normal; color: #9C3A2E; }

/* Job features table */
.jobs-board .job-features { margin-top: var(--s-5); }
.jobs-board .job-features h3 {
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s-4);
}
.jobs-board .job-features .table { width: 100%; border-collapse: collapse; }
.jobs-board .job-features td {
    padding: var(--s-4) var(--s-4) var(--s-4) 0 !important;
    border-bottom: 1px solid var(--line);
    border-top: 0;
    font-size: var(--fs-cap);
    color: var(--ink-2);
}
.jobs-board .job-features td:first-child {
    width: 14rem;
    font-size: var(--fs-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
}


/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.jobs-board .sjb-apply-now-btn p { margin: 0; }
.jobs-board .sjb-apply-now-btn > p > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.jobs-board .btn.btn-primary,
.jobs-board a#quick-apply-btn {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 0;
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--navy);
    box-shadow: none;
    transition: background 400ms var(--anim-ease),
                color 400ms var(--anim-ease),
                border-color 400ms var(--anim-ease);
}
.jobs-board .btn.btn-primary:hover,
.jobs-board a#quick-apply-btn:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--on-dark);
}

/* Quick Apply is the primary action, so it carries the gold. */
.jobs-board a#quick-apply-btn {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy-deep);
}
.jobs-board a#quick-apply-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }

.jobs-board .sjb-view-less-btn,
.jobs-board .sjb_view_more_btn {
    display: inline-block;
    margin-top: var(--s-3);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    cursor: pointer;
    border: 0;
    padding: 0;
    background: none;
}
.jobs-board .sjb-view-less-btn a { color: var(--gold); }
.jobs-board .sjb-view-less-btn a:hover { color: var(--navy); }


/* --------------------------------------------------------------------------
   7. Quick apply modal and application form
   -------------------------------------------------------------------------- */

.jobs-board input[type="email"],
.jobs-board input[type="tel"],
.jobs-board input[type="file"],
.jobs-board textarea {
    width: 100%;
    font-family: var(--body);
    font-size: var(--fs-small);
    font-weight: 300;
    color: var(--navy);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0.75rem 0;
    box-shadow: none;
}
.jobs-board label {
    font-family: var(--body);
    font-size: var(--fs-label);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
}
.jobs-board input[type="submit"] {
    background: var(--navy);
    border: 1px solid var(--navy);
    border-radius: 0;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--on-dark);
    padding: 1rem 2.25rem;
    box-shadow: none;
}
.jobs-board input[type="submit"]:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }


/* --------------------------------------------------------------------------
   8. How to apply
   -------------------------------------------------------------------------- */

.apply { padding: var(--section-sm) 0; background: var(--ivory); }

.apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.apply-grid h2 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--navy);
}

.apply-steps li {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
    padding: var(--s-5) 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-small);
    line-height: 1.9;
    color: var(--ink-2);
}
.apply-steps li:first-child { border-top: 0; padding-top: 0; }
.apply-steps li:last-child { padding-bottom: 0; }
.apply-steps span {
    font-family: var(--display);
    font-size: 1.25rem;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .jobs-board .sjb-list-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .jobs-board .job-info { grid-column: 1 / -1; }
    .apply-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 860px) {
    .jobs-board .filters-form .row { grid-template-columns: repeat(2, 1fr); }
    .jobs-board .sjb-search-button { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .jobs-board .filters-form .row { grid-template-columns: 1fr; }
    .jobs-board .sjb-list-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SERVICE PAGES: additions
   ========================================================================== */

.svc-lead-grid .eyebrow { align-self: start; }

.assurance {
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    background: var(--navy);
    color: var(--on-dark);
}

.assurance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}

.assurance-head .eyebrow { margin-bottom: var(--s-4); }
.assurance-head h2 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--on-dark);
    max-width: 16ch;
}

.assurance-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 0;
}
.assurance-list li {
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--on-dark);
    padding: 0 1.25rem 0 0;
    margin-right: 1.25rem;
    border-right: 1px solid var(--line-dark);
    line-height: 1.6;
}
.assurance-list li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.assurance-note {
    grid-column: 2;
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-dark);
    max-width: 58ch;
    font-size: var(--fs-cap);
    line-height: 1.9;
    color: var(--on-dark-2);
}
.assurance-note a { color: var(--gold); border-bottom: 1px solid var(--line-dark); padding-bottom: 1px; }
.assurance-note a:hover { border-bottom-color: var(--gold); }

.svc-lead-grid .eyebrow { align-self: start; }
/* --------------------------------------------------------------------------
   3. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .assurance-grid { grid-template-columns: 1fr; }
    .assurance-note { grid-column: 1; }
    .assurance-list li {
        padding-right: 1rem;
        margin-right: 1rem;
    }
}

/* ==========================================================================
   404
   Append at the very end of style.css.
   ========================================================================== */

.notfound {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(8rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 7rem);
    background: var(--navy);
    color: var(--on-dark);
    text-align: center;
    overflow: hidden;
}

.notfound-inner { display: flex; flex-direction: column; align-items: center; }

.notfound-code {
    display: flex;
    gap: clamp(0.5rem, 2vw, 2rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    animation: notfoundFloat 7s ease-in-out infinite;
}

.notfound-code span {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(6rem, 22vw, 16rem);
    line-height: 0.85;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 1px var(--gold);
    text-stroke: 1px var(--gold);
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
    animation: notfoundRise 1.1s var(--anim-ease) forwards;
}
.notfound-code span:nth-child(1) { animation-delay: 100ms; }
.notfound-code span:nth-child(2) { animation-delay: 240ms; }
.notfound-code span:nth-child(3) { animation-delay: 380ms; }

/* The middle zero turns slowly, so the group has one quiet moving part. */
.notfound-code span:nth-child(2) {
    animation:
        notfoundRise 1.1s var(--anim-ease) 240ms forwards,
        notfoundTurn 14s linear 1.6s infinite;
}

/* Browsers without text-stroke get a solid, quieter numeral. */
@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
    .notfound-code span { color: rgba(201, 168, 76, 0.4); }
}

@keyframes notfoundRise {
    to { opacity: 1; transform: none; }
}
@keyframes notfoundFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -0.75rem, 0); }
}
@keyframes notfoundTurn {
    to { transform: rotate(360deg); }
}


/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.notfound-title,
.notfound-lede,
.notfound .btn {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
    animation: notfoundRise 1.1s var(--anim-ease) forwards;
}
.notfound-title { animation-delay: 520ms; }
.notfound-lede  { animation-delay: 660ms; }
.notfound .btn  { animation-delay: 800ms; }

.notfound-title {
    font-family: var(--display);
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    line-height: 1.1;
    color: var(--on-dark);
    max-width: 18ch;
    margin-bottom: var(--s-5);
}

.notfound-lede {
    max-width: 44ch;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--on-dark-2);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .notfound-code,
    .notfound-code span,
    .notfound-title,
    .notfound-lede,
    .notfound .btn {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.sc-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;
    background: var(--white);
    border-bottom: 1px solid transparent;
    transition: border-color 400ms var(--anim-ease), box-shadow 400ms var(--anim-ease);
}
body.is-scrolled .sc-header {
    border-bottom-color: var(--line);
    box-shadow: 0 1px 18px rgba(18, 32, 58, 0.06);
}

/* Clears the fixed bar. Astra's own padding no longer applies. */
body { padding-top: 92px; }
.admin-bar .sc-header { top: 32px; }

.sc-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--px);
    height: 92px;
    transition: height 400ms var(--anim-ease);
}
body.is-scrolled .sc-header-inner { height: 76px; }


/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.sc-logo { flex: none; display: block; line-height: 0; }
.sc-logo img {
    width: auto;
    height: 88px;
    transition: height 400ms var(--anim-ease);
}
body.is-scrolled .sc-logo img { height: 76px; }


/* --------------------------------------------------------------------------
   Desktop navigation
   -------------------------------------------------------------------------- */

.sc-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.75rem);
}

.sc-menu {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sc-menu li { position: relative; margin: 0; list-style: none; }

.sc-menu a {
    display: block;
    position: relative;
    padding: 0.5rem 0;
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
    transition: color 300ms var(--anim-ease);
}
.sc-menu a:hover,
.sc-menu .current-menu-item > a,
.sc-menu .current-menu-ancestor > a { color: var(--navy); }

/* Gold rule drawing under the link. */
.sc-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 450ms var(--anim-ease);
}
.sc-menu > li > a:hover::after,
.sc-menu > li.current-menu-item > a::after,
.sc-menu > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Caret on items with children. */
.sc-menu > li.menu-item-has-children > a { padding-right: 1rem; }
.sc-menu > li.menu-item-has-children > a::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 300ms var(--anim-ease);
}
.sc-menu > li.menu-item-has-children:hover > a::before { transform: rotate(225deg); margin-top: -1px; }


/* --------------------------------------------------------------------------
   Dropdown
   -------------------------------------------------------------------------- */

.sc-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: -1.25rem;
    min-width: 17rem;
    margin: 0;
    padding: 0.75rem 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 300ms var(--anim-ease),
                transform 300ms var(--anim-ease),
                visibility 300ms;
}
/* Keeps hover alive across the gap between the item and the panel. */
.sc-menu > li.menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.75rem;
}
.sc-menu > li:hover > .sub-menu,
.sc-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.sc-menu .sub-menu a {
    padding: 0.625rem 1.5rem;
    font-family: var(--display);
    font-size: 1.0625rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy);
}
.sc-menu .sub-menu a::after { display: none; }
.sc-menu .sub-menu a:hover { color: var(--gold); }


/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.sc-cta {
    flex: none;
    display: inline-block;
    padding: 0.9375rem 1.75rem;
    background: var(--navy);
    border: 1px solid var(--navy);
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--on-dark);
    white-space: nowrap;
    transition: background 400ms var(--anim-ease),
                border-color 400ms var(--anim-ease),
                color 400ms var(--anim-ease);
}
.sc-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }


/* --------------------------------------------------------------------------
   Toggle
   -------------------------------------------------------------------------- */

.sc-toggle {
    display: none;
    position: relative;
    width: 30px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.sc-toggle span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--navy);
    transition: transform 400ms var(--anim-ease), opacity 300ms var(--anim-ease);
}
.sc-toggle span:nth-child(1) { top: 2px; }
.sc-toggle span:nth-child(2) { top: 10px; }
.sc-toggle span:nth-child(3) { top: 18px; }

body.nav-open .sc-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .sc-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .sc-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.sc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(18, 32, 58, 0.4);
    opacity: 0;
    transition: opacity 400ms var(--anim-ease);
}
body.nav-open .sc-backdrop { opacity: 1; }


/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */

@media (max-width: 921px) {

    body { padding-top: 72px; }
    .sc-header-inner,
    body.is-scrolled .sc-header-inner { height: 72px; }
    .sc-logo img,
    body.is-scrolled .sc-logo img { height: 60px; }

    .sc-toggle { display: block; }

    .sc-nav {
        position: fixed;
        top: 72px;
        right: 0;
        bottom: 0;
        z-index: 195;
        width: min(23rem, 86vw);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--s-6) var(--s-6) var(--s-8);
        background: var(--white);
        border-left: 1px solid var(--line);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 450ms var(--anim-ease);
    }
    .admin-bar .sc-nav { top: 105px; }
    button#sc-toggle {background-color: inherit;}
    body.nav-open .sc-nav { transform: none; }

    .sc-menu { flex-direction: column; align-items: stretch; gap: 0; }
    .sc-menu > li { border-bottom: 1px solid var(--line); }

    .sc-menu a {
        padding: var(--s-4) 0;
        font-family: var(--display);
        font-size: 1.25rem;
        letter-spacing: 0;
        text-transform: none;
        color: var(--navy);
        white-space: normal;
    }
    .sc-menu > li > a::after,
    .sc-menu > li.menu-item-has-children > a::before { display: none; }

    /* Sub-items are shown inline rather than behind another tap. */
    .sc-menu .sub-menu {
        position: static;
        min-width: 0;
        padding: 0 0 var(--s-4);
        border: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
    }
    .sc-menu .sub-menu a {
        padding: 0.4375rem 0 0.4375rem 1rem;
        font-size: 1.25rem;
        color: var(--ink-2);
        border-left: 1px solid var(--line);
    }
    .sc-menu .sub-menu a:hover { color: var(--gold); border-left-color: var(--gold); }

    .sc-cta { margin-top: var(--s-6); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-header, .sc-header-inner, .sc-logo img, .sc-nav,
    .sc-menu a, .sc-menu .sub-menu, .sc-toggle span, .sc-backdrop, .sc-cta {
        transition: none !important;
    }
}

/* Responsive Additional */
@media (max-width:540px){
    .about-media img{display:none;}
    .home p{font-size:15px;}
    .count-num sup{    font-size: 0.74em;vertical-align: inherit;}
    .sector-cell.intro{align-items:flex-start;}
}