/* ORCACHARTS_PET_STORY_BRANDED_SEO_V1 */

:root{
  color-scheme:dark;
  --bg:#07100e;
  --panel:#0d1915;
  --panel2:#101f1a;
  --line:rgba(255,255,255,.10);
  --text:#f0f8f5;
  --muted:#9eb4ac;
  --accent:#78e6ba;
  --accent2:#b8f4dc;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 75% -10%,rgba(120,230,186,.13),transparent 34%),
    linear-gradient(180deg,#07100e,#050b09);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height:1.65;
}

a{color:inherit}

.wrap{
  width:min(1120px,calc(100% - 34px));
  margin:0 auto;
}

header{
  border-bottom:1px solid var(--line);
  background:rgba(5,13,10,.82);
}

.nav{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  text-decoration:none;
}

.brand strong{
  display:block;
  font-size:18px;
  letter-spacing:.03em;
}

.brand span{
  display:block;
  margin-top:1px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.phone{
  display:inline-flex;
  min-height:42px;
  padding:0 16px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(120,230,186,.35);
  border-radius:999px;
  color:var(--accent2);
  background:rgba(120,230,186,.07);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.crumb{
  padding-top:28px;
  color:var(--muted);
  font-size:12px;
}

.hero{
  padding:52px 0 44px;
}

.kicker{
  margin:0 0 12px;
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

h1{
  max-width:900px;
  margin:0;
  font-size:clamp(40px,7vw,72px);
  line-height:.98;
  letter-spacing:-.045em;
}

.lede{
  max-width:780px;
  margin:22px 0 0;
  color:#b8cac3;
  font-size:clamp(17px,2vw,21px);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.button{
  display:inline-flex;
  min-height:48px;
  padding:0 19px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--accent);
  color:#06110d;
  font-weight:950;
  text-decoration:none;
}

.button.secondary{
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:var(--text);
}

.layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(270px,.72fr);
  gap:22px;
  padding-bottom:64px;
}

.card{
  padding:25px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.018)
    );
}

.card + .card{
  margin-top:16px;
}

h2{
  margin:0 0 12px;
  font-size:28px;
  line-height:1.15;
}

h3{
  margin:0 0 7px;
}

p{
  color:#b5c7c0;
}

.services{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.service{
  padding:17px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.022);
  text-decoration:none;
}

.service strong{
  display:block;
  margin-bottom:3px;
}

.service span{
  color:var(--muted);
  font-size:12px;
}

.details{
  list-style:none;
  padding:0;
  margin:0;
}

.details li{
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.details li:last-child{
  border-bottom:0;
}

footer{
  padding:29px 0 44px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}

@media(max-width:760px){
  .layout{
    grid-template-columns:1fr;
  }

  .services{
    grid-template-columns:1fr;
  }

  .nav{
    align-items:flex-start;
    flex-direction:column;
    padding:17px 0;
  }

  .hero{
    padding-top:40px;
  }
}


/* ORCACHARTS_PET_STORY_HOMEPAGE_EXPANSION_V1 */

.nav-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

.book-mini{
  display:inline-flex;
  min-height:42px;
  padding:0 16px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--accent);
  color:#06110d;
  font-size:12px;
  font-weight:950;
  text-decoration:none;
}

.hero-note{
  margin-top:19px;
  color:var(--muted);
  font-size:12px;
}

.intro-panel{
  padding:32px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    linear-gradient(
      135deg,
      rgba(120,230,186,.075),
      rgba(255,255,255,.02)
    );
}

.large-copy{
  max-width:860px;
  font-size:18px;
}

.section-space{
  padding-top:58px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:20px;
}

.section-head h2{
  max-width:700px;
  margin-bottom:0;
}

.text-link{
  color:var(--accent2);
  font-size:13px;
  font-weight:850;
  text-decoration:none;
}

.service-grid{
  display:grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap:14px;
}

.service-card{
  min-height:245px;
  padding:25px;
  border:1px solid var(--line);
  border-radius:17px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.017)
    );
}

.service-card h3{
  margin-top:16px;
  font-size:23px;
}

.service-card a{
  display:inline-block;
  margin-top:8px;
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.service-number{
  color:var(--accent);
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}

.care-grid{
  display:grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
  gap:14px;
}

.feature-card{
  padding:24px;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.022);
}

.location-layout{
  display:grid;
  grid-template-columns:
    minmax(0,1.25fr)
    minmax(300px,.75fr);
  gap:22px;
}

.location-main,
.hours-card{
  padding:27px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.024);
}

.address-box{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:22px;
  padding:19px;
  border:1px solid rgba(120,230,186,.18);
  border-radius:13px;
  background:rgba(120,230,186,.045);
}

.address-box a{
  margin-top:8px;
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.hours{
  margin:0;
}

.hours > div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.hours > div:last-child{
  border-bottom:0;
}

.hours dt{
  color:#d9e8e2;
  font-weight:750;
}

.hours dd{
  margin:0;
  color:var(--muted);
  text-align:right;
}

.hours .closed dd{
  color:#d69b9b;
}

.contact-panel{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.8fr);
  gap:24px;
  padding:31px;
  border:1px solid rgba(120,230,186,.22);
  border-radius:20px;
  background:
    linear-gradient(
      135deg,
      rgba(120,230,186,.09),
      rgba(255,255,255,.018)
    );
}

.contact-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.seo-links{
  padding-bottom:60px;
}

.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:24px;
}

@media(max-width:760px){

  .nav-actions{
    flex-wrap:wrap;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .service-grid{
    grid-template-columns:1fr;
  }

  .care-grid{
    grid-template-columns:1fr;
  }

  .location-layout{
    grid-template-columns:1fr;
  }

  .contact-panel{
    grid-template-columns:1fr;
  }

  .contact-actions{
    grid-template-columns:1fr;
  }

  .footer-grid{
    flex-direction:column;
  }

}


/* ORCACHARTS_PET_STORY_LOCAL_BOOKING_POPOUT_V1_0_2 */

body.pet-story-booking-open{
  overflow:hidden;
}

.pet-story-booking-popout{
  position:fixed;
  inset:0;
  z-index:2147482000;
}

.pet-story-booking-popout[hidden]{
  display:none;
}

.pet-story-booking-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,8,6,.80);
  backdrop-filter:blur(8px);
}

.pet-story-booking-dialog{
  position:absolute;
  top:50%;
  left:50%;

  width:min(
    720px,
    calc(100vw - 28px)
  );

  max-height:
    calc(100vh - 32px);

  overflow:auto;

  padding:30px;

  border:
    1px solid
    rgba(120,230,186,.25);

  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      #0d1915,
      #07100e
    );

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.72);

  opacity:0;

  transform:
    translate(-50%,-47%)
    scale(.98);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.pet-story-booking-popout.is-open
.pet-story-booking-dialog{
  opacity:1;

  transform:
    translate(-50%,-50%)
    scale(1);
}

.pet-story-booking-close{
  position:absolute;
  top:14px;
  right:14px;

  width:40px;
  height:40px;

  border:
    1px solid
    var(--line);

  border-radius:10px;

  background:#12211c;

  color:#fff;

  cursor:pointer;

  font-size:26px;
  line-height:1;
}

.pet-story-booking-intro{
  max-width:610px;
  margin-bottom:22px;
}

.pet-story-booking-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:13px;
}

.pet-story-booking-grid label{
  display:grid;
  gap:6px;
}

.pet-story-booking-grid label.wide{
  grid-column:1/-1;
}

.pet-story-booking-grid span{
  color:#c6d7d0;
  font-size:12px;
  font-weight:850;
}

.pet-story-booking-grid input,
.pet-story-booking-grid select,
.pet-story-booking-grid textarea{
  width:100%;
  min-height:46px;

  padding:11px 12px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:10px;

  outline:none;

  background:#07120e;

  color:#f0f8f5;

  font:inherit;
}

.pet-story-booking-grid textarea{
  min-height:105px;
  resize:vertical;
}

.pet-story-booking-grid input:focus,
.pet-story-booking-grid select:focus,
.pet-story-booking-grid textarea:focus{
  border-color:
    rgba(120,230,186,.62);

  box-shadow:
    0 0 0 3px
    rgba(120,230,186,.08);
}

.pet-story-booking-submit{
  margin-top:18px;
  border:0;
  cursor:pointer;
}

.pet-story-booking-submit:disabled{
  opacity:.55;
  cursor:wait;
}

.pet-story-booking-status{
  min-height:22px;
  margin-top:13px;
  color:var(--muted);
  font-size:12px;
}

.pet-story-booking-status[data-state="success"]{
  color:var(--accent2);
}

.pet-story-booking-status[data-state="error"]{
  color:#ffaaa9;
}

.pet-story-honeypot{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

@media(max-width:620px){

  .pet-story-booking-dialog{
    padding:
      27px
      18px
      22px;
  }

  .pet-story-booking-grid{
    grid-template-columns:1fr;
  }

  .pet-story-booking-grid label.wide{
    grid-column:auto;
  }

}



/* ORCACHARTS_PET_STORY_BOOKING_ANCHORED_POPOVER_V1_0_3 */


/*
 * The modal host covers the screen so the form can float
 * independently from document layout.
 */

.pet-story-booking-popout{
  position:fixed !important;
  inset:0 !important;

  width:auto !important;
  height:auto !important;

  z-index:2147483000 !important;

  pointer-events:none;
}


.pet-story-booking-popout[hidden]{
  display:none !important;
}


/*
 * No dark full-screen takeover.
 * Clicking outside the card still closes it.
 */

.pet-story-booking-backdrop{
  position:absolute !important;
  inset:0 !important;

  background:transparent !important;

  backdrop-filter:none !important;

  pointer-events:auto;
}


/*
 * Desktop/tablet:
 * JS writes --pet-booking-x and --pet-booking-y from the
 * exact CTA that was clicked.
 */

.pet-story-booking-dialog{
  position:fixed !important;

  top:
    var(
      --pet-booking-y,
      100px
    ) !important;

  left:
    var(
      --pet-booking-x,
      50%
    ) !important;

  width:
    min(
      520px,
      calc(100vw - 32px)
    ) !important;

  max-height:
    min(
      680px,
      calc(100vh - 32px)
    ) !important;

  margin:0 !important;

  overflow:auto !important;

  padding:
    24px !important;

  border:
    1px solid
    rgba(
      120,
      230,
      186,
      .32
    ) !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      180deg,
      #0d1915,
      #07100e
    ) !important;

  box-shadow:
    0 24px 70px
    rgba(
      0,
      0,
      0,
      .64
    ) !important;

  opacity:0;

  transform:
    translateY(-5px)
    scale(.985) !important;

  transform-origin:
    var(
      --pet-booking-origin-x,
      50%
    )
    top;

  transition:
    opacity .15s ease,
    transform .15s ease;

  pointer-events:auto;
}


.pet-story-booking-popout.is-open
.pet-story-booking-dialog{
  opacity:1 !important;

  transform:
    translateY(0)
    scale(1) !important;
}


/*
 * Form is intentionally compact because this is now
 * a contextual popover rather than a page section.
 */

.pet-story-booking-dialog h2{
  margin-right:44px;
  font-size:24px;
}


.pet-story-booking-intro{
  margin:
    8px
    0
    18px !important;

  font-size:14px;
  line-height:1.5;
}


.pet-story-booking-grid{
  display:grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    ) !important;

  gap:
    11px !important;
}


.pet-story-booking-grid label{
  min-width:0;
}


.pet-story-booking-grid input,
.pet-story-booking-grid select,
.pet-story-booking-grid textarea{
  display:block !important;

  width:100% !important;

  min-width:0 !important;

  box-sizing:border-box !important;
}


.pet-story-booking-grid textarea{
  min-height:82px !important;
}


.pet-story-booking-close{
  z-index:2;
}


/*
 * Mobile:
 * A CTA-relative card can easily run offscreen, so use a
 * compact centered floating panel.
 */

@media(max-width:680px){

  .pet-story-booking-dialog{
    top:50% !important;
    left:50% !important;

    width:
      calc(
        100vw - 24px
      ) !important;

    max-height:
      calc(
        100vh - 24px
      ) !important;

    padding:
      22px
      16px
      18px !important;

    transform:
      translate(
        -50%,
        -48%
      )
      scale(.985) !important;
  }


  .pet-story-booking-popout.is-open
  .pet-story-booking-dialog{
    transform:
      translate(
        -50%,
        -50%
      )
      scale(1) !important;
  }


  .pet-story-booking-grid{
    grid-template-columns:
      1fr !important;
  }


  .pet-story-booking-grid
  label.wide{
    grid-column:auto !important;
  }

}


/*
 * Important:
 * Even if older page-level rules are cached elsewhere,
 * the booking form can never participate in ordinary
 * document flow while this rule is loaded.
 */

body:not(.pet-story-booking-open)
.pet-story-booking-popout{
  display:none;
}