/* ============================================================
   WEBMASTER SERVICES HAWAII — DESIGN SYSTEM
   Extracted from the live site, cleaned for the 2026 static rebuild.
   This is the reusable template stylesheet every page inherits.

   ASSET PATHS (placed 2026-06-04):
     - Fonts:  /assets/fonts/  (4 self-hosted Graphik .ttf files)
     - Logo:   /assets/img/wmshlogo.jpg  (header <img src> points here)
   Keep everything self-hosted and local. Do NOT hotlink the
   production server for fonts, logo, or images.
   ============================================================ */

/* ----- FONT FACES (self-hosted Graphik) ----- */
@font-face {
  font-family: GraphikBold;
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/Graphik-Bold-2.ttf") format("truetype");
}
@font-face {
  font-family: GraphikMedium;
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/Graphik-Medium.ttf") format("truetype");
}
@font-face {
  font-family: GraphikRegular;
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/Graphik-Regular.ttf") format("truetype");
}
@font-face {
  font-family: GraphikSemibold;
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/Graphik-Semibold.ttf") format("truetype");
}

/* ----- DESIGN TOKENS ----- */
:root {
  --color-navy:        #012a5e;
  --color-navy-hover:  #001f47;
  --color-green:       #069344;
  --color-green-hover: #057a38;
  --color-white:       #ffffff;
  --color-light-bg:    #eef6fb;
  --color-overlay:     rgba(1, 42, 94, 0.80);
  --color-hero-overlay:rgba(9, 23, 74, 0.82);
  --color-text:        #5f5f67;
  --color-heading:     #1f1f26;
  --color-review-name: #344ca2;

  --font-regular:  GraphikRegular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-medium:   GraphikMedium, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-semibold: GraphikSemibold, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bold:     GraphikBold, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --max-width:   1180px;
  --card-shadow: rgba(79, 102, 145, 0.56) 0px 0px 30px 0px;
  /* SHARED hero top padding (nav bottom -> green eyebrow). Single source of truth so the
     eyebrow begins at the SAME Y on every hero sitewide; the band grows DOWNWARD with content. */
  --hero-pad-top: 60px;
}

/* ----- RESET & BASE ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* NOTE: do NOT set `scroll-behavior: smooth` on html — it animates the browser's
   scroll-position RESTORATION on reload, causing a visible jump/lurch when refreshing
   partway down a long page (e.g. /portfolio/). Anchor clicks scroll instantly instead. */
body {
  font-family: var(--font-regular);
  font-size: 16px;
  color: var(--color-text);
  background: #fff;
  line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ----- HEADING DEFAULTS (per /seo/ page: GraphikBold) -----
   H1 Bold; H2 Bold 30px. Inherited sitewide via the template. */
h1, h2, h3, h4 { color: var(--color-heading); }
h1 { font-family: var(--font-bold); font-size: 45px; line-height: 1.2; }
h2 { font-family: var(--font-bold); font-size: 30px; line-height: 1.25; }
h3 { font-family: var(--font-semibold); font-size: 20px; }
h4 { font-family: var(--font-semibold); font-size: 16px; }

/* ----- LAYOUT HELPERS ----- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.section { width: 100%; }
.text-center { text-align: center; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-navy); color: #fff; padding: 10px 16px; z-index: 2000;
}
.skip-link:focus { left: 0; }

/* ----- TOP BAR ----- */
.topbar { background-color: var(--color-navy); padding: 10px 0; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.topbar-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar-left a { color: #ffffff; font-family: var(--font-regular); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.topbar-left a i { color: #ffffff; font-size: 14px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-right a {
  color: #c9d4e2; font-size: 14px; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%;
  transition: color 0.2s, border-color 0.2s;
}
.topbar-right a:hover { color: #fff; border-color: #fff; }

/* ----- NAVBAR -----
   NOTE: structure/links come from the build spec's 8-item 2026 nav.
   These styles handle top-level items, the green Contact button, and dropdowns.
   Reuse for all dropdown menus regardless of how many items they hold. */
.navbar { background: #fff; padding: 10px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.navbar .container { display: flex; align-items: center; gap: 16px; }
.navbar nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } /* center zone — nav grows between logo (left) and Contact CTA (right) */
.navbar-logo { display: flex; align-items: center; }
.navbar-logo img { height: 55px; width: auto; }
.nav-menu { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  font-family: var(--font-medium); font-size: 14px; color: #000; padding: 10px 10px;
  text-transform: uppercase; letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 4px; white-space: nowrap; transition: color 0.2s;
}
.nav-menu > li > a:hover { color: var(--color-navy); }
.nav-menu > li > a .dropdown-arrow { font-size: 10px; margin-top: 1px; }
/* desktop three-zone: Contact is the right-zone .nav-cta; the in-menu Contact <li> shows only in the mobile menu */
.nav-menu > li.nav-contact { display: none; }
.nav-cta { flex: 0 0 auto; background: var(--color-green); color: #fff; padding: 10px 18px; font-family: var(--font-medium); font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; transition: background 0.2s; }
.nav-cta:hover { background: var(--color-green-hover); color: #fff; }
.nav-menu > li:hover > .dropdown, .nav-menu > li:focus-within > .dropdown { display: block; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 200; border-top: 3px solid var(--color-navy);
}
.dropdown li a {
  display: block; padding: 9px 18px; font-size: 13px; color: #333;
  border-bottom: 1px solid #f0f0f0; transition: background 0.15s, color 0.15s;
}
.dropdown li a:hover { background: var(--color-light-bg); color: var(--color-navy); }

/* ----- BUTTONS ----- */
.btn {
  display: inline-block; padding: 15px 25px; font-size: 16px; font-family: var(--font-medium);
  cursor: pointer; border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s; text-align: center;
}
.btn-green { background: var(--color-green); color: #fff; border-color: var(--color-green); }
.btn-green:hover { background: var(--color-green-hover); border-color: var(--color-green-hover); }
.btn-navy { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.btn-navy:hover { background: var(--color-navy-hover); border-color: var(--color-navy-hover); }
.btn-outline-white { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); }
.btn-outline-navy { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.btn-outline-navy:hover { background: var(--color-navy); color: #fff; }

/* ----- HERO (interior page variant) -----
   Shorter banner with a deep navy overlay (per /seo/), not the full landscape photo.
   Set a background-image inline per page; the overlay does the dark navy wash. */
.hero {
  position: relative; min-height: 420px; background-size: cover; background-position: center;
  background-repeat: no-repeat; display: flex; align-items: flex-start; background-color: var(--color-navy);
}
.hero-overlay { position: absolute; inset: 0; background: var(--color-hero-overlay); }
.hero .container { position: relative; z-index: 1; padding-top: var(--hero-pad-top); padding-bottom: 60px; }
.hero-text { text-align: center; }
.hero-text h1 { font-family: var(--font-bold); font-size: 45px; color: #fff; line-height: 1.2; margin-bottom: 20px; }
.hero-text p { font-family: var(--font-medium); font-size: 22px; color: #fff; margin-bottom: 32px; line-height: 1.4; }
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* Compact hero for utility pages (e.g. /contact/): tight band, no empty void below the H1.
   Scoped modifier — does NOT affect the shared .hero used by landing pages. */
.hero--compact { min-height: 0; }
.hero--compact .container { padding-top: 44px; padding-bottom: 44px; }
.hero--compact .hero-text h1 { margin-bottom: 0; }

/* ----- TRUST BAR ----- */
.trust-bar { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 20px 0; }
.trust-bar .trust-item { font-family: var(--font-medium); font-size: 14px; color: #fff; display: flex; align-items: center; gap: 8px; }
.trust-bar a.trust-item { text-decoration: none; transition: color .15s ease; }
.trust-bar a.trust-item:hover { color: var(--color-green); }

/* ----- CLIENT LOGOS (homepage "Our Clients" — normalized sizing/spacing) ----- */
.client-logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:30px 46px; max-width:1000px; margin:0 auto; }
.client-logos a, .client-logos span { display:inline-flex; align-items:center; }
.client-logos img { height:54px; width:auto; max-width:170px; object-fit:contain; display:block; transition:transform .2s ease; }
.client-logos a:hover img { transform:scale(1.05); }
@media (max-width:768px){ .client-logos { gap:24px 30px; } .client-logos img { height:44px; } }

/* ----- BEFORE / AFTER (web-design redesign proof — static, no slider) ----- */
.ba-block { max-width:940px; margin:0 auto 44px; }
.ba-block:last-child { margin-bottom:0; }
.ba-block h3 { font-family:var(--font-bold); font-size:22px; color:var(--color-heading); text-align:center; margin:0 0 16px; }
.ba-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ba-fig { margin:0; }
.ba-fig figcaption { font-family:var(--font-regular); font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--color-green); margin-bottom:8px; text-align:center; }
.ba-fig img { width:100%; height:auto; border-radius:10px; border:1px solid #e3e8ee; display:block; }
.ba-note { text-align:center; color:var(--color-text); font-size:15px; line-height:1.6; margin:14px auto 0; max-width:780px; }
@media (max-width:768px){ .ba-row { grid-template-columns:1fr; } }

/* ----- SECTION HEADINGS -----
   Eyebrow label: green GraphikRegular uppercase (new /seo/ style).
   Use .section-label-top.is-navy for the older navy variant if needed. */
.section-label-top { font-family: var(--font-regular); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-green); text-align: center; margin-bottom: 8px; }
.section-label-top.is-navy { color: var(--color-navy); }
.section-title { font-family: var(--font-bold); font-size: 30px; color: var(--color-heading); text-align: center; margin-bottom: 40px; }
.section-title span { color: var(--color-navy); }

/* ----- SERVICE / FEATURE CARDS ----- */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.service-card { background: #fff; border: 2px solid var(--color-green); border-radius: 12px; padding: 28px 26px; box-shadow: var(--card-shadow); }
.service-card .icon { color: var(--color-navy); font-size: 56px; margin-bottom: 16px; }
.service-card h3 { font-family: var(--font-medium); font-size: 20px; color: var(--color-navy); margin-bottom: 12px; font-weight: 500; }
.service-card p { font-size: 15px; color: var(--color-text); line-height: 1.6; margin-bottom: 16px; }
.service-card a { color: var(--color-navy); font-family: var(--font-medium); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.service-card a:hover { color: var(--color-green); }

/* ----- STAT BANDS ----- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-band .stat .num { font-family: var(--font-bold); font-size: 44px; color: var(--color-navy); line-height: 1.1; }
.stat-band .stat .desc { font-size: 14px; color: var(--color-text); margin-top: 6px; line-height: 1.5; }

/* ----- BANNER (navy overlay) ----- */
.banner { position: relative; background-size: cover; background-position: center; padding: 60px 0; }
.banner .overlay { position: absolute; inset: 0; background: var(--color-overlay); }
.banner .container { position: relative; z-index: 1; text-align: center; }
.banner h2 { font-family: var(--font-semibold); font-size: 40px; color: #fff; font-weight: 600; margin-bottom: 12px; }
.banner p { font-size: 20px; color: #fff; margin-bottom: 24px; }

/* ----- LIGHT SECTION ----- */
.section-light { background: var(--color-light-bg); padding: 60px 0; }
.section-white { background: #fff; padding: 60px 0; }

/* ----- COMPARISON TABLE ----- */
.compare-table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 15px; }
.compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #e3e8ee; vertical-align: top; }
.compare-table thead th { font-family: var(--font-semibold); color: var(--color-navy); background: var(--color-light-bg); }
.compare-table tbody th { font-family: var(--font-medium); color: var(--color-heading); font-weight: 500; }
.compare-table .yes { color: var(--color-green); font-family: var(--font-medium); }
.compare-table .no  { color: #b03a3a; }
.compare-table .meh { color: #8a7a3a; }

/* ----- WORK / PORTFOLIO CARDS ----- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.work-card { overflow: hidden; box-shadow: var(--card-shadow); }
.work-card img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.3s; }
.work-card:hover img { transform: scale(1.04); }
.work-card-body { padding: 20px 24px; background: #fff; }
.work-card-body h3 { font-family: var(--font-semibold); font-size: 20px; color: var(--color-navy); margin-bottom: 10px; }
.work-card-body p { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 16px; }
.work-card-links { display: flex; gap: 12px; }
.work-card-links a { font-family: var(--font-medium); font-size: 13px; color: var(--color-navy); border: 1px solid var(--color-navy); padding: 6px 14px; transition: background 0.2s, color 0.2s; }
.work-card-links a:hover { background: var(--color-navy); color: #fff; }

/* ----- REVIEWS ----- */
.reviews-carousel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { background: #fff; border: 1px solid #eee; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.review-card .reviewer { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-card .reviewer img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.review-card h4 { font-family: var(--font-semibold); font-size: 16px; color: var(--color-review-name); font-weight: 500; }
.review-card .stars { color: #f5c518; font-size: 13px; margin-top: 2px; }
.review-card p { font-size: 14px; color: #444; line-height: 1.6; }
.review-card .source { margin-top: 12px; font-size: 12px; color: #888; display: flex; align-items: center; gap: 6px; }

/* ----- FAQ (accordion — polished, animated, accessible) ----- */
.faq-list { width: 100%; } /* spans the shared .container — no own max-width */
.faq-item { border-bottom: 1px solid #e3e8ee; border-left: 3px solid transparent; transition: border-color 0.2s ease; }
.faq-item.open { border-left-color: var(--color-green); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-semibold); font-size: 17px; color: var(--color-navy); padding: 22px 18px; transition: background 0.2s ease; }
.faq-q:hover { background: #f7fafc; }
.faq-icon { flex: 0 0 auto; font-family: var(--font-bold); color: var(--color-green); font-size: 26px; line-height: 1; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { margin: 0; padding: 0 18px 22px; font-size: 15px; color: var(--color-text); line-height: 1.7; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a-inner { background: #eef6fb; }

/* ----- FOOTER ----- */
.footer { background: var(--color-navy); color: #fff; padding: 70px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: 48px; padding-bottom: 40px; align-items: start; } /* brand col wider; middle (Our Solutions) tighter so it doesn't float */
.footer-logo img { height: 72px; width: auto; margin-bottom: 16px; } /* landscape honu wordmark, transparent PNG on navy */
.footer-logo p { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; margin-top: 12px; }
.footer-social a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75); font-size: 14px; transition: border-color 0.2s, color 0.2s; }
.footer-social a:hover { border-color: #fff; color: #fff; }
.footer-social a svg { height: 15px; width: auto; fill: currentColor; }
.footer h4 { font-family: var(--font-semibold); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 20px; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,0.75); transition: color 0.2s; }
.footer-links a:hover { color: #fff; }
.footer-contact-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.footer-contact-item i { color: rgba(255,255,255,0.6); margin-top: 2px; width: 16px; }
.footer-contact-item .fci-icon { width: 15px; height: 15px; fill: var(--color-green); flex: 0 0 auto; margin-top: 2px; }
.footer-contact-item span { font-size: 14px; color: rgba(255,255,255,0.75); }
.footer-contact-item span a { color: rgba(255,255,255,0.75); }
.footer-contact-item span a:hover { color: #fff; }
.footer-badges { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.footer-badge { display: inline-block; border: 1px solid rgba(255,255,255,0.25); padding: 6px 10px; font-size: 12px; color: rgba(255,255,255,0.75); text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.footer-badge:hover { border-color: rgba(255,255,255,0.6); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.55); }
/* Bottom nav row: stays on ONE line (nowrap); middot separators; scrolls on tiny screens rather than wrapping/colliding */
.footer-bottom-links { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; max-width: 100%; overflow-x: auto; }
.footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s; }
.footer-bottom-links a:hover { color: #fff; }
.footer-bottom-links a:not(:last-child)::after { content: "·"; margin: 0 12px; color: rgba(255,255,255,0.3); }

/* ----- RESPONSIVE ----- */
@media (max-width: 1024px) {
  .card-grid-3, .work-grid, .reviews-carousel { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .topbar .container { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-menu { display: none; } /* mobile menu toggle handled in JS template fragment */
  h1, .hero-text h1 { font-size: 30px; }
  h2, .section-title { font-size: 24px; }
  .hero-text p { font-size: 18px; }
  .banner h2 { font-size: 30px; }
  .card-grid-3, .card-grid-2, .work-grid, .reviews-carousel, .stat-band { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 10px 8px; }
}

/* ============================================================
   PAGE-SPECIFIC BLOCKS
   The live /seo/ page loads these as 4 separate Elementor stylesheets.
   In the static rebuild they live here as ONE file (fewer requests =
   faster page = the site-speed wedge). Keep these grouped and commented
   by block. Other pillars add their own block here as they're built.
   ------------------------------------------------------------ */

/* --- /seo/ : "Why Choose Us" two-column intro --- */
.seo-why { padding: 60px 0; background: #fff; }
.seo-why .eyebrow { font-family: var(--font-regular); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-green); margin-bottom: 8px; }
.seo-why h2 { margin-bottom: 16px; }
.seo-why p { margin-bottom: 16px; }

/* --- /seo/ : stats bar ("Why SEO Still Matters") --- */
.seo-stats { background: var(--color-light-bg); padding: 50px 0; }
.seo-stats .stat-band .num { color: var(--color-navy); }

/* --- /seo/ : Honolulu section (merged-in local SEO) --- */
.seo-honolulu { padding: 60px 0; background: #fff; scroll-margin-top: 90px; }
.seo-honolulu h2 { margin-bottom: 16px; }
.seo-honolulu h3 { color: var(--color-navy); margin: 24px 0 10px; }

/* --- /seo/ : AI search + E-E-A-T grid --- */
.eeat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.eeat-card { background: #fff; border: 1px solid #e3e8ee; padding: 24px; text-align: center; box-shadow: var(--card-shadow); }
.eeat-card .letter { font-family: var(--font-bold); font-size: 40px; color: var(--color-green); line-height: 1; margin-bottom: 8px; }
.eeat-card h4 { color: var(--color-navy); margin-bottom: 8px; }
.eeat-card p { font-size: 13px; line-height: 1.6; }

/* --- /seo/ : case-study snapshot --- */
.case-snapshot { background: var(--color-navy); color: #fff; padding: 50px 0; }
.case-snapshot .stat-band .num { color: #fff; }
.case-snapshot .stat-band .desc { color: rgba(255,255,255,0.8); }

/* --- /seo/ : process steps --- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.process-step h3 { color: var(--color-navy); margin-bottom: 8px; }
.process-step p { font-size: 14px; line-height: 1.6; }

@media (max-width: 1024px) {
  .eeat-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .eeat-grid, .process-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TEMPLATE INTERACTIVITY (sitewide — vanilla JS, no deps)
   Mobile nav toggle + FAQ accordion collapsed state.
   The markup hooks (.nav-toggle, .faq-item.open) are reused by
   every page; JS lives in a deferred fragment at end of <body>.
   ------------------------------------------------------------ */

/* ----- MOBILE NAV TOGGLE ----- */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-navy); margin: 5px 0; border-radius: 2px; }
@media (max-width: 768px) {
  .nav-toggle { display: block; margin-left: auto; } /* keep hamburger pinned right (mobile unchanged) */
  .navbar .container { position: relative; gap: 0; }
  .navbar nav { flex: 0 0 auto; } /* don't grow on mobile */
  .nav-cta { display: none; } /* mobile: Contact lives in the hamburger menu (unchanged) */
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.1); padding: 8px 0; }
  .nav-menu.open { display: flex; }
  .nav-menu > li.nav-contact { display: block; background: transparent; }
  .nav-menu > li.nav-contact > a { color: var(--color-green); }
  .dropdown { display: block; position: static; box-shadow: none; border-top: 0; min-width: 0; padding-left: 14px; }
}

/* ----- FAQ accordion styling lives in the FAQ block above (animated grid-rows). ----- */

/* ----- NAVY CONTENT SECTION (reusable utility — dark band with readable text)
   Established for the /seo/ co-primary Honolulu band; reused by future pillars.
   Uses the --color-navy token; not a one-off. ----- */
.section-navy { background: var(--color-navy); color: #fff; padding: 60px 0; scroll-margin-top: 90px; }
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }
.section-navy h3 { margin: 24px 0 10px; }
.section-navy p { color: rgba(255,255,255,0.88); }
.section-navy .section-label-top,
.section-navy .eyebrow { color: var(--color-green); }

/* ----- 3-up stat row variant (case-study trio) ----- */
.stat-band.is-trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .stat-band.is-trio { grid-template-columns: 1fr; } }

/* ----- COMPACT SERVICE ROWS (.svc) — tight two-column list, NOT cards.
   Small green icon + bold name + one-line desc per row, thin divider.
   Reusable wherever a dense service/feature list is needed. ----- */
.svc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.svc { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e3e8ee; }
.svc-icon { flex: 0 0 auto; color: var(--color-green); margin-top: 3px; }
.svc-icon svg { display: block; width: 18px; height: 18px; }
.svc-body { min-width: 0; }
.svc-body h3 { font-family: var(--font-semibold); font-size: 15px; color: var(--color-navy); margin: 0 0 2px; line-height: 1.3; }
.svc-body p { font-size: 13.5px; color: var(--color-text); line-height: 1.45; margin: 0; }
@media (max-width: 768px) { .svc-list { grid-template-columns: 1fr; column-gap: 0; } }

/* ----- CASE STUDY (navy card inside a white section — stat-tiles layout) -----
   Spans the shared .container width so its edges align with every other section. */
.cs-card { background:var(--color-navy); color:#fff; border-radius:14px; padding:40px; }
.cs-card .cs-eyebrow { font-family:var(--font-regular); font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--color-green); margin-bottom:6px; }
.cs-card h2 { color:#fff; font-size:28px; line-height:1.2; margin-bottom:24px; }
.cs-card p { color:rgba(255,255,255,0.85); }
.cs-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
.cs-tile { background:rgba(255,255,255,0.08); border-radius:12px; padding:24px; text-align:center; }
.cs-tile.hl { background:var(--color-green); }
.cs-tile .n { font-family:var(--font-bold); font-size:40px; line-height:1; color:#fff; }
.cs-tile .l { font-size:13px; color:rgba(255,255,255,0.85); margin-top:8px; line-height:1.4; }
.cs-story p { margin-bottom:16px; }
.cs-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:8px; }
.cs-verify { font-family:var(--font-medium); font-size:14px; color:#fff; text-decoration:underline; text-underline-offset:3px; }
.cs-verify:hover { color:var(--color-green); }
@media (max-width:768px){ .cs-tiles { grid-template-columns:1fr; } }

/* ----- HERO TRUST BAR ICONS ----- */
.trust-bar .ti-icon { width:16px; height:16px; fill:var(--color-green); flex:0 0 auto; }
/* 4.8/5 → 4 full stars + 5th star ~80% filled. Layered pure-CSS: gold overlay clipped to 96% over dim base stars.
   letter-spacing:0 so the 96% fill maps to the glyphs correctly (trailing letter-spacing was making it read as 5 full). No JS. */
.ti-stars { position:relative; display:inline-block; font-size:19px; line-height:1; letter-spacing:0; color:#c7cedd; vertical-align:-3px; }
.ti-stars::before { content:"★★★★★"; position:absolute; left:0; top:0; width:96%; overflow:hidden; white-space:nowrap; color:#f5c518; }

/* ----- OWNER INTRO (headshot + copy, e.g. "Why You" section) ----- */
.owner-intro { display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:center; }
.owner-intro img { width:100%; height:auto; border-radius:12px; box-shadow:var(--card-shadow); }
@media (max-width:768px){ .owner-intro { grid-template-columns:1fr; gap:24px; } .owner-intro img { max-width:300px; } }

/* ----- HERO COVERAGE LINE (text only, sits between subhead and CTAs) ----- */
.hero-coverage { display:inline-flex; align-items:center; gap:7px; margin:0 auto 22px; font-family:var(--font-medium); font-size:14px; color:rgba(255,255,255,0.85); }
.hero-coverage svg { width:15px; height:15px; fill:var(--color-green); flex:0 0 auto; }

/* ----- SEO ACROSS THE ISLANDS (hub -> spoke: featured Oahu + 2x2 neighbors) ----- */
.islands-split { display:grid; grid-template-columns:1fr 2fr; gap:24px; margin-top:36px; }
.island-oahu { background:var(--color-green); color:#fff; border-radius:14px; padding:26px 28px; display:flex; flex-direction:column; justify-content:center; }
.island-oahu .io-icon { width:38px; height:38px; fill:#fff; margin-bottom:14px; }
.island-oahu h3 { color:#fff; font-family:var(--font-bold); font-size:22px; margin:0 0 6px; }
.island-oahu p { color:rgba(255,255,255,0.92); font-size:14px; margin:0; }
.islands-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:16px; height:100%; }
.island-card { display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:16px 20px; transition:border-color .2s, box-shadow .2s, transform .2s; }
.island-card:hover { border-color:var(--color-green); box-shadow:var(--card-shadow); transform:translateY(-2px); }
.island-card .ic-row { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; max-width:200px; }
.island-card h3 { color:var(--color-navy); font-family:var(--font-semibold); font-size:18px; margin:0; }
.island-card .view { color:var(--color-green); font-family:var(--font-medium); font-size:14px; white-space:nowrap; }
@media (max-width:768px){ .islands-split { grid-template-columns:1fr; } }

/* ----- AREA CHIPS (ISLAND/LOCAL stack — service-area town pills) ----- */
.area-chips { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 16px; }
.area-chips span { background:#fff; border:1px solid #e3e8ee; border-radius:999px; padding:8px 16px; font-family:var(--font-medium); font-size:14px; color:var(--color-navy); }

/* ----- PROCESS STEPS (IT/TECHNICAL stack — numbered sequential process) ----- */
/* OUR PROCESS — horizontal numbered stepper (SHARED; layout only; variable step count; vertical on mobile).
   Markup unchanged: .process-steps > .process-step-row(.process-step-num + .process-step-body). */
.process-steps { display:flex; align-items:flex-start; justify-content:center; gap:0; max-width:1000px; margin:12px auto 0; }
.process-step-row { position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 14px; }
/* connector: from this step's circle-center to the next step's circle-center (hidden on the last step) */
.process-step-row::after { content:""; position:absolute; top:23px; left:50%; width:100%; height:2px; background:#cfe0ee; z-index:0; }
.process-step-row:last-child::after { display:none; }
.process-step-num { position:relative; z-index:1; flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--color-navy); color:#fff; font-family:var(--font-bold); font-size:18px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.process-step-body h3 { font-family:var(--font-semibold); font-size:16px; color:var(--color-navy); margin:0 0 6px; }
.process-step-body p { font-size:14px; color:var(--color-text); line-height:1.6; margin:0; }
@media (max-width:768px){
  .process-steps { flex-direction:column; align-items:stretch; max-width:560px; }
  .process-step-row { flex-direction:row; align-items:flex-start; text-align:left; gap:16px; padding:0 0 26px; }
  .process-step-row:last-child { padding-bottom:0; }
  .process-step-num { margin-bottom:0; }
  .process-step-row::after { top:46px; left:23px; width:2px; height:100%; } /* vertical connector on mobile */
}

/* ----- CHECK LIST (IT/TECHNICAL stack — 2-col compliance/feature bullets) ----- */
.check-list { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; margin:8px 0 0; }
.check-list li { display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--color-text); line-height:1.5; }
.check-list li svg { flex:0 0 auto; width:16px; height:16px; fill:var(--color-green); margin-top:3px; }
@media (max-width:768px){ .check-list { grid-template-columns:1fr; } }

/* ----- STAT SOURCES caption ----- */
.stat-sources { font-size:12px; color:#8a93a0; text-align:center; margin-top:18px; }

/* ----- E-COMMERCE "How we work" — PAGE-SCOPED phase bands (do NOT confuse with the shared
   .post-prose ol; this is /e-commerce-websites/ only). 3 stacked full-width tinted bands;
   continuous 1–8 numbering via one counter; per-band column count avoids tall-step mismatch. */
.ecom-phases { counter-reset:ecom-step; max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
/* .ecom-phase frame — matches the canonical .service-card treatment (green border, radius, shadow). */
.ecom-phase { background:#fff; border:2px solid var(--color-green); border-radius:12px; padding:28px 26px; box-shadow:var(--card-shadow); }
.ecom-phase-label { font-family:var(--font-bold); font-size:15px; text-transform:uppercase; letter-spacing:1px; color:var(--color-navy); margin:0 0 18px; }
.ecom-phase-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:20px 36px; }
.ecom-phase-steps.two-up { grid-template-columns:1fr 1fr; }
.ecom-phase-steps li { counter-increment:ecom-step; position:relative; padding-left:40px; font-size:15px; line-height:1.6; color:var(--color-text); }
.ecom-phase-steps li::before { content:counter(ecom-step) "."; position:absolute; left:0; top:-2px; font-family:var(--font-bold); color:var(--color-green); font-size:20px; }
.ecom-phase-steps strong { color:var(--color-heading); font-family:var(--font-semibold); }
@media (max-width:768px){ .ecom-phase-steps.two-up { grid-template-columns:1fr; } .ecom-phase { padding:20px 18px; } }

/* ----- LOGO DESIGN page (PAGE-SCOPED: /logo-design-development/ only) ----- */
.logo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1000px; margin:34px auto 0; }
.logo-tile { background:#fff; border:1px solid #e3e8ee; border-radius:10px; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; padding:22px; }
.logo-tile img { max-width:100%; max-height:92px; width:auto; height:auto; object-fit:contain; }
@media (max-width:900px){ .logo-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .logo-grid { grid-template-columns:repeat(2,1fr); } }

.logo-principles { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:900px){ .logo-principles { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .logo-principles { grid-template-columns:1fr; } }

.logo-pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1040px; margin:40px auto 0; }
.price-tier { background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:28px 26px; display:flex; flex-direction:column; }
.price-tier.is-featured { border:2px solid var(--color-green); box-shadow:var(--card-shadow); }
.price-badge { align-self:flex-start; background:var(--color-green); color:#fff; font-family:var(--font-semibold); font-size:12px; text-transform:uppercase; letter-spacing:1px; padding:4px 12px; border-radius:999px; margin-bottom:14px; }
.price-tier .tier-name { font-family:var(--font-regular); font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--color-green); margin:0 0 12px; }
.price-tier .tier-price { font-family:var(--font-bold); font-size:30px; color:var(--color-navy); line-height:1; margin:0; }
.price-tier .tier-price span { font-family:var(--font-regular); font-size:15px; color:var(--color-text); }
.price-tier .tier-desc { font-size:14px; color:var(--color-text); line-height:1.6; margin:10px 0 18px; }
.price-tier ul { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px; }
.price-tier li { position:relative; padding-left:26px; font-size:14px; color:var(--color-text); line-height:1.5; }
.price-tier li::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--color-green); font-family:var(--font-bold); }
.price-tier .btn { margin-top:auto; }
@media (max-width:860px){ .logo-pricing { grid-template-columns:1fr; max-width:480px; } }

.logo-pills { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }
.logo-pill { border:1px solid rgba(255,255,255,0.45); color:#fff; border-radius:999px; padding:9px 18px; font-family:var(--font-medium); font-size:14px; }
a.logo-pill:hover { background:rgba(255,255,255,0.12); }

/* ----- CONTACT (details block + placeholder form; SHARED contact component) ----- */
.contact-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start; max-width:1000px; margin:0 auto; text-align:left; }
.contact-details h3 { font-family:var(--font-semibold); font-size:18px; color:var(--color-navy); margin:0 0 18px; }
.contact-heading { font-family:var(--font-bold); font-size:30px; color:var(--color-navy); margin:0 0 14px; }
.contact-heading::after { content:""; display:block; width:60px; height:3px; background:var(--color-green); margin-top:12px; border-radius:2px; }
.contact-intro { font-size:15px; color:var(--color-text); line-height:1.7; margin:0 0 26px; }
.form-thankyou { background:#eafaf0; border:1px solid var(--color-green); border-radius:10px; padding:16px 18px; margin-top:18px; }
.form-thankyou p { margin:0; color:var(--color-navy); font-size:15px; line-height:1.6; }
/* Map: container reserves the final height up front (no CLS); neutral bg so the pre-load
   state matches the page instead of flashing gray when the iframe populates. */
.contact-map { line-height:0; background:var(--color-light-bg); height:460px; }
.contact-map iframe { display:block; width:100%; height:100%; border:0; background:var(--color-light-bg); }
@media (max-width:768px){ .contact-map { height:320px; } }
.contact-detail { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; font-size:15px; color:var(--color-text); line-height:1.6; }
.contact-detail svg { flex:0 0 auto; width:20px; height:20px; fill:var(--color-navy); margin-top:2px; }
.contact-detail a { color:var(--color-navy); font-family:var(--font-medium); }
.contact-hours { margin:24px 0 0; }
.contact-hours dt { font-family:var(--font-semibold); color:var(--color-navy); font-size:15px; margin-bottom:8px; }
.contact-hours dd { margin:0; font-size:15px; color:var(--color-text); line-height:1.9; }
.wsh-form { background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:28px; box-shadow:var(--card-shadow); }
.wsh-form .form-row { margin-bottom:18px; }
.wsh-form label { display:block; font-family:var(--font-medium); font-size:14px; color:var(--color-navy); margin-bottom:7px; }
.wsh-form input, .wsh-form textarea { width:100%; box-sizing:border-box; font-family:var(--font-regular); font-size:15px; color:var(--color-heading); background:#fff; border:1px solid #cfd8e3; border-radius:8px; padding:12px 14px; transition:border-color .15s ease; }
.wsh-form input:focus, .wsh-form textarea:focus { outline:none; border-color:var(--color-green); }
.wsh-form textarea { min-height:150px; resize:vertical; }
.wsh-form .btn[disabled] { opacity:.55; cursor:not-allowed; pointer-events:none; }
.form-note { font-size:13px; color:#8a93a0; margin:12px 0 0; line-height:1.5; }
/* contact form: selects styled like inputs, 2-up rows, required marker, inline status */
.wsh-form select { width:100%; box-sizing:border-box; font-family:var(--font-regular); font-size:15px; color:var(--color-heading); background:#fff; border:1px solid #cfd8e3; border-radius:8px; padding:12px 38px 12px 14px; transition:border-color .15s ease; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23012a5e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; }
.wsh-form select:focus { outline:none; border-color:var(--color-green); }
.wsh-form .form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.wsh-form .req { color:#d33; }
#wsh-form-status { margin:14px 0 0; font-family:var(--font-medium); font-size:14px; line-height:1.5; color:var(--color-navy); }
@media (max-width:768px){ .wsh-form .form-grid-2 { grid-template-columns:1fr; } }
@media (max-width:768px){ .contact-grid { grid-template-columns:1fr; gap:32px; } }

/* ----- HERO CARDS (IT/enterprise stack — 3-up value props inside the navy hero) ----- */
.hero-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; text-align:left; }
.hero-card { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:12px; padding:22px 24px; }
.hero-card h3 { color:#fff; font-family:var(--font-semibold); font-size:17px; margin:0 0 8px; }
.hero-card p { color:rgba(255,255,255,0.82); font-size:14px; line-height:1.5; margin:0; }
@media (max-width:768px){ .hero-cards { grid-template-columns:1fr; } }

/* ----- SPLIT-2 (two-column content layout — e.g. process + why-choose) ----- */
.split-2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.split-2 .col-head { font-family:var(--font-bold); font-size:22px; color:var(--color-heading); margin:0 0 18px; }
@media (max-width:768px){ .split-2 { grid-template-columns:1fr; gap:32px; } }

/* inline-SVG icons inside the boxed .service-card */
.service-card .icon svg { width:42px; height:42px; fill:var(--color-navy); display:block; }
.check-list.one-col { grid-template-columns:1fr; }

/* ----- PORTFOLIO GALLERY (filterless client-work grid) ----- */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
.portfolio-tile {
  display:block; background:#fff; border:1px solid #e4ecf3; border-radius:12px; overflow:hidden;
  text-decoration:none; color:inherit; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
a.portfolio-tile:hover { box-shadow:0 10px 28px rgba(1,42,94,0.14); transform:translateY(-3px); border-color:#cfe0ee; }
.portfolio-thumb {
  position:relative; aspect-ratio:16 / 10; width:100%; background:var(--color-light-bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.portfolio-thumb img { transition:transform .25s ease, opacity .2s ease; }
.portfolio-thumb img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; padding:6px; box-sizing:border-box; }
.portfolio-thumb.is-pending {
  background:var(--color-navy);
  flex-direction:column; gap:8px; padding:18px; text-align:center;
}
.portfolio-thumb.is-pending .ph-mark { width:34px; height:34px; opacity:.85; }
.portfolio-thumb.is-pending .ph-note {
  color:rgba(255,255,255,0.78); font-family:var(--font-medium); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
}
/* === LAUNCH HIDE (2026-06-09): pending tiles (awaiting real images) are hidden but PRESERVED in source.
   To REVEAL a tile: replace its `<div class="portfolio-thumb is-pending" data-pending-img="...">…</div>`
   with `<div class="portfolio-thumb"><img src="..." alt="..." loading="lazy" decoding="async"></div>`
   (per the drop-in template in src/portfolio/main.html) — once .is-pending is gone the tile auto-shows.
   Remove this one rule to un-hide all pending tiles at once. === */
.portfolio-grid a.portfolio-tile:has(.portfolio-thumb.is-pending) { display:none; }
.portfolio-cap {
  padding:14px 16px; font-family:var(--font-semibold); font-size:15px; color:var(--color-heading);
  text-align:center; line-height:1.35;
}
a.portfolio-tile:hover .portfolio-cap { color:var(--color-navy); }
/* hover cue (no buttons): the thumb dims slightly on hover — applies to ALL tiles */
.portfolio-thumb::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(1,42,94,0.30); opacity:0; transition:opacity .2s ease;
}
.portfolio-tile:hover .portfolio-thumb::before { opacity:1; }
/* "Visit site ↗" affordance — LINKED tiles only; display-only tiles get the dim but no cue */
a.portfolio-tile .portfolio-thumb::after {
  content:"Visit site \2197"; position:absolute; z-index:2; left:50%; top:50%;
  transform:translate(-50%, calc(-50% + 8px)); opacity:0; pointer-events:none; white-space:nowrap;
  background:#fff; color:var(--color-navy); font-family:var(--font-semibold); font-size:13px;
  padding:8px 15px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,0.18);
  transition:opacity .2s ease, transform .2s ease;
}
a.portfolio-tile:hover .portfolio-thumb::after { opacity:1; transform:translate(-50%, -50%); }
/* on a pending tile, fade the placeholder marks on hover so the Visit-site cue reads cleanly */
a.portfolio-tile:hover .portfolio-thumb.is-pending .ph-mark,
a.portfolio-tile:hover .portfolio-thumb.is-pending .ph-note { opacity:0.16; transition:opacity .2s ease; }
@media (max-width:1024px){ .portfolio-grid { grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (max-width:768px){ .portfolio-grid { grid-template-columns:1fr; } }

/* ----- BLOG / ARTICLE (post template + /blog/ index) -----
   Establishes the reusable post chrome: navy post-hero header, readable prose column,
   and a blog-index card grid. Reuses .faq-list/.faq-item (already styled) for post FAQs. */
.post-hero { background:var(--color-navy); color:#fff; padding:var(--hero-pad-top) 0 44px; }
.post-hero .container { max-width:820px; }
.breadcrumb { font-family:var(--font-medium); font-size:13px; margin-bottom:16px; }
.breadcrumb a { color:rgba(255,255,255,0.78); }
.breadcrumb a:hover { color:#fff; }
.breadcrumb .sep { color:rgba(255,255,255,0.5); margin:0 6px; }
.post-hero .post-eyebrow { color:var(--color-green); font-family:var(--font-regular); font-size:13px; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.post-hero h1 { font-family:var(--font-bold); font-size:38px; color:#fff; line-height:1.18; margin-bottom:16px; }
.post-meta { font-family:var(--font-medium); font-size:14px; color:rgba(255,255,255,0.78); display:flex; flex-wrap:wrap; gap:6px 16px; }

.post-body { background:#fff; padding:52px 0; }
.post-wrap { max-width:900px; margin:0 auto; }   /* content width — feature image + FAQ/bio bands span this */
.post-prose { max-width:720px; margin:0 auto; }  /* text measure ~70 chars, narrower than .post-wrap so text isn't boxed wide */
.post-faq { max-width:900px; margin:40px auto 0; }
.post-faq .faq-h { margin-top:0; }
.post-prose > p { font-size:17px; line-height:1.75; color:var(--color-text); margin:0 0 20px; }
.post-prose h2 { font-family:var(--font-bold); font-size:25px; color:var(--color-heading); margin:38px 0 14px; }
.post-prose h3 { font-family:var(--font-semibold); font-size:19px; color:var(--color-navy); margin:28px 0 10px; }
.post-prose ul, .post-prose ol { margin:0 0 20px; padding-left:24px; }
.post-prose ul { list-style:disc; }
.post-prose ol { list-style:decimal; }
.post-prose li { font-size:17px; line-height:1.7; color:var(--color-text); margin-bottom:10px; }
.post-prose li::marker { color:var(--color-green); }
.post-prose a { color:var(--color-green); font-family:var(--font-medium); text-decoration:underline; text-underline-offset:2px; }
.post-prose a:hover { color:var(--color-green-hover); }
.post-prose strong { color:var(--color-heading); font-family:var(--font-semibold); }
.post-prose em { font-style:italic; }
.post-prose .faq-h { margin-top:40px; }
.post-prose .faq-list { margin-top:8px; }
@media (max-width:768px){ .post-hero h1 { font-size:29px; } .post-prose > p, .post-prose li { font-size:16px; } }

/* /blog/ index — card grid of keeper posts */
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:8px; }
.blog-card {
  display:flex; flex-direction:column; background:#fff; border:1px solid #e4ecf3; border-radius:12px;
  padding:26px 26px 24px; text-decoration:none; color:inherit;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.blog-card:hover { box-shadow:0 10px 28px rgba(1,42,94,0.14); transform:translateY(-3px); border-color:#cfe0ee; }
.blog-card .bc-meta { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.blog-card .bc-cat { font-family:var(--font-regular); font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--color-green); }
.blog-card .bc-date { font-family:var(--font-regular); font-size:12px; color:#8a97a6; white-space:nowrap; } /* secondary metadata — small & muted, must not compete with title/excerpt */
.blog-card h2 { font-family:var(--font-semibold); font-size:20px; color:var(--color-heading); line-height:1.3; margin:0 0 10px; }
.blog-card:hover h2 { color:var(--color-navy); }
.blog-card p { font-size:15px; line-height:1.65; color:var(--color-text); margin:0 0 16px; }
.blog-card .bc-more { margin-top:auto; font-family:var(--font-semibold); font-size:14px; color:var(--color-navy); }
@media (max-width:768px){ .blog-grid { grid-template-columns:1fr; } }
.blog-card .bc-thumb { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px; margin-bottom:14px; display:block; }

/* ----- BLOG POST: feature image, byline, author bio, related reading ----- */
.post-feature { width:100%; border-radius:12px; margin:0 0 28px; display:block; aspect-ratio:16/9; object-fit:cover; }
.post-byline { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:14px; font-family:var(--font-medium); font-size:14px; color:rgba(255,255,255,0.82); }
.post-byline a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.post-byline .pb-sep { color:rgba(255,255,255,0.4); }
.author-bio { display:flex; gap:20px; align-items:flex-start; margin:44px 0 8px; padding:24px; background:var(--color-light-bg); border-radius:12px; border-left:3px solid var(--color-green); }
.author-bio img { flex:0 0 auto; width:72px; height:72px; border-radius:50%; object-fit:cover; }
.author-bio h3 { font-family:var(--font-semibold); font-size:17px; color:var(--color-heading); margin:0 0 6px; }
.author-bio .ab-role { font-family:var(--font-regular); font-size:13px; color:var(--color-green); text-transform:uppercase; letter-spacing:0.5px; margin:0 0 8px; }
.author-bio p { font-size:15px; line-height:1.65; color:var(--color-text); margin:0; }
.related-reading { margin:44px 0 0; }
.related-reading h2 { font-family:var(--font-bold); font-size:22px; color:var(--color-heading); margin:0 0 18px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.related-card { display:block; background:#fff; border:1px solid #e4ecf3; border-radius:10px; padding:18px; text-decoration:none; color:inherit; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.related-card:hover { box-shadow:0 8px 22px rgba(1,42,94,0.12); transform:translateY(-2px); border-color:#cfe0ee; }
.related-card .rc-cat { font-family:var(--font-regular); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--color-green); }
.related-card h3 { font-family:var(--font-semibold); font-size:15px; color:var(--color-heading); line-height:1.35; margin:8px 0 0; }
.related-card:hover h3 { color:var(--color-navy); }
@media (max-width:768px){ .related-grid { grid-template-columns:1fr; } .author-bio { flex-direction:column; gap:14px; } }

/* blog index topic filter chips (in hero; filter the grid ON-PAGE, NOT /category/ links) */
.blog-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.blog-chip { font-family:var(--font-medium); font-size:13px; text-transform:uppercase; letter-spacing:0.04em; color:#fff; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.35); border-radius:999px; padding:8px 18px; cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
.blog-chip:hover { border-color:#fff; }
.blog-chip.active { background:var(--color-green); border-color:var(--color-green); color:#fff; }

/* ----- CLIENT SPOTLIGHT — equal-height 3-up showcase grid (scalable; identical card anatomy) ----- */
.spotlight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; align-items:stretch; }
.spotlight-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e4ecf3; border-radius:12px; overflow:hidden; }
.spotlight-card .sc-thumb { width:100%; aspect-ratio:16 / 10; object-fit:cover; display:block; } /* matched crop on every card */
.spotlight-card .sc-body { display:flex; flex-direction:column; flex:1 1 auto; padding:22px 24px 24px; }
.spotlight-card .sc-region { font-family:var(--font-regular); font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--color-green); margin:0 0 6px; }
.spotlight-card h3 { font-family:var(--font-semibold); font-size:19px; color:var(--color-navy); margin:0 0 4px; }
.spotlight-card .sc-loc { font-family:var(--font-medium); font-size:14px; color:var(--color-text); margin:0 0 12px; }
.spotlight-card .sc-desc { font-size:14px; line-height:1.6; color:var(--color-text); margin:0 0 14px; } /* no clamp — descriptions are length-balanced complete sentences */
.spotlight-card .sc-tags { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 16px; } /* fixed 2x2 — 4 pills never orphan, identical across cards */
.spotlight-card .sc-tags span { background:var(--color-light-bg); border:1px solid #e3e8ee; border-radius:999px; padding:5px 12px; font-family:var(--font-medium); font-size:12px; color:var(--color-navy); text-align:center; }
.spotlight-card .sc-link { margin-top:auto; font-family:var(--font-semibold); font-size:14px; color:var(--color-navy); } /* locked to bottom edge */
.spotlight-card .sc-link:hover { color:var(--color-green); }
@media (max-width:1024px){ .spotlight-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .spotlight-grid { grid-template-columns:1fr; } }

/* ----- PROSE PARAGRAPH SPACING (global fix) -----
   The base reset zeroes <p> margins, so consecutive prose paragraphs that are DIRECT children of a
   section container butted together with no gap (e.g. the navy "Why it matters" block). Restore spacing
   ONLY between adjacent prose paragraphs at the section-container level — component-internal paragraphs
   (cards, FAQ, stats, .post-prose, etc.) are nested deeper and stay untouched. */
.section-navy > .container > p + p,
.section-light > .container > p + p,
.section-white > .container > p + p { margin-top: 1.1em; }