/*
Theme Name: Old Hand SEO
Theme URI: https://oldhandseo.com
Author: Old Hand SEO
Author URI: https://oldhandseo.com
Description: Lean, dependency-free WordPress theme for a local-business SEO agency. Styled after 1970s British press advertising: bold slab headlines, long-copy serif body text, ribbon badges, hairline rules, two-colour print palette. Built for speed. Content is built with Elementor; the theme supplies fonts, colours and the header/footer.
Version: 1.4.7
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: oldhand-seo
*/

/* ==========================================================================
   0. DESIGN TOKENS
   Palette lifted from the Old Hand SEO mark: deep navy ring, cream ground,
   maroon outline, brass/gold pin, red locator.
   ========================================================================== */

:root{
  --navy: #1c3358;
  --navy-dark: #12233d;
  --navy-tint: #e9edf3;
  --cream: #f6efdf;
  --cream-deep: #efe4cb;
  --paper: #fbf7ec;
  --maroon: #3a2015;
  --gold: #c69a3e;
  --gold-deep: #a97f28;
  --red: #b3402c;
  --ink: #1c1a16;
  --ink-soft: #4a463d;
  --white: #ffffff;
  --line: rgba(28,26,22,0.12);

  --font-display: 'Roboto Slab', 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --font-body: 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-label: 'Roboto Slab', Georgia, serif;

  --container: 1180px;
  --grid-gap: clamp(1.25rem, 2vw, 2.25rem);
  --radius: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(28,51,88,.05), 0 2px 6px rgba(28,51,88,.06);
  --shadow-md: 0 6px 20px rgba(28,51,88,.10), 0 2px 6px rgba(28,51,88,.05);
  --shadow-lg: 0 18px 44px rgba(18,35,61,.22);
}

/* ==========================================================================
   1. RESET
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,p,figure{ margin: 0; }
button{ font: inherit; cursor: pointer; }
input, textarea, select{ font: inherit; }

/* Halftone dot texture — retired. It was meant as a period print detail,
   but repeated on every hero/page-hero across the site it read as visual
   noise competing with the copy rather than as a considered accent, which
   was the biggest single complaint about the site looking unpolished.
   Selector kept as a no-op so the .halftone class left in Elementor content
   stays harmless. The "solid ground behind text" rules that used to hide
   the dot texture under copy are gone too — with no dots left to hide,
   they only ever showed up as a stray flat rectangle sitting on top of the
   new navy gradients. */
.halftone{ background-image: none; }

.profile-block{ background: var(--navy-dark); }

/* Fine paper-grain texture, baked as a low-alpha SVG noise filter rather
   than a bitmap or a visible dot pattern — reads as tactile print quality
   at a glance and disappears the moment you look for it, unlike the old
   halftone dots it replaces. */
body{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Scroll-triggered entrance animation. main.js adds .reveal-init (which
   starts an element invisible) only once it has confirmed JS + IntersectionObserver
   are available and the visitor hasn't requested reduced motion — so this
   rule is inert, and content stays fully visible, for anyone else. */
.reveal-init{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.16,.84,.44,1), transform .65s cubic-bezier(.16,.84,.44,1);
}
.reveal-init.is-visible{ opacity: 1; transform: none; }

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;  background: var(--navy);
  color: var(--white);
  padding: .75rem 1.25rem;
  z-index: 999;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5.6vw, 4.3rem); letter-spacing: -0.02em; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size: 1.35rem; }
h4{ font-size: 1.05rem; }

.lede{
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--maroon);
}
.eyebrow::before{
  content: "";
  width: 22px; height: 2px;
  background: var(--red);
  display: inline-block;
}

section .eyebrow{ margin-bottom: .9rem; }

/* ==========================================================================
   3. BUTTONS & BADGES
   ========================================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  padding: .85em 1.6em;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--cream);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(28,51,88,.15), 3px 3px 0 var(--gold);
}
.btn:hover{ transform: translate(-2px,-2px); box-shadow: 0 4px 10px rgba(28,51,88,.18), 4px 4px 0 var(--gold); }
.btn:active{ transform: translate(0,0); box-shadow: 1px 1px 0 var(--gold); }

.btn--ghost{
  background: var(--paper);
  color: var(--navy);
  box-shadow: 3px 3px 0 var(--navy-tint);
}
.btn--ghost:hover{ box-shadow: 4px 4px 0 var(--navy-tint); }

.btn--on-navy{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-dark);
  box-shadow: 3px 3px 0 var(--cream);
}
.btn--on-navy:hover{ box-shadow: 4px 4px 0 var(--cream); }

.btn--small{ padding: .6em 1.15em; font-size: .82rem; }

/* Ribbon badge — echoes the wordmark ribbon in the logo */
.ribbon{
  position: relative;
  display: inline-block;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .5em 1.3em;
}
.ribbon::before, .ribbon::after{
  content: "";
  position: absolute;
  top: 0;
  border-style: solid;
  height: 100%;
}
.ribbon::before{
  left: -14px;
  border-width: 0.85em 14px 0.85em 0;
  border-color: transparent var(--navy) transparent transparent;
}
.ribbon::after{
  right: -14px;
  border-width: 0.85em 0 0.85em 14px;
  border-color: transparent transparent transparent var(--navy);
}

/* Circular "stamp" badge for trust markers */
.stamp{
  width: 108px; height: 108px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  outline: 1px solid var(--navy);
  outline-offset: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-label);
  color: var(--navy);
  flex: none;
}
.stamp strong{ font-size: 1.5rem; line-height: 1; }
.stamp span{ font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .25rem; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.site-header{
  background: rgba(251,247,236,.7);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Picks up a solid ground + hairline + shadow once main.js confirms the
   page has actually scrolled — a subtle "gains weight" cue rather than a
   flat, always-on bar. */
.site-header.is-scrolled{
  background: rgba(251,247,236,.92);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.site-header__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .9rem;
}
@media (min-width: 901px){
  .site-header__bar > a:first-child{ margin-left: 6rem; }
}
.brand{
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
}
.brand__mark{ width: 44px; height: 44px; flex: none; }
/* The uploaded Site Identity logo (the_custom_logo() output, not the
   fallback SVG above). The source file is a square 512×512 canvas, but the
   actual mark inside it — the hand/pin icon plus the "OldHand SEO"
   wordmark — only fills a horizontal band across the middle (measured by
   scanning the PNG's alpha channel: visible content is x 4.7%–95.1%,
   y 32.6%–67.0% of the canvas, a ~2.63:1 landscape crop). Simply capping
   height (the previous fix) shrank the whole square uniformly, so ~65% of
   that box stayed transparent padding and the mark itself rendered tiny.
   This crops the padding away instead: the link is sized to the mark's
   own 2.63:1 box, and the full image is scaled up and shifted with
   negative offsets so only that band shows through the overflow:hidden
   link — same technique as a CSS sprite. The numbers are specific to this
   file; if the logo is ever replaced, remeasure before reusing them. */
.custom-logo-link{
  display: block;
  position: relative;
  width: 147px;
  height: 56px;
  overflow: hidden;
}
.custom-logo{
  position: absolute;
  top: -53px;
  left: -8px;
  width: 163px;
  height: 163px;
  max-width: none;
}
.brand__name{
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.brand__tag{
  display: block;
  font-family: var(--font-label);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--maroon);
  font-weight: 700;
  margin-top: .15rem;
}

.primary-nav{ display: flex; align-items: center; gap: 2.1rem; }
.primary-nav ul{ display: flex; gap: 1.9rem; }
.primary-nav a{
  position: relative;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  padding-block: .3rem;
  transition: color .2s ease;
}
.primary-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.16,.84,.44,1);
}
.primary-nav a:hover{ color: var(--red); }
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after{ transform: scaleX(1); }
.primary-nav .current-menu-item > a{ color: var(--red); }

.header-cta{ display: flex; align-items: center; gap: 1.1rem; }
.header-phone{
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  white-space: nowrap;
}
/* .header-cta sits inside <nav class="primary-nav"> (so the CTA button can
   fold into the mobile menu), which means .primary-nav a — one class plus
   an element, specificity (0,1,1) — silently outranks the single-class
   .btn (0,1,0) and .header-phone (0,1,0) rules above and repaints both in
   near-black ink instead of their intended colours. That's also why the
   button's cream label was unreadable against its own navy background.
   Re-declaring the colours here, scoped one level more specifically than
   .primary-nav a, restores them without touching .btn/.header-phone's base
   definitions (used elsewhere outside the nav). nowrap keeps "Free SEO
   Audit" on one line instead of breaking into three inside the narrow
   header-cta flex item. */
.header-cta .btn{ color: var(--cream); white-space: nowrap; }
.header-cta .header-phone{ color: var(--navy); }

.status-badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
}
.status-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3f7d4a;
  animation: statusDotPulse 2s ease-in-out infinite;
}
.status-badge.is-closed .status-dot{ background: #a39c8f; animation: none; }
.status-badge.is-closed .status-text{ color: #6b6558; }
@keyframes statusDotPulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .6; transform: scale(1.25); }
}
@media (max-width: 900px){
  .status-badge{ margin-bottom: 1rem; }
}

.nav-toggle{
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  width: 44px; height: 40px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--navy);
  position: relative;
}
.nav-toggle span::before{ position: absolute; top: -6px; }
.nav-toggle span::after{ position: absolute; top: 6px; }

@media (max-width: 900px){
  .primary-nav{
    position: fixed;
    inset: 68px 0 auto 0;
    background: var(--cream);
    border-bottom: 3px solid var(--navy);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem clamp(1.25rem,4vw,2.5rem);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .primary-nav.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .primary-nav ul{ flex-direction: column; gap: 0; }
  .primary-nav ul li{ border-bottom: 1px solid var(--line); }
  .primary-nav a{ display: block; padding: .95rem 0; }
  .primary-nav .header-cta{ margin-top: 1.1rem; flex-direction: column; align-items: stretch; }
  .header-phone{ display: none; }
  .nav-toggle{ display: inline-flex; }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

/* !important below (here and through the rest of this file, on every
   spacing property applied to an Elementor Container element) is load-
   bearing, not defensive habit: Elementor's own frontend.min.css sets
   padding/gap/border-radius/overflow on .e-con/.e-con-full using CSS
   *logical* properties (padding-block-start, padding-inline-end, etc.).
   Those are, for cascade purposes, DIFFERENT properties from our physical
   `padding`/`gap` shorthands, so normal specificity never lets ours win —
   only !important does. This was silently collapsing every section's
   padding and every grid's gap to Elementor's ~10-20px defaults, which is
   the real reason spacing looked cramped no matter how generous the
   clamp() values here looked on paper. */
.hero{
  padding-block: clamp(3.5rem, 8vw, 7.5rem) !important;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* A one-time, page-load fade/rise for the hero — pure CSS, no JS needed,
   since it always runs on entry rather than being scroll-triggered. Wrapped
   in the no-preference query so reduced-motion visitors just see the
   finished state with no animation declared at all. */
@media (prefers-reduced-motion: no-preference){
  @keyframes hero-rise{
    from{ opacity: 0; transform: translateY(20px); }    to{ opacity: 1; transform: translateY(0); }
  }
  .hero .eyebrow{ animation: hero-rise .7s cubic-bezier(.16,.84,.44,1) both; }
  .hero h1{ animation: hero-rise .7s cubic-bezier(.16,.84,.44,1) .08s both; }
  .hero .lede{ animation: hero-rise .7s cubic-bezier(.16,.84,.44,1) .16s both; }
  .hero__actions{ animation: hero-rise .7s cubic-bezier(.16,.84,.44,1) .24s both; }
  .hero__proof{ animation: hero-rise .7s cubic-bezier(.16,.84,.44,1) .32s both; }
  .hero__panel{ animation: hero-rise .8s cubic-bezier(.16,.84,.44,1) .22s both; }
}
.hero .container{
  display: grid !important;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1{ margin-block: .6rem 1.1rem; }
.hero h1 em{ color: var(--red); font-style: normal; }
.hero__actions{ display: flex !important; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.hero__proof{
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  font-family: var(--font-label);
  font-size: .82rem;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.hero__proof li{ display: flex; align-items: center; gap: .5em; }
.hero__proof li::before{ content: "●"; color: var(--red); font-size: .6em; }

.hero__panel{
  position: relative;
  background: radial-gradient(120% 140% at 18% 0%, #274a75 0%, var(--navy) 55%);
  color: var(--cream);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
}
.hero__panel h3{ color: var(--cream); font-size: 1.05rem; }
.hero__panel-list{ margin-top: 1.1rem; display: grid; gap: .8rem; }
.hero__panel-list li{
  display: flex; gap: .7em;
  font-size: .95rem;
  border-bottom: 1px solid rgba(246,239,223,.18);
  padding-bottom: .8rem;
}
.hero__panel-list li:last-child{ border-bottom: 0; padding-bottom: 0; }
.hero__panel-list strong{ font-family: var(--font-label); color: var(--gold); }

@media (max-width: 860px){
  .hero .container{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. SECTIONS (generic rhythm)
   ========================================================================== */

.section{ padding-block: clamp(3.5rem, 7vw, 7rem) !important; }
.section--rule{ border-top: 1px solid var(--line); }
.section--navy{ background: radial-gradient(130% 100% at 12% 0%, #24406e 0%, var(--navy) 45%); color: var(--cream); }
.section--navy h2, .section--navy h3{ color: var(--cream); }
.section--navy .eyebrow{ color: var(--gold); }
.section--navy .eyebrow::before{ background: var(--gold); }
.section--cream{ background: var(--cream); }

.section__head{
  max-width: 680px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section__head--center{ margin-inline: auto; text-align: center; }
.section__head--center .eyebrow{ justify-content: center; }
.section__head--center .eyebrow::before{ display: none; }

/* ==========================================================================
   7. SERVICE CARDS
   ========================================================================== */

.card-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem !important;
}
.card{
  position: relative;
  overflow: hidden !important;
  background: var(--paper);
  padding: 2.2rem 1.9rem !important;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease;
}
.card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.16,.84,.44,1);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card:hover::before{ transform: scaleX(1); }
.card__icon{
  width: 40px; height: 40px;
  color: var(--red);
}
.card h3{ font-size: 1.15rem; }
.card p{ color: var(--ink-soft); font-size: .96rem; }
.card__num{
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--gold-deep);
  letter-spacing: .08em;
}

@media (max-width: 900px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }

/* GBP / Bing two-column list */
.profile-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap) !important;
}
.profile-block{
  border: 1px solid rgba(246,239,223,.22);
  border-radius: var(--radius-lg) !important;
  padding: 1.9rem !important;
}
.profile-block h3{
  display: flex; align-items: center; gap: .6rem;
  color: var(--cream);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(246,239,223,.3);
}
.profile-block ol{ display: grid; gap: .9rem; counter-reset: gbp; }
.profile-block li{
  counter-increment: gbp;
  display: flex;
  gap: .9rem;
  font-size: .96rem;
}
.profile-block li::before{  content: counter(gbp, decimal-leading-zero);
  font-family: var(--font-label);
  font-weight: 700;
  color: var(--gold);
  flex: none;
}
@media (max-width: 760px){ .profile-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   8. INDUSTRY PILLS
   ========================================================================== */

.pill-field{
  display: flex !important;
  flex-wrap: wrap;
  gap: .75rem;
}
.pill{
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .01em;
  padding: .65em 1.15em;
  border: 2px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  background: var(--paper);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.pill:hover{ background: var(--navy); color: var(--cream); border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
/* Kept as a selector for markup compatibility, but every pill now shares one
   consistent resting style — a mix of statically-filled and outline pills
   read as random/broken rather than as an intentional pattern. */
.pill--filled{ background: var(--paper); color: var(--navy); }

/* ==========================================================================
   9. PROCESS STEPS
   ========================================================================== */

.steps{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap) !important;
  position: relative;
}
/* A faint horizontal rail behind the step numbers ties the four stages
   together into one visible flow rather than four unrelated tiles. */
.steps::before{
  content: "";
  position: absolute;
  top: 1.55rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.step{ position: relative; padding-top: .5rem; }
.step__num{
  position: relative;
  display: inline-block;
  background: var(--cream);
  padding-right: .5rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--cream);
  -webkit-text-stroke: 1.5px var(--navy);
  line-height: 1;
}
.step h3{ margin-top: .6rem; }
.step p{ color: var(--ink-soft); font-size: .95rem; margin-top: .5rem; }

@media (max-width: 900px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }

/* ==========================================================================
   10. QUOTE / TESTIMONIAL
   ========================================================================== */

.quote{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) !important;
  text-align: center;
}
.quote blockquote{
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--navy);
  max-width: 820px;
  margin-inline: auto;
  line-height: 1.35;
  border: 0;
  padding: 0;
}
.quote blockquote::before{
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: .1em;
}
.quote cite{
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-label);
  font-style: normal;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--maroon);
}

/* ==========================================================================
   11. CTA BAND
   ========================================================================== */

.cta-band{
  background: radial-gradient(130% 160% at 50% 0%, #24406e 0%, var(--navy) 55%);
  color: var(--cream);
  text-align: center;
  padding-block: clamp(3rem, 6vw, 4.5rem) !important;
}
.cta-band h2{ color: var(--cream); }
.cta-band p{ color: var(--cream-deep); max-width: 620px; margin: 1rem auto 0; }
.cta-band__actions{ margin-top: 2rem; display: flex !important; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ==========================================================================
   12. FORMS
   ========================================================================== */

.form-grid{ display: grid; gap: 1.1rem; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field{ display: grid; gap: .4rem; }
.field label{
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
}
.field input, .field textarea, .field select{
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  padding: .8em .9em;
  background: var(--paper);  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 600px){ .form-row{ grid-template-columns: 1fr; } }

.form-success{
  border: 2px solid var(--navy);
  background: var(--cream);
  padding: 1.5rem;
  font-family: var(--font-label);
  font-weight: 700;
  color: var(--navy);
}
.form-error{
  border: 2px solid var(--red);
  background: #fbeae6;
  padding: 1.5rem;
  color: var(--maroon);
  font-family: var(--font-label);
  font-weight: 700;
}

/* ==========================================================================
   13. PAGE / CONTENT DEFAULTS (About, Blog, generic pages)
   ========================================================================== */

.page-hero{
  padding-block: clamp(2.5rem, 5vw, 4rem) !important;
  border-bottom: 1px solid var(--line);
}
.entry-content{ max-width: 740px; }
.entry-content > * + *{ margin-top: 1.25rem; }
.entry-content h2{ margin-top: 2.2rem; }
.entry-content h3{ margin-top: 1.6rem; }
.entry-content ul, .entry-content ol{ list-style: disc; padding-left: 1.4rem; display: grid; gap: .5rem; }
.entry-content ol{ list-style: decimal; }
.entry-content blockquote{
  border-left: 3px solid var(--red);
  padding-left: 1.2rem;
  font-style: italic;
  color: var(--ink-soft);
}
.entry-content a{ color: var(--red); text-decoration: underline; text-underline-offset: .2em; }

.post-list{ display: grid; gap: 2.5rem; max-width: 760px; }
.post-card{ border-bottom: 1px solid var(--line); padding-bottom: 2.5rem; }
.post-card__meta{
  font-family: var(--font-label);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: .5rem;
}
.post-card h2{ font-size: 1.6rem; }
.post-card p{ margin-top: .75rem; color: var(--ink-soft); }
.post-card .btn--small{ margin-top: 1rem; }

.pagination{ display: flex; gap: .75rem; margin-top: 2rem; }
.pagination a, .pagination span{
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  padding: .5em 1em;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .85rem;
}
.pagination .current{ background: var(--navy); color: var(--cream); }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.site-footer{
  background: var(--navy-dark);
  color: var(--cream-deep);
  border-top: 2px solid var(--gold);
}
.footer-top{
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--grid-gap);
}
.footer-brand .brand__name{ color: var(--cream); }
.footer-brand p{ margin-top: 1rem; font-size: .92rem; color: var(--cream-deep); max-width: 32ch; }

.footer-logo{ margin-bottom: .9rem; }
.footer-logo img{ display: block; width: 72px; height: auto; mix-blend-mode: screen; }
.footer-hours{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--cream-deep);
}
.footer-hours-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3f7d4a;
  flex-shrink: 0;
}
.footer-hours.is-closed .footer-hours-dot{ background: #8a857c; }
.footer-col h4{
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col ul{ display: grid; gap: .65rem; }
.footer-col a{ font-size: .92rem; color: var(--cream-deep); }
.footer-col a:hover{ color: var(--gold); }
.footer-bottom{
  border-top: 1px solid rgba(246,239,223,.15);
  padding-block: 1.25rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: rgba(246,239,223,.55);
}
@media (max-width: 860px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   15. UTILITIES
   ========================================================================== */

.mt-0{ margin-top: 0 !important; }
.text-center{ text-align: center; }
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
@media (max-width: 760px){ .two-col{ grid-template-columns: 1fr; } }

/* WP core alignment helpers kept minimal on purpose */
.alignwide{ max-width: 1000px; margin-inline: auto; }
.alignfull{ width: 100%; max-width: none; }

/* ==========================================================================
   16. ELEMENTOR INTEGRATION
   Elementor's own core CSS makes every Container a flex box (.e-con). Where
   our own layout classes need grid instead (card-grid, profile-grid, steps,
   the hero split) the !important flags above guarantee our layout wins
   regardless of stylesheet load order.
   ========================================================================== */

/* Elementor's Site Settings kit injects its own default heading/paragraph
   color and font-family, at higher specificity than a bare h1/h2/p selector
   and loaded after our stylesheet — so left alone it wins. These rules
   force our design system back onto Elementor's own generated markup. */
.elementor-heading-title{
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
}h1.elementor-heading-title{ font-size: clamp(2.4rem, 5.6vw, 4.3rem) !important; letter-spacing: -0.02em !important; }
h2.elementor-heading-title{ font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important; }
h3.elementor-heading-title{ font-size: 1.35rem !important; }
h4.elementor-heading-title{ font-size: 1.05rem !important; }
.section--navy .elementor-heading-title,
.hero__panel .elementor-heading-title,
.cta-band .elementor-heading-title{ color: var(--cream) !important; }

.hero__panel .eyebrow{ color: var(--red); }

.elementor-widget-text-editor .elementor-widget-container > p{
  font-family: inherit;
  color: inherit;
  margin: 0;
}

/* Elementor's kit CSS sets color/font-family/font-weight directly on
   .elementor-widget-text-editor (the SAME element our own .eyebrow/.lede/
   .ribbon classes land on via the widget's "CSS Classes" field), at equal
   specificity and loaded after our stylesheet, so it wins on a tie. Scoping
   with the .elementor ancestor raises our specificity above the kit rule
   without needing !important or touching the base class definitions (which
   are also used outside Elementor, e.g. in header.php/page-contact.php). */
.elementor .eyebrow{ color: var(--maroon); font-family: var(--font-label); font-weight: 700; }
.elementor .lede{ color: var(--ink-soft); font-family: var(--font-body); }
.elementor .ribbon{ color: var(--cream); font-family: var(--font-label); font-weight: 700; }
.section--navy .elementor .eyebrow,
.elementor .section--navy .eyebrow{ color: var(--gold); }

/* Elementor's Button widget renders its own <a class="elementor-button">
   with kit-driven background/color/padding/radius that our .btn wrapper
   class never reaches (it lands on the outer div, not this inner link) —
   so target the actual link directly, with !important since the kit's
   button defaults are unusually persistent. */
.elementor .btn .elementor-button{
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  letter-spacing: .02em !important;
  padding: .85em 1.6em !important;
  border: 2px solid var(--navy) !important;
  border-radius: var(--radius) !important;
  background: var(--navy) !important;
  color: var(--cream) !important;
  box-shadow: 0 1px 2px rgba(28,51,88,.15), 3px 3px 0 var(--gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
.elementor .btn .elementor-button:hover{ transform: translate(-2px,-2px); box-shadow: 0 4px 10px rgba(28,51,88,.18), 4px 4px 0 var(--gold); }

.elementor .btn--ghost .elementor-button{
  background: var(--paper) !important;
  color: var(--navy) !important;
  border-color: var(--navy) !important;
  box-shadow: 3px 3px 0 var(--navy-tint);
}
.elementor .btn--ghost .elementor-button:hover{ box-shadow: 4px 4px 0 var(--navy-tint); }

.elementor .btn--on-navy .elementor-button{
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--navy-dark) !important;
  box-shadow: 3px 3px 0 var(--cream);
}
.elementor .btn--on-navy .elementor-button:hover{ box-shadow: 4px 4px 0 var(--cream); }

/* Elementor's own .e-con rule sets --margin-* custom properties to 0 and
   consumes them in its own margin shorthand, at the same specificity as our
   single-class .container rule (which relies on margin-inline:auto to
   center every section) — and Elementor's stylesheet loads after ours, so
   it wins the tie and every section sits flush-left instead of centered.
   Ancestor-scoping raises specificity above .e-con without !important. */
.elementor .container{ margin-inline: auto !important; }

/* Same tie, but for flex-direction: Elementor containers default to a
   column direction internally; our .hero__actions / .pill-field /
   .cta-band__actions rely on flexbox's initial "row" and never said so
   explicitly, so Elementor's later-loaded column wins and stacks what
   should be a side-by-side row of buttons/pills. */
.hero__actions,
.pill-field,
.cta-band__actions{ flex-direction: row !important; }

/* ==========================================================================
Header — Services dropdown submenu (Link Building nav item)
========================================================================== */
#primary-nav .menu-item-has-children{ position: relative; }
#primary-nav .sub-menu{
	list-style: none; margin: 0; padding: 8px 0;
	position: absolute; top: 100%; left: 0; min-width: 200px;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease; z-index: 50;
}
#primary-nav .menu-item-has-children:hover > .sub-menu,
#primary-nav .menu-item-has-children:focus-within > .sub-menu,
#primary-nav .menu-item-has-children.is-open > .sub-menu{
	opacity: 1; visibility: visible; transform: translateY(0);
}
#primary-nav .sub-menu li{ margin: 0; }
#primary-nav .sub-menu a{
	display: flex; align-items: center; min-height: 44px; padding: 10px 18px; white-space: nowrap;
	font-family: var(--font-label); font-weight: 700; font-size: .92rem; color: var(--ink);
}
#primary-nav .sub-menu a:hover,
#primary-nav .sub-menu a:focus-visible{ color: var(--red); background: var(--cream); }

@media (max-width: 900px){
	#primary-nav .sub-menu{
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: 4px 0 4px 14px;
		display: none;
	}
	#primary-nav .menu-item-has-children.is-open > .sub-menu{ display: block; }
}