/* =====================================================================
   TAG Business Solutions — Shared Design System
   This file is linked by every page (via includes/header.php) so new
   pages automatically inherit the same colors, spacing, and type scale.
   ===================================================================== */

:root{
  /* ---- Color ---- */
  --ink:#16191C;
  --ink-soft:#3A3F45;
  --paper:#F7F4EE;
  --paper-deep:#EFE8D9;
  --brass:#A9803D;
  --brass-text:#7A5A26;
  --brass-light:#C8A25E;
  --slate:#34495C;
  --slate-light:#5B7286;
  --border-on-paper: rgba(22,25,28,0.16);
  --border-on-paper-strong: rgba(22,25,28,0.28);
  --border-on-ink: rgba(247,244,238,0.18);
  --border-on-ink-strong: rgba(200,162,94,0.55);

  /* ---- Layout ---- */
  --max: 1180px;
  --header-height: 76px;

  /* ---- Spacing scale ----
     Use these for any new margin/padding/gap so future pages match the
     established rhythm. Pick the closest step rather than a one-off px value. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 76px;

  /* ---- Type scale ----
     Font sizes across the whole site are drawn from this list. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 36px;
  --text-5xl: 44px;
  --text-6xl: 52px;

  /* ---- Shared rhythm tokens ----
     Named shortcuts for the shell every page reuses. */
  --wrap-padding-x: var(--space-7);   /* 32px */
  --wrap-padding-x-sm: var(--space-5); /* 20px */
  --section-padding-y: var(--space-10); /* 56px */
  --label-gap: 14px; /* space between a small label (eyebrow/number) and the heading/text that follows it */
}

/* ---------- Reset / base elements ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Hanken Grotesk', Arial, sans-serif;
  font-size:var(--text-lg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Libre Caslon Text', Georgia, serif;
  font-weight:400;
  line-height:1.15;
  margin:0;
  text-wrap:balance;
}
p{margin:0;}
a{color:inherit;}
img,svg{max-width:100%;display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--wrap-padding-x);}
@media (max-width:640px){ .wrap{padding:0 var(--wrap-padding-x-sm);} }

/* Visually hides the reusable SVG symbol sprite without removing it from the DOM */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.eyebrow{
  font-size:var(--text-xs); letter-spacing:0.16em; text-transform:uppercase;
  font-weight:600; color:var(--brass-text);
}
.contact-info .eyebrow{ color:var(--brass-light); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; font-size:var(--text-sm); letter-spacing:0.12em; text-transform:uppercase;
  font-weight:600; text-decoration:none; border-radius:2px; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  border:1px solid transparent;
}
/* Only the short, fixed header CTA needs to be kept on one line (it broke
   into two lines in the cramped nav bar); longer sentence-style CTAs
   elsewhere (hero buttons, banners) should still wrap normally on narrow
   screens rather than force the page to scroll horizontally. */
.nav-panel-cta{ white-space:nowrap; }
.btn-primary{ background:var(--ink); color:var(--paper); border-color:var(--brass); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(22,25,28,0.22); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border-on-paper-strong); }
.btn-ghost:hover{ background:var(--paper-deep); }
.btn-ghost-dark{ background:transparent; color:var(--paper); border-color:var(--border-on-ink-strong); }
.btn-ghost-dark:hover{ background:rgba(247,244,238,0.08); }
.btn-submit{ width:100%; justify-content:center; border-color:var(--brass-light); }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(239,232,217,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-on-paper-strong);
  box-shadow:0 1px 0 rgba(22,25,28,0.04), 0 8px 20px rgba(22,25,28,0.05);
}
header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); height:var(--header-height); position:relative; padding-left:calc(var(--wrap-padding-x) - 8px); padding-right:calc(var(--wrap-padding-x) - 8px); }
.logo-lockup{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.logo-mark{ height:36px; width:calc(36px * 2001 / 741); display:block; color:var(--ink); flex:none; }
.logo-wordmark{
  font-family:'Libre Caslon Text', Georgia, serif; font-size:var(--text-xs); line-height:1.4;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--ink);
  border-left:1px solid var(--border-on-paper-strong); padding-left:13px;
}
.logo-lockup-footer{ margin-bottom:18px; }
.logo-lockup-footer .logo-mark{ height:42px; width:calc(42px * 2001 / 741); }
.logo-lockup-footer .logo-wordmark{ font-size:var(--text-base); }
nav{ display:flex; align-items:center; gap:44px; }
nav a{ text-decoration:none; font-size:var(--text-sm); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
nav a:hover{ color:var(--brass-text); }
.nav-panel{ display:flex; align-items:center; gap:44px; }
.nav-links{ display:flex; align-items:center; gap:36px; }
@media (max-width:560px){ .logo-wordmark{ display:none; } }
.nav-toggle{ display:none; }

/* ---------- Technology / Marketing nav dropdowns ---------- */
.nav-dropdown{ position:relative; display:flex; align-items:center; gap:2px; }
.nav-dropdown-label{ display:block; }
.nav-dropdown-toggle{
  display:flex; align-items:center; justify-content:center; background:none; border:none; padding:10px 3px; margin:0; cursor:pointer;
  color:var(--ink-soft);
}
.nav-dropdown-toggle:hover{ color:var(--brass-text); }
.nav-arrow{ width:9px; height:9px; flex:none; transition:transform .2s ease; }
.nav-dropdown:hover .nav-arrow,
.nav-dropdown.is-open .nav-arrow{ transform:rotate(180deg); }

.nav-dropdown-menu{
  list-style:none; margin:0; padding:10px; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--paper); border:1px solid var(--border-on-paper-strong); box-shadow:0 14px 30px rgba(22,25,28,0.14);
  min-width:210px; display:grid; gap:2px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease;
}
/* Invisible bridge over the gap so hover doesn't drop between the toggle and the menu */
.nav-dropdown-menu::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{ opacity:1; visibility:visible; pointer-events:auto; }
.nav-dropdown-menu a{
  display:block; padding:9px 12px; font-size:var(--text-sm); letter-spacing:normal; text-transform:none;
  color:var(--ink-soft); text-decoration:none; border-radius:2px; white-space:nowrap;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible{ background:var(--paper-deep); color:var(--brass-text); }

/* ---------- Mobile nav toggle (hamburger) ---------- */
/* The desktop nav (links + dropdowns + CTA button) needs roughly 1180px
   of header width to fit on one line without wrapping or overflowing.
   The breakpoint below has to switch to the hamburger menu before that
   point, or there's a dead zone (previously ~900-1180px) where the
   desktop nav is still rendered but doesn't fit, forcing the whole page
   to scroll horizontally instead of wrapping cleanly. */
@media (max-width:1200px){
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:40px; height:40px; background:none; border:none; padding:0; margin:0; cursor:pointer; flex:none;
  }
  .nav-toggle-bar{ display:block; width:22px; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
  nav.is-nav-open .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  nav.is-nav-open .nav-toggle-bar:nth-child(2){ opacity:0; }
  nav.is-nav-open .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .nav-panel{
    display:none !important; position:absolute; top:calc(100% + 1px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--border-on-paper-strong);
    box-shadow:0 14px 30px rgba(22,25,28,0.14);
    max-height:calc(100vh - var(--header-height)); overflow-y:auto;
    padding:8px 0 var(--space-6);
  }
  nav.is-nav-open .nav-panel{ display:flex !important; }

  .nav-links{ display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .nav-links > a{ padding:15px var(--space-6); border-bottom:1px solid var(--border-on-paper); }

  .nav-dropdown{ position:relative; flex-direction:row; align-items:stretch; justify-content:space-between; gap:0; width:100%; border-bottom:1px solid var(--border-on-paper); flex-wrap:wrap; }
  .nav-dropdown-label{ flex:1; padding:15px var(--space-6); }
  .nav-dropdown-toggle{ padding:15px var(--space-6); }

  .nav-dropdown-menu{
    position:static !important; transform:none !important; top:auto; left:auto;
    display:none; width:100%; min-width:0; opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    background:var(--paper-deep); border:none; border-left:2px solid var(--brass); box-shadow:none; border-radius:0;
    padding:0; margin:0; gap:0;
  }
  .nav-dropdown.is-open .nav-dropdown-menu{ display:grid; }
  .nav-dropdown-menu::before{ display:none; }
  .nav-dropdown-menu li{ border-bottom:1px solid var(--border-on-paper); }
  .nav-dropdown-menu li:last-child{ border-bottom:none; }
  .nav-dropdown-menu a{ padding:13px var(--space-6) 13px var(--space-7); font-size:var(--text-sm); }
  .nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible{ background:rgba(169,128,61,0.1); }

  .nav-panel-cta{ justify-content:center; margin:16px var(--space-6) 0; }
}

/* Offsets in-page anchor jumps so section headings don't tuck under the sticky header */
section{ scroll-margin-top: var(--header-height); }

/* ---------- Hero ---------- */
.hero{
  padding:var(--space-12) 0 68px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22480%22%20height%3D%22480%22%3E%3Cpath%20d%3D%22M0.0%2C30.0%20L30.0%2C32.3%20L60.0%2C34.2%20L90.0%2C35.5%20L120.0%2C36.0%20L150.0%2C35.5%20L180.0%2C34.2%20L210.0%2C32.3%20L240.0%2C30.0%20L270.0%2C27.7%20L300.0%2C25.8%20L330.0%2C24.5%20L360.0%2C24.0%20L390.0%2C24.5%20L420.0%2C25.8%20L450.0%2C27.7%20L480.0%2C30.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C85.0%20L30.0%2C91.4%20L60.0%2C94.0%20L90.0%2C91.4%20L120.0%2C85.0%20L150.0%2C78.6%20L180.0%2C76.0%20L210.0%2C78.6%20L240.0%2C85.0%20L270.0%2C91.4%20L300.0%2C94.0%20L330.0%2C91.4%20L360.0%2C85.0%20L390.0%2C78.6%20L420.0%2C76.0%20L450.0%2C78.6%20L480.0%2C85.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C145.0%20L30.0%2C149.6%20L60.0%2C148.5%20L90.0%2C143.1%20L120.0%2C140.0%20L150.0%2C143.1%20L180.0%2C148.5%20L210.0%2C149.6%20L240.0%2C145.0%20L270.0%2C140.4%20L300.0%2C141.5%20L330.0%2C146.9%20L360.0%2C150.0%20L390.0%2C146.9%20L420.0%2C141.5%20L450.0%2C140.4%20L480.0%2C145.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C215.0%20L30.0%2C219.2%20L60.0%2C222.8%20L90.0%2C225.2%20L120.0%2C226.0%20L150.0%2C225.2%20L180.0%2C222.8%20L210.0%2C219.2%20L240.0%2C215.0%20L270.0%2C210.8%20L300.0%2C207.2%20L330.0%2C204.8%20L360.0%2C204.0%20L390.0%2C204.8%20L420.0%2C207.2%20L450.0%2C210.8%20L480.0%2C215.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C295.0%20L30.0%2C299.9%20L60.0%2C302.0%20L90.0%2C299.9%20L120.0%2C295.0%20L150.0%2C290.1%20L180.0%2C288.0%20L210.0%2C290.1%20L240.0%2C295.0%20L270.0%2C299.9%20L300.0%2C302.0%20L330.0%2C299.9%20L360.0%2C295.0%20L390.0%2C290.1%20L420.0%2C288.0%20L450.0%2C290.1%20L480.0%2C295.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C365.0%20L30.0%2C370.5%20L60.0%2C369.2%20L90.0%2C362.7%20L120.0%2C359.0%20L150.0%2C362.7%20L180.0%2C369.2%20L210.0%2C370.5%20L240.0%2C365.0%20L270.0%2C359.5%20L300.0%2C360.8%20L330.0%2C367.3%20L360.0%2C371.0%20L390.0%2C367.3%20L420.0%2C360.8%20L450.0%2C359.5%20L480.0%2C365.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C435.0%20L30.0%2C438.1%20L60.0%2C440.7%20L90.0%2C442.4%20L120.0%2C443.0%20L150.0%2C442.4%20L180.0%2C440.7%20L210.0%2C438.1%20L240.0%2C435.0%20L270.0%2C431.9%20L300.0%2C429.3%20L330.0%2C427.6%20L360.0%2C427.0%20L390.0%2C427.6%20L420.0%2C429.3%20L450.0%2C431.9%20L480.0%2C435.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3C/svg%3E");
  background-repeat:repeat;
}
.hero .wrap{ display:flex; align-items:center; gap:var(--space-10); }
.hero-content{ flex:1 1 480px; max-width:600px; }
.hero-media{ flex:none; width:380px; }
.hero-media img{ width:100%; height:auto; display:block; object-fit:cover; border-radius:4px; border:1px solid var(--border-on-paper-strong); }
.hero h1{ font-size:var(--text-6xl); margin:18px 0 var(--space-6); }
@media (max-width:900px){
  .hero .wrap{ flex-direction:column; align-items:flex-start; gap:var(--space-7); }
  .hero-media{ width:100%; max-width:280px; }
}
@media (max-width:640px){
  .hero h1{ font-size:var(--text-4xl); }
  .hero{ padding:var(--space-8) 0 var(--space-9); }
}
.hero p.lead{ font-size:var(--text-xl); color:var(--ink-soft); max-width:48ch; margin-bottom:36px; }
.hero-ctas{ display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:center; }
.hero-reassure{ font-size:var(--text-base); color:var(--ink-soft); margin-top:var(--space-5); }

/* Every generic <section> carries its own 56px top padding, stacking on top of the hero's
   own bottom padding right below it. On desktop that's fine, but on mobile the doubled-up
   padding reads as a large dead gap between the hero CTAs and the next heading. Tighten it
   specifically for the section immediately after a hero, on mobile only. */
@media (max-width:640px){
  .hero + section, .page-hero + section{ padding-top:var(--space-6); }
}

/* ---------- Portfolio marquee ---------- */
.trust{ background:var(--paper-deep); padding:var(--space-9) 0; overflow:hidden; }
.trust-head{ margin-bottom:30px; }
.trust-subhead{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; margin-top:var(--space-3); }
.trust-copy{ font-size:var(--text-md); color:var(--ink-soft); max-width:60ch; margin:0; }
.marquee-toggle{
  flex:none; background:var(--paper); border:1px solid var(--border-on-paper-strong); color:var(--ink-soft);
  padding:11px 18px; font-size:var(--text-2xs); letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:background-color .25s ease, color .25s ease;
}
.marquee-toggle:hover{ background:var(--ink); color:var(--paper); }
.marquee{ position:relative; }
.marquee-track{ display:flex; width:max-content; animation:marquee-scroll 36s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track{ animation-play-state:paused; }
.marquee-set{ display:flex; gap:var(--space-4); padding-right:var(--space-4); flex:none; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.logo-tile{ background:var(--paper); border:1px solid var(--border-on-paper-strong); padding:var(--space-4) 26px; display:flex; align-items:center; justify-content:center; height:100px; transition:box-shadow .25s ease, transform .25s ease; }
.logo-tile:hover{ box-shadow:0 10px 20px rgba(22,25,28,0.1); transform:translateY(-2px); }
.logo-tile img{ max-height:58px; max-width:170px; width:auto; object-fit:contain; }
@media (prefers-reduced-motion: reduce){
  /* .marquee is deliberately full-bleed (outside .wrap) for the scrolling
     strip, but a wrapped static row needs to line up with the rest of the
     section's content instead of bleeding to the viewport edge. */
  .marquee{ max-width:var(--max); margin:0 auto; padding:0 var(--wrap-padding-x); }
  .marquee-track{ animation:none; flex-wrap:wrap; width:100%; }
  /* Without this, the single remaining .marquee-set (the dup is hidden
     below) keeps flex:none from its default rule and never wraps its own
     tiles, so a wide portfolio just overflows the row instead of stacking. */
  .marquee-set{ flex-wrap:wrap; flex:1 1 auto; width:100%; padding-right:0; }
  .marquee-toggle{ display:none; }
  .marquee-set-dup{ display:none; }
}
@media (max-width:640px) and (prefers-reduced-motion: reduce){
  .marquee{ padding:0 var(--wrap-padding-x-sm); }
}
/* Static fallback for a service's own portfolio marquee: added by main.js
   when that service's full logo set already fits the viewport without
   scrolling (e.g. a 3-logo service next to the homepage's full 13-logo
   portfolio), so it sits as a plain wrapped row instead of animating.
   Mirrors the reduced-motion treatment above, including realigning the
   otherwise full-bleed .marquee with the rest of the section's content. */
.marquee.is-static{ max-width:var(--max); margin:0 auto; padding:0 var(--wrap-padding-x); }
@media (max-width:640px){ .marquee.is-static{ padding:0 var(--wrap-padding-x-sm); } }
.marquee.is-static .marquee-track{ animation:none; flex-wrap:wrap; width:100%; }
.marquee.is-static .marquee-set{ flex-wrap:wrap; flex:1 1 auto; width:100%; padding-right:0; }
.marquee.is-static .marquee-set-dup{ display:none; }

/* ---------- Section shell ---------- */
section{ padding:var(--section-padding-y) 0; }
.section-head{ max-width:720px; margin-bottom:var(--space-8); }
.section-head h2{ font-size:var(--text-4xl); margin-top:var(--label-gap); }
.section-head p{ color:var(--ink-soft); margin-top:var(--space-4); font-size:var(--text-lg); }
.section-note{ max-width:78ch; color:var(--ink-soft); font-size:var(--text-lg); line-height:1.65; }

/* ---------- Single-column legal/prose pages (Privacy Policy) ---------- */
.legal-content{ max-width:760px; }
.legal-content h2{ margin-top:var(--space-9); }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-family:'Hanken Grotesk', sans-serif; font-weight:700; font-size:var(--text-lg); margin:var(--space-6) 0 var(--space-2); }
.legal-content .updated{ color:var(--ink-soft); font-size:var(--text-sm); margin-bottom:var(--space-6); }
.legal-content p a{ color:inherit; text-decoration:underline; }

/* ---------- Site Map page ---------- */
.sitemap-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--space-8) var(--space-7); }
.sitemap-grid h3{ font-size:var(--text-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--brass-text); margin-bottom:var(--space-4); line-height:1.4; }
.sitemap-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.sitemap-grid a{ text-decoration:none; color:var(--ink-soft); font-size:var(--text-base); }
.sitemap-grid a:hover{ color:var(--brass-text); text-decoration:underline; }

/* ---------- Case study detail blocks ---------- */
.case-detail{ padding-top:var(--space-9); border-top:1px solid var(--border-on-paper); }
.case-detail:first-of-type{ padding-top:0; border-top:none; }
.case-detail-grid{ display:grid; grid-template-columns:280px 1fr; gap:var(--space-8); align-items:start; }
@media (max-width:760px){ .case-detail-grid{ grid-template-columns:1fr; } }
.case-detail-grid img{ width:100%; height:200px; object-fit:cover; border:1px solid var(--border-on-paper-strong); filter:grayscale(45%) sepia(10%) saturate(1.05) contrast(1.05); }
.case-detail h2{ font-size:var(--text-3xl); margin:10px 0 var(--space-4); }

/* ---------- Standalone case study pages ---------- */
.case-hero-img{ width:100%; height:340px; object-fit:cover; border:1px solid var(--border-on-paper-strong); filter:grayscale(45%) sepia(10%) saturate(1.05) contrast(1.05); margin-bottom:var(--space-6); }
@media (max-width:640px){ .case-hero-img{ height:220px; } }
.side-stat{ padding-top:var(--space-6); border-top:1px solid var(--border-on-ink); margin-top:var(--space-6); }
.side-stat + .side-stat{ padding-top:var(--space-5); border-top:none; margin-top:var(--space-2); }
.side-stat b{ display:block; font-family:'Libre Caslon Text', serif; font-size:var(--text-2xl); color:var(--brass-light); }
.side-stat span{ font-size:var(--text-sm); color:rgba(247,244,238,0.72); }
.case-support-figure{ margin:var(--space-6) 0; }
.case-support-img{ width:100%; max-width:520px; height:auto; display:block; margin:0 auto; border:1px solid var(--border-on-paper-strong); background:var(--paper); }
.case-support-figure figcaption{ text-align:center; font-size:var(--text-sm); color:var(--ink-soft); margin-top:var(--space-2); }

.founder-intro{ display:flex; gap:var(--space-6); align-items:flex-start; margin-bottom:var(--space-2); }
.founder-photo{ width:160px; height:160px; object-fit:cover; border-radius:4px; border:1px solid var(--border-on-paper-strong); flex:none; }
@media (max-width:640px){
  .founder-intro{ flex-direction:column; }
  .founder-photo{ width:120px; height:120px; }
}
.on-deep{ background:var(--paper-deep); }
.on-ink{ background:var(--ink); color:var(--paper); }
.on-ink .section-head p{ color:rgba(247,244,238,0.72); }
.on-ink .eyebrow{ color:var(--brass-light); }

/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-on-paper-strong); border:1px solid var(--border-on-paper-strong); }
@media (max-width:820px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{ background:var(--paper); padding:44px; }
.service-card h3{ font-size:var(--text-2xl); display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2); }
.service-card .tag{ font-size:var(--text-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-text); font-weight:600; }
.service-card p{ color:var(--ink-soft); margin:var(--space-4) 0 var(--space-6); }
.service-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--border-on-paper); }
.service-list li{ padding:13px 0; border-bottom:1px solid var(--border-on-paper); display:flex; align-items:center; gap:10px; font-size:var(--text-md); }
.service-list li::before{ content:""; width:6px; height:6px; background:var(--brass); flex:none; }
.service-list a{ color:inherit; text-decoration:none; }
.service-list a:hover{ color:var(--brass-text); }
.service-card > .card-link{ display:inline-block; margin-top:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--brass-text); text-decoration:none; }
.service-card > .card-link:hover{ text-decoration:underline; }

/* ---------- Approach ---------- */
.approach-head{ max-width:640px; margin-bottom:var(--space-9); }
.approach-head h2{ font-size:var(--text-4xl); margin-top:var(--label-gap); }
.approach-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }
@media (max-width:820px){ .approach-list{ grid-template-columns:1fr; gap:var(--space-7); } }
.approach-list li{ padding-top:26px; border-top:1px solid var(--border-on-ink); }
.approach-list .num{ display:block; font-family:'Libre Caslon Text', serif; font-size:22px; color:var(--brass-light); margin-bottom:var(--label-gap); }
.approach-list h3{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:18px; margin-bottom:10px; }
.approach-list p{ color:rgba(247,244,238,0.72); font-size:var(--text-md); line-height:1.6; }

/* ---------- About / Why TAG ---------- */
.about-grid{ display:grid; grid-template-columns:1.35fr 0.9fr; gap:var(--space-10); align-items:start; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.about-content h2{ font-size:34px; margin-top:var(--label-gap); margin-bottom:var(--space-6); }
.about-content p{ margin-bottom:18px; color:var(--ink-soft); font-size:18px; line-height:1.65; }
.about-content p:first-of-type{ font-family:'Libre Caslon Text', serif; font-size:23px; line-height:1.45; color:var(--ink); }
.about-proof{ display:flex; flex-direction:column; gap:1px; background:var(--border-on-paper-strong); border:1px solid var(--border-on-paper-strong); align-self:start; }
.proof-stat{ background:var(--paper); padding:var(--space-7) 28px 28px; }
.proof-stat b{ display:block; font-family:'Libre Caslon Text', serif; font-size:var(--text-5xl); line-height:1; margin-bottom:10px; }
.proof-stat span{ font-size:var(--text-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.about-credit{ background:var(--paper); padding:26px 28px 28px; font-size:var(--text-md); line-height:1.6; color:var(--ink); }
.about-credit b{ color:var(--ink); font-weight:700; }

/* ---------- Outcomes ---------- */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-bottom:var(--space-11); }
@media (max-width:900px){ .case-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .case-grid{ grid-template-columns:1fr; } }
.case-card{ border:1px solid var(--border-on-paper-strong); background:var(--paper); transition:box-shadow .25s ease, transform .25s ease; overflow:hidden; }
.case-card:hover{ box-shadow:0 14px 30px rgba(22,25,28,0.1); transform:translateY(-3px); }
a.case-card{ display:block; text-decoration:none; color:inherit; }
.case-card-cta{ display:flex; align-items:center; justify-content:center; background:var(--ink); border-color:var(--ink); }
.case-card-body{ padding:28px; }
.case-thumb{ width:100%; height:150px; object-fit:cover; filter:grayscale(45%) sepia(10%) saturate(1.05) contrast(1.05); display:block; border-bottom:1px solid var(--border-on-paper-strong); }
.case-card .tag{ font-size:var(--text-2xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-text); font-weight:600; }
.case-card h3{ font-size:var(--text-xl); margin:12px 0 10px; font-family:'Libre Caslon Text', serif; }
.case-card p{ font-size:var(--text-base); color:var(--ink-soft); }

.testimonial{ border:1px solid var(--border-on-paper-strong); background:var(--paper-deep); padding:52px; display:grid; grid-template-columns:auto 1fr; gap:var(--space-7); }
@media (max-width:700px){ .testimonial{ grid-template-columns:1fr; padding:var(--space-7); gap:var(--space-2); } }
.testimonial .mark{ font-family:'Libre Caslon Text', serif; font-size:64px; color:var(--brass); line-height:0.5; margin-bottom:var(--space-1); }
.testimonial blockquote{ margin:0; font-family:'Libre Caslon Text', serif; font-style:italic; font-size:20px; line-height:1.55; color:var(--ink); }
.testimonial blockquote p + p{ margin-top:14px; }
.testimonial-byline{ display:flex; align-items:center; gap:18px; margin-top:26px; }
.testimonial-byline img{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:1px solid var(--border-on-paper-strong); flex:none; }
.testimonial cite{ display:block; font-style:normal; font-size:var(--text-sm); letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
/* Per-photo crop adjustments for testimonial headshots that need a different focal point */
.obj-25{ object-position:center 25%; }
.obj-12{ object-position:center 12%; }

/* ---------- Testimonial slider ---------- */
/* Slides vary a lot in length, and forcing them to a shared fixed height
   leaves distracting empty space under the shorter ones. Instead the
   track's own height is set explicitly in pixels by JS just before each
   swap and transitioned to the incoming slide's height, so the box (and
   the controls below it) glide to their new size instead of snapping,
   while still sizing to each slide's real content. */
.testimonial-track{ position:relative; overflow:hidden; transition:height .35s ease; }
.testimonial-track .testimonial{ display:none; }
.testimonial-track .testimonial.is-active{ display:grid; }
@media (prefers-reduced-motion: reduce){
  .testimonial-track{ transition:none; }
}
/* Below 700px the testimonial switches to a single stacked column (image
   above text), which makes the gap between the shortest and longest
   quotes far bigger than it is in the two-column desktop layout: a swing
   of a few hundred pixels rather than under a hundred, enough that even
   an animated resize reads as the whole page lurching. So on small
   screens the quote itself is clamped to a few lines with a fade and a
   "Read more" toggle (added by JS only on slides that actually overflow),
   which keeps the swing between slides small; tapping "Read more" reveals
   the rest of that one slide without affecting the others. */
.quote-toggle{
  display:none; margin-top:14px; background:none; border:none; padding:0; cursor:pointer;
  color:var(--brass-text); font-weight:600; font-size:var(--text-sm); text-transform:uppercase; letter-spacing:0.08em;
}
@media (max-width:700px){
  .testimonial-slider .quote-clamp{ position:relative; max-height:6.4em; overflow:hidden; }
  .testimonial-slider .testimonial.is-expanded .quote-clamp{ max-height:none; }
  .testimonial-slider .testimonial.has-more .quote-clamp::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2.4em;
    background:linear-gradient(to bottom, transparent, var(--paper-deep)); pointer-events:none;
  }
  .testimonial-slider .testimonial.is-expanded .quote-clamp::after{ display:none; }
  .testimonial-slider .testimonial.has-more .quote-toggle{ display:inline-block; }
}
.slider-controls{ display:flex; align-items:center; justify-content:center; gap:var(--space-5); margin-top:28px; }
.slider-btn{
  width:44px; height:44px; flex:none; border:1px solid var(--border-on-paper-strong); background:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; color:var(--ink);
  transition:background-color .25s ease;
}
.slider-btn:hover{ background:var(--paper-deep); }
.slider-dots{ display:flex; gap:var(--space-1); }
.dot{ width:24px; height:24px; padding:0; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dot::before{ content:""; width:10px; height:10px; border-radius:50%; border:1px solid var(--border-on-paper-strong); background:var(--paper); display:block; }
.dot[aria-selected="true"]::before{ background:var(--brass-text); border-color:var(--brass-text); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-on-ink); border:1px solid var(--ink); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info{ background:var(--ink); color:var(--paper); padding:52px; }
.contact-info h2{ font-size:var(--text-3xl); margin-top:var(--label-gap); margin-bottom:18px; }
.contact-info p{ color:rgba(247,244,238,0.72); margin-bottom:var(--space-7); }
.contact-detail{ display:flex; gap:14px; padding:var(--space-4) 0; border-top:1px solid var(--border-on-ink); font-size:var(--text-md); color:var(--paper); }
.contact-detail b{ display:block; font-size:var(--text-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--brass-light); margin-bottom:var(--space-1); }
.contact-detail a{ color:inherit; text-decoration:none; }
.contact-detail a:hover{ color:var(--brass-light); }
.contact-form{ background:var(--ink); color:var(--paper); padding:52px; }
.field{ margin-bottom:22px; }
.field label{ display:block; font-size:var(--text-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--brass-light); margin-bottom:var(--space-2); }
.field label .req{ color:var(--paper); }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--border-on-ink-strong);
  color:var(--paper); font-family:inherit; font-size:var(--text-md); padding:10px 2px; outline:none;
}
.field input:focus, .field textarea:focus{ border-bottom-color:var(--brass-light); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } }
.form-hint{ margin-top:-10px; margin-bottom:var(--space-4); font-size:var(--text-xs); color:rgba(247,244,238,0.55); }
.h-captcha{ margin-bottom:22px; }
.h-captcha iframe{ border:1px solid var(--border-on-ink-strong); border-radius:2px; overflow:hidden; }
.form-error, .captcha-error{ margin-top:var(--space-4); font-size:var(--text-sm); color:#E4A5A0; }
.form-error a{ color:inherit; }
.form-success h3{ font-family:'Libre Caslon Text', serif; font-size:var(--text-2xl); color:var(--paper); margin-bottom:var(--space-3); }
.form-success p{ color:rgba(247,244,238,0.72); }

/* ---------- Footer ---------- */
footer{ background:var(--paper-deep); border-top:1px solid var(--border-on-paper-strong); padding:var(--space-10) 0 36px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-8); margin-bottom:var(--space-9); }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h3{ font-size:var(--text-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-text); margin-bottom:var(--space-4); }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer-grid a{ text-decoration:none; color:var(--ink-soft); font-size:var(--text-base); }
.footer-grid a:hover{ color:var(--brass-text); }
.footer-blurb{ color:var(--ink-soft); font-size:var(--text-base); max-width:34ch; }
.footer-bottom{ border-top:1px solid var(--border-on-paper-strong); padding-top:var(--space-6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); font-size:var(--text-sm); color:var(--ink-soft); }
.footer-bottom a{ color:inherit; text-decoration:none; }
.footer-bottom a:hover{ color:var(--brass-text); }

/* =====================================================================
   Interior content pages (Technology Services hub + service pages)
   Shared by every page under includes/header.php + includes/footer.php.
   ===================================================================== */

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:var(--text-xs); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:var(--space-6); }
.breadcrumb a{ text-decoration:none; color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--brass-text); }
.breadcrumb .sep{ color:var(--border-on-paper-strong); }
.breadcrumb [aria-current]{ color:var(--ink); font-weight:600; }

/* ---------- Interior page hero (shorter than the homepage hero) ---------- */
.page-hero{
  padding:var(--space-9) 0 var(--space-10);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22480%22%20height%3D%22480%22%3E%3Cpath%20d%3D%22M0.0%2C30.0%20L30.0%2C32.3%20L60.0%2C34.2%20L90.0%2C35.5%20L120.0%2C36.0%20L150.0%2C35.5%20L180.0%2C34.2%20L210.0%2C32.3%20L240.0%2C30.0%20L270.0%2C27.7%20L300.0%2C25.8%20L330.0%2C24.5%20L360.0%2C24.0%20L390.0%2C24.5%20L420.0%2C25.8%20L450.0%2C27.7%20L480.0%2C30.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C85.0%20L30.0%2C91.4%20L60.0%2C94.0%20L90.0%2C91.4%20L120.0%2C85.0%20L150.0%2C78.6%20L180.0%2C76.0%20L210.0%2C78.6%20L240.0%2C85.0%20L270.0%2C91.4%20L300.0%2C94.0%20L330.0%2C91.4%20L360.0%2C85.0%20L390.0%2C78.6%20L420.0%2C76.0%20L450.0%2C78.6%20L480.0%2C85.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C145.0%20L30.0%2C149.6%20L60.0%2C148.5%20L90.0%2C143.1%20L120.0%2C140.0%20L150.0%2C143.1%20L180.0%2C148.5%20L210.0%2C149.6%20L240.0%2C145.0%20L270.0%2C140.4%20L300.0%2C141.5%20L330.0%2C146.9%20L360.0%2C150.0%20L390.0%2C146.9%20L420.0%2C141.5%20L450.0%2C140.4%20L480.0%2C145.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C215.0%20L30.0%2C219.2%20L60.0%2C222.8%20L90.0%2C225.2%20L120.0%2C226.0%20L150.0%2C225.2%20L180.0%2C222.8%20L210.0%2C219.2%20L240.0%2C215.0%20L270.0%2C210.8%20L300.0%2C207.2%20L330.0%2C204.8%20L360.0%2C204.0%20L390.0%2C204.8%20L420.0%2C207.2%20L450.0%2C210.8%20L480.0%2C215.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C295.0%20L30.0%2C299.9%20L60.0%2C302.0%20L90.0%2C299.9%20L120.0%2C295.0%20L150.0%2C290.1%20L180.0%2C288.0%20L210.0%2C290.1%20L240.0%2C295.0%20L270.0%2C299.9%20L300.0%2C302.0%20L330.0%2C299.9%20L360.0%2C295.0%20L390.0%2C290.1%20L420.0%2C288.0%20L450.0%2C290.1%20L480.0%2C295.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C365.0%20L30.0%2C370.5%20L60.0%2C369.2%20L90.0%2C362.7%20L120.0%2C359.0%20L150.0%2C362.7%20L180.0%2C369.2%20L210.0%2C370.5%20L240.0%2C365.0%20L270.0%2C359.5%20L300.0%2C360.8%20L330.0%2C367.3%20L360.0%2C371.0%20L390.0%2C367.3%20L420.0%2C360.8%20L450.0%2C359.5%20L480.0%2C365.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C435.0%20L30.0%2C438.1%20L60.0%2C440.7%20L90.0%2C442.4%20L120.0%2C443.0%20L150.0%2C442.4%20L180.0%2C440.7%20L210.0%2C438.1%20L240.0%2C435.0%20L270.0%2C431.9%20L300.0%2C429.3%20L330.0%2C427.6%20L360.0%2C427.0%20L390.0%2C427.6%20L420.0%2C429.3%20L450.0%2C431.9%20L480.0%2C435.0%22%20fill%3D%22none%22%20stroke%3D%22%23A9803D%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.2%22/%3E%3C/svg%3E");
  background-repeat:repeat;
}
.page-hero h1{ font-size:var(--text-5xl); margin:var(--label-gap) 0 var(--space-5); max-width:22ch; }
@media (max-width:640px){
  .page-hero h1{ font-size:var(--text-3xl); }
  .page-hero{ padding:var(--space-6) 0 var(--space-8); }
}
.page-hero .lead{ font-size:var(--text-lg); color:var(--ink-soft); max-width:72ch; margin-bottom:var(--space-6); }
.page-hero .hero-ctas{ display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:center; }

/* ---------- Two-column content layout (narrative + sidebar) ---------- */
.content-columns{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--space-10); align-items:stretch; }
@media (max-width:900px){ .content-columns{ grid-template-columns:1fr; } }
.content-main h2{ font-size:var(--text-3xl); margin:0 0 var(--space-4); }
.content-main h2:not(:first-child){ margin-top:var(--space-10); }
.content-main p{ color:var(--ink-soft); font-size:var(--text-lg); line-height:1.65; margin-bottom:var(--space-4); }
.content-main > p:first-of-type{ font-family:'Libre Caslon Text', serif; font-size:22px; line-height:1.5; color:var(--ink); }
.content-main .lead-para{ font-family:'Libre Caslon Text', serif; font-size:22px; line-height:1.5; color:var(--ink); }
.content-main > p:first-of-type.body-para{ font-family:inherit; font-size:var(--text-lg); line-height:1.65; color:var(--ink-soft); }

/* ---------- Sidebar CTA card ---------- */
.side-card{ background:var(--ink); color:var(--paper); padding:var(--space-7) var(--space-6); position:sticky; top:calc(var(--header-height) + var(--space-6)); }
.side-card h3{ font-family:'Libre Caslon Text', serif; font-size:var(--text-2xl); margin-bottom:var(--space-3); }
.side-card p{ color:rgba(247,244,238,0.72); font-size:var(--text-base); margin-bottom:var(--space-5); }
.side-card .btn{ width:100%; justify-content:center; }
.side-fact-list{ list-style:none; margin:var(--space-6) 0 0; padding-top:var(--space-6); border-top:1px solid var(--border-on-ink); display:grid; gap:var(--space-3); }
.side-fact-list li{ font-size:var(--text-sm); color:rgba(247,244,238,0.85); display:flex; gap:10px; line-height:1.5; }
.side-fact-list li::before{ content:"\2014"; color:var(--brass-light); flex:none; }
.side-fact-list a{ color:inherit; text-decoration:underline; }
.side-fact-list a:hover{ color:var(--brass-light); }

/* ---------- Numbered steps (light background variant of .approach-list) ---------- */
.steps-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-7); }
.steps-list li{ display:grid; grid-template-columns:52px 1fr; gap:var(--space-5); align-items:start; padding-top:var(--space-6); border-top:1px solid var(--border-on-paper); }
.steps-list li:first-child{ padding-top:0; border-top:none; }
.steps-list .num{ font-family:'Libre Caslon Text', serif; font-size:28px; color:var(--brass); line-height:1.1; }
.steps-list h3{ font-family:'Hanken Grotesk', sans-serif; font-weight:700; font-size:var(--text-xl); margin-bottom:8px; }
.steps-list p{ color:var(--ink-soft); font-size:var(--text-md); line-height:1.6; margin:0; }

/* ---------- FAQ (native <details>/<summary> — no JS required) ---------- */
.faq-list{ display:grid; gap:1px; background:var(--border-on-paper-strong); border:1px solid var(--border-on-paper-strong); }
.faq-item{ background:var(--paper); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:var(--space-5) var(--space-6);
  font-family:'Libre Caslon Text', serif; font-size:var(--text-xl);
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:'Hanken Grotesk', sans-serif; font-size:24px; color:var(--brass); flex:none; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item .faq-answer{ padding:0 var(--space-6) var(--space-6); color:var(--ink-soft); font-size:var(--text-md); line-height:1.65; max-width:70ch; }
.faq-item .faq-answer p + p{ margin-top:12px; }

/* ---------- Related-services grid ---------- */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
@media (max-width:820px){ .related-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .related-grid{ grid-template-columns:1fr; } }
.related-card{ display:block; text-decoration:none; background:var(--paper); border:1px solid var(--border-on-paper-strong); padding:var(--space-6); transition:box-shadow .25s ease, transform .25s ease; }
.related-card:hover{ box-shadow:0 10px 24px rgba(22,25,28,0.1); transform:translateY(-2px); }
.related-card .tag{ font-size:var(--text-2xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-text); font-weight:600; }
.related-card h3{ font-size:var(--text-lg); font-family:'Hanken Grotesk', sans-serif; font-weight:700; color:var(--ink); margin:8px 0 6px; }
.related-card p{ font-size:var(--text-sm); color:var(--ink-soft); margin:0; }

/* ---------- Hub grid (Technology Services overview cards) ---------- */
.hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
@media (max-width:900px){ .hub-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .hub-grid{ grid-template-columns:1fr; } }
.hub-card{ background:var(--paper); border:1px solid var(--border-on-paper-strong); padding:var(--space-7); display:flex; flex-direction:column; transition:box-shadow .25s ease, transform .25s ease; }
.hub-card:hover{ box-shadow:0 14px 30px rgba(22,25,28,0.1); transform:translateY(-3px); }
.hub-card .tag{ font-size:var(--text-2xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-text); font-weight:600; }
.hub-card h3{ font-size:var(--text-xl); font-family:'Libre Caslon Text', serif; margin:10px 0 var(--space-3); }
.hub-card p{ color:var(--ink-soft); font-size:var(--text-base); margin-bottom:var(--space-5); flex:1; }
.hub-card .card-link{ font-size:var(--text-sm); font-weight:600; color:var(--brass-text); text-decoration:none; letter-spacing:0.02em; }
.hub-card .card-link:hover{ text-decoration:underline; }

/* ---------- Callout box ---------- */
.callout{ background:var(--paper-deep); border-left:3px solid var(--brass); padding:var(--space-6) var(--space-7); display:flex; flex-wrap:wrap; gap:var(--space-5); align-items:center; justify-content:space-between; }
.callout p{ margin:0; color:var(--ink-soft); font-size:var(--text-md); max-width:56ch; }
.callout strong{ color:var(--ink); }
/* flex-grow:0 keeps the button at its natural size instead of stretching
   to fill the row, but flex-shrink:1 (unlike the old flex:none, which
   disabled shrinking outright) lets it shrink and wrap its own label on
   narrow screens instead of forcing the page to scroll horizontally. */
.callout .btn{ flex:0 1 auto; }

/* ---------- CTA banner (bottom of every interior page) ---------- */
.cta-banner{ background:var(--ink); color:var(--paper); padding:var(--space-10) 0; text-align:center; }
.cta-banner .wrap{ max-width:720px; }
.cta-banner h2{ font-size:var(--text-4xl); margin-top:var(--label-gap); margin-bottom:var(--space-4); color:var(--paper); }
.cta-banner p{ color:rgba(247,244,238,0.75); margin-bottom:var(--space-7); font-size:var(--text-lg); }
.cta-banner .eyebrow{ color:var(--brass-light); }
.cta-banner .btn-primary{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.cta-banner .btn-primary:hover{ background:var(--brass-light); }
.cta-banner .cta-ctas{ display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:center; justify-content:center; }

/* ---------- Utilities ---------- */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }