/* ============================================================
   ALISHA MANNING — Brand Design System
   Palette: Fresh & Approachable (Forest / Cream / Copper)
   ============================================================ */

:root{
  /* --- Core brand colours --- */
  --pine:        #16302B;   /* deepest green — footers, dark sections */
  --forest:      #1F4E45;   /* PRIMARY brand green */
  --forest-soft: #2D6659;   /* hover / gradient partner */
  --sage:        #8FB09E;   /* soft mint-green, dividers + accents */
  --sage-tint:   #DCE7E0;   /* pale green wash */

  --copper:      #C97B47;   /* ACCENT — decorative only (rules, icons, glows) */
  --copper-btn:  #A55F31;   /* button fill — white text passes AA (4.9:1) */
  --copper-deep: #8F5124;   /* TEXT accent + hover — passes AA on cream (5.6:1) */
  --copper-tint: #F4E2D3;   /* pale copper wash */

  --cream:       #F7F2E9;   /* PAGE BACKGROUND */
  --warm-white:  #FDFBF7;   /* cards, panels */
  --ink:         #1A211F;   /* body text */
  --muted:       #5C6B66;   /* secondary text */
  --line:        #E2DACD;   /* hairline borders */

  /* --- Type --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Layout --- */
  --max: 1180px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(22,48,43,.06);
  --shadow: 0 12px 34px rgba(22,48,43,.10);
  --shadow-lg: 0 26px 60px rgba(22,48,43,.16);
  --ease: cubic-bezier(.22,.75,.28,1);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:var(--copper-deep); text-decoration:none;}
a:hover{color:var(--copper);}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.022em;
  color:var(--pine);
  margin:0 0 .5em;
  font-variation-settings:'SOFT' 20,'WONK' 0;
}
h1{font-size:clamp(2.5rem,6vw,4.3rem);}
h2{font-size:clamp(2rem,4.2vw,3.1rem);}
h3{font-size:clamp(1.3rem,2.2vw,1.65rem);}
h4{font-size:1.1rem; font-family:var(--font-body); font-weight:650; letter-spacing:-0.01em;}
p{margin:0 0 1.15em; max-width:68ch;}

::selection{background:var(--copper); color:#fff;}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 24px;}
.narrow{max-width:780px; margin-left:auto; margin-right:auto;}
.section{padding:clamp(64px,9vw,128px) 0;}
.section--tight{padding:clamp(48px,6vw,80px) 0;}
.center{text-align:center;}
.center p{margin-left:auto; margin-right:auto;}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.75rem; font-weight:680; letter-spacing:.16em; text-transform:uppercase;
  color:var(--copper-deep); margin-bottom:18px; font-family:var(--font-body);
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--copper); border-radius:2px;}
.center .eyebrow::before{display:none;}
.center .eyebrow{
  background:var(--copper-tint); padding:7px 16px; border-radius:99px; letter-spacing:.13em;
}

.lede{font-size:1.2rem; color:var(--muted); line-height:1.7;}

/* Dark + tinted sections */
.bg-forest{background:var(--forest); color:#EAF1ED;}
.bg-forest h1,.bg-forest h2,.bg-forest h3{color:#fff;}
.bg-forest .lede,.bg-forest p{color:#C7DAD1;}
.bg-forest .eyebrow{color:#F0C6A4;}
.bg-forest .eyebrow::before{background:var(--copper);}

.bg-pine{background:var(--pine); color:#DCE7E0;}
.bg-pine h1,.bg-pine h2,.bg-pine h3{color:#fff;}
.bg-pine p{color:#A9C0B7;}

.bg-white{background:var(--warm-white);}
.bg-sage{background:var(--sage-tint);}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-size:1rem; font-weight:620; letter-spacing:-0.005em;
  padding:16px 30px; border-radius:99px; border:2px solid transparent;
  cursor:pointer; text-align:center; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover{transform:translateY(-3px);}
.btn:active{transform:translateY(-1px);}

.btn--primary{background:var(--copper-btn); color:#fff; box-shadow:0 8px 22px rgba(165,95,49,.32);}
.btn--primary:hover{background:var(--copper-deep); color:#fff; box-shadow:0 16px 34px rgba(201,123,71,.42);}

.btn--forest{background:var(--forest); color:#fff; box-shadow:0 8px 22px rgba(31,78,69,.28);}
.btn--forest:hover{background:var(--forest-soft); color:#fff; box-shadow:0 16px 34px rgba(31,78,69,.36);}

.btn--ghost{background:transparent; color:var(--forest); border-color:var(--forest);}
.btn--ghost:hover{background:var(--forest); color:#fff;}

.btn--light{background:#fff; color:var(--forest);}
.btn--light:hover{background:var(--copper-btn); color:#fff;}

.btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.45);}
.btn--outline-light:hover{background:#fff; color:var(--forest); border-color:#fff;}

.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;}
.center .btn-row{justify-content:center;}

.arrow-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:620; color:var(--copper-deep); font-size:1rem;
}
.arrow-link span{transition:transform .3s var(--ease); display:inline-block;}
.arrow-link:hover span{transform:translateX(6px);}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:18px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(247,242,233,.88);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  padding:10px 0;
  border-bottom-color:var(--line);
  box-shadow:0 4px 24px rgba(22,48,43,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px;}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand__mark{
  width:44px; height:44px; border-radius:13px; flex:none;
  background:linear-gradient(140deg,var(--forest),var(--forest-soft));
  color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:-.03em;
  box-shadow:0 6px 16px rgba(31,78,69,.28);
  transition:transform .4s var(--ease);
}
.brand__mark img{width:66%; height:auto; display:block;}
.brand:hover .brand__mark{transform:rotate(-6deg) scale(1.05);}

/* Brand lockups — logo files supplied by Alisha, recoloured for each background */
.logo-havn{height:60px; width:auto;}
.logo-brx{height:44px; width:auto;}
.trust img{height:26px; width:auto; opacity:.62; transition:opacity .3s;}
.trust a:hover img{opacity:1;}
.footer__logos{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  margin-top:26px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
}
.footer__logos img{opacity:.8; transition:opacity .35s, transform .35s var(--ease);}
.footer__logos a:hover img{opacity:1; transform:translateY(-2px);}
.footer__logos .logo-havn{height:52px;}
.footer__logos .logo-brx{height:38px;}

/* BRX lockup on the Why BRX hero */
.brx-lockup{
  display:inline-flex; align-items:center; gap:16px; background:var(--warm-white);
  border:1px solid var(--line); border-radius:99px; padding:12px 26px 12px 20px;
  box-shadow:var(--shadow-sm); margin-bottom:24px;
  font-size:.86rem; font-weight:560; color:var(--muted);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.brx-lockup:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.brx-lockup img{height:38px; width:auto;}
.brand__name{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  color:var(--pine); line-height:1.1; letter-spacing:-.02em;
}
.brand__sub{
  display:block; font-family:var(--font-body); font-size:.66rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--copper-deep); margin-top:2px;
}

.nav__links{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0;}
.nav__links a{
  display:block; padding:10px 16px; border-radius:99px;
  font-size:.94rem; font-weight:560; color:var(--pine);
  transition:background .25s, color .25s;
}
.nav__links a:hover{background:rgba(31,78,69,.08); color:var(--forest);}
.nav__links a.is-active{background:var(--forest); color:#fff;}
.nav__cta{margin-left:10px;}
.nav__cta .btn{padding:12px 24px; font-size:.94rem;}

.nav__toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line);
  background:var(--warm-white); border-radius:13px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0;
}
.nav__toggle span{width:20px; height:2px; background:var(--pine); border-radius:2px; transition:transform .35s var(--ease), opacity .2s;}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:980px){
  .nav__toggle{display:flex;}
  .nav__menu{
    position:fixed; inset:0 0 0 auto; width:min(360px,86vw);
    background:var(--warm-white); box-shadow:var(--shadow-lg);
    padding:96px 26px 32px; display:flex; flex-direction:column; gap:8px;
    transform:translateX(102%); transition:transform .45s var(--ease); z-index:890;
  }
  .nav__menu.is-open{transform:translateX(0);}
  .nav__links{flex-direction:column; align-items:stretch; gap:4px;}
  .nav__links a{padding:14px 18px; border-radius:14px; font-size:1.05rem;}
  .nav__cta{margin:16px 0 0;}
  .nav__cta .btn{width:100%; padding:16px;}
  .nav-scrim{
    position:fixed; inset:0; background:rgba(22,48,43,.4); opacity:0; pointer-events:none;
    transition:opacity .4s; z-index:880; backdrop-filter:blur(3px);
  }
  .nav-scrim.is-open{opacity:1; pointer-events:auto;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; padding:clamp(140px,17vw,200px) 0 clamp(70px,9vw,110px);
  overflow:hidden;
}
.hero__grid{
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,70px); align-items:center;
}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr; gap:44px;}}

.hero__blob{
  position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0;
}
.blob-a{width:560px; height:560px; background:rgba(143,176,158,.42); top:-160px; right:-120px;}
.blob-b{width:440px; height:440px; background:rgba(201,123,71,.22); bottom:-180px; left:-140px;}
.hero .wrap{position:relative; z-index:1;}

.hero h1 .accent{
  color:var(--copper-deep); font-style:italic; font-variation-settings:'SOFT' 60,'WONK' 1;
}
.hero__badge{
  display:inline-flex; align-items:center; gap:10px; background:var(--warm-white);
  border:1px solid var(--line); border-radius:99px; padding:8px 8px 8px 8px;
  font-size:.84rem; font-weight:560; color:var(--muted); margin-bottom:26px; box-shadow:var(--shadow-sm);
}
.hero__badge b{
  background:var(--forest); color:#fff; border-radius:99px; padding:5px 13px;
  font-size:.72rem; font-weight:680; letter-spacing:.08em; text-transform:uppercase;
}
.hero__badge em{font-style:normal; padding-right:12px;}

/* Portrait card */
.portrait{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(160deg,var(--forest),var(--pine));
  aspect-ratio:5/7; box-shadow:var(--shadow-lg);
  display:grid; place-items:center; padding:28px; text-align:center;
}
.portrait::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(143,176,158,.35), transparent 60%);
}
.portrait__ph{position:relative; z-index:1; color:rgba(255,255,255,.62); font-size:.86rem; line-height:1.6;}
.portrait__ph strong{display:block; color:#fff; font-family:var(--font-display); font-size:1.25rem; margin-bottom:8px;}
.portrait img{
  position:absolute; inset:0; width:100%; height:100%; z-index:2;
  object-fit:cover; object-position:center 18%;
  transition:transform 1.2s var(--ease);
}
.portrait:hover img{transform:scale(1.035);}

.portrait-float{
  position:absolute; z-index:5; background:var(--warm-white); border-radius:16px;
  padding:14px 18px; box-shadow:var(--shadow); border:1px solid var(--line);
  font-size:.8rem; line-height:1.4; font-weight:560; color:var(--muted);
  animation:float 5.5s ease-in-out infinite;
}
.portrait-float b{display:block; font-family:var(--font-display); font-size:1.35rem; color:var(--forest); font-weight:600;}
.pf-1{bottom:26px; left:-22px;}
.pf-2{top:34px; right:-18px; animation-delay:-2.6s;}
@media (max-width:900px){.pf-1{left:8px;} .pf-2{right:8px;}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}

/* ============================================================
   STAT BAR
   ============================================================ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{
  background:var(--warm-white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; text-align:center; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stat:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.stat b{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(2rem,3.6vw,2.7rem); color:var(--forest); line-height:1; margin-bottom:8px;
}
.stat span{font-size:.86rem; color:var(--muted); font-weight:540; line-height:1.45; display:block;}

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid{display:grid; gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--warm-white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 30px; position:relative; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--copper);
  transition:width .5s var(--ease);
}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--sage);}
.card:hover::before{width:100%;}
.card h3{margin-bottom:.4em;}
.card p{margin-bottom:0; font-size:.98rem; color:var(--muted);}
.card p + .arrow-link{margin-top:18px;}

.card__icon{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--sage-tint); color:var(--forest); margin-bottom:20px;
  font-size:1.35rem; transition:transform .45s var(--ease), background .35s;
}
.card:hover .card__icon{transform:scale(1.08) rotate(-5deg); background:var(--copper-tint); color:var(--copper-deep);}

.card--dark{background:var(--forest); border-color:transparent; color:#C7DAD1;}
.card--dark h3{color:#fff;}
.card--dark p{color:#B4CCC2;}
.card--dark .card__icon{background:rgba(255,255,255,.12); color:#fff;}

/* Service pill list */
.pills{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0;}
.pills li{
  background:var(--warm-white); border:1px solid var(--line); border-radius:99px;
  padding:11px 20px; font-size:.93rem; font-weight:540; color:var(--pine);
  transition:transform .3s var(--ease), background .3s, border-color .3s, color .3s;
}
.pills li:hover{transform:translateY(-3px); background:var(--forest); border-color:var(--forest); color:#fff;}

/* Split feature rows */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center;}
.split--flip .split__media{order:-1;}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:32px;} .split--flip .split__media{order:0;}}
.split__media{
  border-radius:var(--radius-lg); min-height:340px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--sage-tint),var(--copper-tint));
  display:grid; place-items:center; box-shadow:var(--shadow); padding:32px;
}
.split__media{padding:0;}
.split__media:has(img){padding:0;}
.split__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 20%;
  transition:transform 1.2s var(--ease);
}
.split__media:hover img{transform:scale(1.04);}
.split__media--tall{min-height:clamp(420px,52vw,560px);}
.split__media--face img{object-position:center 12%;}
.split__media--mid img{object-position:center center;}
/* keep the dashed placeholder note padded */
.split__media .ph-note{margin:32px;}
.ph-note{
  color:var(--forest); font-size:.85rem; text-align:center; line-height:1.6;
  background:rgba(253,251,247,.82); border:1px dashed var(--sage); border-radius:14px; padding:18px 22px;
}
.ph-note strong{display:block; font-family:var(--font-display); font-size:1.1rem; margin-bottom:6px;}

/* Numbered steps */
.steps{counter-reset:step; display:grid; gap:16px;}
.step{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;
  background:var(--warm-white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover{transform:translateX(6px); box-shadow:var(--shadow-sm);}
.step__num{
  counter-increment:step; width:46px; height:46px; border-radius:14px; flex:none;
  background:var(--forest); color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.15rem; font-weight:600;
}
.step__num::before{content:"0" counter(step);}
.step h3{font-size:1.2rem; margin-bottom:.3em;}
.step p{margin:0; font-size:.97rem; color:var(--muted);}

/* Testimonials */
.quote{
  background:var(--warm-white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 32px; position:relative; display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.quote:hover{transform:translateY(-7px); box-shadow:var(--shadow);}
.quote__stars{color:var(--copper-btn); letter-spacing:3px; font-size:1.05rem; margin-bottom:16px;}
.quote p{font-size:1rem; line-height:1.72; color:var(--ink); flex:1; margin-bottom:22px;}
.quote__by{display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:18px;}
.quote__av{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--sage-tint); color:var(--forest); font-weight:680; font-size:.9rem;
}
.quote__by b{display:block; font-size:.95rem; color:var(--pine); font-weight:640;}
.quote__by small{color:var(--muted); font-size:.82rem;}

/* FAQ accordion */
.faq{border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px; font-family:var(--font-body); font-size:1.06rem; font-weight:600;
  color:var(--pine); transition:color .25s;
}
.faq__q:hover{color:var(--copper-deep);}
.faq__ico{
  width:30px; height:30px; border-radius:50%; flex:none; border:1.5px solid var(--sage);
  display:grid; place-items:center; position:relative; transition:background .3s, border-color .3s, transform .4s var(--ease);
}
.faq__ico::before,.faq__ico::after{
  content:""; position:absolute; background:var(--forest); border-radius:2px; transition:transform .35s var(--ease), background .3s;
}
.faq__ico::before{width:12px; height:2px;}
.faq__ico::after{width:2px; height:12px;}
.faq__item.is-open .faq__ico{background:var(--forest); border-color:var(--forest); transform:rotate(90deg);}
.faq__item.is-open .faq__ico::before,.faq__item.is-open .faq__ico::after{background:#fff;}
.faq__item.is-open .faq__ico::after{transform:scaleY(0);}
.faq__a{max-height:0; overflow:hidden; transition:max-height .5s var(--ease);}
.faq__a > div{padding:0 4px 26px; color:var(--muted); font-size:1rem;}
.faq__a p:last-child{margin-bottom:0;}

/* Tool / calculator cards */
.tool{
  display:flex; flex-direction:column; background:var(--warm-white);
  border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .4s;
}
.tool:hover{transform:translateY(-8px); box-shadow:var(--shadow); background:#fff;}
.tool__tag{
  align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  background:var(--copper-tint); color:var(--copper-deep); padding:6px 13px; border-radius:99px; margin-bottom:18px;
}
.tool h3{font-size:1.22rem;}
.tool p{font-size:.95rem; color:var(--muted); flex:1;}

/* ============================================================
   GOOGLE REVIEWS
   ============================================================ */
.greview{
  background:var(--warm-white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,48px);
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(22px,4vw,48px); align-items:center;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:box-shadow .45s var(--ease), transform .45s var(--ease);
}
.greview:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.greview::after{
  content:""; position:absolute; width:300px; height:300px; border-radius:50%;
  background:rgba(143,176,158,.18); filter:blur(70px); top:-140px; right:-80px; pointer-events:none;
}
.greview > *{position:relative; z-index:1;}
@media (max-width:880px){
  .greview{grid-template-columns:1fr; text-align:center; justify-items:center; gap:22px;}
}

.greview__logo{width:56px; height:56px; flex:none;}
@media (max-width:880px){.greview__logo{width:48px;height:48px;}}

.greview__score{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.greview__num{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,5vw,3.2rem);
  color:var(--pine); line-height:1; letter-spacing:-.03em;
}
.greview__stars{color:#B37D06; font-size:1.35rem; letter-spacing:2px; line-height:1;}
.greview__meta{margin:8px 0 0; font-size:.98rem; color:var(--muted); max-width:42ch;}
.greview__meta strong{color:var(--pine); font-weight:640;}
@media (max-width:880px){
  .greview__score{justify-content:center;}
  .greview__meta{margin-left:auto; margin-right:auto;}
}

.greview__actions{display:flex; flex-direction:column; gap:10px; align-items:stretch;}
@media (max-width:880px){.greview__actions{flex-direction:row; flex-wrap:wrap; justify-content:center;}}
.greview__actions .btn{white-space:nowrap;}

/* Google-blue button (white text = 4.5:1, passes AA) */
.btn--google{background:#1A73E8; color:#fff; box-shadow:0 8px 22px rgba(26,115,232,.28);}
.btn--google:hover{background:#1557B0; color:#fff; box-shadow:0 16px 34px rgba(21,87,176,.34);}

/* Inline compact version (footers / narrow slots) */
.greview--slim{
  grid-template-columns:auto auto 1fr; gap:16px 20px; padding:20px 26px; border-radius:var(--radius);
}
.greview--slim .greview__logo{width:36px; height:36px;}
.greview--slim .greview__num{font-size:1.7rem;}
.greview--slim .greview__stars{font-size:1rem;}
.greview--slim .greview__actions{flex-direction:row; justify-self:end;}
@media (max-width:880px){.greview--slim{grid-template-columns:1fr;}}

/* Google badge that sits above a testimonial grid */
.gbadge{
  display:inline-flex; align-items:center; gap:12px; background:var(--warm-white);
  border:1px solid var(--line); border-radius:99px; padding:9px 20px 9px 12px;
  font-size:.92rem; color:var(--muted); box-shadow:var(--shadow-sm); margin-bottom:20px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gbadge:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.gbadge svg{width:22px; height:22px; flex:none;}
.gbadge b{color:var(--pine); font-weight:660;}
.gbadge .gbadge__stars{color:#B37D06; letter-spacing:1px;}

/* ============================================================
   FREE TOOLS / LEAD MAGNET
   ============================================================ */
.leadmag{
  background:linear-gradient(145deg,var(--forest) 0%,var(--pine) 100%);
  border-radius:var(--radius-lg); padding:clamp(34px,5vw,64px) clamp(26px,4vw,58px);
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center;
}
.leadmag::before{
  content:""; position:absolute; width:460px; height:460px; border-radius:50%;
  background:rgba(201,123,71,.28); filter:blur(90px); top:-200px; right:-120px;
}
.leadmag::after{
  content:""; position:absolute; width:360px; height:360px; border-radius:50%;
  background:rgba(143,176,158,.24); filter:blur(80px); bottom:-180px; left:-100px;
}
.leadmag > *{position:relative; z-index:1;}
.leadmag h2,.leadmag h3{color:#fff;}
.leadmag p{color:#C7DAD1;}
@media (max-width:900px){.leadmag{grid-template-columns:1fr; gap:32px;}}

/* the tool list inside */
.toolkit{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px;}
.toolkit li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  color:#D3E3DC; font-size:1rem; line-height:1.55;
}
.toolkit li span:first-child{
  width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.13);
  display:grid; place-items:center; font-size:.9rem; margin-top:2px;
}
.toolkit b{color:#fff; font-weight:640; display:block;}
.toolkit small{color:#A9C0B7; font-size:.88rem;}

/* ============================================================
   FORMS
   ============================================================ */
.form{
  background:var(--warm-white); border-radius:var(--radius); padding:clamp(26px,3vw,34px);
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.2);
}
.form h3{font-size:1.25rem; margin-bottom:.35em;}
.form > p{font-size:.95rem; color:var(--muted); margin-bottom:22px;}

.field{display:block; margin-bottom:16px;}
.field > span{
  display:block; font-size:.82rem; font-weight:640; letter-spacing:.03em;
  color:var(--pine); margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--cream); border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder{color:#9AA8A3;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--forest); background:#fff;
  box-shadow:0 0 0 4px rgba(31,78,69,.13);
}
.field input:user-invalid{border-color:#B3261E;}

.form .btn{width:100%; margin-top:6px;}
.form__note{font-size:.8rem; color:var(--muted); margin:16px 0 0; line-height:1.55;}
.form__note a{text-decoration:underline;}

/* consent checkbox */
.consent{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start;
  font-size:.83rem; color:var(--muted); line-height:1.55; margin:4px 0 18px;
}
.consent input{
  width:19px; height:19px; margin:2px 0 0; accent-color:var(--forest); flex:none;
}

/* status messages */
.form__status{
  display:none; margin-top:16px; padding:14px 16px; border-radius:12px;
  font-size:.92rem; line-height:1.55;
}
.form__status.is-shown{display:block;}
.form__status--ok{background:var(--sage-tint); color:#14392F; border:1px solid var(--sage);}
.form__status--err{background:#FBE9E7; color:#7A1D16; border:1px solid #E3B4AE;}

/* loading state on submit */
.btn.is-loading{pointer-events:none; opacity:.75;}
.btn.is-loading::after{
  content:""; width:15px; height:15px; border-radius:50%; margin-left:2px;
  border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Free-tools teaser card (used on the home page) */
.teaser{
  display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center;
  background:var(--warm-white); border:1px solid var(--line); border-left:5px solid var(--copper);
  border-radius:var(--radius); padding:30px 32px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.teaser:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.teaser h3{margin-bottom:.3em;}
.teaser p{margin:0; color:var(--muted); font-size:.98rem;}
@media (max-width:760px){.teaser{grid-template-columns:1fr; gap:20px;}}

/* CTA band */
.cta-band{
  background:linear-gradient(140deg,var(--forest) 0%,var(--pine) 100%);
  border-radius:var(--radius-lg); padding:clamp(44px,6vw,76px) clamp(28px,5vw,64px);
  position:relative; overflow:hidden; text-align:center;
}
.cta-band::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:rgba(201,123,71,.26); filter:blur(80px); top:-160px; right:-100px;
}
.cta-band::after{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  background:rgba(143,176,158,.24); filter:blur(80px); bottom:-160px; left:-90px;
}
.cta-band > *{position:relative; z-index:1;}
.cta-band h2{color:#fff;}
.cta-band p{color:#BFD5CB; margin-left:auto; margin-right:auto;}

/* Logo / trust strip */
.trust{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px;}
.trust span{
  font-size:.84rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:9px;
}
.trust span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--sage);}

/* Content-creation platform tiles */
.platform{
  background:var(--warm-white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; text-align:center;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s;
}
.platform:hover{transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow); border-color:var(--copper);}
.platform b{display:block; font-family:var(--font-display); font-size:1.15rem; color:var(--pine); margin-bottom:4px;}
.platform small{color:var(--muted); font-size:.85rem;}
.platform__ico{font-size:1.7rem; margin-bottom:12px; display:block;}

/* Checklist */
.checks{list-style:none; padding:0; margin:0 0 8px; display:grid; gap:13px;}
.checks li{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; font-size:1rem; line-height:1.6;}
.checks li::before{
  content:"✓"; width:26px; height:26px; border-radius:50%; background:var(--sage-tint); color:var(--forest);
  display:grid; place-items:center; font-size:.8rem; font-weight:800; margin-top:3px;
}
.bg-forest .checks li{color:#D3E3DC;}
.bg-forest .checks li::before{background:rgba(255,255,255,.14); color:#fff;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--pine); color:#9FB8AE; padding:clamp(56px,7vw,88px) 0 32px; font-size:.95rem;}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:38px; margin-bottom:52px;}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr; gap:34px;}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr;}}
.site-footer h4{color:#fff; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:18px; font-weight:680;}
.site-footer a{color:#9FB8AE; display:inline-block; padding:5px 0; transition:color .25s, transform .25s var(--ease);}
.site-footer a:hover{color:#fff; transform:translateX(4px);}
.site-footer ul{list-style:none; padding:0; margin:0;}
.site-footer .brand__name{color:#fff;}
.site-footer .brand__mark{background:rgba(255,255,255,.12); box-shadow:none;}
.site-footer p{color:#88A399; font-size:.93rem;}
.footer__social{display:flex; gap:10px; margin-top:18px;}
.footer__social a{
  width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08);
  display:grid; place-items:center; color:#DCE7E0; font-size:.78rem; font-weight:700; padding:0;
  transition:background .3s, transform .3s var(--ease), color .3s;
}
.footer__social a:hover{background:var(--copper-btn); color:#fff; transform:translateY(-4px);}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:26px;
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:center;
  font-size:.84rem; color:#7C978C;
}
.footer__bottom .lic{font-variant-numeric:tabular-nums;}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity, transform;
}
[data-reveal].is-in{opacity:1; transform:none;}
[data-reveal="left"]{transform:translateX(-30px);}
[data-reveal="right"]{transform:translateX(30px);}
[data-reveal="scale"]{transform:scale(.94);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  [data-reveal]{opacity:1 !important; transform:none !important;}
}

/* Progress bar */
.progress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--copper),var(--sage)); z-index:1000; transition:width .1s linear;}

/* Utility */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.mt-s{margin-top:18px;} .mt-m{margin-top:34px;} .mt-l{margin-top:56px;}
.divider{height:1px; background:var(--line); border:0; margin:0;}