/* ==========================================================================
   My Procedure Pilot
   Palette concept: Colorado dawn. Procedures happen before sunrise, so the
   page runs from cool mineral light at the top toward warm low sun at the
   bottom. Single light theme on purpose: older readers, phone screens, 6am.
   ========================================================================== */

:root{
  color-scheme: light;

  --ground:     #EDF1F0;
  --ground-dp:  #E2E8E6;
  --surface:    #F8FAF9;
  --ink:        #122A28;
  --ink-soft:   #46615D;
  --ink-faint:  #7C918D;
  --spruce:     #1C4A44;
  --spruce-dk:  #143833;
  --marigold:   #C8842A;
  --marigold-dk:#9C6318;
  --rule:       #CBD6D3;
  --rule-soft:  #DCE4E2;

  /* warm amber, used only by the "Pending" chips in Verification */
  --pending-bg:   #FBF4E6;
  --pending-ink:  #7A5714;
  --pending-rule: #DEC38A;

  --display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --rail: 8.5rem;
  --gap: 2.25rem;
  --page: 1100px;

  --ease: cubic-bezier(.2,.7,.3,1);
  --dawn: 0; /* 0 to 1, set from scroll position by main.js */
}

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.1875rem;          /* 19px: older eyes, phone at 6am */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* The morning warming up. Fixed, behind everything, deliberately faint. */
#dawn{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(120,155,170,.10) 0%,
      rgba(120,155,170,0)  38%),
    linear-gradient(0deg,
      rgba(200,132,42,.13) 0%,
      rgba(200,132,42,0)  46%);
  opacity: var(--dawn);
  transition: opacity .5s linear;
}
main, footer{ position: relative; z-index: 1; }
.masthead{ z-index: 10; }   /* must outrank main, or the hero paints over it */

h1,h2,h3{ margin: 0; text-wrap: balance; font-weight: 400; }
p{ margin: 0 0 1.15em; }
p:last-child{ margin-bottom: 0; }

.wrap{ max-width: var(--page); margin-inline: auto; padding-inline: 1.5rem; }
.measure{ max-width: 34em; }

h2{
  font-family: var(--display);
  font-size: clamp(1.95rem, 3.6vw, 2.85rem);
  line-height: 1.12; letter-spacing: -.01em;
}
h3{ font-family: var(--body); font-size: 1.0625rem; font-weight: 600; }

a{ color: var(--spruce); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--marigold-dk); }
:focus-visible{ outline: 2px solid var(--marigold-dk); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------- itinerary grid */
.rail{
  display: grid;
  grid-template-columns: var(--rail) minmax(0,1fr);
  gap: var(--gap);
  align-items: start;
}
.label{
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; line-height: 1.5;
  padding-top: .55rem;
}
@media (max-width: 800px){
  .rail{ grid-template-columns: minmax(0,1fr); gap: .85rem; }
  .label{ padding-top: 0; }
}

section{ padding-block: clamp(3.25rem, 6vw, 5.5rem); }
.divide{ border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------- masthead */
.masthead{
  position: sticky; top: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--ground);   /* fully opaque: content scrolls under, not through */
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.masthead.lifted{
  box-shadow: 0 1px 0 var(--rule), 0 10px 24px -18px rgba(18,42,40,.4);
}
.masthead-in{
  display: flex; flex-wrap: wrap; gap: .85rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding-block: 1.35rem;
  transition: padding-block .3s var(--ease);
}
.masthead.lifted .masthead-in{ padding-block: .95rem; }

.wordmark{ display: flex; flex-direction: column; gap: .2rem; }
.wordmark .nm{ font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.wordmark .biz{
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.mast-tel{
  font-family: var(--display); font-size: 1.375rem; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  position: relative; padding-bottom: 2px;
}
.mast-tel::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--marigold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.mast-tel:hover{ color: var(--marigold-dk); }
.mast-tel:hover::after{ transform: scaleX(1); }

/* ----------------------------------------------------------------- hero */
.hero{ padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.hero-grid{
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 880px){ .hero-grid{ grid-template-columns: minmax(0,1fr); } }

.eyebrow{
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marigold-dk); font-weight: 600; margin-bottom: 1.5rem;
}
h1{
  font-family: var(--display);
  font-size: clamp(2.9rem, 7.2vw, 5.1rem);
  line-height: 1.02; letter-spacing: -.018em;
  margin-bottom: 1.5rem;
}
.lede{ font-size: 1.25rem; line-height: 1.6; color: var(--ink-soft); max-width: 31em; }
.lede strong{ color: var(--ink); font-weight: 600; }

.cta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: 2.25rem;
}
.btn{
  display: inline-flex; align-items: baseline; gap: .6rem;
  background: var(--spruce); color: #F4F8F7; text-decoration: none;
  padding: 1rem 1.6rem; border-radius: 2px;
  font-size: 1.1875rem; font-weight: 600;
  border-bottom: 3px solid var(--marigold);
  transition: background .2s var(--ease), transform .2s var(--ease),
              border-bottom-width .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{
  background: var(--spruce-dk); color: #F4F8F7;
  transform: translateY(-2px);
  border-bottom-width: 4px;
  box-shadow: 0 10px 20px -14px rgba(18,42,40,.7);
}
.btn:active{ transform: translateY(0); border-bottom-width: 3px; box-shadow: none; }
.btn .num{ font-family: var(--display); font-size: 1.3rem; font-weight: 400; letter-spacing: .01em; }
.cta-aside{ font-size: .9375rem; color: var(--ink-faint); max-width: 18em; line-height: 1.5; }

.locale{
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 2.25rem;
  font-size: .9375rem; color: var(--ink-soft);
}
.locale b{ color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------- portrait placeholder */
.portrait{ margin: 0; }
.frame{
  aspect-ratio: 4/5; background: var(--ground-dp);
  border: 1px solid var(--rule);
  display: grid; place-items: center; text-align: center; padding: 2rem;
}
.frame span{
  font-size: .8125rem; color: var(--ink-faint); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; line-height: 1.7;
}
.portrait figcaption{
  margin-top: .85rem; font-size: .875rem; color: var(--ink-faint); line-height: 1.55;
}

/* ------------------------------------------------------------- pull quote */
.pull{
  font-family: var(--display); font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  line-height: 1.25; letter-spacing: -.008em; color: var(--spruce);
  margin: 2rem 0; padding-left: 1.5rem;
  border-left: 2px solid var(--marigold); max-width: 26em;
}

/* ------------------------------------------------ the day, as a timeline */
.day{ margin-top: 2.5rem; display: flex; flex-direction: column; }
.stop{
  display: grid; grid-template-columns: 5.5rem 1.25rem minmax(0,1fr);
  gap: 0 1rem; align-items: stretch;
}
.stop .time{
  font-family: var(--display); font-size: 1.25rem; line-height: 1.5;
  font-variant-numeric: tabular-nums; color: var(--ink-faint);
  padding-top: .1rem; white-space: nowrap;
  transition: color .5s var(--ease);
}
.stop.lit .time{ color: var(--ink-soft); }

.track{ position: relative; justify-self: center; width: 1px; background: var(--rule); }
.stop:first-child .track{ margin-top: .95rem; }
.stop:last-child .track{ height: .95rem; }
/* the line draws itself downward, stop by stop */
.track::after{
  content: ""; position: absolute; inset: 0 0 auto 0;
  width: 1px; height: 0; background: var(--ink-soft);
  transition: height .55s var(--ease);
}
.stop.lit .track::after{ height: 100%; }

.dot{
  position: absolute; top: .8rem; left: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--rule);
  transform: translate(-50%,0) scale(1);
  transition: background .45s var(--ease), border-color .45s var(--ease),
              transform .45s var(--ease);
}
.stop:first-child .dot{ top: 0; }
.stop.lit .dot{ border-color: var(--ink-soft); background: var(--surface); }
/* the discharge signature: the moment the whole service turns on */
.stop.key.lit .dot{
  background: var(--marigold); border-color: var(--marigold-dk);
  transform: translate(-50%,0) scale(1.5);
  box-shadow: 0 0 0 6px rgba(200,132,42,.16);
}
.stop .what{ padding-bottom: 1.85rem; }
.stop .what h3{ margin-bottom: .2rem; transition: color .45s var(--ease); }
.stop .what p{ margin: 0; font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.6; max-width: 32em; }
.stop.key.lit .what h3{ color: var(--spruce); }
@media (max-width: 560px){
  .stop{ grid-template-columns: 4.5rem 1.25rem minmax(0,1fr); }
  .stop .time{ font-size: 1.0625rem; }
}

/* --------------------------------------------------------- verification list */
.plain{ list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; }
.plain li{
  padding-block: .9rem; border-bottom: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline;
}
.plain li:first-child{ border-top: 1px solid var(--rule-soft); }
.plain .k{ font-weight: 600; font-size: 1.0625rem; }
.plain .v{ color: var(--ink-soft); font-size: 1rem; flex: 1 1 14rem; min-width: 0; }

.chip{
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: .2rem .5rem; border-radius: 2px; white-space: nowrap;
  background: var(--pending-bg); color: var(--pending-ink); border: 1px solid var(--pending-rule);
}
.chip.ok{ background: #DEE9E5; color: var(--spruce); border-color: #B7CCC6; }

/* ------------------------------------------------------------- procedures */
.procs{ list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.procs li{
  border: 1px solid var(--rule); background: var(--surface);
  padding: .6rem 1rem; font-size: 1rem; color: var(--ink);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.procs li:hover{ transform: translateY(-2px); border-color: var(--marigold); background: #FDFBF7; }

/* ------------------------------------------------------------------ rate */
.price{ display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0 1.35rem; }
.price .fig{
  font-family: var(--display); font-size: clamp(3rem,7vw,4.5rem);
  line-height: .95; letter-spacing: -.02em;
}
.price .per{ font-size: 1.0625rem; color: var(--ink-faint); font-weight: 600; letter-spacing: .02em; }

.tiers{ list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: 34em; }
.tiers li{
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: .85rem; border-bottom: 1px solid var(--rule-soft);
}
.tiers li:first-child{ border-top: 1px solid var(--rule-soft); }
.tiers .amt{
  font-family: var(--display); font-size: 1.35rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.after-tiers{ margin-top: 1.5rem; }

/* --------------------------------------------------------------- booking */
.booking{
  background: var(--surface); border: 1px solid var(--rule);
  padding: clamp(1.75rem,4vw,2.75rem);
}
.booking h2{ margin-bottom: 1.25rem; }
.ready-head{ margin-top: 2.25rem; font-weight: 600; }
.ready{ margin: 1rem 0 0; padding-left: 1.35rem; color: var(--ink-soft); font-size: 1.0625rem; }
.ready li{ margin-bottom: .55rem; }
.ready li::marker{ color: var(--marigold-dk); font-weight: 600; }

/* -------------------------------------------------------------------- faq */
.faq{ display: flex; flex-direction: column; margin-top: 1.75rem; }
.faq details{ border-bottom: 1px solid var(--rule-soft); }
.faq details:first-child{ border-top: 1px solid var(--rule-soft); }
.faq summary{
  cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none;
  display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
  padding-block: 1.1rem;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: var(--spruce); }
.faq summary::after{
  content: "+"; font-family: var(--display); font-size: 1.5rem; line-height: 1;
  color: var(--marigold-dk); flex: 0 0 auto;
  transform: rotate(0deg); transform-origin: center;
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after{ transform: rotate(135deg); }

/* height is animated by main.js so the open and close are both smooth */
.faq .a{ overflow: hidden; }
.faq .a p{
  color: var(--ink-soft); font-size: 1.0625rem; max-width: 34em;
  margin: 0; padding-bottom: 1.35rem;
}

/* ----------------------------------------------------------------- footer */
footer{
  border-top: 1px solid var(--rule); background: var(--ground-dp);
  padding-block: 2.5rem; font-size: .9375rem; color: var(--ink-soft);
}
.foot-grid{ display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; }
.foot-grid p{ margin: 0; }
footer .nm{ font-family: var(--display); font-size: 1.25rem; color: var(--ink); margin-bottom: .35rem; }
.legal{ max-width: 24em; }
.legal p{ font-size: .875rem; color: var(--ink-faint); }

/* ================================================================ motion
   Everything is visible by default. The .js class, added by main.js only
   when it is safe to animate, is what opts elements into being revealed.
   No script, or reduced motion, means a fully readable static page.
   ==================================================================== */

.rise{ animation: rise .75s var(--ease) both; }
.rise.d1{ animation-delay: .07s; }
.rise.d2{ animation-delay: .14s; }
.rise.d3{ animation-delay: .21s; }
.rise.d4{ animation-delay: .28s; }
@keyframes rise{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }

.js [data-reveal]{
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].shown{ opacity: 1; transform: none; }
.js [data-reveal].instant{ transition: none; opacity: 1; transform: none; }

/* labels in the rail trail their section by a beat */
.js .label[data-reveal]{ transition-delay: .1s; }

@media (prefers-reduced-motion: reduce){
  .rise{ animation: none; }
  .js [data-reveal]{ opacity: 1; transform: none; transition: none; }
  #dawn{ transition: none; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}