@import url('/cms-assets/ai-ready-banner.aac90fa11d81.css');

:root {
    --ink: #17252d;
    --muted: #5f6f77;
    --paper: #fff;
    --mist: #f3f6f6;
    --line: #d9e1e3;
    --teal: #0e736d;
    --teal-dark: #095852;
    --yellow: #f0c85a;
    --footer: #0b1628;
    --max: 1180px;
    --focus: #e5a900;

    /* Semantic aliases added for the banner work. The theme previously carried colours and
       one content width only, so spacing, radii, the font stack and button surfaces were
       repeated as literals wherever they were needed. Naming them here is what lets a banner
       reuse the site's look instead of approximating it. */
    --font-sans: "Poppins", sans-serif;
    /* Accent faces for a few display lines only - see _PublicFonts.cshtml. */
    --font-serif: "Lora", Georgia, "Times New Roman", serif;
    --font-hand: "Nothing You Could Do", "Segoe Script", cursive;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    --btn-primary-bg: var(--teal);
    --btn-primary-fg: var(--paper);
    --btn-primary-bg-hover: var(--teal-dark);
    --btn-secondary-bg: var(--paper);
    --btn-secondary-fg: var(--ink);
    --btn-secondary-border: var(--line);
    --btn-ghost-fg: var(--paper);

    --control-min-target: 44px;

    /* Site header. One dark look, which replaced the white bar, so these are the only header
       colours in the file. The top bar's own ground and text come from the header document
       instead, as --topbar-bg and --topbar-fg. */
    --header-ink: #0b1628;
    --header-panel: #0f1d33;
    --header-fg: #e3e9f1;
    --header-fg-muted: #a7b3c3;
    --header-rule: rgba(255, 255, 255, .12);
    --header-accent: #f5b73b;
    --header-accent-deep: #e6962b;
    /* The lights drawn on the dark ground: a teal lift low and left of centre, violet at the
       ends, and the gold hairline arcs. The header draws them once for every row it holds - see
       the background on .site-header - rather than each row carrying its own literal rgba(). */
    --header-glow-teal: rgba(33, 138, 168, .34);
    --header-glow-violet: rgba(116, 66, 196, .30);
    --header-arc: rgba(245, 183, 59, .34);
    --header-arc-soft: rgba(245, 183, 59, .16);
    /* Both 0, which is the full-bleed strip. Give them a pair such as 22px and 16px and the
       chrome becomes a rounded card floating clear of the viewport edges - nothing else in the
       header measures itself against them. */
    --header-radius: 0px;
    --header-gap: 0px;
    --header-pad-x: clamp(18px, 2.6vw, 44px);
    --header-gap-x: clamp(18px, 2vw, 32px);
    --nav-pad-x: 14px;
}

* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* overflow-x:hidden here is load-bearing for .site-topbar's full-bleed breakout below: 100vw can
   run a scrollbar's width wider than the visible viewport, which would otherwise put a few pixels
   of horizontal scroll on the whole page. Only the X axis is touched, so position:sticky in the
   header is unaffected. */
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: inherit; font-weight: 400; line-height: 1.6; }
body.nav-open { overflow: hidden; }
a { color: inherit; }
img, video { max-width: 100%; }
button, input, textarea, select { font: inherit; }
/* CMS HTML and banner documents may still name another family. Keep the public site on one. */
.prose *,
.site-footer .block-richtext *,
.cms-banner__text,
.cms-banner__btn,
[class^="ql-font-"],
[class*=" ql-font-"] { font-family: inherit !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.site-shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; background: var(--ink); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   Site header: a seamless full-bleed strip (logo, menu, and the rows above it).

   The <header> is the one box site.js measures. It does not clip overflow -
   navigation panels hang below it. Nothing on the header may create a
   containing block for position:fixed descendants (no transform, filter or
   backdrop-filter, no containment): the drawer is fixed inside it and must
   resolve against the viewport.

   Rows pad themselves in from the edges; the chrome itself always spans the
   viewport so the top bar and the logo/menu bar read as one continuous band.
   --------------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 30;
    width: calc(100% - 2 * var(--header-gap));
    margin: var(--header-gap) auto 0;
    border-radius: var(--header-radius);
    color: var(--header-fg);
    /* EVERY light and every arc in the chrome is drawn here, on the one box that spans all of the
       rows. That is what makes the top strip and the navigation read as a single surface: a curve
       entering the strip leaves through the navigation row as the same unbroken line, and the
       violet and teal cross the seam without a step. The rows themselves paint no ground of their
       own beyond the tint the editor picked - see .site-topbar.

       The arcs are ring stops in a background layer rather than bordered pseudo-elements on
       purpose: the header must not clip its overflow - the navigation panels hang below it - and
       a background layer is clipped to the box for free, where a pseudo-element would need
       overflow:hidden to stay inside it.

       Vertical radii are given in % so the field stretches with whatever height the document asks
       for; a px radius tuned against a 132px bar goes blotchy the moment an editor makes it 96. */
    background:
        radial-gradient(circle at calc(63% + 260px) calc(100% + 64px), transparent 0 299px, var(--header-arc) 299px 300.4px, transparent 302px),
        radial-gradient(circle at calc(100% + 120px) 50%, transparent 0 200px, var(--header-arc) 200px 201.4px, transparent 203px),
        radial-gradient(circle at calc(100% + 120px) 50%, transparent 0 252px, var(--header-arc-soft) 252px 253.4px, transparent 255px),
        radial-gradient(circle at 0% 200%, transparent 0 198px, var(--header-arc-soft) 198px 199.4px, transparent 201px),
        radial-gradient(660px 190% at 46% 110%, var(--header-glow-teal), transparent 72%),
        radial-gradient(420px 150% at 103% 54%, var(--header-glow-violet), transparent 72%),
        radial-gradient(380px 150% at -3% 82%, var(--header-glow-violet), transparent 70%),
        var(--header-ink);
    box-shadow: 0 1px 0 var(--header-rule);
}
/* The top bar lays its own wash over the header, so it has to round with the card or it squares
   off the two corners the header just rounded. At --header-radius 0 this is the shape it had. */
.site-header > .site-topbar:first-child { border-radius: var(--header-radius) var(--header-radius) 0 0; }
.site-header .header-inner,
.site-header .announce-inner { width: auto; max-width: none; margin-inline: 0; padding-inline: var(--header-pad-x); }
/* topbar-inner is deliberately NOT in the rule above: the top bar breaks out to full width (see
   .site-topbar below) regardless of the card's own ContainerWidth, so its content stays on the
   plain .site-shell it already carries in the markup - the same centred column as the rest of the
   page - rather than the card's width. */
.header-inner { position: relative; min-height: calc(var(--header-min-h, 72px) - 16px); display: flex; align-items: center; justify-content: space-between; gap: var(--header-gap-x); }

.brand { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 14px; min-width: 0; color: inherit; text-decoration: none; }
/* The cap is a guard against a logo wide enough to crowd the menu, not a second size setting. At
   240px it was quietly overruling the editor: a 3:1 logo stopped growing at 80px however far the
   Logo height slider went, and the validator allows 120. 320px lets the slider mean what it says
   for any logo up to about 6:1, which is every wordmark, and still stops a banner. */
.brand img { display: block; flex: 0 0 auto; width: auto; max-width: 320px; height: calc(var(--brand-logo-h, 40px) - 12px); object-fit: contain; object-position: left center; }
.brand-text { display: grid; gap: 3px; min-width: 0; line-height: 1.1; }
.brand-name { color: #fff; font-size: clamp(1.25rem, 1.9vw, 1.65rem); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand-tagline { color: var(--header-fg-muted); font-size: .78rem; font-weight: 500; white-space: nowrap; }
/* ---------------------------------------------------------------------------
   Primary navigation.

   Three open mechanisms live here and exactly one is ever in charge.

   Below 1201px the drawer opens submenus with .open, set by the "+" buttons.
   At 1201px and up the bar opens them on hover. The plain :hover rule is the
   no-script fallback only: once site.js starts it marks the nav .is-enhanced,
   takes ownership through .is-open, and animates a single shared card between
   triggers.

   Whichever is in charge, a panel is docked to the BOTTOM EDGE OF THE BAR and
   the trigger is stretched to reach it. The nav row is shorter than the bar -
   an editor can size the bar anywhere from 40px to 200px - so a panel offset
   from the list item instead leaves bare header between the two, and a pointer
   crossing that band drops :hover and closes the panel before it is reached.
   --------------------------------------------------------------------------- */
.public-nav > ul, .public-nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.public-nav > ul { flex-wrap: wrap; justify-content: flex-end; }
.public-nav a { display: block; padding: 10px 11px; color: var(--header-fg); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.public-nav a:hover { color: #fff; }
.public-nav a[aria-current="page"] { color: var(--header-accent); }
.public-nav li { position: relative; }
.public-nav li.has-children { display: flex; align-items: center; }
.public-nav li > ul { display: none; position: absolute; top: 100%; left: 0; min-width: 230px; padding: 8px; background: var(--header-panel); border: 1px solid var(--header-rule); border-radius: 14px; box-shadow: 0 28px 56px rgba(4, 10, 22, .5); }
.public-nav li > ul a { border-radius: 8px; color: var(--header-fg-muted); }
.public-nav li > ul a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.public-nav li > ul a[aria-current="page"] { color: var(--header-accent); }
.public-nav li > ul li { width: 100%; }
.public-nav li > ul li.has-children { align-items: stretch; }
/* The script builds these two unconditionally. Outside the bar's range they
   have no rules of their own, so without this they sit in the drawer header as
   two extra zero-width flex items and eat two of .header-inner's 24px gaps. */
.nav-stage, .nav-pill { display: none; }

@media (min-width: 1201px) {
    /* Stretch the trigger to the full height of the bar so its bottom edge and
       the panel's top edge touch. This is what removes the dead band. */
    .public-nav { align-self: stretch; display: flex; align-items: stretch; }
    /* Deliberately NOT position:relative. The pill, the card and the panels are
       all placed by the script in .header-inner's coordinate space, and a
       positioned list here would silently re-anchor the panels to itself. */
    .public-nav > ul { align-items: stretch; align-content: stretch; }
    /* Stretched items are as tall as the bar, so the label has to re-centre
       itself. Items without children need this as much as parents do. */
    .public-nav > ul > li { display: flex; align-items: center; }

    /* Parents open on hover, focus or tap - never from a visible control, so
       the drawer's "+" button has no job on the bar. */
    .public-nav .submenu-toggle { display: none; }

    /* The bar reads brand | menu | actions. Both hairlines are backgrounds, not
       borders or pseudo-elements, so they stop short of the bar's full height
       without positioning the nav - see the note on .public-nav > ul below. */
    .public-nav { padding-left: var(--header-gap-x); background: linear-gradient(var(--header-rule), var(--header-rule)) left center / 1px 52% no-repeat; }
    .header-actions { align-self: stretch; padding-left: var(--header-gap-x); background: linear-gradient(var(--header-rule), var(--header-rule)) left center / 1px 52% no-repeat; }
    .public-nav > ul > li > a { display: flex; align-items: center; gap: 9px; padding-inline: var(--nav-pad-x); font-size: .95rem; }
    /* Parents wear a chevron on the bar in place of the drawer's "+" button. */
    .public-nav > ul > li.has-children > a::after { content: ""; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .75; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
    .public-nav > ul > li.is-open > a::after { margin-top: 3px; transform: rotate(225deg); }
    /* A menu with no submenus never gets the moving underline below, so the bar draws its own -
       for the page you are on and, as the pill does, for whatever the pointer is over. */
    .public-nav:not(.is-enhanced) > ul > li > a[aria-current="page"],
    .public-nav:not(.is-enhanced) > ul > li > a:hover { background: linear-gradient(90deg, var(--header-accent), var(--header-accent-deep)) center bottom 2px / calc(100% - 2 * var(--nav-pad-x)) 3px no-repeat; }

    .public-nav li > ul li > ul { top: -9px; left: 100%; }
    .public-nav li:hover > ul, .public-nav li:focus-within > ul { display: block; }

    .public-nav > ul > li.mega { position: static; }
    .public-nav > ul > li.mega > ul { left: 0; right: 0; width: 100%; min-width: 0; padding: 22px 18px 18px; align-items: start; gap: 10px 22px; }
    .public-nav > ul > li.mega:hover > ul, .public-nav > ul > li.mega:focus-within > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .public-nav > ul > li.mega > ul > li { display: block; width: auto; }
    .public-nav > ul > li.mega > ul > li > a { padding: 4px 8px 10px; color: var(--header-accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: normal; }
    .public-nav > ul > li.mega > ul > li > ul { position: static; display: block; min-width: 0; padding: 0; border: 0; box-shadow: none; }
    .public-nav > ul > li.mega > ul > li > ul a { padding: 6px 8px; font-size: .92rem; font-weight: 600; white-space: normal; }

    /* ---- Enhanced: the morphing spotlight panel ---------------------------
       Every rule below has to out-rank one of the :hover rules above it. Some
       win on specificity and some only on document order, so keep this block
       after those rules if you move anything.

       Panels stay laid out and are hidden with visibility rather than display,
       for two reasons: the script has to measure one before revealing it, and
       visibility:hidden still removes it from the accessibility tree and the
       tab order. They are absolutely positioned, so they never affect layout.

       The panels also give up their own background, border and shadow. That
       chrome is drawn once by .nav-stage__surface and animated between
       triggers, which is what makes the card appear to morph instead of one
       vanishing and another appearing.
       ---------------------------------------------------------------------- */
    /* Every panel resolves against .header-inner, not against its own list
       item, so the script can place them all on one coordinate system and so
       a 230px dropdown is measured against the shell rather than against a
       117px trigger. */
    .public-nav.is-enhanced > ul > li.has-children { position: static; }
    /* A static list item paints its label in the in-flow layer, underneath the
       pill. Lifting the label is what keeps it readable. */
    .public-nav.is-enhanced > ul > li > a { position: relative; z-index: 1; }
    /* Root panels only. A descendant selector here would also catch the column
       lists inside a mega panel, which are static, always shown, and would be
       hidden and made unclickable along with their parent. */
    .public-nav.is-enhanced > ul > li > ul {
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        z-index: 2;
        left: var(--panel-x, 0px);
        max-height: calc(100vh - var(--header-offset, 72px) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }
    /* The entry offset is declared once, on the closed state only. Setting it
       on the panel and then cancelling it on .is-open leaves two competing
       transform declarations, which is one cascade surprise away from a panel
       stranded 6px below its own card. */
    .public-nav.is-enhanced > ul > li:not(.is-open) > ul { transform: translateY(6px); }
    .public-nav.is-enhanced > ul > li.mega > ul {
        display: grid;
        right: auto;
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(var(--mega-cols, 3), minmax(180px, 1fr));
    }
    /* Switching between two triggers is a cross-fade only. The travel is the
       card's job, and a panel sliding at the same time reads as two things
       moving against each other. */
    .public-nav.is-enhanced > ul > li.is-open > ul {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: opacity .22s ease, transform .26s cubic-bezier(.22, 1, .36, 1);
    }

    .nav-stage { display: block; position: absolute; z-index: 1; top: 100%; right: 0; left: 0; height: 0; pointer-events: none; }
    .nav-stage__surface {
        position: absolute; top: 0; left: 0;
        width: var(--stage-w, 0px); height: var(--stage-h, 0px);
        background: var(--header-panel);
        border: 1px solid var(--header-rule);
        border-radius: 14px;
        box-shadow: 0 28px 56px rgba(4, 10, 22, .5);
        transform: translateX(var(--stage-x, 0px));
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, visibility 0s linear .18s,
                    transform .3s cubic-bezier(.22, 1, .36, 1),
                    width .3s cubic-bezier(.22, 1, .36, 1),
                    height .3s cubic-bezier(.22, 1, .36, 1);
    }
    .nav-stage.is-open .nav-stage__surface { opacity: 1; visibility: visible; transition-delay: 0s; }
    /* First open of a run lands on the trigger instead of sliding in from
       wherever the previous run left the card. Geometry jumps; the fade that
       makes it look deliberate is kept. */
    .nav-stage.is-placing .nav-stage__surface { transition-property: opacity, visibility; }

    /* The "pill" is drawn as a gold underline beneath the label rather than a
       wash behind it. It keeps the pill's geometry and motion, so it still rests
       on the page you are on and slides to whatever the pointer is over. */
    .nav-pill {
        display: block;
        position: absolute; z-index: 0;
        top: var(--pill-y, 0px); left: 0;
        width: var(--pill-w, 0px); height: var(--pill-h, 0px);
        transform: translateX(var(--pill-x, 0px));
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease,
                    transform .26s cubic-bezier(.22, 1, .36, 1),
                    width .26s cubic-bezier(.22, 1, .36, 1);
    }
    .nav-pill::after { content: ""; position: absolute; right: var(--nav-pad-x); bottom: 2px; left: var(--nav-pad-x); height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--header-accent), var(--header-accent-deep)); }
    .nav-pill.is-on { opacity: 1; }
}
.submenu-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.submenu-toggle span { display: block; font-size: 1.2rem; line-height: 1; transition: transform .2s ease; }
.public-nav li.open > .submenu-toggle span { transform: rotate(45deg); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 9px; border: 1px solid var(--header-rule); border-radius: 12px; background: rgba(255, 255, 255, .04); cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--header-fg); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero-band { min-height: min(680px, 82vh); display: flex; align-items: center; color: #fff; background: #12303a center/cover no-repeat; }
.hero-content { padding-block: 90px; }
.hero-content .hero-title { max-width: 850px; margin: .15em 0; font-size: clamp(2.7rem, 5.8vw, 5.3rem); font-weight: 700; line-height: 1.03; letter-spacing: -.03em; overflow-wrap: anywhere; }
.hero-content > p:not(.eyebrow) { max-width: 680px; font-size: 1.15rem; }
.eyebrow { color: var(--teal); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-band .eyebrow { color: var(--yellow); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 1px solid transparent; background: var(--teal); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--teal-dark); }

.content-band { padding: 76px 0; }
.content-band h2, .cta-band h2 { margin: 0 0 18px; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.section-intro { max-width: 760px; margin: -6px 0 30px; color: var(--muted); font-size: 1.05rem; }
/* CMS-authored homepage sections drop the content-band padding. */
.content-band:has(> .prose > .dc-values),
.content-band:has(> .prose > .dc-about),
.content-band:has(> .prose > .dc-solutions),
.content-band:has(> .prose > .dc-casestudy) { padding: 0; }
.prose:has(> .dc-values), .prose:has(> .dc-about), .prose:has(> .dc-solutions), .prose:has(> .dc-casestudy) { width: 100%; }
.dc-values { color: #f8faff; background: radial-gradient(ellipse at 0 0, #51267766, transparent 30%), radial-gradient(ellipse at 90% 100%, #51336e55, transparent 35%), linear-gradient(115deg, #091e30, #0b3448 55%, #0a2134); }
.dc-values__list { list-style: none; margin: 0 auto; padding: 10px clamp(20px, 3vw, 52px); max-width: 1760px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dc-values__list li { display: flex; align-items: center; gap: clamp(8px, .75vw, 14px); padding: 0 clamp(10px, 1.5vw, 24px); border-left: 1px solid #b2c4d080; min-width: 0; }
.dc-values__list li:first-child { padding-left: 0; border: 0; }
.dc-values__list li:last-child { padding-right: 0; }
.dc-values__icon { display: grid; place-items: center; flex: 0 0 clamp(36px, 3.5vw, 56px); height: clamp(36px, 3.5vw, 56px); border-radius: 50%; border: 1px solid #d7e7f633; background: linear-gradient(140deg, #edf3ff13, #edf3ff03); }
.dc-values__icon img { width: 48%; }
.dc-values h3 { font-size: clamp(12px, 1vw, 17px); font-weight: 600; line-height: 1.25; margin: 0 0 2px; color: var(--header-accent, #f5b73b); }
.dc-values p { font-size: clamp(9px, .7vw, 12px); line-height: 1.35; margin: 0; color: #9eb0c2; }
.dc-about { position: relative; isolation: isolate; overflow: hidden; background: #fcfcfd; color: #0b1932; }
.dc-about__copy { position: relative; z-index: 2; width: 55%; padding: clamp(40px, 4vw, 70px) 0 clamp(44px, 4vw, 72px) clamp(24px, 3.6vw, 64px); }
.dc-about__eyebrow { display: flex; align-items: center; gap: 20px; margin: 0 0 26px; text-transform: uppercase; letter-spacing: .4em; font-size: 12px; font-weight: 600; }
.dc-about__eyebrow::before { content: ''; width: 35px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d1870a, #ffcc56); }
.content-band .dc-about h2 { font-size: clamp(32px, 3.55vw, 63px); font-weight: 600; line-height: 1.1; letter-spacing: -.045em; margin: 0 0 28px; }
.dc-about h2 span { color: #bd7b0d; }
.dc-about__intro { color: #405575; font-size: clamp(15px, 1.27vw, 22px); line-height: 1.6; max-width: 740px; margin: 0 0 28px; padding-right: 28px; }
.dc-about__services { list-style: none; display: grid; grid-template-columns: .95fr 1.08fr 1.08fr; padding: 0; margin: 0 0 34px; }
.dc-about__services li { position: relative; padding: 0 22px; }
.dc-about__services li:first-child { padding-left: 0; }
.dc-about__services li + li::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 4px; width: 1px; background: #d1d9e5; }
.dc-about__service-icon { width: 70px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(140deg, #f8f4ff, #eee7fc); margin-bottom: 10px; }
.dc-about__services li:nth-child(2) .dc-about__service-icon { background: #f3f4f6; }
.dc-about__services h3 { font-size: clamp(12px, 1vw, 17px); line-height: 1.4; font-weight: 600; margin: 0 0 6px; }
.dc-about__services p { font-size: clamp(12px, .94vw, 16px); line-height: 1.55; color: #405575; margin: 0; }
.dc-about__cta { display: inline-flex; gap: 25px; justify-content: space-between; align-items: center; min-height: 56px; padding: 12px 30px; border-radius: 99px; background: #062437; color: #ffc044; border: 1px solid #d79919; text-decoration: none; font-size: clamp(13px, 1.06vw, 18px); font-weight: 500; transition: background .2s; }
.dc-about__cta span { font-size: 26px; line-height: 1; }
.dc-about__cta:hover { background: #123b50; }
.dc-about__visual { position: absolute; inset: 0 0 0 47%; z-index: 1; }
.prose .dc-about__image { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.dc-about__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #fcfcfd, #fcfcfdc9 8%, #fcfcfd00 32%); }
.dc-about__statement { position: absolute; z-index: 1; top: 17%; left: 17%; width: 255px; padding: 36px 26px 30px; color: #f3f4f8; border: 1px solid #f1f3f7a6; border-radius: 12px; background: linear-gradient(140deg, #26354b99, #102b409e); box-shadow: 0 10px 32px #10233320; backdrop-filter: blur(5px); }
.dc-about__statement > p:first-child { border-left: 2px solid #f0c15f; padding-left: 20px; margin: 0; font-size: clamp(22px, 1.9vw, 33px); font-weight: 300; line-height: 1.35; }
.dc-about__statement span { color: #ffc34e; font-weight: 500; }
.dc-about__promise { margin: 25px 0 0 22px; font-size: 11px; line-height: 2; letter-spacing: .28em; text-transform: uppercase; }
.dc-about__promise::before { content: ''; display: block; width: 35px; height: 3px; background: #ffc34e; margin-bottom: 24px; }
.dc-about__ideas { position: absolute; z-index: 1; right: 6%; bottom: 8%; margin: 0; color: #edf4ff; text-transform: uppercase; font-size: 12px; line-height: 2.4; letter-spacing: .32em; text-shadow: 0 1px 8px #001324; }
.dc-solutions { padding: clamp(52px, 5vw, 88px) clamp(22px, 3.8vw, 64px) clamp(40px, 4vw, 72px); color: #0a1e3e; background: radial-gradient(circle at 100% 30%, #e6efff 0, #f9fbff 31%, transparent 55%), linear-gradient(135deg, #f5f8ff, #fff 57%, #f6fbfc); }
.dc-solutions__head { display: flex; gap: 30px; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto 44px; }
.dc-solutions__head > div { max-width: 850px; }
.dc-solutions__eyebrow, .dc-approach__eyebrow { display: flex; align-items: center; gap: 18px; margin: 0 0 15px; color: #102a51; text-transform: uppercase; letter-spacing: .36em; font-size: 12px; font-weight: 600; }
.dc-solutions__eyebrow::after, .dc-approach__eyebrow::after { content: ''; width: 80px; height: 1px; background: #e4ad3e; }
.content-band .dc-solutions h2 { margin: 0 0 15px; font-size: clamp(34px, 3.4vw, 60px); line-height: 1.12; letter-spacing: -.04em; font-weight: 650; }
.dc-solutions h2 span { color: #336fbd; }
.dc-solutions__head > div > p:last-child { max-width: 820px; margin: 0; color: #4b5d7c; font-size: clamp(15px, 1.25vw, 21px); line-height: 1.55; }
.dc-solutions__motto { flex: 0 0 250px; padding: 14px 0 14px 38px; border-left: 1px solid #a9b8cc; color: #7d8cab; text-transform: uppercase; letter-spacing: .35em; font-size: 12px; line-height: 1.8; }
.dc-solutions__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 22px); max-width: 1600px; margin: 0 auto 32px; }
.dc-solution-card { position: relative; overflow: hidden; min-width: 0; border-radius: 13px; background: #f8fbff; box-shadow: 0 12px 27px #10274a0b; }
.prose .dc-solution-card > img { display: block; width: 100%; aspect-ratio: 1.58 / 1; object-fit: cover; }
.dc-solution-card__body { position: relative; min-height: 263px; padding: 42px 24px 20px; }
.dc-solution-card__icon { position: absolute; top: -31px; left: 23px; display: grid; place-items: center; width: 59px; height: 59px; color: #245fa8; border: 1px solid currentColor; border-radius: 50%; background: #eff7ff; font-size: 28px; font-weight: 300; }
.dc-solution-card h3 { min-height: 58px; margin: 0 0 10px; font-size: clamp(16px, 1.25vw, 21px); line-height: 1.3; font-weight: 650; }
.dc-solution-card p { min-height: 76px; margin: 0 0 11px; color: #4b5d7d; font-size: clamp(13px, 1vw, 16px); line-height: 1.55; }
.dc-solution-card a { display: inline-flex; align-items: center; gap: 18px; color: #0e2851; border-bottom: 1px solid #7dabdd; text-decoration: none; font-size: 14px; font-weight: 650; }
.dc-solution-card a span { font-size: 21px; line-height: .7; }
.dc-solution-card--green { background: #f7fffb; } .dc-solution-card--green .dc-solution-card__icon { color: #169e6a; background: #ecfcf4; } .dc-solution-card--green a { border-color: #8acdae; }
.dc-solution-card--violet { background: #f9faff; } .dc-solution-card--violet .dc-solution-card__icon { color: #4e61ff; background: #f1f4ff; } .dc-solution-card--violet a { border-color: #a1adff; }
.dc-solution-card--gold { background: #fffaf2; } .dc-solution-card--gold .dc-solution-card__icon { color: #a36222; background: #fff6e7; } .dc-solution-card--gold a { border-color: #e0b47c; }
.dc-solution-card--rose { background: #fff8f8; } .dc-solution-card--rose .dc-solution-card__icon { color: #a43d49; background: #fff1f2; } .dc-solution-card--rose a { border-color: #e5a2a8; }
.dc-approach { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(500px, 1.75fr) 270px; align-items: stretch; overflow: hidden; max-width: 1600px; min-height: 275px; margin: 0 auto; color: #f6f9ff; border-radius: 13px; background: radial-gradient(circle at 65% 40%, #155779, transparent 38%), linear-gradient(105deg, #071e35, #103954 60%, #081b30); }
.dc-approach__intro { padding: 40px clamp(26px, 3vw, 54px); }
.dc-approach .dc-approach__eyebrow { color: #f4f6fb; font-size: 10px; margin-bottom: 9px; } .dc-approach .dc-approach__eyebrow::after { width: 33px; }
.content-band .dc-approach h2 { margin: 0 0 12px; font-size: clamp(25px, 2vw, 36px); color: #fff; font-weight: 500; }
.dc-approach__intro > p:not(.dc-approach__eyebrow) { margin: 0 0 18px; color: #e0e9f3; font-size: 14px; line-height: 1.55; }
.dc-approach__intro a { display: inline-flex; align-items: center; gap: 16px; padding: 12px 21px; color: #142a45; border-radius: 99px; background: #ffcf64; text-decoration: none; font-size: 13px; font-weight: 650; }
.dc-approach__intro a span { font-size: 20px; }
.dc-approach__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); align-content: center; gap: 18px; list-style: none; margin: 0; padding: 34px 8px; }
.dc-approach__steps::before { content: ''; position: absolute; z-index: 0; top: 53%; right: 11%; left: 12%; height: 1px; background: #f3bc3e; transform: translateY(-18px); }
.dc-approach__steps li { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; text-align: center; }
.dc-approach__steps span { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; color: #fff; border: 1px solid #b4c5d7; border-radius: 50%; background: #1a405a; font-size: 21px; }
.dc-approach__steps strong { color: #fff; font-size: 14px; } .dc-approach__steps small { margin-top: 3px; color: #e1eafa; font-size: 11px; }
.dc-approach__visual { position: relative; min-height: 275px; overflow: hidden; } .prose .dc-approach__visual img { width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: saturate(.8); }
.dc-approach__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #103954, transparent 60%), linear-gradient(0deg, #06172add, transparent 60%); }
.dc-approach__visual p { position: absolute; z-index: 1; right: 36px; bottom: 33px; margin: 0; color: #edf4fd; text-transform: uppercase; font-size: 11px; line-height: 2; letter-spacing: .25em; }.dc-approach__visual b { color: #ffc947; }
/* Featured case study: a single full-bleed scene with live CMS content above it. */
.dc-casestudy {
    --case-gold: #ffc344;
    position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 90px;
    padding-bottom: clamp(28px, 3.5vw, 70px);
    color: #f4f5fa; background: #031323;
}
.dc-casestudy__main { min-height: clamp(570px, 43.65vw, 875px); }
.dc-casestudy__copy { position: relative; z-index: 2; width: 41%; padding: clamp(55px, 5.65vw, 113px) 0 36px 4.2%; }
.dc-casestudy__eyebrow { display: flex; align-items: center; gap: 1.4vw; margin: 0 0 2.1vw; color: #f4f5fa; text-transform: uppercase; letter-spacing: .25em; font-size: clamp(10px, .82vw, 16px); font-weight: 400; }
.dc-casestudy__eyebrow::before { content: ""; width: 2.6vw; min-width: 28px; height: 3px; border-radius: 3px; background: var(--case-gold); }
.content-band .dc-casestudy h2 { margin: 0 0 1.15vw; color: #f5f5f8; font-size: clamp(34px, 3.1vw, 62px); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; }
.dc-casestudy h2 span { color: var(--case-gold); }
.dc-casestudy__intro { max-width: 34vw; margin: 0 0 2.65vw; color: #d9dce5; font-size: clamp(15px, 1.22vw, 24px); line-height: 1.4; }
.dc-casestudy__stats { display: flex; align-items: center; list-style: none; margin: 0 0 2.8vw; padding: 0; }
.dc-casestudy__stats li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .8vw; align-items: center; min-width: 0; padding: 0 .85vw; border-left: 1px solid #a3b4ca80; }
.dc-casestudy__stats li:first-child { padding-left: 0; border: 0; }
.dc-casestudy__stats li:last-child { padding-right: 0; }
.dc-casestudy__stat-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: clamp(48px, 4.25vw, 85px); height: clamp(48px, 4.25vw, 85px); border: 1px solid #a6b8cb66; border-radius: 50%; background: radial-gradient(circle at 35% 20%, #1e344766, #02111b80 70%); box-shadow: inset 0 0 0 4px #020d1c55; }
.prose .dc-casestudy__stat-icon img { width: 70%; height: 70%; object-fit: contain; }
.dc-casestudy__stats strong { align-self: end; color: var(--case-gold); font-size: clamp(17px, 1.4vw, 28px); font-weight: 600; line-height: 1.3; }
.dc-casestudy__stats li > span:last-child { align-self: start; color: #f4f5fa; font-size: clamp(10px, .79vw, 16px); line-height: 1.5; }
.dc-casestudy__cta { display: inline-flex; align-items: center; justify-content: center; gap: 1.2vw; min-height: clamp(48px, 3.45vw, 69px); padding: .7vw 2.1vw; border: 1px solid #ffdb79; border-radius: 15px; background: linear-gradient(105deg, #ffc13c, #ffca57); color: #08111a; text-decoration: none; font-size: clamp(14px, 1.16vw, 23px); font-weight: 600; line-height: 1.4; box-shadow: inset 0 1px 0 #fff3; transition: background .18s, box-shadow .18s; }
.dc-casestudy__cta span { font-size: 1.65em; font-weight: 400; line-height: 1; }
.dc-casestudy__cta:hover { background: #ffda79; color: #08111a; box-shadow: 0 5px 24px #ffc34426; }
.dc-casestudy__cta:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.dc-casestudy__visual { position: absolute; z-index: 0; inset: 0; }
.prose .dc-casestudy__image { display: block; width: 100%; height: 88%; max-width: none; object-fit: fill; object-position: center; }
.dc-casestudy__visual::before, .dc-casestudy__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.dc-casestudy__visual::before { background: linear-gradient(110deg, #21315488, #11244222 65%); clip-path: polygon(31% 0, 49% 0, 37% 65%, 55% 100%, 50% 100%); }
.dc-casestudy__visual::after { background: linear-gradient(113deg, #0c1b32d9, #1d2b4980 45%, #06152526); clip-path: polygon(45% 0, 55% 0, 35% 77%, 34% 66%); border-top: 1px solid #afbed333; }
.dc-casestudy::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(0deg, #031323e6, transparent 24%), linear-gradient(90deg, #031323b3, transparent 52%); }
.dc-casestudy__motto { position: absolute; z-index: 1; top: 6.5%; right: 6.1%; margin: 0; color: #f4f5fa; text-transform: uppercase; font-size: clamp(11px, 1vw, 20px); font-weight: 400; line-height: 1.6; letter-spacing: .2em; }
.dc-casestudy__motto::before { content: ""; position: absolute; z-index: -1; top: -8vw; right: -4vw; bottom: -24vw; left: -4vw; transform: skewX(-23deg); background: linear-gradient(180deg, #182644b3, #17253d66); pointer-events: none; }
.dc-casestudy__motto::after { content: ""; display: block; width: 2.7vw; height: 3px; margin-top: 1vw; background: var(--case-gold); }
.dc-casestudy__quote { position: absolute; z-index: 1; top: 27.8%; right: 1.5%; display: grid; grid-template-columns: 1fr 30%; column-gap: 1.1vw; width: 28.5%; margin: 0; padding: 1.7vw 1.5vw 1.35vw; color: #f5f5f8; border: 1px solid #b3c0d080; border-radius: 22px; background: linear-gradient(120deg, #273040bb, #111e31cc); box-shadow: 0 12px 34px #0003, inset 0 1px 0 #fff2; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dc-casestudy__quote blockquote { margin: 0; padding: 0; }
.dc-casestudy__quote blockquote::before { content: "“"; display: block; height: 1.7vw; color: var(--case-gold); font-family: Georgia, serif; font-size: clamp(40px, 3.5vw, 70px); font-weight: 700; line-height: .8; }
.dc-casestudy__quote blockquote p { margin: .1vw 0 .9vw; font-size: clamp(11px, .9vw, 18px); line-height: 1.5; }
.dc-casestudy__quote figcaption { grid-column: 1; margin: 0; color: #f0f1f5; font-size: clamp(10px, .8vw, 16px); line-height: 1.4; }
.dc-casestudy__quote figcaption::before { content: ""; display: block; width: 2vw; height: 2px; margin-bottom: .65vw; background: var(--case-gold); }
.dc-casestudy__quote-meta { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6vw; padding-left: 1.1vw; border-left: 1px solid #c5ced677; text-align: center; }
.prose .dc-casestudy__quote-meta img { width: 4.6vw; height: 5vw; object-fit: contain; opacity: .75; }
.dc-casestudy__quote-meta p { margin: 0; }
.dc-casestudy__quote-meta strong { display: block; margin-bottom: .35vw; color: #e1e6f0; font-size: clamp(8px, .65vw, 13px); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.dc-casestudy__quote-meta span { display: block; color: #e1e6f0; font-size: clamp(7px, .55vw, 11px); letter-spacing: .18em; line-height: 1.5; text-transform: uppercase; }
.dc-casestudy__bar { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); align-items: center; gap: 2.5vw; min-height: 9.15vw; margin: 0 3.2%; padding: 1.8vw 1.55vw; border: 1px solid #90abc266; border-radius: 28px; background: linear-gradient(110deg, #05192bad, #243145b3 60%, #0a1729bd); box-shadow: inset 0 1px 0 #fff1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.dc-casestudy__bar-copy { display: flex; align-items: center; gap: 1.6vw; min-width: 0; }
.dc-casestudy__bar-icon { display: grid; place-items: center; flex: 0 0 5.3vw; width: 5.3vw; height: 5.3vw; border: 1px solid #b4cde21f; border-radius: 50%; background: linear-gradient(135deg, #263d54, #09192a); }
.prose .dc-casestudy__bar-icon img { width: 58%; height: 58%; }
.content-band .dc-casestudy__bar h3 { margin: 0 0 .35vw; color: #f5f5f8; font-size: clamp(17px, 1.4vw, 28px); font-weight: 600; line-height: 1.3; letter-spacing: -.03em; }
.dc-casestudy__bar-copy p { margin: 0; color: #f0f1f6; font-size: clamp(12px, .97vw, 19px); line-height: 1.5; }
.dc-casestudy__cta--bar { justify-self: center; padding-inline: 1.6vw; border-radius: 10px; font-size: clamp(12px, .97vw, 19px); white-space: nowrap; }
.dc-casestudy__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: stretch; list-style: none; margin: 0; padding: 0; }
.dc-casestudy__steps li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55vw; padding: 0 .7vw; border-left: 1px solid #a3b4ca55; color: #f4f5fa; text-align: center; font-size: clamp(11px, .88vw, 17px); font-weight: 400; line-height: 1.5; }
.dc-casestudy__step-icon { display: grid; place-items: center; width: 2.5vw; height: 2.5vw; }
.prose .dc-casestudy__step-icon img { width: 100%; height: 100%; }
@media (max-width: 1150px) and (min-width: 961px) {
    .dc-casestudy__main { min-height: 610px; }
    .dc-casestudy__copy { width: 54%; padding-top: 54px; }
    .dc-casestudy__intro { max-width: 420px; margin-bottom: 30px; }
    .dc-casestudy__stats { margin-bottom: 32px; }
    .dc-casestudy__quote { top: 23%; width: 33%; padding: 20px 16px; }
    .dc-casestudy__quote-break { display: none; }
    .dc-casestudy__quote blockquote::before { height: 25px; }
    .dc-casestudy__bar { grid-template-columns: 1fr auto; gap: 24px; padding: 24px; }
    .dc-casestudy__bar-icon { flex-basis: 64px; width: 64px; height: 64px; }
    .dc-casestudy__steps { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid #a3b4ca55; }
    .dc-casestudy__steps li:first-child { border-left: 0; }
    .dc-casestudy__step-icon { width: 32px; height: 32px; }
}
@media (max-width: 960px) {
    .dc-casestudy { padding-bottom: 24px; }
    .dc-casestudy::after { display: none; }
    .dc-casestudy__main { min-height: 0; }
    .dc-casestudy__copy { width: 100%; padding: 42px 22px 24px; background: radial-gradient(ellipse at top right, #20315380, transparent 60%); }
    .dc-casestudy__eyebrow { gap: 16px; margin-bottom: 24px; font-size: 10px; }
    .content-band .dc-casestudy h2 { margin-bottom: 20px; font-size: clamp(27px, 6.3vw, 46px); line-height: 1.15; }
    .dc-casestudy__intro { max-width: 540px; margin-bottom: 28px; font-size: 15px; line-height: 1.6; }
    .dc-casestudy__stats { align-items: stretch; justify-content: flex-start; gap: 0; margin-bottom: 30px; }
    .dc-casestudy__stats li { grid-template-columns: 1fr; grid-template-rows: 60px auto 1fr; align-content: start; gap: 4px; flex: 1; padding: 0 12px; }
    .dc-casestudy__stat-icon { grid-row: auto; width: 52px; height: 52px; margin-bottom: 4px; }
    .dc-casestudy__stats strong { font-size: clamp(15px, 4.3vw, 21px); }
    .dc-casestudy__stats li > span:last-child { font-size: 10px; }
    .dc-casestudy__cta { min-height: 50px; padding: 12px 22px; gap: 18px; border-radius: 12px; font-size: 14px; }
    .dc-casestudy__visual { position: relative; inset: auto; height: clamp(440px, 85vw, 560px); }
    .prose .dc-casestudy__image { height: 100%; object-fit: cover; object-position: 73% center; }
    .dc-casestudy__visual::before { display: none; }
    .dc-casestudy__visual::after { clip-path: none; border: 0; background: linear-gradient(180deg, #031323, transparent 18%, transparent 55%, #031323); }
    .dc-casestudy__motto::before { display: none; }
    .dc-casestudy__motto { top: 22px; right: 22px; font-size: 10px; }
    .dc-casestudy__motto::after { width: 30px; margin-top: 10px; height: 2px; }
    .dc-casestudy__quote { top: auto; right: 22px; bottom: 16px; left: 22px; width: auto; padding: 20px 18px; gap: 12px; border-radius: 18px; }
    .dc-casestudy__quote blockquote::before { height: 26px; font-size: 44px; }
    .dc-casestudy__quote blockquote p { margin: 0 0 12px; font-size: 12px; }
    .dc-casestudy__quote-break { display: none; }
    .dc-casestudy__quote figcaption { font-size: 11px; }
    .dc-casestudy__quote figcaption::before { width: 28px; margin-bottom: 10px; }
    .dc-casestudy__quote-meta { gap: 10px; padding-left: 12px; }
    .prose .dc-casestudy__quote-meta img { width: 58px; height: 65px; }
    .dc-casestudy__quote-meta strong { margin-bottom: 6px; font-size: 8px; }
    .dc-casestudy__quote-meta span { font-size: 7px; }
    .dc-casestudy__bar { grid-template-columns: 1fr; gap: 24px; margin: 8px 16px 0; padding: 24px 18px; border-radius: 22px; }
    .dc-casestudy__bar-copy { align-items: flex-start; gap: 14px; }
    .dc-casestudy__bar-icon { flex-basis: 48px; width: 48px; height: 48px; }
    .content-band .dc-casestudy__bar h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.35; }
    .dc-casestudy__bar-copy p { font-size: 12px; line-height: 1.6; }
    .dc-casestudy__cta--bar { justify-self: stretch; font-size: 13px; white-space: normal; }
    .dc-casestudy__steps { gap: 0; padding-top: 20px; border-top: 1px solid #a3b4ca55; }
    .dc-casestudy__steps li { gap: 10px; padding: 0 6px; font-size: 10px; }
    .dc-casestudy__steps li:first-child { border-left: 0; }
    .dc-casestudy__step-icon { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .dc-casestudy__cta { transition: none; } }

@media (min-width: 1760px) { .dc-about__copy { padding-left: max(64px, calc((100vw - 1632px) / 2)); } }
@media (max-width: 1150px) {
    .dc-solutions__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dc-solution-card__body { min-height: 245px; }
    .dc-approach { grid-template-columns: 300px 1fr; }.dc-approach__visual { display: none; }
    .dc-values__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 0; }
    .dc-values__list li:nth-child(4) { border: 0; padding-left: 0; }
    .dc-values h3 { font-size: 13px; } .dc-values p { font-size: 10px; }
    .dc-about__copy { width: 62%; } .dc-about__visual { left: 53%; }
    .dc-about__statement { left: 20%; width: 205px; padding: 26px 18px; }
    .dc-about__services li { padding: 0 14px; }
    .dc-about__ideas { display: none; }
}
@media (max-width: 760px) {
    .dc-solutions { padding: 40px 20px; }.dc-solutions__head { display: block; margin-bottom: 28px; }.dc-solutions__motto { display: none; }
    .dc-solutions__eyebrow { font-size: 10px; }.content-band .dc-solutions h2 { font-size: clamp(31px, 8.5vw, 40px); }.dc-solutions__head > div > p:last-child { font-size: 15px; }
    .dc-solutions__cards { grid-template-columns: 1fr; gap: 16px; }.dc-solution-card { display: grid; grid-template-columns: 43% 57%; }.prose .dc-solution-card > img { height: 100%; aspect-ratio: auto; }.dc-solution-card__body { min-height: 226px; padding: 31px 18px 15px; }.dc-solution-card__icon { top: -1px; left: -29px; width: 52px; height: 52px; font-size: 23px; }.dc-solution-card h3 { min-height: 0; font-size: 16px; }.dc-solution-card p { min-height: 0; font-size: 13px; }.dc-solution-card a { font-size: 12px; }
    .dc-approach { display: block; }.dc-approach__intro { padding: 32px 26px 12px; }.dc-approach__steps { grid-template-columns: repeat(2, 1fr); gap: 22px 4px; padding: 28px 20px 34px; }.dc-approach__steps::before { display: none; }.dc-approach__steps span { width: 53px; height: 53px; font-size: 17px; }.dc-approach__steps strong { font-size: 13px; }
    .dc-values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 18px; gap: 10px 0; }
    .dc-values__list li { border: 0; padding: 0 12px 0 0; gap: 10px; }
    .dc-values__list li:last-child { grid-column: 1 / -1; justify-self: center; }
    .dc-values h3 { font-size: 12px; } .dc-values p { font-size: 9px; } .dc-values p br { display: none; }
    .dc-values__icon { flex-basis: 36px; height: 36px; }
    .dc-about__copy { width: 100%; padding: 38px 24px; }
    .dc-about__eyebrow { font-size: 10px; margin-bottom: 22px; }
    .content-band .dc-about h2 { font-size: clamp(31px, 6.4vw, 46px); }
    .dc-about__intro { padding: 0; font-size: 15px; }
    .dc-about__services { grid-template-columns: 1fr; gap: 23px; }
    .dc-about__services li { padding: 0 0 0 82px; min-height: 64px; }
    .dc-about__services li:first-child { padding-left: 82px; }
    .dc-about__services li + li::before { display: none; }
    .dc-about__service-icon { position: absolute; left: 0; top: 0; width: 62px; height: 62px; }
    .dc-about__services h3 { font-size: 15px; } .dc-about__services p { font-size: 13px; }
    .dc-about__cta { font-size: 13px; padding: 12px 22px; gap: 16px; max-width: 100%; }
    .dc-about__visual { position: relative; inset: auto; height: 400px; }
    .dc-about__visual::after { background: linear-gradient(180deg, #fcfcfd, #fcfcfd00 25%); }
    .dc-about__statement { top: 18%; left: 7%; width: 210px; }
    .dc-about__promise { font-size: 9px; }
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose img, .media-block img { max-width: 100%; height: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.prose th { background: var(--mist); font-weight: 700; }
.prose iframe, .prose .ql-video, .prose video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; margin: 1.2em 0; background: #0d1519; }
/* The HTML editor's Indent button writes ql-indent-1..9 rather than a style, so the page has
   to say what the class means. Same steps the editor draws: 3em a level. */
.prose .ql-indent-1 { padding-inline-start: 3em; }
.prose .ql-indent-2 { padding-inline-start: 6em; }
.prose .ql-indent-3 { padding-inline-start: 9em; }
.prose .ql-indent-4 { padding-inline-start: 12em; }
.prose .ql-indent-5 { padding-inline-start: 15em; }
.prose .ql-indent-6 { padding-inline-start: 18em; }
.prose .ql-indent-7 { padding-inline-start: 21em; }
.prose .ql-indent-8 { padding-inline-start: 24em; }
.prose .ql-indent-9 { padding-inline-start: 27em; }

/* ---------------------------------------------------------------------------
   Image layout inside rich text. The HTML editor writes one cms-img-* class on
   the <img>; these rules are the whole of what that class means, and
   cms-html-editor.js carries the same set so Design and View match the page.
   "Through" also needs shape-outside naming the picture's own file, which the
   editor writes inline and CmsHtmlSanitizerService re-derives on save.
   --------------------------------------------------------------------------- */
.prose img.cms-img-wrap-left, .site-footer .block-richtext img.cms-img-wrap-left,
.prose img.cms-img-through-left, .site-footer .block-richtext img.cms-img-through-left { float: left; margin: .25em 1.4em .8em 0; }
.prose img.cms-img-wrap-right, .site-footer .block-richtext img.cms-img-wrap-right,
.prose img.cms-img-through-right, .site-footer .block-richtext img.cms-img-through-right { float: right; margin: .25em 0 .8em 1.4em; }
.prose img.cms-img-through-left, .prose img.cms-img-through-right { shape-margin: 14px; }
/* An image left at its natural size fills the column, and nothing can wrap beside it.
   A picture the author has sized keeps that size; only an unsized one is held back. */
.prose img[class*="cms-img-wrap-"]:not([width]):not([style*="width"]),
.prose img[class*="cms-img-through-"]:not([width]):not([style*="width"]) { max-width: 44%; }
.prose img.cms-img-break-left, .prose img.cms-img-break-center,
.prose img.cms-img-break-right, .prose img.cms-img-full { display: block; float: none; clear: both; margin-block: 1.2em; }
.prose img.cms-img-break-left { margin-inline: 0 auto; }
.prose img.cms-img-break-center { margin-inline: auto; }
.prose img.cms-img-break-right { margin-inline: auto 0; }
.prose img.cms-img-full { width: 100%; max-width: 100%; margin-inline: 0; }
/* A float must not reach past the block it was written in. Applied only when one is
   present, so the bespoke .prose layouts keep the box model they were built on. */
.prose:has(img[class*="cms-img-wrap-"])::after,
.prose:has(img[class*="cms-img-through-"])::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) {
    /* A 44% float in a phone column leaves a gutter too narrow to read. */
    .prose img[class*="cms-img-wrap-"], .prose img[class*="cms-img-through-"],
    .site-footer .block-richtext img[class*="cms-img-wrap-"],
    .site-footer .block-richtext img[class*="cms-img-through-"] { float: none; margin-inline: 0; max-width: 100%; }
}
.media-block { padding-block: 40px; }
.media-block img { display: block; width: 100%; max-height: 720px; object-fit: cover; }
.media-block figcaption { padding-top: 8px; color: var(--muted); font-size: .9rem; }
.cta-band { padding: 56px 0; background: var(--yellow); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-inner p { margin-bottom: 0; }
.cta-band .button { flex: 0 0 auto; }

.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.content-card { padding: 26px; border: 1px solid var(--line); border-top: 4px solid var(--teal); background: #fff; }
.content-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.content-card p { color: var(--muted); }
.text-link { color: var(--teal); font-weight: 700; }
.accordion-section { max-width: 900px; }
.accordion-section details { border-top: 1px solid var(--line); }
.accordion-section details:last-child { border-bottom: 1px solid var(--line); }
.accordion-section summary { position: relative; padding: 20px 46px 20px 0; font-weight: 700; cursor: pointer; list-style: none; }
.accordion-section summary::-webkit-details-marker { display: none; }
.accordion-section summary::after { content: "+"; position: absolute; right: 12px; font-size: 1.35rem; font-weight: 400; }
.accordion-section details[open] summary::after { content: "-"; }
.accordion-body { padding: 0 48px 22px 0; color: var(--muted); }

.video-block { max-width: 1000px; }
.video-frame { overflow: hidden; background: #0d1519; aspect-ratio: 16 / 9; }
.video-frame iframe, .video-frame video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }

.listing-page, .not-found { padding-block: 90px; min-height: 60vh; }
.listing-page h1, .not-found h1 { margin-top: 0; font-size: clamp(2.5rem, 5vw, 4.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; overflow-wrap: anywhere; }
.post-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 40px; border-top: 1px solid var(--line); }
.post-list article { padding: 30px 24px; border-bottom: 1px solid var(--line); }
.post-list article:nth-child(odd) { border-right: 1px solid var(--line); }
.post-list h2 { margin: 8px 0; font-size: 1.5rem; }
.post-list h2 a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-list time, .muted { color: var(--muted); }

.cms-public-form { display: grid; gap: 1rem; max-width: 720px; }
.form-field { display: grid; gap: .4rem; }
.form-field label { font-weight: 700; }
.form-field input, .form-field textarea, .form-field select { width: 100%; padding: .75rem; border: 1px solid #9eacb2; background: #fff; color: var(--ink); }
.form-field textarea { min-height: 130px; resize: vertical; }
.cms-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-message { max-width: 720px; margin-bottom: 1rem; padding: .85rem 1rem; border-left: 4px solid; }
.form-message.success { border-color: #16834b; background: #edf8f2; }
.form-message.error { border-color: #bd2c2c; background: #fff1f1; }

.site-footer { padding: 54px 0; background: var(--footer); color: #fff; }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.footer-inner > div strong { font-size: 1.25rem; }
.footer-inner > div p { color: #afbdc3; }
.footer-inner small { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid #304047; color: #a9b6bc; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer nav > ul { columns: 2; }
.site-footer li { break-inside: avoid; margin-bottom: 7px; }
.site-footer li ul { margin: 6px 0 10px 14px; color: #b8c4c9; }
.site-footer .submenu-toggle { display: none; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
    .cards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* The drawer breakpoint. A full menu and a call to action do not fit a bar
   narrower than this, so below it the menu moves into the drawer. site.js reads
   drawer mode from .nav-toggle's computed display rather than repeating the
   number; the other navigation queries in this file use the same 1200/1201px.
   Page content keeps its own 900px step. */
@media (max-width: 1200px) {
    .nav-toggle { display: block; }
    /* Height, not bottom:0. Even after the filter is dropped above, a
       transform/filter on the header would re-create a containing block and
       pin bottom to the header's own edge. 100dvh is the viewport, so the
       open drawer always runs from the measured header bottom to the screen
       bottom. --header-offset is the VISIBLE bottom (see measureHeader): a
       sticky bar with a top strip pins at -topbar-h, so the visible chrome
       is shorter once that strip has scrolled away. */
    .public-nav { display: none; position: fixed; top: var(--header-offset, 72px); right: 0; left: 0; height: calc(100vh - var(--header-offset, 72px)); height: calc(100dvh - var(--header-offset, 72px)); overflow-y: auto; padding: 14px 20px 34px; background: var(--header-ink); border-top: 1px solid var(--header-rule); }
    .public-nav.open { display: block; }
    .public-nav > ul, .public-nav ul { display: block; }
    .public-nav li.has-children { display: grid; grid-template-columns: 1fr 44px; align-items: center; }
    .public-nav li > ul, .public-nav li > ul li > ul { position: static; grid-column: 1 / -1; padding: 0 0 6px 14px; margin-left: 12px; border: 0; border-left: 2px solid var(--header-rule); border-radius: 0; background: none; box-shadow: none; }
    /* Nothing to cancel here any more: hover, the shared card and the pill all
       live inside (min-width: 1201px), so the drawer is the only mechanism in
       range and .open is the only thing that opens a panel. */
    .public-nav li.open > ul { display: block; }
    .public-nav > ul > li.mega > ul > li > ul { display: none; }
    .public-nav > ul > li.mega > ul > li.open > ul { display: block; }
    .public-nav > ul > li.mega > ul > li > a { padding: 12px; color: inherit; font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; }
    .public-nav a { padding: 12px; }
}

@media (max-width: 640px) {
    .site-shell { width: min(calc(100% - 28px), var(--max)); }
    .hero-band { min-height: 590px; }
    .hero-content { padding-block: 70px; }
    .hero-content .hero-title { font-size: clamp(2.5rem, 13vw, 4rem); }
    .content-band { padding: 58px 0; }
    .cta-inner, .footer-inner { display: block; }
    .cta-inner .button { margin-top: 24px; }
    .cards-grid, .post-list { grid-template-columns: 1fr; }
    .post-list article:nth-child(odd) { border-right: 0; }
    .site-footer nav { margin-block: 28px; }
    .site-footer nav > ul { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   CMS banner. Scoped to .cms-banner so it cannot reach unrelated components.
   Per-instance geometry is emitted inline by the view; this is the shared shell.
   --------------------------------------------------------------------------- */
.cms-banner { position: relative; margin: 0 auto; max-width: var(--max); }
.cms-banner--full { max-width: none; }
.cms-banner__viewport { position: relative; width: 100%; }
.cms-banner__slide { position: relative; width: 100%; height: 100%; display: flex; overflow: hidden; }
.cms-banner__slide[hidden] { display: none; }
.cms-banner__bg { position: absolute; inset: 0; }
.cms-banner__bg img { width: 100%; height: 100%; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
.cms-banner__bg[data-fit="cover"] img { object-fit: cover; }
.cms-banner__bg[data-fit="contain"] img { object-fit: contain; }
.cms-banner__bg[data-fit="fill"] img { object-fit: fill; }
.cms-banner__overlay { position: absolute; inset: 0; pointer-events: none; }
.cms-banner__stage { position: relative; width: 100%; margin: 0 auto; }
.cms-banner__el { position: absolute; display: flex; }
.cms-banner__el > * { max-width: 100%; }
/* An image element's <img> carries the source's raw width/height attributes (so the layout
   reserves space before it loads), which otherwise wins over the flex box sizing above and
   renders the image at its native pixel size instead of the authored box. data-fit is only
   present on image elements, so this never touches text, buttons or shapes. */
.cms-banner__el[data-fit] img { width: 100%; height: 100%; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
.cms-banner__el[data-fit="cover"] img { object-fit: cover; }
.cms-banner__el[data-fit="contain"] img { object-fit: contain; }
.cms-banner__el[data-fit="fill"] img { object-fit: fill; }
/* Marks whichever jump-to-slide link points at the slide it's already on - see banner.js. */
.cms-banner__el--nav-current { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 4px; border-radius: var(--radius-md); }
.cms-banner__text { margin: 0; overflow-wrap: anywhere; }
.cms-banner__shape { width: 100%; height: 100%; }
.cms-banner__btn { display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; font-family: var(--font-sans); font-weight: 600;
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
    min-height: var(--control-min-target); }
.cms-banner__btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.cms-banner__btn--primary:hover { background: var(--btn-primary-bg-hover); }
.cms-banner__btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg);
    border: 1px solid var(--btn-secondary-border); }
.cms-banner__btn--ghost { color: var(--btn-ghost-fg); border: 1px solid currentColor; }

/* The stretched whole-slide link sits beneath the interactive elements, so buttons
   and image links keep working and no anchor is ever nested inside another. */
.cms-banner__slide-link { position: absolute; inset: 0; z-index: 0; }
.cms-banner__stage, .cms-banner__el { z-index: 1; }
.cms-banner__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cms-banner__nav,
.cms-banner__pause { display: none !important; }
.cms-banner__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    border: 0; background: rgba(255,255,255,.85); color: var(--ink); cursor: pointer;
    width: var(--control-min-target); height: var(--control-min-target);
    border-radius: var(--radius-pill); font-size: 1.5rem; line-height: 1; }
.cms-banner__nav--prev { left: var(--space-3); }
.cms-banner__nav--next { right: var(--space-3); }
.cms-banner__dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%);
    z-index: 2; display: flex; gap: var(--space-2); }
/* The dot is 12px but the hit area is a full touch target, so the control is easy to
   press without making the visual indicator clumsy. */
.cms-banner__dots button { width: 12px; height: 12px; padding: 0; border-radius: var(--radius-pill);
    border: 1px solid var(--paper); background: transparent; cursor: pointer; position: relative; }
.cms-banner__dots button::after { content: ""; position: absolute; top: 50%; left: 50%;
    width: var(--control-min-target); height: var(--control-min-target); transform: translate(-50%,-50%); }
.cms-banner__dots button[aria-current="true"] { background: var(--paper); }
.cms-banner__pause { position: absolute; bottom: var(--space-3); right: var(--space-3); z-index: 2;
    cursor: pointer; border: 0; background: rgba(255,255,255,.85); color: var(--ink);
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
    min-height: var(--control-min-target); }

.cms-banner__video { position: relative; width: 100%; height: 100%; }
.cms-banner__video img, .cms-banner__video video, .cms-banner__video iframe {
    width: 100%; height: 100%; object-fit: cover; border: 0; }
.cms-banner__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 64px; height: 64px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
    background: rgba(255,255,255,.9); color: var(--ink); font-size: 1.5rem; }

.cms-banner :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .cms-banner__slide { transition: none !important; animation: none !important; }
}

/* Banner motion. Everything here is opt-in: the defaults in the editor are "none", and
   a visitor who asks for reduced motion gets the static result regardless.
   data-motion-ready is set by banner.js once it can keep two slides painted; until then
   slides stay in normal flow so a no-JS first paint cannot collapse the viewport. */
@keyframes cmsBannerFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes cmsBannerRiseIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes cmsBannerSlideEnter { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
@keyframes cmsBannerSlideInLeft { from { opacity: 0; transform: translateX(-40px) } to { opacity: 1; transform: none } }

.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__viewport,
.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__viewport {
    overflow: hidden !important;
}

.cms-banner[data-animating] .cms-banner__slide[data-from],
.cms-banner[data-animating] .cms-banner__slide[data-active="true"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cms-banner[data-motion-ready] .cms-banner__slide[data-from],
.cms-banner[data-motion-ready] .cms-banner__slide[data-leaving] {
    pointer-events: none;
    will-change: transform, opacity;
}

.cms-banner[data-motion-ready] .cms-banner__slide[data-from] { z-index: 2; }
.cms-banner[data-motion-ready] .cms-banner__slide[data-leaving] { z-index: 1; }
.cms-banner[data-motion-ready] .cms-banner__slide[data-active="true"] { z-index: 2; }

.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide {
    transition: transform var(--cms-banner-transition, 750ms) cubic-bezier(0.22, 1, 0.36, 1);
}
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-from] { transition: none; }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-from="next"] { transform: translate3d(100%, 0, 0); }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-from="prev"] { transform: translate3d(-100%, 0, 0); }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-active="true"] { transform: translate3d(0, 0, 0); }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-leaving="next"] { transform: translate3d(-100%, 0, 0); }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-leaving="prev"] { transform: translate3d(100%, 0, 0); }

.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__slide {
    transition: opacity var(--cms-banner-transition, 600ms) ease;
}
.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__slide[data-from] { transition: none; opacity: 0; }
.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__slide[data-active="true"] { opacity: 1; }
.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__slide[data-leaving] { opacity: 0; }

/* Element entrance runs only once its slide is the active one. The server marks the first
   slide active, so with JavaScript disabled that slide still animates in and, more
   importantly, still ends up visible. */
.cms-banner__el[data-anim]:not([data-anim=""]) { animation-fill-mode: both; animation-play-state: paused; }
.cms-banner__slide[data-active="true"] .cms-banner__el[data-anim] { animation-play-state: running; }
.cms-banner__el[data-anim="fadeIn"] { animation-name: cmsBannerFadeIn; }
.cms-banner__el[data-anim="riseIn"] { animation-name: cmsBannerRiseIn; }
.cms-banner__el[data-anim="slideInLeft"] { animation-name: cmsBannerSlideInLeft; }

@media (prefers-reduced-motion: reduce) {
    /* Not just "slower" - no entrance at all, and nothing left mid-animation. */
    .cms-banner__slide[data-active="true"],
    .cms-banner__el[data-anim]:not([data-anim=""]) { animation: none !important; opacity: 1 !important; transform: none !important; }
    .cms-banner[data-motion-ready] .cms-banner__slide { transition: none !important; }
}

/* Vertical navigation. The controls move to the right edge and the arrows sit above and
   below, so the affordance matches the direction the carousel actually travels. */
.cms-banner[data-nav="vertical"] .cms-banner__nav { top: auto; left: auto; right: var(--space-3); transform: none; }
.cms-banner[data-nav="vertical"] .cms-banner__nav--prev { top: var(--space-3); }
.cms-banner[data-nav="vertical"] .cms-banner__nav--next { bottom: var(--space-3); }
.cms-banner[data-nav="vertical"] .cms-banner__dots {
    flex-direction: column; left: auto; bottom: auto; right: var(--space-3);
    top: 50%; transform: translateY(-50%);
}
/* Dots clear the arrows when both are shown. */
.cms-banner[data-nav="vertical"] .cms-banner__pause { bottom: var(--space-3); left: var(--space-3); right: auto; }

.cms-banner[data-nav="horizontal"][data-dots-align="start"] .cms-banner__dots { left: var(--space-4); transform: none; }
.cms-banner[data-nav="horizontal"][data-dots-align="end"] .cms-banner__dots { left: auto; right: var(--space-4); transform: none; }
.cms-banner[data-nav="vertical"][data-dots-align="start"] .cms-banner__dots { top: var(--space-6); transform: none; }
.cms-banner[data-nav="vertical"][data-dots-align="end"] .cms-banner__dots { top: auto; bottom: var(--space-6); transform: none; }

/* Indicator styles. Dots stay the compact default; numbers, labels and thumbnails need real
   boxes, so they drop the circular treatment rather than trying to squeeze into it. */
.cms-banner__dots[data-style="numbers"] button,
.cms-banner__dots[data-style="labels"] button,
.cms-banner__dots[data-style="thumbnails"] button {
    width: auto; height: auto; border-radius: var(--radius-md);
    background: rgba(255,255,255,.85); color: var(--ink);
    padding: var(--space-1) var(--space-3); min-height: var(--control-min-target);
    font: 600 .85rem/1 var(--font-sans); overflow: hidden;
}
.cms-banner__dots[data-style="numbers"] button { min-width: var(--control-min-target); }
.cms-banner__dots[data-style="labels"] button { max-width: 180px; white-space: nowrap;
    text-overflow: ellipsis; display: inline-block; }
.cms-banner__dots[data-style="thumbnails"] button { padding: 0; line-height: 0; border: 2px solid transparent; }
.cms-banner__dots[data-style="thumbnails"] button img { width: 64px; height: 40px; object-fit: cover; display: block; }

.cms-banner__dots[data-style="numbers"] button[aria-current="true"],
.cms-banner__dots[data-style="labels"] button[aria-current="true"] { background: var(--ink); color: var(--paper); }
.cms-banner__dots[data-style="thumbnails"] button[aria-current="true"] { border-color: var(--paper); }

/* The oversized invisible hit area only makes sense for the small round dots. */
.cms-banner__dots:not([data-style="dots"]) button::after { display: none; }

/* Entrance presets. Each maps to one named animation the editor can pick; the stylesheet
   owns what the motion actually is, so no CSS ever comes from content. */
@keyframes cmsBannerSlideInRight { from { opacity: 0; transform: translateX(40px) } to { opacity: 1; transform: none } }
@keyframes cmsBannerSlideInUp    { from { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: none } }
@keyframes cmsBannerSlideInDown  { from { opacity: 0; transform: translateY(-40px) } to { opacity: 1; transform: none } }
@keyframes cmsBannerZoomIn       { from { opacity: 0; transform: scale(.86) } to { opacity: 1; transform: none } }
@keyframes cmsBannerZoomOut      { from { opacity: 0; transform: scale(1.14) } to { opacity: 1; transform: none } }

.cms-banner__el[data-anim="slideInRight"] { animation-name: cmsBannerSlideInRight; }
.cms-banner__el[data-anim="slideInUp"]    { animation-name: cmsBannerSlideInUp; }
.cms-banner__el[data-anim="slideInDown"]  { animation-name: cmsBannerSlideInDown; }
.cms-banner__el[data-anim="zoomIn"]       { animation-name: cmsBannerZoomIn; }
.cms-banner__el[data-anim="zoomOut"]      { animation-name: cmsBannerZoomOut; }
.cms-banner__el[data-anim="slideInLeft"]  { animation-name: cmsBannerSlideInLeft; }

/* Named curves, resolved here so a document never carries a raw cubic-bezier. */
.cms-banner__el[data-ease="ease"]      { animation-timing-function: ease; }
.cms-banner__el[data-ease="linear"]    { animation-timing-function: linear; }
.cms-banner__el[data-ease="easeOut"]   { animation-timing-function: cubic-bezier(.16,.84,.44,1); }
.cms-banner__el[data-ease="easeInOut"] { animation-timing-function: cubic-bezier(.65,.05,.36,1); }
.cms-banner__el[data-ease="back"]      { animation-timing-function: cubic-bezier(.34,1.56,.64,1); }

/* ---------------------------------------------------------------------------
   CMS site layout: announcement bar, header slots, footer regions.

   Values come from the two CmsLayouts documents as custom properties emitted by
   _LayoutStyles.cshtml. The rules live here so nothing an editor types can
   reach a selector.

   Two numbers deliberately stay in CSS. The 1200px drawer breakpoint is declared once,
   in the media query above, and site.js reads drawer mode from the toggle's
   computed display rather than repeating the number. And --header-offset is
   MEASURED from the rendered header at runtime: min-height does not describe
   the real height once branding or a wrapped announcement makes it taller.
   --------------------------------------------------------------------------- */

.site-announce { background: var(--announce-bg, #12333f); color: var(--announce-fg, #fff); font-size: .92rem; }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; padding-block: 8px; }
.announce-inner p { margin: 0; text-align: center; }
.site-announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; }
.announce-close { margin-left: auto; padding: 4px 10px; background: none; border: 0; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.announce-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.site-announce[hidden] { display: none; }

.site-header:not(.is-sticky) { position: static; }

/* Hide the pinned bar while the visitor scrolls down; slide it back on scroll up.
   Transform only — the layout box stays put, so the page does not jump. */
.site-header.is-sticky,
.site-header.is-transparent { transition: transform .28s ease; }
.site-header.is-away {
    transform: translate3d(0, calc(-100% - var(--header-gap, 0px) - 12px), 0);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .site-header.is-sticky,
    .site-header.is-transparent { transition: none; }
}
/* ShowBorderBottom is the hairline between the top bar and the navigation. */
.site-header.has-border > .site-topbar { box-shadow: inset 0 -1px 0 var(--header-rule); }

/* Transparency is opt-in AND script-confirmed. The default here is opaque, so a
   visitor without JavaScript never lands on unreadable text over a pale hero.
   The card's text is light either way, so only its ground changes. */
.site-header.is-transparent { position: fixed; inset-inline: 0; top: 0; background: var(--header-overlay, rgba(0,0,0,.45)); box-shadow: none; }
.site-header.is-transparent.is-opaque { position: sticky; background: var(--header-ink); box-shadow: 0 1px 0 var(--header-rule); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 18px; border-radius: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-action svg.icon { width: 1.15em; height: 1.15em; transition: transform .2s ease; }
.header-action.action-primary { background: var(--accent, #12333f); color: #fff; }
.header-action.action-outline { border: 1px solid currentColor; }
.header-action.action-text { padding-inline: 4px; text-decoration: underline; text-underline-offset: 4px; }
.drawer-actions { display: none; }

/* In the site header the actions are pills and the primary one is the gold call to action.
   The page footer band reuses .header-action and keeps its own look. */
.site-header .header-action { min-height: 44px; padding: 8px 22px; border-radius: var(--radius-pill); }
/* Sans, like the navigation beside it. The serif was the one other voice on a bar that is
   otherwise a single typeface, and the gradient already does the work of standing out. */
.site-header .header-action.action-primary { font-size: 1rem; font-weight: 600; letter-spacing: .01em; background: linear-gradient(115deg, #ffdf94 0%, var(--header-accent) 52%, var(--header-accent-deep) 100%); color: #21180a; box-shadow: 0 14px 30px -14px rgba(245, 183, 59, .7); transition: box-shadow .18s ease, filter .18s ease; }
.site-header .header-action.action-primary:hover { filter: brightness(1.06); box-shadow: 0 16px 30px -12px rgba(245, 183, 59, .8); }
.site-header .header-action.action-outline { border-color: var(--header-rule); color: #fff; }
.site-header .header-action.action-outline:hover { border-color: var(--header-accent); }
.site-header .header-action.action-text { color: var(--header-fg); }
.site-header .header-action:hover svg.icon-arrow-right { transform: translateX(3px); }

.site-header.preset-logocentred .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.site-header.preset-logocentred .brand { grid-column: 2; justify-self: center; }
@media (min-width: 1201px) {
    /* Centred arrangements give the menu the room between the two hairlines and centre it there. */
    .site-header.preset-logoleftmenucentre .public-nav,
    .site-header.preset-logoleftmenucentrecta .public-nav { flex: 1 1 auto; }
    .site-header.preset-logoleftmenucentre .public-nav > ul,
    .site-header.preset-logoleftmenucentrecta .public-nav > ul { justify-content: center; }
    .site-header.preset-logocentred .public-nav { padding-left: 0; background: none; }
}
/* These three restate full width so a boxed preset's max-width cannot apply. They must restate
   the card inset with it, or setting --header-gap would move every preset but these. */
.site-header.width-wide,
.site-header.width-inherit,
.site-header.width-full { width: calc(100% - 2 * var(--header-gap)); border-radius: var(--header-radius); }
.site-footer.width-full .footer-inner { width: 100%; max-width: none; padding-inline: 24px; }
.site-footer.width-wide .footer-inner { width: min(calc(100% - 48px), 1560px); }

/* The footer grid is now driven by the document's column weights, set inline. */
.footer-inner { display: block; }
.footer-columns { display: grid; gap: 30px; }
.footer-column { min-width: 0; }
.footer-heading { margin: 0 0 12px; font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.footer-brand { display: block; font-size: 1.25rem; }
.footer-logo { height: 38px; width: auto; margin-bottom: 10px; }
.footer-tagline { color: #afbdc3; }
.site-footer .footer-columns nav > ul { columns: 1; }

.footer-contact { display: flex; flex-direction: column; gap: 8px; font-style: normal; }
.footer-contact a { color: inherit; }
.footer-contact a, .contact-address { display: inline-flex; align-items: flex-start; gap: 9px; }
.footer-contact svg.icon { width: 15px; height: 15px; margin-top: .3em; opacity: .75; }

.footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; }
.footer-social.style-icon a { width: 38px; height: 38px; justify-content: center; border: 1px solid #304047; border-radius: 50%; }

.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 34px; color: #a9b6bc; }
.site-footer.has-border .footer-legal { padding-top: 20px; border-top: 1px solid #304047; }
.footer-legal.align-centre { justify-content: center; text-align: center; }
.footer-legal.align-right { justify-content: flex-end; }
.legal-links ul { display: flex; flex-wrap: wrap; gap: 18px; }
.legal-links li { margin-bottom: 0; }

@media (max-width: 1200px) {
    /* Header actions move into the drawer, where the document asks for it. */
    .header-actions { display: none; }
    .drawer-actions { display: grid; gap: 10px; margin-top: 18px; }
    .site-header.preset-logocentred .header-inner { display: flex; }

    /* A transparent header must not stay fixed over an open drawer. */
    .site-header.is-transparent { position: sticky; background: var(--header-ink); }

    /* The document's bar height is a desktop hint; a phone bar needs no more than the default. */
    .header-inner { min-height: min(calc(var(--header-min-h, 72px) - 16px), 64px); }
}

@media (max-width: 640px) {
    .footer-columns { grid-template-columns: 1fr !important; }
    .footer-legal { margin-top: 26px; }
}

/* ---------------------------------------------------------------------------
   Page bands.

   A band sits INSIDE the page content, above and below the body - not in the
   site chrome, which is identical everywhere. Its colours and background vary
   per page, so each band writes them inline on its own element; only the
   structural rules live here.

   --band-pad is set inline from the design's PaddingY.
   --------------------------------------------------------------------------- */

.page-band { display: block; }
.page-band-inner { padding-block: var(--band-pad, 34px); }
.page-band h1, .page-band h2 { margin: 0; line-height: 1.15; }
.page-band--header h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.page-band--footer h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
.page-band .band-subtitle { margin: 10px 0 0; max-width: 70ch; opacity: .85; }

.band-breadcrumb { margin-bottom: 10px; font-size: .84rem; opacity: .8; }
.band-breadcrumb a { color: inherit; }
.band-breadcrumb span { margin-inline: 6px; }
.band-breadcrumb span[aria-current] { margin-inline: 0; }

.page-band.align-centre .page-band-inner { text-align: center; }
.page-band.align-centre .band-subtitle { margin-inline: auto; }
.page-band.align-right .page-band-inner { text-align: right; }
.page-band.align-right .band-subtitle { margin-inline-start: auto; }

.page-band.width-full .page-band-inner { width: 100%; max-width: none; padding-inline: 24px; }
.page-band.width-wide .page-band-inner { width: min(calc(100% - 48px), 1560px); }

/* The footer band pairs copy with one button, so it needs a row rather than a stack. */
.band-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.page-band--footer .band-copy { min-width: 0; }
.page-band--footer .header-action.action-primary { background: #fff; color: #12333f; }
.page-band--footer .header-action.action-outline { border-color: currentColor; color: inherit; }
.page-band--footer .header-action.action-text { color: inherit; }
.page-band--footer.align-centre .band-cta-inner { flex-direction: column; text-align: center; }
.page-band--footer.align-right .band-cta-inner { flex-direction: row-reverse; }

/* The Hero and blog headings step down to h2 when a band owns the page h1. Their existing
   rules were retargeted from the element to a .hero-title class above, so both levels look
   identical - the change is semantic, not visual. */

@media (max-width: 640px) {
    .band-cta-inner { flex-direction: column; align-items: stretch; text-align: center; }
    .band-cta-inner .header-action { text-align: center; }
}

/* ---------------------------------------------------------------------------
   Top bar.

   A slim utility strip inside <header>, above the announcement. Its colours
   come from the header document as --topbar-bg and --topbar-fg; separators and
   hover washes are mixed from currentColor, so a light strip an editor picks
   works as well as the default dark one.

   It is a row of the header, not a box on top of it. The header paints one
   field of light across every row and the strip lays the editor's colour over
   it as a wash, so the glows and the gold curve cross the seam unbroken.

   A sticky header pins at minus the strip's height, which scrolls the strip
   away and keeps the navigation. --topbar-h is measured by site.js; without it
   the offset is 0 and the whole header simply stays pinned.

   The strip is edge to edge with the logo/menu bar: the header itself is already
   full-bleed, so this row is just another 100% child of it.
   --------------------------------------------------------------------------- */

svg.icon { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -.125em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-header.is-sticky.has-topbar:not(.is-transparent),
.site-header.is-transparent.is-opaque.has-topbar { top: calc(-1 * var(--topbar-h, 0px)); }

.site-topbar { position: relative; overflow: hidden; width: 100%; background: color-mix(in srgb, var(--topbar-bg, #13223a) var(--topbar-wash, 55%), transparent); color: var(--topbar-fg, #dce4ef); font-size: .84rem; line-height: 1.35; }
/* The strip used to paint the editor's colour flat and then lay its OWN violet, teal and gold arc
   over it. That is what made the header read as two stacked boxes: the lights stopped at the
   strip's bottom edge and the curve was cut in half there.

   It now carries the editor's colour as a wash instead, so the header's single field of light
   shows through and the long gold curve runs from here down into the navigation row as one line.
   A wash and not the flat colour, because an opaque ground - any opaque ground - is the seam.

   How much of a wash is --topbar-wash, which _LayoutStyles.cshtml decides from the colour itself:
   55% for a dark strip, which is the merged look, and 100% for a light one, which cannot be
   washed over a dark header without going grey and taking the editor's dark text with it. The
   55% here is the fallback for a page rendered before that view emits the variable. */
.site-header > .site-announce:first-child { border-radius: 0; }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; min-height: 36px; padding-block: 3px; }

.topbar-reach, .topbar-social { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.topbar-reach { row-gap: 4px; min-width: 0; }
.topbar-reach li { display: flex; align-items: center; }
/* Separators are short centred rules rather than full-height borders - the same background trick
   the navigation's two hairlines use, so the whole header rules read as one family. Still mixed
   from currentColor, so a light strip an editor picks keeps them visible. */
.topbar-reach li + li { margin-left: 26px; padding-left: 26px; background: linear-gradient(color-mix(in srgb, currentColor 26%, transparent), color-mix(in srgb, currentColor 26%, transparent)) left center / 1px 60% no-repeat; }
/* Gold marks the ways to reach the business; the values beside them stay plain text. */
.site-topbar .topbar-reach svg.icon { color: var(--header-accent); }
.topbar-link, .topbar-note { display: inline-flex; align-items: center; gap: 7px; color: inherit; white-space: nowrap; }
.topbar-link { text-decoration: none; }
.topbar-link:hover .topbar-text { text-decoration: underline; text-underline-offset: 3px; }
.topbar-note { opacity: .9; }
.site-topbar svg.icon { width: 15px; height: 15px; }

.topbar-voice { display: flex; align-items: center; min-width: 0; margin: 0; white-space: nowrap; }
/* The strip opens on a gold rule rather than a picture. The megaphone the partial still emits is
   hidden here instead of dropped from the markup, because which mark opens the line is style: the
   line is a masthead, and at this size a drawn shape beside it only competes with the logo. */
.site-topbar .topbar-voice > svg.icon { display: none; }
.topbar-voice::before { content: ""; flex: 0 0 auto; width: 3px; height: 15px; margin-right: 18px; border-radius: 2px; background: linear-gradient(var(--header-accent), var(--header-accent-deep)); }
/* Slogan and message are set as one small-caps rule: the strip is a masthead line, not a sentence,
   and at this size the letter spacing is what carries it rather than the weight or the colour.
   Neither takes a literal colour: the strip's ground is the editor's, so the slogan stays on the
   strip's own text colour and the message is separated from it by weight and opacity instead. */
.topbar-slogan { color: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.topbar-slogan + .topbar-message { margin-left: 26px; padding-left: 26px; background: linear-gradient(color-mix(in srgb, currentColor 26%, transparent), color-mix(in srgb, currentColor 26%, transparent)) left center / 1px 60% no-repeat; }
.topbar-message { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }

.topbar-actions { display: flex; align-items: center; gap: 8px 14px; margin-left: auto; }

.topbar-links { padding-left: 20px; border-left: 1px solid color-mix(in srgb, currentColor 26%, transparent); }
.topbar-links ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.topbar-links li { display: flex; align-items: center; }
.topbar-links li + li { margin-left: 20px; padding-left: 20px; border-left: 1px solid color-mix(in srgb, currentColor 26%, transparent); }
.topbar-links a { padding-block: 4px; color: inherit; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.topbar-links a:hover { color: #fff; }
.topbar-links a[aria-current="page"] { color: var(--header-accent); }
.topbar-social { gap: 2px; }
.topbar-social a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); color: inherit; opacity: .8; transition: opacity .15s ease, background-color .15s ease; }
.topbar-social a:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.site-topbar .topbar-social svg.icon { width: 14px; height: 14px; }

.topbar-contact { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); border-radius: var(--radius-pill); color: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.topbar-contact:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.site-topbar .topbar-contact svg.icon { width: 13px; height: 13px; transition: transform .2s ease; }
.topbar-contact:hover svg.icon { transform: translateX(3px); }

/* WhatsApp keeps its own green whatever the strip colour: it is recognised by
   colour before it is read. The dark text on it passes AA. The glow stays inside
   the strip's padding - any wider and it shows under the pinned navigation once
   the strip has scrolled away. */
.topbar-whatsapp { display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px 3px 3px; border-radius: var(--radius-pill); background: #25d366; color: #06361a; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 4px rgba(37, 211, 102, .3); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.topbar-whatsapp:hover { background: #34e07a; box-shadow: 0 2px 5px rgba(37, 211, 102, .45); transform: translateY(-1px); }
.wa-badge { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #128c4a; }
.site-topbar .wa-badge svg.icon { width: 15px; height: 15px; }
/* A soft ring for movement. It claims nothing about who is online. */
.wa-badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: waRing 2.6s ease-out infinite; }
@keyframes waRing {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

/* ---------------------------------------------------------------------------
   Site footer: a contact card on the page, then a dark body with the columns,
   a signature under the menus, a values row and the legal bar.

   The <footer> paints nothing, so the contact card sits on the page's own
   ground; .footer-body carries the dark one. The editor's background and text
   colours are emitted for .footer-body by _LayoutStyles.cshtml, so tints on it
   are mixed from currentColor.

   Rules for the body's text are prefixed with .site-footer where they have to
   out-rank the old ".footer-inner > div p" and "> div strong" rules above.
   --------------------------------------------------------------------------- */

.site-footer { padding: 0; background: none; color: var(--ink); }
.footer-body {
    --footer-accent: var(--header-accent);
    --footer-rule: color-mix(in srgb, currentColor 14%, transparent);
    position: relative; isolation: isolate; overflow: hidden;
    padding-top: 58px;
    color: var(--header-fg);
    background:
        radial-gradient(560px 380px at 0% 78%, rgba(146, 74, 222, .28), transparent 70%),
        radial-gradient(620px 320px at 100% 0%, rgba(33, 128, 160, .12), transparent 70%),
        var(--footer);
}
/* Two thin gold arcs in the lower left - drawn, not loaded. */
.footer-body::before, .footer-body::after { content: ""; position: absolute; z-index: -1; border: 1.5px solid transparent; border-top-color: rgba(245, 183, 59, .5); border-right-color: rgba(245, 183, 59, .5); border-radius: 50%; transform: rotate(8deg); pointer-events: none; }
.footer-body::before { bottom: 150px; left: -210px; width: 380px; height: 380px; }
.footer-body::after { bottom: 190px; left: -170px; width: 290px; height: 290px; border-top-color: rgba(245, 183, 59, .28); border-right-color: rgba(245, 183, 59, .28); }
.footer-inner { display: flex; flex-direction: column; gap: 44px; padding-bottom: 56px; }
.site-footer .footer-reach-tiles li,
.site-footer .office-list li { margin-bottom: 0; }

/* ---- columns ---- */
.footer-columns { column-gap: 0; row-gap: 40px; }
.footer-column { padding-inline: clamp(16px, 2.2vw, 34px); }
/* Of-type, not child: the signature is an <aside> after the columns, so :last-child is never a column. */
.footer-column:first-of-type { padding-left: 0; border-right: 1px solid var(--footer-rule); }
.footer-column:last-of-type { padding-right: 0; }
.footer-column:last-of-type:not(:nth-of-type(2)) { border-left: 1px solid var(--footer-rule); }
.footer-column:not(:first-of-type):not(:last-of-type) + .footer-column:not(:last-of-type) { border-left: 1px solid var(--footer-rule); }
/* The signature takes the second row between the first and last columns, which run down beside it. */
.footer-columns.has-signature > .footer-column:first-of-type,
.footer-columns.has-signature > .footer-column:last-of-type { grid-row: span 2; }
.footer-column > .footer-block + .footer-block { margin-top: 30px; }

.site-footer .footer-heading { margin: 0 0 24px; color: #fff; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.footer-heading::after { content: ""; display: block; width: 34px; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--footer-accent); }
.site-footer .block-contact .footer-heading { font-size: 1.35rem; font-weight: 500; }

.site-footer .block-menu li { margin-bottom: 13px; }
.site-footer .block-menu a { color: var(--header-fg); font-size: .92rem; opacity: .88; transition: color .15s ease, opacity .15s ease; }
.site-footer .block-menu a:hover { color: #fff; opacity: 1; text-decoration: none; }
.site-footer .block-menu li.has-icon > a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; opacity: 1; }
.site-footer .block-menu li.has-icon > a svg.icon { width: 16px; height: 16px; transition: transform .2s ease; }
.site-footer .block-menu li.has-icon > a:hover svg.icon { transform: translateX(3px); }

/* ---- brand ---- */
.site-footer .footer-logo { display: block; width: auto; max-width: 260px; height: 56px; margin-bottom: 26px; object-fit: contain; object-position: left center; }
.site-footer .footer-brand { margin-bottom: 22px; color: #fff; font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.site-footer .footer-description { max-width: 36ch; margin: 0 0 26px; color: var(--header-fg); line-height: 1.6; opacity: .92; }
.site-footer .footer-tagline { display: grid; gap: 2px; margin: 0 0 30px; color: var(--header-fg-muted); font-size: .95rem; }
.footer-tagline::before { content: ""; width: 64px; height: 3px; margin-bottom: 22px; border-radius: 3px; background: linear-gradient(90deg, #a35bff, var(--footer-accent)); }
.site-footer .footer-tagline strong { color: #fff; font-size: 1rem; font-weight: 600; }
.site-footer .footer-social.style-icon a { width: 44px; height: 44px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); color: #fff; transition: border-color .15s ease, color .15s ease; }
.site-footer .footer-social a:hover { border-color: var(--footer-accent); color: var(--footer-accent); text-decoration: none; }
.footer-social svg.icon { width: 18px; height: 18px; }

/* ---- contact ---- */
.site-footer .footer-contact-intro { max-width: 32ch; margin: -4px 0 26px; color: var(--header-fg); opacity: .92; }
.site-footer .footer-contact { gap: 22px; }
.site-footer .contact-row { display: flex; align-items: center; gap: 18px; color: inherit; text-decoration: none; }
.site-footer .contact-address { align-items: flex-start; }
.site-footer a.contact-row:hover { text-decoration: none; }
.site-footer a.contact-row:hover .contact-value { color: var(--footer-accent); }
.contact-icon { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); border-radius: 50%; }
.site-footer .contact-icon svg.icon { width: 21px; height: 21px; margin-top: 0; opacity: 1; }
.contact-address .contact-icon { color: var(--footer-accent); }
.contact-text { display: grid; gap: 3px; min-width: 0; line-height: 1.45; }
.contact-value { color: #fff; overflow-wrap: anywhere; transition: color .15s ease; }
.contact-note { color: var(--header-fg-muted); font-size: .84rem; }
.site-footer .footer-cta { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 290px; min-height: 54px; margin-top: 30px; padding: 10px 26px; border-radius: var(--radius-pill); background: linear-gradient(135deg, #ffd47e 0%, var(--header-accent) 48%, var(--header-accent-deep) 100%); color: #1d1606; font-family: var(--font-serif); font-size: 1.12rem; font-weight: 500; text-decoration: none; box-shadow: 0 12px 26px -12px rgba(245, 183, 59, .65); transition: box-shadow .18s ease, filter .18s ease; }
.site-footer .footer-cta:hover { filter: brightness(1.06); text-decoration: none; }
.footer-cta svg.icon { width: 20px; height: 20px; transition: transform .2s ease; }
.footer-cta:hover svg.icon { transform: translateX(3px); }
.site-footer .footer-footnote { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--footer-rule); color: var(--header-fg-muted); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }

/* ---- signature ---- */
.footer-signature { grid-column: 2 / -2; display: flex; align-items: center; justify-content: center; padding: 18px clamp(16px, 2.2vw, 34px) 0; }
.site-footer .signature-script { display: grid; justify-items: start; margin: 0; padding-right: 48px; color: #fff; font-family: var(--font-hand); font-size: clamp(1.6rem, 2.3vw, 2.25rem); line-height: 1.15; transform: rotate(-9deg); }
.signature-script span:last-of-type { margin-left: .4em; }
.signature-script::after { content: ""; justify-self: center; width: 3.4em; height: 3px; margin-top: .1em; border-radius: 3px; background: var(--footer-accent); transform: rotate(-10deg); }
.signature-copy { padding: 6px 0 6px 48px; border-left: 1px solid var(--footer-rule); }
.site-footer .signature-heading { max-width: 16em; margin: 0 0 14px; color: #fff; font-size: 1rem; letter-spacing: .28em; line-height: 1.8; text-transform: uppercase; }
.site-footer .signature-text { max-width: 26ch; margin: 0; color: var(--header-fg-muted); }

/* ---- values row ---- */
.footer-values { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--footer-rule); background: color-mix(in srgb, currentColor 3%, transparent); }
.footer-values-inner { display: flex; align-items: center; gap: 28px; min-height: 138px; padding-block: 24px; }
.value-list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.site-footer .value-item { display: flex; align-items: center; gap: 16px; margin: 0; padding: 6px clamp(18px, 2.4vw, 40px); }
.site-footer .value-item:first-child { padding-left: 0; }
.value-item + .value-item { border-left: 1px solid var(--footer-rule); }
.value-item svg.icon { width: 38px; height: 38px; stroke-width: 1.4; }
.value-item span { max-width: 12ch; color: #fff; font-size: .95rem; line-height: 1.35; }
.value-quote { max-width: 15em; margin: 0 0 0 auto; padding-left: clamp(18px, 2.4vw, 40px); border-left: 1px solid var(--footer-rule); color: #fff; font-family: var(--font-serif); font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-style: italic; line-height: 1.3; }
.value-quote::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--footer-accent); }
.footer-values-image { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 48%; max-width: none; height: 100%; object-fit: cover; opacity: .85; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }

/* ---- legal bar ---- */
.footer-bottom { position: relative; }
.site-footer.has-border .footer-bottom::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, rgba(146, 74, 222, .25), rgba(173, 92, 255, .9) 30%, rgba(245, 183, 59, .6) 70%, rgba(146, 74, 222, .25)); }
.footer-bottom-inner { padding-block: 22px; }
.site-footer .footer-legal { margin: 0; color: var(--header-fg-muted); font-size: .84rem; }
.site-footer.has-border .footer-legal { padding-top: 0; border-top: 0; }
.footer-legal.align-left .legal-links { margin-left: auto; }
.site-footer .legal-links ul { gap: 0; }
.site-footer .legal-links li { margin: 0; }
.site-footer .legal-links li + li { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--footer-rule); }
.site-footer .legal-links a { color: var(--header-fg); }
.site-footer .legal-links a:hover { color: #fff; text-decoration: none; }

.site-footer.width-full :is(.footer-reach-shell, .footer-values-inner, .footer-bottom-inner) { width: 100%; max-width: none; padding-inline: 24px; }
.site-footer.width-wide :is(.footer-reach-shell, .footer-values-inner, .footer-bottom-inner) { width: min(calc(100% - 48px), 1560px); }

/* ---- contact card ----
   Copy | a bordered group of three tiles | a call to action. It paints its own
   gradient, so it fixes its own text colour whatever the page underneath is. */
.footer-reach-shell { padding-block: 40px 14px; }
.footer-reach { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 2.6fr) auto; align-items: center; gap: 24px 34px; padding: 30px 34px; overflow: hidden; border-radius: 18px; background: radial-gradient(420px 220px at 100% 0%, rgba(96, 64, 178, .22), transparent 70%), linear-gradient(120deg, #172a46 0%, #11213a 55%, #0e1b30 100%); color: var(--header-fg); box-shadow: 0 26px 50px -24px rgba(8, 15, 30, .55); }
/* A thin gold arc behind the call to action - drawn, not loaded. */
.footer-reach::after { content: ""; position: absolute; z-index: -1; top: -60px; right: -150px; width: 380px; height: 380px; border: 1.5px solid transparent; border-left-color: rgba(245, 183, 59, .6); border-radius: 50%; pointer-events: none; }
.footer-reach-copy { padding-right: 34px; border-right: 1px solid var(--header-rule); }
.reach-eyebrow { margin: 0 0 10px; color: var(--header-accent); font-size: .72rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
.footer-reach-copy h2 { margin: 0; color: #fff; font-family: var(--font-serif); font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 500; line-height: 1.2; }
.reach-subheading { max-width: 46ch; margin: 10px 0 0; color: var(--header-fg-muted); font-size: .9rem; }
.footer-reach-tiles { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 14px 6px; border: 1px solid var(--header-rule); border-radius: 14px; background: rgba(255, 255, 255, .02); list-style: none; }
.footer-reach-tiles li + li { border-left: 1px solid var(--header-rule); }
.site-footer .reach-tile { display: flex; align-items: center; gap: 12px; height: 100%; padding: 6px 14px; color: inherit; text-decoration: none; }
.site-footer .reach-tile:hover { text-decoration: none; }
.site-footer .reach-tile:hover strong { color: var(--header-accent); }
.reach-icon { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; transition: background-color .18s ease; }
.reach-tile:hover .reach-icon { background: rgba(255, 255, 255, .2); }
.reach-icon svg.icon { width: 21px; height: 21px; }
.reach-tile.is-whatsapp .reach-icon { background: #25d366; }
.reach-tile.is-whatsapp:hover .reach-icon { background: #34e07a; }
.reach-text { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.reach-text small { color: var(--header-fg-muted); font-size: .78rem; }
/* A long address breaks rather than pushing the tile past the card. */
.reach-text strong { color: #fff; font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; transition: color .15s ease; }
.reach-note { color: var(--header-fg-muted); font-size: .7rem; }
.site-footer .reach-cta { display: inline-flex; align-items: center; gap: 14px; max-width: 9.5em; color: #f7c66a; font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.2; text-decoration: none; }
.site-footer .reach-cta:hover { color: #ffd98f; text-decoration: none; }
.reach-cta svg.icon { flex: 0 0 auto; box-sizing: content-box; width: 20px; height: 20px; padding: 13px; border-radius: 50%; background: linear-gradient(135deg, #ffd47e, var(--header-accent) 55%, var(--header-accent-deep)); color: #1d1606; transition: transform .2s ease; }
.reach-cta:hover svg.icon { transform: translateX(3px); }

.footer-offices { display: grid; gap: 18px; }
.footer-offices .footer-heading { margin: 0; }
.office-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.office-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; overflow: hidden; border: 1px solid var(--footer-rule); border-radius: 14px; background: color-mix(in srgb, currentColor 3%, transparent); transition: border-color .18s ease, background-color .18s ease; }
.office-card:hover { border-color: color-mix(in srgb, var(--footer-accent) 55%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); }
/* The primary location wears the accent, so "which one is head office" reads before any word does. */
.office-card.is-primary::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--footer-accent), var(--yellow)); }
.office-head { display: flex; align-items: flex-start; gap: 12px; }
.office-pin { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--footer-accent) 18%, transparent); color: var(--footer-accent); }
.office-pin svg.icon { width: 18px; height: 18px; }
.office-name { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.office-badge { display: inline-block; margin-top: 5px; padding: 1px 9px; border-radius: var(--radius-pill); background: rgba(240, 200, 90, .16); color: var(--yellow); font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.office-address { display: grid; font-size: .92rem; font-style: normal; line-height: 1.55; opacity: .8; }
.office-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--footer-rule); font-size: .88rem; }
.office-links a { display: inline-flex; align-items: center; gap: 6px; color: inherit; overflow-wrap: anywhere; }
.office-links svg.icon { width: 14px; height: 14px; opacity: .8; }
.site-footer .office-directions { margin-left: auto; color: var(--footer-accent); font-weight: 600; }
.office-directions svg.icon { opacity: 1; transition: transform .18s ease; }
.office-directions:hover svg.icon { transform: translate(2px, -2px); }

@media (max-width: 1400px) {
    /* The bar tightens before it would wrap: the tagline goes first, then the spacing comes in. */
    .brand-tagline { display: none; }
    .site-header { --nav-pad-x: 10px; --header-gap-x: 16px; }
    .public-nav > ul > li > a { font-size: .9rem; }
    .site-header .header-action { padding-inline: 20px; }

    /* The contact card's copy, tiles and call to action stop fitting one row, so the copy takes its own. */
    .footer-reach { grid-template-columns: minmax(0, 1fr) auto; }
    .footer-reach-copy { grid-column: 1 / -1; padding-right: 0; border-right: 0; }
}

@media (min-width: 1201px) {
    /* A header kept to the content width never has room for the roomy bar, so it is always tight. */
    .site-header.width-inherit { --nav-pad-x: 10px; --header-gap-x: 16px; }
    .site-header.width-inherit .brand-tagline { display: none; }
    .site-header.width-inherit .public-nav > ul > li > a { font-size: .9rem; }
    .site-header.width-inherit .header-action { padding-inline: 20px; }
}

@media (max-width: 1100px) {
    /* The note goes first so the strip stays one line; .topbar-reach li would out-rank a bare class. */
    .topbar-reach .topbar-note { display: none; }
    .topbar-message, .site-topbar::after { display: none; }
}

@media (max-width: 1200px) {
    /* Five columns stop fitting: the brand and contact columns take whole rows and the menus share one. */
    .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 44px; }
    .footer-columns > .footer-column { padding-inline: 0; border: 0 !important; }
    .footer-column:has(> .block-brand, > .block-contact) { grid-column: 1 / -1; }
    .footer-columns.has-signature > .footer-column:first-of-type,
    .footer-columns.has-signature > .footer-column:last-of-type { grid-row: auto; }
    .footer-signature { grid-column: 1 / -1; justify-content: flex-start; padding-inline: 0; }
}

@media (max-width: 1200px) {
    /* The drawer takes the menu off the bar, which leaves room for the tagline again. */
    .brand-tagline { display: block; }
    /* Below the drawer breakpoint a transparent header is sticky too, so it scrolls the strip away as well. */
    .site-header.is-transparent.has-topbar { top: calc(-1 * var(--topbar-h, 0px)); }
}

@media (max-width: 900px) {
    .topbar-actions .topbar-social { display: none; }
    .footer-reach { grid-template-columns: minmax(0, 1fr); padding: 26px; }
    .footer-reach-tiles { grid-auto-flow: row; padding: 6px 4px; }
    .footer-reach-tiles li + li { border-left: 0; border-top: 1px solid var(--header-rule); }
    .site-footer .reach-tile { padding: 14px 16px; }
    .footer-values-inner { flex-wrap: wrap; }
    .value-quote { margin-left: 0; padding-left: 0; border-left: 0; }
    .footer-values-image { width: 100%; opacity: .3; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 640px) {
    /* Phones get round icon buttons and the chat pill. The number and the address remain the
       accessible names, and are still one tap away. */
    .topbar-voice { display: none; }
    .topbar-links { padding-left: 0; border-left: 0; }
    .topbar-links li + li { margin-left: 12px; padding-left: 12px; }
    .topbar-inner { gap: 6px 10px; }
    .topbar-reach li + li { margin-left: 6px; padding-left: 0; border-left: 0; }
    .topbar-link { justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); }
    .topbar-link .topbar-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .topbar-contact { padding: 4px 10px; }
    .site-topbar .topbar-contact svg.icon { display: none; }

    .footer-inner { gap: 34px; }
    .footer-legal { margin-top: 0; }
    .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* Menus pair up; blocks that carry sentences or an address need the full width. */
    .footer-column:has(> .block-brand, > .block-contact, > .block-richtext) { grid-column: 1 / -1; }
    .footer-reach { padding: 22px; border-radius: 14px; }
    .footer-reach::after { display: none; }
    .footer-reach-copy h2 { font-size: 1.45rem; }
    .footer-signature { flex-direction: column; align-items: flex-start; gap: 30px; }
    .site-footer .signature-script { padding-right: 0; }
    .signature-copy { padding-left: 0; border-left: 0; }
    .value-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    .site-footer .value-item, .value-item + .value-item { padding: 0; border-left: 0; }
    .footer-legal.align-left .legal-links { margin-left: 0; }
}

@media (max-width: 420px) {
    /* One round button beside Contact us and the chat pill keeps the strip to a single line.
       The first fact wins - the phone when there is one, since a call outranks an email here. */
    .topbar-reach li + li { display: none; }
    .brand-tagline { display: none; }
}

@media (max-width: 359px) {
    .topbar-contact { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-badge::after { animation: none; }
    .topbar-whatsapp:hover, .site-footer .reach-tile:hover { transform: none; }
}