/*
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.0.3
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: All rights reserved
Text Domain: retinue
*/

/* NOTE: "Requires PHP" is temporarily set to 7.4 so the theme installs on the
   current staging server (PHP 7.4.33). The theme's code is compatible with 7.4
   (no PHP 8.x-only syntax). Restore "Requires PHP: 8.3" before the live cutover,
   where the new build targets PHP 8.3. */

/* =============================================================
   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 */
}

/* =============================================================
   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  ·  verbatim  (Home 118px bar, interior/404 104px)
   ============================================================= */
nav{background:#fff;border-bottom:1px solid var(--line)}
.nav-in{height:118px;line-height:118px;white-space:nowrap}
.nav-in.interior{height:104px;line-height:104px}   /* interior + 404 pages */
.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:15.5px;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:56px 0}          /* main content pages use 62px */
.band.main{padding:62px 0}
.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}
.hero .wrap{display:flex;justify-content:space-between;align-items:flex-start}
.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:18px;line-height:1.62;color:#33404d;max-width:530px;margin-top:2px}
.ai{margin:24px 0 0;color:var(--grey);font-size:15.5px}
.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 (for Stage 2+ pages) */
.hsplit{font-size:0}
.hcolL{display:inline-block;vertical-align:middle;width:53%;font-size:15px}
.hcolR{display:inline-block;vertical-align:middle;width:43%;margin-left:4%;font-size:15px}
.heroimg{width:100%;height:auto;border-radius:12px;border:1px solid #d6e3f2;display:block;box-shadow:0 18px 44px rgba(0,40,80,.14)}

/* =============================================================
   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:13px;letter-spacing:1.5px;text-transform:uppercase}
.why-head h2{font-size:33px;color:var(--navy);font-weight:600;margin-top:8px}
.hook{max-width:760px;margin:0 auto 40px;text-align:center;font-size:18.5px;line-height:1.6;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:13px;height:32px;line-height:32px}
.card .ic svg{vertical-align:middle;width:30px;height:30px}
.card h3{font-size:18px;color:var(--navy);font-weight:600;margin-bottom:8px;min-height:46px}
.card p{font-size:13.5px;line-height:1.55;color:#4a4f57}

/* =============================================================
   BOXED-CARD RECIPE (kit)  ·  verbatim — used on later pages
   ============================================================= */
.mcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 22px;min-height:212px}   /* Advisory moat */
.acard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 26px;min-height:196px}   /* Insights article */

/* =============================================================
   OPEN-COLUMN RECIPES (kit)  ·  verbatim — used on later pages
   ============================================================= */
/* About values */
.vals{margin-top:30px;font-size:0}
.valcol{display:inline-block;vertical-align:top;width:23.5%;margin-right:2%}
.valcol h3{font-size:20px;color:var(--navy);font-weight:600}
.valcol p{font-size:13.5px;line-height:1.55;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:inline-block;vertical-align:top;width:30%;margin:0 1.5% 36px}
.ecol h3{font-family:'SS4';font-size:20px;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:21px;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:16px;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:16px;line-height:1.7;color:#4a4f57}
.connect{font-size:16px;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 FEATURE (kit)  ·  verbatim — used on later pages
   ============================================================= */
.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 h2{font-family:'SS4';font-size:32px;line-height:1.18;color:var(--navy);font-weight:600;max-width:900px}

/* =============================================================
   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-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:14px;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}

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

/* ---- Tablet: 768px – 1023px ---- */
@media (max-width:1023px){
  .wrap{padding:0 28px}
  .hero h1{font-size:46px}
  .hero-img{margin-top:10px}   /* cap-leading + optical settle, scaled to the 46px headline */
  .why-head h2{font-size:29px}
  /* 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%}
}

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

  /* header collapses to a hamburger */
  .nav-in,.nav-in.interior{height:auto;line-height:1.3;white-space:normal;padding-top:16px;padding-bottom:16px;position:relative}
  .nav-logo{height:60px}
  /* CONSULT | COACH | CARE lockup: stacked below the logo (not hidden),
     Retinue Blue with grey pipe separators; drop the left divider when stacked. */
  .nav-ccc{display:block;margin-left:0;padding-left:0;border-left:0;margin-top:10px}
  .nav-toggle{display:inline-block;position:absolute;right:20px;top:22px}
  .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}

  /* hero stacks: text above image (revert the desktop flex row to block flow) */
  .hero{padding:40px 0 44px}
  .hero .wrap{display:block}
  .hcol,.hleft,.hright{display:block;width:100%;padding-right:0;text-align:left}
  .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:17px;max-width:none}
  .hph,.hero-img{height:280px}
  .hero-img{margin-top:0}   /* stacked on mobile — no cap-leading offset needed */

  /* 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}

  /* 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}
}