/*
Theme Name: Retinue Advisory
Theme URI: https://retinue-advisory.com
Author: Retinue Advisory
Description: Custom hand-coded classic theme for the Retinue Advisory website. Stage 1 delivers the shared foundations only — design tokens, self-hosted fonts, the site-wide header and footer, the core component kit (section bands, three-stroke device, boxed cards, open columns, the Expertise kit, the two hero styles, the twelve-column grid and the fourteen-icon SVG master set), responsive behaviour, a placeholder Home page and a branded 404. No page builder, no framework, no build tooling.
Version: 1.6.15
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.3
License: All rights reserved
Text Domain: retinue
*/

/* NOTE: "Requires PHP" restored to 8.3 (v1.6.11, 13 Sep 2026) now that the live
   host is on PHP 8.3. The theme's code is 8.3-clean (also ran fine on 7.4). */

/* =============================================================
   FONTS  ·  self-hosted woff2 (Source Serif 4 + Source Sans 3)
   Family aliases 'SS4' and 'SS3' match the settled wireframe CSS.
   Fallbacks: Georgia (serif), Arial (sans).
   ============================================================= */
@font-face{font-family:'SS4';src:url(assets/fonts/source-serif-4-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SS4';src:url(assets/fonts/source-serif-4-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'SS4';src:url(assets/fonts/source-serif-4-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'SS3';src:url(assets/fonts/source-sans-3-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SS3';src:url(assets/fonts/source-sans-3-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* =============================================================
   DESIGN TOKENS  ·  verbatim from the Website Content Document
   ============================================================= */
:root{
  --navy:#004B88;      /* primary, headings, footer */
  --blue:#0072B1;      /* secondary, links, kickers, second stroke */
  --bright:#00ADEF;    /* accent, third stroke, calls to action only */
  --ink:#1A1A1A;       /* body text */
  --body-soft:#33404D; /* softened body text */
  --tint:#EDF3FA;      /* pale blue section background */
  --grey:#6B7280;      /* muted/secondary text */
  --line:#E5E9EF;      /* hairline borders */
  --card-row-gap:46px; /* consistent vertical gap between rows in multi-row card sections */
  --hero-img-top:17px; /* interior hero image top padding so it starts at Home's image Y (uniform 104px header) */
}

/* =============================================================
   GLOBAL  ·  verbatim base
   ============================================================= */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'SS3',Arial,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3,.serif{font-family:'SS4',Georgia,serif}
img{max-width:100%}
a{color:var(--blue)}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}

/* accessibility helper */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:4px}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* =============================================================
   HEADER  ·  104px bar, uniform across every page (Home included)
   ============================================================= */
nav{background:#fff;border-bottom:1px solid var(--line)}
.nav-in{height:104px;line-height:104px;white-space:nowrap}
.nav-in.interior{height:104px;line-height:104px}   /* same height; kept for clarity */
.nav-brand{display:inline-block;vertical-align:middle;line-height:0}
/* Logo scales proportionally: fixed height, width auto, object-fit contain —
   never a fixed width+height pair (which would distort when height changes). */
.nav-logo{height:74px;width:auto;object-fit:contain;vertical-align:middle}
.nav-ccc{display:inline-block;vertical-align:middle;margin-left:22px;padding-left:22px;border-left:1px solid var(--line);font-size:13px;letter-spacing:2px;line-height:1.2}
.nav-ccc b{color:var(--blue);font-weight:700}
.nav-ccc s{text-decoration:none;color:#AFC2D6;margin:0 9px}   /* the pipe separators */
.nav-r{float:right}
.nav-r a{display:inline-block;color:var(--ink);text-decoration:none;font-size:16px;font-weight:500;margin-left:30px;vertical-align:middle}
.nav-r a:hover{color:var(--blue)}
.nav-r a.active{color:var(--blue)}
.nav-r a.contact{background:var(--navy);color:#fff;font-weight:600;padding:11px 22px;border-radius:4px;line-height:1.1}
.nav-r a.contact:hover{color:#fff;background:#013a6c}
/* mobile menu toggle — hidden on desktop, shown below 768px */
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:4px;padding:9px 11px;cursor:pointer;vertical-align:middle}
.nav-toggle .bar{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0}

/* =============================================================
   SECTION BANDS  ·  verbatim
   ============================================================= */
.band{padding:62px 0}          /* consistent interior-page section rhythm */
.band.main{padding:62px 0}     /* 404 */
.band.tint{background:var(--tint)}    /* pale blue strip */
.band.tint2{background:#f7fafd}       /* an even paler variant, used sparingly */

/* =============================================================
   TWELVE-COLUMN GRID  ·  foundation grid the % layouts map onto
   (the design system names a 12-col web grid; no verbatim CSS was
   supplied for it, so a standard implementation is provided here —
   flagged for confirmation in the Stage 1 review note)
   ============================================================= */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}

/* =============================================================
   THREE-STROKE DEVICE  ·  verbatim (large + mini)
   ============================================================= */
.stroke{margin:24px 0 26px;font-size:0}
.stroke span{display:inline-block;height:5px;border-radius:3px;margin-right:6px;vertical-align:middle}
.stroke .s1{width:48px;background:var(--navy)}
.stroke .s2{width:22px;background:var(--blue)}
.stroke .s3{width:12px;background:var(--bright)}
.mstroke{font-size:0;margin-bottom:10px}
.mstroke span{display:inline-block;height:4px;border-radius:2px;margin-right:4px;vertical-align:middle}
.mstroke .s1{width:22px;background:var(--navy)}
.mstroke .s2{width:11px;background:var(--blue)}
.mstroke .s3{width:6px;background:var(--bright)}

/* =============================================================
   HERO STYLES  ·  verbatim  (Home side-by-side + interior split)
   ============================================================= */
/* Home side-by-side hero.
   Flex row so the image top-aligns with the headline and its right edge locks
   to the container's right edge (== the right edge of the header Contact Us
   button, both being flush to the .wrap content box). */
.hero{padding:66px 0 76px}
/* Desktop side-by-side. NOTE: width:100% is REQUIRED — without it this flex
   container shrink-wraps to a sliver (~293px) at ~1024-1150px widths, collapsing
   both columns (the bug behind the "squeezed" hero on small landscape tablets). */
.hero .wrap{display:flex;justify-content:space-between;align-items:flex-start;width:100%}
.hcol{display:inline-block;vertical-align:top}
.hleft{width:52%;padding-right:3%}
.hright{width:45%;text-align:right}
.hero h1{font-size:58px;line-height:1.07;font-weight:600;color:var(--navy);letter-spacing:-.5px}
/* Headline set on three explicit lines via block spans (keeps the settled
   desktop break; reflows with real spaces on mobile — see breakpoints). */
.hero h1 span{display:block}
.hero .lead{font-size:20px;line-height:1.62;color:#33404d;max-width:530px;margin-top:2px}
.ai{margin:24px 0 0;color:var(--grey);font-size:16px}
.ai .dot{display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;border-radius:50%;border:1.5px solid var(--blue);color:var(--blue);vertical-align:middle;margin-right:10px}
/* margin-top drops the image onto the headline's visible cap line (cap-leading
   ~8px) plus a small optical settle, so it reads level with "Seasoned". */
.hero-img{width:100%;height:360px;object-fit:cover;object-position:center;border-radius:10px;box-shadow:0 22px 55px rgba(0,40,80,.18);display:block;margin-top:12px}
/* Home hero image placeholder panel (used until the WS9 photo is placed) */
.hph{display:inline-block;width:100%;height:360px;border-radius:10px;background:linear-gradient(135deg,#eef4fb 0%,#dce8f6 55%,#cfe0f2 100%);border:1px solid #d6e3f2;position:relative;box-shadow:0 22px 55px rgba(0,40,80,.12);text-align:center}
.hph .pi{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#7ea3c9}
.hph .cap{position:absolute;bottom:16px;left:0;right:0;font-size:12px;color:#6f92b5;font-style:italic;padding:0 24px;line-height:1.4}
/* Interior split hero. Columns are TOP-aligned and the image column carries a
   consistent top padding (--hero-img-top) so every interior hero image starts
   at the same vertical position as the Home hero image (site-wide standard). */
.hsplit{font-size:0}
.hcolL{display:inline-block;vertical-align:top;width:53%;font-size:18px}
.hcolR{display:inline-block;vertical-align:top;width:43%;margin-left:4%;font-size:18px;padding-top:var(--hero-img-top)}
.heroimg{width:100%;height:auto;border-radius:12px;border:1px solid #d6e3f2;display:block;box-shadow:0 18px 44px rgba(0,40,80,.14)}
/* interior hero intro (About/Clients/Retinue Way) */
.lead{font-size:20px;line-height:1.62;color:#33404d;margin-top:6px}

/* =============================================================
   WHY RETINUE BAND + BOXED CARDS  ·  verbatim (Home)
   ============================================================= */
.why{background:var(--tint);border-top:1px solid var(--line);padding:66px 0}
.why-head{text-align:center;margin-bottom:14px}
.why-head .kick{color:var(--blue);font-weight:600;font-size:14px;letter-spacing:1.5px;text-transform:uppercase}
.why-head h2{font-size:34px;color:var(--navy);font-weight:600;margin-top:8px}
.hook{max-width:760px;margin:0 auto 40px;text-align:center;font-size:20px;line-height:1.62;color:#33404d}
.cards{display:table;width:100%;border-collapse:separate;border-spacing:11px 0}
.card{display:table-cell;vertical-align:top;width:20%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 18px;text-align:left}
.card .ic{text-align:left;color:var(--navy);margin-bottom:14px;min-height:52px;display:flex;align-items:center;justify-content:flex-start}
.card .ic .ic-img{height:52px;width:auto;display:block}   /* custom illustrated icons — left-aligned with the card text (v1.6.5) */
.card .ic svg{vertical-align:middle;width:30px;height:30px}
.card h3{font-size:22px;color:var(--navy);font-weight:600;margin-bottom:8px;min-height:46px}
.card p{font-size:18px;line-height:1.65;color:#4a4f57}

/* =============================================================
   BOXED-CARD RECIPE (kit)  ·  verbatim — used on later pages
   ============================================================= */
/* Cards carry NO fixed min-height: in a row, flex align-items:stretch matches
   their heights (equal-height per row, no forced empty space); when stacked on
   tablet/mobile they size to their own content. Applies to all card sections. */
.mcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 22px}   /* Advisory moat */
/* Insights article card — same card-row standard: flex column so a trailing
   Read link pins to the bottom and aligns across the row (used in a later stage). */
.acard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 26px}
.acard a{margin-top:auto}

/* =============================================================
   OPEN-COLUMN RECIPES (kit)  ·  verbatim — used on later pages
   ============================================================= */
/* About values — four equal columns on one row, using the full width */
.vals{margin-top:30px;display:flex;gap:2.5%;align-items:flex-start}
.valcol{flex:1}
.valcol h3{font-size:22px;color:var(--navy);font-weight:600}
.valcol p{font-size:18px;line-height:1.65;color:#4a4f57}
/* About founders */
.fphoto{width:230px;height:276px;border-radius:10px;border:1px solid #d6e3f2;object-fit:cover}
.fcol{display:inline-block;vertical-align:top;width:49%}
.fcol:first-child{margin-right:2%}
/* Advisory expertise map + moats */
.moats{margin-top:34px;display:flex;flex-wrap:wrap;justify-content:space-between}
.moats .mcard{width:31.5%}
.ecol{display:flex;flex-direction:column;width:30%;margin:0 1.5% var(--card-row-gap)}
.ecol h3{font-family:'SS4';font-size:22px;color:var(--navy);font-weight:600}
.crule .s1{width:22px;background:var(--navy)}
.crule .s2{width:11px;background:var(--blue)}
.crule .s3{width:6px;background:var(--bright)}
/* Clients cards (open) */
.ccards{margin-top:36px;font-size:0}
.ccard{display:inline-block;vertical-align:top;width:46%;padding:0 2% 30px}
.ccard:nth-child(odd){margin-right:4%}
.ccard h3{font-size:22px;color:var(--navy);font-weight:600}

/* =============================================================
   EXPERTISE-PAGE KIT (kit)  ·  verbatim — used on later pages
   ============================================================= */
.jig{font-family:'SS4';font-size:22px;line-height:1.5;color:var(--navy);font-weight:400;margin-top:6px}
.lead2col{margin-top:20px;font-size:0}
.lcol{display:inline-block;vertical-align:top;width:48%}
.lcol:first-child{margin-right:4%}
.lcol p{font-size:18px;line-height:1.68;color:#33404d;margin-bottom:16px}
.areas{margin-top:12px;font-size:0}
.area{display:inline-block;vertical-align:top;width:46%;padding:30px 0 14px}
.area:nth-child(odd){margin-right:8%}
.area h3{font-size:22px;color:var(--navy);font-weight:600;margin-bottom:10px}
.area p{font-size:18px;line-height:1.7;color:#4a4f57}
.connect{font-size:18px;line-height:1.65;color:#4a4f57}
.connect b{color:var(--navy)}
.close{font-family:'SS4';font-size:18px;color:var(--navy)}
.close a{color:var(--blue);font-weight:600;text-decoration:none}

/* =============================================================
   RETINUE WAY PANELS (kit)  ·  verbatim — used on later pages
   ============================================================= */
.panel{border:1px solid #d6e3f2;border-radius:12px;background:#fbfdff;padding:14px 26px 30px;margin-top:6px}
.pname{font-family:'SS4';font-size:23px;color:var(--navy);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.part{display:inline-block;vertical-align:top;width:31%;margin:0 1%;text-align:center}
.pic{display:block;width:52px;height:52px;margin:0 auto}
.part h4{font-family:'SS4';font-size:18px;color:var(--blue);font-weight:600;text-transform:uppercase}
.conn{text-align:center}
.conn span{display:inline-block;width:30px;height:30px;line-height:28px;border-radius:50%;background:var(--navy);color:#fff}

/* =============================================================
   INSIGHTS  ·  blog listing + single-article template
   ============================================================= */
/* featured (sticky) lead block */
.feature{background:#fff;border:1px solid #d6e3f2;border-left:4px solid var(--navy);border-radius:10px;padding:34px 40px;box-shadow:0 12px 34px rgba(0,40,80,.06)}
.feature .flabel{color:var(--blue);font-weight:700;font-size:12.5px;letter-spacing:2px;text-transform:uppercase}
.feature h2{font-family:'SS4';font-size:34px;line-height:1.18;color:var(--navy);font-weight:600;margin:12px 0 12px;max-width:900px}
.feature h2 a{color:var(--navy);text-decoration:none}
.feature p{font-size:19px;line-height:1.6;color:#33404d;max-width:900px}
.feature .more{display:inline-block;margin-top:16px;color:var(--blue);font-weight:600;font-size:16px;text-decoration:none}
/* section label ("More perspectives") */
.sechead{font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:24px}
/* listing card grid: equal-height flex rows, Read link pinned to the bottom */
.acards{display:flex;flex-wrap:wrap;gap:2.6%}
.acard{display:flex;flex-direction:column;width:48.7%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin-bottom:2.6%}
.acard-thumb{width:100%;height:180px;object-fit:cover;border-radius:6px;margin-bottom:16px;display:block;background:linear-gradient(135deg,#eef4fb,#cfe0f2)}
.atag{color:var(--blue);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.acard h3{font-family:'SS4';font-size:22px;line-height:1.25;color:var(--navy);font-weight:600;margin-bottom:9px}
.acard h3 a{color:var(--navy);text-decoration:none}
.acard p{font-size:18px;line-height:1.65;color:#4a4f57}
.acard .read{display:inline-block;margin-top:auto;padding-top:12px;color:var(--blue);font-weight:600;font-size:16px;text-decoration:none}
/* single article */
.artwrap{max-width:820px;margin:0 auto;padding:0 40px}
.insback{display:inline-block;font-family:'SS4',Georgia,serif;font-weight:600;font-size:21px;color:var(--blue);text-decoration:none;line-height:1.2}
.insback-top{margin-bottom:26px}
.artmeta{color:var(--grey);font-size:15px;margin-top:8px}
.artfig{width:100%;height:auto;border-radius:12px;border:1px solid #d6e3f2;box-shadow:0 18px 44px rgba(0,40,80,.14);margin:26px 0 8px;display:block}
.artbody{font-size:19px;line-height:1.75;color:#2a2f36}
.artbody>p:first-child{font-size:21px;line-height:1.6;color:#33404d;margin-bottom:26px}   /* lead paragraph */
.artbody p{margin:0 0 22px}
.artbody h2{font-family:'SS4';font-size:27px;color:var(--navy);font-weight:600;margin:36px 0 12px}
.artbody h3{font-family:'SS4';font-size:22px;color:var(--navy);font-weight:600;margin:28px 0 10px}
.artbody ul,.artbody ol{margin:0 0 22px 22px}
.artbody li{margin:0 0 10px}
.artbody blockquote{margin:28px 0;padding:6px 0 6px 24px;border-left:3px solid var(--blue);font-family:'SS4';font-size:22px;line-height:1.5;color:var(--navy)}
.artbody img{max-width:100%;height:auto;border-radius:10px}
.artbody a{color:var(--blue)}
.artend{border-top:1px solid var(--line);margin-top:40px;padding-top:22px}
/* article share row (LinkedIn, X, WhatsApp, Copy Link) — no third-party scripts */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.share-label{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);font-weight:600;margin-right:2px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);cursor:pointer;position:relative;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.share-btn:hover{border-color:var(--blue);background:var(--tint)}
.share-btn svg{width:18px;height:18px;display:block}
.share-copy .copied{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:11px;letter-spacing:.3px;padding:3px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease}
.share-copy.is-copied .copied{opacity:1}
.share-bottom{border-top:1px solid var(--line);margin-top:34px;padding-top:20px}
/* related posts: exactly three across in one row */
.relrow{display:flex;gap:3%;align-items:stretch}
.relrow .acard{flex:1;width:auto;margin-bottom:0;padding:22px 24px}
/* pagination — dormant until there is more than one page of posts */
.ins-pagination{margin-top:38px}
.ins-pagination ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ins-pagination .page-numbers{display:inline-block;min-width:42px;text-align:center;padding:9px 12px;border:1px solid var(--line);border-radius:6px;color:var(--blue);text-decoration:none;font-size:15px}
.ins-pagination a.page-numbers:hover{border-color:var(--blue);background:var(--tint)}
.ins-pagination .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.ins-pagination .page-numbers.dots{border-color:transparent}
/* listing: featured (left) + "Browse by category" dropdown index (right) */
.ins-top{display:flex;gap:3.4%;align-items:flex-start}
.ins-main{flex:1 1 62%;min-width:0}
.ins-side{flex:0 0 32%}
.catbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 24px;box-shadow:0 12px 34px rgba(0,40,80,.06)}
.catbox .cathead{font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:16px}
.catgroup{border-top:1px solid var(--line)}
.catbox>.catgroup:first-of-type{border-top:0}
.catgroup summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 0;font-family:'SS4',Georgia,serif;font-size:15px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.catgroup summary::-webkit-details-marker{display:none}
.catgroup summary .cn{flex:1}
.catgroup summary .cnt{color:var(--grey);font-weight:600;font-size:11.5px;letter-spacing:1px}
.catgroup summary .chev{width:8px;height:8px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);transition:transform .15s ease;flex:none}
.catgroup[open] summary .chev{transform:rotate(45deg)}
.catlist{list-style:none;margin:0 0 12px;padding:0}
.catlist li{margin:0 0 7px}
.catlist a{color:var(--ink);text-decoration:none;font-size:15.5px;line-height:1.4}
.catlist a:hover{color:var(--blue)}
.catmore{display:block;text-align:right;margin:0 0 14px;color:var(--blue);font-weight:600;font-size:13px;text-decoration:none}
.catmore-wrap{border-top:1px solid var(--line)}
.catmore-wrap>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 0 2px;color:var(--grey);font-weight:600;font-size:14px;letter-spacing:1.5px;text-transform:uppercase}
.catmore-wrap>summary::-webkit-details-marker{display:none}
.catmore-wrap>summary .mlabel{font-size:0}
.catmore-wrap>summary .mlabel::before{content:'More categories';font-size:14px}
.catmore-wrap[open]>summary .mlabel::before{content:'Fewer categories'}
.catmore-wrap>summary .mcount{color:var(--grey);font-weight:600;font-size:12px}
.catmore-wrap[open]>summary .mcount{display:none}
.catmore-wrap>summary .chevm{width:7px;height:7px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);transform:rotate(-45deg);transition:transform .15s ease;margin-left:auto;flex:none}
.catmore-wrap[open]>summary .chevm{transform:rotate(45deg)}
/* category page: intro line + "More" reveal of posts (6 at a time) */
.archintro{font-size:20px;line-height:1.62;color:#33404d;max-width:760px;margin-top:6px}
.acard.is-hidden{display:none}
.loadmore-wrap{text-align:center;margin-top:34px}
.loadmore{display:inline-block;background:#fff;border:1px solid var(--line);color:var(--navy);font-family:'SS3',Arial,sans-serif;font-weight:600;font-size:15px;padding:12px 28px;border-radius:6px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.loadmore:hover{border-color:var(--blue);background:var(--tint)}

/* =============================================================
   PRIVACY & CONFIDENTIALITY  ·  matches the reworked wireframe
   ============================================================= */
.pvwrap{max-width:900px;margin:0 auto;padding:0 40px}
.pv-lead{font-family:'SS4',Georgia,serif;font-size:24px;line-height:1.35;color:var(--navy);font-weight:600;margin:0 0 14px}
.pv-introp{font-size:18px;line-height:1.7;color:#2a2f36;margin:0 0 16px}
/* tinted assurance strip with a shield-tick icon */
.pv-assure{display:flex;align-items:flex-start;gap:16px;background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:22px 26px;margin:0 auto;max-width:900px}
.pv-assure svg{flex:none;margin-top:2px}
.pv-assure p{font-size:18px;line-height:1.6;color:#33404d;margin:0}
/* each section: an icon inline in the heading, a blue italic concept line, 18px body */
.pv-sec h2{font-family:'SS4',Georgia,serif;font-size:30px;color:var(--navy);font-weight:600;margin:0 0 4px;display:flex;align-items:center;gap:12px}
.pv-sec h2 svg{flex:none}
.pv-sec p{font-size:18px;line-height:1.72;color:#2a2f36;margin:0 0 18px}
/* concept line — higher specificity than .pv-sec p so the Retinue-blue wins */
.pv-sec p.pv-concept{font-family:'SS4',Georgia,serif;font-size:21px;line-height:1.4;color:var(--blue);font-style:italic;font-weight:600;margin:0 0 14px}
.pv-sec p:last-child{margin-bottom:0}
/* "In Essence" navy call-out block */
.pv-essence{background:var(--navy);color:#eaf2fb;border-radius:12px;padding:34px 40px;max-width:900px;margin:0 auto;text-align:center}
.pv-essence h2{font-family:'SS4',Georgia,serif;font-size:28px;color:#fff;font-weight:600;margin:0 0 14px}
.pv-essence p{font-size:19px;line-height:1.7;margin:0 0 6px;color:#dbe8f6}
.pv-essence .rw{font-family:'SS4',Georgia,serif;font-size:21px;color:#fff;margin-top:12px}
/* closing contact line */
.pv-contact{font-size:18px;line-height:1.65;color:#33404d;text-align:center;margin:0 auto;max-width:820px}
.pv-contact a{color:var(--blue);font-weight:600;text-decoration:none}

/* =============================================================
   ADVISORY PAGE  ·  Stage 2 — type-and-container standard
   (matches the reworked Advisory reference wireframe)
   ============================================================= */
/* general kicker / eyebrow label */
.kick{color:var(--blue);font-weight:600;font-size:14px;letter-spacing:1.5px;text-transform:uppercase}
.kick.c{text-align:center}
/* interior-page hero headline */
h1.page{font-size:46px;line-height:1.12;font-weight:600;color:var(--navy);letter-spacing:-.4px}
/* hero intro: first part beside the image, remainder full-width below it */
.overview{font-size:20px;line-height:1.62;color:#33404d;margin-top:4px}
.overview-full{font-size:20px;line-height:1.62;color:#33404d;margin-top:28px}
/* Advisory split hero: text 56% left, image 40% right (image start uses the
   shared --hero-img-top so it lines up with Home and the other interior heroes) */
.adv-split .hcolL{width:56%}
.adv-split .hcolR{width:40%;margin-left:4%}
.adv-split .hcolL,.adv-split .hcolR{vertical-align:top}
.adv-split .stroke{margin:18px 0 22px}
/* section heading (left by default) + centred variant + section intro */
h2.sec{font-size:34px;color:var(--navy);font-weight:600;margin-top:8px}
h2.sec.center{text-align:center}
.subsec{font-size:20px;line-height:1.62;color:#33404d;max-width:720px;margin:12px auto 0;text-align:center}
/* expertise map: six open columns (a card row) then two cross-cutting strips.
   CARD-ROW STANDARD (site-wide): the row is a flex-wrap of equal-height items
   and each trailing "Explore/Read" link is pinned to the bottom (margin-top:auto)
   so the links line up on one baseline across the row. */
.emap{margin-top:40px;display:flex;flex-wrap:wrap;align-items:stretch}
.ecol p{font-size:18px;line-height:1.65;color:#4a4f57;margin-bottom:10px}
.ecol a{color:var(--blue);font-weight:600;font-size:18px;text-decoration:none;margin-top:auto}
.estrip{flex:0 0 100%;border-top:1px solid #cddcec;margin-top:4px;padding-top:30px;display:table;width:100%}
.estrip>div{display:table-cell;vertical-align:top;padding-right:26px}
.sname{width:250px;font-family:'SS4';font-size:22px;color:var(--navy);font-weight:600}
.sbrief{font-size:18px;line-height:1.65;color:#4a4f57}
.sgo{width:130px;text-align:right;white-space:nowrap;padding-right:0}
.sgo a{color:var(--blue);font-weight:600;font-size:18px;text-decoration:none}
/* the difference: six moat cards, equal height, three per row */
.moats .mcard{display:flex;flex-direction:column;margin:0 0 var(--card-row-gap)}
.mcard h3{font-size:22px;color:var(--navy);font-weight:600;margin-bottom:8px}
.mcard p{font-size:18px;line-height:1.65;color:#4a4f57}
/* closing line to the Retinue Way */
.closing{text-align:center}
.closing .ct{font-family:'SS4';font-size:23px;color:var(--navy);font-weight:400}
.closing a{color:var(--blue);font-weight:600;text-decoration:none}

/* =============================================================
   ABOUT PAGE  ·  Stage 3 (matches the reworked About reference)
   ============================================================= */
.posn{font-family:'SS4';font-size:25px;line-height:1.45;color:var(--navy);text-align:center;max-width:930px;margin:0 auto;font-weight:400}
.sub{font-size:20px;line-height:1.6;color:#33404d;max-width:1120px;margin-top:12px}   /* widened founders intro */
/* founders: two clean open columns (no box), Read-full-profile link pinned so
   both links align to the same baseline across the pair */
.frow{margin-top:32px;display:flex;gap:2.5%;align-items:stretch}
.fcol{flex:1;display:flex;flex-direction:column}
.fphoto{width:230px;height:276px;border-radius:10px;border:1px solid #d6e3f2;object-fit:cover;object-position:center 12%;display:block}
.fname{font-family:'SS4';font-size:22px;color:var(--navy);font-weight:600;margin-top:18px}
.frole{color:var(--blue);font-size:14px;font-weight:600;letter-spacing:.3px;margin-top:2px;text-transform:uppercase}
.fbio{font-size:18px;line-height:1.65;color:#4a4f57;margin-top:10px}
.flink{display:inline-block;margin-top:auto;padding-top:16px;color:var(--blue);font-weight:600;font-size:18px;text-decoration:none}
/* mission & vision: two equal-height boxes on tint; titles match the Values titles */
.mvrow{display:flex;gap:2.5%;align-items:stretch}
.mvcol{flex:1;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 28px}
.mvlabel{font-family:'SS4',Georgia,serif;color:var(--navy);font-weight:600;font-size:22px}
/* statement text matches the Value descriptions: sans body, near-black, 18px */
.mvtext{font-family:'SS3',Arial,sans-serif;font-size:18px;line-height:1.65;color:#4a4f57;margin-top:12px;font-weight:400}
/* what the name means */
.name-t{font-family:'SS4';font-size:22px;line-height:1.5;color:var(--navy);text-align:center;max-width:880px;margin:0 auto;font-weight:400}
/* business advisory, with care: full-width heading + two balanced columns */
.careblock{max-width:1240px}
.careh{font-family:'SS4';font-size:24px;color:var(--navy);font-weight:600;margin:8px 0 12px}
.care2{display:flex;gap:5%;align-items:flex-start;margin-top:4px}
.care2 .carep{flex:1;margin:0}
.carep{font-size:18px;line-height:1.72;color:#4a4f57}

/* =============================================================
   CLIENTS PAGE  ·  Stage 3
   ============================================================= */
.ccard p{font-size:18px;line-height:1.65;color:#4a4f57}
.passage{font-size:18px;line-height:1.7;color:#33404d;max-width:900px;margin:14px auto 0;text-align:center}
.scale{font-size:15.5px;line-height:1.6;color:var(--grey);max-width:820px;margin:24px auto 0;text-align:center;font-style:italic}
.eng{margin-top:34px;font-size:0}
.engcol{display:inline-block;vertical-align:top;width:49%;font-size:15px}
.engcol:first-child{margin-right:2%}
.engcol h3{font-family:'SS4';font-size:22px;color:var(--navy);font-weight:600;margin-bottom:14px}
.engcol ul{list-style:none}
.engcol li{position:relative;padding-left:20px;margin-bottom:13px;font-size:18px;line-height:1.55;color:#4a4f57}
.engcol li:before{content:'';position:absolute;left:0;top:12px;width:9px;height:2px;background:var(--blue)}

/* =============================================================
   RETINUE WAY PAGE  ·  Stage 3 (panels use the shared kit)
   ============================================================= */
.steer{font-family:'SS4';font-size:22px;line-height:1.55;color:var(--navy);max-width:900px;margin:14px auto 0;text-align:center;font-weight:400}
.panels{margin-top:12px}
.ptitle{text-align:center;padding:16px 0 20px}
.psub{display:block;color:var(--grey);font-size:14px;font-family:'SS4';font-style:italic;margin-top:2px}
.parts{font-size:0;text-align:center}
.picwrap{min-height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.picwrap .ic-img{height:60px;width:auto;display:block}   /* custom illustrated icons — centred (v1.6.5) */
.part p{font-size:18px;line-height:1.55;color:#4a4f57}
.aicopy{font-size:18px;line-height:1.7;color:#33404d;max-width:900px;margin:14px auto 0;text-align:center}
.practice{font-size:18px;line-height:1.7;color:#4a4f57;max-width:840px;margin:12px auto 0;text-align:center}

/* =============================================================
   CONTACT PAGE  ·  Stage 3 (no form; details + Follow Retinue tiles)
   ============================================================= */
.cwrap{display:flex;gap:6%;margin-top:26px;flex-wrap:wrap;align-items:flex-start}
.cmain{flex:1 1 58%}
.cside{flex:0 0 30%}
.crow{display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:none;padding-top:0}   /* top-align with the Follow Retinue column */
.cic{flex:0 0 auto;width:46px;height:46px}
.cic svg{width:46px;height:46px}
.clab{color:var(--blue);font-weight:600;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.cval{font-family:'SS4';font-size:22px;color:var(--navy);font-weight:600;text-decoration:none}
.cval2{font-family:'SS4';font-size:22px;color:var(--navy);font-weight:600}
.cnote{font-size:18px;line-height:1.55;color:#4a4f57;margin-top:6px;max-width:420px}
.csign{font-size:18px;line-height:1.65;color:#4a4f57;margin-top:8px}

/* =============================================================
   ELEVARE HOLDING PAGE  ·  Stage 3 fix — calm, centred, premium
   ============================================================= */
.band.tall{padding:104px 0}
.holding{max-width:760px;margin:0 auto;text-align:center}
.holding .subtitle{font-size:20px;line-height:1.4;color:var(--navy);font-weight:600;margin-top:8px}
.holding .stroke{display:inline-block;margin:18px 0 24px}
.holding .lead{margin-top:18px}
.holding .lead:first-of-type{margin-top:0}
/* links match the Privacy / founder closing style: bold blue, no underline */
.holding .lead a{color:var(--blue);font-weight:600;text-decoration:none}

/* =============================================================
   EXPERTISE SUB-PAGE  ·  Stage 3 (Strategy pattern; reused by all seven)
   ============================================================= */
.narrow{max-width:900px;margin:0 auto}
.crumb{color:var(--blue);font-weight:600;font-size:14px;letter-spacing:1px}
.crumb a{color:var(--blue);text-decoration:none}
.crumb .sep{color:#AFC2D6;margin:0 8px}
/* blue sub-label device (e.g. Governance "On decisions." / "On control.") */
.sublab{color:var(--blue);font-weight:600}

/* =============================================================
   FOUNDER PROFILE PAGES  ·  Prompt 05 (reworked reference format)
   ============================================================= */
.phero{padding:54px 0 20px}
/* hero row: text left, photo right; the photo's right edge meets the container
   edge (under the Contact Us button), exactly as on Home and Advisory */
.phrow{display:flex;align-items:flex-start;gap:6%}
/* an opening paragraph that runs full-width below the hero row (Advisory-style) */
.popen-full{font-size:20px;line-height:1.7;color:#33404d;margin-top:18px}
.phcolL{flex:1;min-width:0;padding-top:6px}
/* photo top-aligns with the NAME heading's cap line (past the role kicker above
   it), consistent with the hero image on Home and Advisory */
.phcolR{flex:none;padding-top:39px}
/* photo held to the same size as the About founder photos (do not enlarge) */
.pphoto{width:230px;height:276px;object-fit:cover;object-position:center 12%;border-radius:12px;border:1px solid #d6e3f2;box-shadow:0 18px 44px rgba(0,40,80,.14);display:block;margin-left:auto}
.pkick{color:var(--blue);font-weight:600;font-size:14px;letter-spacing:2px;text-transform:uppercase}
/* scoped to the profile hero so it does not inherit the Retinue Way panels'
   uppercase .pname; the name stays Title Case, matching About and the reference */
.phero .pname{font-family:'SS4';font-size:46px;color:var(--navy);font-weight:600;letter-spacing:-.5px;text-transform:none;margin:6px 0 4px}
.popen{font-size:20px;line-height:1.7;color:#33404d;margin-top:16px;max-width:660px}
/* At a glance strip */
.glance{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.glance-in{max-width:1240px;margin:0 auto;padding:34px 40px;display:flex;gap:4%;flex-wrap:wrap}
.gcol{flex:1;min-width:200px}
.glabel{color:var(--blue);font-weight:700;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:10px}
.gitems{font-size:16px;line-height:1.7;color:#33404d}
/* career chapters */
.psec{padding:30px 0}
.psec h3{font-family:'SS4';font-size:26px;color:var(--navy);font-weight:600;margin:8px 0 12px}
.psec p{font-size:18px;line-height:1.7;color:#4a4f57;max-width:900px;margin-bottom:14px}
/* career & credentials two columns */
.cc{display:flex;flex-wrap:wrap;gap:0 6%}
.cccol{width:47%}
.cc h4{font-family:'SS4';font-size:15.5px;color:var(--navy);font-weight:700;letter-spacing:.3px;margin:16px 0 6px;text-transform:uppercase}
.cc p{font-size:16px;line-height:1.6;color:#4a4f57;margin:0 0 4px}
.pclose{font-family:'SS4';font-size:20px;color:var(--navy)}
.pclose a{color:var(--blue);font-weight:600;text-decoration:none}
@media (max-width:1023px){ .gcol{min-width:44%} }
@media (max-width:767px){
  .phrow{flex-direction:column;gap:0}
  .phcolR{width:100%;margin-top:20px;padding-top:0}
  .pphoto{margin:0 auto}
  .gcol{min-width:100%;margin-bottom:14px}
  .cccol{width:100%}
  .phero .pname{font-size:34px}
}

/* =============================================================
   CONTACT SOCIAL TILES (kit)  ·  verbatim — bordered tiles
   ============================================================= */
.socials{margin-top:12px;display:flex;gap:14px}
.socials a{display:inline-flex;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;align-items:center;justify-content:center;color:var(--navy)}
.socials a:hover{border-color:var(--blue);background:var(--tint)}
.socials svg{width:20px;height:20px}

/* =============================================================
   FOOTER  ·  verbatim, with the four "Follow Retinue" social tiles
   sitting on the copyright row (per the Footer-With-Socials demo)
   ============================================================= */
footer{background:var(--navy);color:#dbe6f2}
.foot-in{padding:26px 0 14px;white-space:nowrap}
.foot-brand{display:inline-block;vertical-align:middle;line-height:0}
.foot-logo{height:44px;width:auto;object-fit:contain;vertical-align:middle}
.foot-tag{display:inline-block;font-family:'SS4';font-size:13.5px;color:#cfe0f2;border-left:1px solid #2b6098;padding-left:20px;margin-left:20px;vertical-align:middle;line-height:1.45;white-space:normal;width:210px}
.foot-r{float:right;line-height:44px}
.foot-r a{color:#cfe0f2;text-decoration:none;font-size:15px;margin-left:22px;vertical-align:middle}
/* Privacy button + social tiles: white background, navy content — mirroring
   the header's navy/white Contact button and the white footer logo, for
   consistent contrast on the navy band. Navy (#004B88) on white ≈ 8.6:1 (WCAG
   AA/AAA). Hover: light tint + subtle shadow so the white tiles read clickable. */
.foot-priv{background:#fff;border:1px solid #fff;border-radius:5px;padding:8px 13px;font-size:13px;transition:background .15s ease,box-shadow .15s ease}
.foot-r a.foot-priv{color:var(--navy)}
.foot-priv:hover{background:var(--tint);box-shadow:0 3px 10px rgba(0,0,0,.28)}
.foot-copy{color:#8fb4d6;font-size:12.5px;text-align:center;padding:10px 0 16px}
.fcwrap{position:relative;text-align:center}
.fsoc{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:11px}
.fsoc a{display:inline-flex;width:26px;height:26px;background:#fff;border:1px solid #fff;border-radius:6px;align-items:center;justify-content:center;color:var(--navy);transition:background .15s ease,box-shadow .15s ease}
.fsoc a:hover{background:var(--tint);box-shadow:0 3px 10px rgba(0,0,0,.28)}
.fsoc svg{width:14px;height:14px}

/* =============================================================
   404
   ============================================================= */
.e404{text-align:center;padding:96px 0}
.e404 h1{font-size:64px;color:var(--navy);font-weight:600;line-height:1}
.e404 h2{font-size:26px;color:var(--navy);font-weight:600;margin-top:12px}
.e404 p{max-width:560px;margin:16px auto 0;font-size:17px;line-height:1.6;color:#33404d}
.e404 .btn{display:inline-block;margin-top:26px;background:var(--navy);color:#fff;font-weight:600;text-decoration:none;padding:12px 24px;border-radius:4px}
.e404 .btn:hover{background:#013a6c}

/* =============================================================
   SEARCH  ·  header magnifier + drop-down bar + results page
   ============================================================= */
.nav-search-toggle{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--navy);cursor:pointer;padding:6px;margin-left:26px;vertical-align:middle}
.nav-search-toggle .mag{width:22px;height:22px;display:block}
.nav-search-toggle:hover{color:var(--blue)}
.nav-search{display:none;border-top:1px solid var(--line);background:#fff}
.nav.search-open .nav-search{display:block}
.nav-search form{display:flex;gap:12px;padding:16px 0}
.nav-search input[type=search]{flex:1;border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:'SS3',Arial,sans-serif;font-size:16px;color:var(--ink)}
.nav-search input[type=search]:focus{outline:none;border-color:var(--blue)}
.nav-search .sbtn{background:var(--navy);color:#fff;border:0;border-radius:6px;font-weight:600;font-size:15px;padding:0 24px;cursor:pointer}
.nav-search .sbtn:hover{background:#013a6c}
.nav-search-m{display:none}
.searchwrap{max-width:900px;margin:0 auto;padding:0 40px}
.searchbox{display:flex;gap:12px;margin-top:16px;max-width:620px}
.searchbox input[type=search]{flex:1;border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:'SS3',Arial,sans-serif;font-size:16px}
.searchbox input[type=search]:focus{outline:none;border-color:var(--blue)}
.searchbox .sbtn{background:var(--navy);color:#fff;border:0;border-radius:6px;font-weight:600;font-size:15px;padding:0 22px;cursor:pointer}
.searchbox .sbtn:hover{background:#013a6c}
.searchmeta{color:var(--grey);font-size:15px;margin-top:18px}
.sresults{margin-top:4px}
.sresult{padding:22px 0;border-top:1px solid var(--line)}
.sresult .stype{color:var(--blue);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.sresult h3{font-family:'SS4',Georgia,serif;font-size:22px;color:var(--navy);font-weight:600;margin-bottom:6px}
.sresult h3 a{color:var(--navy);text-decoration:none}
.sresult h3 a:hover{color:var(--blue)}
.sresult p{font-size:18px;line-height:1.65;color:#4a4f57;margin:0}
.noresults{font-size:18px;line-height:1.7;color:#33404d;max-width:660px;margin-top:6px}
.noresults a{color:var(--blue);font-weight:600;text-decoration:none}
/* header search — responsive: hide desktop toggle/bar, show a field in the menu */
@media (max-width:1023px){
  .nav-search-toggle{display:none}
  .nav.search-open .nav-search{display:none}
  .nav-search-m{display:flex;gap:10px;width:100%;margin:0 0 14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
  .nav-search-m input[type=search]{flex:1;border:1px solid var(--line);border-radius:6px;padding:11px 12px;font-family:'SS3',Arial,sans-serif;font-size:16px}
  .nav-search-m input[type=search]:focus{outline:none;border-color:var(--blue)}
  .nav-search-m .sbtn{background:var(--navy);color:#fff;border:0;border-radius:6px;padding:0 16px;cursor:pointer;display:flex;align-items:center}
  .nav-search-m .mag{width:18px;height:18px;display:block}
}
@media (max-width:767px){ .searchwrap{padding:0 20px} }

/* =============================================================
   RESPONSIVE  ·  three breakpoints
   desktop >=1024 (wireframe as-is) · tablet 768-1023 · mobile <768
   Added in Stage 1 so every later page inherits it.
   ============================================================= */

/* ---- Tablet and below: up to 1023px ---- */
@media (max-width:1023px){
  .wrap{padding:0 28px}

  /* Header collapses to the hamburger across the whole tablet range (<=1023),
     not just below 768 — the horizontal nav wraps and overlaps the hero here. */
  .nav-in,.nav-in.interior{height:auto;line-height:1.3;white-space:normal;padding-top:16px;padding-bottom:16px;position:relative}
  .nav-ccc{display:block;margin-left:0;padding-left:0;border-left:0;margin-top:10px}
  .nav-toggle{display:inline-block;position:absolute;right:28px;top:26px}
  .nav-r{display:none;float:none;width:100%;margin-top:14px;border-top:1px solid var(--line)}
  .nav.open .nav-r{display:block}
  .nav-r a{display:block;margin-left:0;padding:13px 2px;font-size:16px;border-bottom:1px solid var(--line)}
  .nav-r a.contact{display:block;text-align:center;margin-top:14px;padding:13px 22px}

  /* Home hero stacks (image below text) from tablet down — like mobile and the
     Advisory hero — so the photo never collapses to a sliver in a side column. */
  .hero .wrap{display:block}
  .hcol,.hleft,.hright{display:block;width:100%;padding-right:0;text-align:left}
  .hright{margin-top:24px}
  .hero h1{font-size:46px}
  /* Stacked (all tablet + mobile widths): show the WHOLE hero image at its
     natural aspect — height:auto, no object-fit crop — exactly like every other
     page's hero (.heroimg). This can never clip heads at any width. */
  .hero-img{height:auto;object-position:center;margin-top:0}

  .why-head h2,h2.sec{font-size:30px}   /* section headings scale down together */
  h1.page{font-size:40px}               /* interior hero headline */
  /* five Why cards reflow from a fixed 5-wide table to a flexible grid */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-spacing:0}
  .card{display:block;width:auto}
  /* kit layouts soften */
  .moats .mcard{width:48%}
  .ecol{width:47%}
  /* Advisory split-hero stays side by side on tablet */
  .adv-split .hcolL{width:56%}
  .adv-split .hcolR{width:40%}
  /* Insights listing: featured + category index stack from tablet down */
  .ins-top{display:block}
  .ins-side{margin-top:28px}
}

/* (The former 768-1023 hero-height patch is gone: the stacked hero is now
   height:auto across all widths ≤1023, so it never crops — see the ≤1023 block.) */

/* ---- Mobile: below 768px ---- */
@media (max-width:767px){
  .wrap{padding:0 20px}

  /* header: the collapse itself is handled from <=1023; phone-only tweaks */
  .nav-logo{height:60px}
  .nav-toggle{right:20px;top:22px}

  /* hero: smaller headline/intro/image on phones (stacking inherited from <=1023) */
  .hero{padding:40px 0 44px}
  .hright{margin-top:28px}
  .hero h1{font-size:40px}
  /* headline reflows inline so the three lines keep their spaces at any width */
  .hero h1 span{display:inline}
  .hero .lead{font-size:19px;max-width:none}
  .hph{height:280px}   /* placeholder panel only; the real .hero-img stays height:auto (full image) */

  /* columns and cards stack to one column */
  .why{padding:44px 0}
  .cards{grid-template-columns:1fr}
  .card h3{min-height:0}
  .grid12{grid-template-columns:1fr;gap:16px}
  .moats{display:block}.moats .mcard{width:auto;margin-bottom:16px}
  .ecol,.area,.valcol,.ccard,.lcol,.fcol,.part,.hcolL,.hcolR{display:block;width:auto;margin:0 0 24px}
  .part{margin:0 auto 24px}
  .card .ic .ic-img{height:48px}   /* icons ease down slightly on phones (v1.6.5) */
  .picwrap .ic-img{height:56px}
  /* Advisory: interior hero H1 + intros scale down; split hero and the
     cross-cutting strips stack to one column on mobile. */
  h1.page{font-size:32px}
  .overview,.overview-full,.subsec{font-size:19px}
  .adv-split .hcolL,.adv-split .hcolR{width:auto;margin-left:0;padding-top:0}
  .adv-split .hcolR{margin-top:22px}
  .estrip,.estrip>div{display:block;width:auto;padding-right:0}
  .sname,.sgo{width:auto}
  .sgo{text-align:left;margin-top:6px}
  /* Stage 3 pages: stack founder/mission/care/contact/engagement columns */
  .mvcol,.engcol,.cmain,.cside{display:block;width:auto;margin:0 0 20px}
  .frow,.mvrow,.care2,.cwrap,.vals{flex-direction:column;gap:0}
  .vals{display:block}
  .frow .fcol,.mvrow .mvcol{margin-bottom:20px}
  .valcol{margin-bottom:24px}
  .care2 .carep{margin-bottom:16px}
  .sub{max-width:none}
  /* Insights: cards stack; related posts stack; article padding + size */
  .acard{width:100%;margin-bottom:16px}
  .relrow{flex-wrap:wrap}
  .relrow .acard{flex:0 0 100%;margin-bottom:16px}
  .artwrap{padding:0 20px}
  .artbody{font-size:18px}
  .artbody blockquote{font-size:20px}
  /* Privacy: reduce container padding; keep heading icon inline */
  .pvwrap{padding:0 20px}
  .pv-assure{padding:20px 20px}
  .pv-essence{padding:30px 24px}
  .pv-sec h2{font-size:26px}

  /* footer stacks in a sensible order:
     logo + tagline, then the links, then the social row, then the copyright. */
  .foot-in{white-space:normal;text-align:center}
  .foot-logo{display:inline-block}
  .foot-tag{display:block;border-left:0;padding-left:0;margin-left:0;width:auto;margin-top:12px}
  /* links: centred, wrapping only BETWEEN whole items — each link stays intact
     so "Retinue Way" / "Privacy & Confidentiality" never split mid-phrase. */
  .foot-r{float:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 20px;margin-top:16px}
  .foot-r a{margin:0;white-space:nowrap}
  /* copyright row becomes a column; social tiles sit ABOVE the copyright line,
     in a single neat centred row. */
  .fcwrap{display:flex;flex-direction:column;gap:14px;align-items:center}
  .fsoc{position:static;transform:none;justify-content:center;flex-wrap:nowrap;order:-1}
  .fctext{order:0}

  .e404{padding:64px 0}
  .e404 h1{font-size:52px}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}