/* ==========================================================================
   Digivolve Accountants - pages/home.css
   ========================================================================== */

/* ------------------------------------------------------------------ Hero (image)
   Adaptive across both width and height. Content is vertically centred with the
   trust strip pinned to the base; height is capped so it never dominates large
   monitors, and the headline scales on the smaller of width/height to avoid
   over-wrapping on laptops. */
.hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: clamp(560px, 100svh, 1040px);
  background: var(--ink); color: var(--on-ink);
  overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center; z-index: -2;
}
/* Readability scrim: dark at top (nav), heavy-but-not-flat on the left (text),
   grounded at the base (trust strip), fading to reveal the warm photo at right. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,24,42,0.80) 0%, rgba(7,24,42,0.10) 22%, rgba(7,24,42,0) 42%),
    linear-gradient(98deg, rgba(7,24,42,0.92) 0%, rgba(7,24,42,0.78) 30%, rgba(7,24,42,0.42) 58%, rgba(7,24,42,0.10) 84%, rgba(7,24,42,0) 100%),
    linear-gradient(0deg, rgba(7,24,42,0.72) 0%, rgba(7,24,42,0) 24%);
}
/* Left-anchored content with a comfortable, capped left margin (not flush, not centred) */
.hero__inner {
  flex: 1 1 auto; display: flex; align-items: center; width: 100%;
  max-width: none; margin-inline: 0;
  padding: clamp(92px, 8vh, 120px) clamp(1.5rem, 5vw, 4rem) clamp(1.5rem, 3vh, 2.5rem) calc(var(--edge) + 1.6rem);
}
.hero__content { max-width: min(92vw, 44rem); transform: translateY(-28px); }
.hero .eyebrow { color: var(--blue); }
.hero__eyebrow { margin-bottom: clamp(0.9rem, 2vh, 1.4rem); }
.hero h1 {
  font-size: clamp(2.25rem, min(5vw, 7.4vh), 4.05rem);
  font-weight: 600; line-height: 1.06; letter-spacing: -0.015em; color: #fff;
  text-shadow: 0 1px 26px rgba(4,14,28,0.42);
}
.hero h1 em { font-style: italic; font-weight: 600; color: var(--blue); }
.hero__lead {
  margin-top: clamp(1rem, 2.2vh, 1.5rem); max-width: 46ch;
  color: rgba(238,244,251,0.95);
  font-size: clamp(1.02rem, 0.6vw + 0.9rem, 1.25rem);
  text-shadow: 0 1px 20px rgba(4,14,28,0.35);
}
.hero__actions { margin-top: clamp(1.5rem, 3vh, 2.2rem); display: flex; flex-wrap: wrap; gap: 0.9rem; }
/* Ghost button on the dark hero needs light text and a visible outline */
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero__trust-wrap { flex: none; width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--edge); }
.hero__trust-wrap .trust__row { justify-content: space-between; gap: clamp(1rem, 2vw, 2.5rem); }

/* line reveal (JS-gated); generous bottom room so descenders and italic tails are not clipped */
.line-reveal { display: block; overflow: hidden; padding-bottom: 0.2em; }
.line-reveal > span { display: block; transition: transform 0.9s var(--ease); }
.js .line-reveal > span { transform: translateY(110%); }
.js .is-revealed .line-reveal > span { transform: translateY(0); }
.line-reveal:nth-child(2) > span { transition-delay: 0.09s; }
.line-reveal:nth-child(3) > span { transition-delay: 0.18s; }

/* Large monitors: a touch more width for the headline measure */
@media (min-width: 1600px) {
  .hero__content { max-width: 47rem; }
}

/* Short / laptop viewports (e.g. 13in): pull type and top spacing in so it never crowds */
@media (min-width: 721px) and (max-height: 860px) {
  .hero h1 { font-size: clamp(2.1rem, min(4.3vw, 6.4vh), 3.35rem); }
  .hero__inner { padding-top: clamp(88px, 11vh, 110px); }
}

/* Mobile: content + trust centred as one composition, with an intentional rhythm
   (tight label-to-headline, medium below, clear separation before the trust band).
   Centring the whole group balances the breathing room top and bottom rather than
   piling it all between the nav and the location label. */
@media (max-width: 720px) {
  .hero { min-height: 100svh; justify-content: center; padding-block: 84px 1.25rem; }
  .hero__img { object-position: 64% center; }
  .hero__inner { flex: 0 0 auto; align-items: flex-start; padding: 0 var(--gutter); }
  .hero__content { max-width: 100%; transform: none; }
  .hero__eyebrow { margin-bottom: 0.55rem; font-size: 0.6rem; }
  .hero h1 { font-size: clamp(1.85rem, 7.6vw, 2.55rem); line-height: 1.12; }
  .hero__lead { font-size: 0.95rem; line-height: 1.55; margin-top: 1rem; max-width: 38ch; }
  .hero__actions { margin-top: 1.25rem; gap: 0.65rem; }
  .hero__actions .btn { padding: 0.9rem 1.35rem; font-size: 0.92rem; line-height: 1.2; }
  .hero__trust-wrap { flex: 0 0 auto; padding: 2rem var(--gutter) 0; }
  .hero__trust-wrap .trust { border-bottom: 0; }
  .hero__trust-wrap .trust__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.1rem;
    padding-block: 0.9rem 0; justify-content: stretch;
  }
  .hero__trust-wrap .trust__item { font-size: 0.7rem; letter-spacing: 0.03em; gap: 0.45rem; }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(7,24,42,0.74) 0%, rgba(7,24,42,0.52) 28%,
      rgba(7,24,42,0.55) 62%, rgba(7,24,42,0.82) 100%);
  }
}

/* ------------------------------------------------------------------ Who we help
   Asymmetric: anchored intro on the left, audiences as an editorial directory on
   the right. The fine vertical rule between them, with the row hairlines, reads as
   a quiet ledger grid. Premium hover: icon fills, accent bar slides, arrow advances. */
.wwh__grid {
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 0;
  align-items: start;
}
.wwh__intro {
  padding-right: clamp(2rem, 4vw, 4.5rem);
  border-right: 1px solid var(--line);
}
.wwh__title {
  margin-top: 1.1rem; font-family: var(--serif); font-weight: 540;
  font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--ink);
}
.wwh__title em { font-style: italic; font-weight: 540; color: var(--blue-deep); }
.wwh__lead { margin-top: 1.4rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.6; color: var(--slate); }
.wwh__hint { margin-top: 1.8rem; font-size: 0.95rem; color: var(--slate); }
.wwh__hint a { color: var(--blue-deep); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease); }
.wwh__hint a:hover { border-color: var(--blue-deep); }

.wwh__list { padding-left: clamp(2rem, 4vw, 4.5rem); }
.wwh-item {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(1.1rem, 2vw, 1.7rem);
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(0.9rem, 1.5vw, 1.3rem);
  border-top: 1px solid var(--line); transition: background 0.3s var(--ease);
}
.wwh-item:last-child { border-bottom: 1px solid var(--line); }
.wwh-item:hover { background: rgba(67, 182, 255, 0.05); }
.wwh-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--blue); transform: scaleY(0); transform-origin: center;
  transition: transform 0.35s var(--ease);
}
.wwh-item:hover::before { transform: scaleY(1); }
.wwh-item__icon {
  width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: rgba(67, 182, 255, 0.1); color: var(--blue-deep);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.wwh-item__icon svg { width: 26px; height: 26px; }
.wwh-item:hover .wwh-item__icon { background: var(--blue-deep); color: #fff; }
.wwh-item__name { display: block; font-family: var(--serif); font-weight: 540; font-size: clamp(1.25rem, 1.7vw, 1.5rem); color: var(--ink); }
.wwh-item__desc { display: block; margin-top: 0.3rem; font-size: 0.94rem; line-height: 1.5; color: var(--slate); }
.wwh-item__go { width: 22px; height: 22px; flex: none; color: var(--blue-deep); opacity: 0.65; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.wwh-item:hover .wwh-item__go { transform: translateX(5px); opacity: 1; }

@media (max-width: 860px) {
  .wwh__grid { grid-template-columns: 1fr; gap: clamp(2.2rem, 5vw, 3rem); }
  .wwh__intro { padding-right: 0; border-right: 0; }
  .wwh__list { padding-left: 0; }
}
@media (max-width: 520px) {
  .wwh-item { grid-template-columns: auto 1fr; padding-inline: 0; gap: 1rem; }
  .wwh-item__go { display: none; }
  .wwh-item__icon { width: 46px; height: 46px; }
  .wwh-item__icon svg { width: 22px; height: 22px; }
  .wwh-item::before { left: -0.6rem; }
}

/* ------------------------------------------------------------------ Services grid */
.services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); }
.svc {
  position: relative; overflow: hidden; isolation: isolate;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.7rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 0.8rem;
  box-shadow: 0 2px 4px rgba(7, 24, 42, 0.04);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(7, 24, 42, 0.1); border-color: rgba(67, 182, 255, 0.5); }
.svc__icon { width: 32px; height: 32px; color: var(--blue-deep); margin-bottom: 0.2rem; }
.svc__icon svg { width: 32px; height: 32px; }
.svc h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.svc p { color: var(--slate); font-size: 0.96rem; line-height: 1.55; }
.svc__links { margin-top: auto; padding-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.svc__links a { font-size: 0.88rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 0.3rem; }
.svc__links a::before { content: "\2192"; color: var(--blue-deep); }
.svc__links a:hover { color: var(--blue-deep); }
/* Oversized faint glyph for texture, bleeding from the corner */
.svc__mark {
  position: absolute; right: -16px; bottom: -20px; width: 140px; height: 140px;
  color: var(--blue); opacity: 0.06; z-index: -1; pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.svc:hover .svc__mark { opacity: 0.11; transform: scale(1.06) rotate(-3deg); }

@media (max-width: 720px) {
  .svc-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .svc { padding: 1.6rem 1.5rem; gap: 0.7rem; }
  .svc__mark { width: 120px; height: 120px; }
  .svc__links { flex-direction: column; align-items: flex-start; gap: 0.55rem; padding-top: 0.9rem; }
  .svc__links a { font-size: 0.9rem; }
}

/* ------------------------------------------------------------------ Process (real sequence -> oversized ledger numerals on a lit navy) */
.process { position: relative; overflow: hidden; }
.process::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 48% at 12% 6%, rgba(67, 182, 255, 0.11), transparent 62%);
}
.process > .wrap { position: relative; z-index: 1; }
.process__head { max-width: 680px; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.process__head .h2 em { font-style: italic; font-weight: inherit; color: var(--blue); white-space: nowrap; }
.process__head .lead { margin-top: 1.4rem; }

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid; grid-template-columns: clamp(3.5rem, 9vw, 6rem) 1fr;
  gap: clamp(1.4rem, 4vw, 3.5rem); align-items: start;
  padding-block: clamp(2rem, 3.6vw, 3rem);
}
.step + .step { border-top: 1px solid var(--on-ink-line); }
.step__num {
  font-family: var(--serif); font-weight: 500; line-height: 0.8; letter-spacing: -0.02em;
  font-size: clamp(2.8rem, 6vw, 4.6rem); color: rgba(236, 242, 246, 0.18);
  transition: color 0.45s var(--ease);
}
.step:hover .step__num { color: var(--blue); }
.step__content { max-width: 60ch; padding-top: 0.35rem; }
.step__content h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); color: var(--on-ink); }
.step__content p { margin-top: 0.7rem; color: var(--on-ink-mute); font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.65; }

@media (max-width: 600px) {
  .step { grid-template-columns: 1fr; gap: 0.4rem; padding-block: 1.9rem; }
  .step__num { font-size: 2.7rem; }
  .step__content { padding-top: 0; }
}

/* ------------------------------------------------------------------ Switching (your part vs our part) */
.switch__head { max-width: 680px; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.switch__head .h2 em { font-style: italic; font-weight: inherit; color: var(--blue-deep); }
.switch__head .lead { margin-top: 1.4rem; }

.switch__panel {
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 22px 54px rgba(7, 24, 42, 0.07);
}
.switch__label { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }

/* Your part: small, bold, dark - the focal half */
.switch__you {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-ink);
  padding: clamp(2rem, 4vw, 3.2rem);
  display: flex; flex-direction: column; gap: 1.3rem;
}
.switch__you::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(72% 60% at 18% 0%, rgba(67, 182, 255, 0.16), transparent 60%);
}
.switch__you > * { position: relative; }
.switch__you .switch__label { color: var(--blue); }
.switch__statement { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 2.3vw, 1.95rem); line-height: 1.25; color: #fff; }
.switch__you .btn { margin-top: auto; align-self: flex-start; }

/* Our part: the fuller, reassuring list */
.switch__us {
  background: #fff; padding: clamp(2rem, 4vw, 3.2rem);
  display: flex; flex-direction: column; gap: 1.3rem;
}
.switch__us .switch__label { color: var(--blue-deep); }
.switch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.switch__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; font-size: 1.02rem; line-height: 1.4; color: var(--charcoal); }
.switch__list svg { width: 22px; height: 22px; flex: none; color: var(--blue-deep); margin-top: 1px; }
.switch__note { margin-top: 0.2rem; font-size: 0.9rem; color: var(--slate); }

@media (max-width: 760px) {
  .switch__panel { grid-template-columns: 1fr; }
  .switch__you { gap: 1.5rem; }
  .switch__you .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ------------------------------------------------------------------ Fixed fees */
.fees__head { max-width: 720px; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.fees__head .h2 em { font-style: italic; font-weight: inherit; color: var(--blue-deep); }
.fees__head .lead { margin-top: 1.4rem; }
.fees__pillars { display: grid; grid-template-columns: repeat(3, 1fr); }
.fee { padding-inline: clamp(1.4rem, 3vw, 2.8rem); }
.fee:first-child { padding-left: 0; }
.fee:last-child { padding-right: 0; }
.fee + .fee { border-left: 1px solid var(--line); }
.fee__icon { display: block; color: var(--blue-deep); margin-bottom: 1.1rem; }
.fee__icon svg { width: 34px; height: 34px; }
.fee h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); }
.fee p { margin-top: 0.6rem; color: var(--slate); font-size: 0.96rem; line-height: 1.55; }
.fees__note { margin-top: clamp(2.2rem, 4vw, 3rem); font-size: 0.92rem; color: var(--slate); }
@media (max-width: 760px) {
  .fees__pillars { grid-template-columns: 1fr; }
  .fee { padding: 1.6rem 0; }
  .fee:first-child { padding-top: 0; }
  .fee + .fee { border-left: 0; border-top: 1px solid var(--line); }
  .fee__icon { margin-bottom: 0.8rem; }
}

/* ------------------------------------------------------------------ Areas we cover */
.areas__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.areas__list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 1.4vw, 1.1rem); }
.area {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(1.3rem, 2vw, 1.6rem);
  display: flex; flex-direction: column; gap: 0.55rem;
  box-shadow: 0 2px 4px rgba(7, 24, 42, 0.04);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.area:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(7, 24, 42, 0.09); border-color: rgba(67, 182, 255, 0.5); }
.area__top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.area__pin { color: var(--blue-deep); display: block; }
.area__pin svg { width: 26px; height: 26px; }
.area__tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-deep); background: rgba(67, 182, 255, 0.12); padding: 0.22rem 0.5rem; border-radius: 999px; }
.area h3 { font-size: 1.12rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.area h3 .area__arrow { width: 1rem; height: 1rem; flex: none; color: var(--blue-deep); opacity: 0.55; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.area:hover h3 .area__arrow { transform: translateX(3px); opacity: 1; }
.area p { font-size: 0.86rem; color: var(--slate); line-height: 1.45; }
@media (max-width: 760px) { .areas__grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .areas__list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Testimonials */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stars { display: inline-flex; gap: 2px; line-height: 0; flex-shrink: 0; }
.stars .star { width: 15px; height: 15px; fill: #E2A82E; }

.quotes__head { margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
.quotes__rating { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.4rem; font-size: 0.92rem; color: var(--slate); }

.quote-feature { border-left: 2px solid var(--gold); padding-left: clamp(1.4rem, 3vw, 2.4rem); margin: 0 0 clamp(2.6rem, 4.5vw, 3.6rem); max-width: 60rem; }
.quote-feature .stars { margin-bottom: 1.3rem; }
.quote-feature .stars .star { width: 18px; height: 18px; }
.quote-feature blockquote { font-family: var(--serif); font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 340; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.quote-feature figcaption { margin-top: 1.4rem; font-size: 0.95rem; color: var(--slate); }
.quote-feature figcaption b { color: var(--ink); font-weight: 700; }

.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.4rem); }
.review { display: flex; flex-direction: column; gap: 0.9rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.4rem, 2.2vw, 1.8rem); box-shadow: 0 2px 10px rgba(11,42,69,0.05); }
.review .stars .star { width: 14px; height: 14px; }
.review blockquote { font-size: 0.97rem; line-height: 1.55; color: var(--charcoal); }
.review figcaption { margin-top: auto; padding-top: 0.2rem; font-size: 0.9rem; color: var(--ink); }
.review figcaption b { font-weight: 700; }

@media (max-width: 860px) { .quotes-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .quotes-grid { grid-template-columns: 1fr; } }
.quotes__more { margin-top: clamp(2rem, 3.5vw, 2.8rem); }