/* ==========================================================================
   Booked Wild - Services
   Shared sheet for /services/ and the service pages that will hang off it.
   Palette, radii, type ramp and gutters are the site's, taken from the
   homepage bundle by way of assets/journal.css.
   ========================================================================== */
/* ===========================================================================
   Booked Wild — Journal
   Shared styles for /journal/ and article pages.

   Every colour, font, radius and type ramp below is lifted from the homepage
   bundle so the Journal reads as part of the same site. The homepage itself is
   a generated single-file bundle whose styles live inline; this sheet exists
   because the Journal pages are ordinary static HTML and cannot reach them.
   Keep the two in sync if the homepage design changes.
   =========================================================================== */

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/chivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/chivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/chivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/chivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/chivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/chivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --ink:#0C2A1C; --ink-2:#0A1F14; --card:#123626; --body:#22452F; --muted:#5A7264;
  --cream:#F2F6EE; --tint:#E9EFE4; --line:#D3E0CE; --line-2:#C3D3BF;
  --accent:#3E8E4F; --accent-soft:#9FDCA9; --accent-mid:#7FC98B; --field:#1E6B3C;
  --white:#FFFFFF;
  --r-pill:999px; --r-card:24px; --r-md:18px; --r-sm:12px;
  --pad:40px; --max:1560px; --bw-play:running;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:'Schibsted Grotesk',Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:#155C3A;text-decoration:none}
a:hover{color:var(--ink)}
p{text-wrap:pretty;margin:0}
h1,h2,h3{margin:0}
:focus-visible{outline:3px solid var(--accent-soft);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-80px;background:var(--white);color:var(--ink);
  padding:12px 18px;border-radius:var(--r-sm);z-index:300;font-family:'Karla',sans-serif;
  font-weight:600;transition:top .2s ease}
.skip:focus{top:12px}

/* ---- header: identical behaviour to the rest of the site ----------------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:22px var(--pad);background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.hdr.is-stuck{background:rgba(242,246,238,.94);backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:var(--line);box-shadow:0 8px 28px rgba(12,42,28,.07)}
.logo{font-family:'Chivo',sans-serif;font-weight:900;font-size:25px;letter-spacing:-.03em;
  line-height:1;color:var(--white);display:block;transition:color .3s ease}
.logo span{color:var(--accent-soft)}
.hdr.is-stuck .logo{color:var(--ink)}
.hdr.is-stuck .logo span{color:#2E7D42}
/* The logo is set type on desktop, which is correct there. Below the burger
   breakpoint it becomes the supplied artwork instead: the reversed file over the
   dark hero and the open menu, the standard file once the header goes cream.
   Height-only sizing keeps the 5546:730 artwork in proportion. */
.logo-link{display:flex;align-items:center}
.logo-img{display:none;height:26px;width:auto}
.nav{display:flex;align-items:center;gap:34px}
/* nowrap: with six items the flex children shrink below their content width just
   above the 1024px burger breakpoint, breaking "Our work" into two lines. The
   labels stay on one line instead; measured at 1025px the nav ends at 793px
   against a CTA starting at 817px, so nothing collides. */
.nav a{font-family:'Karla',sans-serif;font-size:15px;font-weight:500;letter-spacing:.01em;
  color:var(--white);white-space:nowrap}
.hdr.is-stuck .nav a{color:var(--body)}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.hdr__cta{font-family:'Karla',sans-serif;padding:12px 24px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--white);font-weight:600;font-size:15px;white-space:nowrap}
.hdr__cta:hover{background:var(--ink);color:var(--white)}

/* ---- "Who we serve" submenu ---------------------------------------------
   A disclosure hung off the nav item. The parent stays a normal link to
   /who-we-serve/; the chevron beside it is the control. Hover and :focus-within
   open it with no script at all, so it is reachable by keyboard even if
   services.js never runs; the script only mirrors the state onto aria-expanded
   and adds Escape. The panel carries its own solid ground because the header is
   transparent over a dark hero and cream once stuck. */
.nav__grp{position:relative;display:flex;align-items:center;gap:5px}
.nav__tog{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;
  color:var(--white);cursor:pointer;transition:color .3s ease,background .2s ease}
.hdr.is-stuck .nav__tog{color:var(--body)}
.nav__tog:hover{background:rgba(255,255,255,.18)}
.hdr.is-stuck .nav__tog:hover{background:var(--tint)}
.nav__tog svg{display:block;width:11px;height:7px;transition:transform .2s ease}
.nav__grp:hover .nav__tog svg,
.nav__grp:focus-within .nav__tog svg,
.nav__grp.is-open .nav__tog svg{transform:rotate(180deg)}
.nav__sub{position:absolute;top:calc(100% + 15px);left:-14px;z-index:90;
  margin:0;padding:10px;list-style:none;min-width:312px;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 22px 48px rgba(12,42,28,.20);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
/* bridges the gap between the nav item and the panel, so crossing it with the
   pointer does not close the panel mid-move */
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-15px;height:15px}
.nav__grp:hover .nav__sub,
.nav__grp:focus-within .nav__sub,
.nav__grp.is-open .nav__sub{opacity:1;visibility:visible;transform:none}
/* Escape parks focus on the toggle, which is inside the group — without this the
   panel would reopen from :focus-within the instant it closed. Cleared again as
   soon as focus or the pointer leaves. */
.nav__grp.is-dismissed:hover .nav__sub,
.nav__grp.is-dismissed:focus-within .nav__sub{opacity:0;visibility:hidden;transform:translateY(-6px)}
.nav__sub a{display:block;padding:9px 12px;border-radius:var(--r-sm);
  font-family:'Karla',sans-serif;font-size:14.5px;font-weight:500;line-height:1.3;
  color:var(--body);white-space:normal}
.hdr.is-stuck .nav__sub a{color:var(--body)}
.nav__sub a:hover,.nav__sub a:focus-visible{background:var(--tint);color:var(--ink)}
.nav__sub a[aria-current="page"]{background:var(--tint);color:var(--ink);
  font-weight:600;text-decoration:none}

/* ---- burger + mobile panel ---------------------------------------------- */
.burger{display:none;align-items:center;gap:10px;background:none;border:1.5px solid rgba(255,255,255,.5);
  border-radius:var(--r-pill);padding:9px 16px 9px 14px;cursor:pointer;
  font-family:'Karla',sans-serif;font-size:14px;font-weight:600;color:var(--white);
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.burger:hover{background:rgba(255,255,255,.14)}
.hdr.is-stuck .burger{border-color:var(--line-2);color:var(--ink)}
.hdr.is-stuck .burger:hover{background:var(--tint)}
.burger__bars{display:flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:14px}
.burger__bars span{display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] .burger__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* above the enquiry widget (120) and the badge (110), so nothing floats over
   the open menu */
.mnav{position:fixed;inset:0;z-index:130;background:var(--ink);overflow-y:auto;
  overscroll-behavior:contain}
html.mnav-open [data-floatwidget]{visibility:hidden}
/* The cookie settings button is fixed at z-index 9998 and so paints over the
   mobile menu panel (z-index 130) at every width. Until now nothing sat at the
   bottom of the panel for it to cover; the social row does, and it lands under
   the button at 1024 and 768. This extends the rule immediately above, which
   already stands the floating help widget down while the menu is open, to the
   other floating control. Presentation only: consent.js, the banner, storage
   and the settings dialog are untouched, and the button returns the moment the
   menu closes. */
html.mnav-open .bw-cc-settings{visibility:hidden}

/* The launcher is pinned bottom-right, which is exactly where the footer's
   Privacy/Terms row ends up once the page is scrolled to the bottom — it sat
   on top of those links and swallowed the clicks. 64px clears the legal row
   at every breakpoint (measured minimum is 59px). !important because the
   offset is an inline style on the element itself. consent.js lifts the
   widget with `translate` while the banner is up, which composes with this
   rather than competing with it, so that behaviour is unaffected. */
[data-floatwidget]{bottom:64px !important}
/* consent.js pins its own cookie-settings button bottom-left at the same
   26px, where it covered the Privacy link on narrow screens once the footer
   was in view. Lifted to match — position only; the button, its behaviour
   and consent.js itself are untouched. */
.bw-cc-settings{bottom:64px !important}
.mnav__inner{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:120px var(--pad) 48px;max-width:var(--max);margin:0 auto;min-height:100%}
.mnav__inner a{font-size:clamp(28px,5vw,42px);line-height:1.16;letter-spacing:-.03em;font-weight:800;
  color:var(--cream);padding:12px 0;width:100%;border-bottom:1px solid rgba(242,246,238,.14)}
.mnav__inner a:hover{color:var(--accent-soft)}
.mnav__inner a[aria-current="page"]{color:var(--accent-soft)}
.mnav__inner a[aria-current="page"]::after{content:"";display:block;width:44px;height:3px;
  border-radius:2px;background:var(--accent-mid);margin-top:10px}
/* The seven sector links would treble the height of the panel at the headline
   size the other items use, so they are a collapsed disclosure in their own
   right, opened by the chevron and set at reading size. With no JS the [hidden]
   never gets applied, so the full list is simply there. */
.mnav__grp{display:flex;align-items:center;gap:10px;max-width:100%}
.mnav__tog{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 40px;width:40px;height:40px;padding:0;border:1.5px solid rgba(242,246,238,.42);
  border-radius:50%;background:none;color:var(--cream);cursor:pointer;
  transition:background .2s ease,border-color .2s ease}
.mnav__tog:hover{background:rgba(242,246,238,.14)}
.mnav__tog svg{display:block;width:14px;height:9px;transition:transform .2s ease}
.mnav__tog[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav__sub{list-style:none;margin:6px 0 10px;padding:0 0 0 2px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px;width:100%}
/* an author display beats the UA stylesheet's [hidden]{display:none}, so the
   collapsed state has to be stated here or the attribute does nothing */
.mnav__sub[hidden]{display:none}
/* ...and with no script to set the attribute in the first place, the full list
   is simply there */
html:not(.bw-js) .mnav__sub[hidden]{display:grid}
.mnav__inner .mnav__sub a{font-family:'Karla',sans-serif;font-size:17px;line-height:1.35;
  font-weight:500;letter-spacing:0;color:rgba(242,246,238,.82);padding:9px 0 9px 16px;
  width:auto;border-bottom:0;border-left:2px solid rgba(159,220,169,.34)}
.mnav__inner .mnav__sub a:hover{color:var(--accent-soft);border-left-color:var(--accent-soft)}
.mnav__inner .mnav__sub a[aria-current="page"]{color:var(--accent-soft);
  border-left-color:var(--accent-soft);font-weight:700}
.mnav__inner .mnav__sub a[aria-current="page"]::after{display:none}
@media (min-width:600px){
  .mnav__sub{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
}
.mnav__cta{margin-top:32px;border-bottom:0 !important;font-size:16px !important;font-weight:600 !important;
  letter-spacing:0 !important;background:var(--accent);color:var(--white) !important;
  border-radius:var(--r-pill);padding:15px 30px !important;width:auto !important}
.mnav__cta:hover{background:var(--white);color:var(--ink) !important}
html.mnav-open,html.mnav-open body{overflow:hidden}
/* The panel sits above everything, so the header has to come with it - otherwise
   the burger disappears underneath and there is no visible way to close. It is
   forced back to its transparent-over-dark state so it reads on the panel even
   if the page was scrolled and the header was stuck. */
html.mnav-open .hdr{z-index:140;background:transparent;border-bottom-color:transparent;box-shadow:none}
html.mnav-open .logo{color:var(--white)}
html.mnav-open .logo span{color:var(--accent-soft)}
html.mnav-open .burger{border-color:rgba(255,255,255,.5);color:var(--white)}
html.mnav-open .burger:hover{background:rgba(255,255,255,.14)}

/* ---- shared ------------------------------------------------------------- */
.wrap{max-width:var(--max);margin:0 auto}
.sec{padding:120px var(--pad)}
.sec--dark{background:var(--ink);color:var(--cream)}
.sec--cream{background:var(--cream)}
.sec--white{background:var(--white)}
.sec--field{background:var(--field);color:var(--cream)}
.eyebrow{font-family:'Karla',sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin:0 0 22px}
.sec--dark .eyebrow,.sec--field .eyebrow{color:var(--accent-soft)}
.h2{font-size:clamp(34px,4.4vw,70px);line-height:.96;letter-spacing:-.04em;font-weight:800;max-width:20ch}
.lede{font-family:'Karla',sans-serif;font-size:clamp(18px,1.5vw,23px);line-height:1.55;
  color:var(--body);max-width:62ch}
.sec--dark .lede,.sec--field .lede{color:rgba(242,246,238,.84)}
.rule{width:52px;height:3px;border-radius:2px;background:var(--accent-mid);margin:0 0 22px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Karla',sans-serif;font-size:16px;font-weight:600;border-radius:var(--r-pill);
  padding:15px 30px;border:1.5px solid transparent;cursor:pointer;line-height:1.2;text-align:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn--solid{background:var(--white);color:var(--ink)}
.btn--solid:hover{background:var(--accent);color:var(--white)}
.btn--accent{background:var(--accent);color:var(--white)}
.btn--accent:hover{background:var(--ink);color:var(--white)}
.btn--ghost{border-color:rgba(255,255,255,.7);color:var(--white);background:none}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.sec--cream .btn--ghost{border-color:var(--line-2);color:var(--ink)}
.sec--cream .btn--ghost:hover{background:var(--tint);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:40px}

/* ---- hero --------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--ink)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  animation:drift 32s ease-in-out infinite alternate;animation-play-state:var(--bw-play)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(6,26,17,.72) 0%,rgba(6,26,17,.30) 42%,rgba(6,26,17,.46) 66%,rgba(6,26,17,.92) 100%)}
.hero__inner{position:relative;max-width:var(--max);margin:0 auto;padding:180px var(--pad) 84px;
  display:flex;flex-direction:column;justify-content:flex-end}
.hero .eyebrow{color:rgba(255,255,255,.82);font-size:14px;letter-spacing:.2em}
.hero h1{font-size:clamp(42px,6.6vw,116px);line-height:.94;letter-spacing:-.045em;font-weight:800;
  color:var(--white);max-width:22ch}
.hero__lede{font-family:'Karla',sans-serif;font-size:clamp(18px,1.5vw,23px);line-height:1.5;
  color:rgba(255,255,255,.92);max-width:56ch;margin-top:30px}
@keyframes drift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-2%,-1.5%,0)}}

/* ---- usp bar ------------------------------------------------------------ */
.usp{background:var(--field);color:var(--cream);padding:72px var(--pad)}
.usp__intro{font-family:'Karla',sans-serif;font-size:clamp(19px,1.7vw,26px);line-height:1.35;
  font-weight:600;color:var(--white);max-width:30ch}
.usp__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:44px;
  list-style:none;padding:0}
.usp__item{border-top:2px solid rgba(159,220,169,.5);padding-top:20px;
  font-family:'Karla',sans-serif;font-size:16px;line-height:1.55;color:rgba(242,246,238,.86)}
.usp__item b{color:var(--white);font-weight:700}

/* ---- sticky jump bar ---------------------------------------------------- */
/* clears the fixed header, which is 87px tall at this size and sits above it */
.jump{position:sticky;top:87px;z-index:70;background:var(--white);border-bottom:1px solid var(--line);
  padding:0 var(--pad)}
.jump__inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;padding:14px 0}
.jump__label{font-family:'Karla',sans-serif;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-right:8px}
.jump a{font-family:'Karla',sans-serif;font-size:14.5px;font-weight:600;color:var(--body);
  border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 18px;white-space:nowrap}
.jump a:hover{background:var(--tint);border-color:var(--line-2);color:var(--ink)}

/* ---- section head ------------------------------------------------------- */
.sec__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:end}
.sec__num{font-family:'Chivo',sans-serif;font-weight:900;font-size:clamp(52px,6vw,104px);
  line-height:.8;letter-spacing:-.05em;color:var(--accent-mid);opacity:.5;margin:0 0 18px}
.sec--cream .sec__num{color:var(--accent);opacity:.32}

/* ---- services: three deliberately different treatments ------------------ */
.svc-grid{display:grid;margin-top:64px}
.svc__name{font-size:clamp(21px,1.7vw,27px);line-height:1.2;letter-spacing:-.025em;font-weight:700}
.svc__body{font-family:'Karla',sans-serif;font-size:16.5px;line-height:1.62;margin-top:12px}

/* 01 — large numbered cards */
.svc-grid--major{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.svc--major{background:var(--card);border-radius:var(--r-card);padding:40px 38px 42px;
  display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.svc--major:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(6,20,13,.34)}
.svc--major .svc__num{font-family:'Karla',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-mid);margin:0 0 20px}
.svc--major .svc__name{color:var(--white)}
.svc--major .svc__body{color:rgba(242,246,238,.82)}

/* 02 — lighter tiles, rule on top */
.svc-grid--tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 34px}
.svc--tile{border-top:2px solid var(--line-2);padding:26px 0 34px;transition:border-color .25s ease}
.svc--tile:hover{border-top-color:var(--accent)}
.svc--tile .svc__name{color:var(--ink)}
.svc--tile .svc__body{color:var(--body)}

/* 03 — dense list on the green field */
.svc-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.svc--compact{padding:26px 0;border-bottom:1px solid rgba(242,246,238,.22)}
.svc--compact .svc__name{display:flex;align-items:baseline;gap:12px;color:var(--white);
  font-size:clamp(19px,1.4vw,23px)}
.svc__dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent-soft);
  transform:translateY(-2px)}
.svc--compact .svc__body{color:rgba(242,246,238,.82);padding-left:21px}

/* ---- meadow transition band --------------------------------------------- */
/* This band sits between two cream sections, so it can't end on the dark green
   the original used - that was what produced the hard cut above Get Found. The
   grass now rises out of the cream and dissolves back into it at both edges. */
.band{position:relative;height:340px;overflow:hidden;background:var(--cream)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(242,246,238,.92) 0%,rgba(242,246,238,0) 26%,
    rgba(242,246,238,0) 74%,rgba(242,246,238,.92) 100%)}
/* max-width:none, or the global img rule clamps the 122% back to 100% and the
   deliberate overhang leaves a bare strip down the right-hand edge */
.band img{position:absolute;left:-8%;bottom:0;width:122%;max-width:none;height:100%;object-fit:cover;
  object-position:50% 70%;opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}

/* ---- process ------------------------------------------------------------ */
.steps{list-style:none;margin:64px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 30px 34px}
.step__n{font-family:'Karla',sans-serif;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0 0 16px}
.step__t{font-size:20px;line-height:1.22;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
.step__b{font-family:'Karla',sans-serif;font-size:16px;line-height:1.6;color:var(--body);margin-top:10px}

/* ---- results ------------------------------------------------------------ */
/* The three screenshots ship at 2.19, 2.07 and 1.60, so they share one 16:9
   frame rather than each setting its own card height. 16:9 is the ratio that
   costs the least crop across all three. Always top-aligned - these are website
   screenshots and the masthead is the point - with the horizontal anchor set
   per image so no masthead logo falls outside the frame. */

/* ---- closing ------------------------------------------------------------ */
.close{position:relative;overflow:hidden;background:var(--ink);color:var(--cream)}
.close__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 54%;
  animation:drift 36s ease-in-out infinite alternate;animation-play-state:var(--bw-play)}
.close__scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(6,25,15,.70) 0%,rgba(6,25,15,.46) 42%,rgba(6,25,15,.94) 100%)}
.close__inner{position:relative;max-width:var(--max);margin:0 auto;padding:128px var(--pad)}
.close h2{color:var(--white)}

/* ---- footer: matches the rest of the site ------------------------------- */
.ftr{background:var(--ink);color:var(--cream);padding:84px var(--pad) 34px}
.ftr__top{max-width:var(--max);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:56px;padding-bottom:56px;
  border-bottom:1px solid rgba(242,246,238,.18)}
.ftr__brand{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.ftr__logo{font-family:'Chivo',sans-serif;font-weight:900;font-size:29px;letter-spacing:-.03em;
  line-height:1;color:var(--white)}
.ftr__logo span{color:var(--accent-soft)}
.ftr__desc{font-family:'Karla',sans-serif;font-size:17px;line-height:1.6;color:rgba(242,246,238,.76);max-width:36ch}
.ftr h2{font-family:'Karla',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,246,238,.5);margin:0 0 6px;font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.ftr ul a,.ftr ul span{font-family:'Karla',sans-serif;font-size:16px;color:rgba(242,246,238,.84)}
.ftr ul a:hover{color:var(--white)}
.ftr__legal{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;
  justify-content:space-between;align-items:center;padding-top:26px;
  font-family:'Karla',sans-serif;font-size:14px;color:rgba(242,246,238,.55)}
.ftr__legal a{color:rgba(242,246,238,.55)}
.ftr__legal .links{display:flex;gap:26px;flex-wrap:wrap}
.cookie-link{font:inherit;color:rgba(242,246,238,.55);background:none;border:0;padding:0;margin:0;
  cursor:pointer;text-align:left}
.cookie-link:hover{color:var(--cream)}

/* ---- reveal ------------------------------------------------------------- */
.bw-js [data-reveal]{opacity:0}
.bw-js [data-reveal].bw-in{animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.bw-noreveal [data-reveal]{opacity:1 !important;animation:none !important}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1200px){
  .svc-grid--tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usp__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 30px}
}
@media (max-width:1100px){
  :root{--pad:32px}
  .sec{padding:96px var(--pad)}
  .sec__head{grid-template-columns:minmax(0,1fr);gap:30px;align-items:start}
  .h2{max-width:24ch}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__inner{padding:150px var(--pad) 72px}
}
/* "Get a Free Homepage Redesign" is 265px against the 125px the old label
   needed, which overflows the row below ~1240px. The nav gap and the button's
   own padding tighten across two bands instead; measured worst case is 1025px,
   the last width before the burger takes over.  */
@media (min-width:1025px) and (max-width:1240px){
  .hdr{gap:16px}
  .nav{gap:22px}
  .hdr__cta{padding:11px 18px;font-size:14px}
}
@media (min-width:1025px) and (max-width:1100px){
  .hdr{gap:13px}
  .nav{gap:14px}
  .nav a{font-size:13.5px}
  .hdr__cta{padding:10px 14px;font-size:13px}
}
/* The desktop header needs 912px to lay out and is comfortable from ~952px, so
   it hands over to the burger at 1024 - covering tablet as well as phones. */
@media (max-width:1024px){
  .nav{display:none}
  .hdr__cta{display:none}          /* it lives inside the panel at these sizes */
  .burger{display:inline-flex}
  .logo-txt{display:none}
  .logo-img--light{display:block}
  .hdr.is-stuck .logo-img--light{display:none}
  .hdr.is-stuck .logo-img--dark{display:block}
  /* the panel is dark whatever the header was doing before it opened */
  html.mnav-open .hdr .logo-img--light{display:block}
  html.mnav-open .hdr .logo-img--dark{display:none}
}
@media (max-width:900px){
  /* sticky costs too much of a short viewport here - 123px of bar over a 53px
     header - so it reverts to a normal band at the top of the sections */
  .jump{position:static;top:auto}
  .svc-grid--major{grid-template-columns:minmax(0,1fr)}
  .svc-grid--compact{grid-template-columns:minmax(0,1fr);gap:0}
  .band{height:240px}
}
@media (max-width:768px){
  :root{--pad:24px}
  .svc-grid--tiles{grid-template-columns:minmax(0,1fr);gap:0}
  .sec{padding:80px var(--pad)}
  .usp{padding:64px var(--pad)}
  .hdr{padding:14px 20px;gap:12px}
  .logo{font-size:21px}
  .hdr__cta{padding:10px 16px;font-size:13px}
  .hero__inner{padding:128px var(--pad) 60px}
  .hero h1{max-width:none}
  .svc-grid{margin-top:48px}
  .svc--major{padding:32px 28px 34px}
  .close__inner{padding:96px var(--pad)}
  .ftr__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
}
@media (max-width:640px){
  .usp__grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .ftr__top{grid-template-columns:minmax(0,1fr)}
  .ftr__legal{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:560px){
  :root{--pad:18px}
  .sec{padding:68px var(--pad)}
  .hdr{padding:12px 16px;gap:10px}
  .logo{font-size:19px}
  .logo-img{height:22px}
  .hdr__cta{padding:9px 13px;font-size:12.5px}
  .hero__inner{padding:116px var(--pad) 52px}
  .hero h1{font-size:34px;line-height:1.02;letter-spacing:-.035em}
  .hero .eyebrow{font-size:13px;margin-bottom:18px}
  .hero__lede{margin-top:22px}
  .h2{font-size:30px;line-height:1.04;max-width:none}
  .actions{margin-top:30px}
  .btn{width:100%;white-space:normal;padding:13px 22px;font-size:15px}
  .jump__inner{gap:8px;padding:12px 0}
  .jump a{font-size:13.5px;padding:8px 14px}
  .jump__label{width:100%;margin:0 0 2px}
  .band{height:190px}
}
@media (max-width:390px){
  :root{--pad:15px}
  .hero h1{font-size:30px}
  .h2{font-size:27px}
  .hdr{padding:11px 13px;gap:8px}
  .logo{font-size:18px}
  .logo-img{height:20px}
  .hdr__cta{padding:8px 11px;font-size:11.5px}
}
/* ---- enquiry widget ------------------------------------------------------ */
.field:focus{border-color:var(--accent)}
.help-close:hover{background:rgba(242,246,238,.26)}
.help-send:hover{background:var(--ink)}
.help-send[disabled]{opacity:.65;cursor:default}
.help-launcher:hover{background:var(--field)}
@media (max-width:900px){
  [data-floatwidget]{left:0 !important;right:0 !important;align-items:center !important;
    gap:10px !important;bottom:calc(64px + env(safe-area-inset-bottom,0px)) !important}
  [data-floatwidget] > button{padding:11px 18px !important;font-size:13.5px !important;
    gap:9px !important;box-shadow:0 10px 24px rgba(12,42,28,.30) !important}
  [data-floatwidget] > button > span[aria-hidden]{width:8px !important;height:8px !important}
  [data-help-panel]{width:min(392px,calc(100vw - 28px)) !important;max-height:70vh !important}
}
@media (max-width:390px){
  [data-floatwidget] > button{padding:10px 16px !important;font-size:13px !important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root{--bw-play:paused}
  [data-reveal]{opacity:1 !important;animation:none !important}
}

/* The launcher carries an inline box-shadow of 0 16px 34px rgba(12,42,28,.32) —
   a 34px blur in near-black at 32%. Against the dark hero it was invisible, and
   while the widget sat at bottom:26px roughly 50px of it (16px offset + 34px
   blur) fell below the viewport edge and was clipped. Lifting the widget to
   64px to clear the footer legal links put the whole shadow on screen, where
   over cream and white sections it reads as a large dark cloud around a small
   pill. Tightened to a shadow proportionate to the control; the pill still
   lifts off the page. !important because the value is an inline style.
   Covers both launchers: .help-launcher on the hand-built pages and the
   class-less [data-launcher] in the homepage bundle. */
[data-floatwidget] .help-launcher,
[data-floatwidget] [data-launcher]{box-shadow:0 6px 16px rgba(12,42,28,.18) !important}

/* ---- social links -------------------------------------------------------
   One component, three placements: the footer Contact column, the bottom of
   the mobile menu, and the contact pages' details list. Every selector below
   is qualified past an existing rule that would otherwise win:
     .ftr ul            (0,1,1) sets column layout and 13px gap
     .ftr ul a          (0,1,1) sets 16px text colour
     .mnav__inner a     (0,1,1) sets the 28-42px display size
     .cdetails a        (0,1,1) sets 19px/700
   so each is restated here at (0,2,1) or better. */
.bw-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ftr .bw-social,.mnav__inner .bw-social,.cdetails .bw-social{
  flex-direction:row;margin:16px 0 0;padding:0;gap:10px}
.ftr .bw-social a,.mnav__inner .bw-social a,.cdetails .bw-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid rgba(242,246,238,.22);background:transparent;
  font-size:0;font-weight:400;letter-spacing:0;line-height:0;
  color:rgba(242,246,238,.84);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease}
.ftr .bw-social a:hover,.mnav__inner .bw-social a:hover,.cdetails .bw-social a:hover,
.ftr .bw-social a:focus-visible,.mnav__inner .bw-social a:focus-visible,
.cdetails .bw-social a:focus-visible{
  color:var(--white);border-color:var(--accent-soft);background:rgba(242,246,238,.10)}
.ftr .bw-social a:focus-visible,.mnav__inner .bw-social a:focus-visible,
.cdetails .bw-social a:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
.bw-social svg{display:block;width:18px;height:18px;flex:none}
/* the underline/arrow decorations those link rules add must not follow here */
.mnav__inner .bw-social a::after,.cdetails .bw-social a::after{display:none}

/* Mobile menu: sits under the CTA, comfortably tappable, and separated from the
   navigation so it never reads as part of it or as part of Who we serve. */
.mnav__social{margin-top:28px;padding-top:24px;width:100%;
  border-top:1px solid rgba(242,246,238,.16)}
.mnav__inner .mnav__social a{width:48px;height:48px}
.mnav__social-lbl{font-family:'Karla',sans-serif;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,246,238,.55);margin:0 0 14px;font-weight:600}

/* Contact pages: one more row in the existing details list, same rhythm.
   .cdetails li (0,1,1) puts 22px padding and a rule on EVERY descendant li, and
   :first-child adds a top rule — which lands on each icon. Reset them here. */
.cdetails .bw-social{margin-top:12px}
.cdetails .bw-social li,.cdetails .bw-social li:first-child{
  padding:0;border:0;border-top:0;border-bottom:0}