/* Luminous aqua and liquid glass from Melanie's PETRO Face Card reference.
   Only the separate lab background is color-graded. The portrait and camera
   images retain their original colors. */
:root {
  --mint: #48E3A3;
  --aqua: #13E7AB;
  --ink: #0B4630;
  --deep: #129463;
  --pale: #E4F9EF;
  --line: rgba(18, 148, 99, .3);
  --glass-surface: linear-gradient(175deg, #fff 0%, #e1fff0 40%, #72e6b2 50%, #a5f5cf 77%, #f0fff7 100%);
  --glass-shadow: inset 0 2px 1px #fff, inset 0 -2px 2px #7fbd9f7a, 0 0 0 1px #96c0ab91, 0 7px 26px #087c5126, 0 0 30px #81ffca40;
}

body { background: #f6fffa; }
.masthead {
  max-width: none;
  background: linear-gradient(120deg, #e4fff2, #a0f9d4 68%, #6eebbd);
  border-bottom: 1px solid #ffffffb3;
}
.back-link {
  padding: 11px 17px;
  background: #f4fff2e8;
  border: 1px solid white;
  border-radius: 99px;
  box-shadow: inset 0 1px 1px white, 0 3px 12px #315e491a;
}

.cover {
  position: relative;
  isolation: isolate;
  max-width: none;
  margin: 0;
  padding: 23px 5% 0;
  background: #6eebbd;
}
.cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #6eebbd url('./images/face-card-cover-background.jpg') center / cover no-repeat;
  filter: saturate(2.8) contrast(1.13) brightness(1.04);
  pointer-events: none;
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #acffdc30, transparent 30%, transparent 75%, #56eeb6c9),
    linear-gradient(90deg, #89ffcfed 0%, #8affd2e0 34%, #13e7ab24 64%, #13e7ab45);
  pointer-events: none;
}
.cover-top, .cover-grid, .cover-bottom { max-width: 1380px; margin-inline: auto; }
.cover-top { border-color: #0b463066; }
.cover-top span {
  background: #d1ffe6e8;
  border-radius: 99px;
  padding: 5px 12px;
}
.cover-grid { grid-template-columns: .88fr 1.12fr; gap: 2%; min-height: 680px; }
.cover-copy { align-self: center; padding-block: 42px; }
.cover h1 { font-size: clamp(70px, 8.4vw, 122px); }
.framing { max-width: 450px; }
.cover-art { margin: 22px 0 24px; gap: 12px; }
.cover-portrait {
  max-width: 510px;
  /* Fade only the outside edge into the lab; the entire face stays visible. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.art-caption {
  padding: 5px 12px;
  border: 1px solid #ffffffb3;
  border-radius: 99px;
  background: #e4f9eff2;
}
.cover-bottom { border-color: #0b463066; }

.glass, .glass.primary, .save-actions .glass {
  background: var(--glass-surface);
  border: 1px solid white;
  border-radius: 99px;
  padding: 15px 25px;
  min-height: 56px;
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  transition: background .18s, box-shadow .18s, transform .18s;
}
.glass:hover:not(:disabled), .glass.primary:hover:not(:disabled), .save-actions .glass:hover:not(:disabled) {
  background: linear-gradient(175deg, #fff, #c1ffe3 40%, #48e3a3 50%, #b8ffdd);
  box-shadow: inset 0 2px 1px white, 0 0 0 1px #12946380, 0 7px 26px #087c5133;
}
.glass:active:not(:disabled) { box-shadow: inset 0 2px 5px #12946333; }
.glass:disabled { background: #e4f9ef; box-shadow: none; opacity: .55; }

.experience { background: #f6fffa; }
.viewfinder {
  border: 1px solid #12946380;
  border-radius: 22px;
  background: radial-gradient(ellipse at 30% 10%, #d1ffe6, transparent 65%), linear-gradient(135deg, #8dffd9, #13e7ab);
  box-shadow: inset 0 1px 0 white, 0 12px 40px #12946312;
}
.camera-state, .capture-count { border-radius: 99px; border: 1px solid white; background: #effff4f5; }
.frame-corners { border-color: #12946366; border-radius: 22px; }
.oval { border-color: #12946399; background: #e4f9ef59; }
.countdown { border-radius: 99px; }
.pose-list li.active { background: linear-gradient(100deg, #a0f9d4, #e4f9ef); border-radius: 12px; }
.signals { background: #d1ffe6; padding: 20px; border-radius: 18px; border-color: #12946359; }

.card-section { background: #e4f9ef; }
.result {
  padding: 18px;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: linear-gradient(165deg, #fff, #eafff4);
  box-shadow: 0 7px 24px #12946312;
}
.result-photo, .sample-photo { border-radius: 12px; }
.sample-photo { background: linear-gradient(145deg, #c1ffe3, #48e3a3); }
.result .reading {
  padding: 12px;
  border: 1px solid white;
  border-radius: 16px;
  background: linear-gradient(115deg, #a0f9d4, #72e6b2);
}

.invitation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(115deg, #8dffd9, #13e7ab 66%, #48e3a3);
}
.invitation::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 72%, #edfff75c 73%, #ffffffa6 73.3%, transparent 74%),
    radial-gradient(ellipse at 6% 10%, #d1ffe6c4, transparent 65%);
}
.booking-detail { font-size: 12px; margin-bottom: 10px; }
.consultation-option { margin-top: 12px; font-size: 12px; }
.consultation-option a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
footer { background: #d1ffe6; }

@media (max-width: 1100px) {
  .cover-grid { min-height: 590px; }
  .result { padding: 14px; }
  .result .reading { gap: 7px; padding: 10px; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .cover-grid { min-height: 540px; }
  .cover h1 { font-size: 9vw; }
  .cover-art { margin-left: 0; }
}
@media (max-width: 640px) {
  .masthead { padding: 17px 5%; gap: 12px; }
  .back-link { padding: 10px 12px; }
  .cover { margin: 0; padding: 17px 6% 0; }
  .cover::before { background-position: 62% center; }
  .cover::after {
    background: linear-gradient(180deg, #89ffcfed, #8affd2d9 32%, #13e7ab26 62%, #56eeb6b8);
  }
  .cover-top span { padding: 4px 8px; }
  .cover-grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .cover h1 { font-size: clamp(60px, 15vw, 86px); line-height: .88; }
  .cover h1 br { display: none; }
  .cover h1 .motion { display: inline; }
  .cover-copy { padding: 0 0 30px; }
  .cover-art { order: -1; width: 100%; margin: 20px 0 28px; }
  .cover-portrait { max-width: 420px; }
  .cover .glass { min-height: 54px; padding-inline: 23px; }
  .result { padding: 18px; }
  .result .reading { flex-wrap: nowrap; padding: 12px; gap: 12px; }
  .signals { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .glass, .glass.primary, .save-actions .glass { transition: none; }
}

/* Practice information for local visitors and search. */
.practice{border-bottom:1px solid var(--line)}
.practice-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;margin-top:24px}
.practice h2{font:500 clamp(38px,4.1vw,58px)/1.05 var(--display);letter-spacing:-.03em;margin-bottom:20px}
.practice-grid>div>p{font-size:13px;max-width:470px}
.practice h3{font:500 28px/1.2 var(--display);margin-bottom:14px}
.practice address{font-style:normal;font-size:14px;line-height:1.7}
.practice-guide,.practice-links a{font-size:12px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.practice-guide{margin-top:12px}.practice-links{display:flex;flex-wrap:wrap;gap:6px 24px;margin:6px 0 10px}
@media(max-width:640px){.practice-grid{grid-template-columns:1fr;gap:30px}.practice h2{font-size:42px}.practice-grid>div>p{font-size:14px}}

/* Keep registered marks discreet within the editorial heading. */
.practice h2 sup{font-size:.38em;line-height:0;vertical-align:super}

/* Make camera positioning and the next action visible at the camera itself. */
.frame-guide{position:absolute;inset:0;z-index:2;pointer-events:none}
.frame-guide::before{content:"";position:absolute;inset:10% 29%;border:2px dashed #fff;outline:1px solid #129463;border-radius:48%}
.frame-guide.ready::before{border-color:#71E9B5;border-style:solid;outline-color:#0B4630}
.frame-guide span{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:7px 12px;border-radius:12px;background:#F6FFFA;color:#0B4630;font:500 12px/1.4 var(--sans);text-align:center}
.director .status{min-height:0;margin:18px 0 12px;padding:12px 14px;background:#E4F9EF;border-left:3px solid #129463;font-size:13px;line-height:1.5}