/* SKIN: professional (law, accounting, medical, consulting, B2B services)
   Feel: clean, credible, quiet confidence. Structured, restrained color. */
:root{
  --paper:#ffffff; --ink:#1f2430; --muted:#4d5464;
  --radius:8px;
  --shadow:0 2px 10px rgba(31,36,48,.08);
  --tile-border:1px solid #e2e5ea;
  --header-line:1px solid #e2e5ea;
  --section-bg-alt:#f4f6f9;
  /* NOT setting --accent-text here (removed 2026-08-12, was #fff): base.css's
     own fallback is color:var(--accent-text,var(--dark)) specifically so a
     light/mid accent color gets readable dark text by default. Hardcoding
     white at the skin level defeated that safety net the moment a real site
     used a light accent - bsn-consumers' orange #FF8C2A + white measured
     ~2.3:1, well under the 4.5:1 AA minimum for this button's text size.
     Dark text also reads more "restrained/quiet confidence" than white,
     which fits this skin's own brief better. A future professional-vertical
     site with a genuinely DARK accent color can set --accent-text:#fff in
     ITS OWN config-driven override if needed - see how color_accent/
     color_primary already work; this skin file should not assume for it. */
  --hero-overlay:linear-gradient(180deg,rgba(18,22,32,.7),rgba(18,22,32,.45) 55%,rgba(18,22,32,.72));
}
.hero{min-height:64vh}
h1{font-size:clamp(2rem,4.6vw,3.1rem)}
.tile h3{color:var(--primary)}

/* =====================================================================
   RICE PUBLIC IMPACT GROUP additions (2026-10-07, operator Mar).
   Skins are per-site files (qa.ps1 gates partials/base.css/site.js/
   send-lead.php against the template, not skins); base.css is untouched.
   Brief from the onboarding form: "Modern, Corporate"; blue, grey, white,
   a tinge of maroon; "keep the logo prominent"; an explicit Home button.
   Base rules sit ABOVE their media queries on purpose (the CSS ordering
   trap in site-factory/CLAUDE.md), and every .split modifier restates
   base.css's 860px collapse because a modifier out-specifies a media query.
   Everything above this banner is the stock skin, untouched.
   ===================================================================== */
:root{
  --muted:#5A6068;                 /* the logo's sub-line grey, darkened for 4.5:1 on white */
  --section-bg-alt:#F3F5F8;        /* cool grey wash */
  --tile-border:1px solid #DDE2E9;
  --header-line:1px solid #DDE2E9;
  --radius:10px;
  --rose:#F2D6DA;                  /* pale rose: the maroon accent's readable form on dark surfaces */
}
body{font-size:1.02rem;color:var(--ink)}
h1,h2,h3{color:var(--primary)}
h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.12;letter-spacing:-.005em}
h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.18}
section{padding:5rem 0}
.sub{color:var(--muted)}
.sub + .sub{margin-top:1rem}
h2 + .sub,h2 + .lede{margin-top:.3rem}
.narrow{max-width:820px}
.lede{font-size:1.15rem;color:var(--muted);max-width:66ch;line-height:1.7}
a.more-link,.more-link{color:var(--accent);font-weight:600;text-decoration:none}
a.more-link:hover{text-decoration:underline}
.fine-print{margin-top:2rem;font-size:.84rem;color:var(--muted);max-width:80ch}
/* Eyebrow: maroon text with a short navy rule, echoing the rule-and-bars motif in the logo. */
.eyebrow{color:var(--accent);letter-spacing:.16em;font-size:.76rem;display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--primary)}
.hero .eyebrow::before{background:var(--rose)}

/* ---- header: the logo IS the brand, so it runs tall (base.css: 48px) ---- */
.site-header{padding:10px 28px;border-bottom:var(--header-line)}
.brand img{height:74px}
.main-nav{gap:22px}
.main-nav a,.nav-item > a{font-weight:500;color:var(--ink);white-space:nowrap}
.hdr-cta .btn{white-space:nowrap}
@media (max-width:1280px){.tel-mini{display:none}}
@media (max-width:1180px){.brand img{height:62px}.main-nav{gap:16px}.main-nav a,.nav-item > a{font-size:.9rem}}
@media (max-width:1040px){.site-header{padding:8px 18px;gap:12px}.brand img{height:52px}
  .main-nav{gap:12px}.main-nav a,.nav-item > a{font-size:.84rem}.hdr-cta .btn{padding:.55rem .9rem;font-size:.84rem}}
@media (max-width:860px){.brand img{height:50px}}
.menu-btn{border:1.5px solid var(--primary);color:var(--primary);border-radius:6px;font-family:var(--body);font-weight:600}
.sub-menu.cols2{min-width:560px}

/* ---- buttons: squared-off, corporate, no lift ---- */
.btn{border-radius:6px;font-weight:600;letter-spacing:.01em;box-shadow:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn:hover{transform:none}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.hero .btn:not(.btn-accent){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);color:#fff}
.hero .btn:not(.btn-accent):hover{background:#fff;color:var(--primary)}
.btn-big{padding:.9rem 1.5rem}

/* ---- banners (operator decision, 2026-10-08): NO photo in the hero. ----
   Mar asked for the images out of the banners and into the page body, so the
   hero is a navy band with the copy running the full wrap width, and the
   page's photo sits directly under it as a lead photo (.lead-photo below)
   that overlaps the band. This is a deliberate exception to the fleet's
   "every hero gets a real photo" standard - see SITE-CLAUDE.md. The fixed
   header is ~95px tall on desktop, ~67px on phones, hence the top padding. */
.hero{min-height:0;padding:9.5rem 0 7.5rem;background:linear-gradient(118deg,#07213F 0%,#033062 58%,#0B3D74 100%)}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero h1{max-width:none;font-size:clamp(2.2rem,4.8vw,3.5rem)}
.hero .sub{font-size:1.15rem;margin-top:1.1rem;max-width:none;color:rgba(255,255,255,.9);text-shadow:none}
.hero .eyebrow + h1{margin-top:.8rem}
.hero .eyebrow{text-shadow:none}
.hero-page{min-height:0;padding:9rem 0 7.5rem}
.hero-page h1{max-width:none}
/* Contact keeps its form in the banner; with the photo gone the two columns
   simply sit on the navy. */
.hero .hero-grid.has-form{gap:3rem}
@media (max-width:860px){.hero,.hero-page{padding:6rem 0 5.5rem}}
/* Lead photo: the page's photo, whole, under the banner. The 16:9 cut shows
   on desktop and the 3:4 phone cut below 860px, both at their natural ratio -
   nothing is cropped any more. Pulled up over the band's bottom edge. */
.lead-photo{padding:0 0 .5rem}
.lead-photo .wrap{position:relative;z-index:2;margin-top:-5rem}
.lead-photo img{width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid #DDE2E9;background:#fff;box-shadow:0 10px 30px rgba(7,33,63,.18)}
@media (max-width:860px){.lead-photo .wrap{margin-top:-3.5rem}}
/* Home lead (client, 2026-10-26): one portrait photo of both principals, shown
   whole and centered at portrait width so the page does not become one
   full-width, 1300px-tall image. (Replaced the two-headshot pair of 10-16.) */
.lead-portrait img{max-width:680px;margin:0 auto}
/* Social links on About and Contact (client, 2026-10-26). */
.social-links{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 0;padding:0}
.social-links a{display:inline-flex;align-items:center;padding:.5rem .95rem;border:1px solid #DDE2E9;border-radius:999px;
  font-weight:600;font-size:.95rem;color:var(--primary);text-decoration:none;background:#fff}
.social-links a:hover{border-color:var(--primary);color:var(--accent)}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.4rem;padding:0;font-size:.94rem;font-weight:600;color:#fff}
.hero-points li{display:flex;align-items:center;gap:.5rem}
.hero-points li::before{content:"";width:8px;height:8px;background:var(--rose)}

/* ---- surfaces ---- */
.tile{border-radius:var(--radius)}
.tile h3{color:var(--primary);font-size:1.12rem}
.lead-panel{border-radius:var(--radius);border:1px solid #D5DBE4}
.lead-head{background:var(--primary);color:#fff;font-weight:700}
.lead-form input,.lead-form textarea,.lead-form select{border:1.5px solid #C9D1DC;border-radius:6px;font-family:var(--body);font-size:.95rem;padding:.7rem .8rem;background:#fff;width:100%}
.lead-form select{appearance:auto}
.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{outline:3px solid rgba(3,48,98,.25);border-color:var(--primary)}
.split img{border-radius:var(--radius)}
.ticks li::before{background:var(--accent);border-radius:0}
.steps li::before{background:var(--primary);color:#fff;border-radius:6px;font-family:var(--display)}
.faq details{border-bottom:1px solid #DDE2E9}
.faq summary{color:var(--primary)}

/* Practice-area cards: the whole card is the link. */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:2.4rem}
.cards.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1040px){.cards.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.cards,.cards.cols2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.cards.cols4{grid-template-columns:minmax(0,1fr)}}
.card{display:flex;flex-direction:column;gap:.55rem;text-decoration:none;background:#fff;color:var(--ink);
  border:1px solid #DDE2E9;border-top:4px solid var(--primary);border-radius:var(--radius);padding:1.6rem 1.5rem;
  transition:border-color .15s ease}
.card:hover{border-color:var(--accent)}
.card h3{font-size:1.18rem;line-height:1.3}
.card p{font-size:.95rem;color:var(--muted)}
.card .ticks{columns:1;margin-top:.4rem}
.card .more{margin-top:auto;padding-top:.6rem;color:var(--accent);font-weight:600;font-size:.93rem}
.card .tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:#F6E9EB;border-radius:4px;padding:.28rem .6rem}

/* The five-discipline strip: STRATEGY / POLICY / COMMUNICATIONS / COMMUNITY / PARTNERSHIPS */
.pillars{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 0;margin:1.8rem 0 0;padding:0;
  font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:.86rem;color:var(--primary);text-transform:uppercase}
.pillars li{display:flex;align-items:center}
.pillars li + li::before{content:"";width:6px;height:6px;background:var(--accent);margin:0 1.1rem}
/* The strip is navy for white sections; inside the navy banner (the two bio
   pages) it has to be white (Mar, 2026-10-27: "blue on top of blue"). Dots go
   rose like the banner's other marks. */
.hero .pillars{color:#fff}
.hero .pillars li + li::before{background:var(--rose)}

/* Dark navy band (the RPIG difference) with the integration chain. */
.band-dark{background:var(--dark);color:#fff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .eyebrow{color:var(--rose)}
.band-dark .eyebrow::before{background:var(--rose)}
.band-dark .sub,.band-dark .lede{color:rgba(255,255,255,.84)}
.chain{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem .4rem;margin:2.2rem 0 0;padding:0}
.chain li{font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;display:flex;align-items:center}
.chain li + li::before{content:"\2192";color:var(--rose);margin:0 .9rem;font-family:var(--body);font-weight:400}
.band-dark .btn:not(.btn-accent){border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.band-dark .btn:not(.btn-accent):hover{background:#fff;color:var(--primary)}

/* Who-we-serve chips. */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem;padding:0}
.chips li,.chips a{display:inline-block;border:1px solid #CDD5E0;background:#fff;color:var(--primary);
  border-radius:4px;padding:.42rem .9rem;font-size:.92rem;font-weight:500;text-decoration:none}
.chips a:hover{border-color:var(--accent);color:var(--accent)}

/* Brand panel: the full logo (with tagline) as a visual, on paper with a hairline. */
.brand-panel{background:#fff;border:1px solid #DDE2E9;border-radius:var(--radius);padding:2.4rem 2rem;display:flex;align-items:center;justify-content:center}
/* Sits inside a .split, so base.css's `.split img` (3:4 box, object-fit:cover,
   ratio-derived max-width) would crop the logo - measured 434x578 on first
   render. Every property that rule sets is restated here. */
.brand-panel img,.split .brand-panel img{width:100%;max-width:460px;height:auto;aspect-ratio:auto;object-fit:contain;
  display:block;margin:0;border-radius:0;box-shadow:none}
.split.media-brand{grid-template-columns:1.05fr .95fr}
@media (max-width:860px){.split.media-brand{grid-template-columns:1fr}}

/* Leadership cards (About): portrait on top, name, role, bio. */
.leaders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:2.4rem}
@media (max-width:860px){.leaders{grid-template-columns:minmax(0,1fr)}}
.leader{background:#fff;border:1px solid #DDE2E9;border-radius:var(--radius);overflow:hidden}
/* Square since 2026-10-15: both principals now have real headshots (Libi's is
   square, Ron's 3:4), so a square box shows them whole or nearly so. */
.leader img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 15%;display:block}
/* Payment-instructions table (the client's UPIC details). */
.pay-table{width:100%;max-width:760px;border-collapse:collapse;margin-top:2rem;background:#fff;border:1px solid #DDE2E9;border-radius:var(--radius);overflow:hidden}
.pay-table th,.pay-table td{text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid #DDE2E9;font-size:1rem;vertical-align:top}
.pay-table thead th{background:var(--primary);color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.pay-table tbody th{font-weight:600;color:var(--primary);width:44%}
.pay-table tr:last-child td,.pay-table tr:last-child th{border-bottom:0}
.pay-table code{font-family:ui-monospace,Consolas,monospace;font-size:1.05rem;letter-spacing:.08em;color:var(--ink)}
/* Speaking page: the embedded appearance (privacy-enhanced YouTube) and topics. */
.video-frame{position:relative;aspect-ratio:16/9;background:#07213F;border-radius:var(--radius);overflow:hidden;border:1px solid #DDE2E9}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.photo-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:2.4rem}
@media (max-width:860px){.photo-strip{grid-template-columns:minmax(0,1fr)}}
.photo-strip figure{margin:0;background:#fff;border:1px solid #DDE2E9;border-radius:var(--radius);overflow:hidden}
.photo-strip img{width:100%;height:auto;display:block}
.photo-strip figcaption{padding:.75rem 1rem .9rem;font-size:.9rem;color:var(--muted);line-height:1.45}
.leader .leader-body{padding:1.5rem 1.6rem 1.7rem}
.leader h3{font-size:1.35rem;margin-bottom:.15rem}
.leader .role{display:block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.leader p{font-size:.96rem;color:var(--muted)}
.leader p + p{margin-top:.8rem}
.leader .no-photo{aspect-ratio:4/3;background:linear-gradient(135deg,#0A2E5C,#033062 60%,#07213F);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:3.4rem;color:rgba(255,255,255,.9);letter-spacing:.06em}

/* Jurisdiction fact grid (Where We Work pages): definition cards. */
.fact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:2rem}
@media (max-width:720px){.fact-grid{grid-template-columns:minmax(0,1fr)}}
.fact-grid > div{background:#fff;border:1px solid #DDE2E9;border-left:4px solid var(--primary);border-radius:var(--radius);padding:1.25rem 1.4rem}
.fact-grid dt{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.fact-grid dd{margin:.35rem 0 0;font-size:.95rem;color:var(--ink);line-height:1.55}
.fact-grid dd b{color:var(--primary)}

/* Gallery: uncropped photos in a column layout (never cropped against the source). */
.gallery{columns:3;column-gap:22px;margin-top:2.4rem}
@media (max-width:960px){.gallery{columns:2}}
@media (max-width:600px){.gallery{columns:1}}
.gallery figure{break-inside:avoid;margin:0 0 22px;background:#fff;border:1px solid #DDE2E9;border-radius:var(--radius);overflow:hidden}
.gallery img{width:100%;height:auto;display:block}
.gallery figcaption{padding:.8rem 1rem .95rem;font-size:.9rem;color:var(--muted);line-height:1.45}

/* Mission / vision statements. */
.statements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:2.2rem}
@media (max-width:860px){.statements{grid-template-columns:minmax(0,1fr)}}
.statement{background:#fff;border:1px solid #DDE2E9;border-radius:var(--radius);padding:1.8rem 1.7rem}
.statement .eyebrow{margin-bottom:.6rem}
.statement p{font-family:var(--display);font-size:1.12rem;line-height:1.55;color:var(--primary)}

/* Legal / plain pages with no hero. */
.page-top{padding-top:9.5rem}
.prose h2{font-size:1.3rem;margin-top:2rem}
.foot-logo{height:44px}
/* Footer sits on --dark: the maroon accent fails there, so links use the pale rose. */
.foot-areas-all{color:var(--rose)}
.foot-areas a:hover,.foot-links a:hover{color:var(--rose)}

/* WIDE TEXT (operator, 2026-10-08: "make the words, both heading and body wider"):
   headings and body copy run the full 1140px wrap instead of a 58-82ch measure.
   .narrow is pinned to the wrap width rather than none, or .wrap.narrow would
   lose its cap entirely (equal specificity, later rule wins). */
.sub,.lede,.fine-print,.faq,.hero h1,.hero-page h1,.hero .sub{max-width:none}
.narrow{max-width:1140px}
.lede{font-size:1.18rem}
h1,h2{letter-spacing:.015em}