/* ============================================================
   Sorley Accountants — shared stylesheet
   Type:  Newsreader (display serif) + Hanken Grotesk (body sans)
   Brand: logo sky-blue, deep navy for depth, near-black ink, airy white
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  /* brand colour */
  --brand-sky:  #54a3e2;   /* the logo blue — decorative, big shapes */
  --sky-soft:   #eaf3fb;   /* faint sky tint for section backgrounds */
  --sky-line:   #d4e6f6;
  --primary:    #1668ab;   /* deeper sky — buttons & links (AA on white) */
  --primary-700:#115488;
  --navy:       #112740;   /* deep navy — depth sections, footer */
  --navy-800:   #0c1d31;

  --ink:        #16202b;   /* primary text */
  --ink-soft:   #2c3a48;
  --muted:      #5a6675;   /* secondary text */
  --muted-2:    #7c8896;

  --bg:         #ffffff;
  --bg-2:       #f7fafd;   /* very light cool wash */
  --line:       #e4eaf1;
  --line-2:     #eef2f7;

  --gold:       #c8923f;   /* tiny warm accent for AAT / trust ticks (used sparingly) */

  /* type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(17,39,64,.05), 0 2px 8px rgba(17,39,64,.05);
  --shadow-md: 0 6px 20px rgba(17,39,64,.08), 0 2px 6px rgba(17,39,64,.05);
  --shadow-lg: 0 24px 60px rgba(17,39,64,.16), 0 8px 22px rgba(17,39,64,.08);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-700); }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; color: var(--ink); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.4rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); }
p  { text-wrap: pretty; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--brand-sky);
  display: inline-block;
}
.lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.32rem); color: var(--ink-soft); line-height: 1.55; }
.muted { color: var(--muted); }

/* ---- Layout primitives ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 7vw, 110px); }
.section--tint { background: var(--bg-2); }
.section--sky  { background: var(--sky-soft); }
.section-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 54px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head p { margin-top: 16px; color: var(--muted); font-size: 1.1rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(22,104,171,.28); }
.btn--primary:hover { background: var(--primary-700); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(22,104,171,.34); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand-sky); color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--onnavy { background: #fff; color: var(--navy); }
.btn--onnavy:hover { background: var(--sky-soft); color: var(--navy-800); transform: translateY(-2px); }
.btn--lineNavy { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--lineNavy:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; transform: translateY(-2px); }
.btn--lg { padding: 18px 32px; font-size: 1.08rem; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-bar { display: flex; align-items: center; gap: 24px; height: 78px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 38px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--ink-soft); font-weight: 600; font-size: .96rem;
  padding: 9px 14px; border-radius: 10px; position: relative;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--primary); background: var(--sky-soft); }
.nav a.is-active { color: var(--primary); }
.nav a.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--brand-sky); border-radius: 2px;
}
.header-cta { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--ink); font-size: .98rem; white-space: nowrap;
}
.header-phone svg { width: 18px; height: 18px; color: var(--primary); }
.header-phone:hover { color: var(--primary); }

.header-call { display: none; }
.nav-toggle { display: none; }

/* mobile nav */
@media (max-width: 940px) {
  .header-bar { gap: 12px; height: 72px; }
  .nav, .header-cta { display: none; }
  .header-call {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: auto; flex-shrink: 0;
    border-radius: 12px; background: var(--sky-soft); color: var(--primary);
  }
  .header-call svg { width: 23px; height: 23px; }
  .header-call:active { background: var(--sky-line); }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex-shrink: 0;
    border: none; border-radius: 12px; background: var(--primary); color: #fff;
  }
  .nav-toggle svg { width: 26px; height: 26px; }
  .mobile-nav {
    position: fixed; inset: 72px 0 0 0; z-index: 55;
    background: #fff; padding: 24px var(--gutter) 40px;
    transform: translateX(100%); transition: transform .3s var(--ease);
    display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  }
  .mobile-nav.open { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 941px) { .mobile-nav { display: none; } }
.mobile-nav a { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); padding: 14px 4px; border-bottom: 1px solid var(--line-2); }
.mobile-nav a:hover { color: var(--primary); }
.mobile-nav .mob-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.mobile-nav .mob-actions .btn { width: 100%; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero::before {
  content: ""; position: absolute; top: -22%; right: -12%;
  width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(84,163,226,.18), rgba(84,163,226,0) 62%);
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px);
  align-items: center; padding-block: clamp(48px, 6vw, 92px);
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin: 20px 0 0; }
.hero h1 em { font-style: italic; color: var(--primary); }
.hero-copy .lead { margin-top: 22px; max-width: 33ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }
.hero-note { margin-top: 18px; font-size: .92rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero-note svg { width: 16px; height: 16px; color: var(--primary); }

/* hero image composition */
.hero-media { position: relative; }
.hero-photo {
  position: relative; z-index: 2;
  border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.4;
  background: var(--sky-soft);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.hero-media .arc {
  position: absolute; z-index: 1; inset: auto -24px -28px auto;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: var(--brand-sky); opacity: .14;
}
.hero-badge {
  position: absolute; z-index: 3; left: -22px; bottom: 34px;
  background: #fff; border-radius: 18px; padding: 16px 20px;
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  max-width: 250px;
}
.hero-badge .avatars { display: flex; }
.hero-badge .avatars img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 2.5px solid #fff; margin-left: -12px;
}
.hero-badge .avatars img:first-child { margin-left: 0; }
.hero-badge b { font-family: var(--sans); font-size: .95rem; display: block; line-height: 1.2; }
.hero-badge span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.35; }

/* trust strip */
.trust {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.trust-row {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 56px);
  align-items: center; justify-content: space-between;
  padding-block: 22px;
}
.trust-item { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-weight: 600; font-size: .98rem; }
.trust-item svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }
.trust-item b { font-family: var(--serif); font-weight: 600; }

/* ============================================================
   Services cards
   ============================================================ */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  position: relative;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sky-line); }
.svc-ico {
  width: 50px; height: 50px; border-radius: 13px;
  background: var(--sky-soft); color: var(--primary);
  display: grid; place-items: center; margin-bottom: 6px;
}
.svc-ico svg { width: 26px; height: 26px; }
.svc-card h3 { font-size: 1.3rem; }
.svc-card p { color: var(--muted); font-size: .98rem; margin: 0; flex: 1; }
.svc-link { font-weight: 600; font-size: .95rem; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.svc-link svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.svc-card:hover .svc-link svg { transform: translateX(4px); }

/* ============================================================
   Pricing
   ============================================================ */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; display: flex; flex-direction: column; gap: 8px;
  position: relative; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card.featured { border-color: var(--brand-sky); box-shadow: var(--shadow-md); }
.price-card .ribbon {
  position: absolute; top: -13px; left: 30px; white-space: nowrap;
  background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.price-card .svc-name { font-family: var(--sans); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.price-card .desc { color: var(--muted); font-size: .94rem; min-height: 2.8em; }
.price-amt { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.price-amt .from { font-size: .82rem; color: var(--muted); font-weight: 600; }
.price-amt .num { font-family: var(--serif); font-size: 2.7rem; color: var(--ink); line-height: 1; }
.price-amt .per { color: var(--muted); font-size: .92rem; }
.price-card ul.feats { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 22px; }
.price-card ul.feats li { display: flex; gap: 10px; font-size: .95rem; color: var(--ink-soft); }
.price-card ul.feats svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.price-card .btn { margin-top: auto; }
.price-note { text-align: center; margin-top: 26px; color: var(--muted); font-size: .95rem; }

/* ============================================================
   Meet the family
   ============================================================ */
.family-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.person { text-align: left; }
.person-photo {
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: var(--sky-soft); box-shadow: var(--shadow-sm); margin-bottom: 16px;
  position: relative;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: 1.28rem; }
.person h3 .post-nom { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--primary); vertical-align: middle; background: var(--sky-soft); padding: 3px 7px; border-radius: 6px; margin-left: 6px; }
.person .role { color: var(--primary); font-weight: 600; font-size: .92rem; margin-top: 2px; }
.person .bio { color: var(--muted); font-size: .94rem; margin-top: 8px; }
/* placeholder photo */
.photo-ph {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, #e7eef5 0 12px, #eef4fa 12px 24px);
  display: grid; place-items: center; color: var(--muted-2);
  font-family: var(--sans); font-size: .8rem; text-align: center; padding: 16px;
}
.photo-ph .ph-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .72rem; letter-spacing: .02em; }
.photo-ph .ph-init { font-family: var(--serif); font-size: 2.4rem; color: var(--brand-sky); margin-bottom: 6px; }

/* family banner (photo + story) */
.family-banner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.family-banner .fb-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3/3.2; }
.family-banner .fb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* ============================================================
   Testimonials
   ============================================================ */
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.quote-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 34px; display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
}
.quote-card::before {
  content: "\201C"; position: absolute; top: -10px; right: 24px;
  font-family: var(--serif); font-size: 7rem; color: var(--sky-soft); line-height: 1; z-index: 0;
}
.quote-card .stars { display: flex; gap: 3px; color: #e8a93b; position: relative; z-index: 1; }
.quote-card .stars svg { width: 19px; height: 19px; }
.quote-card blockquote { font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; color: var(--ink); position: relative; z-index: 1; }
.quote-card .who { display: flex; align-items: center; gap: 13px; margin-top: auto; position: relative; z-index: 1; }
.quote-card .who .badge {
  height: 52px; padding: 7px 11px;
  border-radius: 11px; background: #fff; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.quote-card .who .badge img { height: 100%; width: auto; object-fit: contain; }
.quote-card .who > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.quote-card .who b { font-family: var(--sans); display: block; font-size: .98rem; line-height: 1.25; }
.quote-card .who span { display: block; font-size: .88rem; color: var(--muted); line-height: 1.3; }

/* ============================================================
   Calculators teaser
   ============================================================ */
.tools-band { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.tools-band::before {
  content: ""; position: absolute; left: -8%; top: -30%; width: 540px; height: 540px;
  border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(84,163,226,.28), transparent 64%);
}
.tools-band .section-head h2, .tools-band .section-head p { color: #fff; }
.tools-band .section-head p { color: rgba(255,255,255,.72); }
.tools-band .eyebrow { color: var(--brand-sky); }
.tools-band .eyebrow::before { background: var(--brand-sky); }
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; z-index: 1; }
.tool-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 26px 24px; color: #fff;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.tool-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); border-color: rgba(84,163,226,.6); color: #fff; }
.tool-card .t-ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(84,163,226,.18); color: var(--brand-sky); display: grid; place-items: center; }
.tool-card .t-ico svg { width: 24px; height: 24px; }
.tool-card h3 { color: #fff; font-size: 1.18rem; }
.tool-card p { color: rgba(255,255,255,.66); font-size: .92rem; margin: 0; flex: 1; }
.tool-card .t-go { font-size: .88rem; font-weight: 600; color: var(--brand-sky); display: inline-flex; align-items: center; gap: 6px; }
.tool-card .t-go svg { width: 15px; height: 15px; transition: transform .18s var(--ease); }
.tool-card:hover .t-go svg { transform: translateX(4px); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { background: var(--sky-soft); }
.cta-inner {
  background: linear-gradient(135deg, var(--navy), var(--navy-800));
  border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 64px);
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center;
  position: relative; overflow: hidden;
}
.cta-inner::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(84,163,226,.32), transparent 66%);
}
.cta-inner h2, .cta-inner p { color: #fff; position: relative; z-index: 1; }
.cta-inner p { color: rgba(255,255,255,.76); margin-top: 14px; font-size: 1.1rem; }
.cta-actions { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.cta-actions .btn { width: 100%; }
.cta-actions .or { text-align: center; color: rgba(255,255,255,.55); font-size: .85rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy-800); color: rgba(255,255,255,.7); padding-block: clamp(48px, 6vw, 72px) 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.site-footer .f-logo img { height: 40px; margin-bottom: 18px; }
.site-footer .f-about { font-size: .96rem; line-height: 1.6; max-width: 30ch; }
.site-footer h4 { font-family: var(--sans); color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.site-footer ul.f-links { display: flex; flex-direction: column; gap: 11px; }
.site-footer ul.f-links a { color: rgba(255,255,255,.7); font-size: .96rem; }
.site-footer ul.f-links a:hover { color: var(--brand-sky); }
.f-contact { display: flex; flex-direction: column; gap: 13px; }
.f-contact a, .f-contact span { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,.78); font-size: .96rem; }
.f-contact svg { width: 18px; height: 18px; color: var(--brand-sky); flex-shrink: 0; margin-top: 3px; }
.f-contact a:hover { color: var(--brand-sky); }
.f-social { display: flex; gap: 12px; margin-top: 4px; }
.f-social a { width: 42px; height: 42px; border-radius: 11px; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: #fff; }
.f-social a:hover { background: var(--brand-sky); border-color: var(--brand-sky); color: #fff; }
.f-social svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 24px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: .86rem; }
.footer-bottom .legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(255,255,255,.6); }
.footer-bottom a:hover { color: var(--brand-sky); }
.footer-bottom .built-by { width: 100%; margin-top: 6px; display: inline-flex; gap: .55em; align-items: baseline; justify-content: center; font-family: var(--sans); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.footer-bottom .built-by .m { font-family: 'Spectral', Georgia, serif; text-transform: none; letter-spacing: -0.01em; font-size: 1.15rem; font-weight: 500; color: #E4B782; transition: color .15s ease; }
.footer-bottom .built-by:hover { color: rgba(255,255,255,.55); }
.footer-bottom .built-by:hover .m { color: #efcaa0; }
.confirm-tag { color: #d8a657; font-size: .8rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .cards-grid, .price-grid, .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .family-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cta-inner { grid-template-columns: 1fr; }
  .family-banner { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-media { max-width: 420px; margin-inline: auto; width: 100%; }
  .hero-copy .lead { max-width: 52ch; }
  .hero-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .cards-grid, .price-grid, .tools-grid, .family-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust-row { justify-content: flex-start; gap: 16px 28px; }
  .hero-badge { left: 8px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}

/* ============================================================
   SUB-PAGE COMPONENTS (added for multi-page build)
   ============================================================ */

/* ---- Sub-page hero / banner ---- */
.page-hero { position: relative; background: var(--sky-soft); border-bottom: 1px solid var(--sky-line); overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; top: -40%; right: -8%; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(84,163,226,.18), rgba(84,163,226,0) 62%); pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; padding-block: clamp(40px, 5vw, 72px); }
.page-hero h1 { margin-top: 14px; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); }
.page-hero .lead { margin-top: 18px; max-width: 56ch; }
.page-hero.is-navy { background: linear-gradient(135deg, var(--navy), var(--navy-800)); border-bottom: none; }
.page-hero.is-navy h1, .page-hero.is-navy .lead { color: #fff; }
.page-hero.is-navy .lead { color: rgba(255,255,255,.78); }
.page-hero.is-navy .eyebrow { color: var(--brand-sky); }
.page-hero.is-navy .eyebrow::before { background: var(--brand-sky); }
.page-hero.is-navy .crumbs, .page-hero.is-navy .crumbs a { color: rgba(255,255,255,.7); }
.page-hero.is-navy .crumbs a:hover { color: #fff; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---- Breadcrumbs ---- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current] { color: var(--ink-soft); }

/* ---- Prose + content layout ---- */
.content-grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul.checklist { display: flex; flex-direction: column; gap: 11px; margin-top: 1em; }
.prose ul.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.prose ul.checklist svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; margin-top: 3px; }
.prose strong { color: var(--ink); }
.prose .lead { color: var(--ink-soft); }

/* ---- Sidebar (sticky) ---- */
.sidebar { position: sticky; top: 98px; display: flex; flex-direction: column; gap: 18px; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.side-card.is-sky { background: var(--sky-soft); border-color: var(--sky-line); }
.side-card.is-navy { background: linear-gradient(135deg, var(--navy), var(--navy-800)); color: #fff; border: none; }
.side-card.is-navy h3, .side-card.is-navy p { color: #fff; }
.side-card.is-navy p { color: rgba(255,255,255,.76); }
.side-card h3 { font-size: 1.25rem; }
.side-card p { color: var(--muted); font-size: .95rem; margin-top: 8px; }
.side-price { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; }
.side-price .num { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: inherit; }
.side-price .from { font-size: .8rem; color: var(--muted); font-weight: 600; }
.side-price .per { font-size: .9rem; color: var(--muted); }
.side-card .btn { width: 100%; margin-top: 16px; }
.side-card .side-call { display: flex; align-items: center; gap: 9px; font-weight: 700; margin-top: 14px; }
.side-card .side-call svg { width: 18px; height: 18px; color: var(--brand-sky); }

/* ---- Split feature rows ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.flip .split-media { order: -1; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/4.6; }
.split-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---- Stats row ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat { text-align: center; padding: 8px; }
.stat .n { font-family: var(--serif); font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); color: var(--primary); line-height: 1; }
.stat .l { color: var(--muted); font-size: .95rem; margin-top: 8px; display: block; }

/* ---- FAQ accordion ---- */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .18s var(--ease); }
.faq details[open] { border-color: var(--sky-line); box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-family: var(--serif); font-size: 1.18rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 24px; height: 24px; flex-shrink: 0; position: relative; }
.faq summary .ic::before, .faq summary .ic::after { content: ""; position: absolute; background: var(--primary); border-radius: 2px; transition: transform .2s var(--ease); }
.faq summary .ic::before { top: 11px; left: 3px; width: 18px; height: 2px; }
.faq summary .ic::after { top: 3px; left: 11px; width: 2px; height: 18px; }
.faq details[open] summary .ic::after { transform: rotate(90deg); opacity: 0; }
.faq .faq-body { padding: 0 24px 22px; color: var(--ink-soft); }
.faq .faq-body p + p { margin-top: .8em; }

/* ---- Forms ---- */
.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.field:first-child { margin-top: 0; }
.field label { font-weight: 600; font-size: .92rem; color: var(--ink-soft); }
.field .req { color: #c0392b; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--bg-2);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-sky); background: #fff; box-shadow: 0 0 0 4px rgba(84,163,226,.16); }
.field textarea { resize: vertical; min-height: 120px; }
.field .hint { font-size: .82rem; color: var(--muted); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.check { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; font-size: .95rem; transition: border-color .15s, background .15s; }
.check:hover { border-color: var(--sky-line); }
.check input { width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; }
.check.is-on { border-color: var(--brand-sky); background: var(--sky-soft); }
.form .btn { margin-top: 24px; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: 14px; }
.form-success { display: none; background: var(--sky-soft); border: 1.5px solid var(--brand-sky); border-radius: var(--radius); padding: 28px; text-align: center; }
.form-success.show { display: block; }
.form-success h3 { color: var(--primary); }
.form-success svg { width: 48px; height: 48px; color: var(--primary); margin: 0 auto 12px; }

/* ---- Contact info blocks ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.info-list { display: flex; flex-direction: column; gap: 18px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-item .ii-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--sky-soft); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.info-item .ii-ico svg { width: 23px; height: 23px; }
.info-item b { font-family: var(--sans); display: block; font-size: 1.02rem; }
.info-item a, .info-item span { color: var(--muted); font-size: .98rem; }
.info-item a:hover { color: var(--primary); }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-top: 26px; }
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }

/* ---- Notice / disclaimer ---- */
.notice { display: flex; gap: 12px; align-items: flex-start; background: var(--sky-soft); border: 1px solid var(--sky-line); border-radius: var(--radius-sm); padding: 16px 18px; font-size: .9rem; color: var(--ink-soft); }
.notice svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.notice.warm { background: #fbf4e8; border-color: #ecd9b4; }
.notice.warm svg { color: var(--gold); }

/* ============================================================
   CALCULATORS
   ============================================================ */
.calc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.calc-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm); }
.calc-panel h2 { font-size: 1.5rem; }
.calc-panel .field input[type="number"]::-webkit-outer-spin-button,
.calc-panel .field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-money { position: relative; }
.input-money::before { content: "£"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; }
.input-money input { padding-left: 30px; }
.seg { display: inline-flex; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { border: none; background: transparent; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--muted); }
.seg button.is-on { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.calc-result { background: linear-gradient(135deg, var(--navy), var(--navy-800)); color: #fff; border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); position: relative; overflow: hidden; }
.calc-result::before { content: ""; position: absolute; right: -50px; top: -50px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(84,163,226,.3), transparent 66%); }
.calc-result > * { position: relative; z-index: 1; }
.calc-result .r-label { color: rgba(255,255,255,.66); font-size: .9rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.calc-result .r-big { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 3vw, 3.8rem); line-height: 1; margin: 8px 0 4px; }
.calc-result .r-sub { color: rgba(255,255,255,.7); font-size: .98rem; }
.breakdown { margin-top: 24px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.breakdown .row { display: flex; justify-content: space-between; gap: 16px; font-size: .98rem; color: rgba(255,255,255,.82); }
.breakdown .row b { color: #fff; font-weight: 600; }
.breakdown .row.total { border-top: 1px solid rgba(255,255,255,.14); padding-top: 12px; margin-top: 4px; }
.breakdown .row.total span, .breakdown .row.total b { font-size: 1.1rem; color: #fff; }
.calc-result .btn { margin-top: 24px; width: 100%; }
.calc-result .r-disclaim { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: 14px; }

/* calculators grid (hub) reuses .cards-grid / .tool-card on white */
.tool-card.on-light { background: #fff; border-color: var(--line); color: var(--ink); }
.tool-card.on-light h3 { color: var(--ink); }
.tool-card.on-light p { color: var(--muted); }
.tool-card.on-light .t-ico { background: var(--sky-soft); color: var(--primary); }
.tool-card.on-light .t-go { color: var(--primary); }
.tool-card.on-light:hover { background: #fff; border-color: var(--sky-line); box-shadow: var(--shadow-md); }

/* related links / mini nav */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related a { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-soft); transition: border-color .18s, transform .18s; }
.related a:hover { border-color: var(--sky-line); transform: translateY(-2px); color: var(--primary); }
.related a svg { width: 18px; height: 18px; color: var(--primary); }

/* responsive */
@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .calc-wrap { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.flip .split-media { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .related { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .form-row, .checks { grid-template-columns: 1fr; }
}


/* ---- Guide sidebar link list (added in SEO build) ---- */
.guide-links { display: flex; flex-direction: column; gap: 10px; }
.guide-links a { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.guide-links a:hover { color: var(--primary); }


/* ============================================================
   PHASE 5 — design polish
   ============================================================ */

/* selection + focus */
::selection { background: rgba(84,163,226,.28); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand-sky); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 3px; }

/* skip link */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; font-weight: 600; font-size: .92rem;
  padding: 12px 20px; border-radius: 0 0 12px 12px; transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* anchor targets clear the sticky header */
[id] { scroll-margin-top: 96px; }

/* header gains depth once the page scrolls */
.site-header { transition: box-shadow .25s var(--ease); }
.site-header.scrolled { box-shadow: 0 4px 24px rgba(17,39,64,.08); }

/* logo hover */
.brand img { transition: transform .25s var(--ease); }
.brand:hover img { transform: scale(1.03); }

/* buttons: press feedback */
.btn:active { transform: translateY(0) scale(.985); }

/* hero photo: gentle settle on hover */
.hero-photo img, .split-media img, .family-banner .fb-photo img { transition: transform .8s var(--ease); }
.hero-photo:hover img, .split-media:hover img, .family-banner .fb-photo:hover img { transform: scale(1.025); }

/* service cards: sky accent line that draws in */
.svc-card::after {
  content: ""; position: absolute; left: 28px; right: 28px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--brand-sky), var(--primary));
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.svc-card:hover::after { transform: scaleX(1); }
.svc-ico { transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.svc-card:hover .svc-ico { background: var(--primary); color: #fff; transform: scale(1.06) rotate(-3deg); }

/* featured price card: subtle sky wash */
.price-card.featured { background: linear-gradient(180deg, #fff 55%, var(--sky-soft) 160%); }
.price-card.featured:hover { box-shadow: var(--shadow-lg); }

/* team photos: lift + zoom */
.person-photo { transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.person-photo img { transition: transform .6s var(--ease); }
.person:hover .person-photo { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.person:hover .person-photo img { transform: scale(1.04); }

/* testimonial cards */
.quote-card { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sky-line); }

/* prose links: visible, animated underline */
.prose a:not(.btn) {
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--sky-line);
  text-underline-offset: 3px; text-decoration-thickness: 2px; transition: text-decoration-color .18s;
}
.prose a:not(.btn):hover { text-decoration-color: var(--brand-sky); }

/* FAQ: hover hint */
.faq summary:hover { color: var(--primary); }

/* footer links: smooth slide */
.site-footer ul.f-links a { transition: color .15s, padding-left .18s var(--ease); }
.site-footer ul.f-links a:hover { padding-left: 5px; }

/* scroll-reveal (JS adds .rv, then .in when visible; gated on .js-anim) */
.js-anim .rv { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js-anim .rv.in { opacity: 1; transform: none; }
.js-anim .rv:nth-child(2) { transition-delay: .07s; }
.js-anim .rv:nth-child(3) { transition-delay: .14s; }
.js-anim .rv:nth-child(4) { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) { .js-anim .rv { opacity: 1; transform: none; } }