/* =====================================================================
   Holisthea — HOME, rebuilt pixel-exact from Figma frame 2511:6876
   Fixed 1440px canvas · content 1240 (100px margins) · page bg #FEFEFD
   ===================================================================== */

/* overflow-x:clip (NOT hidden) — `hidden` turns this wrapper into the scroll container
   for every descendant, which silently kills position:sticky further down the page.
   `clip` still crops the horizontal overflow but creates no scrollport. */
.hp{width:1440px;margin:0 auto;background:#FEFEFD;color:#23322D;
  font-family:"Quicksand",system-ui,sans-serif;overflow-x:clip;position:relative}
.hp *{box-sizing:border-box}
.hp img{display:block;max-width:none}
.hp-wrap{width:1240px;margin:0 auto}

/* ---- reusable eyebrow (dot + label + dotted-ish line) ---- */
.hp-eye{display:flex;align-items:center;gap:18px;width:1240px;margin:0 auto;padding:10px 0}
.hp-eye__dot{width:24px;height:24px;border-radius:50%;background:#83039C;flex:0 0 24px}
.hp-eye__label{font-family:"Syne",sans-serif;font-weight:400;font-size:24px;line-height:29px;
  color:#0D3D38;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.hp-eye--about .hp-eye__label{color:#FFFFFC}
/* Figma: LINE stroke #508883, strokeDashes [4,4] -> dashed, not solid */
.hp-eye__line{flex:1;height:1px;border:0;
  background-image:repeating-linear-gradient(to right,#508883 0 4px,transparent 4px 8px)}
.hp-eye--about .hp-eye__line{background-image:repeating-linear-gradient(to right,#EDE5DA 0 4px,transparent 4px 8px)}

/* ---- reusable heading block (H2 + sub) ---- */
.hp-h2{font-family:"Syne",sans-serif;font-weight:400;font-size:54px;line-height:65px;color:#0D3D38;margin:0}
.hp-sub{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#0E0000;margin:0}
.hp-head{width:1240px;margin:0 auto;padding:24px 0 64px;display:flex;flex-direction:column;gap:6px}
.hp-head--btn{gap:36px}
.hp-head--btn .hp-head__txt{display:flex;flex-direction:column;gap:6px}
.it{font-family:"Playfair Display",serif;font-style:italic}

/* ---- primary button (terracotta) ---- */
.hp-btn{display:inline-flex;align-items:center;justify-content:center;
  background:#BF4E30;color:#fff;border-radius:12px;padding:15px 33px;
  font-family:"Quicksand",sans-serif;font-weight:700;font-size:20px;line-height:25px;
  text-decoration:none;white-space:nowrap;transition:filter .15s ease}
.hp-btn:hover{filter:brightness(1.06)}

/* ===================== 1 · HERO (Component 4 h646) ===================== */
.hp-hero{padding:0 0 128px}
.hp-hero__row{width:1240px;margin:0 auto;display:flex;gap:64px;justify-content:center;align-items:center;min-height:518px}
.hp-hero__text{width:605px;display:flex;flex-direction:column;gap:24px;justify-content:center}
/* Figma: base run is Syne 400 (not 600); "a Happier You" is Playfair italic 500 */
.hp-hero__title{font-family:"Syne",sans-serif;font-weight:400;font-size:64px;line-height:77px;color:#134A45;margin:0}
.hp-hero__title .it{font-family:"Playfair Display",serif;font-style:italic;font-weight:500;color:#134A45}
.hp-hero__lead{font-family:"Quicksand",sans-serif;font-weight:400;font-size:24px;line-height:30px;color:#0D3D38;margin:0;max-width:560px}
/* Figma "Frame 800": 420x518, r84, 1px #134A45, linear gradient F8F4F2 -> FFFFFC -> F8F4F2.
   Person 292x313 @64,29 · lotus 389x240 @15,349 (overflows the bottom, clipped by the card) */
.hp-hero__art{width:420px;height:518px;flex:0 0 420px;position:relative;overflow:hidden;
  border-radius:84px;border:1px solid #134A45;
  background:linear-gradient(135deg,#F8F4F2 0%,#FFFFFC 50%,#F8F4F2 100%)}
.hp-hero__person{position:absolute;left:64px;top:29px;width:292px;height:313px}
.hp-hero__lotus{position:absolute;left:15px;top:349px;width:389px;height:240px}

/* ===================== 2 · PROBLEM (Frame 79961 h1001) ===================== */
/* Figma "Frame 79961": flex col, gap 64 between eyebrow / card / root-cause */
.hp-problem{padding:40px 0;display:flex;flex-direction:column;gap:64px;align-items:center}
.hp-prob-card{width:1240px;margin:0 auto;background:#F8F4F2;border:1px solid #000;border-radius:24px;
  padding:40px 64px;display:flex;flex-direction:column;gap:64px;align-items:center}
/* row is 1112 wide holding 200 + 630 + 200 = 1030, space-between spreads the remaining 82 (41 each) */
.hp-prob-hero{width:1112px;height:200px;display:flex;justify-content:space-between;align-items:center}
.hp-prob-hero__illus{width:200px;flex:0 0 200px;display:flex;justify-content:center}
.hp-prob-hero__illus img{width:190px;height:auto}
.hp-prob-hero__mid{width:630px;flex:0 0 630px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.hp-prob-hero__num{font-family:"Playfair Display",serif;font-weight:700;font-size:64px;line-height:85px;color:#0D3D38;margin:0}
.hp-prob-hero__desc{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#0D3D38;margin:0}
.hp-prob-hero__desc b{font-weight:700}
.hp-prob-hero__desc .cap{font-weight:700;color:#83039C}   /* the N, C and D of "Non-Communicable Diseases" */
.hp-prob-stats{width:1112px;display:flex;gap:40px;justify-content:center}
/* Figma: card 344x180, but the inner text column is 240 wide and centred (52px each side) */
.hp-stat{width:344px;height:180px;background:#EBD2F0;border-radius:24px;padding:12px 52px;
  display:flex;flex-direction:column;justify-content:center;gap:8px}
.hp-stat__row{display:flex;gap:12px;align-items:flex-end}
.hp-stat__num{font-family:"Playfair Display",serif;font-weight:700;font-size:36px;line-height:48px;color:#0D3D38;margin:0}
.hp-stat__lab{font-family:"Quicksand",sans-serif;font-weight:700;font-size:20px;line-height:25px;color:#0D3D38;align-self:flex-end;padding-bottom:5px}
.hp-stat p{font-family:"Quicksand",sans-serif;font-weight:400;font-size:16px;line-height:20px;color:#0D3D38;margin:0}
.hp-stat p b{font-weight:700}
.hp-rootcause{width:1240px;margin:0 auto;padding:0 42px;display:flex;flex-direction:column;gap:24px;text-align:center}
.hp-rootcause__title{font-family:"Playfair Display",serif;font-weight:700;font-size:36px;line-height:48px;color:#23322D;margin:0}
.hp-rootcause__title .lead{font-weight:400;color:#23322D;display:block}
.hp-rootcause__title .pp{color:#83039C}
.hp-rootcause__title .dk{color:#23322D}
.hp-rootcause__body{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#23322D;margin:0}

/* ===================== 4 · DIMENSION CARD (rotates) ===================== */
.hp-dim-sec{padding:40px 0}
/* Figma "Frame 661": 1240x372, pad 64, r24, 1px #23322D. Fixed height keeps the
   slides from jumping mid-rotation. Transition = the prototype's 300ms LINEAR. */
.hp-dim{width:1240px;height:372px;margin:0 auto;background:#EBD2F0;border:1px solid #23322D;border-radius:24px;
  padding:64px;display:flex;gap:48px;align-items:center;
  transition:opacity 150ms linear,background-color 300ms linear}
.hp-dim.is-fading{opacity:0}
.hp-dim__art{width:230px;flex:0 0 230px;display:flex;justify-content:center}
.hp-dim__art img{width:222px;height:auto}
.hp-dim__body{width:500px;flex:0 0 500px;display:flex;flex-direction:column;gap:16px}
.hp-dim__title{font-family:"Syne",sans-serif;font-weight:500;font-size:36px;line-height:43px;color:#23322D;margin:0}
.hp-dim__title .it{font-weight:500;color:#23322D}
.hp-dim__desc{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#0D3D38;margin:0}
.hp-dim__tags{width:300px;flex:0 0 300px;display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0;align-items:flex-start}
.hp-dim__tags li{background:#CF8DDE;border-radius:12px;padding:12px;
  font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#23322D;white-space:nowrap}
/* no slider dots — slides auto-advance on a 3s cycle (see assets/js/home.js) */

/* ===================== 6 · SERVICES (row + Aboreto tagline) ===================== */
.hp-services{padding:0 0 120px;position:relative}
/* horizontal row; vertical padding leaves room for the card to grow on hover (328 -> 464) */
.hp-svc-row{width:1240px;margin:0 auto;display:flex;gap:40px;overflow-x:auto;overflow-y:hidden;
  padding:68px 0;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}          /* hide the scrollbar (still scrollable) */
.hp-svc-row::-webkit-scrollbar{width:0;height:0;display:none}
/* Figma row is a HORIZONTAL auto-layout (gap 40), so a hovered card pushes its
   neighbours along instead of covering them -> the slot grows with the card.
   Prototype: ON_HOVER -> SMART_ANIMATE, 300ms, EASE_IN. */
.hp-svc-slot{flex:0 0 340px;height:328px;position:relative;scroll-snap-align:start;
  transition:flex-basis 300ms ease-in}
.hp-svc-slot:hover{flex-basis:450px}
.hp-svc-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:340px;height:328px;background:var(--c);border:1px solid #23322D;border-radius:32px;
  padding:40px 24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:40px;
  text-decoration:none;overflow:hidden;
  transition:width 300ms ease-in,height 300ms ease-in,box-shadow 300ms ease-in}
.hp-svc-card__t{font-family:"Playfair Display",serif;font-weight:700;font-size:24px;line-height:32px;
  color:#000;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  white-space:pre-line}
.hp-svc-card img{height:144px;width:auto;flex:0 0 144px}
/* hover: card grows to the Figma hover variant (450x464) and reveals the stats */
.hp-svc-slot:hover{z-index:5}
.hp-svc-card:hover{width:450px;height:464px;box-shadow:0 24px 44px -26px rgba(19,74,69,.5)}
.hp-svc-stats{display:flex;gap:18px;justify-content:center;align-items:flex-start;
  opacity:0;transition:opacity 300ms ease-in;pointer-events:none}
.hp-svc-card:hover .hp-svc-stats{opacity:1}
.hp-svc-stat{display:flex;flex-direction:column;gap:6px;text-align:center;
  font-family:"Quicksand",sans-serif;font-weight:400;font-size:16px;line-height:20px;color:#0D3D38}
.hp-svc-stat b{font-family:"Quicksand",sans-serif;font-weight:600;font-size:24px;line-height:30px;color:#0D3D38}
/* "Holisthea treats YOU and not just the disease" removed at Uday's request
   (in Figma it is #F6F5F1 behind the cards, i.e. invisible anyway). */

/* ===================== 7 · ASPECTS / DIFFERENT ===================== */
.hp-aspects{padding:40px 0 80px}
.hp-aspects__grid{width:1240px;margin:0 auto;display:flex;gap:64px;justify-content:space-between;align-items:flex-start}
/* The left column pins while the feature cards scroll past, then releases with the
   section (sticky needs align-self:flex-start so the item doesn't stretch full height).
   Offset clears the 174px sticky header. */
.hp-aspects__intro{position:sticky;top:40px;align-self:flex-start;
  width:447px;flex:0 0 447px;padding:64px 0 0;display:flex;flex-direction:column;gap:40px}
.hp-aspects__illus{width:447px;height:auto}
/* char override: "What makes us" is Syne 400 (the node's base 600 is not what renders) */
.hp-aspects__title{font-family:"Syne",sans-serif;font-weight:400;font-size:54px;line-height:65px;color:#0D3D38;margin:0}
.hp-aspects__title .it{font-family:"Playfair Display",serif;font-weight:800;font-style:italic}
.hp-features{width:690px;flex:0 0 690px;display:flex;flex-direction:column;gap:40px}
.hp-feat{border:1px solid #0D3D38;border-radius:8px;padding:24px;display:flex;gap:30px;align-items:center;background:#FEFEFD}
.hp-feat__ico{width:112px;height:146px;flex:0 0 112px;background:#EDE5DA;border:1px solid #000;border-radius:75px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.hp-feat__ico img{width:82px;height:auto}
.hp-feat__body{display:flex;flex-direction:column;gap:18px}
.hp-feat__title{font-family:"Syne",sans-serif;font-weight:500;font-size:32px;line-height:38px;color:#0D3D38;margin:0}
.hp-feat__title .it{font-family:"Playfair Display",serif;font-weight:800;font-style:italic}
.hp-feat__body p{font-family:"Quicksand",sans-serif;font-weight:400;font-size:16px;line-height:20px;color:#000;margin:0}

/* ===================== 8 · TESTIMONIALS (rotates) + 9 · PACKAGES ===================== */
.hp-split{width:1240px;margin:0 auto;display:flex;gap:36px;padding:64px 0}
.hp-split__intro{width:564px;flex:0 0 564px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.hp-split__illus{width:201px;height:274px;margin:0}   /* Figma node 2644:10216 = 201x274 */
.hp-split__title{font-family:"Syne",sans-serif;font-weight:400;font-size:54px;line-height:65px;color:#0D3D38;margin:0}
.hp-split__title .it{font-family:"Playfair Display",serif;font-weight:800;font-style:italic}
.hp-split__sub{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#0E0000;margin:0}

/* Figma card is a fixed 600x487; prototype dissolve is EASE_OUT (see home.js) */
.hp-testi-card{width:600px;flex:0 0 600px;height:487px;border:2px solid #134A45;border-radius:32px;padding:32px;
  display:flex;flex-direction:column;gap:16px;justify-content:center;transition:opacity 150ms ease-out}
.hp-testi-card.is-fading{opacity:0}
.hp-testi-card__title{font-family:"Playfair Display",serif;font-weight:700;font-size:36px;line-height:48px;color:#133240;margin:0}
.hp-testi-card__quote{font-family:"Quicksand",sans-serif;font-weight:400;font-size:21.39px;line-height:27px;
  color:#133240;letter-spacing:.428px;margin:0;
  display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.hp-testi-card__author{font-family:"Quicksand",sans-serif;font-weight:700;font-size:29.41px;line-height:37px;color:#134A45;letter-spacing:.588px;text-align:right;margin:0}

/* Packages — Figma: card 300x266, pad24 gap24 r24, border 2px #508883, head block ungapped */
.hp-pkg-intro{width:564px;flex:0 0 564px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.hp-pkg__illus{width:279px;height:auto;margin-bottom:6px}
.hp-pkg-cta{display:flex;flex-direction:column;gap:36px;margin-top:6px;align-items:flex-start}
.hp-pkg-grid{width:640px;flex:0 0 640px;display:flex;flex-wrap:wrap;
  column-gap:40px;row-gap:62px;align-content:center}
.hp-pkg-card{width:300px;min-height:266px;background:#FFFFFC;border:2px solid #508883;border-radius:24px;padding:24px;
  display:flex;flex-direction:column;gap:24px;align-items:center;overflow:hidden}
.hp-pkg-card__head{display:flex;flex-direction:column;width:252px;text-align:center}
/* Figma draws a hairline underline sitting ~2.5px under the glyphs; the browser's
   auto thickness for bold Playfair is ~2.25px and hugs the text, so set both explicitly */
.hp-pkg-card__name{font-family:"Playfair Display",serif;font-weight:700;font-size:24px;line-height:32px;color:#000;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;margin:0}
.hp-pkg-card__from{font-family:"Quicksand",sans-serif;font-weight:400;font-size:16px;line-height:20px;color:#000;margin:0;padding:8px 0}
.hp-pkg-card__price{font-family:"Quicksand",sans-serif;font-weight:700;font-size:24px;line-height:30px;color:#134A45;margin:0}
.hp-pkg-card__desc{font-family:"Quicksand",sans-serif;font-weight:400;font-size:16px;line-height:20px;color:#000;margin:0;
  width:252px;text-align:left;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.hp-pkg-card__desc b{font-weight:700}

/* ===================== 10 · PROCESS ===================== */
.hp-process{padding:0 0 64px}
/* Figma row is SPACE_BETWEEN with 5 x 240 steps in 1240 -> 10px gaps.
   (The node's itemSpacing:78 is overridden by space-between; using it made the
   row 1512px and pushed step 5 off the page.) */
.hp-proc-steps{width:1240px;margin:0 auto;display:flex;justify-content:space-between}
.hp-proc-step{width:240px;flex:0 0 240px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.hp-proc-step__ico{width:175px;height:175px}
.hp-proc-step__t{font-family:"Quicksand",sans-serif;font-weight:700;font-size:20px;line-height:25px;color:#0D3D38;margin:0}
.hp-proc-step__d{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#000;margin:0;text-align:left}
/* "here" is Quicksand 700, terracotta #BF4E30, underlined (character override in Figma) */
.hp-proc-here{color:#BF4E30;font-weight:700;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}

/* ===================== 11 · CASE STUDIES =====================
   Figma card 1104x506, white, 1px theme stroke, r32, pad 40, gap 40.
   Per-card theme colour comes in as --th (ritika #83039C, vikram #B47D79,
   ananya #508883) and the chip text colour as --chipfg. */
.hp-cases{padding:0 0 64px;overflow:hidden}
.hp-cases__row{width:1240px;margin:0 auto;display:flex;gap:40px;overflow-x:auto;padding-bottom:8px;
  scrollbar-width:none;-ms-overflow-style:none}      /* scrollbar hidden, still scrollable */
.hp-cases__row::-webkit-scrollbar{width:0;height:0;display:none}
.hp-case{flex:0 0 1104px;min-height:506px;background:#fff;border:1px solid var(--th);border-radius:32px;
  padding:40px;display:flex;gap:40px;align-items:center}
.hp-case__fig{width:320px;height:424px;flex:0 0 320px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hp-case__fig img{width:auto;height:424px}
.hp-case__body{width:664px;flex:0 0 664px;display:flex;flex-direction:column;gap:24px}
.hp-case__title{font-family:"Syne",sans-serif;font-weight:700;font-size:32px;line-height:40px;color:#23322D;margin:0}
.hp-case__title .it{font-family:"Playfair Display",serif;font-style:italic;font-weight:700}
/* chips sit side by side, filled with the theme colour */
/* both rows are 664 wide with fixed-width children -> space-between reproduces
   Figma's real gaps (4-6px for chips, 5px for pills) exactly */
.hp-case__chips{display:flex;justify-content:space-between}
.hp-case__chip{background:var(--th);color:var(--chipfg);border:1px solid var(--chipfg);border-radius:8px;padding:12px 16px;
  font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px}
.hp-case__chip b{font-weight:700}
/* modality pills: outlined + UNDERLINED text in the theme colour */
.hp-case__pills{display:flex;justify-content:space-between}
.hp-case__pill{border:2px solid var(--th);border-radius:8px;background:transparent;color:var(--th);
  padding:12px 16px;min-height:82px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:"Quicksand",sans-serif;font-weight:500;font-size:20px;line-height:25px;white-space:pre-line;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hp-case__text{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#23322D;margin:0}
.hp-case__text b{font-weight:700;color:var(--th)}   /* highlighted runs take the card's theme colour */

/* ===================== 12 · ABOUT (dark green) ===================== */
.hp-about{background:#134A45;padding:64px 0}
.hp-about .hp-h2{color:#EDE5DA}
/* Figma: heading block already carries pb64, so the statement adds NO top padding
   (I had 64+64 = 128px, double the real gap) */
.hp-about__statement{width:1240px;margin:0 auto;font-family:"Playfair Display",serif;font-weight:700;font-size:36px;line-height:48px;
  color:#F8F4F2;text-align:center;padding:0}
/* char runs: clause 1 = Syne 500 40px, " — " = the Playfair 700 36px base,
   closing clause = Playfair 500 italic 40px */
.hp-about__statement .it{font-family:"Playfair Display",serif;font-style:italic;font-weight:500;font-size:40px}
.hp-about__statement .sy{font-family:"Syne",sans-serif;font-weight:500;font-style:normal;font-size:40px}
.hp-about__grid{width:1240px;margin:64px auto 0;display:flex;gap:64px;justify-content:flex-end;align-items:flex-start}
.hp-about__photo{width:526px;height:688px;flex:0 0 526px;border:3px solid #23322D;object-fit:cover}
.hp-about__bio{width:650px;flex:0 0 650px;display:flex;flex-direction:column;gap:18px}
.hp-about__name{font-family:"Playfair Display",serif;font-weight:700;font-size:64px;line-height:85px;color:#FFFFFC;margin:0}
.hp-about__role{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#FFFFFC;margin:0}
.hp-about__role b{font-weight:700}
.hp-about__creds{display:flex;flex-direction:column;gap:18px;margin:6px 0}
.hp-cred{display:flex;gap:18px;align-items:center}
/* Figma "academic-cap": 75x75 frame holding a 60x60 lavender (#EBD2F0) glyph */
.hp-cred__ico{width:75px;height:75px;flex:0 0 75px;display:flex;align-items:center;justify-content:center}
.hp-cred__ico img{width:60px;height:60px}
/* Figma constrains this text box to 341px, so the qualification wraps onto 2-3 lines */
.hp-cred__t{width:341px;font-family:"Quicksand",sans-serif;font-size:20px;line-height:25px;color:#FFFFFC;margin:0}
.hp-cred__t b{font-weight:700}
.hp-about__blurb{width:650px;font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#FFFFFC;margin:0}
.hp-about__blurb b{font-weight:700}

/* ===================== 13 · FAQ · 14 · CONTACT ===================== */
/* Figma nests two frames: the eyebrow frame (pt64 pb10) then the FAQ frame (pt64 pb64).
   Both paddings are needed or the list rides ~50px too high. */
.hp-faq{padding:64px 0 0}
.hp-faq__grid{width:1240px;margin:0 auto;display:flex;gap:64px;align-items:center;padding:64px 0}
.hp-faq__intro{width:447px;flex:0 0 447px;padding:64px 0;display:flex;flex-direction:column;gap:40px}
.hp-faq__sub{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#3E3E3E;margin:0}
.hp-faq__list{width:780px;flex:0 0 780px;display:flex;flex-direction:column;gap:24px}
/* Figma: 780x44 pill, #EDE5DA, r12, padding 12/24, space-between, 24px between items.
   <details> gives the expand behaviour natively; the closed pill keeps Figma's 44px height. */
.hp-faq__item{background:#EDE5DA;border-radius:12px}
.hp-faq__item summary{list-style:none;padding:12px 24px;display:flex;justify-content:space-between;
  align-items:center;gap:8px;cursor:pointer}
.hp-faq__item summary::-webkit-details-marker{display:none}
.hp-faq__item summary span{font-family:"Quicksand",sans-serif;font-weight:700;font-size:16px;line-height:20px;color:#0D3D38}
.hp-faq__chev{width:16px;height:16px;flex:0 0 16px;color:#0D3D38;transition:transform .2s ease}
.hp-faq__item[open] .hp-faq__chev{transform:rotate(180deg)}
.hp-faq__answer{margin:0;padding:0 24px 16px;font-family:"Quicksand",sans-serif;font-weight:400;
  font-size:16px;line-height:22px;color:#3E3E3E}

.hp-contact{padding:64px 0}
.hp-contact__grid{width:1240px;margin:0 auto;display:flex;gap:64px;align-items:center}
.hp-contact__intro{width:447px;flex:0 0 447px;padding:64px 0;display:flex;flex-direction:column;gap:40px}
.hp-contact__sub{font-family:"Quicksand",sans-serif;font-weight:400;font-size:20px;line-height:25px;color:#3E3E3E;margin:0}
.hp-contact__cal{flex:1;min-width:0}
.hp-contact__cal .calendly-inline-widget{min-width:600px;height:700px}