/* ============================================================
   studio-chrome.css reskins the shared chrome (header, footer,
   typography, accent) of the content/SEO pages to match the new
   homepage design. Loaded AFTER styles.css so it overrides.
   Content sections keep their existing light layout; only the
   brand surface (type, accent, header, footer) is refreshed.
   ============================================================ */

@font-face{font-family:"Bricolage";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/bg800.woff2) format("woff2")}
@font-face{font-family:"Bricolage";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/bg500.woff2) format("woff2")}
@font-face{font-family:"InterV";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter400.woff2) format("woff2")}
@font-face{font-family:"InterV";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter600.woff2) format("woff2")}
@font-face{font-family:"Heebo";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/hb-he-800.woff2) format("woff2");unicode-range:U+0590-05FF,U+200F,U+FB1D-FB4F}
@font-face{font-family:"Heebo";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/hb-he-600.woff2) format("woff2");unicode-range:U+0590-05FF,U+200F,U+FB1D-FB4F}
@font-face{font-family:"Heebo";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hb-he-400.woff2) format("woff2");unicode-range:U+0590-05FF,U+200F,U+FB1D-FB4F}

/* ---- accent → new coral brand (old CSS reads these vars) ---- */
:root{
  --blue:#e0552a;
  --blue-soft:#ffe9e1;
  --agency-border-hover:rgba(224,85,42,.34);
  --focus-ring:0 0 0 4px rgba(224,85,42,.22);
}

/* ---- typography ---- */
body{font-family:"InterV",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,.eyebrow,.brand{font-family:"Bricolage",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.03em}
h1{letter-spacing:-.04em}
html[dir="rtl"] body{font-family:"Heebo",ui-sans-serif,system-ui,sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .eyebrow{font-family:"Heebo",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em}

/* ---- header → dark glass, matching the homepage ---- */
.site-header{background:rgba(10,10,14,.82)!important;backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.09)!important;color:#f5f4f0!important}
.site-header.is-scrolled{background:rgba(10,10,14,.9)!important;border-bottom-color:rgba(255,255,255,.1)!important;box-shadow:0 10px 30px rgba(0,0,0,.4)!important}
.site-header .brand-logo{filter:brightness(0) invert(1);opacity:.96}
.site-header .nav-links a{color:rgba(245,244,240,.82)!important;font-weight:600}
.site-header .nav-links a:hover,.site-header .nav-links a:focus-visible,.site-header .nav-links a[aria-current]{color:#ff7a4d!important}
.site-header .nav-links a::after{background:#ff7a4d!important}
.site-header .header-cta{color:#f5f4f0!important;border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.06)!important}
.site-header .review-link{background:#ff6a3d!important;border-color:#ff6a3d!important;color:#1a0d06!important}
.site-header .review-link:hover,.site-header .review-link:focus-visible{background:#ff8055!important;border-color:#ff8055!important;color:#1a0d06!important}
.site-header .flag-switch{border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.06)!important}
.site-header .menu-toggle{border-color:rgba(255,255,255,.24)!important;background:rgba(255,255,255,.04)!important}
.site-header .menu-toggle span{background:#f5f4f0!important}

/* ---- primary buttons pick up coral ---- */
.button.primary{background:#ff6a3d;border-color:#ff6a3d;color:#1a0d06}
.button.primary:hover,.button.primary:focus-visible{background:#ff8055;border-color:#ff8055;color:#1a0d06}

/* ---- footer → deep ink, matching the homepage ---- */
.site-footer{background:#0a0a0e!important;color:rgba(245,244,240,.66)!important;border-top:1px solid rgba(255,255,255,.08)!important}
.site-footer .footer-brand p,.site-footer p{color:rgba(245,244,240,.62)!important}
.site-footer h2{color:#f5f4f0!important;font-family:"InterV",sans-serif;letter-spacing:.06em}
.site-footer a{color:rgba(245,244,240,.72)!important}
.site-footer a:hover,.site-footer a:focus-visible{color:#ff7a4d!important}
.site-footer .footer-logo .brand-logo{filter:brightness(0) invert(1);opacity:.96}
.site-footer .footer-cta{background:#ff6a3d!important;border-color:#ff6a3d!important;color:#1a0d06!important}
.site-footer .footer-cta:hover{background:#ff8055!important;border-color:#ff8055!important}

/* keep selection + focus on-brand */
::selection{background:#ff6a3d;color:#1a0d06}

/* ============================================================
   BODY ELEVATION PASS
   Lifts the generated content pages from flat template to the
   studio look. CSS-only, applies to every generated SEO/content
   page (the wholesale-replaced home/work/contact pages don't load
   this file). Three moves: warm the leftover cool accents, give
   the hero a branded gradient wash, and elevate the cards.
   ============================================================ */

/* ---- 1. warm the leftover cool accents (teal/blue → coral/amber) ---- */
:root{
  --mint:#ff8a5c;              /* was teal #67c7b2, now warm coral-peach */
  --citrus:#f4a63d;            /* amber, nudged warmer */
  --agency-border-hover:rgba(224,85,42,.32);
}

/* ---- 2. hero: branded gradient wash instead of flat cream ---- */
.seo-hero{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(88% 120% at 90% -12%, rgba(255,106,61,.16), transparent 58%),
    radial-gradient(72% 96% at 4% 116%, rgba(138,118,255,.13), transparent 60%),
    radial-gradient(60% 80% at 62% 120%, rgba(244,166,61,.10), transparent 62%),
    linear-gradient(180deg,#fbf7f2,#f4efe7)!important;
  overflow:hidden;
}
.seo-hero::before{                 /* thin brand rule across the top */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:-1;
  background:linear-gradient(90deg,#ff6a3d,#f4a63d 42%,#8a76ff);
}
html[dir="rtl"] .seo-hero::before{background:linear-gradient(270deg,#ff6a3d,#f4a63d 42%,#8a76ff)}
.seo-hero .eyebrow{color:#d94e22!important}

/* section eyebrows pick up the coral accent for consistency */
.section-heading .eyebrow,.local-proof-copy .eyebrow,
.service-decision-copy .eyebrow{color:#d94e22!important}

/* ---- 3. unified premium card treatment ---- */
.local-proof-card,
.depth-grid article,
.faq-grid details,
.service-decision-step,
.planning-card-link,
.sitemap-panel,
.seo-panel{
  border-radius:16px!important;
  border-color:rgba(6,19,29,.07)!important;
  box-shadow:0 1px 2px rgba(6,19,29,.04),0 20px 46px rgba(6,19,29,.07)!important;
}
.local-proof-card:hover,.local-proof-card:focus-within,
.depth-grid article:hover,.depth-grid article:focus-within,
.faq-grid details:hover,.faq-grid details:focus-within,
.service-decision-step:hover,.service-decision-step:focus-within,
.planning-card-link:hover,.planning-card-link:focus-within,
.sitemap-panel:hover,.sitemap-panel:focus-within{
  border-color:rgba(224,85,42,.34)!important;
  box-shadow:0 1px 2px rgba(6,19,29,.05),0 26px 58px rgba(224,85,42,.12)!important;
  transform:translateY(-4px)!important;
}

/* warm the corner watermark + card badge pills off the old blue/mint */
.depth-grid article::after,.faq-grid details::after{color:rgba(224,85,42,.08)!important}
.local-proof-card span{background:#ffe1d6!important;color:#8a2f14!important}

/* ---- 4. warm the cold-blue section tints ---- */
.service-depth{background:linear-gradient(180deg,#fff5f0,#ffe8de)!important}
.local-proof-signals{background:linear-gradient(135deg,#faf6f0,#fff)!important}
.local-proof-card:first-child{background:linear-gradient(180deg,#fff3ec,#fff)!important}
.service-decision-path{background:linear-gradient(180deg,#fff,#fff4ee)!important}
.service-decision-summary{background:#fff4ee!important;border-color:rgba(224,85,42,.16)!important}

/* decision-path "chips" and step numbers to coral */
.service-decision-summary [class*="chip"],
.service-decision-summary .tag{background:#ffe1d6!important;color:#8a2f14!important}

/* brand callout bar (ink → blue) rewarmed to ink → coral.
   Device-mockup previews keep their varied demo colours on purpose. */
.fit-strip{background:linear-gradient(135deg,#141019,#e0552a)!important}