/* ============================================================================
   FHA SECTION 2 — Services component system.  v1
   Laws: claude/fha-page-template.md (slider-button, accordion+button, etch,
   identity colours, internal top shadow) + claude/fha-mobile-style-template.md.
   Loads AFTER theme-teal.css. Desktop block ≥992px; mobile inside #fhaMobile.
   ==========================================================================*/

@media (min-width: 992px) {

/* ---------- page scaffolding: Section-1 template geometry, denser column --- */
/* Steven's Section 2 column runs masthead -> page title -> script subtitle.
   style.css sizes these for the old light layout, so restate them here. */
.s2 .brand-logo { display: block; margin: 0 auto; }
.s2 .brand-logo img { display: block; margin: 0 auto; width: auto;
  max-width: none; height: clamp(58px, 6.2vw, 96px); }
.s2 .menu-log { display: block; text-align: center; margin: clamp(2px,.8vh,8px) 0 0; }
.s2 .menu-log img { display: inline-block; width: auto; max-width: 92%;
  height: clamp(24px, 2.4vw, 36px); }
.s2 .our-mission-img img { display: inline-block; width: auto; max-width: 96%;
  height: clamp(20px, 1.95vw, 30px); }
.s2 .banner .banner-detail-container .details { width: 100%; }
.s2 .content-scroll { margin-top: 4px; }
.s2 .our-mission-img img { max-width: none; width: auto; }
/* Coldiac-anchor law: title art is right-anchored so CATALOG sits on the axis */
.s2 .our-mission-img { display: flex; justify-content: center; }

/* section subtitle script (his Distant Stroke law) */
.s2 .s2-subtitle { text-align: center; color: #A2E7E8;
  font-family: 'Distant Stroke', cursive; font-size: clamp(20px, 1.6vw, 26px);
  text-shadow: 0 1px 1px rgba(2,44,68,.5); margin: 2px 0 10px; }

/* intro paragraph — Page 11 standard */
.s2 .details-disc p { text-wrap: pretty; }

/* ---------- THE SLOT: panel + right gutter (slider-button law) ------------ */
.s2slot { position: relative; margin-bottom: clamp(8px, 1.1vh, 12px);
  border-radius: 2px; overflow: hidden; }
.s2slot .gutR { position: absolute; top: 0; right: 0; bottom: 0; width: 9.3%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, rgba(2,26,40,.30), rgba(2,26,40,.17));
  box-shadow: inset 2px 0 5px rgba(0,10,18,.45); border-radius: 0 2px 2px 0; }
/* swipe cue: thin chevron TRAIL — a different species from the accordion arrow */
.s2slot .gutR .swipeCue { display: block; opacity: .28; transition: opacity .24s ease; }
.s2slot .gutR .swipeCue svg { display: block; width: 20px; height: 18px; overflow: visible; }
.s2slot .gutR .swipeCue path { fill: none; stroke: #DCF1F1; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(2,44,68,.4)); }
.s2slot .gutR .swipeCue path:nth-child(1) { opacity: .30; }
.s2slot .gutR .swipeCue path:nth-child(2) { opacity: .55; }
.s2slot .gutR .swipeCue path:nth-child(3) { opacity: .85; }
.s2slot:hover .gutR .swipeCue { opacity: 1; }
.s2slot:hover .gutR .swipeCue path { animation: s2trail 1.5s ease-in-out infinite; }
.s2slot:hover .gutR .swipeCue path:nth-child(2) { animation-delay: .14s; }
.s2slot:hover .gutR .swipeCue path:nth-child(3) { animation-delay: .28s; }
@keyframes s2trail { 0%,100% { transform: translateX(0) } 50% { transform: translateX(2.5px) } }
@media (prefers-reduced-motion: reduce) { .s2slot:hover .gutR .swipeCue path { animation: none; } }
.s2slot.dragging .gutR .swipeCue { opacity: 1; }
.s2slot.dragging .gutR .swipeCue path { stroke: #A2E7E8; animation: none; }

/* the draggable panel — accordion glass, internal TOP shadow */
.s2slot .panel { position: relative; width: 90.7%;
  border-radius: 2px; overflow: hidden; cursor: grab; touch-action: pan-y;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(92deg, rgba(235,248,249,.16), rgba(190,230,230,.24));
  -webkit-backdrop-filter: blur(10px) saturate(1.18); backdrop-filter: blur(10px) saturate(1.18);
  box-shadow: 0 2px 8px rgba(2,24,38,.22);
  transition: transform .42s cubic-bezier(.25,1.1,.4,1), box-shadow .18s ease, filter .18s ease; }
.s2slot .panel::before { content:''; position: absolute; left: 0; right: 0; top: 0;
  height: 24px; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, rgba(2,24,38,.30) 0%, rgba(2,24,38,.11) 48%, rgba(2,24,38,0) 100%); }
.s2slot .panel::after { content:''; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; pointer-events: none; z-index: 6; background: rgba(255,255,255,.30); }
.s2slot .panel.press { box-shadow: inset 0 3px 9px rgba(0,10,18,.5), 0 1px 3px rgba(2,24,38,.3);
  filter: brightness(.955); }
.s2slot .panel.nosnap { transition: none; }
.s2slot.dragging .panel { cursor: grabbing; }

/* ---------- service row content (menu page) ------------------------------- */
.s2slot .svcRow { display: flex; align-items: center; justify-content: space-between;
  padding: clamp(9px, 1.2vh, 13px) 18px; }
.s2slot .svcName { color: #E7F4F4; font-family: 'Raleway', sans-serif; font-weight: 700;
  font-size: clamp(14px, 1.05vw, 17px); letter-spacing: .04em;
  text-shadow: 0 1px 1px rgba(2,44,68,.55); }
.s2slot .svcName .lead { font-weight: 500; text-transform: lowercase; }
.s2slot .svcSub { color: #9FCBCE; font-weight: 600; font-style: italic;
  font-size: clamp(11px, .82vw, 13px); margin-top: 2px; }
.s2slot .svcPrice { color: #CBEAEA; font-weight: 800;
  font-size: clamp(14px, 1.05vw, 17px); text-shadow: 0 1px 1px rgba(2,44,68,.5);
  white-space: nowrap; margin-left: 14px; }
.s2slot:hover .svcName { color: #A2E7E8; }
/* on-location rows: no gutter, contact-direct */
.s2slot.noGut .panel { width: 100%; cursor: pointer; }
.s2slot.noGut .gutR { display: none; }

/* ---------- offer button (art) + accordion (pages 22/23) ------------------ */
.s2slot .artBtn { position: relative; display: block; }
.s2slot .artBtn img { display: block; width: 100%; }
.s2slot .artBtn img.ov { position: absolute; left: 0; top: 0; }
/* accordion arrow — his silver play icon at the pxd position */
.s2slot .accArw { position: absolute; left: 1.09%; top: 0; width: 8.21%; height: 100%;
  z-index: 7; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.s2slot .accArw i { width: 14px; height: 16px;
  background: url(../images/thumb/play-icon-silver.png) center/contain no-repeat;
  transition: transform .3s ease; filter: drop-shadow(0 1px 1px rgba(2,44,68,.45)); }
.s2slot:hover .accArw i { background-image: url(../images/thumb/play-icon-aqua.png); }
.s2slot.open .accArw i { transform: rotate(90deg);
  background-image: url(../images/thumb/play-icon-aqua.png); }
/* the drop-down — ONE CONTINUOUS PANEL: no border, no line */
.s2slot .dd { max-height: 0; overflow: hidden; position: relative;
  transition: max-height .42s cubic-bezier(.3,.8,.25,1); }
.s2slot.open .dd { max-height: 420px; }
.s2slot .ddIn { position: relative; padding: 18px 30px 22px; }
/* The tail is now cut from the SAME carve as the button script (one etch over the
   whole word, split at the button's bottom edge), so it is the full panel width and
   needs no registration offsets — top:0 IS the seam. */
.s2slot .ddTail { position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none; z-index: 1; }
.s2slot .ddTail img { display: block; width: 100%; }

/* Button caps: the NAME reads like a service-menu row — brighter, a crisp 1px
   shadow, and it moves to the hover ink.  The time | price line is brightened
   only: his call was no shadow there and no colour change on hover/select. */
.s2slot .artBtn img.capNm, .s2slot .artBtn img.capNmHi {
  position: absolute; left: 0; top: 0;
  filter: drop-shadow(0 1px 1px rgba(2,44,68,.6)); }
.s2slot .artBtn img.capNmHi { opacity: 0; transition: opacity .25s ease; }
.s2slot:hover .artBtn img.capNmHi,
.s2slot.open .artBtn img.capNmHi { opacity: 1; }
/* the Consultation keeps his soft aqua at rest and goes bright white on highlight —
   its headline is baked into the card, so only the hover ink is an overlay, and it
   carries no shadow because the resting headline has none */
.s2slot.invert .artBtn img.capNmHi { filter: none; }
.s2slot .ddIn p { position: relative; z-index: 2; margin: 0; text-align: center;
  color: #F0FAFA; font-family: 'Raleway', sans-serif; font-weight: 700;
  font-size: clamp(13.5px, 1vw, 16px); line-height: 1.45;
  text-shadow: 0 1px 1px rgba(2,44,68,.6); }
.s2slot .ddIn p .ex { display: block; font-weight: 600; color: #DCEFEF; margin-top: 6px;
  font-size: clamp(12.5px, .92vw, 14.5px); }

/* ---------- artist header bar (menu page) --------------------------------- */
.s2artist { position: relative; border-radius: 3px; margin-bottom: 12px;
  background: rgba(235,248,249,.20);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 3px 10px rgba(2,24,38,.22), inset 0 1px 0 rgba(255,255,255,.24);
  overflow: hidden; cursor: pointer; }
.s2artist::before { content:''; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  pointer-events: none; background: linear-gradient(180deg, rgba(2,24,38,.30), rgba(2,24,38,.11) 48%, rgba(2,24,38,0)); }
.s2artist .abar { display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; padding: clamp(9px, 1.3vh, 14px) 20px; }
.s2artist .arw { order: -1; }
/* his call: the artist name and title read RIGHT-aligned, arrow stays left */
.s2artist .abar > div:not(.arw) { flex: 1; min-width: 0; text-align: right; }
.s2artist .nm { color: #EAF7F7; font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(14px, 1.1vw, 18px); letter-spacing: .1em;
  text-shadow: 0 1px 1px rgba(2,30,46,.6); }
.s2artist .rl { color: #A9CFD2; font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: clamp(9.5px, .72vw, 11.5px); letter-spacing: .15em; text-transform: uppercase;
  margin-top: 2px; }
.s2artist .arw { width: 14px; height: 16px; flex-shrink: 0;
  background: url(../images/thumb/play-icon-silver.png) center/contain no-repeat;
  transition: transform .3s ease; filter: drop-shadow(0 1px 1px rgba(2,44,68,.45)); }
.s2artist:hover .nm { color: #A2E7E8; }
.s2artist:hover .arw, .s2group.open .s2artist .arw {
  background-image: url(../images/thumb/play-icon-aqua.png); }
.s2group.open .s2artist .arw { transform: rotate(90deg); }
.s2group .s2list { max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.3,.8,.25,1); }
.s2group.open .s2list { max-height: 1400px; }
.s2group .legend { color: #8FC3C6; font-family: 'Raleway', sans-serif; font-weight: 600;
  font-style: italic; font-size: clamp(10.5px, .8vw, 12.5px); text-align: center;
  margin: 4px 0 10px; }

/* ---------- connect rail — identity bar, NOT chrome ----------------------- */
/* his original layout: a narrow rail at the LEFT of the service list, not above it */
.s2 .s2list { display: flex; gap: 10px; align-items: flex-start; }
.s2 .s2rows { flex: 1; min-width: 0; }
.s2connect { flex-shrink: 0; width: 74px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; }
.s2cc { position: relative; width: 100%; padding: 10px 4px 10px 14px;
  border-radius: 3px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: clamp(6px,1.1vh,12px);
  background: rgba(235,248,249,.20);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.32); box-shadow: 0 4px 18px rgba(2,24,38,.25); }
.s2cc::before { content:''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  z-index: 3; background: var(--id, #A2E7E8); }
.s2cc::after { content:''; position: absolute; left: 4px; top: 0; bottom: 0; width: 20px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--idFade, rgba(162,231,232,.3)), transparent); }
.s2cc a { position: relative; z-index: 4; display: block;
  filter: drop-shadow(0 2px 1px rgba(2,44,68,.45)); transition: transform .18s ease; }
.s2cc a:hover { transform: scale(1.12); }
.s2cc img { width: 23px; height: 23px; object-fit: contain; display: block; }
.s2cwArt { width: 62px; display: block;
  filter: drop-shadow(0 2px 1px rgba(2,44,68,.5)); }

/* ---------- promotions / pricing panels ----------------------------------- */
.s2slot .promoBody p { text-align: center; }
/* promotions run OPEN at rest (his call) — so the body copy runs denser */
.s2slot .ddIn.promoBody { padding: 6px 16px 11px; }
.s2slot .ddIn.promoBody p { font-size: clamp(11.5px, .85vw, 14px); line-height: 1.32; }
.s2slot .ddIn.promoBody p .ex { font-size: clamp(11px, .81vw, 13.5px); margin-top: 3px; }
.s2slot.open .dd:has(.promoBody) { max-height: 560px; }
.s2price { border-radius: 2px; padding: clamp(12px, 1.6vh, 18px) clamp(16px, 1.6vw, 26px);
  background: linear-gradient(92deg, rgba(235,248,249,.16), rgba(190,230,230,.24));
  -webkit-backdrop-filter: blur(10px) saturate(1.18); backdrop-filter: blur(10px) saturate(1.18);
  border: 1px solid rgba(255,255,255,.28); position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(2,24,38,.22); }
.s2price::before { content:''; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  pointer-events: none; background: linear-gradient(180deg, rgba(2,24,38,.30), rgba(2,24,38,.11) 48%, rgba(2,24,38,0)); }
.s2price h4 { color: #E7F4F4; font-family: 'Raleway', sans-serif; font-weight: 700;
  font-style: italic; font-size: clamp(13px, 1vw, 16px); text-align: center;
  margin: clamp(8px, 1.2vh, 14px) 0 4px; text-shadow: 0 1px 1px rgba(2,44,68,.55); }
.s2price h4:first-child { margin-top: 0; }
.s2price p { color: #C1D7D7; font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: clamp(12.5px, .92vw, 15px); line-height: 1.4; text-align: center;
  margin: 0 0 4px; text-shadow: 0 1px .5px rgba(2,44,68,.45); text-wrap: pretty; }
.s2price .ladder { max-width: 340px; margin: 2px auto 6px; }
.s2price .ladder div { display: flex; justify-content: space-between; align-items: baseline;
  color: #C1D7D7; font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: clamp(12.5px, .92vw, 15px); line-height: 1.55;
  text-shadow: 0 1px .5px rgba(2,44,68,.45); }
.s2price .ladder b { color: #CBEAEA; font-weight: 800; }
.s2price .ladder i { flex: 1; margin: 0 8px; border-bottom: 1px dotted rgba(110,160,164,.55);
  transform: translateY(-4px); }
.s2price u { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

/* ==========================================================================
   v2 PROPORTION LAW — measured from Steven's .pxd (pages 21-25) and his live
   Section 2 pages, then reconciled with the approved Section 1 geometry.
   Reference frame 1440x900, column 633.6, content axis x=293.8 (= the centre
   of .content-scroll, the same axis Section 1 was approved on).

   pxd @1920 (column 775)          -> ratio          -> @1440 (column 633.6)
     content block      400 px        51.6% of col       317 px
     connect rail        65 px         8.4% of col        53 px
     service row track  325 px        41.9% of col       266 px
     button / gutter    280 / 47.5    86.1% / 13.9%      same split
     service row height  37.75        pitch 42.5         h 38 / pitch 41
     CATALOG (Coldiac) centre = 66.43% of the masthead art width
   His live pages measure the same: block 314-341, rail 54, rows 260,
   row pitch 39, offer card 49 tall on a 71 pitch, everything centred on 293.
   ========================================================================== */

/* --- title lockup: never distort the art (style.css sets width only) ------ */
.s2.theme-teal .banner .banner-detail-container .brand-logo {
  max-width: none; margin: 0 auto 1.7vw; justify-content: center; }
.s2.theme-teal .banner .banner-detail-container .brand-logo *,
.s2.theme-teal .banner .banner-detail-container .brand-logo img {
  width: clamp(224px, 17.792vw, 300px); height: auto; max-width: none;
  margin-left: 0; margin-right: 0; }
/* Coldiac-anchor law: pull the art left so CATALOG - not the Burgues script -
   lands on the axis (0.6643 - 0.5 = 0.1643 of the art's own width). */
.s2.theme-teal .banner .banner-detail-container .brand-logo img {
  transform: translateX(-16.43%); }

/* page title caps — sized by HEIGHT so all five pages share a cap height */
.s2.theme-teal .banner .banner-detail-container .menu-log { margin: 0; }
.s2.theme-teal .banner .banner-detail-container .menu-log *,
.s2.theme-teal .banner .banner-detail-container .menu-log img {
  width: auto; height: clamp(22px, 2.0vw, 32px); max-width: 100%; object-fit: contain; }

/* subtitle script — sized by HEIGHT, sits inside the content block */
.s2.theme-teal .banner .banner-detail-container .details .our-mission-img {
  margin: 2px 0 clamp(14px, 2.2vh, 26px); }
.s2.theme-teal .banner .banner-detail-container .details .our-mission-img *,
.s2.theme-teal .banner .banner-detail-container .details .our-mission-img img {
  width: auto; height: clamp(28px, 2.65vw, 40px); max-width: 100%;
  object-fit: contain;   /* never squeeze — letterbox if the block clamps it */
  filter: drop-shadow(0 2px 1px rgba(2,44,68,.55)); }

/* --- the content block: 24vw wide, centred on the axis -------------------- */
.s2 .content-scroll-in { max-width: clamp(300px, 24vw, 400px); margin: 0 auto; }
/* the menu page carries the Connect rail inside the block, so it runs wider */
.s2.services-menu .content-scroll-in { max-width: clamp(342px, 27vw, 480px); }
.s2 .details-disc { max-width: 87%; margin: 0 auto clamp(20px, 3.2vh, 36px); }
.s2.theme-teal .banner .banner-detail-container .details .details-disc,
.s2.theme-teal .banner .banner-detail-container .details .details-disc p {
  text-align: center; font-size: clamp(12px, .88vw, 15.5px); line-height: 1.34; }

/* style.css forces EVERY span in .details to navy 300 at 0.781vw
   (.services-page .banner .banner-detail-container .details span). Section 2
   spans are ours — hand them back to their component. */
.s2.theme-teal .banner .banner-detail-container .details span {
  color: inherit; font-weight: inherit; font-size: inherit; font-style: inherit; }

/* --- slot proportions ----------------------------------------------------- */
.s2slot { margin-bottom: 1px; }
.s2slot .panel { width: 86.1%; }
.s2slot .gutR { width: 13.9%; }
.s2slot .panel::before { height: 18px; }
.s2slot .svcRow { padding: clamp(5px, .74vh, 9px) 14px; }
.s2slot .svcName { font-size: clamp(11.5px, .87vw, 14.5px); line-height: 1.2;
  letter-spacing: .015em; text-wrap: balance; }
.s2slot .svcRow > div:first-child { min-width: 0; }
.s2slot .svcPrice { flex-shrink: 0; }
.s2slot .svcSub { font-size: clamp(10px, .74vw, 12px); margin-top: 1px; line-height: 1.15; }
.s2slot .svcPrice { font-size: clamp(13px, .97vw, 16px); margin-left: 10px; }
.s2slot .ddIn { padding: 12px 20px 16px; }
.s2slot .ddIn p { font-size: clamp(12.5px, .93vw, 15px); line-height: 1.38; }
.s2slot .ddIn p .ex { font-size: clamp(11.5px, .86vw, 13.5px); margin-top: 4px; }

/* offer cards carry his art, so their height follows the block width; the
   script flourish hangs below the card exactly as it does in the .pxd */
.s2slot + .s2slot { margin-top: 0; }
.s2 .aaccordion .s2slot, .s2 .content-scroll-in > .s2slot { margin-bottom: clamp(5px, .7vh, 8px); }

/* --- artist header bar ---------------------------------------------------- */
.s2artist { margin-bottom: 4px; }
.s2artist::before { height: 16px; }
.s2artist .abar { padding: 6px 14px; }
.s2artist .nm { font-size: clamp(12.5px, .95vw, 15.5px); line-height: 1.15; }
.s2artist .rl { font-size: clamp(8.5px, .64vw, 10.5px); margin-top: 1px; line-height: 1.15; }
.s2group { margin-bottom: 4px; }
.s2group .legend { font-size: clamp(9.5px, .72vw, 11.5px); margin: 1px 0 3px; }

/* --- connect rail: 8.4% of the column, at the LEFT of the rows ------------ */
.s2 .s2list { gap: 15px; }
/* His note: the Connect-with script has to be bigger and easier to read, and he would
   rather it did NOT creep past the rail. So the rail itself grows 48 -> 62 and the
   script 42 -> 58 (+38%); the 14px comes off the service-row track, which still holds
   every name on one line. Shadow lifted too — at this size legibility is mostly edge
   contrast, not ink. */
.s2connect { width: 62px; gap: 6px; }
.s2cc { padding: 11px 4px 11px 12px; gap: clamp(9px, 1.5vh, 16px); }
.s2cc::after { left: 4px; width: 16px; }
.s2cc img { width: 22px; height: 22px; }
.s2cwArt { width: 58px; margin-top: 14px;
  filter: drop-shadow(0 2px 1px rgba(2,44,68,.7)) drop-shadow(0 0 1px rgba(2,44,68,.35)); }

/* --- pricing panels ------------------------------------------------------- */
.s2price { padding: clamp(9px, 1.25vh, 14px) clamp(12px, 1.25vw, 20px); }
.s2price::before { height: 16px; }
.s2price h4 { font-size: clamp(12px, .93vw, 15px); margin: clamp(6px, .95vh, 11px) 0 3px; }
.s2price p { font-size: clamp(11.5px, .86vw, 14px); line-height: 1.35; }
.s2price .ladder div { font-size: clamp(11.5px, .86vw, 14px); line-height: 1.45; }


/* --- text accordion (pricing FAQ) — Section 1 accordion language ---------- */
.s2slot.s2acc { margin-bottom: 5px; }
.s2slot.s2acc .panel { width: 100%; cursor: pointer; }
.s2slot.s2acc .accHd { display: flex; align-items: center; justify-content: flex-start;
  gap: 11px; padding: 9px 14px; }
.s2slot.s2acc .arw { order: -1; }
.s2slot.s2acc .hdT { color: #E7F4F4; font-family: 'Raleway', sans-serif; font-weight: 700;
  font-size: clamp(12.5px, .95vw, 15.5px); letter-spacing: .03em; line-height: 1.2;
  text-shadow: 0 1px 1px rgba(2,44,68,.55); }
.s2slot.s2acc .arw { width: 13px; height: 15px; flex-shrink: 0;
  background: url(../images/thumb/play-icon-silver.png) center/contain no-repeat;
  transition: transform .3s ease; filter: drop-shadow(0 1px 1px rgba(2,44,68,.45)); }
.s2slot.s2acc:hover .hdT { color: #A2E7E8; }
.s2slot.s2acc:hover .arw, .s2slot.s2acc.open .arw {
  background-image: url(../images/thumb/play-icon-aqua.png); }
.s2slot.s2acc.open .arw { transform: rotate(90deg); }
.s2slot.s2acc.open .dd { max-height: 620px; }
.s2slot.s2acc .ddIn { padding: 2px 16px 12px; }
.s2slot.s2acc .ddIn h4 { color: #E7F4F4; font-family: 'Raleway', sans-serif; font-weight: 700;
  font-style: italic; font-size: clamp(11.5px, .88vw, 14px); text-align: center;
  margin: 8px 0 3px; text-shadow: 0 1px 1px rgba(2,44,68,.55); }
.s2slot.s2acc .ddIn h4:first-child { margin-top: 0; }
.s2slot.s2acc .ddIn p { color: #C1D7D7; font-weight: 600; text-align: center;
  font-size: clamp(11.5px, .86vw, 14px); line-height: 1.35; margin: 0 0 4px;
  text-shadow: 0 1px .5px rgba(2,44,68,.45); }
.s2slot.s2acc .ladder { max-width: 260px; margin: 2px auto 6px; }
.s2slot.s2acc .ladder div { display: flex; justify-content: space-between; align-items: baseline;
  color: #C1D7D7; font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: clamp(11.5px, .86vw, 14px); line-height: 1.45;
  text-shadow: 0 1px .5px rgba(2,44,68,.45); }
.s2slot.s2acc .ladder b { color: #CBEAEA; font-weight: 800; }
.s2slot.s2acc .ladder i { flex: 1; margin: 0 8px; border-bottom: 1px dotted rgba(110,160,164,.55);
  transform: translateY(-4px); }

/* ==========================================================================
   SECTION 1 GLASS — his call: the Section 2 buttons should read like the
   Section 1 accordions. Recipe lifted verbatim from theme-teal.css
   (.theme-teal .aaccordion .at-title): flat 0.22 fill, blur 16 / saturate 1.25,
   0.35 border, and the inset top highlight over a 0 4px 14px lift.
   The Section 2 additions stay: the internal TOP shadow inside the button
   (.panel::before) and the recessed right gutter.
   ========================================================================== */
.s2slot .panel,
.s2artist,
.s2price,
.s2cc {
  background: rgba(235, 248, 249, .22);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
              0 4px 14px rgba(2, 24, 38, .25);
}
.s2slot .panel::after { background: rgba(255,255,255,.20); }
.s2slot .dd { background: transparent; }   /* one continuous panel — never a second fill */
.s2slot .gutR { background: linear-gradient(90deg, rgba(2,26,40,.26), rgba(2,26,40,.13));
  box-shadow: inset 2px 0 5px rgba(0,10,18,.40); }
/* the inverted Consultation card keeps its own field — it is the one accent */
.s2slot.invert .panel { background: #056981;
  border-color: rgba(161,231,232,.38);
  box-shadow: inset 0 1px 0 rgba(161,231,232,.20), 0 4px 14px rgba(2,24,38,.28); }

/* ==========================================================================
   SPAN TREATMENTS restated at full ancestor depth.
   The blanket reset above (needed to beat style.css's navy `.details span`)
   also out-specifies component rules like `.s2slot.s2acc .hdT`, which is how
   the pricing accordion headers ended up black/400. Anything that is a <span>
   inside the Section 2 column must set its own type HERE, not upstream.
   ========================================================================== */
.s2.theme-teal .banner .banner-detail-container .details .s2slot.s2acc .hdT {
  color: #E7F4F4; font-family: 'Raleway', sans-serif; font-weight: 700;
  font-size: clamp(12.5px, .95vw, 15.5px); line-height: 1.2; letter-spacing: .03em;
  text-shadow: 0 1px 1px rgba(2,44,68,.55); }
.s2.theme-teal .banner .banner-detail-container .details .s2slot.s2acc:hover .hdT,
.s2.theme-teal .banner .banner-detail-container .details .s2slot.s2acc.open .hdT {
  color: #A2E7E8; }
.s2.theme-teal .banner .banner-detail-container .details .s2slot .ddIn p .ex {
  display: block; color: #DCEFEF; font-weight: 600; margin-top: 4px;
  font-size: clamp(11.5px, .86vw, 13.5px); }
.s2.theme-teal .banner .banner-detail-container .details .s2slot.invert .ddIn p .ex {
  color: #BFE9EA; }
.s2.theme-teal .banner .banner-detail-container .details .ladder span {
  color: #C1D7D7; font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: clamp(11.5px, .86vw, 14px); }

/* page 25: his read — the intro paragraph wants a little more size */
.s2.services-pricing-page.theme-teal .banner .banner-detail-container .details .details-disc,
.s2.services-pricing-page.theme-teal .banner .banner-detail-container .details .details-disc p {
  font-size: clamp(13px, 1vw, 16.5px); line-height: 1.38; }

/* air below the script, and below the intro paragraph — restated at full
   ancestor depth because the title-block rules above out-specify `.s2 x` */
.s2.theme-teal .banner .banner-detail-container .details .our-mission-img {
  margin-bottom: clamp(14px, 2.2vh, 26px); }
.s2.theme-teal .banner .banner-detail-container .details .details-disc {
  max-width: 94%; margin: 0 auto clamp(16px, 2.5vh, 28px); }

} /* end desktop */

/* --- short-viewport tier (his laptop runs ~830px of inner height) --------- */
@media (min-width: 992px) and (max-height: 870px) {
  .s2.theme-teal .banner .banner-detail-container .brand-logo { margin-bottom: 1.35vw; }
  .s2.theme-teal .banner .banner-detail-container .brand-logo *,
  .s2.theme-teal .banner .banner-detail-container .brand-logo img { width: clamp(208px, 16.2vw, 268px); }
  .s2.theme-teal .banner .banner-detail-container .menu-log *,
  .s2.theme-teal .banner .banner-detail-container .menu-log img { height: clamp(20px, 1.82vw, 29px); }
  .s2.theme-teal .banner .banner-detail-container .details .our-mission-img { margin-top: 2px; }
  .s2.theme-teal .banner .banner-detail-container .details .our-mission-img *,
  .s2.theme-teal .banner .banner-detail-container .details .our-mission-img img { height: clamp(25px, 2.35vw, 35px); }
  .s2 .content-scroll { margin-top: 7px; }
  .s2 .details-disc { margin-bottom: 5px; }
  .s2slot .svcRow { padding: clamp(4.5px, .66vh, 7.5px) 13px; }
  .s2slot { margin-bottom: 1px; }
  .s2artist .abar { padding: 5px 13px; }
  .s2 .aaccordion .s2slot, .s2 .content-scroll-in > .s2slot { margin-bottom: clamp(3px, .5vh, 6px); }
  .s2.theme-teal .banner .banner-detail-container .details .our-mission-img { margin-bottom: clamp(10px, 1.5vh, 18px); }
  .s2.theme-teal .banner .banner-detail-container .details .details-disc { margin-bottom: clamp(11px, 1.7vh, 20px); }
  .s2 .details-disc { margin-bottom: 3px; }
  .s2 .our-mission-img { margin-bottom: clamp(5px,.8vh,10px); }
  .s2slot .ddIn.promoBody { padding: 2px 12px 6px; }
  .s2slot .ddIn.promoBody p { font-size: clamp(10px, .75vw, 12.5px); line-height: 1.22; }
  .s2slot.s2acc .accHd { padding: 7px 13px; }
  .s2 .content-scroll-in { max-width: clamp(288px, 22.4vw, 400px); }
  .s2.services-menu .content-scroll-in { max-width: clamp(330px, 25.6vw, 452px); }
  .s2.theme-teal .banner .banner-detail-container .details .details-disc,
  .s2.theme-teal .banner .banner-detail-container .details .details-disc p {
    font-size: clamp(11.5px, .84vw, 14.5px); line-height: 1.3; }
}


/* ============================================================================
   MOBILE — inside #fhaMobile on the five s2 pages
   ==========================================================================*/
@media (max-width: 991px) {

/* rolling header handled by js; the rolled title art */
/* ---- rolling header: Fairchild Hair Artistry <-> Service CATALOG ---------
   Two faces stacked inside the EXISTING .scriptWrap, which is already
   overflow:hidden and already carries the entrance/settle animation. The column
   is exactly two faces tall, so -50% is always one face regardless of whether
   the header is at its 70px entrance size or its 62px settled size.
     rest    translateY(-50%)  -> Fairchild Hair Artistry (2nd face)
     rolled  translateY(0)     -> Service CATALOG rolls DOWN in from the top
   The ambigram (#mark) and the slogan are separate fixed elements and are NOT
   touched by this — they stay exactly where they are. */
#fhaMobile .scriptWrap .rollCol { transform: translateY(-50%);
  transition: transform .72s cubic-bezier(.3,.8,.25,1); will-change: transform; }
#fhaMobile .scriptWrap.rolled .rollCol { transform: translateY(0); }
#fhaMobile .scriptWrap .rollCol img.script { margin-bottom: 0; }
/* Sized by HEIGHT, same as the Fairchild lockup: measured cap bands are 27.2%
   of the Fairchild art and 26.5% of the Service CATALOG art, so at a common
   62px both caps land at ~17px — they already match.
   Horizontal anchor: the two CAPS WORDS are centred on each other (HAIR
   ARTISTRY centre 218.8px, CATALOG centre M+102.9 -> M = 116px), so the word
   holds its place through the roll instead of growing out from a shared left
   edge. Aligning their LEFT edges instead would push the Service flourish to
   x=80 and collide with the ambigram, which sits at 22..87. */
#fhaMobile .scriptWrap img.secFace { height: 70px; width: auto;
  margin-left: calc(50% - 117.05px); }
#fhaMobile.settled .scriptWrap img.secFace { height: 62px; margin-left: 116px; }
@media (prefers-reduced-motion: reduce) {
  #fhaMobile .scriptWrap .rollCol { transition: none; }
}

/* section strip under the page title */
/* --- mobile title stack: page title + script subtitle, both size-capped --- */
#fhaMobile .ptitle { display: block; width: auto; height: 26px; max-width: 76%;
  margin: 2px auto 4px; }
#fhaMobile .psub { display: block; width: auto; height: 27px; max-width: 90%;
  object-fit: contain; margin: 0 auto 12px;
  filter: drop-shadow(0 2px 1px rgba(2,44,68,.55)); }
#fhaMobile.pg-promotions .ptitle { height: 24px; }
#fhaMobile .s2strip { font-size: 9px; gap: 6px; flex-wrap: nowrap; margin-bottom: 8px;
  letter-spacing: .05em; white-space: nowrap; }
#fhaMobile.s2m .colInner .cc { margin: 0 auto; }

/* text accordion (pricing FAQ) — mobile */
#fhaMobile .s2slot.s2acc { margin-bottom: 6px; }
#fhaMobile .s2slot.s2acc .panel { width: 100%; }
#fhaMobile .s2slot.s2acc .accHd { display: flex; align-items: center;
  justify-content: flex-start; gap: 10px; padding: 9px 12px; }
#fhaMobile .s2slot.s2acc .arw { order: -1; }
#fhaMobile .s2slot.s2acc .hdT { color: #E7F4F4; font-family: 'Raleway', sans-serif;
  font-weight: 700; font-size: 12.5px; line-height: 1.2; letter-spacing: .03em;
  text-shadow: 0 1px 1px rgba(2,44,68,.55); }
#fhaMobile .s2slot.s2acc .arw { width: 12px; height: 14px; flex-shrink: 0;
  background: url(../images/thumb/play-icon-silver.png) center/contain no-repeat;
  transition: transform .3s ease; }
#fhaMobile .s2slot.s2acc.open .arw { transform: rotate(90deg);
  background-image: url(../images/thumb/play-icon-aqua.png); }
#fhaMobile .s2slot.s2acc .dd { max-height: 0; overflow: hidden;
  transition: max-height .42s cubic-bezier(.3,.8,.25,1); }
#fhaMobile .s2slot.s2acc.open .dd { max-height: 900px; }
#fhaMobile .s2slot.s2acc .ddIn { padding: 2px 14px 12px; }
#fhaMobile .s2slot.s2acc .ddIn h4 { color: #E7F4F4; font-family: 'Raleway', sans-serif;
  font-weight: 700; font-style: italic; font-size: 12px; text-align: center;
  margin: 8px 0 3px; text-shadow: 0 1px 1px rgba(2,44,68,.55); }
#fhaMobile .s2slot.s2acc .ddIn h4:first-child { margin-top: 0; }
#fhaMobile .s2slot.s2acc .ddIn p { color: #C1D7D7; font-weight: 600; text-align: center;
  font-size: 12px; line-height: 1.38; margin: 0 0 4px;
  text-shadow: 0 1px .5px rgba(2,44,68,.45); }
#fhaMobile .s2slot.s2acc .ladder { max-width: 240px; margin: 2px auto 6px; }
#fhaMobile .s2slot.s2acc .ladder div { display: flex; justify-content: space-between;
  align-items: baseline; color: #C1D7D7; font-family: 'Raleway', sans-serif;
  font-weight: 600; font-size: 12px; line-height: 1.5; }
#fhaMobile .s2slot.s2acc .ladder b { color: #CBEAEA; font-weight: 800; }
#fhaMobile .s2slot.s2acc .ladder i { flex: 1; margin: 0 8px;
  border-bottom: 1px dotted rgba(110,160,164,.55); transform: translateY(-4px); }

#fhaMobile span { font-size: inherit; }
#fhaMobile .s2strip { display: flex; justify-content: center; gap: 10px;
  margin: 2px 0 10px; flex-wrap: wrap; }
#fhaMobile .s2strip a { color: #C1D7D7; text-decoration: none;
  font-family: 'Playfair Display', serif; font-variant: small-caps;
  font-size: 10px; letter-spacing: .05em; white-space: nowrap;
  text-shadow: 0 1px .5px rgba(2,44,68,.5); }
#fhaMobile .s2strip a.on { color: #A2E7E8; }

/* slot machinery (shared classes with desktop, mobile scale) */
#fhaMobile .s2slot { position: relative; margin-bottom: 8px; border-radius: 2px; overflow: hidden; }
#fhaMobile .s2slot .gutR { position: absolute; top: 0; right: 0; bottom: 0; width: 13%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, rgba(2,26,40,.30), rgba(2,26,40,.17));
  box-shadow: inset 2px 0 5px rgba(0,10,18,.45); border-radius: 0 2px 2px 0; }
#fhaMobile .s2slot .gutR .swipeCue { display: block; opacity: .38; }
#fhaMobile .s2slot .gutR .swipeCue svg { display: block; width: 17px; height: 16px; overflow: visible; }
#fhaMobile .s2slot .gutR .swipeCue path { fill: none; stroke: #DCF1F1; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
#fhaMobile .s2slot .gutR .swipeCue path:nth-child(1) { opacity: .30; }
#fhaMobile .s2slot .gutR .swipeCue path:nth-child(2) { opacity: .55; }
#fhaMobile .s2slot .gutR .swipeCue path:nth-child(3) { opacity: .85; }
#fhaMobile .s2slot.dragging .gutR .swipeCue path { stroke: #A2E7E8; }
#fhaMobile .s2slot .panel { position: relative; width: 87%;
  border-radius: 2px; overflow: hidden; cursor: grab; touch-action: pan-y;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(92deg, rgba(235,248,249,.16), rgba(190,230,230,.24));
  box-shadow: 0 2px 8px rgba(2,24,38,.22);
  transition: transform .42s cubic-bezier(.25,1.1,.4,1), box-shadow .18s ease, filter .18s ease; }
#fhaMobile .s2slot .panel::before { content:''; position: absolute; left: 0; right: 0; top: 0;
  height: 18px; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, rgba(2,24,38,.30), rgba(2,24,38,.11) 48%, rgba(2,24,38,0)); }
#fhaMobile .s2slot .panel.press { box-shadow: inset 0 3px 9px rgba(0,10,18,.5); filter: brightness(.955); }
#fhaMobile .s2slot .panel.nosnap { transition: none; }
#fhaMobile .s2slot .svcRow { display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; }
#fhaMobile .s2slot .svcName { color: #E7F4F4; font-family: 'Raleway', sans-serif;
  font-weight: 700; font-size: 13.5px; letter-spacing: .03em; line-height: 1.25;
  text-shadow: 0 1px .5px rgba(2,44,68,.55); }
#fhaMobile .s2slot .svcName .lead { font-weight: 500; text-transform: lowercase; }
#fhaMobile .s2slot .svcSub { color: #9FCBCE; font-weight: 600; font-style: italic;
  font-size: 11px; margin-top: 2px; }
#fhaMobile .s2slot .svcPrice { color: #CBEAEA; font-weight: 800; font-size: 14px;
  white-space: nowrap; margin-left: 10px; text-shadow: 0 1px .5px rgba(2,44,68,.5); }
#fhaMobile #fhaMobile .s2slot.noGut .panel { width: 100%; }
#fhaMobile .s2slot.noGut .gutR { display: none; }
#fhaMobile .s2slot .artBtn { position: relative; display: block; }
#fhaMobile .s2slot .artBtn img { display: block; width: 100%; }
#fhaMobile .s2slot .artBtn img.ov { position: absolute; left: 0; top: 0; }
#fhaMobile .s2slot .accArw { position: absolute; left: 1.09%; top: 0; width: 10%;
  height: 100%; z-index: 7; display: flex; align-items: center; justify-content: center; }
#fhaMobile .s2slot .accArw i { width: 12px; height: 14px;
  background: url(../images/thumb/play-icon-silver.png) center/contain no-repeat;
  transition: transform .3s ease; filter: drop-shadow(0 1px 1px rgba(2,44,68,.45)); }
#fhaMobile .s2slot.open .accArw i { transform: rotate(90deg);
  background-image: url(../images/thumb/play-icon-aqua.png); }
#fhaMobile .s2slot .dd { max-height: 0; overflow: hidden; position: relative;
  transition: max-height .42s cubic-bezier(.3,.8,.25,1); }
#fhaMobile .s2slot.open .dd { max-height: 480px; }
#fhaMobile .s2slot .ddIn { position: relative; padding: 12px 14px 14px; }
#fhaMobile .s2slot .ddTail { position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none; z-index: 1; }
#fhaMobile .s2slot .ddTail img { display: block; width: 100%; }
#fhaMobile .s2slot .artBtn img.capNm, #fhaMobile .s2slot .artBtn img.capNmHi {
  position: absolute; left: 0; top: 0;
  filter: drop-shadow(0 1px 1px rgba(2,44,68,.6)); }
#fhaMobile .s2slot .artBtn img.capNmHi { opacity: 0; transition: opacity .25s ease; }
#fhaMobile .s2slot.open .artBtn img.capNmHi { opacity: 1; }
#fhaMobile .s2slot .ddIn p { position: relative; z-index: 2; margin: 0; text-align: center;
  color: #F0FAFA; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 13px;
  line-height: 1.35; text-shadow: 0 1px .5px rgba(2,44,68,.6); }
#fhaMobile .s2slot .ddIn p .ex { display: block; font-weight: 600; color: #DCEFEF;
  margin-top: 5px; font-size: 12.5px; }

/* artist group (mobile) */
#fhaMobile .s2artist { position: relative; border-radius: 3px; margin-bottom: 8px;
  background: rgba(235,248,249,.20); border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 3px 10px rgba(2,24,38,.22), inset 0 1px 0 rgba(255,255,255,.24);
  overflow: hidden; cursor: pointer; }
#fhaMobile .s2artist::before { content:''; position: absolute; left: 0; right: 0; top: 0;
  height: 16px; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,24,38,.30), rgba(2,24,38,.11) 48%, rgba(2,24,38,0)); }
#fhaMobile .s2artist .abar { display: flex; align-items: center;
  justify-content: flex-start; gap: 11px; padding: 8px 14px; }
#fhaMobile .s2artist .arw { order: -1; }
#fhaMobile .s2artist .nm { color: #EAF7F7; font-family: 'Playfair Display', serif;
  font-weight: 600; font-size: 13.5px; letter-spacing: .07em; line-height: 1.25;
  text-shadow: 0 1px .5px rgba(2,30,46,.6); }
#fhaMobile .s2artist .rl { color: #A9CFD2; font-family: 'Raleway', sans-serif;
  font-weight: 600; font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  margin-top: 1px; }
#fhaMobile .s2artist .arw { width: 12px; height: 14px; flex-shrink: 0;
  background: url(../images/thumb/play-icon-silver.png) center/contain no-repeat;
  transition: transform .3s ease; }
#fhaMobile .s2group.open .s2artist .arw { transform: rotate(90deg);
  background-image: url(../images/thumb/play-icon-aqua.png); }
#fhaMobile .s2group .s2list { max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.3,.8,.25,1); }
#fhaMobile .s2group.open .s2list { max-height: 1600px; }
#fhaMobile .s2group .legend { color: #8FC3C6; font-family: 'Raleway', sans-serif;
  font-weight: 600; font-style: italic; font-size: 10.5px; text-align: center;
  margin: 2px 0 8px; }

/* connect strip (mobile: horizontal, inside the open group) */
#fhaMobile .s2connect { position: relative; display: flex; align-items: center;
  justify-content: space-evenly; gap: 4px; padding: 8px 8px 8px 8px; margin: 2px 0 10px;
  border-radius: 3px; overflow: hidden;
  background: rgba(235,248,249,.20);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.32); box-shadow: 0 4px 18px rgba(2,24,38,.20); }
#fhaMobile .s2connect::before { content:''; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; z-index: 3; background: var(--id, #A2E7E8); }
#fhaMobile .s2connect::after { content:''; position: absolute; left: 0; right: 0; top: 3px;
  height: 14px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--idFade, rgba(162,231,232,.3)), transparent); }
#fhaMobile .s2connect a { position: relative; z-index: 4; display: block;
  filter: drop-shadow(0 1.5px 1px rgba(2,44,68,.4)); }
#fhaMobile .s2connect img { width: 25px; height: 25px; object-fit: contain; display: block; }

/* pricing panel (mobile) */
#fhaMobile .s2price { border-radius: 2px; padding: 12px 14px; position: relative; overflow: hidden;
  background: linear-gradient(92deg, rgba(235,248,249,.16), rgba(190,230,230,.24));
  border: 1px solid rgba(255,255,255,.28); box-shadow: 0 2px 8px rgba(2,24,38,.22); }
#fhaMobile .s2price::before { content:''; position: absolute; left: 0; right: 0; top: 0;
  height: 16px; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,24,38,.30), rgba(2,24,38,.11) 48%, rgba(2,24,38,0)); }
#fhaMobile .s2price h4 { color: #E7F4F4; font-family: 'Raleway', sans-serif; font-weight: 700;
  font-style: italic; font-size: 13px; text-align: center; margin: 10px 0 3px;
  text-shadow: 0 1px .5px rgba(2,44,68,.55); }
#fhaMobile .s2price h4:first-child { margin-top: 0; }
#fhaMobile .s2price p { color: #C1D7D7; font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 12.5px; line-height: 1.3; text-align: center; margin: 0 0 3px;
  text-shadow: 0 1px .5px rgba(2,44,68,.45); text-wrap: pretty; }
#fhaMobile .s2price .ladder { max-width: 250px; margin: 2px auto 4px; }
#fhaMobile .s2price .ladder div { display: flex; justify-content: space-between;
  align-items: baseline; color: #C1D7D7; font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 12.5px; line-height: 1.5; text-shadow: 0 1px .5px rgba(2,44,68,.45); }
#fhaMobile .s2price .ladder b { color: #CBEAEA; font-weight: 800; }
#fhaMobile .s2price .ladder i { flex: 1; margin: 0 7px;
  border-bottom: 1px dotted rgba(110,160,164,.55); transform: translateY(-3px); }

/* kebab identity switcher (footer) */
/* NOTE: mobile-home.css pins .qbar with position:fixed; bottom:… — do NOT set
   position:relative here or the sticky footer detaches and flies to the top.
   position:fixed already establishes the containing block .idRail needs. */
#fhaMobile .qbar { overflow: visible; }
#fhaMobile .qbar .idRail { position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--id, #A2E7E8);
  transition: background .3s ease; }
#fhaMobile .kebab { display: flex; flex-direction: column; gap: 4px; padding: 4px 7px;
  cursor: pointer; }
#fhaMobile .kebab i { display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--id, #A2E7E8); box-shadow: 0 1px 1px rgba(0,10,18,.45);
  transition: background .3s ease; }
#fhaMobile .idFly { position: fixed; right: 14px;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 138px); z-index: 62;
  padding: 9px; border-radius: 3px; display: flex; flex-direction: column; gap: 7px;
  background: rgba(235,248,249,.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.35); box-shadow: 0 6px 22px rgba(2,24,38,.38);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.3,.8,.25,1); }
#fhaMobile .idFly.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
#fhaMobile .idFly button { display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 9px; border-radius: 2px; border: none; background: transparent;
  font-family: 'Playfair Display', serif; font-variant: small-caps; letter-spacing: .09em;
  font-size: 14px; color: #EAF7F7; text-shadow: 0 1px .5px rgba(2,30,46,.6);
  white-space: nowrap; cursor: pointer; }
#fhaMobile .idFly button .dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,10,18,.5), inset 0 1px 0 rgba(255,255,255,.35); }
#fhaMobile .idFly button.on { background: rgba(162,231,232,.20);
  border: 1px solid rgba(162,231,232,.5); padding: 6px 13px 6px 8px; color: #A2E7E8; }

} /* end mobile */

/* deepest tier — 1366x768 class laptops */
@media (min-width: 992px) and (max-height: 800px) {
  .s2slot .svcRow { padding: 4px 12px; }
  .s2artist .abar { padding: 4px 12px; }
  .s2group .legend { margin: 1px 0 3px; }
  .s2 .aaccordion .s2slot, .s2 .content-scroll-in > .s2slot { margin-bottom: clamp(3px, .45vh, 5px); }
  .s2.theme-teal .banner .banner-detail-container .details .our-mission-img { margin-bottom: clamp(8px, 1.2vh, 14px); }
  .s2.theme-teal .banner .banner-detail-container .details .details-disc { margin-bottom: clamp(9px, 1.4vh, 16px); }
  .s2 .details-disc { margin-bottom: clamp(6px,.95vh,10px); }
  .s2 .our-mission-img { margin-bottom: clamp(6px,.95vh,12px); }
  .s2 .content-scroll { margin-top: 4px; }
  .s2.theme-teal .banner .banner-detail-container .details .our-mission-img { margin-top: 0; }
  .s2 .content-scroll-in { max-width: clamp(288px, 22.4vw, 396px); }
  .s2.services-menu .content-scroll-in { max-width: clamp(330px, 25.6vw, 452px); }
  .s2slot .ddIn.promoBody { padding: 2px 12px 6px; }
  .s2slot .ddIn.promoBody p { font-size: clamp(10px, .74vw, 12.5px); line-height: 1.2; }
  .s2 .content-scroll-in { max-width: clamp(280px, 21.6vw, 384px); }
  .s2 .details-disc { max-width: 94%; }
  .s2.theme-teal .banner .banner-detail-container .details .details-disc,
  .s2.theme-teal .banner .banner-detail-container .details .details-disc p { font-size: clamp(10.5px, .78vw, 13px); line-height: 1.26; }
}

/* --- the Consultation card: his navy inversion, used AS-IS --------------- */
/* His consult.png is already the finished inverted design (navy field, aqua
   Coldiac caps, pale Burgues script) — it is not unmixed or recolored. The
   panel follows it onto #056981 so the card reads as one piece. The GUTTER and the
   accordion arrow stay IDENTICAL to the other five cards — his call, round 8. */
.s2slot.invert .panel { background: #056981; border-color: rgba(161,231,232,.38); }
.s2slot.invert .panel::before {
  background: linear-gradient(180deg, rgba(0,10,18,.34), rgba(0,10,18,.13) 48%, rgba(0,10,18,0)); }
.s2slot.invert .panel::after { background: rgba(161,231,232,.30); }
.s2slot.invert .dd { background: #056981; }
.s2slot.invert .ddIn p { color: #E7F7F7; }
.s2slot.invert .ddIn p .ex { color: #BFE9EA; }
#fhaMobile .s2slot.invert .panel { background: #056981; border-color: rgba(161,231,232,.38); }
#fhaMobile .s2slot.invert .dd { background: #056981; }
#fhaMobile .s2slot.invert .ddIn p { color: #E7F7F7; }
#fhaMobile .s2slot.invert .ddIn p .ex { color: #BFE9EA; }

#fhaMobile .s2slot .panel,
#fhaMobile .s2artist,
#fhaMobile .s2price,
#fhaMobile .s2cc {
  background: rgba(235, 248, 249, .22);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
              0 4px 14px rgba(2, 24, 38, .25);
}
#fhaMobile .s2slot .dd { background: transparent; }   /* one continuous panel — never a second fill */
#fhaMobile .s2artist .abar > div:not(.arw) { flex: 1; min-width: 0; text-align: right; }
#fhaMobile .s2slot.invert .panel { background: #056981;
  border-color: rgba(161,231,232,.38);
  box-shadow: inset 0 1px 0 rgba(161,231,232,.20), 0 4px 14px rgba(2,24,38,.28); }

/* mobile intro copy: mobile-home.css sets .mis at 1.6, which eats the pane on
   these content-dense pages. Section 2 runs it tighter. */
#fhaMobile.s2m .colInner p.mis { line-height: 1.34; font-size: 14px; }

/* his call: the artist name reads on ONE line on mobile — size it to fit and
   never wrap; the role sits beneath it as before */
#fhaMobile .s2artist .nm { white-space: nowrap; font-size: clamp(11px, 3.3vw, 13.5px);
  letter-spacing: .05em; }
#fhaMobile .s2artist .rl { white-space: nowrap; }

/* page 25 mobile: give the accordions the same breathing room they have on
   desktop — the mobile pane had the paragraph running straight into them */
#fhaMobile.s2m .colInner p.mis { margin-bottom: 20px; }
#fhaMobile .s2slot.s2acc:first-of-type { margin-top: 4px; }

/* his phrase-break law: a segment wrapped in .seg never breaks, so the closing
   words of a paragraph land together on the last line */
.s2 .details-disc .seg, #fhaMobile .colInner p.mis .seg { white-space: nowrap; }

/* page 24 mobile: his call — tighten the run from the lower drop-down copy to
   the CTA so both promotions sit on screen without a scroll. Desktop is
   unchanged; this is the mobile pane only. */
#fhaMobile.pg-promotions .colInner { padding-bottom: 8px; }
#fhaMobile .s2slot .ddIn.promoBody { padding: 8px 14px 8px; }
#fhaMobile .s2slot .ddIn.promoBody p { line-height: 1.3; }
#fhaMobile.pg-promotions .s2slot { margin-bottom: 5px; }