/* Arielle the Officiant. Shared by index.html and officiant-prep.html.
   Lifted verbatim out of the index.html <style> block on 2026-08-19 when the
   site stopped being one page; the only edit was making the hero image path
   root-absolute, since it now resolves against /assets/ rather than the page. */
  :root{
    --bg:#FBF7F1;          /* warm ivory */
    --bg-alt:#F2E9DC;      /* warm sand */
    --ink:#2B2723;         /* espresso near-black */
    --ink-soft:#5F564B;    /* warm taupe text */
    --accent:#9C5A4C;      /* rosewood / clay */
    --accent-deep:#7E4539;
    --gold:#B4894E;        /* warm gold hairlines */
    --line:#E4D8C8;        /* warm border */
    --white:#FFFFFF;
    --serif:'Cormorant Garamond', Georgia, serif;
    --sans:'Jost', system-ui, sans-serif;
    --maxw:1200px;
  }
  *{box-sizing:border-box;}
  /* The browser's own [hidden] rule loses to any author display: rule, so a
     .form-grid{display:grid} element stays on screen after we hide it. Restate
     it here where it outranks them. */
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--sans); font-weight:300; line-height:1.7;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.08; margin:0;}
  p{margin:0 0 1em;}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  .kicker{
    font-family:var(--sans); font-weight:500; font-size:.72rem;
    letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
  }
  .rule{width:56px; height:1px; background:var(--gold); border:0; margin:20px 0;}
  .rule.center{margin:20px auto;}

  /* ---------- Nav ---------- */
  /* --navp is the nav's 0-to-1 fill, written by JS from the scroll position. Tying the
     bar to position rather than a timed transition keeps it smooth at any scroll speed. */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:calc(20px - 6px * var(--navp,0)) 28px;
    background:rgba(251,247,241,var(--navp,0));
    box-shadow:0 1px 0 rgba(228,216,200,var(--navp,0));
  }
  nav .brand{font-family:var(--serif); font-size:1.6rem; letter-spacing:.02em; color:var(--white); transition:color .35s ease;}
  nav .links{display:flex; gap:30px; align-items:center;}
  nav .links a{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white); opacity:.92; transition:color .35s ease, opacity .2s ease;}
  nav .links a:hover{opacity:1;}
  nav .btn-nav{
    border:1px solid rgba(255,255,255,.6); padding:9px 20px; border-radius:2px;
    color:var(--white); transition:background .2s ease, color .35s ease, border-color .35s ease;
  }
  nav .btn-nav .bn-short{display:none;}
  nav.scrolled .brand{color:var(--ink);}
  nav.scrolled .links a{color:var(--ink-soft);}
  nav.scrolled .btn-nav{border-color:var(--accent); color:var(--accent);}
  nav.scrolled .btn-nav:hover{background:var(--accent); color:var(--white);}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-block; font-family:var(--sans); font-weight:500;
    font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
    padding:16px 34px; border-radius:2px; cursor:pointer; border:1px solid transparent;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn-solid{background:var(--accent); color:var(--white);}
  .btn-solid:hover{background:var(--accent-deep);}
  .btn-ghost{border-color:var(--ink); color:var(--ink);}
  .btn-ghost:hover{background:var(--ink); color:var(--bg);}

  /* ---------- Hero ---------- */
  header.hero{
    position:relative; min-height:100vh; min-height:100dvh;
    display:flex; align-items:center; color:var(--white); overflow:hidden;
    padding:clamp(84px,11vh,132px) 0 clamp(44px,7vh,72px);
  }
  .hero-bg{
    position:absolute; left:0; right:0; top:-15%; height:130%; z-index:0;
    background:url('/assets/hero.jpg') center 42%/cover no-repeat;
    will-change:transform;
  }
  /* Real ceremony footage plays as a quiet loop over the still fallback (desktop/tablet only) */
  .hero-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:50% 40%; z-index:1; will-change:transform;
  }
  /* Legibility scrim so white type stays readable over photo OR video (functional, not decoration) */
  .hero-scrim{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      radial-gradient(135% 115% at 50% 34%, transparent 42%, rgba(28,22,18,.44) 100%),
      linear-gradient(180deg, rgba(35,28,24,.46) 0%, rgba(35,28,24,.16) 44%, rgba(35,28,24,.66) 100%),
      linear-gradient(0deg, rgba(156,90,76,.10), rgba(126,69,57,.10));
  }
  .hero-inner{position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding:0 28px; width:100%; will-change:transform,opacity;}
  .hero .kicker{color:rgba(255,255,255,.92); text-shadow:0 1px 12px rgba(0,0,0,.3);}
  /* Hero type is sized by viewport HEIGHT as well as width, so the CTAs stay
     above the fold on short laptop windows instead of being pushed under it. */
  .hero h1{
    font-size:clamp(2.9rem, min(8.5vw, 11.5vh), 6.6rem); font-weight:400; letter-spacing:.005em;
    margin:.22em 0 .28em; max-width:15ch; text-shadow:0 2px 30px rgba(0,0,0,.25);
  }
  .hero .promise{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(1.15rem, min(2.4vw, 3vh), 1.7rem); max-width:46ch; line-height:1.55;
    color:rgba(255,255,255,.95);
    margin-bottom:clamp(1.1em, 3.4vh, 2.1em); text-shadow:0 1px 16px rgba(0,0,0,.35);
  }
  .hero-cta{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
  .hero .btn-ghost{border-color:rgba(255,255,255,.7); color:var(--white);}
  .hero .btn-ghost:hover{background:var(--white); color:var(--ink);}
  .scrollcue{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
    font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.8);
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .scrollcue span{width:1px; height:36px; background:rgba(255,255,255,.6); animation:cue 2.2s ease-in-out infinite;}
  @keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6);}50%{opacity:1; transform:scaleY(1);}}
  .ph-tag{
    position:absolute; z-index:3; bottom:16px; right:18px;
    font-family:var(--sans); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
    color:rgba(255,255,255,.85); background:rgba(35,28,24,.55); border:1px solid rgba(255,255,255,.25);
    padding:5px 10px; border-radius:2px;
  }

  /* ---------- Sections ---------- */
  section{padding:clamp(72px,10vw,128px) 0;}
  .band{background:var(--bg-alt);}
  .sec-head{max-width:640px;}
  .sec-head.center{margin:0 auto; text-align:center;}
  .sec-head h2{font-size:clamp(2rem,4.4vw,3.2rem); margin-top:.18em;}
  .lead{font-size:1.12rem; color:var(--ink-soft); max-width:60ch;}

  /* About */
  .about-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,84px); align-items:center;}
  .about-photo{position:relative; aspect-ratio:4/5; border-radius:3px; overflow:hidden; box-shadow:0 18px 44px -26px rgba(43,39,35,.4);}
  .about-photo img{width:100%; height:100%; object-fit:cover;}
  .about-photo .ph-frame{position:absolute; bottom:12px; left:12px;}
  .about-family{max-width:480px; margin:clamp(40px,6vw,72px) auto 0; padding:0 28px;}
  .about-family img{width:100%; border-radius:3px; box-shadow:0 18px 44px -26px rgba(43,39,35,.4);}
  .about h2{font-size:clamp(2rem,4.4vw,3.1rem);}
  .about .signoff{font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--accent); margin-top:10px;}
  .stat-row{display:flex; gap:40px; margin:30px 0 4px; flex-wrap:wrap;}
  .stat .n{font-family:var(--serif); font-size:2.6rem; color:var(--ink); line-height:1;}
  .stat .l{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);}

  /* Trust chips */
  .chips{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
  .chip{font-size:.76rem; letter-spacing:.06em; color:var(--ink-soft); border:1px solid var(--line); padding:8px 15px; border-radius:40px; background:var(--white);}

  /* Instagram carousel */
  .ig-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .ig-carousel{
    display:flex; gap:18px; margin-top:40px; overflow-x:auto; padding-bottom:10px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  }
  .ig-carousel::-webkit-scrollbar{height:6px;}
  .ig-carousel::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px;}
  .ig-item{
    flex:0 0 auto; width:min(68vw,408px); aspect-ratio:4/5; scroll-snap-align:start;
    position:relative; overflow:hidden; border-radius:3px; background:var(--bg);
  }
  .ig-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .ig-item:hover img{transform:scale(1.05);}
  .ig-glyph{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(35,28,24,0); opacity:0; transition:opacity .3s ease, background .3s ease;
    font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:#fff;
  }
  .ig-item:hover .ig-glyph{opacity:1; background:rgba(35,28,24,.34);}
  .ig-note{margin-top:18px; font-size:.82rem; color:var(--ink-soft);}
  /* Behold live Instagram feed (replaces the manual carousel; grid/theme configured in the Behold dashboard) */
  behold-widget{display:block; margin-top:40px;}

  /* Ceremonies / pricing */
  .price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px;}
  .card{
    background:var(--white); border:1px solid var(--line); border-radius:4px;
    padding:30px 26px; display:flex; flex-direction:column; cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .card:hover{transform:translateY(-4px); box-shadow:0 20px 36px -28px rgba(43,39,35,.4); border-color:var(--gold);}
  .card:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  .card .cat{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);}
  .card h3{font-size:1.5rem; margin:12px 0 6px; font-weight:500;}
  .card .price{font-family:var(--serif); font-size:2.1rem; color:var(--ink);}
  .card .price .from{display:block; font-family:var(--sans); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:3px;}
  .card ul{list-style:none; padding:0; margin:18px 0 0; font-size:.9rem; color:var(--ink-soft);}
  .card ul li{padding:7px 0 7px 20px; position:relative; border-top:1px solid var(--line);}
  .card ul li::before{content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border:1px solid var(--gold); border-radius:50%;}
  .card-cta{
    margin-top:auto; padding-top:20px; font-family:var(--sans); font-weight:500;
    font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
    display:inline-flex; align-items:center; gap:8px; opacity:.9; transition:gap .2s ease, opacity .2s ease;
  }
  .card:hover .card-cta{opacity:1; gap:12px;}
  .price-note{margin-top:26px; font-size:.82rem; color:var(--ink-soft); text-align:center;}
  .prep{margin-top:44px; text-align:center;}
  .prep .prep-line{font-size:.95rem; color:var(--ink-soft);}
  .prep strong{color:var(--ink); font-weight:500;}

  /* County price picker */
  .county-picker{display:none; flex-direction:column; align-items:center; gap:12px; margin-top:48px;}
  .county-picker.cp-ready{display:flex;}
  .county-picker .cp-q{font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);}
  .cp-seg{display:flex; flex-direction:column; gap:8px; width:100%; max-width:560px;}
  .cp-btn{
    display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:left; width:100%;
    font-family:var(--sans); font-size:.92rem; color:var(--ink); background:var(--white);
    border:1px solid var(--line); border-radius:6px; padding:13px 18px; cursor:pointer;
    transition:border-color .2s ease, background .2s ease, color .2s ease;
  }
  .cp-btn:hover{border-color:var(--gold);}
  .cp-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .cp-btn .cp-tag{font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;}
  .cp-btn[aria-pressed=true]{background:var(--ink); color:var(--white); border-color:var(--ink);}
  .cp-btn[aria-pressed=true] .cp-tag{color:rgba(255,255,255,.72);}
  .cp-note{font-size:.82rem; color:var(--ink-soft); text-align:center; min-height:1.1em; margin-top:2px;}
  .travel-note{display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.02em; color:var(--ink-soft); margin-top:7px;}
  .picker-active .travel-note{display:none;}
  .flat-tag{display:block; font-family:var(--sans); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:7px;}

  /* Officiant Prep block */
  .prep-block{margin-top:26px; background:var(--white); border:1px solid var(--line); border-radius:4px; padding:28px 30px;}
  .prep-block .cat{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);}
  .prep-block h3{font-size:1.5rem; font-weight:500; margin:6px 0 0;}
  .prep-block h3{max-width:34ch;}
  .prep-block .pb-sub{font-size:.92rem; color:var(--ink-soft); margin:12px 0 4px; max-width:62ch;}
  /* What prep covers. Two columns so five short lines don't run down the page. */
  .prep-block .pb-list{
    list-style:none; padding:0; margin:16px 0 4px; font-size:.9rem; color:var(--ink-soft);
    display:grid; grid-template-columns:repeat(2,1fr); gap:0 32px;
  }
  .prep-block .pb-list li{padding:5px 0 5px 20px; position:relative;}
  .prep-block .pb-list li::before{content:""; position:absolute; left:0; top:13px; width:6px; height:6px; border:1px solid var(--gold); border-radius:50%;}
  .prep-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--line); cursor:pointer; transition:padding-left .2s ease;}
  .prep-row:first-of-type{margin-top:12px;}
  .prep-row:hover{padding-left:6px;}
  .prep-row:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  .prep-row .pr-name{font-size:.98rem; color:var(--ink);}
  .prep-row:hover .pr-name{color:var(--accent);}
  .prep-row .pr-price{font-family:var(--serif); font-size:1.5rem; color:var(--ink); white-space:nowrap;}
  /* Closing note: which rows are geography-bound, and which are not. */
  .prep-block .pb-foot{margin:0; padding-top:16px; border-top:1px solid var(--line); font-size:.82rem; color:var(--ink-soft);}
  .prep-block .pb-foot span{display:block; max-width:70ch;}

  /* Venues */
  .taglist{display:flex; flex-wrap:wrap; align-items:baseline; margin-top:22px; line-height:2;}
  .taglist span{font-size:.94rem; color:var(--ink);}
  .taglist span:not(:last-child)::after{content:"·"; color:var(--gold); margin:0 13px; font-weight:600;}

  /* Testimonials */
  .test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
  .test{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:30px; position:relative;}
  .test .mark{font-family:var(--serif); font-size:3.4rem; color:var(--gold); line-height:.6; opacity:.5;}
  .test p{font-family:var(--serif); font-style:italic; font-size:1.18rem; color:var(--ink); line-height:1.45;}
  .test .who{font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:14px;}

  /* Inquiry form */
  .inquire{background:var(--ink); color:var(--bg); color-scheme:dark;}   /* dark scheme so the native date pickers match */
  .inquire .kicker{color:var(--gold);}
  .inquire h2{color:var(--bg); font-size:clamp(2rem,4.4vw,3.2rem);}
  .inquire .lead{color:rgba(251,247,241,.72);}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; margin-top:44px; max-width:820px;}
  .field{display:flex; flex-direction:column; gap:8px;}
  .field.full{grid-column:1 / -1;}
  .field label{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,247,241,.6);}
  .field input,.field select,.field textarea{
    background:transparent; border:0; border-bottom:1px solid rgba(251,247,241,.28);
    color:var(--bg); font-family:var(--sans); font-size:1rem; padding:10px 2px; transition:border-color .3s ease;
  }
  .field textarea{resize:vertical; min-height:70px;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold);}
  .field select option{color:var(--ink);}
  /* Service picker: the options stay on screen instead of hiding behind a dropdown */
  .svc-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:2px;}
  .svc-opt input{position:absolute; opacity:0; width:0; height:0;}
  .svc-opt span{
    display:inline-block; border:1px solid rgba(251,247,241,.28); border-radius:2px;
    padding:11px 18px; font-family:var(--sans); font-size:.8rem; letter-spacing:.1em;
    text-transform:uppercase; color:rgba(251,247,241,.82); cursor:pointer;
    transition:border-color .2s ease, background .2s ease, color .2s ease;
  }
  .svc-opt span:hover{border-color:var(--gold); color:var(--bg);}
  .svc-opt input:checked + span{background:var(--gold); border-color:var(--gold); color:var(--ink);}
  .svc-opt input:focus-visible + span{outline:2px solid var(--gold); outline-offset:3px;}
  /* Photo upload: the real file input is hidden behind a pill that matches the service picker,
     since every browser styles the native one differently and all of them look wrong here. */
  .photo-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:2px;}
  .photo-field input[type=file]{position:absolute; opacity:0; width:0; height:0;}
  .photo-field label.photo-pick{
    display:inline-block; border:1px solid rgba(251,247,241,.28); border-radius:2px;
    padding:11px 18px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(251,247,241,.82); cursor:pointer;
    transition:border-color .2s ease, background .2s ease, color .2s ease;
  }
  .photo-field label.photo-pick:hover{border-color:var(--gold); color:var(--bg);}
  .photo-field input[type=file]:focus-visible + label.photo-pick{outline:2px solid var(--gold); outline-offset:3px;}
  .photo-name{font-size:.86rem; color:rgba(251,247,241,.5);}
  .photo-name.has-file{color:rgba(251,247,241,.82);}
  .photo-clear{background:none; border:0; padding:0; font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); cursor:pointer;}
  .photo-clear:hover{color:var(--bg);}
  .form-actions{grid-column:1/-1; display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:8px;}
  .inquire .btn-solid{background:var(--gold); color:var(--ink);}
  .inquire .btn-solid:hover{background:#c99a5f;}
  .form-note{font-size:.8rem; color:rgba(251,247,241,.55);}
  .form-error{margin:0; font-size:.86rem; color:#F0B8A8;}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}   /* spam trap, never seen */
  .form-thanks{margin-top:44px; max-width:640px;}
  .form-thanks .thanks-line{font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,3vw,2rem); line-height:1.36; color:var(--bg); margin-top:14px;}
  .form-thanks .signoff-inq{font-family:var(--serif); font-size:1.3rem; color:var(--gold); margin-top:18px;}
  .field input.invalid,.field textarea.invalid{border-color:var(--accent);}

  /* Footer */
  footer{background:var(--bg-alt); padding:64px 0 48px; text-align:center;}
  footer .fbrand{font-family:var(--serif); font-size:2rem; color:var(--ink);}
  footer .fmeta{margin-top:14px; font-size:.86rem; color:var(--ink-soft); letter-spacing:.04em;}
  footer .fmeta a{color:var(--accent);}
  footer .fsocial{margin-top:20px; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);}
  footer .credit{margin-top:34px; font-size:.68rem; color:var(--ink-soft); opacity:.7;}

  /* Reveal */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1; transform:none;}
  .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}

  @media (max-width:900px){
    /* Section links go, but the inquiry button stays: it's the one thing you can't
       reach by scrolling once you're deep in the page. */
    nav .links a:not(.btn-nav){display:none;}
    .about-grid{grid-template-columns:1fr; gap:44px;}
    .price-grid{grid-template-columns:1fr 1fr;}
    .test-grid{grid-template-columns:1fr;}
    .form-grid{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .price-grid{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    /* Compact bar so the wordmark and the button both fit on a phone */
    nav{padding:calc(16px - 4px * var(--navp,0)) 20px;}
    nav .brand{font-size:1.3rem;}
    nav .btn-nav{padding:8px 15px; font-size:.7rem; letter-spacing:.12em;}
    nav .btn-nav .bn-long{display:none;}
    nav .btn-nav .bn-short{display:inline;}
    .prep-block .pb-list{grid-template-columns:1fr;}
    /* Clear the fixed nav and frame the hero on the couple (portrait crop cuts the sides) */
    header.hero{padding:76px 0 64px;}
    .hero-bg{top:-8%; height:116%; background-position:44% 42%;}
    /* Play the video on phones too, framed on the couple; the still stays the reduced-motion fallback */
    .hero-video{object-position:50% 34%;}
  }
  @media (prefers-reduced-motion:reduce){
    *{scroll-behavior:auto !important;}
    .reveal{opacity:1; transform:none; transition:none;}
    .scrollcue span{animation:none;}
    .hero-bg{transform:none;}
    .hero-video{display:none;}
  }

/* ---------- Officiant prep page ---------- */
/* Everything below is only used by officiant-prep.html. It reuses the hero, the
   band, the card and the form rules above rather than restating them; these are
   the handful of shapes that page needs and the homepage does not. */

/* This page is one column of reading rather than the homepage's grids and cards,
   so the homepage's section rhythm leaves it looking half empty. Tighten it. */
.page-prep section{padding:clamp(58px,7.5vw,96px) 0;}

/* Shorter hero. The page has to make its point above the fold, but the nav type
   is white until you scroll, so it still needs a photo behind it. */
header.hero.hero-compact{min-height:0; padding:clamp(148px,22vh,206px) 0 clamp(70px,10vh,104px);}
.hero-compact .hero-bg{top:-10%; height:120%; background-position:center 36%;}
.hero-compact h1{font-size:clamp(2.3rem, min(6.2vw,8vh), 4.3rem); max-width:19ch;}
.hero-compact .promise{max-width:52ch;}
/* Two promise lines on the prep page: the question, then the answer. Only the last
   one keeps the big gap before the buttons. */
.hero-compact .promise:not(:last-of-type){margin-bottom:.55em;}

/* Prose beside a portrait, so the opening section is not a column of type with a
   blank half-page next to it. Collapses to one column on the same breakpoint the
   homepage's about grid uses. */
.why-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,76px); align-items:start; margin-top:8px;}
.why-grid .about-photo{position:sticky; top:104px;}

.prose{max-width:66ch;}
.prose p{color:var(--ink-soft);}
.prose p.lede{font-size:1.12rem;}
.prose strong{color:var(--ink); font-weight:500;}
/* The worries couples actually name, in her words. A list rather than paragraphs,
   because they are questions in a row and nothing answers them until further down. */
.worries{list-style:none; padding:0; margin:14px 0 22px; color:var(--ink-soft);}
.worries li{padding:6px 0 6px 22px; position:relative;}
.worries li::before{content:""; position:absolute; left:0; top:14px; width:6px; height:6px; border:1px solid var(--gold); border-radius:50%;}

/* Numbered walk-through of what actually happens, in her order */
.steps{list-style:none; counter-reset:step; padding:0; margin:44px 0 0; max-width:68ch;}
.steps li{position:relative; margin-left:15px; padding:0 0 30px 46px; border-left:1px solid var(--line);}
.steps li:last-child{border-left-color:transparent; padding-bottom:0;}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:-15px; top:-4px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--gold); border-radius:50%;
  font-family:var(--serif); font-size:1rem; color:var(--accent);
}
.band .steps li::before{background:var(--bg-alt);}
.steps li h3{font-size:1.3rem; margin-bottom:6px;}
.steps li p{margin:0; font-size:.96rem; color:var(--ink-soft);}

.pull{margin:44px 0 0; padding-left:24px; border-left:2px solid var(--gold); max-width:58ch;}
.pull p{font-family:var(--serif); font-style:italic; font-size:1.32rem; line-height:1.45; color:var(--ink); margin:0;}
.pull .who{margin-top:10px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);}

/* Price. One number, then what it covers, then the two local add-ons fenced off. */
.price-panel{
  background:var(--white); border:1px solid var(--line); border-radius:4px;
  padding:clamp(28px,4vw,42px); margin-top:44px;
  display:grid; grid-template-columns:minmax(190px,auto) 1fr; gap:clamp(26px,5vw,54px); align-items:start;
}
.price-panel .big{font-family:var(--serif); font-size:clamp(3.4rem,7vw,4.6rem); line-height:1; color:var(--ink); white-space:nowrap;}
.price-panel .big span{display:block; font-family:var(--sans); font-size:.7rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:12px; white-space:normal;}
.incl{list-style:none; padding:0; margin:0; font-size:.95rem; color:var(--ink-soft);}
.incl li{padding:9px 0 9px 20px; position:relative; border-top:1px solid var(--line);}
.incl li:first-child{border-top:0;}
.incl li::before{content:""; position:absolute; left:0; top:17px; width:6px; height:6px; border:1px solid var(--gold); border-radius:50%;}
.incl li:first-child::before{top:8px;}
.addons{grid-column:1/-1; margin-top:6px; padding-top:22px; border-top:1px solid var(--line);}
.addons .ao-head{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 6px;}
.addon-row{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.95rem; color:var(--ink-soft);}
.addon-row .ar-price{font-family:var(--serif); font-size:1.25rem; color:var(--ink); white-space:nowrap;}
.addons .ao-foot{margin:14px 0 0; font-size:.82rem; color:var(--ink-soft);}
.addons .ao-foot a{color:var(--accent); border-bottom:1px solid var(--accent);}
.pay-note{margin-top:20px; font-size:.86rem; color:var(--ink-soft);}

/* FAQ. Closed by default so the page stays scannable; each one is a real question
   couples ask, which is also the only part of this page with a shot at ranking. */
.faq{max-width:940px; margin-top:44px;}
.faq details{border-bottom:1px solid var(--line);}
.faq details:first-of-type{border-top:1px solid var(--line);}
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:20px 44px 20px 0; font-family:var(--serif); font-size:1.26rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-weight:300; font-size:1.5rem; line-height:1; color:var(--accent);
}
.faq details[open] summary::after{content:"\2013";}
.faq summary:hover{color:var(--accent);}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.faq .a{padding:0 44px 24px 0; max-width:68ch;}
.faq .a p{margin:0 0 .9em; font-size:.98rem; color:var(--ink-soft);}
.faq .a p:last-child{margin-bottom:0;}
.faq .a em{font-style:italic; color:var(--ink);}

/* The homepage's short pointer at this page, in place of the block that moved here */
.prep-cta{margin-top:26px; background:var(--white); border:1px solid var(--line); border-radius:4px; padding:30px 32px;}
.prep-cta .cat{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);}
.prep-cta h3{font-size:1.5rem; font-weight:500; margin:8px 0 0; max-width:30ch;}
.prep-cta p{margin:12px 0 0; font-size:.95rem; color:var(--ink-soft); max-width:64ch;}
.prep-cta p strong{color:var(--ink); font-weight:500;}
.prep-cta .pc-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); transition:gap .2s ease;
}
.prep-cta .pc-link:hover{gap:13px;}
.prep-cta .pc-link span{border-bottom:1px solid var(--accent); padding-bottom:2px;}

@media (max-width:900px){
  .why-grid{grid-template-columns:1fr; gap:40px;}
  .why-grid .about-photo{position:static; max-width:420px;}
}
@media (max-width:760px){
  .price-panel{grid-template-columns:1fr; gap:24px;}
}
/* On a phone the hero crops to a narrow vertical slice of a landscape photo, and
   dead center lands on the groom alone. Shift left to the same spot the homepage
   hero uses on phones, so the crop holds both of them. The vertical value is inert
   at this shape: a container this tall crops horizontally only. */
@media (max-width:640px){
  .hero-compact .hero-bg{background-position:44% 36%;}
}