/* ==========================================================================
   Cedar Blue Accountants — stylesheet (v2, multi-page)
   Tokens follow the Marketing Branding Kit (The Perceptionist Studio, 2025).
   Do not introduce colours outside the palette below without client sign-off.

   Design language, deliberately distinct from v1:
     - editorial and left-aligned, not centred landing-page
     - flat brand-colour blocks, no gradient washes
     - near-square corners (2px), not pill/rounded cards
     - the logo's diagonal reused as an angled section edge
     - green as a structural rule, never a large fill behind body copy
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — exact values from the brand book */
  --navy: #04306f;
  --blue: #0b4897;
  --blue-mid: #156fb0;
  --green: #60aa45;
  --green-light: #64b248;

  --blue-tint: rgba(21, 111, 176, 0.07);
  --green-tint: rgba(96, 170, 69, 0.10);

  /* Neutrals */
  --white: #ffffff;
  --paper: #f7f8fa;
  --line: #e4e8ee;
  --line-strong: #cbd3de;
  --ink: #101a2e;
  --ink-mid: #46536b;
  --ink-muted: #6b7689;

  /* Type — Open Sans, per brand book (ExtraBold headings, Light body) */
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter: 24px;
  --max: 1200px;
  --narrow: 760px;
  --radius: 2px;

  --shadow: 0 1px 2px rgba(16, 26, 46, 0.04), 0 12px 32px rgba(16, 26, 46, 0.07);
  --ease: cubic-bezier(0.33, 0, 0.15, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-mid);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }

a { color: var(--blue-mid); text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--navy);
}

strong, b { font-weight: 700; color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--narrow); }

.section { padding-block: 104px; }
.section-tight { padding-block: 72px; }
.section-paper { background: var(--paper); }

/* Angled edge — echoes the diagonal in the logo mark. Used sparingly. */
.section-angled {
  clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -3.5vw;
  padding-top: calc(104px + 3.5vw);
}

/* Eyebrow label with a green rule — the recurring structural motif */
.label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 20px;
}
.label::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--green);
  flex-shrink: 0;
}
.label-light { color: var(--green-light); }
.label-light::before { background: var(--green-light); }

.display {
  font-size: clamp(38px, 6.2vw, 74px);
  letter-spacing: -0.042em;
  line-height: 1.03;
}
.h2 { font-size: clamp(29px, 3.8vw, 46px); }
.h3 { font-size: 21px; letter-spacing: -0.02em; }

.lead {
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 58ch;
}

.prose > * + * { margin-top: 20px; }
.prose h3 { margin-top: 40px; }
.prose ul { display: flex; flex-direction: column; gap: 12px; }
.prose ul li {
  position: relative;
  padding-left: 26px;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 9px; height: 9px;
  background: var(--green);
}

/* Two-column editorial split: sticky heading left, content right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.split-sticky { position: sticky; top: 120px; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 17px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--blue); }

.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-light); }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }

.btn-white { background: var(--white); color: var(--navy); }
.btn-white:hover { background: var(--green); color: var(--white); }

.btn-ghost-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.35); }
.btn-ghost-white:hover { border-color: var(--white); background: var(--white); color: var(--navy); }

.btn-sm { font-size: 14px; padding: 12px 22px; }
.btn-block { width: 100%; }

/* Inline text link with an animated green underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--green);
  transition: gap 0.18s var(--ease), color 0.18s var(--ease);
}
.link-arrow:hover { gap: 14px; color: var(--blue-mid); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
}

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.logo svg { width: 40px; height: 40px; }
.logo-word { display: flex; flex-direction: column; line-height: 1.05; }
.logo-word b {
  font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: 0.005em;
}
.logo-word span {
  font-size: 9.5px; font-weight: 400; letter-spacing: 0.28em; color: var(--blue-mid);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { position: relative; }
.nav a, .nav .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav a:hover, .nav .nav-trigger:hover { color: var(--blue-mid); }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--green); }
.nav li.is-section > a,
.nav li.is-section > .nav-trigger { color: var(--navy); border-bottom-color: var(--green); }

.nav-trigger svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform 0.2s var(--ease); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 268px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  z-index: 20;
}
.submenu.is-open { display: block; }
.submenu a {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: none;
  border-left: 2px solid transparent;
}
.submenu a:hover { background: var(--paper); border-left-color: var(--green); }
.submenu a[aria-current="page"] { border-left-color: var(--green); background: var(--paper); }
.submenu a { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.submenu-count { font-size: 11px; font-weight: 700; color: var(--green); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block; width: 20px; height: 2px;
  background: var(--navy);
  transition: transform 0.25s var(--ease), opacity 0.15s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero — asymmetric, left-aligned
   -------------------------------------------------------------------------- */
.hero { padding-block: 104px 0; position: relative; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
.hero h1 { margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--blue-mid); }
.hero .lead { margin-bottom: 38px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-aside {
  border-left: 3px solid var(--green);
  padding-left: 28px;
}
.hero-aside dl { display: flex; flex-direction: column; gap: 28px; }
.hero-aside dt {
  font-size: 40px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.04em; line-height: 1;
}
.hero-aside dd { font-size: 14.5px; color: var(--ink-muted); margin-top: 6px; }

/* --------------------------------------------------------------------------
   6b. Video hero (home page only)

   The video is decorative. It never carries meaning, so it is aria-hidden and
   the page reads identically without it. It is also entirely optional at
   runtime: the poster image is what loads first and what mobile, reduced-
   motion and save-data visitors keep. See js/main.js.
   -------------------------------------------------------------------------- */
.hero-video {
  position: relative;
  padding-block: 132px 112px;
  background: var(--navy);   /* shows before the poster paints */
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
/* Both layers are absolutely positioned so their stacking order is explicit.
   This matters: a positioned element paints above a non-positioned sibling no
   matter the DOM order, so leaving the video `static` while the poster was
   `absolute` put the still image on top of the playing video — it looked
   frozen while reporting itself as playing. */
.hero-media video,
.hero-media .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-media .hero-poster {
  z-index: 0;                  /* fallback layer: shown until the video paints,
                                  and permanently on mobile / reduced motion */
  background-size: cover;
  background-position: center;
}
.hero-media video { z-index: 1; }

/* Scrim: brand navy rather than neutral black, weighted to the left where the
   text sits. Text contrast comes from here, never from the footage — stock
   clips vary frame to frame and cannot be relied on. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;                  /* above both the poster and the video */
  background:
    linear-gradient(95deg, rgba(4, 48, 111, 0.88) 0%, rgba(4, 48, 111, 0.74) 42%, rgba(4, 48, 111, 0.50) 100%),
    linear-gradient(180deg, rgba(4, 48, 111, 0.30) 0%, transparent 35%, rgba(4, 48, 111, 0.42) 100%);
}

/* Light-on-dark treatment for the hero's contents */
.hero-video h1,
.hero-video .h2 { color: var(--white); }
.hero-video h1 em { color: var(--green-light); }
.hero-video .lead { color: rgba(255, 255, 255, 0.88); }
.hero-video .label { color: var(--green-light); }
.hero-video .label::before { background: var(--green-light); }
.hero-video .hero-aside { border-left-color: var(--green-light); }
.hero-video .hero-aside dt { color: var(--white); }
.hero-video .hero-aside dd { color: rgba(255, 255, 255, 0.72); }

/* The outline button is navy-on-light by default, which is invisible against
   the video. Flip it to the light-on-dark treatment. */
.hero-video .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}
.hero-video .btn-outline:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

/* WCAG 2.2.2: anything that moves for more than five seconds needs a control
   to stop it. Discreet, but genuinely operable and keyboard reachable. */
.hero-pause {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: none;              /* shown by JS only when the video is playing */
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(4, 48, 111, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.hero-pause.is-available { display: inline-flex; }
.hero-pause:hover { background: rgba(4, 48, 111, 0.85); border-color: var(--white); }
.hero-pause svg { width: 12px; height: 12px; fill: currentColor; }

@media (max-width: 640px) {
  .hero-video { padding-block: 76px 64px; }
  .hero-pause { right: 12px; bottom: 12px; padding: 8px 11px; }
}

/* Compact page header for inner pages */
.page-head {
  padding-block: 84px 64px;
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: 20px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue-mid); text-decoration: underline; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumb [aria-current="page"] { color: var(--navy); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. Service index — editorial rows, not cards
   -------------------------------------------------------------------------- */
.rows { border-top: 1px solid var(--line); }
.row-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: 32px;
  align-items: center;
  padding: 34px 20px 34px 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 0.2s var(--ease), padding 0.2s var(--ease);
}
.row-item:hover { background: var(--paper); padding-left: 20px; }
.row-num {
  font-size: 14px; font-weight: 700; color: var(--green);
  letter-spacing: 0.1em;
}
.row-item h3 { color: var(--navy); }
.row-item p { font-size: 15.5px; font-weight: 300; color: var(--ink-muted); line-height: 1.65; }
.row-go {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--navy);
  flex-shrink: 0;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.row-item:hover .row-go { background: var(--green); border-color: var(--green); color: var(--white); }
.row-go svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

/* --------------------------------------------------------------------------
   7b. Services page — grouped detail list
   -------------------------------------------------------------------------- */

/* Contents strip at the top of /services/ */
.service-jump {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-jump a {
  background: var(--white);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.service-jump a:hover { background: var(--navy); color: var(--white); }
.service-jump b { font-size: 12px; font-weight: 700; color: var(--green); }
.service-jump a:hover b { color: var(--green-light); }

.service-detail-list { display: flex; flex-direction: column; }

.service-detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  padding-block: 40px;
  border-top: 1px solid var(--line);
  /* Sticky header clearance when jumped to by anchor */
  scroll-margin-top: 100px;
}
.service-detail:last-child { border-bottom: 1px solid var(--line); }

.service-detail-head { display: flex; gap: 18px; align-items: flex-start; }
.service-detail-head .row-num { padding-top: 4px; }
.service-detail-short {
  font-size: 15.5px;
  font-weight: 300;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-top: 8px;
}

.service-detail-body p { font-size: 16px; font-weight: 300; line-height: 1.75; }

.service-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
.service-points li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-mid);
}
.service-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--green);
}

@media (max-width: 1000px) {
  .service-detail { grid-template-columns: 1fr; gap: 20px; padding-block: 32px; }
}

/* --------------------------------------------------------------------------
   8. Feature blocks
   -------------------------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.feature { background: var(--white); padding: 34px 30px; }
.feature-icon {
  width: 44px; height: 44px;
  background: var(--green-tint);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.feature-icon svg { width: 22px; height: 22px; stroke: var(--green); fill: none; stroke-width: 1.9; }
.feature h3 { font-size: 18px; margin-bottom: 8px; }
.feature p { font-size: 15px; font-weight: 300; color: var(--ink-muted); line-height: 1.65; }

/* Numbered process steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px; }
.step { border-top: 3px solid var(--green); padding-top: 22px; }
.step b {
  display: block; font-size: 13px; font-weight: 700; color: var(--green);
  letter-spacing: 0.12em; margin-bottom: 10px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 15px; font-weight: 300; color: var(--ink-muted); line-height: 1.65; }

/* --------------------------------------------------------------------------
   9. Dark band
   -------------------------------------------------------------------------- */
.band { background: var(--navy); color: rgba(255,255,255,0.75); }
.band h2, .band h3 { color: var(--white); }
.band .lead { color: rgba(255,255,255,0.66); }
.band-green { background: var(--green); }
.band-green h2 { color: var(--white); }
.band-green .lead { color: rgba(255,255,255,0.9); }

.cta-band { text-align: left; }
.cta-band .cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.cta-band h2 { max-width: 18ch; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   10. Team
   -------------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.team-card { border-top: 3px solid var(--navy); padding-top: 24px; }
.team-photo {
  aspect-ratio: 4 / 3;
  background: var(--navy);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.team-initials {
  font-size: 34px; font-weight: 800; color: var(--white);
  letter-spacing: 0.04em;
}
.team-card h3 { font-size: 19px; margin-bottom: 4px; }
.team-role { font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.team-card p { font-size: 15px; font-weight: 300; color: var(--ink-muted); line-height: 1.65; }

/* --------------------------------------------------------------------------
   11. Testimonial
   -------------------------------------------------------------------------- */
.quote { border-left: 3px solid var(--green); padding-left: 36px; }
.quote blockquote {
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 28px;
}
.quote figcaption { display: flex; align-items: center; gap: 14px; }
.quote-avatar {
  width: 46px; height: 46px;
  background: var(--navy); color: var(--white);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
  flex-shrink: 0;
}
.quote-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.quote-role { font-size: 13.5px; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.plan { background: var(--white); padding: 38px 32px; display: flex; flex-direction: column; }
.plan-featured { background: var(--navy); }
.plan-featured .plan-name { color: rgba(255,255,255,0.6); }
.plan-featured .plan-price, .plan-featured h3 { color: var(--white); }
.plan-featured .plan-period { color: rgba(255,255,255,0.5); }
.plan-featured .plan-list { border-top-color: rgba(255,255,255,0.16); }
.plan-featured .plan-list li { color: rgba(255,255,255,0.82); }

.plan-flag {
  display: inline-block;
  align-self: flex-start;
  background: var(--green);
  color: var(--white);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 18px;
}
.plan-name {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px;
}
.plan-price { font-size: 44px; font-weight: 800; color: var(--navy); letter-spacing: -0.045em; line-height: 1; }
.plan-price sup { font-size: 21px; top: -0.6em; position: relative; }
.plan-period { font-size: 13.5px; color: var(--ink-muted); margin-top: 8px; }
.plan-list {
  border-top: 1px solid var(--line);
  margin-top: 28px; padding-top: 26px; margin-bottom: 32px;
  display: flex; flex-direction: column; gap: 13px;
}
.plan-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--ink-mid);
}
.plan-list li::before {
  content: ""; flex-shrink: 0;
  width: 8px; height: 8px; margin-top: 8px;
  background: var(--green);
}
.plan .btn { margin-top: auto; }

.note {
  font-size: 14.5px; font-weight: 300; color: var(--ink-muted);
  border-left: 3px solid var(--line-strong); padding-left: 18px;
}

/* --------------------------------------------------------------------------
   13. Client logos
   -------------------------------------------------------------------------- */
.clients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.client {
  background: var(--white);
  padding: 26px 20px;
  text-align: center;
  font-size: 14px; font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   14. FAQ / disclosure
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0;
  font-size: 17.5px; font-weight: 700; color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 24px; font-weight: 400; color: var(--green);
  line-height: 1; flex-shrink: 0;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding-bottom: 24px; font-weight: 300; color: var(--ink-muted); max-width: 68ch; }

/* --------------------------------------------------------------------------
   15. Contact & forms
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }

.contact-list { display: flex; flex-direction: column; gap: 26px; }
.contact-item { display: flex; gap: 16px; }
.contact-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--blue-tint);
  display: grid; place-items: center;
}
.contact-icon svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 1.9; }
/* Brand icons from social_icon() are filled shapes, not strokes */
.contact-icon svg[role="img"] { fill: var(--blue); stroke: none; }
.contact-item dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px;
}
.contact-item dd { font-size: 16px; font-weight: 600; color: var(--navy); }
.contact-item dd a { color: inherit; text-decoration: none; }
.contact-item dd a:hover { color: var(--blue-mid); text-decoration: underline; }

.form { border: 1px solid var(--line); padding: 40px; background: var(--white); }
.form h2 { font-size: 25px; margin-bottom: 8px; }
.form-intro { font-size: 15px; font-weight: 300; color: var(--ink-muted); margin-bottom: 28px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field .req { color: var(--green); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #97a1b2; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-mid); background: var(--white); outline: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field-error { font-size: 13px; font-weight: 600; color: #b3261e; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b3261e; }
.field.has-error .field-error { display: block; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-consent { font-size: 13px; font-weight: 300; color: var(--ink-muted); margin-top: 16px; line-height: 1.6; }

.form-status { display: none; font-size: 15px; font-weight: 600; padding: 14px 16px; margin-bottom: 20px; }
.form-status.is-visible { display: block; }
.form-status.is-ok { background: var(--green-tint); color: #2c6a1c; border-left: 3px solid var(--green); }
.form-status.is-error { background: #fdecea; color: #b3261e; border-left: 3px solid #b3261e; }

/* --------------------------------------------------------------------------
   14b. Blog
   -------------------------------------------------------------------------- */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px;
}

.blog-card { display: flex; flex-direction: column; }
.blog-card-image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
  margin-bottom: 20px;
}
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.blog-card:hover .blog-card-image img { transform: scale(1.03); }

.blog-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.blog-card h2 { margin-bottom: 10px; }
.blog-card h2 a { color: var(--navy); text-decoration: none; }
.blog-card h2 a:hover { color: var(--blue-mid); }
.blog-excerpt { font-size: 15.5px; font-weight: 300; color: var(--ink-muted); line-height: 1.7; margin-bottom: 18px; }
.blog-card .link-arrow { align-self: flex-start; margin-top: auto; }

.blog-empty { max-width: 56ch; }
.blog-byline { font-size: 15px; color: var(--ink-muted); margin-top: 14px; }
.blog-hero-image { width: 100%; margin-top: 40px; }

/* Article body — the one place on the site with long-form prose */
.blog-body { font-size: 17.5px; line-height: 1.8; color: var(--ink-mid); }
.blog-body > * + * { margin-top: 24px; }
.blog-body h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 48px; }
.blog-body h3 { font-size: 20px; margin-top: 36px; }
.blog-body h4 { font-size: 17px; margin-top: 28px; }
.blog-body strong { color: var(--ink); }
.blog-body a { color: var(--blue-mid); text-decoration: underline; }
.blog-body a:hover { color: var(--navy); }
.blog-body img { width: 100%; margin-block: 8px; }
.blog-body hr { border: none; border-top: 1px solid var(--line); margin-block: 40px; }
.blog-body blockquote {
  border-left: 3px solid var(--green);
  padding-left: 24px;
  font-size: 19px;
  font-weight: 300;
  color: var(--navy);
}
.blog-body ul, .blog-body ol { display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
.blog-body li { position: relative; padding-left: 24px; }
.blog-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 8px; height: 8px;
  background: var(--green);
}
.blog-body ol { counter-reset: item; }
.blog-body ol li::before {
  counter-increment: item;
  content: counter(item) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   15b. WhatsApp & social
   -------------------------------------------------------------------------- */

/* WhatsApp's own brand green (#25D366) is deliberately NOT used at full
   strength next to the Cedar Blue palette — it clashes badly with the brand
   green. The button carries the WhatsApp mark for recognition and the brand's
   own green for everything else, which reads as ours rather than theirs. */
.btn-whatsapp {
  background: var(--green);
  color: var(--white);
}
.btn-whatsapp:hover { background: var(--green-light); }
.btn-whatsapp svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }

/* Floating WhatsApp button.
   Deliberately restrained: it stays hidden until the visitor has scrolled past
   the hero (so it never competes with the main CTA), and hides again over the
   footer CTA band, where the same action is already on screen. A permanent
   green blob from first paint is the thing that makes sites look templated. */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 90;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 100px;

  background: var(--green);
  color: var(--white);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(16, 26, 46, 0.18), 0 1px 3px rgba(16, 26, 46, 0.12);

  /* Hidden state — not display:none, so the transition can run */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
              visibility 0.25s, background 0.18s var(--ease);
}
.wa-float.is-visible { opacity: 1; visibility: visible; transform: none; }
.wa-float:hover { background: var(--green-light); }
.wa-float svg { width: 21px; height: 21px; fill: currentColor; flex-shrink: 0; }

/* Icon only on small screens — the label costs width that mobile doesn't have,
   and the WhatsApp mark is universally recognised. */
@media (max-width: 560px) {
  .wa-float {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 0;
    width: 54px;
    height: 54px;
    justify-content: center;
  }
  .wa-float span { display: none; }
  .wa-float svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: opacity 0.01ms, visibility 0.01ms; transform: none; }
}

@media print { .wa-float { display: none !important; } }

.socials { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.socials a:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* On light backgrounds (e.g. the contact page) */
.socials-light a { border-color: var(--line-strong); color: var(--ink-muted); }
.socials-light a:hover { background: var(--green); border-color: var(--green); color: var(--white); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); padding-block: 68px 32px; color: rgba(255,255,255,0.5); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer .logo-word b { color: var(--white); }
.site-footer .logo-word span { color: rgba(255,255,255,0.55); }
.footer-about { font-size: 14px; font-weight: 300; line-height: 1.75; margin-top: 18px; max-width: 34ch; }
.footer-col h3 {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--white); margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
  font-size: 14px; font-weight: 300;
  color: rgba(255,255,255,0.55); text-decoration: none;
  transition: color 0.18s var(--ease);
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  padding-top: 26px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,0.38);
}
.footer-bottom ul { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(255,255,255,0.38); text-decoration: none; }
.footer-bottom a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .section { padding-block: 76px; }
  .split, .contact-grid, .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .split-sticky { position: static; }

  .nav {
    position: absolute;
    inset: 84px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 8px 24px 22px;
    display: none;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav > li { width: 100%; }
  .nav a, .nav .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    border-left: none;
  }
  .nav a[aria-current="page"],
  .nav li.is-section > a,
  .nav li.is-section > .nav-trigger { border-bottom-color: var(--green); }

  .submenu {
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0 8px 16px;
    border-left: 2px solid var(--line);
    margin-bottom: 8px;
  }
  .nav-toggle { display: grid; }
  .header-actions .btn { display: none; }

  .row-item { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 20px; }
  .row-item p { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  .section { padding-block: 60px; }
  .hero { padding-top: 64px; }
  .hero-ctas .btn { width: 100%; }
  .form { padding: 26px 22px; border-left: none; border-right: none; margin-inline: calc(var(--gutter) * -1); }
  .field-row { grid-template-columns: 1fr; }
  .quote { padding-left: 22px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: flex-start; }
  .cta-band .cta-inner { gap: 28px; }
  .cta-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   18. Motion & print
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

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

@media print {
  .site-header, .hero-ctas, .cta-band, .form, .nav-toggle { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .section-angled { clip-path: none; margin-top: 0; }
}