/* self-hosted fonts (latin) */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorantgaramond-500i.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/cormorantgaramond-600i.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorantgaramond-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorantgaramond-600.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dmsans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dmsans-500.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dmsans-700.woff2) format('woff2')}

  :root{
    --paper:#FAF6EF;
    --paper-2:#F2ECE1;
    --ink:#2B2620;
    --ink-soft:#5C544A;
    --gold:#A5824E;
    --gold-deep:#8D6E3F;
    --gold-pale:#D8C39A;
    --line:rgba(43,38,32,.14);
    --line-dark:rgba(250,246,239,.2);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"DM Sans",system-ui,sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--gold-pale);color:var(--ink)}

  /* nav */
  nav{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;max-width:none;padding:0 clamp(20px,3.6vw,46px)}
  .brand{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.32rem;letter-spacing:.01em;white-space:nowrap}
  .brand em{font-style:italic;font-weight:500;color:var(--gold)}
  .brand{display:inline-flex;align-items:center}
  .brand img{display:block;height:52px;width:auto}
  @media(max-width:520px){.brand img{height:40px}}
  .navlinks{display:flex;gap:clamp(14px,1.9vw,34px);align-items:center}
  .navlinks > a:not(.btn){font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft);transition:color .25s;white-space:nowrap}
  .navlinks > a:not(.btn):hover{color:var(--gold-deep)}
  .btn{
    display:inline-block;background:var(--ink);color:var(--paper);
    font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
    padding:15px 30px;border-radius:999px;border:none;cursor:pointer;white-space:nowrap;
    transition:background .25s,transform .25s,box-shadow .25s;
  }
  .btn:hover{background:var(--gold-deep);transform:translateY(-1px);box-shadow:0 14px 30px rgba(141,110,63,.28)}
  .btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
  .btn-ghost:hover{background:transparent;color:var(--gold-deep);border-color:var(--gold);box-shadow:none}
  @media(max-width:1080px){.navlinks > a:not(.btn){display:none}}


  /* MOBILE MENU (2026-08-11, rebuilt JS-free). First version used a <button>
     plus a script in site.js. It worked in every emulator and did not open on
     a real iPhone, and every remaining suspect (a cached site.js, an earlier
     IIFE throwing and halting the file before this one ran, an iOS click
     quirk) shared one root: it depended on JavaScript. This is now a native
     <details>/<summary> disclosure, so the open and close are done by the
     browser itself and no script has to run at all. The FAQ blocks on this
     site already use <details>, so nothing new was introduced. */
  .navmenu{display:none;position:static}
  .navmenu > summary.navtoggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
  .navmenu > summary.navtoggle::-webkit-details-marker{display:none}
  .navmenu > summary.navtoggle::marker{content:""}
  .navtoggle .bars{display:block;width:16px;height:10px;position:relative;flex:none}
  .navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s ease}
  .navtoggle .bars::before{top:0}
  .navtoggle .bars::after{bottom:0}
  .navmenu[open] .bars::before{transform:translateY(4px) rotate(45deg)}
  .navmenu[open] .bars::after{transform:translateY(-4px) rotate(-45deg)}
  .sitemenu{position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 26px 52px rgba(43,38,32,.16);max-height:calc(100vh - 78px);overflow-y:auto}
  .sitemenu ul{list-style:none;margin:0;padding:2px clamp(20px,3.6vw,46px) 16px}
  .sitemenu li{border-top:1px solid var(--line)}
  .sitemenu li:first-child{border-top:none}
  .sitemenu a{display:block;padding:17px 2px;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);transition:color .25s}
  .sitemenu a:hover,.sitemenu a:focus-visible{color:var(--gold-deep)}
  @media(max-width:1080px){
    .navlinks .btn:not(.navtoggle){display:none}
    .navmenu{display:block}
  }

  /* hero */
  .hero{position:relative;padding:104px 0 116px;background:radial-gradient(1100px 520px at 72% -12%,rgba(165,130,78,.12),transparent 62%)}
  .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center}
  .eyebrow{
    display:flex;align-items:center;gap:16px;
    font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.32em;color:var(--gold-deep);
    margin-bottom:28px;
  }
  .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
  h1{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(2.5rem,5.2vw,3.9rem);line-height:1.14;letter-spacing:.05em;margin-bottom:26px;text-transform:uppercase}
  h1 em,h2 em{font-style:italic;font-weight:400;color:var(--gold-deep);margin-left:.1em}
  .lead{font-size:1.12rem;color:var(--ink-soft);max-width:37ch;margin-bottom:40px}
  .hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

  /* photo strip */
  .strip{
    background:#fff;padding:13px 13px 40px;border:1px solid var(--line);
    box-shadow:0 34px 70px rgba(43,38,32,.22);transform:rotate(3deg);
    width:212px;margin:0 auto;position:relative;
  }
  .strip .strip-loc{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:.6rem;font-weight:700;color:#A79A87;letter-spacing:.3em}
  .frame{height:118px;margin-bottom:10px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:8px;background:var(--paper-2)}
  .frame:last-of-type{margin-bottom:0}
  .frame span{font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(43,38,32,.55);padding:3px 8px;position:relative;z-index:2}
  .frame img,
  .frame video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  @media(max-width:880px){.hero{padding:72px 0 84px}.hero-grid{grid-template-columns:1fr;gap:56px}.strip{transform:rotate(-2deg)}}

  /* band */
  .band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--paper-2)}
  .band .wrap{display:flex;gap:14px 0;flex-wrap:wrap;justify-content:center;align-items:center;font-size:.72rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.22em}
  /* Separator is an INLINE ::after on every item but the LAST, never an
     absolutely positioned ::before on every item but the first. CSS cannot tell
     that a flex item has landed at the start of a wrapped line, so a leading
     separator orphans as a stray dot the moment the copy is one word too long.
     That is not hypothetical: .wrap carries 28px of padding a side, so the real
     budget is 1064px, and the kit's own placeholder band needed 1122px and wrapped.
     A trailing separator can only ever END a line, which reads as continuation.
     The 18px separator margin is measured, not picked: against the kit's own
     placeholder copy 22px fits by 2px and 24px wraps, so 18px leaves ~26px for
     a client whose copy runs a little longer. Do NOT make it vw-fluid: .wrap is
     capped at 1120px, so a wider viewport grows the margin without giving any
     more room and the band starts wrapping at 1440 while fitting at 1120.
     Under 720px the dots are removed outright, so a stacked band has nothing
     to orphan. If four items still wrap on desktop, the copy is too long. */
  .band span{padding:0}
  .band span:not(:last-child)::after{content:"·";margin:0 18px;color:var(--gold)}
  @media(max-width:720px){
    .band span{padding:0 13px}
    .band span:not(:last-child)::after{content:none}
  }

  /* ---------- the claims band scrolls (owner, 2026-09-23) ---------- */
  /* Every static band in this kit wrapped to two lines on a 1440 desktop and
     left a separator dangling at the end of line one, so the component was
     wrong, not the copy. It drifts now, built exactly like design-03's areas
     ticker (.arp-track): ONE track holding the item list TWICE, translated by
     half its width, spacing carried by the items themselves so the seam is the
     same gap as every other pair. No JavaScript: it runs with scripts off.
     THE LIST MUST BE WRITTEN TWICE, WORD FOR WORD, or the loop jumps every
     cycle. That repetition is also what the site editor recognises: a container
     of 4+ same-tag text children whose sequence repeats makes clicking any item
     open the band dialog, which shows the list ONCE and rebuilds every copy on
     save (site_editor_client.js bandInfoFrom / writeBandTracks). An earlier cut
     of this band cloned the second copy at runtime instead; that hid the
     repetition from the editor, so no dialog opened, and the clone carried
     duplicate data-ve ids into the document.
     .wrap stays ON the track so services.css's .band.s-hero .wrap colour still
     lands; its box properties are overridden here.
     NO aria-hidden on any of these bands. NOT because it would block editing:
     it does not, and an earlier version of this comment said so wrongly.
     Measured 2026-09-23 on Charisma, design-03's .arp-ticker is aria-hidden and
     its band dialog opens normally. The reason is the occasion page's band,
     which holds the ONE visible price on that page and must stay announced, and
     the four bands are kept consistent rather than split on a rule nobody would
     remember. The cost is a screen reader reading the list twice. */
  .band.is-tick{padding:0}
  .band.is-tick .bd-tick{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .band.is-tick .bd-track{display:flex;flex-wrap:nowrap;align-items:center;width:max-content;max-width:none;margin:0;padding:22px 0;gap:0}
  .band.is-tick .bd-tick:hover .bd-track{animation-play-state:paused}
  .band.is-tick .bd-track>span{padding:0;white-space:nowrap}
  /* Every item carries its separator, the last one included: a loop has no last
     item and the seam needs the same rhythm as every other pair. */
  .band.is-tick .bd-track>span::after{content:"\00B7";margin:0 18px;color:var(--gold)}
  .band.is-tick .bd-track{animation:banddrift 38s linear infinite}
  @keyframes banddrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){
    /* Stopping a max-content track would clip everything past the viewport, so
       reduced motion returns the band to the centred wrapping strip it was. */
    .band.is-tick .bd-track{animation:none;width:100%;max-width:1120px;margin:0 auto;padding:22px 28px;flex-wrap:wrap;justify-content:center;gap:14px 0}
    .band.is-tick .bd-track>span{white-space:normal}
  }

  /* sections */
  section{padding:104px 0}
  .alt{background:var(--paper-2)}
  .sec-eyebrow{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.32em;color:var(--gold-deep);margin-bottom:18px}
  h2{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(1.9rem,3.6vw,2.6rem);letter-spacing:.06em;line-height:1.18;margin-bottom:18px;text-transform:uppercase}
  .sec-lead{color:var(--ink-soft);max-width:58ch;font-size:1.04rem}

  /* Reconciled list: the card count is the client's package count, not the
   demo's. Flex-wrap + justify-content:center keeps a trailing row of 1 or 2
   centred instead of stranded; a full row renders identically to the grid. */
.booths{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:54px}
  .booths > .booth{flex:0 1 calc((100% - 22px) / 2 - 0.5px);min-width:260px;}
  .booth{display:block;background:#fff;border:1px solid var(--line);padding:38px 36px;transition:border-color .3s,transform .3s,box-shadow .3s}
  .booth:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 22px 44px rgba(43,38,32,.1)}
  .booth .num{font-size:.68rem;font-weight:700;letter-spacing:.28em;color:var(--gold)}
  .booth h3{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.7rem;margin:16px 0 10px}
  .booth p{color:var(--ink-soft);font-size:.97rem}
  .booth img,
  .booth video {display:block;width:calc(100% + 72px);height:210px;object-fit:cover;object-position:50% 30%;margin:-38px -36px 26px}
  @media(max-width:680px){.booths > .booth{flex:1 1 100%}}

  /* tags */
  .tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
  .tag{border:1px solid var(--line);border-radius:999px;padding:11px 24px;font-size:.92rem;color:var(--ink-soft);background:transparent;transition:border-color .25s,color .25s}
  .tag:hover{border-color:var(--gold);color:var(--gold-deep)}

  /* gallery */
  .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
  .gallery-grid figure{overflow:hidden;border:1px solid var(--line)}
  .gallery-grid img,
  .gallery-grid video {display:block;width:100%;height:320px;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
  .gallery-grid figure:hover img,
  .gallery-grid figure:hover video {transform:scale(1.045)}
  @media(max-width:680px){.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-grid img,
.gallery-grid video {height:210px}}

  /* gallery belt (homepage) */
  .gbelt{margin-top:56px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .gbelt-track{display:flex;width:max-content;padding:24px 0 46px;animation:gdrift 46s linear infinite}
  .gbelt:hover .gbelt-track{animation-play-state:paused}
  @keyframes gdrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .gbelt-item{position:relative;width:250px;flex:none;margin-right:34px}
  .gbelt-item:nth-child(even){transform:translateY(22px)}
  .gbelt-item::after{content:"";position:absolute;inset:-11px;border:1px solid var(--gold-pale);pointer-events:none;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
  .gbelt-ph{position:relative;height:330px;overflow:hidden;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
  .gbelt-ph img,
  .gbelt-ph video {display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
  .gbelt-item:hover .gbelt-ph{transform:translateY(-8px)}
  .gbelt-item:hover .gbelt-ph img,
  .gbelt-item:hover .gbelt-ph video {transform:scale(1.07)}
  .gbelt-item:hover::after{transform:translate(7px,9px)}
  @media(max-width:680px){.gbelt-item{width:200px;margin-right:26px}.gbelt-ph{height:266px}}
  @media(prefers-reduced-motion:reduce){.gbelt-track{animation:none}.gbelt{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:56px}
  .step .n{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:2.7rem;color:var(--gold);line-height:1}
  .step h3{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.45rem;margin:18px 0 8px}
  .step p{color:var(--ink-soft);font-size:.96rem}
  @media(max-width:680px){.steps{grid-template-columns:1fr;gap:36px}}

  /* faq */
  .faq{max-width:760px;margin:44px auto 0}
  .faq details{border-bottom:1px solid var(--line);padding:24px 0}
  .faq details:first-of-type{border-top:1px solid var(--line)}
  .faq summary{
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.32rem;cursor:pointer;
    list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-size:1.5rem;color:var(--gold);flex-shrink:0;transition:transform .3s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{color:var(--ink-soft);font-size:.98rem;padding-top:14px;max-width:62ch}

  /* booking */
  .final{background:var(--ink);color:var(--paper);text-align:center;position:relative}
  .final::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 50% 0%,rgba(165,130,78,.16),transparent 65%);pointer-events:none}
  .final .wrap{position:relative}
  .final .sec-eyebrow{color:var(--gold-pale)}
  .final h2{font-size:clamp(2.4rem,5vw,3.6rem)}
  .final h2 em{color:var(--gold-pale)}
  .final>.wrap>p{color:rgba(250,246,239,.72);max-width:48ch;margin:0 auto 40px}

  /* form */
  .form{max-width:580px;margin:0 auto;text-align:left;display:grid;gap:18px}
  .form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .form .row>div{min-width:0}
  .form label{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--gold-pale);margin-bottom:8px}
  .form input,.form select,.form textarea{
    width:100%;background:rgba(250,246,239,.05);border:1px solid var(--line-dark);border-radius:4px;
    padding:14px 15px;color:var(--paper);font-family:"DM Sans",sans-serif;font-size:1rem;transition:border-color .25s;
  }
  .form select option{color:var(--ink)}
  .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
  .form .flash{border-color:var(--gold);box-shadow:0 0 0 3px rgba(165,130,78,.3)}
  .form textarea{min-height:98px;resize:vertical}
  /* iOS Safari sizes input[type=date] from its own date text plus the picker
     indicator and will not shrink it below that, so on a phone the field runs
     out past the rest of the form. Desktop WebKit does not do this, which is
     why it never showed up in the headless sweep. Drop the native appearance
     and let the field take its track's width like every other control. */
  .form input[type="date"]{
    -webkit-appearance:none;appearance:none;
    min-width:0;max-width:100%;text-align:left;
    min-height:51px; /* appearance:none can collapse an empty date field on iOS;
                        this is the height the other controls already render at,
                        so it is inert everywhere it is not needed */
  }
  .form input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0;min-width:0}
  .form input[type="date"]::-webkit-calendar-picker-indicator{margin-left:auto}

  /* OPTIONAL package select + add-on checkbox group (present only when the
     client's onboarding asked; RECONCILED from client_packages on every portal
     save — src/site_prices.js). Dark-toned to sit inside the booking form. */
  .addon-picks{border:1px solid var(--line-dark);border-radius:4px;padding:14px 15px 17px}
  .addon-picks legend{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,246,239,.75);padding:0 6px}
  .addon-picks label{display:flex;align-items:flex-start;gap:9px;font-size:.95rem;line-height:1.5;color:var(--paper);margin-top:9px;cursor:pointer;text-transform:none;letter-spacing:normal;font-weight:400;margin-bottom:0}
  .addon-picks input[type="checkbox"]{width:16px;height:16px;flex:0 0 auto;margin-top:2px;accent-color:var(--gold)}
  @media(min-width:620px){.addon-picks{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.addon-picks legend{grid-column:1/-1}}
  /* A <legend> sits IN the fieldset's top border, and the browser cuts the
     border gap for its FIRST LINE ONLY. This client's legend needs 316px and
     the fieldset's content box offers 290px at a 390px viewport, so it wraps
     and the border is drawn straight between the two lines: "Which add-ons are
     you interested" outside the box, a hairline through the gap, "in?" inside
     it. Measured wrapping at 404px and below with the webfont, and at 414px and
     below while the fallback font is swapping in, on all five form pages.
     Floating the legend takes it out of the border entirely (label above, one
     unbroken box below) which is the same fix design-04 already carries for
     this element. The labels need clear:both or, being display:flex, they form
     a BFC, refuse to sit beside the 100%-wide float, collapse to zero width and
     throw their text off the right edge. Above 425px nothing changes: the
     legend fits on one line and keeps the kit's notched border. */
  @media(max-width:425px){
    .addon-picks{padding-top:11px}
    .addon-picks legend{float:left;width:100%;padding:0 0 8px}
    .addon-picks label{clear:both}
  }

  .form .btn{width:100%;margin-top:6px;padding:17px;background:var(--gold);color:var(--ink)}
  .form .btn:hover{background:var(--gold-pale);box-shadow:0 14px 34px rgba(0,0,0,.35)}
  .form-alt{margin-top:18px;font-size:.9rem;color:rgba(250,246,239,.6);text-align:center}
  .form-alt a{color:var(--gold-pale);border-bottom:1px solid rgba(216,195,154,.4)}
  .hp{position:absolute;left:-9999px}
  @media(max-width:560px){.form .row{grid-template-columns:1fr}}

  footer{border-top:1px solid var(--line);padding:44px 0;color:var(--ink-soft);font-size:.86rem}
  footer .footrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
  footer em{font-style:normal;color:var(--gold-deep)}

  /* reveal */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}

  @media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}html{scroll-behavior:auto}}

  /* internal links */
  .textlink{color:var(--gold-deep);border-bottom:1px solid var(--gold-pale);transition:color .2s}
  .textlink:hover{color:var(--gold)}
  .footlinks{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;margin-bottom:28px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em}
  .footlinks a{color:var(--ink-soft);transition:color .2s}
  .footlinks a:hover{color:var(--gold-deep)}

  /* pricing cards */
  .price{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:2.3rem;color:var(--gold-deep);line-height:1;margin:12px 0 2px}
  /* The coverage caption takes its own line (layout audit 2026-09-18). It was
     inline beside the price, which is right for the kit's two-word placeholder
     ("Iusto iusto") next to a $450. This client's captions are "three hours of
     coverage" and the prices are $1,499.99, and the .booths grid column is only
     276-279px, so the caption broke mid-phrase: "$1,499.99 three hours of" on
     line one and a stranded "coverage" under the price on line two, at desktop
     and on every phone width. As a block it stays one unbroken phrase, and the
     .price box gets SHORTER (51.2px vs 73.6px), so nothing below it moves down. */
  .price small{display:block;font-size:.9rem;font-family:"DM Sans",sans-serif;color:var(--ink-soft);font-weight:400}
  .booth ul{list-style:none;margin-top:16px}
  .booth li{padding:7px 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.93rem}
  .booth li b{color:var(--ink);font-weight:600}

  /* venue guide */
  .venue{border-top:1px solid var(--line);padding:30px 0}
  .venue:last-of-type{border-bottom:1px solid var(--line)}
  .venue h3{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.5rem;margin-bottom:8px}
  .venue p{color:var(--ink-soft);max-width:64ch}
  .venue .bn{margin-top:10px;font-style:italic;color:var(--gold-deep);font-size:.95rem}

  /* editorial hero (homepage) */
  .ed{padding:0 0 96px;color:#fff;background-color:#000;background-image:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),url(images/hero-bg.webp);background-size:auto,cover;background-position:center;background-attachment:fixed,fixed}
  @media(hover:none){
    .ed,.fixbg{background-image:none;clip-path:inset(0)}
    .ed::before,.fixbg::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-color:#000;background-image:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),url(images/hero-bg.webp);background-size:auto,cover;background-position:center}
    .ed-grid,.fixbg .wrap{position:relative;z-index:1}
  }
  .ed-grid{display:grid;grid-template-columns:44% 1fr;align-items:center;padding-top:56px}
  .ed-photo{position:relative;margin-left:3vw;z-index:1}
  .ed-photo img,
  .ed-photo video {display:block;width:100%;height:min(66vh,620px);object-fit:cover;box-shadow:0 40px 80px rgba(43,38,32,.25)}
  .ed-photo::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold-pale);z-index:-1}
  .ed-copy{padding:0 13vw 0 4.5vw}
  .ed-copy .eyebrow{margin-bottom:26px;color:var(--gold-pale)}
  .ed-copy .eyebrow::before{background:var(--gold-pale)}
  .ed h1{font-weight:500;font-size:clamp(2.4rem,4.3vw,4rem);line-height:1.06;letter-spacing:.04em;margin-bottom:0}
  .ed h1 em{display:block;text-transform:none;font-weight:500;font-size:clamp(1.9rem,3vw,2.7rem);letter-spacing:.02em;margin:16px 0 0;color:var(--gold-pale)}
  .ed .lead{margin:26px 0 0;max-width:44ch;color:rgba(255,255,255,.82)}
  .ed .hero-cta{margin-top:46px}
  .btn-ed{position:relative;display:inline-block;background:var(--gold);color:var(--ink);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;padding:20px 46px;transition:background .3s}
  .btn-ed::after{content:"";position:absolute;inset:7px -7px -7px 7px;border:1px solid var(--gold-pale);pointer-events:none;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
  .btn-ed:hover{background:var(--gold-pale)}
  .btn-ed:hover::after{transform:translate(-7px,-7px)}
  .btn-ed:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  .ed-float{position:absolute;z-index:2}
  .ed-float img,
  .ed-float video {display:block;width:100%;object-fit:cover}
  .ed-f1{top:8%;right:3.5%;width:158px}
  .ed-f1 img,
  .ed-f1 video {height:206px;box-shadow:0 24px 48px rgba(43,38,32,.2)}
  .ed-f2{top:58%;right:-64px;width:210px;filter:grayscale(1);opacity:.92}
  .ed-f2 img,
  .ed-f2 video {height:280px}
  @media(max-width:1280px){.ed-float{display:none}.ed-copy{padding-right:6vw}}
  @media(max-width:880px){.ed{padding-bottom:72px}.ed-grid{grid-template-columns:1fr;gap:44px;padding-top:40px}.ed-photo{margin:0 8vw}.ed-photo img,
.ed-photo video {height:52vh}.ed-copy{padding:0 28px}}
  @media(prefers-reduced-motion:no-preference){
    .ed-photo{animation:edrise 1s cubic-bezier(.2,.6,.2,1) both .05s}
    .ed-copy{animation:edfade 1s ease both .3s}
    .ed-float{animation:edfade 1s ease both .55s}
  }
  @keyframes edrise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  @keyframes edfade{from{opacity:0}to{opacity:1}}

  /* fixed-image dark section */
  .fixbg{color:#fff;background-color:#000;background-image:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),url(images/hero-bg.webp);background-size:auto,cover;background-position:center;background-attachment:fixed,fixed}
  .fixbg .sec-eyebrow{color:var(--gold-pale)}
  .fixbg h2 em{color:var(--gold-pale)}
  .fixbg .tag{border-color:rgba(250,246,239,.35);color:rgba(250,246,239,.85);transition:background .25s,border-color .25s,color .25s}
  .fixbg .tag:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

  /* venue pin map (homepage) */
  .v1-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .v1-note{margin-top:26px;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-size:1.2rem;color:var(--gold-deep)}
  .v1-map{position:relative;height:580px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
  .v1-map canvas{position:absolute;inset:0;width:100%;height:100%}
  .v1-star{position:absolute;z-index:3;transform:translate(-50%,-50%);text-align:center}
  .v1-star .s{display:block;width:16px;height:16px;margin:0 auto;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
  .v1-star .t{display:block;font-size:.66rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-top:6px}
  .v1-pin{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px}
  .v1-pin:hover{z-index:6}
  .v1-pin .d{width:8px;height:8px;border-radius:50%;background:var(--gold-deep);box-shadow:0 0 0 4px rgba(165,130,78,.18);transition:transform .3s,box-shadow .3s;flex:none}
  .v1-pin .l{font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);background:rgba(250,246,239,.85);padding:3px 9px;border:1px solid var(--line);white-space:nowrap;transition:color .3s,border-color .3s}
  .v1-pin:hover .d{transform:scale(1.5);box-shadow:0 0 0 7px rgba(165,130,78,.22)}
  .v1-pin:hover .l{color:var(--gold-deep);border-color:var(--gold)}
  .v1-pin .pol{position:absolute;bottom:calc(100% + 12px);left:50%;width:118px;background:#fff;padding:6px 6px 20px;box-shadow:0 18px 36px rgba(43,38,32,.28);transform:translateX(-50%) rotate(-5deg) scale(.85);opacity:0;transition:opacity .3s,transform .3s cubic-bezier(.2,.6,.2,1);pointer-events:none;z-index:5}
  .v1-pin .pol img,
  .v1-pin .pol video {display:block;width:100%;height:96px;object-fit:cover}
  .v1-pin:hover .pol{opacity:1;transform:translateX(-50%) rotate(-3deg) scale(1)}
  .v1-pin.flip .pol{bottom:auto;top:calc(100% + 12px)}
  .v1-scale{position:absolute;left:18px;bottom:14px;z-index:3;font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:10px}
  .v1-scale .bar{width:64px;height:1px;background:var(--gold-deep);position:relative}
  .v1-scale .bar::before,.v1-scale .bar::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--gold-deep)}
  .v1-scale .bar::after{right:0}
  .v1-hint{position:absolute;left:18px;top:14px;z-index:3;font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
  @media(hover:none){.v1-hint{display:none}}
  .v1-north{position:absolute;right:16px;top:12px;z-index:3;font-size:.7rem;font-weight:700;color:var(--gold-deep);letter-spacing:.1em;text-align:center}
  .v1-north::after{content:"";display:block;width:1px;height:22px;background:var(--gold-deep);margin:4px auto 0}
  @media(max-width:900px){.v1-grid{grid-template-columns:1fr;gap:44px}.v1-map{height:460px}.v1-pin .l{font-size:.62rem;padding:2px 6px}}

  /* how-it-works scroll sequence (homepage) */
  .seq-nums,.seq-figs,.seq-cue,.seq-bar{display:none}
  .seq-txts .seq-t{max-width:560px;margin-bottom:40px}
  .seq-t .k{font-size:.66rem;font-weight:700;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
  .seq-t h3{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:.07em;text-transform:uppercase;margin:12px 0 14px}
  .seq-t p{color:var(--ink-soft);max-width:42ch;font-size:1.02rem}
  .seq-head{margin-bottom:44px}
  .seq-live{padding:0;height:320vh}
  /* svh, not vh, and the vh line is the fallback (layout audit 2026-09-23).
     iOS resolves BOTH 100vh and a max-height media query against the LARGE
     viewport, the one with the toolbar retracted, so on a real iPhone this pane
     was 844px tall inside 664px of visible page and the short-viewport rules
     below (max-height:800px, max-height:660px) never fired. Everything the pane
     puts at its bottom therefore sat under the fold, and inside a sticky pane
     that is permanently unreachable: page scroll advances the section, it never
     reveals the pane's own remainder. Measured against real iPhone geometry
     (lvh viewport, svh visible): "Keep scrolling" and all three progress-rail
     labels were off-screen at every size from 440x956/736 down, and at
     375x812/632 and 360x780/600 the last line of the step copy was cut through
     its middle. Sizing the pane to the SMALL viewport puts it exactly where the
     visitor can see it; the existing flex rules (body flex:1 1 auto, photo
     shrinking to its 96px floor, text slot flex:0 0 auto) then absorb the
     difference, measured clean at 440/430/414/402/393/390/375/360 wide.
     Desktop and Android are unaffected: svh equals vh wherever no browser
     chrome collapses. */
  .seq-live .seq-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .seq-live .seq-head{position:absolute;top:110px;left:0;right:0;margin:0 auto}
  .seq-live .seq-body{display:grid;grid-template-columns:.72fr 1.05fr 340px;gap:52px;align-items:center;width:100%}
  .seq-live .seq-nums{display:block;position:relative;height:320px}
  .seq-nums span{position:absolute;inset:0;display:flex;align-items:center;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:clamp(10rem,16vw,16rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--gold);opacity:0;transform:translateY(44px);transition:opacity .55s ease,transform .55s ease}
  .seq-nums span.on{opacity:1;transform:none}
  .seq-live .seq-txts{position:relative;min-height:240px}
  .seq-live .seq-t{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s ease}
  .seq-live .seq-t.on{opacity:1;transform:none}
  .seq-live .seq-figs{display:block;position:relative;height:400px;margin-right:14px}
  .seq-f{position:absolute;inset:0;opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s ease}
  .seq-f.on{opacity:1;transform:none}
  .seq-f .m{position:relative;display:block;height:100%}
  .seq-f img,
  .seq-f video {width:100%;height:100%;object-fit:cover;display:block;box-shadow:0 30px 60px rgba(43,38,32,.18)}
  .seq-f .m::after{content:"";position:absolute;inset:12px -12px -12px 12px;border:1px solid var(--gold-pale);z-index:-1}
  .seq-live .seq-cue{display:flex;position:absolute;bottom:100px;left:50%;transform:translateX(-50%);flex-direction:column;align-items:center;gap:9px;font-size:.62rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);transition:opacity .4s}
  .seq-cue .chev{width:10px;height:10px;border-right:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);transform:rotate(45deg);animation:seqbob 1.6s ease-in-out infinite}
  @keyframes seqbob{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.45}50%{transform:rotate(45deg) translate(5px,5px);opacity:1}}
  .seq-cue.hide{opacity:0}
  .seq-live .seq-bar{display:block;position:absolute;left:0;right:0;bottom:44px}
  .seq-bar .rail{max-width:1064px;margin:0 auto;height:1px;background:var(--line);position:relative}
  .seq-bar .fill{position:absolute;left:0;top:-0.5px;height:2px;width:0;background:var(--gold)}
  .seq-bar .lab{max-width:1064px;margin:10px auto 0;display:flex;justify-content:space-between;font-size:.6rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);padding:0 2px}
  @media(max-width:860px){
    .seq-live .seq-head{top:86px}
    .seq-live .seq-head h2{font-size:1.35rem;letter-spacing:.05em}
    .seq-live .seq-pin{justify-content:flex-start;padding-top:200px}
    .seq-live .seq-body{display:flex;flex-direction:column;gap:22px}
    .seq-live .seq-nums{display:none}
    .seq-live .seq-figs{order:-1;height:25vh;width:100%;margin-right:0}
    .seq-f .m::after{inset:9px -9px -9px 9px}
    .seq-live .seq-txts{min-height:185px;width:100%}
    .seq-live .seq-cue{bottom:66px}
    .seq-live .seq-bar{bottom:30px}
  }

  /* THE CUE AND THE PROGRESS RAIL COLLIDE WHENEVER THE RAIL'S LABELS WRAP
     (layout audit 2026-09-23). Both bands are absolutely positioned from the
     pane's bottom edge with offsets that assume the three labels fit on ONE
     line. They do not below ~460px wide with the webfont, or below ~490px while
     the fallback font is swapping in, and a second line makes the bar 17px
     taller, which lifts its top edge into the "Keep scrolling" cue: measured at
     360/375/390/414/430/440/450/460 wide, the grey rail was drawn at y=826
     through cue text occupying 817-834, straight across the letters, and below
     801px of viewport height the label block sat on top of the cue text as
     well. It was invisible on iPhone only because the whole band was below the
     fold before the svh fix above. Moving the rail a little nearer the edge and
     the cue a little further from it gives the two-line bar its own room; the
     pin's reserved bottom padding grows to match so flow copy still cannot
     reach the furniture. 560px, not 460, because the trigger is the label wrap
     and the fallback font wraps later than the webfont; above it the labels are
     one line and the cue simply keeps a wider gap. */
  @media(max-width:560px){
    .seq-live .seq-pin{padding-bottom:112px}
    .seq-live .seq-cue{bottom:70px}
    .seq-live .seq-bar{bottom:16px}
  }
  @media(max-width:560px) and (max-height:800px){
    .seq-live .seq-pin{padding-bottom:104px}
    .seq-live .seq-cue{bottom:64px}
    .seq-live .seq-bar{bottom:10px}
  }

  /* ---- Event time combo menu (2026-08-13; enhancement lives in site.js).
     The wrap stays a plain block so it takes the input's cell in .form .row. */
  .tc-wrap{position:relative;display:block}
  .tc-menu{
    position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:100%;
    max-height:236px;overflow:auto;background:var(--paper);border:1px solid var(--line);
    border-radius:10px;padding:6px;box-shadow:0 12px 34px rgba(43,38,32,.26);
  }
  .tc-opt{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    width:100%;text-align:left;font:inherit;font-size:.9rem;color:var(--ink);
    padding:7px 10px;border:0;background:none;border-radius:7px;cursor:pointer;
    white-space:nowrap;
  }
  .tc-opt .dur{color:var(--ink-soft);font-size:.8rem}
  .tc-opt:hover{background:var(--paper-2)}
  .tc-opt.hl{background:var(--gold-pale);color:var(--ink);font-weight:600}
  .tc-opt.hl .dur{color:var(--ink)}

/* PHONES: 104px of section padding top AND bottom spends 208px of a 844px
   screen on a single seam between two sections (measured 2026-09-24 at the
   packages to add-ons boundary). 56px still reads as a break and gives back
   96px per seam. Scoped to the phone breakpoint, so every desktop width is
   byte for byte what it was. Sections that set their own padding by CLASS
   (.hero, .seq-live and friends) outrank this element selector and are
   untouched on purpose. */
@media(max-width:600px){section{padding:56px 0}}