/* ==========================================================================
   Harbour — the layout and the chrome.

   LOADED AFTER themes/_shared/css/base.css, which carries the tokens, the
   reset, the type scale, the buttons, the form system, the slider mechanics
   and the reveal rules. Nothing in that file is redefined here; this is
   Harbour's own furniture only, which is why it is a third of the size of a
   theme that had to carry its own design system.

   THE SHAPE, and what makes it not Sentinel: a two-row header with a utility
   strip above it; a full-bleed dark hero with the statistics laid over its
   foot rather than in a band halfway down; services as a numbered index
   rather than a grid of cards; left-aligned section heads throughout; a light
   footer over a dark bottom bar.

   The class names that are NOT Harbour's to choose are the ones the shared
   main.js drives — .nav-toggle, #primary-nav, .nav-scrim, .reveal,
   .slider-track, .slide, [data-count], .field-error. See THEME-CONTRACT.md.
   ========================================================================== */

/* A slightly quieter, warmer take on the shared defaults. A theme may
   override a token; it may not redefine the vocabulary. brand.css still loads
   after this, so a client's own colours beat both. */
:root{
  --radius:      6px;
  --radius-sm:   4px;
  --maxw:        1140px;
  --header-h:    68px;
  --utility-h:   38px;
}

/* ==========================================================================
   Utility strip
   ========================================================================== */

.utility{background:var(--dark);color:var(--on-dark-muted);font-size:.85rem}
.utility-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--utility-h);flex-wrap:wrap;
}
.utility-note{display:flex;align-items:center;gap:7px;margin:0;padding:7px 0}
.utility-note svg{width:15px;height:15px;color:var(--accent-light);flex:none}
.utility-links{display:flex;align-items:center;gap:18px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.utility-links li{margin:0}
/* Padded to clear the 24px minimum target at 360 rather than relying on the
   line box, which is 15px here. */
.utility-links a{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--on-dark-muted);padding:7px 0;
}
.utility-links a:hover{color:#fff;text-decoration:none}
.utility-links svg{width:15px;height:15px;flex:none}

@media (max-width:620px){
  /* The address line is the first thing to go: two contact links matter more
     on a phone than a region name does. */
  .utility-note{display:none}
  .utility-inner{justify-content:center}
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.site-header.is-stuck{box-shadow:0 4px 18px rgba(15,20,36,.08)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:var(--header-h);
}

.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo:hover{text-decoration:none}
.logo svg{width:34px;height:34px;flex:none}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-name{font-size:1.02rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.logo-tag{font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);
  cursor:pointer;color:var(--ink);
}
.nav-toggle .bars{display:block;position:relative;width:19px;height:2px;background:currentColor;transition:background-color .15s ease}
.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;
  transition:transform .22s ease,top .22s ease;
}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}

/* Underline-on-current rather than a pill. */
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  position:relative;padding:10px 12px;
  font-size:.95rem;font-weight:600;color:var(--body);
}
.nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}

.header-cta{display:flex;align-items:center;gap:12px;flex:none}
.header-cta .btn{padding:10px 18px;font-size:.92rem}

@media (max-width:980px){
  /* THE DRAWER. main.js sets .is-open, .nav-scrim.is-open and body.nav-open;
     this is Harbour's interpretation of them — a panel from the left rather
     than the right, and full width under 480. */
  .nav-toggle{display:inline-flex;order:3}
  .header-cta{display:none}
  .nav{
    position:fixed;inset:calc(var(--header-h) + var(--utility-h)) auto 0 0;
    width:min(320px,88vw);
    flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:18px var(--gutter) 40px;
    background:var(--bg);border-right:1px solid var(--line);
    box-shadow:18px 0 40px rgba(15,20,36,.14);
    transform:translateX(-105%);
    transition:transform .26s ease;
    overflow-y:auto;visibility:hidden;
  }
  .nav.is-open{transform:translateX(0);visibility:visible}
  .nav a{padding:14px 4px;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .nav-cta{margin-top:20px;border:0}
  .nav .nav-cta .btn{width:100%}
  .nav-scrim{
    position:fixed;inset:calc(var(--header-h) + var(--utility-h)) 0 0 0;z-index:99;
    background:rgba(12,16,32,.5);opacity:0;pointer-events:none;
    transition:opacity .26s ease;
  }
  .nav-scrim.is-open{opacity:1;pointer-events:auto}
}
@media (min-width:981px){
  .nav .nav-cta{display:none}
  .nav-scrim{display:none}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;background:var(--dark);color:var(--on-dark-muted);
  padding-block:clamp(56px,8vw,104px) 0;
}
.hero-inner{max-width:780px}
.hero h1{color:var(--on-dark);margin-bottom:.4em}
.hero-lead{font-size:clamp(1.02rem,.98rem + .4vw,1.2rem);max-width:64ch}
.hero-flag{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-light);
}
.hero-flag .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-light);flex:none}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-note{
  display:flex;align-items:center;gap:9px;margin:22px 0 0;
  font-size:.92rem;color:var(--on-dark-muted);
}
.hero-note svg{width:17px;height:17px;color:var(--accent-light);flex:none}

/* THE STATS OVERLAP THE FOOT OF THE HERO. The negative margin is matched by
   padding on the section that follows, so nothing is ever clipped and there
   is no horizontal overflow at any width — the layout audit checks both. */
.hero-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);
  margin-top:clamp(40px,6vw,72px);transform:translateY(clamp(28px,4vw,44px));
  overflow:hidden;
}
.hero-stats > div{background:var(--bg);padding:22px 20px;text-align:left}
.stat-num{display:block;font-size:clamp(1.7rem,1.4rem + 1.2vw,2.3rem);font-weight:800;color:var(--ink);line-height:1.1}
.stat-num .suffix{color:var(--accent)}
.stat-label{display:block;margin-top:6px;font-size:.86rem;color:var(--muted);line-height:1.45}

/* ==========================================================================
   Page hero (every page but home)
   ========================================================================== */

.page-hero{background:var(--bg-alt);border-bottom:1px solid var(--line);padding-block:clamp(38px,5vw,64px)}
.page-hero h1{margin-bottom:.35em}
.page-hero p{max-width:66ch;color:var(--muted);margin:0}
.crumbs{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:.85rem;color:var(--muted)}
.crumbs a{color:var(--muted);display:inline-block;padding:6px 0}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.5}

/* ==========================================================================
   Trust bar
   ========================================================================== */

.trustbar{background:var(--bg);border-bottom:1px solid var(--line);padding-block:clamp(52px,6vw,72px) 22px}
.trustbar ul{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px 26px;margin:0;padding:0;list-style:none;
}
.trustbar li{
  display:flex;align-items:center;gap:10px;margin:0;
  font-size:.92rem;font-weight:600;color:var(--body);
}
.trustbar svg{width:19px;height:19px;color:var(--accent);flex:none}

/* ==========================================================================
   Sections
   ========================================================================== */

.section{padding-block:var(--section)}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--dark);color:var(--on-dark-muted)}
.section--dark h2,.section--dark h3{color:var(--on-dark)}
.section--dark .eyebrow{color:var(--accent-light)}
.section--dark .stat-num{color:var(--on-dark)}
.section--dark .stat-label{color:var(--on-dark-muted)}

/* LEFT-ALIGNED BY DEFAULT, which is the single change that does most of the
   work of making this not Sentinel. */
.section-head{max-width:720px;margin:0 0 clamp(30px,4vw,48px)}
.section-head p{color:var(--muted);margin:0}
.section--dark .section-head p{color:var(--on-dark-muted)}
.section-head--left{margin-inline:0;text-align:left}

.eyebrow{
  display:block;margin-bottom:12px;
  font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);
}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px}

/* ==========================================================================
   The service index — Harbour's answer to a card grid
   ========================================================================== */

.service-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.service-index li{margin:0;border-bottom:1px solid var(--line)}
.service-index a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  padding:22px 4px;color:inherit;
}
.service-index a:hover{text-decoration:none;background:var(--bg-alt)}
.service-index .idx{
  font-size:.86rem;font-weight:800;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.service-index .body{display:flex;flex-direction:column;gap:4px;min-width:0}
.service-index .body strong{font-size:1.1rem;color:var(--ink);font-weight:800;letter-spacing:-.01em}
.service-index .body > span{color:var(--muted);font-size:.94rem;line-height:1.55}
.service-index .go{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;border-radius:50%;
  border:1px solid var(--line);color:var(--accent);
  transition:background-color .18s,border-color .18s,color .18s;
}
.service-index a:hover .go{background:var(--accent);border-color:var(--accent);color:#fff}
.service-index .go svg{width:16px;height:16px}
.index-more{margin-top:34px}

@media (max-width:560px){
  .service-index a{grid-template-columns:auto 1fr;gap:14px}
  .service-index .go{display:none}
}

/* ==========================================================================
   Service rows (the services page)
   ========================================================================== */

.service-row{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding-block:30px;border-bottom:1px solid var(--line);
}
.service-row:first-of-type{border-top:1px solid var(--line)}
.service-row .idx{font-size:.9rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:6px}
.service-row h3{display:flex;align-items:center;gap:10px;margin-bottom:.4em}
.service-row h3 svg{width:20px;height:20px;color:var(--accent);flex:none}
.service-row p{color:var(--muted);max-width:70ch}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;padding:6px 0}
.link-arrow svg{width:15px;height:15px;transition:transform .18s ease}
.link-arrow:hover svg{transform:translateX(4px)}

/* ==========================================================================
   Numbered stacks and rails
   ========================================================================== */

.reason-stack{display:flex;flex-direction:column;gap:8px}
.reason{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:24px 0;border-top:1px solid var(--line);
}
.reason-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border-radius:50%;
  background:var(--accent-wash);color:var(--accent);font-weight:800;
}
.reason h3{margin-bottom:.35em}
.reason p{color:var(--muted);margin:0}

.rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  list-style:none;margin:0;padding:0;
}
.rail-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rail li{background:var(--bg);padding:24px 22px;margin:0}
.section--alt .rail li{background:var(--bg)}
.rail h3{margin-bottom:.4em;font-size:1.05rem}
.rail p{margin:0;color:var(--muted);font-size:.94rem}
.vacancies-head{margin-top:56px}

/* ==========================================================================
   Ticks and timeline
   ========================================================================== */

.ticks{list-style:none;margin:0;padding:0}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:0 0 14px;color:var(--body)}
.ticks svg{width:19px;height:19px;color:var(--accent);margin-top:3px}
.ticks-2{columns:2;column-gap:40px}
.ticks-2 li{break-inside:avoid;display:flex;align-items:flex-start;gap:12px}
@media (max-width:760px){.ticks-2{columns:1}}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 26px 26px;border-left:2px solid var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);
}
.timeline .year{display:block;font-size:.82rem;font-weight:800;letter-spacing:.08em;color:var(--accent);margin-bottom:5px}
.timeline h3{margin-bottom:.3em;font-size:1.05rem}
.timeline p{margin:0;color:var(--muted);font-size:.94rem}

/* Five milestones side by side on a wide screen, stacked below it. */
.timeline-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
.timeline-row li{border-left:0;border-top:2px solid var(--line);padding:22px 0 0}
.timeline-row li::before{left:0;top:-7px}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.quote{background:transparent;border:0;padding:0;text-align:left}
.quote .marks{width:40px;height:40px;color:var(--accent);opacity:.25;margin-bottom:14px}
.quote blockquote{
  margin:0 0 24px;
  font-size:clamp(1.15rem,1.05rem + .6vw,1.5rem);
  line-height:1.5;color:var(--ink);font-weight:500;
}
.quote figcaption{display:flex;align-items:center;gap:14px}
.quote-avatar{width:48px;height:48px;border-radius:50%;flex:none}
.quote-name{display:block;font-weight:800;color:var(--ink)}
.quote-role{display:block;font-size:.88rem;color:var(--muted)}

.slider-controls{display:flex;align-items:center;gap:14px;margin-top:30px}
.slider-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--ink);cursor:pointer;transition:background-color .18s,color .18s,border-color .18s;
}
.slider-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.slider-btn svg{width:18px;height:18px}
.slider-dots{display:flex;gap:2px;margin-left:4px}
/* THE TARGET IS 24x24; THE DOT IS NOT. A 9px dot is a 9px tap target, which
   fails WCAG 2.2 AA and is genuinely hard to hit on a phone. The button is
   padded out to the minimum and background-clip:content-box keeps the paint
   inside the padding, so the dot still LOOKS like a dot. */
.slider-dots button{
  width:24px;height:25px;padding:8px 7px;border:0;
  background:var(--line);background-clip:content-box;
  border-radius:99px;cursor:pointer;transition:background-color .18s,width .18s;
}
.slider-dots button[aria-current="true"]{background:var(--accent);background-clip:content-box;width:38px}

/* ==========================================================================
   Split CTA band
   ========================================================================== */

.split-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(30px,5vw,64px)}
.split-cta p{margin-bottom:22px}
.cta-final h2{max-width:20ch}

/* ==========================================================================
   Contact cards and strips
   ========================================================================== */

.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px}
.contact-card{
  display:flex;flex-direction:column;gap:6px;
  padding:22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);color:inherit;
}
a.contact-card:hover{border-color:var(--accent);text-decoration:none}
.contact-card svg{width:20px;height:20px;color:var(--accent)}
.contact-card strong{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:800}
.contact-card > span{color:var(--ink);font-weight:600;line-height:1.5}
.contact-card--static > span{font-weight:500}

.contact-strip{margin-top:30px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.contact-strip h3{margin-bottom:.7em;font-size:1.02rem}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:0 0 14px}
.info-list li:last-child{margin-bottom:0}
.info-list svg{width:19px;height:19px;color:var(--accent);margin-top:3px}
.info-list strong{display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.info-list a{padding:4px 0;display:inline-block}
.info-list--row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.info-list--row li{margin:0}

.hours{list-style:none;margin:0 0 14px;padding:0}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);margin:0}
.hours li:last-child{border-bottom:0}
.hours .open{color:var(--ok);font-weight:700}

.map-embed{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.map-embed img{width:100%;display:block}

.figure-wide{margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.figure-wide img{width:100%;display:block}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3.5vw,38px);
}
.form-card h2{margin-bottom:.3em}
.error-code{font-size:clamp(3rem,2rem + 6vw,5rem);font-weight:800;color:var(--accent);opacity:.2;margin:0;line-height:1}

/* ==========================================================================
   Vacancy rows
   ========================================================================== */

.role{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.role h3{margin-bottom:.35em}
.role p{color:var(--muted);margin:0 0 12px;max-width:62ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:99px;
  background:var(--accent-wash);color:var(--accent-dark);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{background:var(--bg-alt);border-top:1px solid var(--line)}
.footer-top{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(28px,4vw,56px);padding-block:clamp(44px,6vw,72px);
}
.footer-about p{color:var(--muted);margin:16px 0 18px;max-width:46ch;font-size:.94rem}
.footer-col h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footer-list{list-style:none;margin:0;padding:0}
.footer-list li{margin:0}
/* Padded so every footer link clears 24px at 360, which a bare line box of
   .94rem text does not. */
.footer-list a{display:inline-block;padding:7px 0;color:var(--body);font-size:.94rem}
.footer-list a:hover{color:var(--accent);text-decoration:none}

.footer-contact{list-style:none;margin:0 0 18px;padding:0}
.footer-contact li{display:grid;grid-template-columns:auto 1fr;gap:11px;margin:0 0 9px;font-size:.94rem;color:var(--body)}
.footer-contact svg{width:17px;height:17px;color:var(--accent);margin-top:5px}
.footer-contact a{display:inline-block;padding:4px 0}

.socials{display:flex;gap:9px;flex-wrap:wrap}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;
  /* flex:none, or the row squeezes these to 23px wide at 360 and five
     36x36 buttons quietly become five sub-minimum targets. */
  width:36px;height:36px;flex:none;border-radius:var(--radius-sm);
  border:1px solid var(--line);color:var(--muted);background:var(--bg);
}
.socials a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.socials svg{width:17px;height:17px}

.footer-bar{background:var(--dark);color:var(--on-dark-muted)}
.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;padding-block:18px;font-size:.88rem;
}
.footer-bottom p{margin:0}
.credit a{color:var(--accent-light);font-weight:700;display:inline-block;padding:5px 3px;margin:-5px -3px}
.credit a:hover{color:#fff}

/* ==========================================================================
   Print
   ========================================================================== */

@media print{
  .utility,.site-header,.site-footer,.nav-scrim,.hero-actions,.slider-controls{display:none!important}
  body{color:#000}
  .hero,.page-hero,.section--dark{background:none!important;color:#000}
  .hero h1,.page-hero h1{color:#000}
}