/* Homepage layout, ported from the React prototype. Loaded only on index.html, after styles.css and modern.css. */
.wh svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wh .btn svg{width:18px;height:18px}
.wh-service-more svg{width:18px;height:18px}
.wh-stars svg{width:16px;height:16px}
.wh-tags,.wh-faq-list{list-style:none;padding:0}
.wh .btn:hover{transform:none;box-shadow:none}

.wh .btn svg{flex-shrink:0}
.wh-section{padding:var(--section-y) 0}
.wh-alt{background:var(--color-bg-alt)}
.wh-center{text-align:center;margin-top:var(--space-10)}

/* Hero */
.wh-hero{padding:clamp(2.5rem,5vw,3.5rem) 0 6rem;position:relative;overflow:hidden;background:var(--color-bg-alt);border-bottom:1px solid var(--color-border)}
.wh-hero::before{content:"";position:absolute;inset:0;background:url("/images/library-lamplight.jpg") center 30%/cover no-repeat;opacity:.14;mix-blend-mode:multiply;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%)}
.wh-hero>.container{position:relative;z-index:1}
.wh-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.wh-hero h1{font-family:var(--font-heading);font-size:4rem;line-height:1.08;letter-spacing:-.02em;font-weight:600;margin-top:var(--space-4);text-wrap:balance}
.wh-hero .eyebrow{color:var(--color-text-light)}
.wh .ws-factcard>div{grid-template-columns:1fr;grid-template-areas:"value" "label"}
.wh-lead{font-size:1.15rem;color:var(--color-text-light);margin-top:var(--space-6);max-width:46ch;line-height:1.7}
.wh-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);margin-top:var(--space-8)}
.wh-textlink{font-weight:600;font-size:.95rem;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color var(--t-fast)}
.wh-textlink:hover{color:var(--color-primary-dark)}

.wh-hero-visual{position:relative}
.wh-hero-visual picture,.wh-hero-visual img{display:block;width:100%}
.wh-hero-visual img{aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:var(--radius-lg);box-shadow:none}
.wh-hero-visual::before{display:none}


/* Services */
.wh-services{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
.wh-service{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:2rem 2rem 2.25rem;box-shadow:none}
.wh-service-num{position:absolute;top:1.6rem;right:1.8rem;font-family:var(--font-heading);font-size:.9rem;color:var(--color-text-muted);letter-spacing:.05em}
.wh-service-icon{display:block;width:96px;height:96px;border-radius:50%;overflow:hidden;border:3px solid var(--color-surface);box-shadow:0 0 0 1px var(--color-border);margin-bottom:var(--space-5)}
.wh-service-icon img{display:block;width:100%;height:100%;object-fit:cover}
.wh-service h3{font-family:var(--font-heading);font-size:1.35rem;font-weight:600;margin-bottom:var(--space-3)}
.wh-service h3 a:hover{color:var(--color-primary-dark)}
.wh-service p{color:var(--color-text-light);line-height:1.65;max-width:52ch}
.wh-service-more{position:absolute;right:1.6rem;bottom:1.6rem;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--color-border);color:var(--color-text)}

/* About */
.wh-about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.wh-about-photo{position:relative}
.wh-about-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);box-shadow:none}
.wh-about-photo::before{display:none}
.wh-about-tag{display:block;margin-top:1rem;color:var(--color-text-light);font-size:.8rem;line-height:1.5;font-weight:400}
.wh-about-copy h2{font-family:var(--font-heading);font-size:2.25rem;line-height:1.25;letter-spacing:0;margin-bottom:var(--space-5)}
.wh-about-copy p{color:var(--color-text-light);margin-bottom:var(--space-4);max-width:60ch}
.wh-tags{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:var(--space-6) 0 var(--space-8)}
.wh-tags li{font-size:.82rem;font-weight:400;padding:.25rem 0;color:var(--color-text-light)}
.wh-tags li:not(:last-child){border-right:1px solid var(--color-rule);padding-right:1rem}

/* Testimonials */
.wh-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);align-items:start}
.wh-quote footer{margin-top:auto}
.wh-quote-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.wh-quote.is-open .wh-quote-text{display:block;-webkit-line-clamp:unset}
.wh-quote-more{align-self:flex-start;margin-top:calc(-1 * var(--space-3));padding:0;background:none;border:0;border-bottom:1px solid currentColor;font:inherit;font-size:.85rem;font-weight:600;color:var(--color-primary-dark);cursor:pointer}
.wh-quote{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--space-4)}
.wh-quote:nth-child(2){margin-top:0}
.wh-stars{display:flex;gap:2px;color:var(--color-primary)}
.wh-stars svg{fill:currentColor}
.wh-quote p{font-size:.98rem;line-height:1.7;color:var(--color-text)}
.wh-quote footer{display:flex;align-items:center;gap:.75rem;padding-top:var(--space-4);border-top:1px solid var(--color-border)}
.wh-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--color-accent-tint);color:var(--color-primary-dark);font-family:var(--font-heading);font-weight:700}
.wh-quote cite{font-style:normal;display:flex;flex-direction:column;line-height:1.3}
.wh-quote cite span{font-size:.8rem;color:var(--color-text-light)}

/* FAQ */
.wh-faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.wh-faq-wrap .section-header{position:sticky;top:calc(var(--header-h) + 2rem)}
.wh-faq-list{display:flex;flex-direction:column;gap:.75rem}
.wh-faq{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;transition:border-color var(--t)}
.wh-faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.35rem;font-weight:600;color:var(--color-text);cursor:pointer;list-style:none}
.wh-faq summary::-webkit-details-marker{display:none}
.wh-faq summary::after{display:none}
.wh-faq-icon{flex-shrink:0;width:20px!important;height:20px!important;transition:transform var(--t);color:var(--color-primary-dark)}
.wh-faq[open]{border-color:var(--color-primary);box-shadow:none}
.wh-faq[open] .wh-faq-icon{transform:rotate(45deg)}
.wh-faq p{padding:0 1.35rem 1.25rem;color:var(--color-text-light);line-height:1.7}

/* CTA */
.wh-cta{position:relative;overflow:hidden;text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-primary);border-radius:var(--radius-lg);max-width:860px;margin:0 auto;padding:3rem 2rem;box-shadow:var(--shadow)}
.wh-cta::before,.wh-cta::after{display:none}
.wh-cta::before{width:260px;height:260px;left:-90px;top:-110px}
.wh-cta::after{width:200px;height:200px;right:-60px;bottom:-90px;opacity:.7}
.wh-cta>*{position:relative;z-index:1}
.wh-cta h2{font-family:var(--font-heading);font-size:2.5rem;line-height:1.2;letter-spacing:0}
.wh-cta p{color:var(--color-text-light);max-width:48ch;margin:var(--space-4) auto 0;font-size:1.08rem}
.wh-cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;margin-top:var(--space-8)}

/* keep the stats card above the fold on desktop */
@media (min-width:901px){.wh-hero{padding-top:2.5rem;padding-bottom:5.5rem}.wh-hero-visual img{max-height:max(420px,calc(100svh - 19rem))}}
@media (max-width:900px){
  .wh-hero h1{font-size:3.25rem}
  .wh-hero-grid,.wh-about,.wh-faq-wrap{grid-template-columns:1fr}
  .wh-hero-visual{max-width:440px;margin:0 auto;width:100%}
  .wh-hero-visual img{aspect-ratio:1}
  .wh-hero-visual::before{inset:-.6rem -.6rem .6rem .6rem}
  .wh-quotes{grid-template-columns:1fr}
  .wh-quote:nth-child(2){margin-top:0}
  .wh-faq-wrap .section-header{position:static}
  .wh-about-photo{max-width:380px}
}
@media (max-width:640px){
  .wh-hero h1{font-size:2.5rem}
  .wh-about-copy h2{font-size:1.75rem}
  .wh-cta{padding:2rem 1.5rem}
  .wh-cta h2{font-size:1.9rem}
  .wh-services{grid-template-columns:1fr}
      .wh-service-more{opacity:1;transform:none}
  .wh-service{padding-bottom:4.25rem}
}

@media (prefers-reduced-motion:reduce){.wh-faq-icon{transition:none}}


/* Phones: fit the headline, intro and main action on the first screen */
@media (max-width:640px){
  .wh-hero{padding-top:1.5rem}
  .wh-hero .eyebrow{display:none}
  .wh-hero h1{margin-top:0}
  .wh-hero p{font-size:1.06rem;line-height:1.55;margin-top:1rem}
  .wh-hero-actions{margin-top:1.5rem;gap:1rem}
  .wh-hero-actions .btn{width:100%;justify-content:center}
  .wh-hero-grid{gap:2rem}
  .wh-hero-visual img{aspect-ratio:4/3}

  .wa-intro{padding-top:1.5rem}
  .wa-intro h1{margin-bottom:1rem}
  .wa-intro .wa-lead{font-size:1.06rem;line-height:1.6}
  .wa-intro-actions{margin-top:1.5rem}
  .wa-portrait{max-width:none}
  .wa-portrait img{max-width:none;aspect-ratio:4/3;object-position:center 20%}
}