/* ef-w66-b18.css: W66 PR A, spec section B18 (docs/w66-spec.md, sha eb71d5ac969d). Pass 7 fix round (HUB
   PICTURE PASS defects C, D, E, F; ts 1790135104.805669/1790135124.177419): the four components rebuilt against
   the named frames. Demonstrated on the ONE tokened stage page (tools/data/w66/stage/payload.html); from PR B2 also enqueued on
   the four B18 pages by post id (inc/enqueue.php: 1962 About/Team, 1940 Before & Afters, 9827 FHM, 1936 Reviews).
   Never enqueued on the walled eight or /offer/. */
:root{--w66-rosewood:#A4606A;--w66-dustyrose:#DDB6B5;--w66-graphite:#2E2926;--w66-mocha:#895D58;--w66-ivory:#F9F7F3;--w66-blush:#F6E7E4;--w66-line:rgba(46,41,38,.2)}

/* == B18-1 team profile block, About/Team frame 4261:5746 (founders) + 4262:6297 (staff) ==
   Open columns on the section background: no card border or fill. Image with a caption pill (name + short role)
   overlapping its bottom-left corner, the same pill pattern home-r1.css's .r1-founder-card figcaption already
   uses. Role line (Spiced Mocha, sentence case) ABOVE the serif name; bio; a hairline divider; the personality
   subhead (bold sans, Graphite - not italic Playfair Rosewood, the pass-6 defect); then the italic quote.
   Founders two per row, staff four per row (two separate grids). */
.w66-team-group{margin-top:44px}
.w66-team-group + .w66-team-group{margin-top:60px}
.w66-team-founders{display:grid;grid-template-columns:repeat(2,1fr);gap:60px}
.w66-team-staff{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.w66-team-person{text-align:left}
.w66-team-photo{position:relative;margin-bottom:24px}
.w66-team-photo img{width:100%;aspect-ratio:384/480;object-fit:cover;border-radius:10px;display:block}
.w66-team-pill{position:absolute;left:20px;bottom:20px;background:var(--w66-ivory);border-radius:20px;padding:7px 14px;font-size:12px;line-height:17px;color:rgba(46,41,38,.8)}
.w66-team-role{font-size:13px;letter-spacing:.08em;text-transform:none;color:var(--w66-mocha);font-weight:600;margin:0}
.w66-team-name{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;color:var(--w66-graphite);margin:4px 0 0}
.w66-team-bio{font-size:14px;line-height:22px;color:rgba(46,41,38,.8);margin-top:14px}
.w66-team-divider{border:0;border-top:1px solid var(--w66-line);margin:20px 0}
.w66-team-personality{font-family:var(--body,'DM Sans',sans-serif);font-weight:700;font-size:14px;color:var(--w66-graphite);margin:0}
.w66-team-quote{font-style:italic;font-size:14px;line-height:21px;color:rgba(46,41,38,.75);margin-top:6px}
@media(max-width:880px){
  .w66-team-founders{grid-template-columns:1fr;gap:40px}
  .w66-team-staff{grid-template-columns:1fr;gap:40px}
}

/* == B18-2 Before & Afters, frame 4262:8867 (pills) ==
   Pills row CENTRED (was left aligned). Result cards are the LIVE B&A card markup (.ba3/.ba3-imgs/.ba3-ph/
   .ba3-pills/.ba3-pill/.ba3-tag, unscoped, wireframe.css lines 434-443, untouched); a Blush title header is
   added here, scoped to .w66-ba .ba3-tag only, so wireframe.css's own base rule (transparent, a border-top) is
   never edited - a scoping note, not a copy of an existing page's exact current colour. Only the pills, the
   alignment rule and the arrow rule are added on top of that live card. The Selected pill state (E1's Rosewood-
   on-Ivory-Silk 4.40 pattern is a different component; Components page 0:1 was not among the 24 exports read
   for this PR, so the Selected state below is read from the Before & Afters frame's own pill instances: filled
   Rosewood background, white text - named here per the order's "if not exported, read the frame and name it"
   allowance). */
.w66-ba-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.w66-ba-pill{display:inline-flex;align-items:center;background:var(--w66-ivory);border:1px solid var(--w66-line);border-radius:999px;padding:9px 18px;font-size:13px;font-weight:600;color:var(--w66-graphite);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
@media(hover:hover){.w66-ba-pill:hover{border-color:var(--w66-rosewood);color:var(--w66-rosewood)}}
.w66-ba-pill[aria-pressed="true"]{background:var(--w66-rosewood);border-color:var(--w66-rosewood);color:#fff}
.w66-ba-results{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.w66-ba-results.w66-ba-results--partial{justify-content:start}
.w66-ba .ba3-tag{background:var(--w66-blush);color:var(--w66-rosewood);margin-top:0;padding:12px 14px;border-top:0;border-radius:0 0 14px 14px;white-space:normal;text-overflow:clip}
.w66-ba .ba3{padding:0;overflow:hidden}
.w66-ba .ba3-imgs{gap:0}
.w66-ba .ba3-pills{margin:12px 14px 0;gap:8px}
.w66-ba-card[hidden]{display:none}
.w66-ba-arrows{display:none}
.w66-ba-results[data-count]:not([data-count="0"]):not([data-count="1"]):not([data-count="2"]) ~ .w66-ba-arrows{display:flex}
@media(max-width:880px){
  .w66-ba-results{grid-template-columns:1fr;padding:0 20px}
  .w66-ba-controls{display:none}
  .w66-ba-controls[data-count]:not([data-count="0"]):not([data-count="1"]){display:flex}
}
@media(min-width:880.02px){.w66-ba-controls{display:none}}
/* W66 PR B2 (spec section C row "Before & Afters", the real page, post 1940; ef-w66-b18.js's B2 block): the live
   gallery's category groups (.w66-ba-group, each one live .ba-carousel on the Treatment template's B&A card).
   Change 1: a group the pills hide stays hidden. Change 2, the arrow rule per group by its data-count: desktop
   arrows only over three results; mobile controls (the arrows and the progress row) only over more than one result,
   none for a single result. Change 3, the results-row alignment rule: a row of one or two results keeps the
   three-card width, left aligned (ba-carousel.js centres a row that fits; this keeps it at the start). */
.w66-ba-group[hidden]{display:none}
@media(min-width:880.02px){
  .w66-ba .w66-ba-group[data-count="1"] .ba-carousel .bac-arrow,
  .w66-ba .w66-ba-group[data-count="2"] .ba-carousel .bac-arrow,
  .w66-ba .w66-ba-group[data-count="3"] .ba-carousel .bac-arrow{display:none}
  .w66-ba .w66-ba-group .ba-carousel.bac-center .bac-track{justify-content:flex-start}
}
@media(max-width:880px){
  .w66-ba .w66-ba-group[data-count="1"] .ba-carousel .bac-arrow,
  .w66-ba .w66-ba-group[data-count="1"] .ba-carousel .mba-controls{display:none}
}

/* == B18-3 four-phase card row, FHM frame 4265:13039 ==
   Four Blush cards with padding; an icon-circle SLOT that stays hidden until an icon exists (never a blank
   circle - the icon markup is commented out below, not rendered empty); the serif title held at ONE height
   across the row by equal STEP-eyebrow-to-title spacing (a fixed-height header block per card, flex column so
   the body always starts at the same y regardless of title line count); body carries in-text Spiced Mocha
   underlined links to the live hub routes. */
.w66-phases{display:flex;align-items:stretch;gap:24px;padding:30px 0 35px;flex-wrap:nowrap}
.w66-phase{flex:1 1 0;min-width:0;background:var(--w66-blush);border-radius:14px;padding:30px 26px;display:flex;flex-direction:column}
.w66-phase-icon{display:none} /* hidden until an icon asset exists; never a blank circle */
.w66-phase-head{min-height:76px}
.w66-phase .n{font-family:var(--body,'DM Sans',sans-serif);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--w66-rosewood);font-weight:600;display:block}
.w66-phase h3{font-family:'Playfair Display',serif;font-size:20px;font-weight:500;color:var(--w66-graphite);margin:8px 0 0}
.w66-phase p{font-size:14px;line-height:22px;color:rgba(46,41,38,.8);margin-top:10px;flex:1 1 auto}
.w66-phase p a{color:var(--w66-mocha);text-decoration:underline;text-decoration-color:var(--w66-mocha);text-underline-offset:3px}
@media(max-width:880px){.w66-phases{flex-wrap:wrap}.w66-phase{flex:1 1 100%}}

/* == B18-4 static review grid, Reviews frame 4268:4692 ==
   Separate rounded outlined cards on Graphite (5% White fill), each hugging its own content (no equal-height
   rows, no internal dividers between cards); quote first, then a hairline (White 20%) divider, then the name
   in Dusty Rose semibold with "Google Review" under it and five Dusty Rose stars to the RIGHT of the name
   block; "More Reviews" as the Default Secondary Dusty Rose ghost button (outlined, Dusty Rose text/border),
   centred. */
.w66-reviews-section{background:var(--w66-graphite);padding:60px 40px;border-radius:14px}
/* Picture-pass re-read row J (W66, spec sha eb71d5ac969d, ts 1790183828.689989): CSS Grid's default
   align-items:stretch made every card in a row match the row's tallest (273/317/317px measured at 1440); the
   frame and the spec's B18 row want each card hugging its own content. Column flow (CSS multi-column, not
   Grid) lays cards down each column independently, so a short card never stretches to a taller neighbour's
   height; break-inside:avoid keeps a single card from splitting across the column break, and the row gap
   becomes a margin on the card itself since `columns` carries no row-gap of its own. */
.w66-reviews-grid{columns:3;column-gap:20px;margin-top:44px}
.w66-review{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:30px;break-inside:avoid;margin-bottom:20px}
.w66-review p{font-size:14px;line-height:22px;color:var(--w66-ivory);margin:0}
.w66-review-divider{border:0;border-top:1px solid rgba(255,255,255,.2);margin:20px 0 14px}
.w66-review-who{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Grader fix round R2 D5 (W66, spec sha eb71d5ac969d): the payload marks both name and source as <p>, so
   .w66-review p (0,1,1) outranked these two (0,1,0) unqualified; scoped to .w66-review p.* (0,2,1) so they win. */
.w66-review p.w66-review-name{font-weight:600;color:var(--w66-dustyrose);font-size:14px;margin:0}
.w66-review p.w66-review-source{font-size:12px;color:rgba(249,247,243,.6);margin-top:2px}
.w66-review .s{color:var(--w66-dustyrose);font-size:13px;letter-spacing:2px;white-space:nowrap}
.w66-reviews-more{display:inline-flex;align-items:center;justify-content:center;margin:30px auto 0;background:transparent;border:1px solid var(--w66-dustyrose);color:var(--w66-dustyrose);font-size:14px;font-weight:600;padding:12px 28px;border-radius:40px;text-decoration:none}
@media(hover:hover){.w66-reviews-more:hover{background:var(--w66-dustyrose);color:var(--w66-graphite)}}
.w66-reviews-more-wrap{text-align:center}
@media(max-width:880px){.w66-reviews-grid{columns:1}}