@charset "utf-8";
/* ==========================================================================
   Bluewings Consultancy — design system
   Brand colours sampled from the logo artwork: navy #053482, blue #0973D8.
   Page canvas is pure #FFFFFF throughout; structure comes from hairlines and
   whitespace rather than boxes and shadows.
   ========================================================================== */

/* --- fonts (self-hosted; the site makes zero third-party requests) -------- */
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Zodiak;src:url(../fonts/zodiak-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Zodiak;src:url(../fonts/zodiak-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --- tokens -------------------------------------------------------------- */
:root{
  --navy:#053482; --navy-deep:#04265f; --navy-ink:#031b45;
  /* Working blue sampled from the logo artwork at 7.05:1 on white. The brighter
     #0973d8 measures only 4.71:1 — legal under WCAG AA but genuinely hard to
     read as 12px letterspaced eyebrows or as small link text. */
  --blue:#0054ba; --blue-dark:#004494; --blue-soft:#eef4fd;
  /* Pure black body copy, as requested. Headings match; captions sit a hair
     off black only so there is still some hierarchy between them. */
  --ink:#000000; --body:#000000; --muted:#1a1a1a;
  --line:#e5e9f0; --line-2:#d2dae7;
  /* interactive borders need 3:1 against white per WCAG 1.4.11 */
  --field:#6b7a94; --field-hover:#3f4d63;
  --white:#fff;
  --focus:#0973d8;

  --sans:Satoshi,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Zodiak,Georgia,"Times New Roman",serif;

  --fs-display:clamp(2.5rem,1.35rem + 4.9vw,4.75rem);
  --fs-hero:clamp(1.75rem,1.2rem + 2.6vw,3.25rem);
  --fs-h1:clamp(2.125rem,1.45rem + 2.9vw,3.5rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.95vw,2.75rem);
  --fs-h3:clamp(1.1875rem,1.06rem + 0.55vw,1.5rem);
  --fs-h4:clamp(1.0625rem,1.01rem + 0.24vw,1.1875rem);
  --fs-lede:clamp(1.0625rem,1rem + 0.42vw,1.3125rem);
  --fs-body:clamp(1rem,0.975rem + 0.11vw,1.0625rem);
  --fs-sm:0.9375rem;
  --fs-xs:0.8125rem;
  --fs-eyebrow:0.75rem;

  --gutter:clamp(1.25rem,4.6vw,3rem);
  --container:75rem;         /* 1200px */
  --container-wide:82.5rem;  /* 1320px */
  --sec:clamp(4rem,9vw,7.5rem);
  --r:4px; --r-lg:8px;
  --header-h:76px;
  --shadow:0 1px 2px rgba(5,52,130,.06),0 12px 32px -12px rgba(5,52,130,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;overflow-wrap:break-word;
}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink);font-weight:700;line-height:1.14;letter-spacing:-.021em}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);line-height:1.28}
h4{font-size:var(--fs-h4);line-height:1.35;letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0;padding:0}
img,svg,picture,video{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
::selection{background:var(--navy);color:#fff}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* --- layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--container-wide)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--line{border-top:1px solid var(--line)}
.grid{display:grid;gap:clamp(1.5rem,3.5vw,3rem)}
.measure{max-width:62ch}
.measure-sm{max-width:52ch}
.stack>*+*{margin-top:var(--gap,1rem)}
.center{text-align:center;margin-inline:auto}

/* --- type helpers -------------------------------------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:.625rem;
  margin:0 0 1.125rem;color:var(--blue);
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.eyebrow::before{content:"";width:1.75rem;height:2px;background:var(--blue);flex:none}
.eyebrow--center{justify-content:center}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--body)}
.display{font-size:var(--fs-display);letter-spacing:-.031em;line-height:1.03}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.hl{color:var(--blue)}
.sm{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.muted{color:var(--muted)}
.num{font-family:var(--serif);font-weight:400;color:var(--navy);font-variant-numeric:tabular-nums}

/* prose links get a considered underline rather than a browser default */
.prose a,.link{
  color:var(--blue);font-weight:500;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:background-size .3s var(--ease),color .2s
}
.prose a:hover,.link:hover{color:var(--blue-dark);background-size:0 1px;background-position:100% 100%}

/* --- buttons ------------------------------------------------------------- */
.btn{
  --btn-bg:var(--blue);--btn-fg:#fff;--btn-bd:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8125rem 1.5rem;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);border-radius:var(--r);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.005em;text-align:center;
  cursor:pointer;transition:background-color .2s var(--ease),border-color .2s,color .2s,transform .2s var(--ease);
}
.btn:hover{--btn-bg:var(--blue-dark);--btn-bd:var(--blue-dark);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--navy{--btn-bg:var(--navy);--btn-bd:var(--navy)}
.btn--navy:hover{--btn-bg:var(--navy-deep);--btn-bd:var(--navy-deep)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:var(--field)}
.btn--ghost:hover{--btn-bg:var(--blue-soft);--btn-fg:var(--navy);--btn-bd:var(--blue)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--navy);--btn-bd:#fff}
.btn--light:hover{--btn-bg:var(--blue-soft);--btn-bd:var(--blue-soft);--btn-fg:var(--navy)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}
.btn--outline-light:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:#fff;--btn-fg:#fff}
.btn--wide{width:100%}
.btn .ico{width:18px;height:18px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* arrow link */
.arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--fs-sm);color:var(--blue)}
.arrow .ico{width:16px;height:16px;transition:transform .25s var(--ease)}
.arrow:hover .ico{transform:translateX(4px)}

/* --- header -------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease),border-color .25s;
}
.site-header[data-scrolled="true"]{box-shadow:0 1px 0 var(--line),0 8px 28px -18px rgba(5,52,130,.4);border-bottom-color:transparent}
.header-in{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}

.brand{--brand-size:1.1875rem;display:flex;align-items:center;gap:.6875rem;margin-right:auto;padding-block:.5rem}
.brand__mark{width:58px;height:33px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1}
/* Both lines derive from one size so the lockup keeps its proportions at every
   breakpoint, which lets a single em-based tracking value hold everywhere. */
.brand__name{font-size:var(--brand-size);font-weight:900;color:var(--navy);letter-spacing:-.014em}
/* The logo's descriptor lockup: rules flanking CONSULTANCY, filling out to the
   width of the wordmark above. flex:1 on the rules means they always meet the
   wordmark's edges exactly, whatever the brand size. */
.brand__sub{
  display:flex;align-items:center;gap:.5em;
  margin-top:.34em;font-size:calc(var(--brand-size) * .45);
  font-weight:700;color:var(--blue);text-transform:uppercase;line-height:1
}
.brand__sub::before,.brand__sub::after{
  content:"";flex:1;height:1px;background:currentColor;opacity:.55
}
/* letter-spacing leaves a trailing space after the final glyph; the negative
   margin cancels it so the right-hand rule sits the same distance from the
   last letter as the left-hand rule does from the first. */
.brand__sub span{letter-spacing:.18em;margin-right:-.18em}

.nav{display:none}
.nav>ul{display:flex;align-items:center;gap:.25rem;list-style:none}
.nav a{
  position:relative;display:block;padding:.5rem .75rem;border-radius:var(--r);
  color:var(--ink);font-size:var(--fs-sm);font-weight:500;transition:color .2s
}
.nav a::after{
  content:"";position:absolute;left:.75rem;right:.75rem;bottom:.125rem;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--navy)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-cta{display:none}

/* services dropdown */
.has-menu{position:relative}
.menu-btn{
  display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;
  background:none;border:0;border-radius:var(--r);
  color:var(--ink);font-size:var(--fs-sm);font-weight:500;cursor:pointer
}
.menu-btn .ico{width:12px;height:12px;transition:transform .25s var(--ease);color:var(--muted)}
.menu-btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.menu-btn:hover{color:var(--navy)}
.dropdown{
  position:absolute;top:calc(100% + .5rem);left:-.5rem;z-index:5;
  /* a definite width: without one the box sizes to max-content and the
     descriptions push it past the viewport edge, which scrolls the page
     sideways even while the menu is closed */
  width:22rem;max-width:calc(100vw - 2rem);padding:.5rem;
  /* never taller than the space below the header; scrolls if it would be */
  max-height:calc(100vh - var(--header-h) - 2.5rem);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  display:block;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s
}
.has-menu[data-open="true"] .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:block;padding:.625rem .75rem;border-radius:var(--r);color:var(--ink);font-weight:500}
.dropdown a::after{display:none}
.dropdown a:hover{background:var(--blue-soft);color:var(--navy)}
.dropdown .d-sub{display:block;margin-top:2px;font-size:var(--fs-xs);font-weight:400;color:var(--muted)}

/* mobile menu toggle */
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-.5rem;
  background:none;border:1px solid var(--line);border-radius:var(--r);cursor:pointer
}
.burger span{position:relative;display:block;width:18px;height:1.5px;background:var(--navy);transition:transform .25s var(--ease),background-color .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--navy);transition:transform .25s var(--ease),top .25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:var(--header-h) 0 0;z-index:55;
  display:flex;flex-direction:column;
  padding:1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background:#fff;overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s
}
.mobile-nav[data-open="true"]{visibility:visible;opacity:1;transform:none}
.mobile-nav ul{list-style:none}
.mobile-nav>ul>li{border-bottom:1px solid var(--line)}
.mobile-nav>ul>li>a,.m-acc__btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:1rem 0;background:none;border:0;
  color:var(--ink);font-size:1.0625rem;font-weight:700;text-align:left;cursor:pointer
}
.m-acc__btn .ico{width:14px;height:14px;color:var(--muted);transition:transform .25s var(--ease)}
.m-acc__btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.m-acc__panel{overflow:hidden;max-height:0;transition:max-height .3s var(--ease)}
.m-acc__panel a{display:block;padding:.6875rem 0 .6875rem 1rem;border-left:2px solid var(--line);color:var(--body);font-size:var(--fs-sm);font-weight:500}
.m-acc__panel a:hover{color:var(--blue);border-left-color:var(--blue)}
.mobile-nav__foot{margin-top:auto;padding-top:2rem;display:grid;gap:.75rem}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(2.5rem,5vw,4.25rem) clamp(3rem,6vw,5rem);overflow:hidden}
.hero__grid{display:grid;gap:clamp(2.25rem,5vw,4rem);align-items:center}
.hero__title{font-size:var(--fs-hero);letter-spacing:-.034em;line-height:1.07;text-wrap:pretty}
@supports (container-type:inline-size){
  .hero__body{container-type:inline-size}
  .hero__title{font-size:clamp(1.375rem,7.85cqi,3.25rem)}
}
/* the accent half of the headline stays in the same face — a serif at this size
   reads as a mismatch against the black geometric sans, not as contrast */
.hero__title em{display:inline-block;font-style:normal;color:var(--blue)}
.hero__lede{margin-top:1.5rem;max-width:33rem}
.hero__cta{margin-top:2.25rem}
.hero__media{position:relative}
.hero__img{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:4/3}

/* --- hero slideshow -------------------------------------------------------
   Cross-fade rather than slide: no horizontal motion means nothing can spill
   out of the layout, and it reads calmer. */
.hero__slides{position:relative;width:100%;aspect-ratio:4/3;
  border-radius:var(--r);overflow:hidden;background:var(--navy)}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease)}
.hero__slide.is-active{opacity:1}
.hero__slide picture,.hero__slide img{display:block;width:100%;height:100%;object-fit:cover}

.hero__controls{
  position:absolute;left:.875rem;bottom:.875rem;z-index:2;
  display:flex;align-items:center;gap:.125rem;
  padding:.25rem .375rem;border-radius:999px;
  background:rgba(3,27,69,.78)
}
@supports (backdrop-filter:blur(6px)){
  .hero__controls{background:rgba(3,27,69,.55);backdrop-filter:blur(8px)}
}
/* 8px dot, 24px hit area — WCAG 2.5.8 */
.hero__dot{
  display:grid;place-items:center;width:24px;height:24px;padding:0;
  background:none;border:0;cursor:pointer
}
.hero__dot::before{
  content:"";width:7px;height:7px;border-radius:999px;
  background:rgba(255,255,255,.5);transition:background-color .3s var(--ease),width .3s var(--ease)
}
.hero__dot:hover::before{background:rgba(255,255,255,.8)}
.hero__dot.is-current::before{width:20px;background:#fff}
.hero__pause{
  display:grid;place-items:center;width:26px;height:24px;padding:0;margin-left:.125rem;
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.8)
}
.hero__pause:hover{color:#fff}
.hero__ico{width:13px;height:13px;fill:currentColor;stroke:none;grid-area:1/1}
.hero__ico--play{display:none}
.hero__pause[aria-pressed="true"] .hero__ico--pause{display:none}
.hero__pause[aria-pressed="true"] .hero__ico--play{display:block}
.hero__controls :focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:999px}
.hero__badge{
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm)
}
.hero__badge span{display:inline-flex;align-items:center;gap:.5rem}
.hero__badge .ico{width:16px;height:16px;color:var(--blue);flex:none}

/* --- audience router ------------------------------------------------------
   Two doors straight off the hero: employers and jobseekers want completely
   different things, and the services grid below only serves the first. */
.routes{display:grid;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.route{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.75rem,3.6vw,3rem);background:#fff;color:inherit;
  transition:background-color .3s var(--ease)
}
.route + .route{border-top:1px solid var(--line)}
.route--tint{background:var(--blue-soft)}
/* the working blue now clears AA on the tint on its own; the darker override
   this replaces is no longer needed */
.route:hover{background:#fafcff}
.route--tint:hover{background:#e4eefb}
.route__label{
  display:flex;align-items:center;gap:.625rem;margin-bottom:1.125rem;
  color:var(--blue);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;line-height:1
}
.route__label::before{content:"";width:1.75rem;height:2px;background:var(--blue);flex:none}
.route h2{font-size:clamp(1.375rem,1.15rem + .95vw,1.75rem);line-height:1.22;text-wrap:balance}
.route p{margin-top:.875rem;max-width:42ch;font-size:var(--fs-sm);line-height:1.62}
.route .arrow{margin-top:auto;padding-top:1.75rem}
.route .ico{transition:transform .25s var(--ease)}
.route:hover .ico{transform:translateX(4px)}

/* --- section head -------------------------------------------------------- */
.sec-head{display:grid;gap:1.25rem;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.sec-head h2{text-wrap:balance}
.sec-head p{max-width:56ch}
.sec-head--split{align-items:end}

/* --- cards --------------------------------------------------------------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.75rem,3vw,2.5rem);background:#fff;
  transition:background-color .3s var(--ease)
}
/* a rule that draws itself in across the top on hover — enough signal without
   resorting to a shadow, which the rest of the page avoids */
.card--link::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease)
}
.card--link:hover::before{transform:scaleX(1)}
.card:hover{background:#fcfdff}

.card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem}
.card__n{
  font-family:var(--serif);font-size:1rem;color:var(--blue);
  letter-spacing:.08em;line-height:1;font-variant-numeric:tabular-nums
}
.card__ico{width:28px;height:28px;margin-bottom:1.375rem;color:var(--navy);opacity:.42;
  transition:opacity .3s var(--ease),color .3s var(--ease)}
.card__head .card__ico{margin-bottom:0}   /* already spaced by the header row */
.card:hover .card__ico{opacity:1;color:var(--blue)}

/* headings read as headings, not as links — the arrow carries the blue */
.card h3{margin-bottom:.8125rem}
.card h3 a{color:var(--ink);transition:color .25s var(--ease)}
.card:hover h3 a{color:var(--navy)}
.card p{font-size:var(--fs-sm);line-height:1.62;color:var(--body)}
/* pinned to the bottom so the links line up however the headings wrap */
.card .arrow{margin-top:auto;padding-top:1.75rem;align-self:start}
.card--link::after{content:"";position:absolute;inset:0}
.card ul{margin-top:1.125rem}

/* --- service cards --------------------------------------------------------
   Photography-led. The earlier hairline grid was too sparse to carry a whole
   section on its own: no imagery, no scale contrast, nothing to look at. */
.svc-grid{display:grid;gap:clamp(1.25rem,2.2vw,1.75rem)}
.svc{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .3s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)
}
.svc::after{content:"";position:absolute;inset:0}          /* whole card is the link */
.svc:hover{
  border-color:#bcd4f2;transform:translateY(-4px);
  box-shadow:0 22px 44px -28px rgba(5,52,130,.5)
}
.svc__media{position:relative;overflow:hidden;background:var(--navy);line-height:0}
.svc__media img{width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .7s var(--ease)}
.svc:hover .svc__media img{transform:scale(1.045)}
.svc__n{
  position:absolute;left:0;bottom:0;z-index:1;
  padding:.4375rem .8125rem;background:var(--blue);color:#fff;
  font-family:var(--serif);font-size:.9375rem;line-height:1;letter-spacing:.08em;
  border-radius:0 var(--r) 0 0;font-variant-numeric:tabular-nums
}
.svc__body{display:flex;flex-direction:column;flex:1;
  padding:clamp(1.375rem,2.3vw,1.75rem) clamp(1.375rem,2.3vw,1.75rem) clamp(1.25rem,2vw,1.5rem)}
.svc h3{font-size:clamp(1.125rem,1rem + .5vw,1.3125rem);line-height:1.28;margin-bottom:.5625rem}
.svc h3 a{color:var(--ink);transition:color .25s var(--ease)}
.svc:hover h3 a{color:var(--blue)}
.svc p{font-size:var(--fs-sm);line-height:1.6;color:var(--body)}
.svc .arrow{margin-top:auto;padding-top:1.25rem;align-self:start}
.svc .arrow .ico{transition:transform .25s var(--ease)}
.svc:hover .arrow .ico{transform:translateX(4px)}

/* hairline-separated points — a short claim, then the detail behind it.
   The plain tick list this replaces ran straight into the lede above it and
   read as one undifferentiated block of text. */
.flist{list-style:none;display:grid;gap:0;margin-top:clamp(1.75rem,3vw,2.5rem)}
.flist li{
  display:flex;gap:1rem;padding:1.125rem 0;
  border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.6
}
.flist li:last-child{border-bottom:1px solid var(--line)}
.flist .ico{width:19px;height:19px;margin-top:.3125rem;color:var(--blue);flex:none}
.flist strong{
  display:block;margin-bottom:.1875rem;
  color:var(--ink);font-size:var(--fs-body);font-weight:700;letter-spacing:-.008em
}
.flist div{color:var(--body)}
/* Two columns for long lists. Every row carries only a top rule, so the
   pattern holds for an odd number of items as well as an even one. */
.flist--two li:last-child{border-bottom:0}

/* tick list */
.ticks{list-style:none;display:grid;gap:.8125rem}
.ticks li{display:flex;gap:.75rem;font-size:var(--fs-sm);line-height:1.6}
.ticks .ico{width:19px;height:19px;margin-top:.125rem;color:var(--blue);flex:none}

/* --- service page hero ---------------------------------------------------
   The service pages opened on a plain text block while every other landing
   surface leads with a photograph. */
.page-hero{padding-block:clamp(2.25rem,4.5vw,3.5rem) clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line)}
.page-hero__grid{display:grid;gap:clamp(2rem,4.5vw,3.5rem);align-items:center}
.page-hero h1{
  font-size:clamp(1.875rem,1.35rem + 2.2vw,2.875rem);
  letter-spacing:-.03em;line-height:1.1;text-wrap:pretty
}
.page-hero .lede{margin-top:1.25rem;max-width:34rem}
.page-hero .btn-row{margin-top:2rem}
.page-hero__media img{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:4/3}

/* --- form card ------------------------------------------------------------
   Forms sat loose on the page; a bordered panel gives them edges and makes the
   page read as "here is the thing to fill in". */
.form-card{
  padding:clamp(1.5rem,3vw,2.25rem);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)
}

/* --- help card ------------------------------------------------------------
   A tinted aside for pages where the next step is simply to call us. */
.help-card{
  padding:clamp(1.5rem,3vw,2rem);
  background:var(--blue-soft);border-radius:var(--r-lg)
}
.help-card h2,.help-card h3{font-size:var(--fs-h4);margin-bottom:.625rem}
.help-card p{font-size:var(--fs-sm);color:var(--body);max-width:34ch}
.help-card .btn-row{margin-top:1.5rem}
.help-card .btn--ghost{--btn-bd:#a8c6ea}

/* --- media + text split -------------------------------------------------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split__media img{width:100%;border-radius:var(--r);object-fit:cover}

@media (min-width:60em){
  /* the points list is far taller than the photograph; pinning the image keeps
     the two columns visually tied together instead of leaving a long gap */
  .split--why,.split--process,.split--faq,.split--form{align-items:start}
  .split--why .split__media,
  .split--process > div:first-child,
  .split--faq > div:first-child{position:sticky;top:calc(var(--header-h) + 2rem)}
  /* a deeper crop gives the media column presence against a much taller list */
  .split--why .split__media img{aspect-ratio:1/1}
}

/* --- process steps -------------------------------------------------------
   Numerals carried at display size so the sequence reads at a glance, and the
   body held to a sane measure — run full-width these lines hit roughly 150
   characters, about double what is comfortable to read. */
.steps{list-style:none;display:grid;gap:0}
.step{
  display:grid;gap:.25rem 1.375rem;align-items:start;
  padding:clamp(1.75rem,3vw,2.25rem) 0;border-top:1px solid var(--line)
}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{
  font-family:var(--serif);font-size:clamp(1.875rem,1.4rem + 1.5vw,2.5rem);
  line-height:.86;color:var(--blue);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums
}
.step h3{font-size:var(--fs-h4)}
.step p{font-size:var(--fs-sm);margin-top:.5rem;line-height:1.62;max-width:56ch}

/* a large standalone statement — the brand line, given room to breathe */
.statement{max-width:46rem;margin:0 auto;text-align:center}
.statement__mark{width:clamp(68px,8vw,104px);height:auto;margin:0 auto clamp(1.25rem,2.5vw,1.75rem)}
.statement blockquote{margin:0}
.statement blockquote p{
  font-size:clamp(1.625rem,1.1rem + 2.3vw,2.75rem);font-weight:700;
  line-height:1.16;letter-spacing:-.028em;color:var(--navy);text-wrap:balance
}
.statement figcaption{
  margin-top:clamp(1.125rem,2vw,1.5rem);margin-inline:auto;max-width:48ch;
  font-size:var(--fs-body);line-height:1.6;color:var(--muted)
}

/* a wide photographic band, held inside the container so it can never scroll */
.band-img{border-radius:var(--r-lg);overflow:hidden;line-height:0}
.band-img img{width:100%;aspect-ratio:21/9;object-fit:cover}

/* --- industry tiles ------------------------------------------------------ */
.tiles{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.tile{position:relative;overflow:hidden;border-radius:var(--r);background:var(--navy)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.62;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.tile:hover img{opacity:.5;transform:scale(1.03)}
.tile__body{position:absolute;inset:auto 0 0;padding:clamp(1.125rem,2.5vw,1.5rem);
  background:linear-gradient(to top,rgba(3,27,69,.94),rgba(3,27,69,.55) 55%,transparent)}
.tile h3{color:#fff;font-size:var(--fs-h4)}
.tile p{margin-top:.3125rem;color:rgba(255,255,255,.82);font-size:var(--fs-xs);line-height:1.5}

/* --- quote / callout ----------------------------------------------------- */
.callout{padding:clamp(1.5rem,3vw,2rem);border-left:3px solid var(--blue);background:var(--blue-soft);border-radius:0 var(--r) var(--r) 0}
.callout p{color:var(--navy-ink)}

/* --- CTA band ------------------------------------------------------------ */
.band{background:var(--navy);color:rgba(255,255,255,.9);border-radius:var(--r-lg);padding:clamp(2.25rem,5vw,4rem);position:relative;overflow:hidden}
.band h2{color:#fff;max-width:20ch;text-wrap:balance}
.band p{margin-top:1rem;max-width:52ch;color:rgba(255,255,255,.88)}
.band .btn-row{margin-top:2rem}
.band__wing{position:absolute;right:-2rem;top:50%;translate:0 -50%;width:24rem;opacity:.09;pointer-events:none}

/* --- FAQ / accordion ----------------------------------------------------- */
.faq{display:grid}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__btn{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;width:100%;
  padding:1.375rem 0;background:none;border:0;text-align:left;cursor:pointer;
  color:var(--ink);font-size:var(--fs-h4);font-weight:700;line-height:1.4;letter-spacing:-.012em
}
.faq__btn:hover{color:var(--navy)}
.faq__ico{position:relative;flex:none;width:20px;height:20px;margin-top:.25rem}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;background:var(--blue);transition:transform .3s var(--ease)}
.faq__ico::after{transform:rotate(90deg)}
.faq__btn[aria-expanded="true"] .faq__ico::after{transform:rotate(0)}
.faq__panel{overflow:hidden;max-height:0;transition:max-height .32s var(--ease)}
.faq__panel>div{padding-bottom:1.5rem;max-width:68ch}
.faq__panel p+p{margin-top:.75rem}

/* --- forms --------------------------------------------------------------- */
.form{display:grid;gap:1.125rem}
.field{display:grid;gap:.4375rem}
.field label{font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.field .req{color:var(--blue)}
.field .hint{font-size:var(--fs-xs);color:var(--muted)}
.input,.select,.textarea{
  width:100%;min-height:48px;padding:.75rem .875rem;
  background:#fff;color:var(--ink);
  border:1px solid var(--field);border-radius:var(--r);
  font-size:16px;line-height:1.5;                 /* 16px avoids iOS zoom-on-focus */
  transition:border-color .18s,box-shadow .18s
}
.textarea{min-height:8.5rem;resize:vertical}
.select{appearance:none;padding-right:2.5rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%233f4d63' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9375rem center;background-size:12px}
.input:hover,.select:hover,.textarea:hover{border-color:var(--field-hover)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(9,115,216,.16)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:#c62828;box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.err{display:none;font-size:var(--fs-xs);font-weight:500;color:#b71c1c}
.field[data-invalid="true"] .err{display:block}
/* consent checkbox — native control tinted to brand, kept a comfortable size */
.field--check{gap:.5rem}
.check{display:flex;align-items:flex-start;gap:.75rem;padding-block:.25rem;
  font-size:var(--fs-sm);font-weight:400;line-height:1.55;color:var(--body);cursor:pointer}
.check input[type="checkbox"]{
  flex:none;width:22px;height:22px;margin:.0625rem 0 0;
  accent-color:var(--blue);cursor:pointer}
.check input[type="checkbox"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.check a{font-weight:500}
.field[data-invalid="true"] .check input[type="checkbox"]{outline:2px solid #c62828;outline-offset:2px}

.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.form__note{font-size:var(--fs-xs);color:var(--muted)}
.form-status{display:none;padding:.9375rem 1.125rem;border-radius:var(--r);font-size:var(--fs-sm);font-weight:500}
.form-status[data-state="ok"]{display:block;background:#eefaf1;border:1px solid #b7e4c4;color:#1b5e20}
.form-status[data-state="err"]{display:block;background:#fdeded;border:1px solid #f3c2c2;color:#b71c1c}
.form-status[data-state="busy"]{display:block;background:var(--blue-soft);border:1px solid #c5dcf8;color:var(--navy)}

/* --- contact rail -------------------------------------------------------- */
.rail{display:grid;gap:0}
.rail__row{display:flex;gap:1rem;padding:1.25rem 0;border-top:1px solid var(--line)}
.rail__row:last-child{border-bottom:1px solid var(--line)}
.rail__ico{width:22px;height:22px;color:var(--blue);flex:none;margin-top:.1875rem}
.rail dt{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rail dd{margin:.3125rem 0 0;font-size:var(--fs-body);color:var(--ink);font-weight:500;font-style:normal}
.rail a{color:var(--ink)}
.rail a:hover{color:var(--blue)}

/* --- map consent card ---------------------------------------------------- */
.map{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--blue-soft)}
.map__ph{display:grid;place-items:center;gap:1rem;padding:clamp(2.5rem,7vw,5rem) 1.5rem;text-align:center}
.map__ph .ico{width:34px;height:34px;color:var(--blue)}
.map__ph p{max-width:44ch;font-size:var(--fs-sm)}
.map iframe{display:block;width:100%;height:clamp(20rem,45vw,26rem);border:0}

/* --- breadcrumbs --------------------------------------------------------- */
.crumbs{padding-block:1rem;border-bottom:1px solid var(--line)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none;font-size:var(--fs-xs);color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--line-2)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500}

/* --- page header --------------------------------------------------------- */
.page-head{padding-block:clamp(2.75rem,6vw,4.5rem) clamp(2.25rem,5vw,3.5rem);border-bottom:1px solid var(--line)}
.page-head h1{max-width:20ch;text-wrap:balance}
.page-head p{margin-top:1.25rem;max-width:56ch}

/* --- footer ---------------------------------------------------------------
   Four columns of similar weight. The previous layout put the logo, blurb and
   every contact detail in one tall column beside three short link lists, so it
   sat badly out of balance with a large empty area on the right. */
.site-footer{
  margin-top:var(--sec);background:var(--navy-ink);
  color:rgba(255,255,255,.82);font-size:var(--fs-sm)
}
.footer-top{display:grid;gap:clamp(2.25rem,4vw,3rem);padding-block:clamp(3rem,6vw,4.5rem)}
.site-footer h2{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72)
}
.site-footer ul{list-style:none;display:grid;gap:.125rem;margin-top:1rem}
.site-footer a{color:rgba(255,255,255,.86);transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer ul a{display:inline-block;padding-block:.4375rem}

.footer-brand__mark{width:clamp(132px,15vw,150px);height:auto}
.footer-brand p{margin-top:1.375rem;max-width:32ch;color:rgba(255,255,255,.78);line-height:1.6}

.footer-contact{display:grid;gap:.875rem;margin-top:1rem;font-style:normal}
.footer-contact a,.footer-hours{display:flex;align-items:flex-start;gap:.625rem;line-height:1.5}
.footer-contact a{color:#fff;font-weight:500;padding-block:.1875rem}
.footer-hours{color:rgba(255,255,255,.82)}
.footer-contact .ico{width:17px;height:17px;margin-top:.1875rem;color:var(--blue);flex:none}

/* coverage strip, full width across the foot of the columns */
.footer-reach{
  display:grid;gap:.5rem;padding-block:1.5rem;
  border-top:1px solid rgba(255,255,255,.1)
}
.footer-reach p{color:rgba(255,255,255,.82);line-height:1.6}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.875rem 1.5rem;align-items:center;
  padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--fs-xs);color:rgba(255,255,255,.7)
}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0}
.footer-bottom ul a{padding-block:.375rem}
.credit{display:inline-flex;align-items:center;gap:.375rem;color:rgba(255,255,255,.7)}
.credit__heart{width:13px;height:13px;color:#ff6478;flex:none}
.credit a{display:inline-block;padding-block:.25rem;color:rgba(255,255,255,.85);font-weight:700}
.credit a:hover{color:#fff}

/* --- sticky mobile action bar ------------------------------------------- */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#fff;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px -14px rgba(5,52,130,.45)
}
.action-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  min-height:56px;padding:.5rem .25rem;color:var(--navy);font-size:.6875rem;font-weight:700;letter-spacing:.02em}
.action-bar a+a{border-left:1px solid var(--line)}
.action-bar .ico{width:19px;height:19px;color:var(--blue)}
.action-bar a:active{background:var(--blue-soft)}

/* keep the sticky action bar from covering the end of the page */
@media (max-width:59.99em){
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  /* roomier footer targets on touch screens */
  .site-footer ul a,.footer-bottom ul a{padding-block:.625rem}
  .footer-contact a{padding-block:.375rem}
}

/* small layout utilities used by page content */
[data-mt]{margin-top:2rem}
.mt{margin-top:2rem}
.sprite{display:none}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico--fill{fill:currentColor;stroke:none}

/* tag list — used on service pages for role and scenario chips */
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}

/* --- misc ---------------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:.75rem 1.25rem;background:var(--navy);color:#fff;font-weight:700;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tag{display:inline-block;padding:.3125rem .625rem;border:1px solid var(--line-2);border-radius:2px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.notice{padding:1rem 1.25rem;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-sm)}
.prose{max-width:70ch}
.prose h2{margin-top:2.75rem;margin-bottom:1rem;font-size:var(--fs-h3)}
.prose h3{margin-top:2rem;margin-bottom:.625rem;font-size:var(--fs-h4)}
.prose p+p,.prose ul+p,.prose p+ul{margin-top:1rem}
.prose ul{padding-left:1.125rem;display:grid;gap:.5rem}
.prose li{padding-left:.25rem}
.prose>:first-child{margin-top:0}

/* --- reveal animation ---------------------------------------------------- */
.hero__slide{opacity:0}
.hero__slide.is-active{opacity:1}
:root:not(.js) .hero__controls{display:none}

.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.is-in{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   Breakpoints — mobile first
   ========================================================================== */
@media (min-width:37.5em){            /* 600px */
  .cards--2,.cards--3,.cards--4{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:auto 1fr}
  .btn-row .btn{width:auto}
}
@media (min-width:48em){              /* 768px */
  .routes{grid-template-columns:1fr 1fr}
  .route + .route{border-top:0;border-left:1px solid var(--line)}
  .footer-top{grid-template-columns:1fr 1fr}
  .sec-head--split{grid-template-columns:1.25fr 1fr;gap:2.5rem}
  .split{grid-template-columns:1fr 1fr}
  .split--wide-media{grid-template-columns:1fr 1.2fr}
  .split--why{grid-template-columns:.92fr 1.08fr}
  .page-hero__grid{grid-template-columns:1.05fr .95fr}
  .page-hero__media img{aspect-ratio:5/4}
  .flist--two{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.5rem)}
  .split--process{grid-template-columns:.8fr 1.2fr}
  .split--faq{grid-template-columns:.8fr 1.2fr}
  .split--form{grid-template-columns:.85fr 1.15fr}
  .steps--grid{grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,5vw,4.5rem)}
  .steps--grid .step:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .split--reverse .split__media{order:2}
}
@media (min-width:60em){              /* 960px */
  :root{--header-h:84px}
  .nav{display:block}
  .header-cta{display:inline-flex}
  .burger{display:none}
  .mobile-nav{display:none}
  .action-bar{display:none}
  body{padding-bottom:0!important}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .hero__grid{grid-template-columns:1.02fr .98fr;align-items:stretch}
  .hero__media{display:flex}
  .hero__media picture{display:block;width:100%}
  .hero__img{height:100%;aspect-ratio:auto;min-height:26rem}
  .hero__slides{height:100%;aspect-ratio:auto;min-height:26rem}
  .footer-top{grid-template-columns:1.25fr .9fr .9fr 1.15fr}
  .footer-reach{grid-template-columns:auto 1fr;gap:.5rem 2.5rem;align-items:baseline}
  .footer-bottom{flex-wrap:nowrap;justify-content:space-between}
  .footer-bottom>ul{margin-inline:auto}
}
@media (min-width:75em){              /* 1200px */
  .cards--4{grid-template-columns:repeat(4,1fr)}
  .hero__grid{grid-template-columns:1.02fr .98fr;gap:4rem}
}

/* the hero image runs to the viewport edge on large screens — editorial, and it
   stops the layout reading like a centred template */
@media (min-width:75em){
  .hero{padding-right:0}
  .hero__media{margin-right:calc((100vw - var(--container)) / -2)}
  .hero__img{border-radius:var(--r) 0 0 var(--r);min-height:31rem}
  .hero__slides{border-radius:var(--r) 0 0 var(--r);min-height:31rem}
}

/* very small phones */
@media (max-width:22.5em){            /* 360px */
  :root{--gutter:1rem}
  .brand{--brand-size:1.0625rem}
  .action-bar a{font-size:.625rem}
}

@media print{
  .site-header,.action-bar,.mobile-nav,.band,.btn{display:none!important}
  body{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em}
}