/*
Theme Name: Solid Gutters Geelong
Theme URI: https://solidguttersgeelong.com.au
Description: Custom lead-generation theme for Solid Gutters Geelong — gutter repairs, replacement, installation and leaf guards across Geelong & the Bellarine.
Author: Solid Gutters Geelong
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: solid-gutter-geelong
*/

/* =========================================================================
   Solid Gutters Geelong — shared stylesheet
   Coastal-steel identity: deep marine slate + rainwater cyan + high-vis amber
   Display: Archivo  |  Body: Figtree
   ========================================================================= */

:root{
  /* Palette */
  --ink:        #0C2A35;   /* deep marine slate (dark sections, headings) */
  --ink-2:      #123D4C;
  --steel:      #16607E;   /* mid steel-ocean */
  --rain:       #1FB6CE;   /* coastal cyan — brand accent / signature */
  --rain-soft:  #E7F7FA;
  --amber:      #FFB627;   /* action / CTA */
  --amber-dark: #E89E00;
  --paper:      #F5F9FB;   /* cool off-white */
  --white:      #FFFFFF;
  --slate:      #33474F;   /* body text on light */
  --slate-mute: #6B818C;
  --line:       #DCE6EA;   /* hairlines */

  /* Type */
  --font-display: 'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Figtree', system-ui, -apple-system, Segoe UI, sans-serif;

  /* Rhythm */
  --wrap: 1160px;
  --gap: clamp(1rem, 3vw, 2rem);
  --sp-sec: clamp(4rem, 8vw, 7rem);
  --radius: 16px;
  --radius-sm: 10px;

  --shadow-sm: 0 2px 8px rgba(12,42,53,.06);
  --shadow-md: 0 14px 40px -12px rgba(12,42,53,.22);
  --shadow-lg: 0 30px 70px -24px rgba(12,42,53,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate);
  background:var(--white);
  line-height:1.62;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--steel); text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  font-weight:800;
}
h1{ font-size:clamp(2.3rem,1.6rem + 3.4vw,4rem); }
h2{ font-size:clamp(1.85rem,1.4rem + 2vw,2.9rem); }
h3{ font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem); }
p{ margin:0 0 1.1em; }
ul{ margin:0 0 1.1em; padding-left:1.2em; }
li{ margin:.35em 0; }
strong{ color:var(--ink); font-weight:700; }

.wrap{ width:min(var(--wrap),92%); margin-inline:auto; }
.section{ padding-block:var(--sp-sec); }
.section--paper{ background:var(--paper); }
.section--ink{ background:var(--ink); color:#C9DCE3; }
.section--ink h2,.section--ink h3{ color:#fff; }
.center{ text-align:center; }
.lead{ font-size:clamp(1.1rem,1rem + .6vw,1.35rem); color:var(--slate); }
.section--ink .lead{ color:#AFC7CF; }

/* ---------- Signature: gutter-profile eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
  font-weight:700; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel);
  margin-bottom:1rem;
}
.eyebrow::before{
  content:""; width:34px; height:12px; flex:none;
  /* stylised gutter cross-section + downpipe drop */
  background:
    linear-gradient(var(--rain),var(--rain)) left bottom/34px 3px no-repeat,
    linear-gradient(var(--rain),var(--rain)) 6px 0/3px 12px no-repeat,
    linear-gradient(var(--rain),var(--rain)) right 6px bottom 0/3px 8px no-repeat;
  opacity:.9;
}
.section--ink .eyebrow{ color:var(--rain); }

.section-head{ max-width:720px; margin-bottom:clamp(2rem,4vw,3.25rem); }
.section-head.center{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  --_bg:var(--amber); --_fg:var(--ink);
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:-.01em;
  padding:.95rem 1.6rem; border-radius:var(--radius-sm);
  background:var(--_bg); color:var(--_fg);
  border:2px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s;
  box-shadow:var(--shadow-sm); white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--amber-dark); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1.1em; height:1.1em; }
.btn--lg{ padding:1.1rem 2rem; font-size:1.08rem; }
.btn--ghost{ --_bg:transparent; --_fg:var(--ink); border-color:var(--line); box-shadow:none; }
.btn--ghost:hover{ background:var(--white); border-color:var(--steel); }
.btn--on-dark{ }
.btn--outline-light{ --_bg:transparent; --_fg:#fff; border-color:rgba(255,255,255,.35); box-shadow:none; }
.btn--outline-light:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.btn--steel{ --_bg:var(--steel); --_fg:#fff; }
.btn--steel:hover{ background:var(--ink-2); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s, background .3s;
}
.site-header.scrolled{ box-shadow:0 6px 24px -12px rgba(12,42,53,.28); border-color:var(--line); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:74px;
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand .logo{ height:auto; width:auto; max-height:52px; max-width:100%; }
.logo-mark{ width:auto; height:44px; max-width:100%; flex:none; display:block; }
.wordmark{ display:flex; flex-direction:column; line-height:1; font-family:var(--font-display); }
.wordmark b{ font-weight:800; font-size:1.18rem; letter-spacing:-.02em; color:var(--ink); }
.wordmark i{ font-style:normal; font-weight:700; font-size:.72rem; letter-spacing:.28em; color:var(--steel); text-transform:uppercase; margin-top:.16rem; }
.site-footer .wordmark b{ color:#fff; }
.site-footer .wordmark i{ color:var(--rain); }
@media(max-width:600px){
  .logo-mark{ height:36px; }
  .wordmark b{ font-size:1.02rem; }
  .wordmark i{ font-size:.64rem; letter-spacing:.22em; }
}
@media(max-width:360px){ .wordmark i{ display:none; } }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  color:var(--ink); padding:.55rem .8rem; border-radius:8px;
  position:relative; transition:color .2s, background .2s;
}
.nav a:hover{ color:var(--steel); background:var(--rain-soft); }
.nav a[aria-current="page"]{ color:var(--steel); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.32rem;
  height:2px; background:var(--rain); border-radius:2px;
}
.header-cta{ display:flex; align-items:center; gap:.75rem; }

.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line);
  background:var(--white); border-radius:10px; cursor:pointer; padding:0;
  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(--ink);
  border-radius:2px; transition:transform .25s var(--ease), opacity .2s;
}
.nav-toggle span::before{ transform:translateY(-6px); }
.nav-toggle span::after{ transform:translateY(4px); }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:rotate(-45deg) translateY(-1px); }

@media(max-width:940px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); padding:.5rem 5% 1.5rem;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    transform:translateY(-120%); transition:transform .35s var(--ease);
    max-height:calc(100vh - 74px); overflow:auto;
  }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:.95rem .4rem; font-size:1.1rem; border-bottom:1px solid var(--line); border-radius:0; }
  .nav a[aria-current="page"]::after{ display:none; }
  .header-cta .btn--nav-quote{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, #1a5b76 0%, transparent 55%),
    linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 60%, #0a222c 100%);
  color:#DCEBF0;
}
.hero::after{ /* faint blueprint grid */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(80% 70% at 30% 20%,#000 0%,transparent 75%);
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; padding-block:clamp(3.5rem,7vw,6rem);
}
.hero h1{ color:#fff; }
.hero h1 .hl{ color:var(--rain); }
.hero p{ color:#B8D2DB; max-width:34ch; }
.hero .eyebrow{ color:var(--rain); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }
.hero-trust{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:1.2rem 1.8rem; }
.hero-trust li{ list-style:none; display:flex; align-items:center; gap:.55rem; font-size:.95rem; color:#AEC8D1; margin:0; }
.hero-trust svg{ width:1.15rem; height:1.15rem; color:var(--rain); flex:none; }
.hero-media{ position:relative; }
.hero-quote-card{
  background:var(--white); border-radius:var(--radius); padding:1.8rem 1.7rem;
  box-shadow:var(--shadow-lg); max-width:440px; margin-inline:auto;
}
.hero-quote-title{ font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--ink); margin:0 0 .3rem; }
.hero-quote-sub{ font-size:.92rem; color:var(--slate-mute); margin:0 0 1.1rem; }
.hero-quote-card .wpforms-field{ padding:0 0 .85rem!important; }
.hero-quote-card .wpforms-submit{ padding:.95rem 1.6rem!important; font-size:1rem!important; }
@media(max-width:640px){ .hero-quote-card{ max-width:none; padding:1.5rem 1.3rem; } }

/* Signature "rain-flow" waterline */
.waterline{ height:4px; width:100%; overflow:hidden; background:var(--ink-2); position:relative; }
.waterline::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent, var(--rain), var(--amber), var(--rain), transparent);
  background-size:50% 100%;
  animation:flow 6s linear infinite;
}
@keyframes flow{ from{ background-position:0 0; } to{ background-position:200% 0; } }

/* Media placeholder panel (swap for WordPress media) */
.media-ph{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    linear-gradient(135deg,#12455a,#0d2f3d);
  border:1px solid rgba(255,255,255,.12);
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
}
.media-ph::before{ /* roofline motif */
  content:""; position:absolute; inset:0; opacity:.5;
  background:
    linear-gradient(115deg,transparent 46%,rgba(31,182,206,.5) 46%,rgba(31,182,206,.5) 48%,transparent 48%),
    linear-gradient(115deg,transparent 60%,rgba(255,182,39,.35) 60%,rgba(255,182,39,.35) 61.5%,transparent 61.5%);
}
.media-ph .ph-label{
  position:relative; z-index:2; text-align:center; color:#bcd6de;
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.04em;
  padding:1rem; max-width:80%;
}
.media-ph .ph-label svg{ width:34px; height:34px; margin:0 auto .5rem; color:var(--rain); }
.media-ph.aspect-wide{ aspect-ratio:16/9; }
.media-ph.aspect-square{ aspect-ratio:1/1; }

/* Real images (WordPress media) — inherit the framed look of the placeholders */
.hero-media > img, .split-media > img, .about-media > img{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/3; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.12);
}
img.aspect-wide{
  display:block; width:100%; object-fit:cover; aspect-ratio:16/9;
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.prose img.aspect-wide{ margin:2rem 0; }
.article-card img.card-media{
  display:block; width:100%; height:auto; aspect-ratio:16/10;
  object-fit:cover; border:0; border-radius:0;
}

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--ink-2); color:#CFE2E9; }
.trust-strip .wrap{
  display:flex; flex-wrap:wrap; gap:1rem 2.4rem; justify-content:center;
  padding-block:1.25rem;
}
.trust-item{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:600; font-size:.96rem; }
.trust-item svg{ width:1.35rem; height:1.35rem; color:var(--rain); flex:none; }

/* ---------- Feature / benefit grid ---------- */
.grid{ display:grid; gap:clamp(1rem,2.4vw,1.6rem); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:860px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.benefit{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.7rem; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.benefit:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.icon-badge{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--rain-soft); color:var(--steel); margin-bottom:1.1rem;
}
.icon-badge svg{ width:30px; height:30px; }
.benefit h3{ margin-bottom:.4rem; }
.benefit p{ margin:0; color:var(--slate); }

/* ---------- Services cards ---------- */
.service-card{
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.service-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.service-card .card-top{
  position:relative; padding:1.6rem 1.6rem 1.1rem; background:var(--ink);
  color:#fff; overflow:hidden;
}
.service-card .card-top::after{
  content:""; position:absolute; right:-20px; bottom:-30px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle,rgba(31,182,206,.4),transparent 70%);
}
.service-card .num{
  font-family:var(--font-display); font-weight:800; font-size:.85rem;
  color:var(--rain); letter-spacing:.1em; position:relative; z-index:2;
}
.service-card .card-top h3{ color:#fff; margin:.4rem 0 0; position:relative; z-index:2; }
.service-card .card-top .svc-icon{ position:absolute; top:1.4rem; right:1.4rem; z-index:2; width:34px; height:34px; color:var(--rain); opacity:.9; }
.service-card .card-body{ padding:1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.service-card .card-body ul{ list-style:none; padding:0; margin:0 0 1.2rem; }
.service-card .card-body li{ position:relative; padding-left:1.6rem; color:var(--slate); }
.service-card .card-body li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border-right:2px solid var(--rain); border-bottom:2px solid var(--rain);
  transform:rotate(45deg);
}
.service-card .card-link{
  margin-top:auto; font-family:var(--font-display); font-weight:700; color:var(--steel);
  display:inline-flex; align-items:center; gap:.4rem;
}
.service-card .card-link svg{ width:1em; height:1em; transition:transform .2s; }
.service-card:hover .card-link svg{ transform:translateX(4px); }

/* ---------- Steps / how it works ---------- */
.steps{ counter-reset:step; display:grid; gap:1.4rem; grid-template-columns:repeat(4,1fr); }
@media(max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:1rem; }
.step .step-num{
  counter-increment:step; font-family:var(--font-display); font-weight:800;
  font-size:2.6rem; color:var(--rain); line-height:1; opacity:.9;
}
.step .step-num::before{ content:"0" counter(step); }
.step h3{ font-size:1.15rem; margin:.6rem 0 .3rem; }
.step p{ margin:0; font-size:.98rem; color:var(--slate-mute); }
.section--ink .step p{ color:#9FBAC4; }
.section--ink .step h3{ color:#fff; }

/* ---------- Split / about preview ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split.reverse .split-media{ order:2; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; } .split.reverse .split-media{ order:0; } }
.check-list{ list-style:none; padding:0; margin:1.4rem 0 0; }
.check-list li{ position:relative; padding-left:2rem; margin:.7rem 0; }
.check-list li svg{ position:absolute; left:0; top:.15em; width:1.3rem; height:1.3rem; color:var(--rain); }

/* ---------- Areas / suburb chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 0; padding:0; list-style:none; }
.chips li{
  font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem; margin:0; transition:.2s;
}
.chips li:hover{ border-color:var(--rain); color:var(--steel); background:var(--rain-soft); }
.section--ink .chips li{ background:rgba(255,255,255,.05); color:#DCEBF0; border-color:rgba(255,255,255,.16); }

/* ---------- FAQ ---------- */
.faq{ max-width:800px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--ink);
  padding:1.3rem 3rem 1.3rem 0; position:relative;
}
.faq-q::after{
  content:""; position:absolute; right:.2rem; top:50%; width:14px; height:14px;
  border-right:2px solid var(--steel); border-bottom:2px solid var(--steel);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
.faq-item.open .faq-q::after{ transform:translateY(-30%) rotate(-135deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a p{ padding-bottom:1.3rem; margin:0; color:var(--slate); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--steel),var(--ink)); color:#fff; }
.cta-band::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 120% at 100% 0,rgba(31,182,206,.5),transparent 60%);
}
.cta-band .wrap{ position:relative; z-index:2; text-align:center; padding-block:clamp(3rem,6vw,4.5rem); }
.cta-band h2{ color:#fff; margin-bottom:.4rem; }
.cta-band p{ color:#BcD8E1; max-width:52ch; margin-inline:auto; }
.cta-band .hero-cta{ justify-content:center; }

/* ---------- Resource / article cards ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; justify-content:center; }
.filter-btn{
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  padding:.55rem 1.1rem; border-radius:999px; border:1px solid var(--line);
  background:var(--white); color:var(--ink); cursor:pointer; transition:.2s;
}
.filter-btn:hover{ border-color:var(--rain); color:var(--steel); }
.filter-btn.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.article-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.article-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.article-card .card-media{ aspect-ratio:16/10; }
.article-card .card-content{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.tag{
  align-self:flex-start; font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
  background:var(--rain-soft); padding:.3rem .7rem; border-radius:6px; margin-bottom:.9rem;
}
.article-card h3{ font-size:1.25rem; margin-bottom:.5rem; }
.article-card p{ color:var(--slate-mute); font-size:.97rem; }
.article-card .card-link{ margin-top:auto; font-family:var(--font-display); font-weight:700; color:var(--steel); display:inline-flex; align-items:center; gap:.4rem; }
.article-card .card-link svg{ width:1em; height:1em; transition:transform .2s; }
.article-card:hover .card-link svg{ transform:translateX(4px); }

/* ---------- Article (single) ---------- */
.article-hero{ background:var(--paper); border-bottom:1px solid var(--line); }
.article-hero .wrap{ max-width:820px; padding-block:clamp(3rem,6vw,4.5rem); }
.article-hero .tag{ margin-bottom:1.2rem; }
.breadcrumb{ font-size:.9rem; color:var(--slate-mute); margin-bottom:1rem; }
.breadcrumb a{ color:var(--steel); }
.prose{ max-width:760px; margin-inline:auto; }
.prose h2{ margin-top:2.4rem; }
.prose h3{ margin-top:1.8rem; }
.prose .media-ph{ margin:2rem 0; }
.callout{
  background:var(--rain-soft); border-left:4px solid var(--rain);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:1.2rem 1.4rem; margin:2rem 0;
}
.callout p:last-child{ margin:0; }
.article-cta{
  margin-top:2.5rem; background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem); text-align:center;
}
.article-cta h3{ color:#fff; }
.article-cta p{ color:#B8D2DB; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-md);
}
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--ink); margin-bottom:.4rem; }
.field input,.field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--rain); box-shadow:0 0 0 3px rgba(31,182,206,.18); background:#fff;
}
.field textarea{ resize:vertical; min-height:130px; }
.form-note{ font-size:.86rem; color:var(--slate-mute); margin-top:.4rem; }
.form-success{
  display:none; background:var(--rain-soft); border:1px solid var(--rain);
  border-radius:var(--radius-sm); padding:1rem 1.2rem; margin-bottom:1.1rem;
  color:var(--ink); font-weight:600;
}
.form-success.show{ display:block; }

/* ---------- WPForms restyle to match site ---------- */
.wpforms-container{ margin:0; }
.wpforms-form{ font-family:var(--font-body); }
.wpforms-field{ padding:0 0 1.1rem!important; margin:0!important; }
.wpforms-field-label{ display:block; font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--ink); margin-bottom:.4rem!important; }
.wpforms-field-required{ color:var(--steel); }
.wpforms-field input[type=text],.wpforms-field input[type=email],.wpforms-field input[type=tel],.wpforms-field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:.85rem 1rem!important; border:1px solid var(--line)!important; border-radius:var(--radius-sm)!important;
  background:var(--paper); transition:border-color .2s, box-shadow .2s; box-shadow:none!important;
}
.wpforms-field input[type=text]:focus,.wpforms-field input[type=email]:focus,.wpforms-field input[type=tel]:focus,.wpforms-field textarea:focus{
  outline:none; border-color:var(--rain)!important; box-shadow:0 0 0 3px rgba(31,182,206,.18)!important; background:#fff;
}
.wpforms-field textarea{ resize:vertical; min-height:130px; }
.wpforms-field-description{ font-size:.86rem; color:var(--slate-mute); margin-top:.4rem!important; }
.wpforms-submit-container{ margin-top:.2rem; }
.wpforms-submit{
  width:100%; justify-content:center; display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-display)!important; font-weight:700!important; font-size:1.08rem!important;
  padding:1.1rem 2rem!important; border-radius:var(--radius-sm)!important;
  background:var(--amber)!important; color:var(--ink)!important; border:2px solid transparent!important;
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s;
  box-shadow:var(--shadow-sm);
}
.wpforms-submit:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--amber-dark)!important; }
.wpforms-confirmation-container-full{
  background:var(--rain-soft)!important; border:1px solid var(--rain)!important; border-radius:var(--radius-sm)!important;
  padding:1rem 1.2rem!important; margin-bottom:1.1rem!important; color:var(--ink)!important; font-weight:600;
}
.wpforms-error-container,.wpforms-field-error{ color:#B3261E; font-size:.85rem; margin-top:.35rem; }
.wpforms-field input.wpforms-error,.wpforms-field textarea.wpforms-error{ border-color:#B3261E!important; }

.info-list{ list-style:none; padding:0; margin:0 0 1.6rem; }
.info-list li{ display:flex; gap:.9rem; align-items:flex-start; margin:0 0 1.1rem; }
.info-list .ic{ width:44px; height:44px; border-radius:12px; background:var(--rain-soft); color:var(--steel); display:flex; align-items:center; justify-content:center; flex:none; }
.info-list .ic svg{ width:22px; height:22px; }
.info-list .lbl{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:.9rem; letter-spacing:.02em; }
.info-list .val{ color:var(--slate); }
.map-embed{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.map-embed iframe{ width:100%; height:300px; border:0; display:block; filter:grayscale(.2) contrast(1.05); }

.socials{ display:flex; gap:.7rem; margin-top:1rem; }
.socials a{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; transition:.2s;
}
.socials a:hover{ background:var(--steel); transform:translateY(-2px); }
.socials svg{ width:20px; height:20px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#9FBAC4; padding-top:clamp(3rem,6vw,4.5rem); }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1);
}
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .logo{ max-height:48px; margin-bottom:1rem; }
.footer-brand p{ font-size:.95rem; color:#8AA6B0; max-width:34ch; }
.footer-col h4{ color:#fff; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin:.55rem 0; }
.footer-col a{ color:#9FBAC4; transition:color .2s; }
.footer-col a:hover{ color:var(--rain); }
.footer-contact li{ display:flex; gap:.6rem; align-items:flex-start; margin:.7rem 0; font-size:.95rem; }
.footer-contact svg{ width:1.1rem; height:1.1rem; color:var(--rain); flex:none; margin-top:.2rem; }
.footer-socials{ display:flex; gap:.6rem; margin-top:1rem; }
.footer-socials a{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#fff; transition:.2s; }
.footer-socials a:hover{ background:var(--steel); }
.footer-socials svg{ width:18px; height:18px; }

/* Trade Flow Partners disclaimer */
.tfp-disclaimer{ font-size:.85rem; line-height:1.6; color:#7E9AA4; max-width:900px; margin:1.5rem auto 0; padding:1.5rem 1rem 0; text-align:center; }
.tfp-disclaimer p{ margin:0 0 .6rem; }
.footer-legal{
  display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; justify-content:space-between; align-items:center;
  padding:1.4rem 0 2rem; font-size:.85rem; color:#6E8A94;
}
.footer-legal a{ color:#8AA6B0; }
.footer-legal a:hover{ color:var(--rain); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- A11y / motion ---------- */
:focus-visible{ outline:3px solid var(--rain); outline-offset:2px; border-radius:4px; }
.skip{ position:absolute; left:-999px; top:0; background:var(--amber); color:var(--ink); padding:.7rem 1.2rem; border-radius:0 0 8px 0; z-index:200; font-family:var(--font-display); font-weight:700; }
.skip:focus{ left:0; }
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

@media(max-width:640px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
  .hero p{ max-width:none; }
}