/* ==========================================================================
   CopyAdsContent.com — clean rebuild design system (v2)
   One hand-written stylesheet. Zero Betheme/WordPress code.
   Tokens measured from the live Betheme rendering (see REBUILD-MAP.md).

   Approach: DESKTOP-FIRST. Base styles target >=1241px. Two overrides:
     @media (max-width:1240px)  — laptop/tablet + mobile menu switch
     @media (max-width:767px)   — phones (content stacks)
   Batch agents: compose pages from the utilities + components below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted fonts (no Google CDN). DM Sans is a variable font: one file
   covers weights 100-900. font-display:swap everywhere.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/cac/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/cac/fonts/dm-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/cac/fonts/dm-serif-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/cac/fonts/poppins-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand palette (measured) */
  --yellow: #FFDD00;
  --ink: #0F0D00;            /* near-black brand ink (headings, button text) */
  --body-color: #4B4A31;     /* body copy olive-brown */
  --black: #000;             /* header / footer-bottom background */
  --cream: #F9F8F3;          /* soft section background */
  --white: #fff;
  --line: #838383;           /* section divider gray */
  --muted: #999;
  --dark-grad-top: #1D1901;  /* dark section gradient upper stop */

  /* type */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-lede: 'Poppins', var(--font-sans);          /* .big / .lead paragraphs */
  --font-serif: 'DM Serif Display', Georgia, serif;  /* homepage statement headings */

  /* layout */
  --container: 1240px;   /* Betheme container (measured 1236 content at 1890w) */
  --gap: 40px;
  --section-pad: 110px;      /* generous section top padding (measured) */
  --radius: 5px;

  /* buttons (measured Betheme vars) */
  --btn-font-size: 20px;
  --btn-pad: 12px 23px;
}

/* --------------------------------------------------------------------------
   3. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--black);   /* every live page measures #000 body copy (2026-07-17); --body-color olive was a bad token */
  background: var(--white);
}
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }
p a, li a { text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
p a:hover, li a:hover { color: var(--ink); }
hr { border: 0; border-top: 3px solid var(--line); margin: 0; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 { font-family: var(--font-sans); color: var(--ink); margin: 0 0 20px; }
h1 { font-size: 70px; line-height: 86px; font-weight: 900; }
h2 { font-size: 36px; line-height: 46px; font-weight: 900; letter-spacing: -1px; }
h3 { font-size: 30px; line-height: 37px; font-weight: 900; letter-spacing: -1px; }
h4 { font-size: 20px; line-height: 26px; font-weight: 900; }
p { margin: 0 0 20px; }
ol, ul { margin: 0 0 20px; padding-left: 24px; }
li { margin-bottom: 8px; }

.display { font-size: 60px; line-height: 66px; font-weight: 900; }           /* hero statement (measured 60/66) */
.serif-display { font-family: var(--font-serif); }                           /* statement headings — live keeps w900 (faux-bold DM Serif, as Betheme renders) */
.kicker { font-size: 18px; line-height: 28px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.kicker-14 { font-size: 14px; line-height: 28px; }                           /* homepage hero eyebrow (measured 14/28 w500) */
/* homepage statement heading sizes (measured on live) */
.stmt-60 { font-size: 60px; line-height: 64px; }
.stmt-50 { font-size: 50px; line-height: 60px; }
.stmt-40 { font-size: 40px; line-height: 46px; }
/* shrink-wrapped label chips (Betheme column-background pills, radius 5, pad 0 10) */
.chip-k { display: inline-block; background: var(--black); color: var(--white); border-radius: var(--radius); padding: 0 10px; font-size: 18px; line-height: 28px; font-weight: 500; }
.chip-lead { display: inline-block; background: var(--yellow); color: var(--black); border-radius: var(--radius); padding: 0 10px; font-family: var(--font-lede); font-size: 22px; line-height: 33px; font-weight: 700; }
.strip-label, .strip-label strong { font-size: 14px; line-height: 28px; font-weight: 600; color: var(--ink); }  /* yellow logo-strip line */
.lede { font-size: 24px; line-height: 32px; }                                /* hero intro paragraph (measured 24/32) */
.big, .lead-copy { font-family: var(--font-lede); font-size: 22px; line-height: 33px; } /* Poppins intro copy */
.micro { font-size: 70%; text-transform: uppercase; letter-spacing: 1px; line-height: 1.6; margin-bottom: 0; }
.micro a { text-decoration: none; border-bottom: 2px solid var(--yellow); }
.small { font-size: 12px; line-height: 20px; }
.small-accent { font-size: 13px; color: var(--muted); }
.gluten { font-size: 70%; line-height: 1.3em; letter-spacing: 1px; }         /* legal footer links */
.gluten a { text-decoration: none; border-bottom: 2px solid currentColor; }
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   5. Layout: container + sections + grids
   Container: 1260px line with padding baked in via width calc. On 1241-1459
   laptops the calc guarantees >=60px side margins (fixes the old Betheme
   "content touches the viewport" bug — see assets/cac/fixes.css history).
   -------------------------------------------------------------------------- */
.container { width: min(100% - 120px, var(--container)); margin-inline: auto; }

section { position: relative; }
.section { padding: var(--section-pad) 0 70px; }
.section-tight { padding: 55px 0 35px; }
.section-mid { padding: 65px 0 60px; }
.section-hero { padding: 75px 0 55px; }
[id] { scroll-margin-top: 90px; }

/* section background utilities */
.bg-cream { background-color: var(--cream); }
.bg-yellow { background-color: var(--yellow); }
.bg-grey { background-color: #e8e8e8; }   /* rates-page form section (measured) */
.bg-grey-2 { background-color: #efefef; } /* services-page value/revenue sections */
.bg-grey-3 { background-color: #dfdfdf; } /* services-page step 1/3 sections */
.bg-yellow-l { background-color: #ffe52c; } /* services-page quote/CTA bands */
.bg-black { background-color: var(--black); }
.bg-dark {  /* measured: gradient #1D1901 -> #0F0D00 */
  background-color: var(--ink);
  background-image: linear-gradient(0deg, var(--dark-grad-top) 0%, var(--ink) 49%);
}
.bg-dark, .bg-black { color: var(--white); }
.bg-dark :is(h1,h2,h3,h4), .bg-black :is(h1,h2,h3,h4) { color: var(--white); }
.bg-dark p a:not(.btn), .bg-black p a:not(.btn) { color: var(--white); }  /* :not(.btn): don't repaint button labels white */

/* section divider borders (measured: 3px #838383) */
.bt { border-top: 3px solid var(--line); }
.bb { border-bottom: 3px solid var(--line); }
.bt-thin { border-top: 2px solid var(--line); }
.bt-yellow { border-top: 3px solid var(--yellow); }

/* grids */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split, .split-32, .split-23, .split-21 { display: grid; gap: 60px; align-items: center; }
.split, .split-32 { grid-template-columns: 3fr 2fr; }
.split-23 { grid-template-columns: 2fr 3fr; }
.split-21 { grid-template-columns: 2fr 1fr; }
.split-faq { display: grid; gap: 60px; grid-template-columns: 1fr 2fr; align-items: start; }
.sticky-aside { position: sticky; top: 100px; }
.narrow { max-width: 83%; }          /* Betheme five-sixth column feel */
.mw-centered { max-width: 900px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Buttons (measured: DM Sans 20px/600, pad 12x23, 2px border, 5px radius)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: var(--btn-font-size); font-weight: 600;
  line-height: 1.2; padding: var(--btn-pad);
  color: var(--ink); background: var(--yellow);
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 2px 3px 0 0 var(--ink);   /* Betheme hard offset shadow — on every button */
  text-decoration: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s;
}
.btn:hover { background: #d3d3d3; color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.btn-ink:hover { background: var(--black); color: var(--white); }
.btn-white { background: var(--white); color: var(--ink); border-color: var(--ink); }     /* light/yellow sections */
.btn-white:hover { background: #d3d3d3; color: var(--ink); }
.btn-dark { background: var(--black); color: #d3d3d3; border-color: var(--ink); }         /* hero "See more info" */
.btn-dark:hover { background: var(--white); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--yellow); } /* dark sections / header CTA */
.btn-ghost:hover { background: var(--white); color: var(--ink); }
.btn-16 { font-size: 16px; }                                                             /* footer-CTA button (measured 16/19.2) */
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-icon { display: inline-block; }
.btn-icon svg { display: block; width: 1em; height: 1em; fill: currentColor; }
@keyframes cac-vibrate {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-6deg); }
  75% { transform: translateX(2px) rotate(6deg); }
}
.btn-icon.vibrate { animation: cac-vibrate .2s linear; }

/* --------------------------------------------------------------------------
   7. Header (default template). Black bar, centered menu, ghost CTA.
   Burger appears ONLY below 1241px — never beside the desktop menu.
   -------------------------------------------------------------------------- */
.site-header { background: var(--black); border-bottom: 1px solid rgba(255,255,255,.08); position: relative; z-index: 50; }
.nav-row {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  width: calc(100% - 100px); margin-inline: auto; padding: 15px 0;  /* live header spans full width, 50px side pad */
}
.brand { display: inline-flex; align-items: center; }
.brand img { width: 161px; height: 60px; }
.site-nav { flex: 1; display: flex; justify-content: center; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }
.nav-menu > li { position: relative; margin: 0; }
.nav-menu a { font-size: 18px; line-height: 27px; font-weight: 400; color: var(--white); text-decoration: none; padding: 8px 20px; display: inline-block; }
.nav-menu a:hover { color: var(--yellow); }
.nav-menu .caret { display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.sub-menu {
  list-style: none; margin: 0; padding: 12px 0; min-width: 230px;
  position: absolute; top: 100%; left: -18px; z-index: 60;
  background: var(--black); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.sub-menu li { margin: 0; }
.sub-menu a { display: block; padding: 8px 20px; }
.has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu, .has-sub.open > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-cta { white-space: nowrap; font-size: 18px; padding: 12px 15px; }  /* measured: 18px label, 12x15 pad, h50 */
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
  width: 44px; height: 40px; position: relative;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ''; display: block; width: 26px; height: 2px; background: var(--white); transition: transform .25s, opacity .25s;
}
.nav-burger span { position: relative; }
.nav-burger span::before { position: absolute; top: -8px; }
.nav-burger span::after { position: absolute; top: 8px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

.sub-toggle { display: none; }  /* reserved: separate submenu toggle button (unused; parent-link tap toggles on mobile) */

/* landing header variant (template 3835 equivalent): white bar, color logo,
   yellow byline pill, NO desktop menu — burger menu below 1241px only */
.site-header-landing { background: var(--white); border-bottom: 1px solid rgba(0,0,0,.1); box-shadow: 10px 0 20px rgba(0,0,0,.1); }
.site-header-landing .brand img { width: 160px; height: 60px; }
.site-header-landing .site-nav { display: none; }
.site-header-landing .nav-burger span, .site-header-landing .nav-burger span::before, .site-header-landing .nav-burger span::after { background: var(--ink); }
.site-header-landing .nav-burger[aria-expanded="true"] span { background: transparent; }
.byline-pill {
  display: inline-block; background: var(--yellow); color: var(--ink);
  border-radius: var(--radius); padding: 2px 10px;
  font-size: 70%; letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
}
.byline-pill:hover { background: #d3d3d3; }

/* --------------------------------------------------------------------------
   8. Footer (default template 3767 equivalent)
   -------------------------------------------------------------------------- */
.footer-cta { background: var(--yellow); padding: 90px 0 45px; color: var(--ink); text-align: center; }
.footer-cta h2 { max-width: 80%; margin-inline: auto; font-size: 38.4px; line-height: 48px; }  /* measured 38.4/48 */
.footer-cta .lede { color: var(--ink); max-width: 80%; margin: 0 auto 35px; font-family: var(--font-lede); font-size: 22px; line-height: 33px; }  /* Poppins on live */
.footer-cta .btn { margin-bottom: 40px; }
.footer-badges { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; font-size: 14px; line-height: 28px; font-weight: 600; color: var(--ink); }

.footer-news { background: var(--black); color: var(--white); padding: 50px 0 35px; border-top: 3px solid var(--yellow); }
.footer-news-grid { display: grid; grid-template-columns: 2fr 2fr; gap: 60px; align-items: center; justify-content: center; }
.footer-news-title { font-family: var(--font-lede); font-size: 22px; line-height: 33px; font-weight: 700; color: var(--white); margin-bottom: 8px; }  /* Poppins 22/33 on live */
.footer-news-sub { font-size: 16px; line-height: 22px; max-width: 400px; }
.footer-news .micro { line-height: 28px; }
.footer-news .micro a { color: var(--yellow); }
.icon-inline { vertical-align: -2px; }

.subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe-form input[type="email"] {
  flex: 1 0 auto; min-width: 220px; font: 400 15px/1.4 var(--font-sans);
  padding: 12px; border: 1px solid #e3e3e3; border-radius: 4px; background: var(--white); color: var(--black);
}
.subscribe-form button {
  font: 700 15px/1.4 var(--font-sans); padding: 12px 24px; border: 0; border-radius: 4px;
  background: var(--yellow); color: var(--black); cursor: pointer;
}
.subscribe-form button:hover { background: var(--white); }
.cac-subscribe-success { color: var(--yellow); }

.footer-links { background: var(--black); color: var(--white); padding: 50px 0 0; }
.footer-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.footer-title { font-size: 12.6px; line-height: 28px; text-transform: uppercase; letter-spacing: 1px; color: var(--line); font-weight: 700; margin: 25px 0 7px; }
.footer-title:first-child { margin-top: 0; }
.footer-title a { color: var(--line); text-decoration: none; border-bottom: 2px solid var(--yellow); }
.footer-links .small { color: var(--line); margin-bottom: 10px; }   /* dashes gray; links stay white (measured) */
.footer-links .small a { color: var(--white); text-decoration: none; }
.footer-links .small a:hover { color: var(--yellow); }

.footer-brand { background: var(--black); color: var(--white); padding: 70px 0 0; }
.footer-brand-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-brand .brand img { width: 134px; height: 50px; }
.ask-ai { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ask-ai img { width: 32px; height: 32px; border-radius: 6px; }
.footer-brand .micro { line-height: 28px; }
.footer-phone a { color: var(--yellow); text-decoration: none; font-size: 32px; line-height: 1.3; font-weight: 700; }  /* measured 32px yellow, no underline */
.footer-social { display: flex; gap: 18px; justify-content: flex-end; margin-top: 14px; }
.footer-social a { color: var(--yellow); display: inline-flex; }
.footer-social a:hover { color: var(--white); }
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }
.footer-legal { background: var(--black); color: var(--line); padding: 50px 0 25px; text-align: center; }  /* gray copyright, centered (measured) */
.footer-legal .micro { line-height: 28px; }
.footer-legal a { color: var(--white); }
.footer-legal .white { border-bottom: 2px solid var(--yellow); text-decoration: none; }
.footer-legal .gluten a { color: var(--yellow); border-bottom-color: transparent; }  /* legal menu yellow; live underline is black-on-black (invisible) */

/* contact footer variant: minimal centered */
.footer-contact { background: var(--black); color: var(--white); padding: 70px 0 0; text-align: center; }
.footer-contact .brand img { width: 134px; height: 50px; }
.footer-contact .footer-social { justify-content: center; }
.footer-contact-inner { max-width: 480px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   9. Components
   -------------------------------------------------------------------------- */
/* icon box (dark-section pain points) */
.icon-box { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 30px; }
.icon-box img { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.icon-box .icon-box-title { font-weight: 700; color: var(--white); font-size: 20px; margin-bottom: 6px; }

/* star row (testimonial) */
.stars { color: var(--yellow); font-size: 28px; letter-spacing: 6px; line-height: 1; margin-bottom: 20px; }
.avatar { width: 140px; height: 140px; border-radius: 50%; }
.testimonial-logo img { width: 210px; height: 50px; }

/* service card (links with icon, move-up hover) */
.service-card {
  display: block; text-decoration: none; color: inherit; padding: 25px 20px;
  border-radius: var(--radius); transition: transform .25s;
}
.service-card:hover { transform: translateY(-6px); }
.service-card .icon { color: var(--ink); margin-bottom: 14px; }
.service-card .icon svg { width: 34px; height: 34px; } /* Lucide stroke icons: color comes from the svg's own fill="none" stroke="currentColor" attrs — don't force fill here */
.service-card .service-title { font-weight: 700; color: var(--ink); font-size: 20px; margin-bottom: 8px; }
.service-card .go { font-weight: 700; color: var(--ink); }
.service-card .go::after { content: ' \2192'; }

/* portfolio card (yellow section) */
.portfolio-card { display: block; text-decoration: none; color: inherit; background: var(--white); border-radius: var(--radius); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.portfolio-card img { display: block; width: 100%; height: auto; }
.portfolio-card .card-body { padding: 15px 8% 5px; }
.portfolio-card .card-tag {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; text-align: center;
  background: var(--black); color: var(--yellow); border-radius: var(--radius); padding: 4px 8px; margin-bottom: 12px;
}
.portfolio-card h4 { font-size: 18px; line-height: 24px; }
.portfolio-card .small { color: var(--body-color); }

/* skip-ahead page menu */
.page-menu-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 0; }
.page-menu-row h3 { margin: 0; font-size: 20px; letter-spacing: 0; }
.page-menu { margin: 0; font-weight: 500; }
.page-menu a { text-decoration: none; border-bottom: 2px solid var(--yellow); color: var(--ink); }
.page-menu .sep { color: var(--line); margin: 0 12px; }

/* lead form (Atelos, former CF7) */
.lead-form { text-align: left; }
.lead-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.lead-form .field-full { grid-column: 1 / -1; }
.lead-form label { display: block; font-size: 70%; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; color: var(--ink); margin-bottom: 18px; }
.lead-form input, .lead-form select, .lead-form textarea {
  display: block; width: 100%; margin-top: 6px;
  font: 400 16px/1.5 var(--font-sans); color: var(--ink);
  background: var(--white); border: 2px solid var(--ink); border-radius: 4px; padding: 12px 14px;
}
.lead-form textarea { min-height: 140px; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--yellow); outline: none; }
.lead-form .form-footer { display: grid; grid-template-columns: 1fr 4fr; gap: 0 30px; align-items: start; }
.lead-form .btn { font-weight: 700; }
.form-msg { display: none; margin: 20px 0 0; padding: 12px; border: 2px solid var(--ink); border-radius: 4px; }

/* FAQ — native details/summary (fixes the old toggle ARIA failures) */
.faq details { border-bottom: 3px solid var(--line); }
.faq details:first-of-type { border-top: 3px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  cursor: pointer; list-style: none; padding: 22px 0;
  font-size: 20px; line-height: 26px; font-weight: 900; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 28px; font-weight: 400; color: var(--line); flex: 0 0 auto; transition: transform .2s; }
.faq details[open] summary::after { content: '\2212'; color: var(--ink); }
.faq summary:hover::after { color: var(--yellow); }
.faq .faq-body { font-size: 16px; line-height: 24px; padding: 0 0 25px; }

/* popup (generic; open via [data-popup-open="id"]) */
.popup-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0,0,0,.55); align-items: center; justify-content: center; padding: 20px;
}
.popup-overlay.open { display: flex; }
.popup-box { background: var(--white); border-radius: var(--radius); max-width: 900px; width: 100%; max-height: 90vh; overflow: auto; position: relative; padding: 40px; }
.popup-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--ink); }

/* reading progress bar (blog posts) */
.progress-bar { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: var(--yellow); z-index: 90; }

/* animated counters */
.counter-number { font-size: 60px; font-weight: 900; color: var(--ink); }

/* hero background icon (measured: CAC icon watermark, right side) */
/* longhand on purpose: the background shorthand was resetting background-color
   and wiping .bg-black on any section that combined the two classes */
.hero-watermark {
  background-image: url('/images/2022/04/CAC-Icon-Background-rev.png');
  background-position: center right;
  background-size: 570px;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   9b. Blog post components — shared by every /blog/ post conversion.
   Structure documented in v2src/POST-TEMPLATE.md (first used on
   /the-rise-of-ai-slop-in-b2b-marketing/). Self-contained incl. breakpoints.
   -------------------------------------------------------------------------- */
.post-hero { padding: 55px 0 40px; }
.post-hero .kicker a { color: var(--yellow); text-decoration: none; }
.post-hero .kicker a:hover { color: var(--white); }
.post-hero h1 { font-size: 48px; line-height: 60px; margin-bottom: 18px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.post-meta a { text-decoration: none; border-bottom: 2px solid var(--yellow); }
.post-meta .dot { color: var(--yellow); }

.breadcrumbs { padding: 14px 0; font-size: 14px; line-height: 1.6; }
.breadcrumbs p { margin: 0; }
.breadcrumbs a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); }
.breadcrumbs .separator { color: var(--line); margin: 0 6px; }

.post-layout { display: grid; grid-template-columns: 1fr 3.2fr 1fr; gap: 50px; align-items: start; padding: 55px 0 70px; }
.post-rail { position: sticky; top: 90px; }

.share-row { display: flex; gap: 12px; align-items: center; margin: 8px 0 30px; }
.share-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%;
  color: var(--ink); transition: background .2s;
}
.share-row a:hover { background: var(--yellow); }
.share-row svg { width: 18px; height: 18px; }

.toc { border: 2px solid var(--ink); border-radius: var(--radius); background: var(--cream); padding: 18px 20px; }
.toc-title { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.toc li { margin-bottom: 10px; }
.toc li:last-child { margin-bottom: 0; }
.toc a { text-decoration: none; }
.toc a:hover { color: var(--ink); border-bottom: 2px solid var(--yellow); }

.post-body h2 { margin-top: 45px; }
.post-body figure { margin: 30px 0; }
.post-body figure img { display: block; border-radius: var(--radius); }

/* end-of-post author box (image left, bio right) */
.author-box { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; border-top: 3px solid var(--line); margin-top: 50px; padding-top: 40px; }
.author-box img { border-radius: var(--radius); }
.author-name { font-size: 20px; font-weight: 900; color: var(--ink); margin: 0 0 12px; }

/* right-rail author card + subscribe */
.author-card { font-size: 14px; line-height: 22px; }
.author-card .avatar-sm { width: 120px; height: 120px; border-radius: 50%; }
.author-card .author-name { margin-top: 14px; }
.author-links { display: flex; gap: 14px; margin: 4px 0 0; padding: 0; }
.author-links a { color: var(--ink); display: inline-flex; }
.author-links a:hover { color: var(--body-color); }
.author-links svg { width: 20px; height: 20px; }
.rail-subscribe { margin-top: 40px; border-top: 3px solid var(--line); padding-top: 25px; font-size: 15px; }
.rail-subscribe .subscribe-form input[type="email"] { min-width: 0; width: 100%; border-color: var(--ink); }
.rail-subscribe .subscribe-form button { width: 100%; border: 2px solid var(--ink); }

/* TL;DR callout (mirror .tldr block — first used on /unclear-website-messaging-is-a-problem/) */
.tldr { padding: 20px 24px; background: var(--cream); border: 1px solid #999; border-radius: 7px; margin-bottom: 30px; }
.tldr p:last-child { margin-bottom: 0; }

/* in-article comparison table (mirror wp-block-table — first used on /unclear-website-messaging-is-a-problem/) */
.post-table { overflow-x: auto; }
.post-table table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
.post-table th, .post-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.post-table thead th { border-bottom: 3px solid var(--ink); color: var(--ink); }

/* article pull-quote (mirror wp-block-quote) */
.post-body blockquote { border-left: 4px solid var(--yellow); margin: 30px 0; padding: 6px 0 6px 24px; font-size: 20px; line-height: 1.6; font-weight: 700; color: var(--ink); }
.post-body blockquote p:last-child { margin-bottom: 0; }

/* small centered image-source caption (mirror has-text-align-center has-small-font-size) */
.post-body figcaption { text-align: center; font-size: 13px; margin-top: 10px; }

@media (max-width: 1240px) {
  .post-hero h1 { font-size: 38px; line-height: 48px; }
  .post-layout { grid-template-columns: 1fr; gap: 40px; }
  .post-rail { position: static; }
  .toc { max-width: 640px; }
}
@media (max-width: 767px) {
  .post-hero h1 { font-size: 30px; line-height: 39px; }
  .post-layout { padding: 40px 0 50px; }
  .author-box { grid-template-columns: 1fr; gap: 20px; }
  .author-box img { max-width: 220px; }
}

/* --------------------------------------------------------------------------
   10. Utilities
   -------------------------------------------------------------------------- */
.only-mobile { display: none; }
.only-desktop { display: block; }
.align-right { text-align: right; }
.mb-0 { margin-bottom: 0; }
.mt-20 { margin-top: 20px; }

/* --------------------------------------------------------------------------
   11. Responsive: laptop/tablet (<=1240px) — mobile menu switch
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .container { width: min(100% - 60px, var(--container)); }
  .nav-row { width: min(100% - 40px, 1400px); }

  /* burger only exists here — never beside the desktop menu */
  .nav-burger { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--black); border-top: 1px solid rgba(255,255,255,.12);
    padding: 20px 30px 30px; z-index: 70; max-height: calc(100vh - 90px); overflow: auto;
  }
  .site-nav.open { display: block; }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu > li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav-menu a { display: block; padding: 14px 0; font-size: 17px; }
  .sub-menu {
    position: static; opacity: 1; visibility: hidden; transform: none; transition: none;
    display: none; border: 0; padding: 0 0 10px 18px; min-width: 0; background: transparent;
  }
  .has-sub.open > .sub-menu { display: block; visibility: visible; }
  .has-sub:hover > .sub-menu:not(.open) { visibility: hidden; } /* no hover-open on touch layout */
  .has-sub.open > .sub-menu a { padding: 10px 0; }
  .nav-cta { font-size: 17px; }

  h1 { font-size: 53px; line-height: 65px; }
  .display { font-size: 48px; line-height: 54px; }
  h2 { font-size: 31px; line-height: 39px; }
  h3 { font-size: 26px; line-height: 31px; }
  .lede { font-size: 21px; line-height: 30px; }
  .big, .lead-copy { font-size: 19px; line-height: 28px; }
  body { font-size: 17px; line-height: 27px; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-brand-grid { grid-template-columns: 1fr 1fr; }
  .footer-social { justify-content: flex-start; }
  .align-right { text-align: left; }
}

/* --------------------------------------------------------------------------
   12. Responsive: phones (<=767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .container { width: min(100% - 48px, var(--container)); }
  .section { padding: 45px 0 35px; }

  h1 { font-size: 42px; line-height: 52px; }
  .display { font-size: 36px; line-height: 42px; }   /* measured mobile h2 36/42 */
  h2 { font-size: 27px; line-height: 35px; }
  h3 { font-size: 21px; line-height: 26px; }
  h4 { font-size: 18px; line-height: 22px; }         /* measured mobile h3 18/22 */
  .kicker { font-size: 14px; }
  .lede { font-size: 20px; line-height: 28px; }      /* measured mobile p 20/28 */
  .big, .lead-copy { font-size: 17px; line-height: 25px; }
  body { font-size: 16px; line-height: 25px; }

  .grid-2, .grid-3, .grid-4,
  .split, .split-32, .split-23, .split-21, .split-faq,
  .footer-news-grid, .footer-links-grid, .footer-brand-grid,
  .lead-form .form-grid, .lead-form .form-footer { grid-template-columns: 1fr; }
  .split, .split-32, .split-23, .split-21, .split-faq { gap: 30px; }
  .sticky-aside { position: static; }
  .narrow { max-width: 100%; }
  .img-first-mobile { order: -1; }        /* wrap-reverse equivalent */

  .brand img { width: 121px; height: 45px; }
  .footer-cta { padding: 55px 0 35px; }
  .footer-cta h2, .footer-cta .lede { max-width: 100%; }
  .footer-badges { flex-direction: column; gap: 10px; }
  .footer-social { flex-wrap: wrap; }
  .hero-watermark { background-image: none; }
  .stars { font-size: 22px; }
  .counter-number { font-size: 42px; }

  .only-mobile { display: block; }
  .only-desktop { display: none; }
  .hide-mobile { display: none !important; }
}

/* --------------------------------------------------------------------------
   9c. Post extras — bio fact-box table + responsive video embed.
   First used on /who-was-marshall-mcluhan/ (mirror had inline .bio-card styles
   and a WP YouTube embed block). Reusable by any post conversion.
   -------------------------------------------------------------------------- */
.bio-card-wrap {
  background: var(--black); border: 1px solid var(--black); border-radius: 7px;
  padding: 1px; margin: 1.5em 0; overflow: hidden; box-shadow: 3px 5px var(--ink);
}
.bio-card { width: 100%; border-collapse: collapse; margin: 0; }
.bio-card td {
  padding: 12px 16px; vertical-align: top; text-align: left;
  font-size: 16px; line-height: 1.5; border: 1px solid #333;
}
.bio-card .bio-label { background: var(--black); color: var(--yellow); font-weight: 500; width: 35%; }
.bio-card .bio-value { background: var(--white); }
.bio-card a { color: #054ada; font-weight: 400; }
@media (max-width: 767px) {
  .bio-card td { padding: 10px 12px; font-size: 15px; }
}

.video-embed { margin: 30px 0; }
.video-embed iframe {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  border: 0; border-radius: var(--radius);
}
.video-embed--169 iframe { aspect-ratio: 16 / 9; } /* 16:9 variant (first used on /website-marketing-bets/) */

/* blog listing hero (measured live: flat black, 55/65 h1 in 984 column) */
.blog-hero { background-image: none; background-color: var(--black); }
.blog-hero h1 { font-size: 55px; line-height: 65px; }
.blog-hero .container > * { max-width: 984px; margin-inline: auto; }
.blog-hero .subscribe-form { justify-content: center; }
.blog-hero .subscribe-form input[type="email"] { max-width: 480px; }

/* post typography (measured live post 2026-07-17): 56/64 h1 in a 984 column,
   16/26 body copy, 36/43.2 h2s */
.post-hero h1 { font-size: 56px; line-height: 64px; max-width: 984px; margin-inline: auto; }
.post-hero .container > * { max-width: 984px; margin-inline: auto; }
.post-body { font-size: 16px; line-height: 26px; }
.post-body h2 { line-height: 43.2px; }

/* post-body separators: the mirror's wp-block-separator is a thin spaced rule,
   not the site's heavy 3px section divider (two Batch-2 agents flagged this) */
.post-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 30px auto;
  max-width: 100px;
}

/* pull-quote attribution + offer-box variant (Batch-3 agent requests) */
.post-body figure figcaption {
  font-size: 14px;
  color: var(--body-color, #4B4A31);
  margin-top: 8px;
}
.post-offer {
  background: var(--cream, #f7f5f0);
  border: 1px solid var(--ink, #0F0D00);
  border-radius: 7px;
  box-shadow: 3px 5px 0 var(--ink, #0F0D00);
  padding: 5%;
}
.post-offer img { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   13. Listing components — post cards + pagination (/blog/, category
   archives, /about/jef-van-de-graaf/). Bare .post-card is transparent and
   sits on dark sections (.bg-dark/.bg-black/.bg-olive → white text, yellow
   tag); /blog/ wraps cards in .portfolio-card (white) which keeps ink text.
   -------------------------------------------------------------------------- */
.bg-olive { background-color: var(--body-color); color: var(--white); } /* measured archive bg #4B4A31 */
.bg-olive :is(h1,h2,h3,h4) { color: var(--white); }
.bg-olive p a { color: var(--white); }

.post-card-grid { row-gap: 50px; }
.post-card-img, .post-card-media { display: block; }
.post-card-img img, .post-card-media img { display: block; width: 100%; }
.post-card-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 14px; font-size: 14px; line-height: 1.5; margin: 14px 0 10px;
}
.post-card-meta a { font-weight: 700; text-decoration: none; }
.post-card hr { border-top-width: 2px; margin: 0 0 14px; }
.post-card-title { font-size: 30px; line-height: 37px; margin-bottom: 14px; }  /* measured live /blog/ */
.post-card-title a { text-decoration: none; color: inherit; }
.post-card-title a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
:is(.bg-dark, .bg-black, .bg-olive) .post-card:not(.portfolio-card) { color: var(--white); }
:is(.bg-dark, .bg-black, .bg-olive) .post-card:not(.portfolio-card) .post-card-tag { color: var(--yellow); }
:is(.bg-dark, .bg-black, .bg-olive) .post-card:not(.portfolio-card) .post-card-tag:hover { color: var(--white); }
.breadcrumbs.bg-dark a { color: var(--white); } /* category breadcrumb bar sits on dark */

.pagination { margin-top: 50px; }
.pagination ul {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 24px; margin: 0; padding: 0; font-weight: 700;
}
.pagination li { margin: 0; }
.pagination a { text-decoration: none; }
.pagination a:hover { color: var(--yellow); }
.pagination .current { color: #666; font-weight: 700; } /* measured mirror pagination color #666666 */
.pagination .pagination-prev, .pagination .pagination-next { display: inline-flex; align-items: center; gap: 6px; }
.pagination .pagination-prev svg, .pagination .pagination-next svg { width: 1em; height: 1em; }

/* blog/category hero extras: centered subscribe + perk badges */
.blog-hero-subscribe { max-width: 560px; margin-inline: auto; justify-content: center; }
.hero-badges, .perk-list { list-style: none; padding: 0; margin: 25px 0 0; font-weight: 700; }
.hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; }
.hero-badges li, .perk-list li { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.hero-badges svg, .perk-list svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.hero-badges svg { color: var(--yellow); }
.perk-list { margin-top: 20px; }
.perk-list svg { color: var(--ink); }

/* dark-section type accents */
.bg-black .kicker, .bg-dark .kicker { color: var(--yellow); }
.bg-dark .counter-number { color: var(--white); }

/* --------------------------------------------------------------------------
   14. About page set (/about/): chip, social buttons, portfolio logo cards,
   testimonial quote cards, 3-truths reveal cards.
   -------------------------------------------------------------------------- */
.chip-dark { display: inline-block; background: var(--ink); color: var(--white); border-radius: var(--radius); padding: 6px 14px; }
.chip-dark svg { width: 1em; height: 1em; color: var(--yellow); }

.social-row { display: flex; gap: 12px; margin: 0 0 20px; }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: var(--ink); color: var(--yellow);
  border-radius: var(--radius); transition: background .2s, color .2s;
}
.social-row a:hover { background: var(--yellow); color: var(--ink); }
.social-row svg { width: 22px; height: 22px; }

.logo-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--white); border-radius: var(--radius); padding: 35px 30px 25px;
  transition: transform .25s, box-shadow .25s;
}
.logo-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.logo-card .logo { height: 87px; width: auto; margin-bottom: 20px; }
.logo-card .card-client { font-size: 13px; letter-spacing: 1px; }

.quote-card .quote-mark { color: var(--yellow); margin-bottom: 12px; }
.quote-card .quote-mark svg { width: 28px; height: 28px; }
.quote-card h3 { font-size: 20px; line-height: 28px; letter-spacing: 0; }
.quote-person { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 22px; }
.quote-person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.quote-person a { color: var(--white); text-decoration: none; border-bottom: 2px solid var(--yellow); }
.quote-person a:hover { color: var(--yellow); }

.reveal-card { position: relative; overflow: hidden; border-radius: var(--radius); }
.reveal-card img { display: block; width: 100%; }
.reveal-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0;
  background: var(--yellow); color: var(--ink); font-weight: 900;
  padding: 3px 12px; border-radius: var(--radius);
}
.reveal-desc {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 24px 20px; color: var(--white);
  background: linear-gradient(180deg, rgba(15,13,0,0) 0%, rgba(15,13,0,.92) 55%);
}
.reveal-desc h3 { color: var(--white); font-size: 22px; line-height: 27px; letter-spacing: 0; margin: 0; }
.reveal-hidden { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; }
.reveal-card:hover .reveal-hidden, .reveal-card:focus .reveal-hidden, .reveal-card:focus-within .reveal-hidden { max-height: 420px; opacity: 1; }
.reveal-cta { color: var(--yellow); font-weight: 900; letter-spacing: 1px; margin: 12px 0 6px; }
@media (max-width: 767px) { /* always expanded on phones */
  .reveal-desc { position: static; background: var(--ink); padding: 18px 20px 20px; }
  .reveal-hidden { max-height: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   15. Portfolio page (/copywriting-portfolio/): small-label hero h1, ink
   highlight chip, 1:3 split, filter bar (behavior = page's own inline
   script), icon circles, card footer row.
   -------------------------------------------------------------------------- */
.portfolio-hero h1 { font-size: 16px; line-height: 20px; margin-bottom: 12px; }
.highlight-ink { background: var(--ink); color: var(--white); padding: 3px 10px; }
.split-13 { display: grid; grid-template-columns: 1fr 3fr; gap: 60px; align-items: center; }
.rates-link a { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); }
.rates-link svg { color: #e8112d; vertical-align: -2px; }
a.icon-circle {  /* after .social-row so the portfolio 35px circles win inside it */
  display: inline-flex; align-items: center; justify-content: center;
  width: 35px; height: 35px; border-radius: 50%;
  background: var(--ink); color: var(--white); transition: background .2s, color .2s;
}
a.icon-circle:hover { background: var(--yellow); color: var(--ink); }
.portfolio-hero h1 { margin-bottom: 14px; }
.portfolio-hero h1 .highlight-ink { font-size: 16px; line-height: 20px; font-weight: 900; letter-spacing: 1px; }  /* live chip is 16px, not h1-scale */
.portfolio-card h4 { font-size: 20px; line-height: 28px; }
.portfolio-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 25px 0; }
.portfolio-filter button {
  font: 700 14px/1.2 var(--font-sans); color: var(--ink);
  background: var(--white); border: 0; border-radius: var(--radius);
  padding: 8px 18px; cursor: pointer; transition: background .2s;
}
.portfolio-filter button:hover, .portfolio-filter button.active { background: var(--yellow); }
.portfolio-card .card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.portfolio-card .card-foot p { margin-bottom: 0; }
@media (max-width: 767px) {
  .split-13 { grid-template-columns: 1fr; gap: 30px; }
}

/* --------------------------------------------------------------------------
   16. Longform-LP set — shared by /copywriting-roi/, /copywriting-methodology/,
   /ai-copywriting/, /30-day-ai-writing-challenge/. White article sheet on the
   fixed japan-bg canvas (mirror section 43aa9e424) + sticky offer rail.
   -------------------------------------------------------------------------- */
.lp-canvas { background: var(--cream) url('/images/2024/11/inspired-by-japan-bg.webp') center / cover no-repeat fixed; }
.lp-layout { display: grid; grid-template-columns: 1.8fr 1fr; gap: 50px; align-items: start; }
.lp-main { min-width: 0; }
.lp-sheet { background: var(--white); border-radius: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 5%; }
.lp-sheet h1 { font-size: 3rem; line-height: 1.1; }
.lp-sheet h2 { font-size: 2rem; line-height: 1.25; margin-top: 60px; }
.lp-sheet h3 { font-size: 1.3rem; line-height: 1.4; letter-spacing: 0; }
.lp-sheet p, .lp-sheet li { font-size: 1rem; line-height: 1.45; }
.lp-sheet :is(p, li) a { font-weight: 600; text-decoration-thickness: 3px; }
.lp-sheet ol { list-style: none; counter-reset: lp-ol; padding-left: 0; }
.lp-sheet ol li { counter-increment: lp-ol; position: relative; padding-left: 42px; margin-bottom: 14px; }
.lp-sheet ol li::before {
  content: counter(lp-ol); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink); border-radius: 50%; font-size: 14px; font-weight: 700;
}
.lp-list { list-style: none; padding-left: 0; }
.lp-list li { position: relative; padding-left: 32px; margin-bottom: 10px; }
.lp-list li svg { position: absolute; left: 0; top: 2px; }
.lp-list-yes li svg { color: #46b077; }
.lp-list-no li svg { color: #e8112d; }
.lp-quote { margin: 30px 0; }
.lp-quote figcaption.big { font-size: 22px; line-height: 33px; margin-top: 10px; }
.lp-author { /* white card: bare text is unreadable on the photo canvas */
  margin-top: 30px; background: var(--white); border-radius: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: 25px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.lp-author-id { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; text-decoration: none; color: inherit; }
.lp-author-id img { grid-row: 1 / 3; width: 125px; height: 125px; border-radius: 50%; }
.lp-author-id .author-name { align-self: end; margin: 0; }
.lp-author-id p:last-child { align-self: start; margin: 0; }
@media (max-width: 1240px) {
  .lp-layout { grid-template-columns: 1fr; }
  .lp-layout .sticky-aside { position: static; }
}
@media (max-width: 767px) {
  .lp-canvas { background-image: none; background-color: var(--cream); }
  .lp-sheet { background: var(--cream); border-radius: 0; box-shadow: none; padding: 0; }
  .lp-sheet h1 { font-size: 2rem; line-height: 1.15; }
  .lp-author { padding: 20px; }
}

/* --------------------------------------------------------------------------
   17. Contact page set (/contact/): dark lead form, checkbox fieldset,
   icon list, dark aside card + dark FAQ/quote variants.
   -------------------------------------------------------------------------- */
.check-group { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.check-group legend { padding: 0; margin-bottom: 14px; font-size: 70%; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; color: var(--ink); }
.check-group label { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; margin-bottom: 10px; }
.lead-form input[type="checkbox"] { display: inline-block; width: auto; margin: 4px 0 0; }
.lead-form p.micro label { font-size: inherit; } /* rates-page newsletter opt-in: avoid 70%-of-70% shrink */
.lead-form-dark label, .lead-form-dark legend { color: var(--white); }
.lead-form-dark .form-msg { border-color: var(--white); }

.icon-list { list-style: none; padding-left: 0; }
.icon-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.icon-list svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

.aside-card-dark { background: #232323; border: 2px solid #585858; border-radius: 7px; padding: 1.5rem 1rem 0; margin-top: 80px; }

.quote-dark { margin: 40px 0 0; }
.quote-dark > svg { width: 28px; height: 28px; color: var(--yellow); }
.quote-dark blockquote { margin: 12px 0 20px; font-size: 18px; line-height: 28px; }
.quote-dark figcaption a { text-decoration: none; color: inherit; }

.faq summary svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.faq-dark summary { color: var(--white); justify-content: flex-start; gap: 12px; }
.faq-dark summary::after { margin-left: auto; }
.faq-dark details, .faq-dark details:first-of-type { border-color: #585858; }
.faq-dark details[open] summary::after { color: var(--white); }

@media (max-width: 767px) {
  .aside-card-dark { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   18. Utilities (batch-agent requests)
   -------------------------------------------------------------------------- */
.bg-grey { background-color: #E8E8E8; }                 /* rates + pricing-category */
mark { background: var(--yellow); color: var(--ink); padding: 2px 6px; }
.icon-maple { width: 1em; height: 1em; vertical-align: -2px; color: #e8112d; }
.hero-linkedin { margin-top: 14px; }
.hero-linkedin a { display: inline-flex; color: var(--yellow); }
.hero-linkedin a:hover { color: var(--white); }
.hero-linkedin svg { width: 40px; height: 40px; }
.bg-yellow :is(p, li) a { text-decoration-color: var(--ink); } /* yellow underline is invisible on yellow */

/* ============================================================
   FINAL BATCH components (landing trio, case studies, forms) —
   consolidated 2026-07-12. Specs from the page conversion agents.
   ============================================================ */

/* case-studies index hero (mirror: dark banner w/ cover photo) */
.banner-hero {
  padding: 75px 0;
  background-color: #000;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  color: var(--white);
}
.banner-hero h1, .banner-hero .kicker { color: var(--white); }
.banner-case { background-image: url('/images/2021/11/Case-Studies-Banner-Fx.jpg'); }
/* full-bleed image-swap pair (case-studies index; Betheme hover_box) */
.swap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 37px; padding: 19px; }
.swap-card { position: relative; display: block; }
.swap-card img { display: block; width: 100%; height: auto; }
.swap-card .swap-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.swap-card:hover .swap-hover, .swap-card:focus .swap-hover { opacity: 1; }
@media (max-width: 767px) { .swap-grid { grid-template-columns: 1fr; } }

/* responsive Google Calendar iframe (fixed-height, not 16:9) */
.calendar-embed {
  position: relative;
  width: 100%;
  min-height: 640px;
  overflow: hidden;
}
.calendar-embed iframe {
  width: 100%;
  min-height: 640px;
  border: 0;
}
@media (max-width: 767px) { .calendar-embed, .calendar-embed iframe { min-height: 720px; } }

/* longform-LP sticky rail CTA card (30-day, landing offers) */
.lp-cta {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.lp-cta-dark {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.lp-cta-dark h2, .lp-cta-dark h3, .lp-cta-dark p { color: var(--white); }

/* dark booking-card frame (landing-page-roast right rail) */
.roast-booking {
  background: var(--ink);
  color: var(--white);
  border-radius: 10px;
  padding: 2rem 1rem;
}
.roast-booking h2, .roast-booking h3, .roast-booking p { color: var(--white); }
@media (max-width: 767px) { .roast-booking { padding: 1rem; } }

/* 3px yellow BOTTOM-border section divider */
.bb-yellow { border-bottom: 3px solid var(--yellow); }

/* pricing card (brand-messaging, landing-page) — .price-card / .pricing-card */
.price-card, .pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.price-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.price-head .small { color: var(--body-color); }

/* hero client-logo row: cap height + center */
.client-logos > * { display: flex; align-items: center; justify-content: center; }
.client-logos img { max-height: 80px; width: auto; }

/* landing hero typewriter caret (respects reduced-motion via markup) */
.typewriter::after {
  content: "|";
  font-weight: 500;
  animation: cac-blink 0.5s linear infinite alternate;
}
@keyframes cac-blink { to { opacity: 0; } }
.tw-link { border-bottom: 3px solid var(--yellow); }

/* subscribe-form: also style the optional name text field (ads, refer) */
.subscribe-form input[type="text"] {
  flex: 1 0 auto; min-width: 180px; font: 400 15px/1.4 var(--font-sans);
  padding: 12px; border: 1px solid #e3e3e3; border-radius: 4px;
  background: var(--white); color: var(--black);
}

/* --------------------------------------------------------------------------
   14. Homepage mirror components (measured against live 2026-07-17 @1890px)
   Homepage body copy is #000 on live (posts keep the olive --body-color).
   -------------------------------------------------------------------------- */
body.home, body.ink { color: var(--black); }  /* live marketing pages use #000 body copy */

/* hero: flat black; copy column inset 100px in the 1240 container; photo
   column 480px flush right, top-aligned; LinkedIn line centered under photo */
.home-hero { padding: 0 0 24px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; align-items: center; }
.hero-copy { padding-left: 100px; max-width: 832px; }
.stmt-70 { font-size: 70px; line-height: 70px; letter-spacing: 1px; }
.hero-lede { font-size: 16px; line-height: 24px; max-width: 606px; margin-bottom: 30px; }
.hero-copy .kicker { margin-bottom: 20px; }
.hero-copy h1 { margin-bottom: 20px; }
.hero-photo { align-self: start; text-align: center; }
.hero-photo img { display: block; }
.hero-photo .hero-linkedin { font-size: 14px; line-height: 19px; margin: 8px 0 0; }
.hero-photo .hero-linkedin a { color: var(--white); }   /* white on the homepage hero (other pages keep yellow) */
.split-11 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.mw-930 { max-width: 930px; margin-inline: auto; }
.icon-red { color: #e8112d; }
.icon-dim { color: #4a4a4a; }   /* "See more info" info-circle (measured) */

/* client-logo strip (logo display sizes come from the width/height attrs) */
.section-strip { padding: 30px 0; }
.logo-row { display: flex; align-items: center; justify-content: center; gap: 77px; flex-wrap: wrap; margin-top: 10px; }

/* white offset-shadow cards (reasons + services grids) */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1110px; margin: 40px auto 0; }
.card-box {
  display: block; background: var(--white); color: var(--black);
  border: 1px solid var(--black); border-radius: var(--radius);
  box-shadow: 3px 5px 0 0 var(--black);
  padding: 25px 25px 18px; font-size: 16px; line-height: 22px;
  text-decoration: none; transition: transform .25s;
}
a.card-box:hover { transform: translateY(-6px); }
.card-box p { color: var(--black); margin-bottom: 15px; }
.card-box .card-title { font-size: 26px; line-height: 32px; font-weight: 900; color: var(--black); margin-bottom: 10px; }
.card-box .micro { margin-bottom: 0; line-height: 22px; }
.card-icon { color: #e8112d; margin-bottom: 15px; }
.card-icon svg { width: auto; height: 22px; fill: currentColor; }
.card-icon .avatar-sm { width: 46px; height: 46px; border-radius: 50%; }
.card-dark { background: var(--black); border-color: var(--yellow); box-shadow: 2px 5px 0 0 var(--yellow); }
.card-dark p, .card-dark .card-title { color: var(--white); }
.card-yellow { background: var(--yellow); }
/* services variant: left-aligned, ink icons, roomier padding (measured pad 35) */
.card-svc { padding: 35px; line-height: 24px; text-align: left; }
.card-svc .card-title { font-size: 24px; line-height: 30px; }
.card-svc .card-icon { color: var(--ink); }
.card-svc .micro { line-height: 24px; }

/* featured testimonial card (Jon Nastor): white, 2px border, 5x5 shadow */
.feat-quote {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: center;
  background: var(--white); border: 2px solid var(--black); border-radius: 7px;
  box-shadow: 5px 5px 0 0 var(--black);
  padding: 20px 20px 20px 10px; max-width: 1050px; margin: 30px auto 40px;
}
.feat-quote-inner { padding-left: 10px; }
.stars-row { display: flex; gap: 12px; color: #ffc000; margin-bottom: 10px; }
.stars-row svg { width: 18px; height: 18px; fill: currentColor; }
.feat-quote h3 { font-size: 30px; line-height: 36px; letter-spacing: 0; max-width: 520px; margin-bottom: 20px; }
.feat-quote .icon-box { margin-bottom: 0; align-items: center; }
.feat-quote .icon-box img { width: 55px; height: 55px; }
.feat-name { font-size: 20px; line-height: 20px; font-weight: 900; color: var(--ink); }
.feat-name .micro { font-size: 10.5px; line-height: 19px; font-weight: 400; }
.feat-video { display: block; }
.feat-video img { display: block; width: 100%; height: auto; border-radius: 3px; }

/* testimonial grid cards (on yellow, no boxes; measured 28/34 quotes, 68px avatars) */
.tstm-grid h3 { font-size: 28px; line-height: 34px; letter-spacing: 0; }
.tstm-grid .icon-box img { width: 68px; height: 68px; }
.tstm-grid .icon-box p { font-size: 14px; line-height: 20px; }

/* homepage blog slider: one full-width slide (1200px image + 30px headline),
   yellow 50x50 arrows flush to the viewport edges, loop, no autoplay */
.hp-slider { position: relative; }
.hp-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hp-slides::-webkit-scrollbar { display: none; }
.hp-slide { flex: 0 0 100%; scroll-snap-align: start; text-align: center; }
.hp-slide-img { display: block; margin: 0 auto; max-width: 1200px; }
.hp-slide-img img { display: block; width: 100%; height: auto; }
.hp-slide-title { margin: 24px 0 0; }
.hp-slide-title a { color: var(--white); font-size: 30px; line-height: 37px; font-weight: 900; text-decoration: none; }
.hp-slide-title a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
.hp-arrow {
  position: absolute; top: 40%; width: 50px; height: 50px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--black); z-index: 5; padding: 0;
}
.hp-arrow svg { width: 18px; height: 18px; fill: currentColor; }
.hp-arrow-prev { left: 0; } .hp-arrow-next { right: 0; }
.hp-explore { text-align: center; margin: 56px 0 0; }

/* homepage blog slider section */
.section-blog { padding: 90px 0; }

/* --------------------------------------------------------------------------
   15. About page mirror components (measured live 2026-07-17 @1890px)
   -------------------------------------------------------------------------- */
.btn-green { background: #1c8751; color: #fcfefb; border-color: var(--ink); }  /* "Wanna See More?" */
.btn-green:hover { background: var(--white); color: var(--ink); }
.chip-olive { display: inline-block; background: var(--body-color); color: var(--white); border-radius: var(--radius); padding: 0 10px; font-size: 15px; line-height: 26px; font-weight: 700; }
.kicker-sm { font-size: 15px; line-height: 26px; font-weight: 700; }
.bg-dark .kicker-sm, .bg-black .kicker-sm { color: var(--white); }
.mw-816 { max-width: 816px; }
.mw-732 { max-width: 732px; }
.fw-700, .fw-700 strong { font-weight: 700; }

/* black stats band: 50px w400 white counters, 15/20 gray labels */
.stats-grid p { font-size: 15px; line-height: 20px; color: #969696; }
.stats-grid .counter-number { font-size: 50px; line-height: 50px; font-weight: 400; color: var(--white); }

/* portfolio logo-cards: 13/19 body, 14/25 client line (measured) */
.logo-card h4 { font-size: 20px; line-height: 28px; }
.logo-card p { font-size: 13px; line-height: 19px; color: var(--ink); }
.logo-card .card-client { font-size: 14px; line-height: 25px; }

/* team testimonial quotes: 28/34 default, 18/22 short variant; 14/20 roles,
   66%-white company links (measured) */
.quote-card h3 { font-size: 28px; line-height: 34px; }
.quote-card h3.quote-sm { font-size: 18px; line-height: 22px; }
.quote-person { font-size: 14px; line-height: 20px; }
.quote-person a { color: rgba(255,255,255,.66); }

/* reveal cards: 18/22 titles, yellow TRUTH/LIE chip, 13px hidden copy */
.reveal-desc h3 { font-size: 18px; line-height: 22px; }
.reveal-cta { display: inline-block; background: var(--yellow); color: var(--ink); font-size: 13px; line-height: 19px; font-weight: 700; letter-spacing: 1px; padding: 0 6px; border-radius: 3px; }
.reveal-hidden { font-size: 13px; }

/* --------------------------------------------------------------------------
   16. Contact page mirror (measured live 2026-07-17 @1890px)
   -------------------------------------------------------------------------- */
.lh-tight { line-height: 1; }
.text-red { color: #e8112d; }
.stmt-47 { font-size: 46.8px; line-height: 1.4; font-weight: 700; }  /* rates form h2 (measured 46.8/65.52 w700) */
.fs-10 { font-size: 10px; line-height: 15px; }
.fs-30 { font-size: 30px; line-height: 37px; }    /* services-page section headings render at h3 scale */
.fs-20 { font-size: 20px; line-height: 35px; }    /* services-page black band note */
.mark-l { background: #ffe52c; font-weight: 700; }
/* photo hero (services page): full-bleed cover photo, white copy */
.hero-photo-bg {
  background-image: url('/images/2021/11/Professional-Copywriter-Page-Compress.jpg');
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
  color: var(--white); padding: 130px 0;
}
.hero-photo-bg h1, .hero-photo-bg h2 { color: var(--white); }
/* light form submit (measured: 16px, #FFE52C, r10, 1x4 offset shadow, 1px border) */
.btn-form { font-size: 16px; background: #ffe52c; color: #000; border: 1px solid #000; border-radius: 10px; box-shadow: 1px 4px 0 0 var(--ink); }

/* --------------------------------------------------------------------------
   17. Longform article pages (methodology / roi / ai-copywriting) — these
   classes were referenced by the Batch-4/5 conversions but never landed in
   CSS. Measured on live /copywriting-methodology/ 2026-07-17 @1890px:
   white card (r3, soft 17px shadow) with a 622px text column, 420px sticky
   rail of CTA cards, post-scale typography (h1 48/1.1, h2 32/1.2, h3 20.8/1.4,
   h4 19.2/1.3, body 18/28 #000), black step badges with yellow 14.56px text.
   -------------------------------------------------------------------------- */
.section-longform { padding: 60px 0; }
.bg-japan-fixed {
  background-image: url('/images/2024/11/inspired-by-japan-bg.webp');
  background-size: cover; background-position: center; background-attachment: fixed;
}
.longform-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 38px; align-items: start; }
.article-card { background: var(--white); border-radius: 3px; box-shadow: 0 0 17px rgba(0,0,0,.043); padding: 50px 48px; }
.longform-article { max-width: 622px; margin-inline: auto; color: var(--black); }
.longform-article p, .longform-article li { font-size: 18px; line-height: 28px; color: var(--black); }
.longform-article h1 { font-size: 48px; line-height: 1.1; margin-bottom: 20px; }
.longform-article h2 { font-size: 32px; line-height: 1.2; margin: 34px 0 20px; }
.longform-article h3 { font-size: 20.8px; line-height: 1.4; letter-spacing: 0; margin: 30px 0 16px; }
.longform-article h4 { font-size: 19.2px; line-height: 1.3; font-weight: 700; margin: 24px 0 12px; }
.longform-article img { height: auto; }
.step-badge { display: inline-block; background: var(--black); color: var(--yellow); font-size: 14.56px; line-height: 1.4; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 1px 7px; border-radius: 3px; }
.step-table { margin: 20px 0; }
.li-ic { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.icon-list { list-style: none; padding-left: 0; }
.icon-list li { margin-bottom: 10px; }
.icon-list svg { vertical-align: -4px; margin-right: 6px; }

/* author signature block */
.author-sig { margin-top: 40px; border-top: 3px solid var(--line); padding-top: 24px; }
.author-sig-name { font-size: 20px; font-weight: 900; color: var(--ink); margin-bottom: 2px; }
.author-sig-role { font-size: 14px; color: var(--body-color); margin-bottom: 10px; }
.author-sig-links a { color: var(--ink); display: inline-flex; margin-right: 12px; }

/* rail CTA cards (white + dark variants) */
.longform-rail { display: grid; gap: 30px; align-content: start; }
.cta-card { background: var(--white); border-radius: 3px; box-shadow: 0 0 17px rgba(0,0,0,.043); padding: 30px 30px 21px; }
.cta-card-title { font-size: 24px; line-height: 30px; letter-spacing: 0; }
.cta-card .btn { font-size: 18px; }
.cta-card-dark { background: var(--black); color: var(--white); }
.cta-card-dark .cta-card-title, .cta-card-dark p { color: var(--white); }
.btn-paper { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-paper:hover { background: #d3d3d3; color: var(--ink); }
.btn-pop-yellow { box-shadow: 3px 5px 0 0 var(--yellow); }
.btn-pop-ink { box-shadow: 2px 3px 0 0 var(--ink); }

@media (max-width: 1240px) {
  .longform-layout { grid-template-columns: 1fr; }
  .bg-japan-fixed { background-attachment: scroll; }
}
@media (max-width: 767px) {
  .article-card { padding: 30px 20px; }
  .longform-article h1 { font-size: 36px; }
  .longform-article h2 { font-size: 27px; }
}

/* --------------------------------------------------------------------------
   18. Orphaned conversion classes — referenced by page conversions but never
   defined (found by class audit 2026-07-17).
   -------------------------------------------------------------------------- */
/* colored list icons (longform checklists) */
.li-ic { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.li-ic-x, .icon-x { color: #e8112d; }
.li-ic-check { color: #1c8751; }
.li-ic-warn { color: #e8a012; }

/* listing "Continue reading..." link */
.post-card-more a { text-decoration: none; border-bottom: 2px solid var(--yellow); color: inherit; }
.post-card-more a:hover { color: var(--ink); }

/* post pull quotes */
.post-quote, .longform-quote {
  border-left: 4px solid var(--yellow); margin: 30px 0; padding: 6px 0 6px 24px;
  font-size: 20px; line-height: 1.6; font-weight: 700; color: var(--ink);
}

/* books-post entry (cover + copy) */
.book-block { margin: 30px 0; align-items: start; }
.book-block figure { margin: 0; }
.book-block img { height: auto; }

/* Betheme dual heading (micro label + h2) */
.dual-heading { margin-top: 40px; }
.dual-heading .micro { margin-bottom: 4px; color: var(--muted); }
.dual-heading h2 { margin-top: 0; }

/* brand-messaging price line */
.price { display: flex; align-items: baseline; gap: 4px; color: var(--ink); margin: 6px 0 14px; }
.price .currency { font-size: 22px; font-weight: 700; }
.price .amount { font-size: 48px; line-height: 1; font-weight: 900; }
.price .period { font-size: 14px; color: var(--muted); margin-left: 4px; }
.price-lead { font-size: 15px; line-height: 22px; }

/* dark inline mark (schedule-page disclaimer) */
.mark-dark { background: var(--ink); color: var(--white); }

/* Cal.com inline embed shell */
.cal-inline { min-height: 640px; width: 100%; overflow: auto; }

/* misc */
.archive-empty { padding: 30px 0 60px; }
.consult-cta { margin-top: 20px; }
.lp-video { margin: 24px 0; }
.lp-video video, .lp-video iframe { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.ai-fail { color: #e8112d; font-weight: 700; }
.fw-900, .fw-900 strong { font-weight: 900; }
.mw-388 { max-width: 388px; }
.icon-list a { font-weight: 500; }

/* dark lead form: yellow 18/28 labels, white 18/28 checkbox rows, 15px inputs
   (1px border, r5, pad 10), #FFE52C submit (r10, 1x4 offset shadow) */
.lead-form-dark label { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--yellow); text-transform: none; letter-spacing: 0; }
.lead-form-dark .check-group legend { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--yellow); text-transform: none; letter-spacing: 0; }
.lead-form-dark .check-group label { color: var(--white); font-weight: 500; font-size: 18px; line-height: 28px; }
.lead-form-dark input, .lead-form-dark select, .lead-form-dark textarea { font-size: 15px; border-width: 1px; border-radius: 5px; padding: 10px; }
.lead-form-dark button[type="submit"], .lead-form-dark [type="submit"] {
  font-size: 16px; background: #ffe52c; color: #000;
  border: 1px solid #000; border-radius: 10px; box-shadow: 1px 4px 0 0 var(--ink);
}
.quote-dark .icon-box-title { color: var(--yellow); font-size: 18px; line-height: 28px; font-weight: 700; }
.quote-dark .small { font-size: 14px; line-height: 20px; }
.aside-card-dark h2 { font-size: 30px; line-height: 37px; }
.faq-dark summary { font-family: var(--font-lede); font-size: 22px; line-height: 33px; font-weight: 500; }
.footer-contact .footer-about { font-size: 16px; line-height: 24px; }
.footer-contact .footer-phone a { font-size: 24px; }

/* homepage FAQ: single centered 732px column, borderless 18/28 rows with a
   chevron toggle (measured Betheme "toggle" element; other pages' .faq keeps
   the bordered accordion until their live pass says otherwise) */
.faq-wrap { max-width: 732px; margin-inline: auto; }
.faq-wrap h2 { text-align: center; }
.faq-wrap .faq details, .faq-wrap .faq details:first-of-type { border: 0; }
.faq-wrap .faq summary { padding: 5px 0; font-size: 18px; line-height: 28px; font-weight: 700; }
.faq-wrap .faq summary::after {
  content: ''; width: 14px; height: 14px; background: currentColor; color: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s;
}
.faq-wrap .faq details[open] summary::after { content: ''; transform: rotate(180deg); }
.faq-wrap .faq .faq-body, .faq-wrap .faq .faq-body p { font-size: 18px; line-height: 28px; }
.faq-wrap .faq .faq-body { padding: 0 0 20px; }

@media (max-width: 1240px) {
  .hero-copy { padding-left: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .stmt-70 { font-size: 53px; line-height: 56px; }
  .stmt-60 { font-size: 48px; line-height: 54px; }
  .stmt-50 { font-size: 42px; line-height: 50px; }
  .stmt-40 { font-size: 34px; line-height: 42px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-quote { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .stmt-70 { font-size: 42px; line-height: 46px; }
  .stmt-60 { font-size: 36px; line-height: 42px; }
  .stmt-50 { font-size: 32px; line-height: 38px; }
  .stmt-40 { font-size: 28px; line-height: 34px; }
  .hero-photo { order: 1; }
  .cards-grid { grid-template-columns: 1fr; }
  .logo-row { gap: 30px; }
  .hp-slide-title a { font-size: 22px; line-height: 28px; }
  .hp-arrow { display: none; }
  .chip-lead { font-size: 18px; line-height: 28px; }
}

/* ============================================================
   JEF REVIEW FIXES — 2026-07-12 (round 1)
   ============================================================ */

/* 1. eyebrow chip: uppercase + breathing room above the h2
   (markup carries .mb-0, so the override needs !important) */
.chip-k { text-transform: uppercase; }
p:has(> .chip-k) { margin-bottom: 18px !important; }

/* 2. homepage hero LinkedIn link — mirror used a small icon-font glyph
   beside plain text, not a 40px badge with an underline */
.hero-linkedin a { text-decoration: none; align-items: center; gap: 8px; }
.hero-linkedin svg { width: 16px; height: 16px; }

/* 3. blog carousel: show 3 posts at a time (was 1 full-width slide) */
@media (min-width: 768px)  { .hp-slide { flex: 0 0 50%; } }
@media (min-width: 1024px) { .hp-slide { flex: 0 0 33.3333%; } }
.hp-slide { padding: 0 12px; }
@media (min-width: 768px) {
  .hp-slide-title a { font-size: 20px; line-height: 26px; }
}

/* 4. FAQs: all open, small leading number, no accordion chrome,
   BAOB-red links (#e8112d) so they pop */
.faq { counter-reset: cac-faq; }
.faq details { counter-increment: cac-faq; }
.faq summary { align-items: baseline; justify-content: flex-start; gap: 14px; }
.faq summary::after { content: none; }          /* kill the +/- marker */
.faq summary::before {
  content: counter(cac-faq);
  flex: 0 0 auto;
  font-size: 15px; font-weight: 500; color: var(--muted, #838383);
}
.faq .faq-body { padding-left: 29px; }          /* align body under the question */
.faq .faq-body a, .faq p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #e8112d;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.faq .faq-body a:hover, .faq p a:hover { color: #e8112d; }

/* 5. portfolio filter buttons — MEASURED off the live original:
   2px ink border + Betheme's 2px 3px hard shadow, transparent fill,
   yellow only when active/hover. (An earlier pass wrongly stripped the
   border; this restores the real thing.) */
.portfolio-filter button {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: 2px 3px 0 0 var(--ink);
  margin: 7px;
  padding: 10px 15px;
  font: 700 14px/1.2 var(--font-sans);
  cursor: pointer;
  transition: background .2s;
}
.portfolio-filter button:hover,
.portfolio-filter button.active { background: var(--yellow); }

/* 6. portfolio social icons — mirror: 35px ink circle, white glyph ~15-18px
   (the generic .social-row 22px svg was oversizing them) */
.social-row a.icon-circle svg { width: 16px; height: 16px; }
.social-row:has(a.icon-circle) { gap: 8px; }
/* the [open] marker rule outranks .faq summary::after on specificity — kill it too */
.faq details[open] summary::after { content: none; }

/* ============================================================
   JEF REVIEW FIXES — round 2 (footer)
   ============================================================ */

/* voicemail column: centered, and the yellow number goes white on hover */
.footer-voicemail { text-align: center; }
.footer-phone a { transition: color .2s; }
.footer-phone a:hover { color: var(--white); }

/* "Feeling social?" icons — mirror: white glyph in a bordered box,
   transparent fill (not solid yellow glyphs) */
.footer-social { gap: 10px; }
.footer-social a {
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  color: var(--white);
  background: transparent;
  border: 2px solid var(--white);
  border-radius: 5px;
  transition: background .2s, color .2s, border-color .2s;
}
.footer-social a:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}
.footer-social svg { width: 15px; height: 15px; }

/* portfolio social icons — measured off the live original:
   35px ink circle, NO border, white glyph; LinkedIn/mail 15px, WhatsApp 18px */
.social-row a.icon-circle { border: 0; }
.social-row a.icon-circle svg { width: 15px; height: 15px; }
.social-row a.icon-circle[href*="wa.me"] svg,
.social-row a.icon-circle[href*="whatsapp"] svg { width: 18px; height: 18px; }

/* ============================================================
   JEF REVIEW FIXES — round 3 (portfolio hero)
   "Nothing is squared on this site" — the eyebrow chip had no radius.
   ============================================================ */
.highlight-ink { border-radius: var(--radius); }
.portfolio-hero h1 .highlight-ink { font-size: 13px; line-height: 18px; letter-spacing: 1px; }

/* hero button row (replaces the old micro "Click here…" text link) */
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 0; }

/* ============================================================
   JEF REVIEW FIXES — round 4 (contact page)
   ============================================================ */

/* The "truth about hiring…" card shares the .faq component but is NOT an FAQ,
   so it must not inherit the numbered counter or the section rules that the
   real FAQ blocks use. */
.faq-plain { counter-reset: none; }
.faq-plain details { counter-increment: none; border: 0; }
.faq-plain details:first-of-type { border-top: 0; }
.faq-plain summary::before { content: none; }
.faq-plain summary { gap: 12px; }
/* collapsible again: restore the +/- affordance this card needs */
.faq-plain summary::after { content: '+'; font-size: 24px; font-weight: 400; margin-left: auto; }
.faq-plain details[open] summary::after { content: '\2212'; }

/* aside sits at the top of the section, not pushed down */
.aside-card-dark { align-self: start; margin-top: 0; }

/* Jef's photo: circle, white fill, black border */
.img-circle-ink {
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--ink);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* top-aligned split: columns start at the top so an expanding accordion in
   one column never pushes the other column down (contact form + aside) */
.split-top { align-items: start; }

/* ============================================================
   JEF REVIEW FIXES — 2026-08-06 (mobile polish: homepage + footer)
   ============================================================ */
@media (max-width: 767px) {
  /* breathing room between the header and the hero eyebrow */
  .home-hero .hero-copy { padding-top: 28px; }

  /* hero CTA buttons stack full-width */
  .home-hero .only-mobile .btn { display: flex; justify-content: center; width: 100%; }
  .home-hero .only-mobile .btn + .btn { margin-top: 12px; }

  /* "My name is jef." chip: full-width block instead of an awkwardly
     wrapping inline chip */
  .chip-wide { display: block; text-align: center; white-space: normal; padding: 4px 12px; }

  /* split-11 was missing from the single-column collapse list — the
     Channing Tatum section rendered as two squeezed columns on phones */
  .split-11 { grid-template-columns: 1fr; gap: 30px; }

  /* no Work with Jef CTA in the phone header — burger menu only */
  .site-header .nav-cta { display: none; }

  /* footer brand row: logo, ask-AI icons, voicemail, and socials centered.
     .align-right flips to text-align:left at <=1240px, and that explicit rule
     beats the inherited centering — override it directly */
  .footer-brand-grid { text-align: center; }
  .footer-brand-grid .align-right { text-align: center; }
  .footer-brand-grid .ask-ai { justify-content: center; }
  .footer-brand-grid .footer-social { justify-content: center; }
}