/*! Purple Holiday Homes — About page layer (additive).
   Extends phh-design.css. Recreates the requested About layout — centered hero
   on a soft band, a 4-photo strip straddling the band, a two-column text block,
   an image + floating-testimonial block, a centered statement, and a 3-up
   feature row — in the brand: white, vibrant purple #7C3AED, Plus Jakarta Sans
   + Inter. Header and footer are untouched. Load AFTER phh-design.css. */

/* decorative sparkles (subtle, brand purple) */
.ab-spark{position:absolute;pointer-events:none;color:var(--acc);opacity:.5}
.ab-spark svg{width:100%;height:100%;display:block}

/* ---------- 1) CENTERED HERO ON SOFT BAND ---------- */
.ab-hero{position:relative;background:var(--acc-soft);padding:150px 0 120px;text-align:center;overflow:hidden}
.ab-hero .wrap{max-width:820px;position:relative;z-index:2}
.ab-hero .eyebrow{margin-bottom:20px}
.ab-hero h1{font-size:clamp(40px,6vw,72px);line-height:1.0;letter-spacing:-.04em;margin:0 auto}
.ab-hero .sub{font:400 clamp(16px,1.6vw,19px)/1.62 var(--sans);color:var(--ink2);max-width:600px;margin:22px auto 0}
.ab-hero .s1{top:60px;left:9%;width:30px;height:30px}
.ab-hero .s2{top:118px;right:12%;width:18px;height:18px;opacity:.35}
.ab-hero .s3{bottom:150px;left:16%;width:14px;height:14px;opacity:.3}
.ab-hero .s4{top:200px;right:22%;width:10px;height:10px;border-radius:50%;background:var(--acc);opacity:.25}

/* ---------- 2) 4-PHOTO STRIP straddling the band ---------- */
.ab-strip{margin-top:-86px;position:relative;z-index:3}
.ab-strip .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ab-strip figure{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(20,16,25,.4);background:var(--bg2)}
.ab-strip img{width:100%;aspect-ratio:3/3.4;object-fit:cover;display:block}
.ab-strip figure:nth-child(odd){transform:translateY(18px)}

/* ---------- 3) TWO-COLUMN TEXT BLOCK ---------- */
.ab-prose{padding:120px 0 96px}
.ab-prose h2{font-size:clamp(28px,3.6vw,46px);line-height:1.05;letter-spacing:-.03em;max-width:16ch}
.ab-prose .intro{font:400 18px/1.65 var(--sans);color:var(--ink2);max-width:680px;margin-top:18px}
.ab-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px 56px;margin-top:48px}
.ab-pt{display:flex;gap:16px}
.ab-pt .n{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--acc-soft);color:var(--acc-d);
  display:grid;place-items:center;font:700 13px/1 var(--disp)}
.ab-pt b{display:block;font:700 17.5px/1.3 var(--disp);color:var(--ink);letter-spacing:-.015em;margin-bottom:5px}
.ab-pt p{font:400 14.5px/1.62 var(--sans);color:var(--ink2);margin:0}

/* ---------- 4) IMAGE + FLOATING TESTIMONIAL ---------- */
.ab-split{background:var(--bg2);padding:96px 0}
.ab-split .grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.ab-figure{position:relative}
.ab-figure>img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:20px;box-shadow:0 36px 70px -40px rgba(20,16,25,.45)}
.ab-float{position:absolute;left:-24px;bottom:-26px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:18px 22px;box-shadow:0 24px 50px -28px rgba(20,16,25,.4);max-width:260px}
.ab-float .stars{color:var(--acc);font-size:14px;letter-spacing:2px}
.ab-float b{display:block;font:700 15px/1.3 var(--disp);color:var(--ink);margin-top:7px}
.ab-float span{font:500 12.5px/1.4 var(--sans);color:var(--muted)}
.ab-split h2{font-size:clamp(28px,3.6vw,44px);line-height:1.06;letter-spacing:-.03em;max-width:14ch}
.ab-split .body{font:400 17px/1.65 var(--sans);color:var(--ink2);margin-top:18px;max-width:30ch}
.ab-quote{margin-top:26px;padding:22px 24px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:14px}
.ab-quote p{font:500 16px/1.55 var(--sans);color:var(--ink);margin:0}
.ab-quote .who{font:500 13px/1.4 var(--sans);color:var(--muted);margin-top:12px}
.ab-quote em{font-style:normal;color:var(--acc-d);font-weight:600}

/* ---------- 5) CENTERED STATEMENT ---------- */
.ab-statement{position:relative;text-align:center;padding:104px 0 70px;overflow:hidden}
.ab-statement .wrap{max-width:760px;position:relative;z-index:2}
.ab-statement .eyebrow{margin-bottom:18px}
.ab-statement h2{font-size:clamp(30px,4.2vw,52px);line-height:1.04;letter-spacing:-.032em}
.ab-statement p{font:400 17px/1.6 var(--sans);color:var(--ink2);max-width:560px;margin:20px auto 0}
.ab-statement .s1{top:90px;left:14%;width:34px;height:34px}
.ab-statement .s2{bottom:80px;right:15%;width:20px;height:20px;opacity:.4}
.ab-statement .s3{top:140px;right:24%;width:12px;height:12px;border-radius:50%;background:var(--acc);opacity:.3}

/* ---------- 6) THREE-UP FEATURES ---------- */
.ab-feats{padding:10px 0 110px}
.ab-feats .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ab-feat{position:relative;border:1px solid var(--line);border-radius:20px;padding:34px 32px 30px;background:#fff;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);text-align:center}
.ab-feat:hover{transform:translateY(-5px);box-shadow:0 34px 64px -40px rgba(76,29,149,.4);border-color:var(--line2)}
.ab-feat .ic{width:54px;height:54px;border-radius:16px;background:var(--acc-soft);color:var(--acc-d);
  display:grid;place-items:center;margin:0 auto 18px}
.ab-feat .ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;fill:none}
.ab-feat h3{font:700 19px/1.25 var(--disp);letter-spacing:-.018em;color:var(--ink);margin-bottom:9px}
.ab-feat p{font:400 14.5px/1.6 var(--sans);color:var(--ink2);margin:0 0 18px}
.ab-feat .go{font:600 13px/1 var(--sans);color:var(--acc-d);display:inline-flex;align-items:center;gap:7px}
.ab-feat .go .ar{transition:transform .3s var(--ease)}
.ab-feat:hover .go .ar{transform:translateX(4px)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .ab-strip .grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .ab-cols{grid-template-columns:1fr;gap:24px}
  .ab-split .grid{grid-template-columns:1fr;gap:48px}
  .ab-feats .grid{grid-template-columns:1fr}
  .ab-prose,.ab-split{padding:72px 0}
}
@media(max-width:560px){
  .ab-hero{padding:128px 0 100px}
  .ab-strip{margin-top:-60px}
  .ab-strip .grid{grid-template-columns:1fr 1fr;gap:12px}
  .ab-strip figure:nth-child(odd){transform:none}
  .ab-float{left:12px;right:12px;max-width:none}
}