/* Essential Grooming & Wellness — site styles.
   Single stylesheet; edit here, commit, push. Cloudflare redeploys. */
  /* ============================================================
     TOKENS — drawn from the salon's own flyer: cream, sky and
     navy blues, a lime accent, and the logo's red dot. Kept light
     and soft rather than the flyer's fully saturated blocks.
     Single light world by choice; there is deliberately no dark theme.
     ============================================================ */
  :root {
    color-scheme: light;

    --paper:      #F8F4EA;   /* flyer cream */
    --paper-2:    #E8F2F6;   /* soft sky tint for alternating bands */
    --card:       #FFFFFF;

    --navy:       #2E3F8F;   /* flyer deep blue */
    --navy-deep:  #1E2853;
    --navy-dim:   #E6EAF6;

    --blue:       #4E9CC9;   /* flyer mid blue */
    --blue-soft:  #8FCBDD;
    --blue-dim:   #E3F0F6;

    --aqua:       #7BC5C0;   /* flyer soft teal */

    --lime:       #A9CE3C;   /* flyer lime — the action colour */
    --lime-hi:    #B8DA4A;
    --lime-dim:   #F0F6DC;

    --red:        #E0483A;   /* the logo's red dot */
    --gold:       #E8A317;   /* review stars only */

    --ink:        #232E5C;
    --ink-2:      #4A5585;
    --ink-3:      #616C94;   /* darkened to clear 4.5:1 on cream */

    --line:       #E1DFD2;
    --line-soft:  #EFEBE0;

    --shadow-sm: 0 1px 2px rgba(35,46,92,.05), 0 2px 8px rgba(35,46,92,.04);
    --shadow-md: 0 2px 4px rgba(35,46,92,.04), 0 12px 30px rgba(35,46,92,.09);
    --shadow-lg: 0 4px 10px rgba(35,46,92,.05), 0 26px 60px rgba(35,46,92,.13);

    --display: "Quicksand", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
    --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;

    --wrap: 1140px;
    --pad: clamp(20px, 5vw, 40px);
  }

  /* ============================================================
     BASE
     ============================================================ */
  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.12; }
  p { margin: 0; }
  a { color: inherit; }
  img { display: block; max-width: 100%; }

  .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
  .sec { padding-block: clamp(56px, 8vw, 96px); }
  .sec--tight { padding-block: clamp(40px, 5vw, 60px); }
  .sec--paper { background: var(--paper); }
  .sec--card  { background: var(--card); }
  .sec--cream { background: var(--paper-2); }

  .eyebrow {
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 14px;
  }
  .h1 { font-size: clamp(38px, 6.4vw, 66px); letter-spacing: -.02em; }
  .h2 { font-size: clamp(28px, 4.2vw, 43px); letter-spacing: -.015em; }
  .h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -.01em; }
  .lede { font-size: clamp(16px, 1.6vw, 18.5px); color: var(--ink-2); max-width: 60ch; }
  .muted { color: var(--ink-3); font-size: 14px; }

  .sec-head { max-width: 66ch; margin-bottom: clamp(30px, 4vw, 46px); }

  /* ============================================================
     BUTTONS
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 17px 30px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
  }
  .btn:active { transform: translateY(1px); }

  /* Lime is the action colour, straight off the flyer's "Book Today!" circle.
     Deep navy text on it measures 7.8:1 — white would only reach 2:1. */
  .btn--primary { background: var(--lime); color: var(--navy-deep); box-shadow: var(--shadow-md); }
  .btn--primary:hover { background: var(--lime-hi); }

  .btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
  .btn--outline:hover { border-color: var(--blue); background: var(--blue-dim); }

  /* For use on the lime band, where a lime button would vanish. */
  .btn--navy { background: var(--navy); color: #fff; }
  .btn--navy:hover { background: var(--navy-deep); }

  .btn--ghost-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.45); }
  .btn--ghost-light:hover { background: rgba(255,255,255,.24); }

  .btn--sm { padding: 12px 22px; font-size: 15px; }

  /* ============================================================
     HEADER
     ============================================================ */
  .hdr {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line-soft);
  }
  .hdr__in { display: flex; align-items: center; gap: 22px; height: 74px; }
  .hdr__nav { display: flex; gap: 26px; margin-left: auto; }
  .hdr__nav a {
    font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-2);
    transition: color .15s ease;
  }
  .hdr__nav a:hover { color: var(--navy); }
  .hdr__cta { display: flex; align-items: center; gap: 14px; }
  .hdr__tel { font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }

  @media (max-width: 1000px) { .hdr__nav { display: none; } .hdr__cta { margin-left: auto; } }
  @media (max-width: 620px) { .hdr__tel { display: none; } }

  .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
  /* Real logo mark; 1.58:1, so height drives it and width follows. */
  .brand__mark { height: 34px; width: auto; flex: none; }
  .brand__name { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; line-height: 1.05; }
  .brand__sub { font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

  /* ============================================================
     HERO
     ============================================================ */
  .hero { position: relative; overflow: hidden; padding-block: clamp(44px, 6vw, 78px) clamp(52px, 7vw, 88px); }
  .hero::before {
    content: "";
    position: absolute;
    top: -16%; right: -12%;
    width: 62vw; height: 116%;
    /* closest-side so the wash fades fully before the box edge — no seam */
    background: radial-gradient(circle closest-side at 50% 50%, var(--blue-dim), transparent);
    opacity: .8;
    pointer-events: none;
  }
  .hero__in { position: relative; display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
  @media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } }

  .hero h1 { margin-bottom: 20px; }
  .hero .lede { margin-bottom: 30px; }
  .hero__acts { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 22px; }

  .hero__hours {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 14.5px; color: var(--ink-2);
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; margin-top: 7px; }

  /* Hero subject is a transparent cutout sitting straight on the page, with
     the flyer's overlapping circles behind it instead of a photo frame. */
  .hero__art {
    position: relative;
    display: grid;
    place-items: end center;
    min-height: 340px;
  }
  .hero__blob,
  .hero__blob--sm {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }
  .hero__blob {
    width: min(98%, 470px);
    aspect-ratio: 1;
    bottom: 2%;
    background: var(--blue-dim);
  }
  /* Tucked behind the dog's shoulder so the two discs overlap the way the
     flyer's colour circles do, rather than floating as a loose dot. */
  .hero__blob--sm {
    width: min(34%, 165px);
    aspect-ratio: 1;
    left: 2%;
    bottom: 26%;
    background: var(--lime);
    opacity: .55;
  }
  .hero__cut {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 470px;
    height: auto;
    /* drop-shadow follows the alpha edge, so the dog reads as standing on the
       page rather than floating in a rectangle. */
    filter: drop-shadow(0 26px 22px rgba(35,46,92,.18));
  }
  @media (max-width: 900px) {
    .hero__art { min-height: 0; margin-top: 8px; }
    .hero__cut { max-width: 340px; }
  }

  .badge-float {
    position: absolute; top: 20px; left: -18px;
    z-index: 2;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 19px 10px 15px;
    box-shadow: var(--shadow-md);
    display: flex; align-items: center; gap: 11px;
  }
  .badge-float b { font-family: var(--display); font-size: 15px; line-height: 1.1; }
  .badge-float span { font-size: 11.5px; color: var(--ink-3); line-height: 1.25; }
  @media (max-width: 900px) { .badge-float { left: 14px; } }

  /* ============================================================
     TRUST STRIP
     ============================================================ */
  .trust { background: var(--card); border-block: 1px solid var(--line-soft); }
  .trust__in { display: grid; grid-template-columns: repeat(4, 1fr); }
  .trust__i { padding: 28px 18px; text-align: center; border-left: 1px solid var(--line-soft); }
  .trust__i:first-child { border-left: 0; }
  .trust__n { font-family: var(--display); font-weight: 700; font-size: clamp(23px, 3vw, 31px); color: var(--navy); line-height: 1.05; }
  .trust__l { font-size: 13px; color: var(--ink-3); margin-top: 7px; line-height: 1.4; }
  @media (max-width: 720px) {
    .trust__in { grid-template-columns: 1fr 1fr; }
    .trust__i:nth-child(3) { border-left: 0; }
    .trust__i:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  }

  /* ============================================================
     INCLUDED BAND — the core differentiator
     ============================================================ */
  .incl { background: var(--navy); color: #fff; }
  .incl .eyebrow { color: color-mix(in srgb, var(--blue-dim) 90%, #fff); }
  .incl__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
  @media (max-width: 860px) { .incl__grid { grid-template-columns: 1fr; } }
  .incl h2 { margin-bottom: 16px; }
  .incl p { color: rgba(255,255,255,.86); }

  .incl__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; }
  @media (max-width: 520px) { .incl__list { grid-template-columns: 1fr; } }
  .incl__row {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.17);
    font-size: 15.5px;
  }
  .incl__row svg { flex: none; color: var(--blue-dim); }

  /* ============================================================
     MONTHLY BOARD
     ============================================================ */
  .board {
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 5px solid var(--lime);
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 44px);
    text-align: center;
    box-shadow: var(--shadow-md);
  }
  .board h2 { margin-bottom: 12px; }
  .board .lede { margin-inline: auto; }

  .board__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 30px 0 28px;
    text-align: left;
  }
  @media (max-width: 680px) { .board__facts { grid-template-columns: 1fr; } }
  .fact {
    background: var(--lime-dim);
    border-radius: var(--r-md);
    padding: 17px 20px;
  }
  .fact__k {
    display: block;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--navy); margin-bottom: 6px;
  }
  .fact__v { display: block; font-size: 15.5px; line-height: 1.45; }

  /* ============================================================
     PRICING
     ============================================================ */
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

  .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px 26px 30px;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
  }
  .card--feature { border-color: var(--blue); box-shadow: var(--shadow-md); position: relative; }
  .card__tag {
    position: absolute; top: -12px; left: 26px;
    background: var(--navy); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: 6px 13px; border-radius: 999px;
  }
  .card h3 { margin-bottom: 6px; }
  .card__price { font-family: var(--display); font-weight: 700; font-size: 27px; color: var(--navy); margin-bottom: 4px; }
  .card__price small { font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--ink-3); display: block; letter-spacing: 0; }
  .card__desc { font-size: 15px; color: var(--ink-2); margin-block: 12px 16px; }
  .card ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; color: var(--ink-2); }
  .card li { display: flex; gap: 9px; align-items: flex-start; }
  .card li svg { flex: none; color: var(--blue); margin-top: 4px; }
  .card .btn { margin-top: auto; }

  .price-note {
    margin-top: 22px; font-size: 14px; color: var(--ink-3);
    display: flex; gap: 9px; align-items: flex-start;
  }

  /* ============================================================
     SIMPLE PRICE TABLE
     ============================================================ */
  .ptable { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
  .ptable__r {
    display: flex; align-items: baseline; gap: 16px;
    padding: 15px 22px;
    border-top: 1px solid var(--line-soft);
    font-size: 15.5px;
  }
  .ptable__r:first-child { border-top: 0; }
  .ptable__r b { font-weight: 600; }
  .ptable__r span { margin-left: auto; font-weight: 700; color: var(--navy); white-space: nowrap; }
  .ptable__r em { font-style: normal; font-size: 13.5px; color: var(--ink-3); }

  .two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 44px); align-items: start; }
  @media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

  /* ============================================================
     CATS
     ============================================================ */
  .cat__media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .cat__media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

  /* ============================================================
     CRAFT / SCISSOR
     ============================================================ */
  .craft { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 58px); align-items: center; }
  @media (max-width: 860px) { .craft { grid-template-columns: 1fr; } }
  .craft__img { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .craft__img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

  /* ============================================================
     GALLERY
     ============================================================ */
  .gal { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
  @media (max-width: 720px) { .gal { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .gal__i { margin: 0; aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--blue-dim); }
  .gal__i img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.22,.68,.36,1); }
  .gal__i:hover img { transform: scale(1.045); }
  @media (prefers-reduced-motion: reduce) { .gal__i:hover img { transform: none; } }

  /* ============================================================
     TEAM
     ============================================================ */
  .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 900px) { .team { grid-template-columns: 1fr; } }
  .person {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 13px;
  }
  .person__ph {
    width: 74px; height: 74px; border-radius: 50%;
    background: var(--blue-dim); border: 1px solid var(--line);
    display: grid; place-items: center; color: var(--navy);
    font-family: var(--display); font-weight: 700; font-size: 25px;
  }
  .person h3 { margin-bottom: 2px; }
  .person__role { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); font-weight: 700; }
  .person p { font-size: 14.5px; color: var(--ink-2); }
  .person--empty { border-style: dashed; background: transparent; }

  /* ============================================================
     REVIEWS
     ============================================================ */
  .revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 900px) { .revs { grid-template-columns: 1fr; } }
  .rev {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 24px;
    display: flex; flex-direction: column; gap: 13px;
  }
  .stars { display: flex; gap: 3px; color: var(--gold); }
  .rev p { font-size: 15px; color: var(--ink-2); }
  .rev__who { font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-top: auto; }

  .award {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--lime-dim); border: 1px solid var(--lime);
    border-radius: 999px; padding: 11px 22px 11px 17px;
    font-size: 15px; font-weight: 600;
  }

  /* ============================================================
     SOCIAL
     ============================================================ */
  /* The flyer's lime, used full-bleed. Navy text, never white. */
  .social { background: var(--lime); color: var(--navy-deep); }
  .social__in { display: flex; align-items: center; gap: clamp(18px, 4vw, 40px); flex-wrap: wrap; }
  .social__in h2 { flex: 1 1 340px; }
  .social__in p { color: rgba(30,40,83,.82); flex: 1 1 300px; }
  .social__acts { display: flex; gap: 12px; flex-wrap: wrap; }

  /* ============================================================
     VISIT
     ============================================================ */
  .info { display: flex; flex-direction: column; gap: 3px; }
  .info__r { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
  .info__r:last-child { border-bottom: 0; }
  .info__k { font-weight: 600; min-width: 122px; flex: none; font-size: 15px; }
  .info__v { font-size: 15px; color: var(--ink-2); }
  .info__v a { color: var(--navy); font-weight: 600; text-decoration: none; }
  .info__v a:hover { text-decoration: underline; }

  /* ============================================================
     FINAL CTA
     ============================================================ */
  .final {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(38px, 6vw, 66px) clamp(24px, 5vw, 56px);
    text-align: center;
    box-shadow: var(--shadow-md);
  }
  .final h2 { margin-bottom: 14px; }
  .final .lede { margin-inline: auto; margin-bottom: 28px; }
  .final__acts { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

  /* ============================================================
     FOOTER
     ============================================================ */
  .ftr { background: var(--navy-deep); color: rgba(251,246,236,.8); padding-block: 54px 28px; }
  .ftr__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
  @media (max-width: 760px) { .ftr__in { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 460px) { .ftr__in { grid-template-columns: 1fr; } }
  .ftr h4 { font-family: var(--body); font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--lime); margin-bottom: 14px; font-weight: 700; }
  .ftr a { color: inherit; text-decoration: none; }
  .ftr a:hover { color: #fff; text-decoration: underline; }
  .ftr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
  .ftr__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
  .ftr__brand .brand__name { color: #fff; }
  .ftr__brand .brand__sub { color: rgba(251,246,236,.5); }
  .ftr__bot {
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid rgba(251,246,236,.14);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 13px; color: rgba(251,246,236,.55);
  }

  /* ============================================================
     STICKY MOBILE BAR
     ============================================================ */
  .mbar {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    display: none; gap: 10px; padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
  }
  .mbar .btn { flex: 1; padding-inline: 14px; }
  @media (max-width: 720px) { .mbar { display: flex; } body { padding-bottom: 78px; } }

  /* ============================================================
     MOTION
     ============================================================ */
  .rise { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.68,.36,1); }
  .rise.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; transition: none; }
    * { scroll-behavior: auto !important; }
  }
  html { scroll-behavior: smooth; }
  :focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
  /* ============================================================
     ADDITIONS — mobile nav, price tiers, FAQ
     ============================================================ */

  /* Mobile navigation ---------------------------------------- */
  .navtoggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    flex: none;
  }
  .navtoggle:hover { border-color: var(--blue); background: var(--blue-dim); }
  .navtoggle svg { pointer-events: none; }
  .navtoggle .ico-x { display: none; }
  .navtoggle[aria-expanded="true"] .ico-x { display: block; }
  .navtoggle[aria-expanded="true"] .ico-bars { display: none; }

  .mobnav {
    display: none;
    border-top: 1px solid var(--line-soft);
    background: var(--paper);
    padding: 10px var(--pad) 18px;
  }
  .mobnav.is-open { display: block; }
  .mobnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .mobnav a {
    display: block;
    padding: 14px 2px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
  }
  .mobnav a:last-child { border-bottom: 0; }
  .mobnav .btn { width: 100%; margin-top: 16px; }

  @media (max-width: 1000px) {
    .navtoggle { display: inline-flex; }
  }
  @media (min-width: 1001px) {
    .mobnav { display: none !important; }
  }

  /* Size-tier price tables ------------------------------------ */
  .tier {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 24px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
  }
  .tier--feature { border-color: var(--blue); box-shadow: var(--shadow-md); position: relative; }
  .tier h3 { margin-bottom: 6px; }
  .tier__what { font-size: 14.5px; color: var(--ink-2); margin-bottom: 18px; }
  .tier__rows { display: flex; flex-direction: column; margin-bottom: 20px; }
  .tier__r {
    display: flex; align-items: baseline; gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 15.5px;
  }
  .tier__r:last-child { border-bottom: 0; }
  .tier__r b { font-weight: 600; }
  .tier__r span {
    margin-left: auto; font-weight: 700; color: var(--navy);
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .tier .btn { margin-top: auto; }

  .booknote {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--blue-dim);
    border-radius: var(--r-md);
    padding: 15px 18px;
    font-size: 14.5px;
    color: var(--ink-2);
    max-width: 62ch;
  }
  .booknote svg { flex: none; margin-top: 2px; color: var(--navy); }

  /* Add-on columns -------------------------------------------- */
  .addons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
  @media (max-width: 700px) { .addons { grid-template-columns: 1fr; } }

  /* FAQ -------------------------------------------------------- */
  .faqs { max-width: 820px; display: flex; flex-direction: column; gap: 11px; }
  .faq {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .faq summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 17px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "";
    width: 10px; height: 10px;
    border-right: 2.5px solid var(--navy);
    border-bottom: 2.5px solid var(--navy);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .22s ease;
    flex: none;
  }
  .faq[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .faq__a { padding: 0 22px 20px; font-size: 15.5px; color: var(--ink-2); max-width: 68ch; }

  /* Visually hidden via clip rather than a negative offset — an off-canvas
     position can add phantom scroll width on some browsers. */
  .skip {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .skip:focus {
    position: fixed; top: 0; left: 0;
    width: auto; height: auto;
    margin: 0; padding: 12px 20px;
    overflow: visible;
    clip: auto; clip-path: none;
    background: var(--navy); color: #fff;
    border-radius: 0 0 10px 0;
    z-index: 100;
  }
  /* ============================================================
     INSTAGRAM EMBEDS
     Instagram's embed.js swaps each blockquote for its own iframe on the live
     site. It is blocked inside the Artifact preview, so the blockquote must
     stand on its own as a presentable card — these rules dress the fallback
     and are harmless once the real embed takes over.
     ============================================================ */
  .igwrap { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
  @media (max-width: 860px) { .igwrap { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

  .instagram-media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: var(--card);
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    padding: 0 !important;
  }
  .instagram-media > a {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 24px;
    text-decoration: none;
    color: inherit;
    min-height: 210px;
  }
  .ig__mark {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--blue-dim);
    display: grid; place-items: center;
    color: var(--navy);
  }
  .ig__cap { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
  .ig__meta { font-size: 12.5px; color: var(--ink-3); }
  .ig__cta {
    margin-top: auto;
    font-weight: 700; font-size: 14.5px; color: var(--navy);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .instagram-media > a:hover .ig__cta { text-decoration: underline; }