/* ═══════════════════════════════════════════════════════════
   SALERINGO — scenes.css
   Rich visual layer: atmospheric backgrounds, illustrated scene
   frames, glass/gradient cards, proof & conversion components.
   Load AFTER site.css.
   ═══════════════════════════════════════════════════════════ */

/* ── ATMOSPHERIC BACKGROUNDS ────────────────────────────── */

/* aurora mesh — cinematic hero ground */
.bg-aurora{position:relative;isolation:isolate;background:#F6F4EE;}
.bg-aurora::before{content:"";position:absolute;inset:-10% -5%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 22%, rgba(11,120,120,.34), transparent 62%),
    radial-gradient(34% 44% at 82% 12%, rgba(74,124,255,.28), transparent 60%),
    radial-gradient(46% 52% at 62% 88%, rgba(11,120,120,.20), transparent 64%),
    radial-gradient(30% 38% at 8% 82%, rgba(122,92,199,.22), transparent 60%);
  filter:blur(46px);opacity:.9;}
.bg-aurora::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,.86) 100%);}

/* warm dusk — the after-hours beat. One per page, on the section where the
   page names the problem: "The 2:47 AM problem", "Night inquiries were dying
   in the inbox", "The math of one night call". Not a general dark ground. */
.bg-dusk{position:relative;isolation:isolate;background:#FFFFFF;}
.bg-dusk::before{content:"";position:absolute;inset:-10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 50% at 78% 16%, rgba(255,178,104,.38), transparent 62%),
    radial-gradient(38% 46% at 20% 30%, rgba(206,104,132,.30), transparent 62%),
    radial-gradient(52% 56% at 50% 96%, rgba(11,120,120,.28), transparent 66%);
  filter:blur(52px);}
/* This wash used to end at 90% opaque, which is a section that fades to black
   at the foot: the warm dusk glow above it was buried, the photograph inside
   it lost its subject, and the two comparison columns sat in a hole. A night
   scene needs a LIT night, not an unlit page - the ground stays deep, and the
   glow it was hiding is allowed through. */
.bg-dusk:not(.photohero):not(:has(.bgimg))::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.52));}
/* over a photograph the same wash only needs to protect the copy at the foot */
.bg-dusk.photohero::after,.bg-dusk:has(.bgimg)::after{content:"";position:absolute;inset:0;
  z-index:-1;background:linear-gradient(180deg, rgba(255,255,255,.10) 0%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 100%);}

/* cool clinical — clinics / dental / trust */
.bg-clinical{position:relative;isolation:isolate;background:#F4F8FB;color:var(--l-ink);}
.bg-clinical::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 46% at 84% 6%, rgba(11,120,120,.16), transparent 62%),
    radial-gradient(36% 42% at 10% 18%, rgba(44,99,184,.13), transparent 60%);}
.bg-clinical::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.85;
  /* was .05 x .5 = 0.025 effective alpha - graph paper nobody could see */
  background-image:linear-gradient(rgba(20,26,31,.09) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(20,26,31,.09) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent);
          mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent);}

/* paper cream — editorial / legal / about.
   isolate + z-index:-1 keeps the wash behind the section's own content, the way
   bg-grid/bg-spot/bg-clinical already do — without it the absolutely-positioned
   ::before paints over static in-flow text. */
.bg-paper{position:relative;isolation:isolate;background:#FBF9F5;color:var(--l-ink);}
.bg-paper::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(60% 50% at 50% 0%, rgba(11,120,120,.10), transparent 70%);}

/* grid field — technical sections */
.bg-grid{position:relative;isolation:isolate;}
.bg-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  /* was .055 x .55 = 0.030 effective alpha, 1.02:1 - invisible on 24 pages */
  background-image:linear-gradient(rgba(20,26,31,.13) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(20,26,31,.13) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(76% 66% at 50% 40%, #000, transparent);
          mask-image:radial-gradient(76% 66% at 50% 40%, #000, transparent);}

/* spotlight — focused CTA bands */
.bg-spot{position:relative;isolation:isolate;background:#FFFFFF;}
.bg-spot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 120% at 50% -20%, rgba(11,120,120,.30), transparent 60%);}

/* film grain — sits above any background */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ── SCENE FRAMES ───────────────────────────────────────── */
.scene-frame{position:relative;border-radius:26px;overflow:hidden;
  border:1px solid rgba(20,26,31,.13);
  box-shadow:0 1px 0 rgba(20,26,31,.13) inset, 0 50px 110px rgba(0,0,0,.5);}
.scene-frame svg{display:block;width:100%;height:auto;}
.scene-frame.light{border-color:var(--l-hair);box-shadow:0 30px 70px rgba(20,26,31,.14);}
.scene-frame .caption{position:absolute;left:20px;bottom:18px;right:20px;z-index:3;
  font-size:var(--fs-xs);font-weight:600;color:rgba(20,26,31,.86);text-shadow:0 2px 12px rgba(0,0,0,.6);}
/* floating UI chip that sits over a scene */
.scene-overlay{position:absolute;z-index:4;border-radius:14px;padding:14px 16px;
  background:rgba(20,26,31,.93);backdrop-filter:blur(14px);
  border:1px solid rgba(20,26,31,.208);box-shadow:0 20px 50px rgba(0,0,0,.5);}
.scene-overlay b{display:block;font-size:var(--fs-xs);color:#141A1F;}
.scene-overlay span{display:block;font-size:var(--fs-2xs);color:var(--tx2);margin-top:3px;font-weight:600;}
.scene-overlay.tl{top:18px;left:18px;} .scene-overlay.tr{top:18px;right:18px;}
.scene-overlay.bl{bottom:18px;left:18px;} .scene-overlay.br{bottom:18px;right:18px;}

/* ── GLASS & GRADIENT CARDS ─────────────────────────────── */
.glass{background:rgba(20,26,31,.072);border:1px solid rgba(20,26,31,.169);
  border-radius:14px;backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(20,26,31,.13) inset, 0 28px 70px rgba(0,0,0,.42);}
.gradborder{position:relative;border-radius:14px;padding:1px;
  background:linear-gradient(140deg, rgba(11,120,120,.7), rgba(44,99,184,.35) 45%, rgba(20,26,31,.078) 75%);}
.gradborder > *{border-radius:14px;background:#FFFFFF;height:100%;}
.gradborder.light > *{background:#fff;}
.tiltcard{transform:perspective(1200px) rotateY(-7deg) rotateX(3deg);transform-style:preserve-3d;}
.tiltcard.rev{transform:perspective(1200px) rotateY(7deg) rotateX(3deg);}
@media (max-width:900px){.tiltcard,.tiltcard.rev{transform:none;}}

/* Display emphasis, formerly a gradient clipped into the text. A gradient
   headline is a machine default — decoration nobody chose, and it degrades
   badly at small sizes, in screenshots, and for low-vision readers. One solid
   accent carries the same emphasis and survives all three. */
.gradtext{color:#141A1F;}
.gradtext.warm{color:#141A1F;}

/* ── PROOF & CONVERSION ─────────────────────────────────── */

/* logo wall — honest placeholders until real logos exist */
.logowall{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;}
.logoslot{display:inline-flex;align-items:center;gap:10px;border:1px dashed rgba(20,26,31,.208);
  border-radius:8px;padding:14px 20px;color:var(--tx3);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;}
.logoslot i{width:18px;height:18px;border-radius:5px;background:rgba(20,26,31,.13);font-style:normal;}
.logoslot.light{border-color:#DDE3EB;color:#6F767F;}
.logoslot.light i{background:#EEF2F6;}

/* before / after */
.baGrid{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:stretch;}
.baCol{border-radius:14px;padding:26px;}
.baCol.before{background:rgba(192,57,43,.12);border:1px solid rgba(192,57,43,.38);}
/* the "after" column is the relief in this argument, so it is the lit one:
   a warmer tint, a brighter edge and a soft glow under it */
.baCol.after{background:linear-gradient(165deg,rgba(11,120,120,.20),rgba(11,120,120,.09));
  border:1px solid rgba(11,120,120,.46);box-shadow:0 22px 60px -34px rgba(11,120,120,.55);}.baCol h4,.baCol .hl4{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;}.baCol.before h4,.baCol.before .hl4{color:#E58C81;}.baCol.after h4,.baCol.after .hl4{color:var(--teal);}
.baCol ul{list-style:none;display:grid;gap:12px;}
.baCol li{font-size:var(--fs-xs);line-height:1.65;color:var(--tx);font-weight:500;display:flex;gap:10px;}
.baCol li i{flex:none;font-style:normal;font-weight:800;}
.baCol.before li i{color:#E58C81;} .baCol.after li i{color:var(--teal);}
.baArrow{align-self:center;color:var(--tx3);font-size:var(--fs-h3);text-align:center;}
@media (max-width:900px){.baGrid{grid-template-columns:1fr;}.baArrow{transform:rotate(90deg);}}

/* ROI calculator shell */
.calcshell{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:26px;overflow:hidden;
  border:1px solid rgba(20,26,31,.156);}
.calcin{padding:34px;background:rgba(20,26,31,.046);}
.calcout{padding:34px;background:linear-gradient(160deg, rgba(11,120,120,.18), rgba(255,255,255,.9));}
.calcrow{margin-bottom:22px;}
.calcrow label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--tx2);margin-bottom:10px;letter-spacing:.02em;}
.calcrow .val{float:right;color:var(--teal);font-family:'Bricolage Grotesque',sans-serif;}
.calcrow input[type=range]{width:100%;accent-color:#0B7878;height:4px;}
.calcout .big{font-family:'Bricolage Grotesque',sans-serif;font-size:var(--fs-h1);font-weight:600;letter-spacing:-.04em;color:#141A1F;line-height:1;}
.calcout .lbl{margin-top:10px;font-size:var(--fs-xs);color:var(--tx2);font-weight:600;}
.calcout .split{margin-top:26px;padding-top:20px;border-top:1px solid rgba(20,26,31,.182);display:grid;gap:12px;}
.calcout .split div{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--tx2);font-weight:500;}
.calcout .split div b{color:#141A1F;}
.calcout .verdict{margin-top:22px;font-size:var(--fs-xs);line-height:1.6;color:var(--teal);font-weight:700;}
@media (max-width:900px){.calcshell{grid-template-columns:1fr;}}

/* risk reversal row */
.riskrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.riskitem{border:1px solid rgba(20,26,31,.13);border-radius:14px;padding:20px;background:rgba(20,26,31,.039);}
.riskitem .ic{font-size:var(--fs-lead);}
.riskitem b{display:block;margin-top:10px;font-size:var(--fs-xs);color:#141A1F;}
.riskitem span{display:block;margin-top:5px;font-size:var(--fs-2xs);color:var(--tx2);line-height:1.6;font-weight:500;}
.riskitem.light{background:#fff;border-color:var(--l-hair);}
.riskitem.light b{color:var(--l-ink);} .riskitem.light span{color:var(--l-mut);}
@media (max-width:900px){.riskrow{grid-template-columns:1fr 1fr;}}

/* alternatives comparison */
.altgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:14px;overflow:hidden;border:1px solid var(--l-hair);}
.altcol{padding:26px 22px;background:#fff;border-right:1px solid var(--l-hair);}
.altcol:last-child{border-right:0;}
.altcol.win{background:linear-gradient(180deg,rgba(11,120,120,.14),rgba(11,120,120,.03));color:#141A1F;}.altcol h4,.altcol .hl4{font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--l-mut);}.altcol.win h4,.altcol.win .hl4{color:var(--teal);}
.altcol .cost{margin-top:12px;font-family:'Bricolage Grotesque',sans-serif;font-size:var(--fs-h2s);
  font-weight:600;letter-spacing:-.03em;color:var(--l-ink);
  /* This is sized for a price, and a price never wraps. A trade that puts a
     phrase here instead — golf's "Your pro's mornings" — ran 58px past a
     237px column inside an overflow:hidden grid, so the end of it was cut
     off. Words wrap; numbers are too short to be affected. */
  overflow-wrap:anywhere;text-wrap:balance;line-height:1.12;}
.altcol.win .cost{color:#141A1F;}
.altcol ul{margin-top:16px;list-style:none;display:grid;gap:10px;}
.altcol li{font-size:var(--fs-xs);line-height:1.55;color:var(--l-mut);display:flex;gap:8px;font-weight:500;}
.altcol.win li{color:#141A1F;}
.altcol li i{flex:none;font-style:normal;font-weight:800;color:#616B75;}
.altcol.win li i{color:var(--teal);}
/* .altgrid responsive folding is defined once, at the bottom of this file. */

/* sticky bottom conversion bar */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:40;transform:translateY(110%);
  transition:transform .6s var(--ease);background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
  border-top:1px solid rgba(20,26,31,.156);padding:14px 0;}
.stickycta.show{transform:none;}

/* Reading downward on a phone tucks the docked bar away; the first upward
   gesture brings it back, and it returns for good at the end of the page.
   The rest of the site never moves it. */
.stickycta.show.tuck{transform:translateY(112%);}
@media (prefers-reduced-motion: reduce){ .stickycta.show.tuck{transform:none;} }
.stickycta .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.stickycta .msg{font-size:var(--fs-xs);color:var(--tx);font-weight:600;}
.stickycta .msg b{color:var(--teal);}
.stickycta .btn{margin-left:auto;}
@media (prefers-reduced-motion: reduce){.stickycta{transition:none;}}

/* section eyebrow rule */
.secrule{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.secrule .line{flex:1;height:1px;background:linear-gradient(90deg, rgba(11,120,120,.5), transparent);}

/* ═══════════════════════════════════════════════════════════
   PHOTOGRAPHY LAYER  (real images — see assets/PHOTOS.md)
   ═══════════════════════════════════════════════════════════ */

/* base image behaviour */
img.ph{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

/* ── full-bleed photo hero ── */
.photohero{position:relative;isolation:isolate;overflow:hidden;min-height:min(88vh,860px);
  display:flex;align-items:center;}
.photohero .bgimg{position:absolute;inset:0;z-index:-3;}
.photohero .bgimg img{width:100%;height:100%;object-fit:cover;
  /* night photography needs lifting or the scrim buries it */
  filter:brightness(1.5) saturate(1.15) contrast(1.04);}
/* readability scrim — dark where the text sits, then get out of the photo's way */
.photohero .scrim{position:absolute;inset:0;z-index:-2;
  /* light, even darkening only — the copy sits in a glass panel, so the
     photograph never has to be buried to stay readable */
  background:
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.30) 26%, rgba(255,255,255,.34) 60%, rgba(255,255,255,.92) 100%);}

/* frosted copy panel that sits on top of a photograph */
.hero-panel{background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(20,26,31,.182);border-radius:28px;padding:44px 46px;
  box-shadow:0 1px 0 rgba(20,26,31,.13) inset, 0 40px 90px rgba(0,0,0,.55);}
@media (max-width:900px){.hero-panel{padding:30px 24px;border-radius:14px;}}
/* brand wash. NOTE: never use mix-blend-mode here — blending against the
   negative-z-index photo inside this stacking context crushes it to black. */
.photohero .tint{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 68% at 18% 42%, rgba(11,120,120,.12), transparent 72%);}
.photohero.center{text-align:center;justify-content:center;}
.photohero.center .scrim{background:
  linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.38) 45%, rgba(255,255,255,.86) 100%);}
.photohero.light .scrim{background:
  linear-gradient(100deg, rgba(252,253,254,.96) 0%, rgba(252,253,254,.86) 42%, rgba(252,253,254,.30) 78%);}
.photohero.light .tint{opacity:.35;
  background:radial-gradient(60% 70% at 85% 30%, rgba(11,120,120,.28), transparent 70%);}

/* ── photo scrim helper for any block ── */
.photo-scrim{position:relative;overflow:hidden;}
.photo-scrim > img.ph{position:absolute;inset:0;z-index:0;}
.photo-scrim::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.92) 100%);}
.photo-scrim > *:not(img){position:relative;z-index:2;}
/* nested inside a hero that already carries a .scrim, this only tops it off */
.photohero .photo-scrim::after{
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.22) 58%,
    rgba(255,255,255,.62) 100%);}

/* ── editorial photo card (industry / story) ── */
.photocard{position:relative;border-radius:14px;overflow:hidden;min-height:340px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  box-shadow:0 30px 70px rgba(3,8,16,.45);}
.photocard > img.ph{position:absolute;inset:0;z-index:0;transition:transform 1.2s var(--ease);}
.photocard:hover > img.ph{transform:scale(1.05);}
.photocard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.60) 58%, rgba(255,255,255,.94) 100%);}
.photocard > *:not(img){position:relative;z-index:2;}
.photocard .kicker{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);}
.photocard h3{margin-top:10px;font-size:var(--fs-h3);font-weight:800;color:#141A1F;letter-spacing:-.015em;}
.photocard p{margin-top:8px;font-size:var(--fs-xs);line-height:1.6;color:rgba(20,26,31,.78);font-weight:500;}
.photocard .stat{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.22);
  font-family:'Bricolage Grotesque',sans-serif;font-size:var(--fs-xs);color:rgba(20,26,31,.9);}
.photocard .stat b{font-size:var(--fs-h3);color:var(--teal);margin-right:8px;letter-spacing:-.02em;}
.photocard.tall{min-height:480px;}

/* ── split photo band ── */
.photosplit{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:520px;}
.photosplit .media{position:relative;overflow:hidden;}
.photosplit .media img.ph{position:absolute;inset:0;}
.photosplit .copy{display:flex;flex-direction:column;justify-content:center;padding:80px 64px;}
.photosplit.rev .media{order:2;}
@media (max-width:900px){
  .photosplit{grid-template-columns:1fr;}
  .photosplit .media{min-height:280px;}
  .photosplit.rev .media{order:0;}
  .photosplit .copy{padding:48px 22px;}
}

/* ── people ── */

/* audience strip — who this is for */
.audgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.audcard{position:relative;border-radius:14px;overflow:hidden;min-height:230px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:18px;}  /* row direction put the label and its description side by side */
.audcard > img.ph{position:absolute;inset:0;z-index:0;
  object-position:50% 32%;}  /* portrait sources in a landscape slot: keep the face */
.audcard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.86));}
.audcard b{position:relative;z-index:2;color:#141A1F;font-size:var(--fs-sm);letter-spacing:-.01em;}
.audcard span{position:relative;z-index:2;display:block;margin-top:3px;font-size:var(--fs-2xs);color:rgba(20,26,31,.72);font-weight:600;}
@media (max-width:900px){.audgrid{grid-template-columns:1fr 1fr;}}

/* photo inside a device frame */
.phoneframe .screen img.ph{position:absolute;inset:0;}


/* caption under photos */
.photocap{margin-top:10px;font-size:var(--fs-2xs);color:var(--tx3);font-weight:600;letter-spacing:.04em;}
.photocap.light{color:#616B75;}

/* ── MOBILE OVERFLOW GUARDS ──────────────────────────────
   Fixed-width decorative and demo blocks were pushing the document
   wider than the viewport on phones (horizontal scroll on every page). */
@media (max-width: 820px){
  .cas-glow{width:100% !important;max-width:100% !important;left:0 !important;transform:none !important;}
  .cas-mid,.cas-side{width:100% !important;max-width:100% !important;}
  .phoneframe{width:100% !important;max-width:290px;margin-left:auto;margin-right:auto;}
  .stickycta{max-width:100vw;left:0;right:0;box-sizing:border-box;}
  .stickycta .wrap{max-width:100%;}
  .msgthread .m{max-width:88%;}
  .stickycta .wrap{flex-direction:column;align-items:stretch;gap:10px;}
  .stickycta .btn{margin-left:0;justify-content:center;}
  .photosplit .copy{padding:44px 20px;}
  .photohero{min-height:auto;padding-bottom:56px;}
  .hero-panel{padding:26px 20px;}
}
/* belt-and-braces: nothing may exceed the viewport width */
html,body{max-width:100%;}
img.ph,.scene-frame,.browserframe,.msgthread,.inboxmock{max-width:100%;}
.stickycta{box-sizing:border-box;}
.stickycta .wrap{box-sizing:border-box;}

/* ═══════════════════════════════════════════════════════════
   PER-PAGE PHOTOGRAPHIC GRADE
   ───────────────────────────────────────────────────────────
   The design audit found 29 unique photos across 207 placements
   (7.1x reuse — one headshot on 13 of 20 pages) and `.duotone`,
   the system's only grading tool, defined but never applied in
   a single HTML file. Grading by page makes a reused frame read
   as a different image, and gives each page its own temperature.
   Set `data-grade` on <body>. The hero photo is left at true
   colour so every page keeps one full-colour moment.
   ═══════════════════════════════════════════════════════════ */
:root{ --gradeH:150deg; --gradeS:1.55; --gradeSep:.30; }
body[data-grade="voice"]  { --gradeH:152deg; --gradeS:1.60; }
body[data-grade="chat"]   { --gradeH:206deg; --gradeS:1.45; }
body[data-grade="msg"]    { --gradeH:118deg; --gradeS:1.50; }
body[data-grade="stays"]  { --gradeH: 26deg; --gradeS:1.30; --gradeSep:.40; }
body[data-grade="clinic"] { --gradeH:186deg; --gradeS:1.25; }
body[data-grade="dental"] { --gradeH:196deg; --gradeS:1.30; }
body[data-grade="venues"] { --gradeH: 12deg; --gradeS:1.35; --gradeSep:.38; }
body[data-grade="home"]   { --gradeH: 34deg; --gradeS:1.40; --gradeSep:.34; }
body[data-grade="trust"]  { --gradeH:170deg; --gradeS:1.10; --gradeSep:.24; }

.photocard > img.ph,
.photosplit .media img.ph,
.photo-scrim > img.ph,
.audcard > img.ph{
  filter:grayscale(1) sepia(var(--gradeSep)) hue-rotate(var(--gradeH))
         saturate(var(--gradeS)) contrast(1.05);
  transition:filter .8s var(--ease),transform 1.2s var(--ease);
}
/* colour returns on hover — the photo "wakes up" under the cursor */
.photocard:hover > img.ph,
.photosplit .media:hover img.ph,
.photo-scrim:hover > img.ph,
.audcard:hover > img.ph{
  filter:grayscale(.12) sepia(.06) saturate(1.14) contrast(1.03);
}
/* .photo-scrim was the one wrapper listed for the grade above but left out of
   the wake-up below, so those photographs stayed fully desaturated at all
   times. On an exposure that is already a night shot that reads as a black
   rectangle, which is exactly what it looked like. */
.photo-scrim > img.ph{filter:grayscale(.55) sepia(calc(var(--gradeSep) * .5))
  hue-rotate(var(--gradeH)) saturate(1.06) contrast(1.04) brightness(1.12);}
@media (prefers-reduced-motion:reduce){
  .photocard > img.ph,.photosplit .media img.ph,.photo-scrim > img.ph,.audcard > img.ph{transition:none;}
}

/* The homepage table gained a fifth column (other AI receptionists). Six other
   pages still run four, so the fifth is opt-in — a global repeat(5,1fr) would
   leave every one of them with an empty cell. */
.altgrid.five{grid-template-columns:repeat(5,1fr);}
@media (max-width:1180px){
  .altgrid{grid-template-columns:repeat(2,1fr);}
  .altgrid.five{grid-template-columns:repeat(3,1fr);}
  .altcol{border-bottom:1px solid var(--l-hair);}
}
@media (max-width:760px){
  .altgrid,.altgrid.five{grid-template-columns:1fr;}
  .altcol{border-right:0;}
}/* ── the four-day timeline on get-started ──────────────────────────────────
   These two class names carried no rules at all,so every h4 and p in the
   block inherited the dark theme's #FFF and rendered white on a #F6F8FA
   section — the whole "first week,honestly" story was invisible. Four equal
   columns that fold to two and then one,with the day marker as the anchor. */
/* Renamed from .tl: that also matched .scene-overlay.tl,the top-left chip
   used on ten pages,and turned each of them into a four-column grid 44px
   below where it belonged. */
.tline,so every .hl4 and p in the
   block inherited the dark theme's #FFF and rendered white on a #F6F8FA
   section — the whole "first week{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
/* Four columns with no breakpoint at all: at 375 each step was 65px wide and
   "We read your business" needed 108, so every card on the timeline was cut
   off mid-word. Two up on a tablet, one on a phone. */
@media (max-width:900px){.tline{grid-template-columns:repeat(2,1fr);gap:18px;}}
@media (max-width:620px){.tline{grid-template-columns:1fr;gap:14px;}}
.tlstep{display:flex;flex-direction:column;background:#fff;border:1px solid var(--l-hair);
  border-radius:14px;padding:24px 22px 22px;box-shadow:0 16px 40px rgba(20,26,31,.05);
  position:relative;overflow:hidden;}
.tlstep::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal-ink),rgba(12,132,132,0));}
.tlstep .d{font-family:'Bricolage Grotesque',sans-serif;font-size:var(--fs-label);font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink);}.tlstep h4,.tlstep .hl4{margin-top:12px;font-size:var(--fs-lead);font-weight:700;letter-spacing:-.02em;
  line-height:1.25;color:var(--l-ink);text-wrap:balance;}
.tlstep p{margin-top:10px;font-size:var(--fs-sm);line-height:1.7;color:var(--l-mut);
  font-weight:500;text-wrap:pretty;}
/* pinned to the bottom so the four "your time" lines sit on one baseline
   however unevenly the paragraphs above them wrap */
.tlstep .who{margin-top:auto;padding-top:16px;font-size:var(--fs-xs);font-weight:700;
  color:var(--l-ink);border-top:1px solid var(--l-hair);}
@media(max-width:980px){.tl{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.tl{grid-template-columns:1fr;gap:16px;}}

/* ── canvas figures ────────────────────────────────────────────────────────
   Each figure is a sized box plus a sentence. The canvas is aria-hidden and
   the sentence says the same thing, so a reader who never sees the drawing —
   screen reader, blocked script, ancient browser — still gets the point. The
   box reserves its height in CSS so nothing shifts when the canvas mounts. */
.scenefig{margin:0;}
.scenebox{position:relative;width:100%;height:var(--sh,320px);}
.scenebox .scenecv{position:absolute;inset:0;display:block;width:100%;height:100%;}
.scenecap{margin-top:16px;font-size:var(--fs-xs);line-height:1.7;color:var(--tx2);
  font-weight:500;max-width:var(--measure);}
.scenecap b{color:var(--tx);font-weight:700;}
.scenecap .num{font-family:'Bricolage Grotesque',sans-serif;color:var(--teal);font-weight:600;}
.sec-light .scenecap,.sec-light2 .scenecap,.bg-paper .scenecap,.bg-clinical .scenecap{
  color:var(--l-mut2);}
.sec-light .scenecap b,.sec-light2 .scenecap b,.bg-paper .scenecap b,
.bg-clinical .scenecap b{color:var(--l-ink);}

/* the day dial sits beside the argument it supports */
.nightfig{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:44px;align-items:center;margin-top:52px;}
.nightfig .scenebox{--sh:300px;}
@media (max-width:820px){
  .nightfig{grid-template-columns:1fr;gap:22px;}
  .nightfig .scenebox{--sh:250px;}
}

/* the timezone band is wide and short */
.wakefig .scenebox{--sh:190px;}
@media (max-width:620px){.wakefig .scenebox{--sh:150px;}}
.wakefig .scenecap{max-width:none;}
.wakenum{display:block;font-family:'Bricolage Grotesque',sans-serif;
  font-size:var(--fs-h2s);font-weight:600;letter-spacing:-.03em;color:var(--teal);
  line-height:1;margin-bottom:8px;}

/* The capture fan. The page's own <style> block sets .fanfig .scenebox and is
   written after this file, so the override has to out-specify it rather than
   merely follow it. The figure needs real height because it now carries type
   at 14–21px rather than 8px marks, and it re-stacks vertically once the
   canvas is narrower than 620px — which is why the breakpoint here is 760px
   viewport: the taller box has to be reserved BEFORE the layout flips, never
   after. */
.fanfig.scenefig .scenebox{--sh:270px;}
@media (max-width:760px){ .fanfig.scenefig .scenebox{--sh:352px;} }

/* one question → six finished objects. Flips to 2×3 tiles under 700px of
   canvas; the box grows at 820px viewport so the flip never lands in a box
   that is too short for it. */
.jobsfig .scenebox{--sh:250px;}
@media (max-width:820px){ .jobsfig .scenebox{--sh:372px;} }

/* the price trace: a list on the left, the verdict on the right */
.tracefig .scenebox{--sh:320px;}
@media (max-width:840px){ .tracefig .scenebox{--sh:424px;} }

/* the channel key: three doors over one record */
.chankeyfig .scenebox{--sh:300px;}
@media (max-width:600px){ .chankeyfig .scenebox{--sh:274px;} }

/* These four figures argue in full sentences under themselves, so the caption
   is allowed the full measure rather than the 60ch a marginal note gets. */
.jobsfig .scenecap,.tracefig .scenecap,.chankeyfig .scenecap,
.fanfig .scenecap{max-width:var(--measure);}
.jobsfig,.tracefig{margin:0 0 26px;}
.chankeyfig{margin:34px 0 0;}

/* the call waveform */
.wavefig .scenebox{--sh:104px;}
.wavelegend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx3);}
.wavelegend i{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:7px;vertical-align:-1px;}
.wavelegend .c{background:rgba(20,26,31,.55);}
.wavelegend .a{background:var(--teal);}

/* ── figures that replaced photographs ─────────────────────────────────────
   Four blocks on this site carried a stock photograph of somebody at a
   counter under a heading about data isolation, AI disclosure, a handoff, or
   an integration's status. A person holding a phone is not evidence of any of
   those; it is decoration that reads as proof, which is worse than an empty
   space. Each one is now a figure that states the thing.

   .figcard keeps the shape .photocard had — same corner radius, same text
   block underneath, same place in the grid — so the sections' rhythm is
   unchanged. The canvas reserves its height in CSS, exactly as every other
   scene on the site does, so nothing shifts when the drawing mounts. */
.figcard{position:relative;margin:0;border-radius:14px;padding:24px 26px 26px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);}
.sec-light .figcard,.sec-light2 .figcard,.bg-clinical .figcard,.bg-paper .figcard{
  background:#fff;border-color:var(--l-hair);
  box-shadow:0 2px 3px rgba(20,26,31,.03),0 20px 50px rgba(20,26,31,.06);}
.figcard .kicker{display:block;margin-top:22px;font-size:var(--fs-2xs);font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal);}
.figcard h3{margin-top:10px;font-size:var(--fs-h3);font-weight:800;
  letter-spacing:-.015em;color:#141A1F;}
.figcard p{margin-top:8px;font-size:var(--fs-xs);line-height:1.7;
  color:var(--tx2);font-weight:500;max-width:var(--measure);}
.sec-light .figcard h3,.sec-light2 .figcard h3,.bg-clinical .figcard h3,
.bg-paper .figcard h3{color:var(--l-ink);}
.sec-light .figcard p,.sec-light2 .figcard p,.bg-clinical .figcard p,
.bg-paper .figcard p{color:var(--l-mut);}
.sec-light .figcard .kicker,.sec-light2 .figcard .kicker,
.bg-clinical .figcard .kicker,.bg-paper .figcard .kicker{color:var(--teal-deep,#0B7878);}
.figstack{display:grid;gap:16px;}
@media (max-width:620px){.figcard{padding:18px 16px 20px;}}

/* Heights. Every one of these flips to a stacked layout below a canvas width
   the scene decides for itself, so the taller box has to be reserved BEFORE
   the flip — the breakpoints below are chosen so the canvas is still above
   its own threshold when the box grows, never after. */

/* what the model is handed, and what it is never handed. Stacks under 700px
   of canvas; the wrap is roughly viewport − 100 inside a .figcard. */
.feedfig .scenebox{--sh:250px;}
@media (max-width:820px){ .feedfig .scenebox{--sh:440px;} }

/* the first sentence of the call. Stacks under 620px of canvas. */
.linefig .scenebox{--sh:230px;}
@media (max-width:740px){ .linefig .scenebox{--sh:300px;} }

/* the turn that stops it, and the card the desk opens. Stacks under 660px. */
.handfig .scenebox{--sh:250px;}
@media (max-width:780px){ .handfig .scenebox{--sh:410px;} }

/* three lanes: the route a booking takes under each of the three statuses.
   The lanes never re-stack — they only lose their labelled boxes for nodes
   on a line once a box would be narrower than 13px type needs. */
.lanefig .scenebox{--sh:360px;}
@media (max-width:760px){ .lanefig .scenebox{--sh:410px;} }

/* A bottom-right overlay panel and the frame's own caption both sit at the
   foot of the frame, and the panel is painted above it: 298px of the caption
   "One window still lit at 2:47 AM…" was behind the panel. The panel lifts
   clear of the caption line. */
.scene-frame:has(.caption) .scene-overlay.br,
.scene-frame:has(.caption) .scene-overlay.bl{bottom:calc(18px + 4.4em);}
/* 2.6em cleared a one-line caption; at 375px the caption wraps to two and
   the panel still sat 50px into it. */

/* ── the docked bar on a phone ───────────────────────────────────
   The guard above stacks the rail, the message and the button into a column:
   165px of an 812px screen, permanently, on every page. Measured across the
   site, 19 hero buttons landed inside that band — including primary ones, so
   a phone visitor arrived at a page with nothing to press in view.

   One row instead: step dots on the left, button on the right, message
   dropped because the dots already say where the reader is. This has to sit
   after the 820px guard, not in site.css — that sheet loads first and loses. */
@media (max-width:620px){
  .stickycta{padding-top:10px;padding-bottom:10px;}
  .stickycta .wrap{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:10px;}
  /* .stickycta.hasguide .msg is re-shown at 720px with three class selectors,
     so a two-class rule loses to it however late it is declared. */
  .stickycta .msg,.stickycta.hasguide .msg{display:none;}
  .stickycta .guiderail{flex:1 1 auto;min-width:0;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;}
  .stickycta .guiderail::-webkit-scrollbar{display:none;}
  .stickycta .btn{margin-left:auto;flex:0 0 auto;white-space:nowrap;}
  /* the row is compact now, so the step targets can keep the 44px the rest of
     the site holds to — they were 37px once the labels were dropped */
  .stickycta .guiderail a{min-height:44px;display:flex;align-items:center;}
  /* no rail on this page — the button is the whole row */
  .stickycta:not(.hasguide) .btn{flex:1 1 auto;justify-content:center;}
}

/* same floor on wide screens, where the rail carries its labels */
.stickycta .guiderail a{min-height:44px;display:flex;align-items:center;}

/* ── the hero on a phone: the action before the essay ─────────────────────
   Measured on the trade pages at 375x812: kicker 145, headline 208-458, then
   an explanatory paragraph running 7-8 lines (212px) before the first button,
   which therefore started at 728 against a docked bar beginning at 732. On
   eight of the highest-intent pages on the site, the thing a reader came to
   press was not on the screen.

   The paragraph is not cut and not shortened — it moves directly beneath the
   action, which is where a reader who wants more reads it anyway. Two pages
   (webchat, cross-border) already did this by hand; this states it once, by
   structure rather than by page name: the element that directly holds both the
   headline and the button row is the hero's copy column, whatever it is called
   on that page. */
@media (max-width:620px){
  header *:has(> h1):has(> .ctas),
  .hero  *:has(> h1):has(> .ctas){display:flex;flex-direction:column;}
  /* declared first so the named children below win at equal specificity */
  header *:has(> h1):has(> .ctas) > *,
  .hero  *:has(> h1):has(> .ctas) > *{order:6;}
  header *:has(> h1):has(> .ctas) > .kicker,
  header *:has(> h1):has(> .ctas) > .eyebrow,
  .hero  *:has(> h1):has(> .ctas) > .kicker,
  .hero  *:has(> h1):has(> .ctas) > .eyebrow{order:1;}
  header *:has(> h1):has(> .ctas) > h1,
  .hero  *:has(> h1):has(> .ctas) > h1{order:2;}
  /* The sub comes BEFORE the buttons. This used to put the two CTAs at order 3
     and the sentence explaining what the product is at order 5, so a phone
     reader got a headline and two buy buttons before being told what they
     would be buying. Two graders caught it independently on every page. */
  header *:has(> h1):has(> .ctas) > .sub,
  .hero  *:has(> h1):has(> .ctas) > .sub{order:3;margin-top:18px;}
  header *:has(> h1):has(> .ctas) > .ctas,
  .hero  *:has(> h1):has(> .ctas) > .ctas{order:4;margin-top:24px;}
  header *:has(> h1):has(> .ctas) > .heroscroll,
  .hero  *:has(> h1):has(> .ctas) > .heroscroll{order:5;}
}