/* Redesign stylesheet (PRD 004). Loaded only on template-pages/redesign-*.php.
   Design tokens, resets and component rules from the design file's <style>; hover states are in redesign-hover.css. */

/* DM Sans variable (all weights the design uses: 400-800) and Caveat, self-hosted. */
@font-face{font-family:"DM Sans";src:url("../fonts/dmsans-variable-latin-ext.woff2") format("woff2");font-weight:100 1000;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";src:url("../fonts/dmsans-variable-latin.woff2") format("woff2");font-weight:100 1000;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-600-latin.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
--cv-iw:clamp(170px,17vw,220px); --cv-pr:calc(var(--cv-iw) + 24px); --cv-img:block;
--maxw:1200px; --pad-x:clamp(18px,5vw,48px); --sect-y:clamp(76px,9vw,148px);
--h1:clamp(36px,5.2vw,56px); --h2:clamp(30px,4vw,44px); --h3:clamp(20px,1.9vw,24px);
--lead:clamp(17px,1.5vw,20px); --body:clamp(16px,1.3vw,18px);
--card:clamp(268px,80vw,356px); --card-sm:clamp(232px,68vw,284px);
--ink:#0E1B2A; --ink-2:#3A5771; --blue:#014C85; --blue-deep:#013D6A; --orange:#F6AF4E;
--mist:#F1F5F8; --line:#CBD7E1;
--nav-d:flex; --nav-m:none; --util-label:inline-flex; --note-d:block; --hero-cols:1.02fr .98fr; --cta-w:auto;
--hero-size:auto 118%; --hero-pos2:right 85%; --hero-txt:calc(50vw - max(var(--pad-x), (100vw - var(--maxw)) / 2 + var(--pad-x)) - 32px); --stats-cols:4; --fdr-mask:linear-gradient(to right,#000 88%,transparent 100%); --note-w:150px; --form-mt:0px; --serve-txt:calc(64% - 24px); --serve-img:block; --svc-ws:nowrap; --hero-dk:block; --hero-mb:none; --hero-h:max(598px,30.5vw + 38px); --stat-div:0; --serve-head:repeat(3,minmax(0,1fr)); --serve-span:span 1; --serve-end:auto; --split:1fr 1fr;--split-media:minmax(0,.75fr) minmax(0,1.25fr); --portal-cols:auto minmax(0,1fr) auto; --portal-al:flex-end; --portal-ar:flex-start; --serve-cols:repeat(3,minmax(0,1fr)); --press-cols:repeat(6,minmax(0,1fr)); --foot-cols:repeat(5,auto); --foot-b:repeat(4,auto); --foot-act:repeat(4,auto); --form-cols:1.25fr .75fr; --ord-media:0; --ord-side:0; --gap-lg:clamp(28px,4vw,64px); --tbl-px:14px; --tbl-f:clamp(15px,1.25vw,17px); --ai-tile:flex; --ai-cols:auto minmax(0,1fr) auto; --hero-veil:rgba(1,46,80,0); --hero-fade:78%; --hero-pos:right center; --tel-d:inline-flex; --nav-gap:clamp(16px,2vw,30px);
}
@media (max-width:1180px){ :root{ --tel-d:none; --nav-gap:14px; } }
@media (max-width:960px){ :root{ --fdr-mask:linear-gradient(to right,#000 88%,transparent 100%),linear-gradient(to bottom,#000 62%,transparent 100%); --note-w:0px; --form-mt:clamp(28px,5vw,48px); --hero-dk:none; --hero-mb:block; --hero-h:auto; --stat-div:0; --stats-cols:2; --serve-head:minmax(0,1fr); --serve-span:auto; --serve-end:start; --serve-p:auto; --hero-txt:100%; --hero-size:cover; --hero-pos2:var(--hero-pos); --nav-d:none; --nav-m:flex; --hero-cols:1fr; --split-media:1fr; --split:1fr; --portal-cols:minmax(0,1fr); --portal-al:flex-start; --portal-ar:flex-start; --serve-cols:repeat(2,minmax(0,1fr)); --press-cols:repeat(3,minmax(0,1fr)); --foot-cols:repeat(2,minmax(0,1fr)); --foot-b:repeat(2,minmax(0,1fr)); --foot-act:repeat(2,minmax(0,1fr)); --form-cols:minmax(0,1fr); --ord-media:-1; --ord-side:0; --note-d:none; --ai-tile:none; --ai-cols:minmax(0,1fr); --hero-veil:rgba(1,46,80,.74); --hero-fade:100%; --hero-pos:64% center; } }
@media (max-width:600px){ :root{ --serve-txt:100%; --serve-img:none; --serve-minh:0; --tbl-name:none; --tbl-code:inline; --svc-ws:normal; --cv-span:1 / -1; --serve-cols:minmax(0,1fr); --press-cols:repeat(2,minmax(0,1fr)); --foot-cols:minmax(0,1fr); --foot-b:minmax(0,1fr); --foot-act:minmax(0,1fr); --cta-w:100%; --util-label:none; --tbl-px:10px; --tbl-f:14px; } }
.osy-rd *,.rd-shell *{box-sizing:border-box}
html:has(body.osy-rd){-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.osy-rd a,.rd-shell a{color:#014C85;text-decoration:none}
.osy-rd a:hover,.rd-shell a:hover{color:#013D6A}
.osy-rd :is(button,select,input,textarea),.rd-shell :is(button,select,input,textarea){font-family:inherit}
/* Booking confirmed (template-parts/redesign/thank-you.php): the design's --cf-* stacking points; <summary> is the Add to calendar button. */
@media (max-width:860px){ :root{ --cf-cols:1fr; --cf-div:0; --cf-dtop:1px; --cf-steps:1fr; } }
@media (max-width:600px){ :root{ --cf-btn:100%; } }
/* Homepage hero subheading (template-parts/redesign/home.php): a little narrower on phones. */
@media (max-width:600px){ :root{ --hero-sub-w:310px; } }
[data-bk-cal] summary::-webkit-details-marker{display:none}
/* Dropdowns: one chevron, one inset. --select-inset is the gap from the right border to the chevron; padding-right
   always clears it, so option text never runs under the arrow. A compact select overrides --select-inset/--select-icon. */
:root{--select-chevron:url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E1B2A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E');--select-inset:16px;--select-icon:16px}
.osy-rd select:not([multiple]):not([size]),.rd-shell select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;background:#fff var(--select-chevron) no-repeat right var(--select-inset) center/var(--select-icon);padding-right:calc(var(--select-inset) + var(--select-icon) + 12px);cursor:pointer}
[data-track]{scrollbar-width:none;-ms-overflow-style:none}
[data-track]::-webkit-scrollbar{display:none}
a:hover .cat-arrow{transform:scale(1.42) translateX(2px)}
[data-dd]:hover > [data-ddm],[data-dd]:focus-within > [data-ddm],[data-dd][data-open] > [data-ddm]{display:block !important}
.osy-rd nav :is(a,button),.rd-shell nav :is(a,button){white-space:nowrap}
[data-ddm] a:hover img[src*="menu-v2"]{transform:scale(1.05)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.osy-rd details[open] > summary > svg,.rd-shell details[open] > summary > svg{transform:rotate(180deg)}
@media (max-width:960px){ :root{ --fdr-mask:linear-gradient(to right,#000 88%,transparent 100%),linear-gradient(to bottom,#000 62%,transparent 100%); --note-w:0px; --form-mt:clamp(28px,5vw,48px); --cv-iw:150px; } }
@media (max-width:600px){ :root{ --serve-txt:100%; --serve-img:none; --serve-minh:0; --tbl-name:none; --tbl-code:inline; --svc-ws:normal; --cv-span:1 / -1; --cv-img:none; --cv-pr:clamp(20px,2.2vw,26px); } }
@container (min-width:460px){ [data-cv]{--cvpos:absolute;--cvm:0;--cviw:215px;--cvp:240px} }
@container (min-width:540px){ [data-cv]{--cvpos:absolute;--cvm:0;--cviw:250px;--cvp:280px} }
[data-phones] > summary > svg:last-child{transform:rotate(90deg)}
[data-phones][open] > summary > svg:last-child{transform:rotate(-90deg)}
[data-phones] > summary::-webkit-details-marker{display:none}

/* The theme's own rules must not leak into the redesign: undo what Tailwind's preflight and the old theme set. */
body.osy-rd{margin:0;background:#fff;font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;color:#0E1B2A;overflow-x:hidden}
body.osy-rd img{max-width:100%}
body.osy-rd h1,body.osy-rd h2,body.osy-rd h3,body.osy-rd h4,body.osy-rd p{font-family:inherit}
body.osy-rd summary::-webkit-details-marker{display:none}
.osy-rd .skip-link:focus{position:fixed;left:12px;top:12px;z-index:100;background:#fff;color:#012E50;padding:10px 14px;border-radius:6px}
body.osy-rd footer,body.osy-rd footer *,footer.rd-shell,footer.rd-shell *{text-align:inherit}
body.osy-rd footer,footer.rd-shell{text-align:left}
.osy-rd-pricing nav a[href*="/pricing/"]{color:var(--orange) !important}

/* Popular Searches (PRD 004 Phase 2): the links come from osy_footer_links(), which carries the old theme's classes. */
.rd-shell [data-popular] summary::-webkit-details-marker{display:none}
.rd-shell [data-popular] > summary > svg{transition:transform .2s ease}
.rd-shell [data-popular][open] > summary > svg{transform:rotate(180deg)}
.rd-shell [data-popular] a{color:rgba(255,255,255,.8);font:400 14px/1.45 'DM Sans',sans-serif}
.rd-shell [data-popular] a:hover{color:var(--orange)}

/* The redesign header and footer on pages that still have old-theme content (PRD 004 Phase 2): the old banners
   and a few templates reserve room for the old fixed header; the new one is in the page flow. */
.osy-rd-shell .h-\[80px\].md\:h-\[145px\],.osy-rd-shell #header-space{display:none !important}

/* The old templates that hide the navigation (payment pages) do it with these ids and no !important, so the
   display lives here at zero extra specificity instead of inline. */
:where(.rd-shell) #desktop-nav-links{display:var(--nav-d)}
/* Mobile drawer accordions (template-parts/redesign/header.php): no default marker; the chevron turns when open. */
.osy-acc > summary::-webkit-details-marker{display:none}
/* Mobile header like firstpage.com.au: menu | logo (centred) | call. Same breakpoint as the pages' --nav-m switch. */
@media (max-width:960px){ .rd-shell .osy-mburger{grid-column:1;grid-row:1;justify-self:start} .rd-shell .osy-mlogo{grid-column:2;grid-row:1;justify-self:center} .rd-shell .osy-mcall{grid-column:3;grid-row:1;justify-self:end} }
.osy-acc[open] > summary [data-chev]{transform:rotate(90deg)}
.osy-acc[data-rd-ref="menuGeo"][open] > summary [data-chev]{transform:rotate(180deg)}
:where(.rd-shell) #desktop-footer-nav,:where(.rd-shell) #desktop-footer-office-details{display:grid}

/* Old-template content under the redesigned shell (PRD 004 Phase 3): the shared sections are markup
   (template-parts/redesign/sections); what is left of the old utility classes is restyled to the tokens here. */
.rd-faq details > summary::-webkit-details-marker{display:none}
.rd-faq details[open] > summary > svg{transform:rotate(180deg)}
.rd-faq .answer a{color:var(--blue);text-decoration:underline}
.osy-rd-shell #content ._h1,.osy-rd-shell #content ._h2,.osy-rd-shell #content ._h3{font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.08}
.osy-rd-shell #content ._h2{font-size:var(--h2)}
.osy-rd-shell #content ._h3{font-size:var(--h3)}
.osy-rd-shell #content ._h4,.osy-rd-shell #content ._h5,.osy-rd-shell #content ._h6{font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.01em}
.osy-rd-shell #content ._subheading{font-size:12px;font-weight:700;letter-spacing:.16em;line-height:1}
.osy-rd-shell #content ._btn-primary:not(._btn-ghost):not(._btn-dark){background:#F59B1C;color:#012E50;border-radius:6px;font-weight:800;letter-spacing:.02em}
.osy-rd-shell #content ._btn-primary:not(._btn-ghost):not(._btn-dark):hover{background:#F6AF4E}
.osy-rd-shell #content ._card{border-radius:18px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(1,46,80,.04),0 8px 22px rgba(1,46,80,.05)}

/* Homepage hero as one <picture> (an <img>, so it is the LCP element and can be prioritised): desktop crops the wide
   artwork at the design's 101.5% / centre 69%; at 960px and below the narrow artwork covers the box. */
.rd-hero-home{position:absolute;left:50%;top:69%;width:101.5%;height:auto;max-width:none;transform:translate(-50%,-69%)}
@media (max-width:960px){.rd-hero-home{left:0;top:0;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:64% center;transform:none}}

/* Pages drawn by js/rd-runtime.js start with an empty root; hold the space so the footer is not pushed down
   (and counted as layout shift) when the content is drawn. */
#rd-app:not(.rd-ready){min-height:150vh}
/* Lead modal (template-parts/redesign/lead-modal.php). */
body.osy-rd dialog[data-rd-ref="lead"]::backdrop{background:rgba(14,27,42,.62);backdrop-filter:blur(2px)}
body.osy-rd dialog[data-rd-ref="lead"] input::placeholder{color:#5B7690}
body.osy-rd dialog[data-rd-ref="lead"] input:focus{box-shadow:0 0 0 3px #F6AF4E}
body.osy-rd:has(dialog[data-rd-ref="lead"][open]){overflow:hidden}

/* Mobile review (PRD 004 Phase 11). Hit areas grow into the gap around each target (padding offset by an equal negative
   margin), so nothing moves on screen; gaps measured at 375 px: footer links 10 px, contact lines 5 px, social 9 px. */
footer.rd-shell a.rdh4eb23a89{padding-block:5px;margin-block:-5px}
footer.rd-shell a.rdh83222311{padding-block:2px;margin-block:-2px}
footer.rd-shell details a{padding-block:3px;margin-block:-3px}
footer.rd-shell a.rdh98cb3f06{position:relative}
footer.rd-shell a.rdh98cb3f06::after{content:"";position:absolute;inset:-4px}
details[style*="padding:22px 0"]>summary{padding-block:22px 14px;margin-block:-22px -14px}
[data-screen-label="Call our team"] a{padding-block:8px;margin-block:-8px}
/* A CTA label that wraps stays centred and balanced instead of ragged-left with the arrow pushed to the edge. */
.rdh98656abe,.rdh945b4839,.rdhf7052330{text-align:center;text-wrap:balance}
@media (max-width:600px){.rdh98656abe,.rdh945b4839,.rdhf7052330{padding-left:16px!important;padding-right:16px!important}}
/* Local hire vs Outsourcey (/outsourced-staffing/): on a phone the three columns share the screen instead of scrolling sideways. */
@media (max-width:600px){
.rd-cmp{grid-template-columns:repeat(3,minmax(0,1fr))!important;min-width:0!important;gap:6px!important}
.rd-cmp>div:not(:first-child){padding-left:8px!important;padding-right:8px!important}
.rd-cmp>div:first-child>div,.rd-cmp>div>div>div{font-size:13px!important;padding:0 2px!important;gap:6px!important}
.rd-cmp>div:not(:first-child)>div:first-child{font-size:15px!important}
.rd-cmp>div>div:first-child img{height:18px!important}
/* pin 30: the column colours already mark local vs Outsourcey, so the tick/cross icons go to give the words room. */
.rd-cmp{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr)!important;gap:4px!important}
.rd-cmp>div:not(:first-child){padding-left:10px!important;padding-right:6px!important;border-radius:16px!important}
.rd-cmp span[style*="flex:0 0 30px"]{display:none!important}
}
/* Instant quote (old pricing templates): the quote is a cross-origin widget that doesn't post its height, so on a phone the
   frame takes the full screen instead of a 650px box. ponytail: still scrolls inside for long role lists; size to content
   once widget.outsourcey.com posts its document height. */
@media (max-width:767px){#quote-widget{height:100svh!important}}
/* Role-page comparison and pricing cards: their labels are inline 10–11px in the page content (DB); 12px is the floor. */
[style*="font:800 10px/1 'DM Sans'"],[style*="font:800 11px/1.4 'DM Sans'"]{font-size:12px!important}
/* "View all" links: a 44px tap target without moving the text. */
.osy-tap{display:inline-block;padding-block:12px;margin-block:-12px}
/* Review pins, 2026-10-22. Hero h1 on a phone: keep the first sentence break, drop the designed desktop breaks, balance the lines. */
@media (max-width:600px){.rd-h1-flow{text-wrap:balance}.rd-h1 br:not(:first-of-type),.rd-h1-flow br{display:none}}
/* A <br class="rd-mb"> breaks on a phone only; a <br class="rd-dk"> everywhere but a phone. */
br.rd-mb{display:none}
@media (max-width:600px){br.rd-mb{display:inline}br.rd-dk{display:none}}
/* A <span class="rd-nw"> keeps a phrase on one line (inline nowrap styles are released under 900 px, 9.12 in
   redesign-polish.css); only the narrowest phones, under 360 px, may break it. */
.rd-nw{white-space:nowrap}
@media (max-width:359px){.rd-nw{white-space:normal}}
/* Client logo strips (the page templates' own and sections/logo-strip.php on old pages): the strip's bottom padding
   added to the next section's top padding, leaving 128-214 px under the logos and 52-84 px over them. Every strip now
   has the same space above it at every width; the next block (after the <style> some old blocks print) takes
   over the bottom half. */
:root{--logos-y:clamp(60px,6.4vw,96px)} /* review 2026-10-24: more room round the client logos, every page */
.rd-logos{padding-top:var(--logos-y)!important;padding-bottom:0!important}
/* the section under the strip gets more room than the strip's top (pins 64-66: equal gaps read as cramped) */
.rd-logos+:not(style),.rd-logos+style+*{padding-top:clamp(80px,10vw,148px)!important}
/* industry pages: the strip opens main.site__content, whose pt-8 (2rem) would add to the space above */
main.pt-8>.rd-logos:first-child{margin-top:-2rem}
/* Reviews marquee: on touch screens the auto-scroll was slow and couldn't be moved, so it becomes a swipeable row. */
@media (max-width:960px){
.rd-rv{animation:none!important;width:auto!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad-x);padding:0 var(--pad-x);scrollbar-width:none}
.rd-rv::-webkit-scrollbar{display:none}
.rd-rv>[aria-hidden]{display:none!important}
.rd-rv article{scroll-snap-align:start}
}
/* Consultation sections on one column: the founders photo, at the form card's width, sits on the card's top edge
   instead of floating above it (review pin 35, then the user's layout, 2026-10-22). */
@media (max-width:960px){
.rd-consult>div{row-gap:0!important}
.rd-consult>div>div:first-child{display:contents}
.rd-consult>div>div:first-child>div:last-child{order:1;margin-top:clamp(20px,5vw,36px)}
.rd-consult>div>div:first-child>div:last-child>div:first-child{width:100%!important;margin-left:0!important}
.rd-consult form{order:2;position:relative;margin-top:0!important}
}
/* Review pins 40–58, 2026-10-22. Managed Finance services on one column: an accordion (js/redesign.js moves each panel
   under its tab); the panel gets the grey card the side column had, and the open row's chevron turns down. */
@media (max-width:960px){
[data-mf-tab]{scroll-margin-top:100px}
[data-mf-tab]{flex:none!important}
[data-mf-tab]:focus:not(:focus-visible){outline:none}
[data-mf-tab] [data-mf-chev]{transition:transform .25s ease,stroke .35s ease!important}
[data-mf-tab][aria-expanded="true"] [data-mf-chev]{transform:rotate(90deg)}
/* the open panel: no second card, no repeated icon and title, price as a plain line, ticks without boxes; everything on
   the row's 16 px left edge */
[data-mf-tabs] [data-mf-panel]{height:auto!important;margin:0;padding:2px 16px 18px}
[data-mf-tabs] [data-mf-panel]>div:first-child{margin-bottom:8px!important}
[data-mf-tabs] [data-mf-panel]>div:first-child>span:first-child,[data-mf-tabs] [data-mf-panel] h3{display:none!important}
[data-mf-tabs] [data-mf-panel]>div:first-child>span:last-child{margin:0!important;height:auto!important;padding:0!important;background:none!important;font-size:15px!important}
[data-mf-tabs] [data-mf-panel]>p:first-of-type{font-size:16px!important;margin-bottom:16px!important}
[data-mf-tabs] [data-mf-panel] ul{gap:2px!important}
[data-mf-tabs] [data-mf-panel] li{padding:6px 0!important;border:0!important;background:none!important;font-size:15px!important}
[data-mf-tabs] [data-mf-panel] li>span:first-child{flex-basis:20px!important;width:20px!important;height:20px!important}
[data-mf-tabs] [data-mf-panel] li>span:first-child svg{width:12px;height:12px}
[data-mf-home]{padding:0!important;background:none!important}
[data-mf-home]>div:last-child{padding-top:18px!important}
}
/* Careers "You're in": on the one-column timeline the last step sits like the others, icon left of its card. */
@media (max-width:760px){.rd-tl-end{display:grid!important;grid-template-columns:56px minmax(0,1fr);align-items:start!important}}
/* Careers join photo: no tilt on phones. */
@media (max-width:960px){.rd-tilt{transform:none!important}}
/* How It Works services (review 2026-10-22): cards that read as buttons; js/redesign-how-it-works.js paints them.
   Desktop: three across, no chevron. ≤760 px: accordion rows, the steps open under the selected row (.rd-hw-tl order). */
.rd-svc[aria-pressed="false"]:hover{border-color:#8299AE!important;transform:translateY(-2px);box-shadow:0 2px 4px rgba(1,46,80,.06),0 12px 24px rgba(1,46,80,.1)!important}
.rd-svc:focus:not(:focus-visible){outline:none}
.rd-svc:focus-visible{outline:2px solid #014C85;outline-offset:3px}
.rd-svc-chev{display:none}
@media (min-width:761px) and (max-width:1100px){.rd-svc{flex-direction:column;align-items:flex-start!important}}
@media (max-width:760px){
.rd-hw{display:flex;flex-direction:column;gap:10px}
.rd-hw .rd-seg{display:contents!important}
.rd-svc{scroll-margin-top:100px;padding:14px 16px!important}
.rd-svc-chev{display:block}
.rd-svc[aria-pressed="true"] .rd-svc-chev{transform:rotate(90deg)}
.rd-hw-tl{padding:22px 0 30px}
}
/* Pricing "How it works" calculator on phones: smaller step numbers, titles only, no dividers in the ticks row. */
@media (max-width:960px){
.rd-cstep{flex-basis:36px!important;width:36px!important;height:36px!important;font-size:16px!important}
.rd-cstep+div{padding-top:7px!important}
.rd-cstep+div>p:first-child{margin:0!important}
.rd-cdesc,.rd-cdiv{display:none!important}
}
/* Role search boxes (js/redesign.js OsyCombo, review 2026-10-22): type to filter, the list under the box. */
.rd-combo{position:relative}
.rd-combo input::placeholder{color:#5B7690;opacity:1}
.rd-combo input{cursor:text}
.rd-combo.open .rd-combo-chev{transform:rotate(180deg)}
.rd-combo-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;max-height:min(320px,42vh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px;border-radius:10px;background:#fff;border:1px solid #E3EAF0;box-shadow:0 2px 6px rgba(1,46,80,.08),0 18px 40px rgba(1,30,52,.22);text-align:left}
.rd-combo.open .rd-combo-list{display:block}
.rd-combo-list [role="option"]{display:block;width:100%;padding:11px 14px;border:0;border-radius:6px;background:none;font:400 15px/1.3 'DM Sans',sans-serif;color:#0E1B2A;text-align:left;cursor:pointer}
.rd-combo-list [role="option"][hidden]{display:none}
.rd-combo-list [role="option"]:hover{background:#F1F6FA}
.rd-combo-list [role="option"][aria-selected="true"]{background:#014C85;color:#fff;font-weight:700}
.rd-combo-none{margin:0;padding:12px 14px;font:400 14px/1.4 'DM Sans',sans-serif;color:#5B7690}
.rd-combo-sm .rd-combo-list{min-width:260px}
/* iOS zooms into inputs under 16px */
@media (pointer:coarse){.rd-combo input{font-size:16px!important}}
.rd-combo input:focus{outline:none;box-shadow:0 0 0 3px rgba(1,76,133,.18)!important}
/* About Us menu cards (Hello Capital's style): blue border and lift on hover, the arrow nudges right. */
.rd-about-card{transition:border-color .15s ease,box-shadow .15s ease}
.rd-about-card:hover,.rd-about-card:focus-visible{border-color:#014C85 !important;box-shadow:0 6px 18px rgba(0,18,62,.08)}
.rd-about-card > svg{transition:transform .15s ease,stroke .15s ease}
.rd-about-card:hover > svg{transform:translateX(2px);stroke:#014C85}
/* Role pages (PRD 011, template-parts/redesign/role.php): the design's layout variables and read-more cards. */
.rd-role{--qs-split:1.05fr .95fr;--usp-split:minmax(0,.8fr) minmax(0,1.5fr);--usp-items:repeat(2,minmax(0,1fr));--tl-cols:minmax(0,1fr) 34px minmax(0,1fr);--tl-a0:'pill dot lab';--tl-a1:'lab dot pill';--tl-pj0:end;--tl-pj1:start;--tl-lj0:start;--tl-lj1:end;--tl-sx:50%;--tl-lab:none;--tl-kick:block}
@media (max-width:960px){.rd-role{--qs-split:1fr;--usp-split:minmax(0,1fr);--tl-cols:34px minmax(0,1fr);--tl-a0:'dot pill';--tl-a1:'dot pill';--tl-pj0:start;--tl-pj1:start;--tl-sx:17px}}
@media (max-width:600px){.rd-role{--usp-items:minmax(0,1fr)}}
.rd-role [data-rc] summary::-webkit-details-marker{display:none}
.rd-role [data-rc][open] [data-rc-p]{-webkit-line-clamp:unset!important;display:block!important;overflow:visible!important}
.rd-role [data-rc][open] [data-rc-more]{display:none}
.rd-role [data-rc][open] [data-rc-less]{display:inline!important}
.rd-role [data-rc][open] [data-rc-chev]{transform:rotate(180deg)}
.rd-role [data-rc-p] p+p{margin-top:.8em}
.rd-role summary:focus-visible{outline:2px solid #014C85;outline-offset:3px;border-radius:inherit}
.rd-role-hero .rank-math-breadcrumb p{margin:0 0 22px;font:500 13px/1.5 'DM Sans',sans-serif;color:rgba(255,255,255,.7)}
.rd-role-hero .rank-math-breadcrumb a{color:#fff;white-space:normal}
.rd-role-hero .rank-math-breadcrumb a:hover{color:var(--orange)}
.rd-role-hero .rank-math-breadcrumb .separator{margin:0 .35em;opacity:.6}
.rd-why-copy p{margin:0 0 16px}
.rd-why-copy p~p,.rd-why-copy ._read-more-content,.rd-why-copy :is(ul,ol){font-size:var(--body);line-height:1.65}
.rd-why-copy :is(ul,ol){margin:0 0 16px;padding-left:1.2em;list-style:disc}
.rd-why-copy ._read-more-content{margin-top:0}
.rd-why-copy ._read-more-parent label:before{content:"Read more \25BE";font:700 15px/1 'DM Sans',sans-serif;color:#014C85}
.rd-why-copy ._read-more-parent input:checked+label:before{content:"Read less \25B4"}
.rd-role h2 :is(span,strong,b){font-weight:inherit!important}
.rd-why-copy a,.rd-role [data-rc-p] a{color:var(--blue);text-decoration:underline}
.rd-usp h3,.rd-usp h3 *{font:700 clamp(17px,1.4vw,19px)/1.3 'DM Sans',sans-serif;color:#fff;margin:2px 0 6px}
.rd-usp p{font:400 15px/1.55 'DM Sans',sans-serif;color:rgba(255,255,255,.78);margin:0;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.rd-role [data-tl-pill],.rd-role [data-tl-dot],.rd-role [data-tl-fill]{transition:none!important}}
@media (max-width:960px){.rd-role-hero__photo{display:none}}