/* ============================================================
   RUBICON MORTGAGE FUND — Global Styles v3.0
   ============================================================
   TO REBRAND: edit the values in the :root block below.
   Changes here cascade across every page automatically.

   KEY BRAND VARIABLES (most likely to change):
     --accent   → the blue used for links, tags, highlights
     --serif    → heading / display font
     --sans     → body / UI font
     --ink      → primary dark text color
     --cream    → warm off-white text used on dark backgrounds
     --blk      → deepest dark background (nav, heroes)
   ============================================================ */
:root {

  /* ── Brand accent ─────────────────────────────────────── */
  --accent:      #57a0d7;   /* primary blue — change to rebrand */

  /* ── Dark backgrounds ─────────────────────────────────── */
  --blk:         #080808;   /* deepest dark (nav scrolled, heroes) */
  --blk-2:       #101010;   /* footer, stats strip */
  --blk-3:       #1a1a1a;   /* slightly lighter dark panels */

  /* ── Light backgrounds ────────────────────────────────── */
  --wht:         #ffffff;
  --wht-2:       #f8f8f6;   /* off-white section backgrounds */
  --wht-3:       #f0ece5;   /* warm off-white */

  /* ── Text: dark (on light backgrounds) ───────────────── */
  --ink:         #1c1c1a;   /* primary body text */
  --ink-65:      rgba(28,28,26,0.65);
  --ink-55:      rgba(28,28,26,0.55);
  --ink-50:      rgba(28,28,26,0.50);
  --ink-45:      rgba(28,28,26,0.45);
  --ink-40:      rgba(28,28,26,0.75);
  --ink-35:      rgba(28,28,26,0.70);
  --ink-30:      rgba(28,28,26,0.65);
  --ink-25:      rgba(28,28,26,0.60);
  --ink-20:      rgba(28,28,26,0.20);
  --ink-18:      rgba(28,28,26,0.18);
  --ink-15:      rgba(28,28,26,0.15);
  --ink-08:      rgba(28,28,26,0.08);

  /* ── Text: light (on dark backgrounds) ───────────────── */
  --cream:       #ede8de;   /* warm off-white — used on dark heroes */
  --cream-88:    rgba(237,232,222,0.88);
  --cream-70:    rgba(237,232,222,0.70);
  --cream-65:    rgba(237,232,222,0.65);
  --cream-60:    rgba(237,232,222,0.60);
  --cream-55:    rgba(237,232,222,0.55);
  --cream-50:    rgba(237,232,222,0.50);
  --cream-35:    rgba(237,232,222,0.72);
  --cream-30:    rgba(237,232,222,0.65);
  --cream-25:    rgba(237,232,222,0.60);

  /* ── Divider rules ────────────────────────────────────── */
  --rule-dk:     rgba(255,255,255,0.09);  /* dividers on dark bg */
  --rule-dk2:    rgba(255,255,255,0.15);
  --rule-lt:     rgba(0,0,0,0.09);        /* dividers on light bg */
  --rule-lt2:    rgba(0,0,0,0.15);

  /* ── Typography ───────────────────────────────────────── */
  --serif:  'Cormorant Garamond', Georgia, serif;  /* headings / display */
  --sans:   'Montserrat', sans-serif;              /* body / UI labels */

}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--wht);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover;object-position:center}

/* Utilities */
.s-inner{max-width:1380px;margin:0 auto;padding:0 3.5rem}
.s-pad{padding:9rem 0}
.s-pad-sm{padding:5rem 0}

/* Eyebrows */
.ey,.ey-lt{display:flex;align-items:center;gap:.85rem;margin-bottom:1.75rem}
.ey-line,.ey-lt-line{width:30px;height:1px;background:var(--accent);flex-shrink:0}
.ey span,.ey-lt span{font-size:.81rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:400}

/* Headings */
.h-serif{font-family:var(--serif);font-weight:300;line-height:1.05}
.h-serif em{font-style:italic}
.h-xl{font-size:clamp(2.8rem,5vw,4.8rem)}
.h-lg{font-size:clamp(2.5rem,4.5vw,4rem)}
.h-md{font-size:clamp(2rem,3.5vw,3rem)}
.c-wht{color:var(--wht)}
.c-ink{color:var(--ink)}

/* Links */
.lnk,.lnk-lt{display:inline-flex;align-items:center;gap:.8rem;font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;padding-bottom:3px;transition:border-color .3s}
.lnk{color:var(--wht);border-bottom:1px solid var(--rule-dk2)}
.lnk-lt{color:var(--ink);border-bottom:1px solid var(--rule-lt2)}
.lnk:hover{border-color:var(--wht)}
.lnk-lt:hover{border-color:var(--ink)}
.lnk svg,.lnk-lt svg{width:12px;height:12px;transition:transform .3s}
.lnk:hover svg,.lnk-lt:hover svg{transform:translateX(4px)}

/* Scroll reveal */
.r{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.r.v{opacity:1;transform:translateY(0)}
.r.d1{transition-delay:.12s}.r.d2{transition-delay:.22s}.r.d3{transition-delay:.32s}

/* Page hero (inner pages) */
.page-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--blk)}
.page-hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,1) 0%,rgba(8,8,8,.4) 100%)}
.page-hero-content{position:relative;z-index:2;padding:0 3.5rem 5rem;width:100%}
.page-hero-tag{display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem}
.page-hero-tag-line{width:36px;height:1px;background:var(--accent)}
.page-hero-tag span{font-size:.81rem;letter-spacing:.22em;text-transform:uppercase;color:#a8cfe8;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.85)}
/* Loan-page hero eyebrows — brighter for readability over photos (beats template inline styles) */
.lt-hero-tag span{color:#a8cfe8!important;font-weight:500!important;text-shadow:0 1px 8px rgba(0,0,0,.85)!important;font-size:.72rem!important}
.page-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,7vw,6rem);line-height:.96;letter-spacing:-.02em;color:var(--wht)}
.page-hero h1 em{font-style:italic}

/* Full bleed photo */
.fullbleed{position:relative;overflow:hidden}
.fullbleed img{height:100%;object-fit:cover;filter:brightness(.75)}
.fullbleed::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.75) 0%,transparent 55%)}
.fullbleed-cap{position:absolute;bottom:3.5rem;left:3.5rem;z-index:3}
.fullbleed-cap h3{font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);font-weight:300;line-height:1;color:var(--wht)}
.fullbleed-cap h3 em{font-style:italic}
.fullbleed-cap p{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:.85rem}

/* Stats strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--blk-2);border-top:1px solid var(--rule-dk);border-bottom:1px solid var(--rule-dk)}
.strip-num .slot-ch{display:inline-block;min-width:.52em;text-align:center;opacity:.55;transition:opacity .25s}
.strip-num .slot-ch.slot-done{opacity:1}
.strip-item{padding:2.75rem 3rem;border-right:1px solid var(--rule-dk)}
.strip-item:last-child{border-right:none}
.strip-num{font-family:var(--serif);font-size:3.4rem;font-weight:300;line-height:1;color:var(--wht);letter-spacing:-.02em}
.strip-lbl{margin-top:.55rem;font-size:.80rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-25);font-weight:400}

/* Pillars */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-lt)}
.pillar{background:var(--wht);padding:1.75rem 2rem}
.pillar-t{font-size:.98rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:.6rem}
.pillar-b{font-size:1.03rem;line-height:1.7;color:var(--ink-50)}

/* Checklist */
.checks{display:flex;flex-direction:column;gap:.95rem}
.check{display:flex;align-items:center;gap:.9rem;font-size:1.03rem;color:var(--ink-50)}
.check-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* Criteria table */
.crit-rows{display:flex;flex-direction:column}
.crit-row{display:grid;grid-template-columns:130px 1fr;padding:1.6rem 0;border-bottom:1px solid var(--rule-lt);transition:border-color .3s}
.crit-row:first-child{border-top:1px solid var(--rule-lt)}
.crit-row:hover{border-bottom-color:var(--rule-lt2)}
.crit-k{font-size:.90rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-25);padding-top:.3rem;font-weight:500}
.crit-v{font-family:var(--serif);font-size:1.35rem;font-weight:300;color:var(--ink)}

/* FAQ */
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--rule-lt)}
.faq-item:first-child{border-top:1px solid var(--rule-lt)}
.faq-q{width:100%;background:none;border:none;padding:1.75rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;font-family:var(--serif);font-size:1.2rem;font-weight:300;color:var(--ink-50);text-align:left;transition:color .3s}
.faq-q:hover,.faq-item.open .faq-q{color:var(--ink)}
.faq-icon{width:20px;height:20px;border:1px solid var(--rule-lt);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .4s,border-color .3s;color:var(--ink-25)}
.faq-item.open .faq-icon{transform:rotate(45deg);border-color:var(--rule-lt2)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1);font-size:1.03rem;color:var(--ink-50);line-height:1.95}
.faq-item.open .faq-ans{max-height:300px}
.faq-ans-in{padding-bottom:1.75rem}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.blog-card-img{height:220px;overflow:hidden;margin-bottom:1.5rem}
.blog-card-img img{height:100%;object-fit:cover;filter:brightness(.9) saturate(.8);transition:transform .7s,filter .7s}
.blog-card:hover .blog-card-img img{transform:scale(1.04);filter:brightness(1)}
.blog-card-body{border-top:1px solid var(--rule-lt);padding-top:1.5rem}
.blog-card-cat{font-size:.60rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:.65rem}
.blog-card-title{font-family:var(--serif);font-size:1.4rem;font-weight:300;color:var(--ink);line-height:1.2;margin-bottom:.75rem;display:block}
.blog-card-date{font-size:.98rem;color:var(--ink-25);letter-spacing:.08em}
.blog-card-excerpt{font-size:1.03rem;color:var(--ink-50);line-height:1.85;margin-top:.75rem}

/* Single post */
.post-content{max-width:760px;margin:0 auto;font-size:1.1rem;line-height:1.9;color:var(--ink-50)}
.post-content h2,.post-content h3{font-family:var(--serif);font-weight:300;color:var(--ink);margin:2.5rem 0 1rem}
.post-content h2{font-size:2rem}
.post-content h3{font-size:1.5rem}
.post-content p{margin-bottom:1.5rem}
.post-content ul,.post-content ol{padding-left:1.5rem;margin-bottom:1.5rem}
.post-content li{margin-bottom:.5rem}
.post-content a{color:var(--accent);border-bottom:1px solid rgba(87,160,215,.3);transition:border-color .3s}
.post-content a:hover{border-color:var(--accent)}
.post-content blockquote{border-left:2px solid var(--accent);padding-left:2rem;margin:2rem 0;font-family:var(--serif);font-size:1.4rem;font-weight:300;line-height:1.4;color:var(--ink)}
.post-content img{margin:2.5rem 0;border-radius:2px}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.team-card-img{height:360px;overflow:hidden;margin-bottom:1.5rem}
.team-card-img img{height:100%;object-fit:cover;filter:brightness(.9) saturate(.8);transition:filter .5s}
.team-card:hover .team-card-img img{filter:brightness(1) saturate(1)}
.team-name{font-family:var(--serif);font-size:1.4rem;font-weight:300;color:var(--ink)}
.team-role{font-size:.70rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-25);margin-top:.4rem}
.team-bio{font-size:1.03rem;color:var(--ink-50);line-height:1.85;margin-top:1rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem}
.form-group{margin-bottom:1.75rem}
.form-label{display:block;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-25);margin-bottom:.75rem}
.form-input,.form-textarea,.form-select{width:100%;background:transparent;border:none;border-bottom:1px solid var(--rule-lt2);padding:.75rem 0;font-family:var(--sans);font-size:1.03rem;font-weight:300;color:var(--ink);outline:none;transition:border-color .3s}
.form-input:focus,.form-textarea:focus{border-color:var(--ink)}
.form-textarea{resize:vertical;min-height:120px}
.form-submit{display:inline-flex;align-items:center;gap:.8rem;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--rule-lt2);padding-bottom:3px;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;font-family:var(--sans);transition:border-color .3s}
.form-submit:hover{border-color:var(--ink)}

/* CTA banner */
.cta-section{position:relative;min-height:65vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cta-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.cta-bg::after{content:'';position:absolute;inset:0;background:rgba(8,8,8,.74)}
.cta-inner{position:relative;z-index:2;text-align:center;padding:0 2rem}
.cta-h2{font-family:var(--serif);font-size:clamp(3rem,7vw,6.5rem);font-weight:300;line-height:1;color:var(--wht);margin-bottom:1.75rem;letter-spacing:-.02em}
.cta-h2 em{font-style:italic}
.cta-sub{font-size:1.03rem;line-height:1.9;color:var(--cream-50);margin:0 auto 3rem;max-width:480px}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:3rem}
.cta-phone{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:300;color:var(--wht);margin-top:2rem;letter-spacing:.04em;transition:color .3s}
.cta-phone:hover{color:var(--accent)}

/* Sponsors */
.sponsors{border-top:1px solid var(--rule-lt);border-bottom:1px solid var(--rule-lt);padding:4.5rem 0;background:var(--wht-2)}
.sp-label{font-size:.70rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-25);text-align:center;margin-bottom:2.5rem}
.sp-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.5rem}
.sp-item{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-25);padding:.65rem 1.4rem;border:1px solid var(--rule-lt);transition:color .3s,border-color .3s}
.sp-item:hover{color:var(--ink-50);border-color:var(--rule-lt2)}
.sp-link:hover img{filter:grayscale(0)!important;opacity:1!important}

/* Responsive */
@media(max-width:1100px){
  .s-inner{padding:0 2rem}
  .contact-grid{grid-template-columns:1fr;gap:3rem}
  .strip{grid-template-columns:1fr 1fr}
  .strip-item{border-bottom:1px solid var(--rule-dk)}
  .blog-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .page-hero-content{padding:0 2rem 4rem}
}
@media(max-width:640px){
  .s-pad{padding:5rem 0}
  .blog-grid,.team-grid{grid-template-columns:1fr}
}


/* Fix: clear fixed header on sub-page hero banners */
.page-hero,.tm-hero,.bl-hero{padding-top:120px}
@media (max-width:1100px){.page-hero,.tm-hero,.bl-hero{padding-top:100px}}

/* Blog hero: taller so 2-line subtext isn't clipped */
.bl-hero{min-height:460px !important;height:auto !important;padding-bottom:48px}
@media (max-width:1100px){.bl-hero{min-height:520px !important;height:auto !important;padding-bottom:40px}}

/* Deals + Team hero: clear header, no clip (override inline fixed heights) */
.tm-hero{min-height:340px !important;height:auto !important;padding-top:120px !important;padding-bottom:40px !important}
.fl-hero{min-height:460px !important;height:auto !important;padding-top:120px !important;padding-bottom:48px !important}
@media (max-width:1100px){.tm-hero{min-height:320px !important;padding-top:100px !important}.fl-hero{min-height:520px !important;padding-top:100px !important}}

/* FAQs hero: use acquisition-loans photo */
body.page-id-129 .lt-hero-bg{background-image:url('https://rubiconmortgagefund.com/wp-content/themes/rubicon-acf-theme/images/hero-acquisition.jpg') !important;background-size:cover !important;background-position:center !important}

/* Hero right blurb: larger + higher contrast for legibility */
.hero-desc{font-size:1.08rem !important;font-weight:400 !important;color:#fff !important;line-height:1.75 !important;text-shadow:0 1px 16px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.7) !important}
.hero-right .lnk{font-size:1rem !important;font-weight:500 !important;color:#fff !important;letter-spacing:.14em !important;text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.6) !important}
@media (max-width:1100px){.hero-desc{font-size:1.08rem !important}}

/* Homepage hero: show top of building (not cropped) */
.hero-bg{background-position:center 30% !important}

/* Hero eyebrow tagline balance */
.hero-tag span{font-size:15.5px !important}
.hero-tag-line{width:46px !important}

/* Forms page: stack the two download links vertically */
.bfrm-card .bfrm-dl{display:flex;width:fit-content}
.bfrm-card .bfrm-dl + .bfrm-dl{margin-top:1.25rem}

/* Contact page: remove redundant .no-hero top padding (showed a white strip above the hero photo); lift photo behind header and frame skyline */
.page-template-contact .no-hero{padding-top:0}
.page-template-contact .page-hero-bg{background-position:center 32% !important}

/* ── Sub-page hero polish: taller banners, show photo tops, softer overlay ── */
.page-hero:not(.city-hero){min-height:52vh !important}
.page-hero-bg,.tm-hero-bg,.bl-hero-bg,.fl-hero-bg{background-position:center 28% !important}
.page-hero-bg::after{background:linear-gradient(to top,rgba(8,8,8,1) 0%,rgba(8,8,8,.55) 50%,rgba(8,8,8,.22) 100%) !important}
.fl-hero{min-height:500px !important}
.tm-hero{min-height:400px !important}

/* Contact hero: taller so more of the photo is visible (like the loan pages) */
.page-template-contact .page-hero{min-height:62vh !important}

/* City pages (San Francisco etc.): proper Get a Quote button in the dark box */
.city-crit-aside-box a{display:inline-flex !important;align-items:center;gap:.7rem;border:1px solid rgba(255,255,255,.45) !important;color:#fff !important;padding:.95rem 1.9rem !important;font-size:.78rem !important;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-top:.5rem;transition:background .3s,color .3s}
.city-crit-aside-box a:hover{background:#fff !important;color:#1c1c1a !important}

/* City pages: checklist under the box sits on white — make it legible */
.city-check{color:rgba(28,28,26,.78) !important;font-weight:400}
.city-check-dot{background:#5b8db8 !important}

/* City pages: city intro Get a Quote link as a solid button */
.city-intro-grid a{display:inline-flex !important;align-items:center;gap:.7rem;background:#1c1c1a !important;border:none !important;color:#fff !important;padding:.95rem 1.9rem !important;font-size:.78rem !important;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-top:.75rem;transition:background .3s}
.city-intro-grid a:hover{background:#3a3a36 !important}

/* Homepage hero: photo starts below the nav so the tower top is never hidden */
.hero{background:#080808 !important}
.hero .hero-bg{top:92px !important;background-position:center 30% !important}
@media (max-width:1100px){.hero .hero-bg{top:76px !important}}

/* Team modal headshot: 3:4 like the cards so heads aren't cropped by a square box */
.tm-modal-photo{width:150px !important;height:200px !important}
.tm-modal-photo img{object-position:center 18% !important}
@media (max-width:1100px){.tm-modal-photo{width:112px !important;height:150px !important}}


/* ══ MOBILE (≤767px): true single-column layouts. Desktop untouched. ══ */
@media (max-width:1100px){
  html,body{overflow-x:clip}
}
@media (max-width:767px){
  /* Stack every inline-styled desktop grid (loan products, criteria, deals, steps, FAQ) */
  div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  div[style*="grid-template-columns"] > *{min-width:0}
  .pillars{grid-template-columns:minmax(0,1fr)}
  /* Kill huge desktop gaps */
  div[style*="gap:8rem"]{gap:2.75rem !important}
  div[style*="gap:6rem"]{gap:2.5rem !important}
  div[style*="gap:4rem"]{gap:2rem !important}
  /* Section padding 9rem → 4rem */
  section[style*="padding:9rem"]{padding-top:5rem !important;padding-bottom:5rem !important}
  .s-pad{padding:5rem 0}
  /* Oversized desktop heading margins */
  h2[style*="margin-bottom:6rem"]{margin-bottom:2.75rem !important}
  div[style*="margin-bottom:5rem"]{margin-bottom:2.5rem !important}
  div[style*="margin-top:5rem"]{margin-top:2.5rem !important}
  /* Hero headline: mobile size, natural wrapping (no forced breaks) */
  .hero-h1{font-size:clamp(2.7rem,11vw,3rem) !important;line-height:1.06}
  /* Keep <br> as the break opportunity — hiding it glues words together and overflows.
     Long words break instead of pushing past the viewport. */
  h1,h2,h3,.hero-h1{overflow-wrap:break-word;word-break:normal;hyphens:manual}
  .hero{min-height:560px}
  /* Stats strip: tighter 2×2 cells */
  .strip-item{padding:1.8rem 1.4rem}
  .strip-num{font-size:2.3rem}
  .strip-lbl{font-size:.66rem;letter-spacing:.14em}
  /* Cards: drop desktop padding that squeezed text */
  .svc-card{padding:2.5rem 1.5rem !important}
  div[style*="padding:3.5rem 2.75rem"]{padding:2.5rem 1.5rem !important}
  div[style*="font-size:5rem"]{font-size:2.8rem !important}
  div[style*="font-size:4rem"]{font-size:2.6rem !important}
  /* Lending criteria: photo column un-sticks, shorter photo */
  div[style*="position:sticky"]{position:static !important}
  #criteria img{height:260px !important}
  /* Funded deals header stacks */
  #deals div[style*="space-between"]{flex-direction:column !important;align-items:flex-start !important;gap:1.25rem}
  /* Full-bleed banner shorter */
  .home .fullbleed[style]{height:42vh !important}
  /* Audience tabs: three equal tabs that always fit */
  .aud-tab{flex:1 1 0;padding:1rem .2rem;font-size:.66rem;letter-spacing:.1em}
  /* Audience panels: drop 5rem desktop padding, cap photo height */
  .aud-panel > div[style*="padding:5rem"]{padding:2.5rem 0 !important}
  .aud-panel img{min-height:260px !important;max-height:320px}
  /* Process CTA aligns left on mobile */
  .home div[style*="justify-content:flex-end"]{justify-content:flex-start !important}
  /* Embeds never exceed the viewport */
  iframe{max-width:100%}
}

@media (max-width:767px){
  /* These lose to front-page.php's inline <style> without !important */
  .aud-tab{padding:1rem .35rem !important;font-size:.66rem !important;letter-spacing:.08em !important;min-width:0 !important;flex:1 1 0 !important;white-space:nowrap}
  .hero{height:auto !important;min-height:78vh !important}
  .hero-h1{line-height:1.06 !important}
  .about-img-col img{min-height:300px !important}
}

/* ══ TABLET (768–1100px): 3- and 5-across grids go 2-up. Desktop >1100 untouched. ══ */
@media (min-width:768px) and (max-width:1100px){
  div[style*="repeat(3"],div[style*="repeat(5"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  div[style*="repeat(3"] > *,div[style*="repeat(5"] > *{min-width:0}
  div[style*="gap:8rem"]{gap:3.5rem !important}
  section[style*="padding:9rem"]{padding-top:6rem !important;padding-bottom:6rem !important}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aud-tab{padding:1.1rem 1.5rem;font-size:.78rem;letter-spacing:.14em}
  .aud-panel > div[style*="padding:5rem"]{padding:3rem 0 !important}
}

@media (max-width:767px){
  /* Full-bleed caption: use the full width instead of a 3.5rem desktop inset */
  .fullbleed-cap{left:1.5rem !important;right:1.5rem !important;bottom:2rem !important}
  .fullbleed-cap h3{font-size:1.9rem !important;line-height:1.15}
  .hero-scroll{right:1.5rem !important;bottom:1.5rem !important}
}

/* ══ MOBILE hero + breathing room (≤767px). Desktop untouched. ══ */
@media (max-width:767px){
  /* Hero content must clear the fixed nav — it was centring behind it */
  .hero{height:auto !important;min-height:82vh !important}
  .hero-content{padding:120px 2rem 3.5rem !important;gap:1.5rem !important}
  .hero-h1{font-size:clamp(2.1rem,8.4vw,2.6rem) !important;line-height:1.12 !important}
  .hero-tag{margin-top:1.25rem !important;margin-bottom:0 !important;align-items:flex-start}
  .hero-tag-line{display:none}
  .hero-tag span{font-size:.64rem !important;letter-spacing:.12em !important;line-height:1.75}
  .hero-desc{font-size:.95rem !important;max-width:none !important}
  .hero-scroll{display:none !important}
  /* Criteria photo: show the whole image instead of a tight crop */
  #criteria img{height:auto !important;max-height:none !important}
  /* Checklists: bullets align to the first line, wrapped items stop colliding */
  .checks{gap:1.4rem !important}
  .check{align-items:flex-start !important;line-height:1.55}
  .check-dot{margin-top:.6em}
  /* A little more air between blocks */
  .ey,.ey-lt{margin-bottom:1.25rem}
  .about-text{padding:3rem 2rem !important}
}

/* ══ Nav collision zone (1101–1240px) ══
   .n-links is position:absolute + centred, so flexbox can't reserve space for it —
   the logo and phone number slide underneath. The links need 755px; centred, their
   left edge only clears the logo above ~1231px. Hand over to the burger until then.
   Below 1101px header.php's own block already does this, so this range is exclusive. */
@media (max-width:1240px) and (min-width:1101px){
  .n-links{display:none !important}
  .n-tel{display:none !important}
  .n-burger{display:flex !important}
}