/* 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{--nav-h:78px;
    --paper:#191A1D;
    --paper-2:#212327;
    --ink:#ECEDEF;
    --ink-soft:#A8ABB2;
    --gold:#9AA1AC;
    --gold-deep:#C4CAD3;
    --gold-pale:#DDE0E5;
    --line:rgba(236,237,239,.14);
    --line-dark:rgba(236,237,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:var(--nav-h,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 img{display:block;height:41px;width:auto}
  @media(max-width:520px){.brand img{height:31px}}
  @media(max-width:520px){:root{--nav-h:78px}}
  .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 - var(--nav-h,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. The canonical legend this block ships
     with ("Which add-ons are you interested in?", the string 30 of the 34
     add-on fieldsets across the live builds carry) 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 in this kit at 404px and below with the webfont, and at 414px and
     below while the fallback font is swapping in, on every page whose form
     carries the block. 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 notched
     border. The fieldset itself is OPTIONAL markup (site_prices.js writes it
     into a build when the client's onboarding asked for add-ons), so the kit
     renders no legend to look at; this was measured by injecting the
     reconciler's own markup at runtime. */
  @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}
  .price small{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-24).
     A phone browser 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 is 844px tall inside 664px of visible page and the short-viewport
     rules below (max-height:800px, max-height:660px) never fire. Everything the
     pane puts at its bottom therefore sits 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 on this kit against real
     phone geometry (lvh viewport, svh visible): the scroll cue and all three
     progress-rail labels were off-screen at every size from 440x956/736 down,
     and at 393x852/672, 390x844/664, 375x812/632 and 360x780/600 the step copy
     was cut at the fold as well. 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. Desktop and Android windows 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-24). Both bands are absolutely positioned from the
     pane's bottom edge with offsets that assume the three labels fit on ONE
     line. THE KIT'S OWN LOREM LABELS DO FIT, at every width down to 320px in
     both font states, so the kit cannot show this bug and a sweep of the kit
     alone reads clean. Real client labels do not: they are the three step
     eyebrows, and a real set ("Send your details" / "Choose your experience" /
     "Reserve the date") wraps to two lines at 460px and below with the webfont
     and at 490px and below while the fallback font swaps in. Substituting a
     real set into this kit reproduces it exactly: the grey rail drawn at y=826
     through cue text occupying 817-834, straight across the letters, at
     320/360/375/390/402/414/430/440/450/460 wide; below 801px of viewport
     height the label block lands on the cue text too. 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 is unchanged, so the copy
     keeps every pixel it had. 560px, NOT the 460 this kit's lorem would
     suggest: the trigger is the label wrap, the fallback font wraps later than
     the webfont, and the threshold has to hold for copy nobody has written yet.
     Above it the labels are one line and the cue simply keeps a wider gap. */
  @media(max-width:560px){
    /* The cue stays exactly where the kit put it and the pin keeps its reserved
       112px, so this costs the step copy nothing; the clearance is bought by
       moving the rail nearer the edge and tightening its own label gap. */
    .seq-live .seq-bar{bottom:18px}
    .seq-bar .lab{margin-top:6px}
  }
  @media(max-width:560px) and (max-height:800px){
    .seq-live .seq-pin{padding-bottom:100px}
    .seq-live .seq-cue{bottom:56px}
    .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}}

/* Graphite colorway, folded in verbatim from public/designs/05/colorways.css */
nav { background:rgba(25, 26, 29,.88) }
.hero:not(.ed) { background:radial-gradient(1100px 520px at 72% -12%,rgba(154,161,172,.1),transparent 62%) }
.strip::after { color:#9AA1AC }
.strip { box-shadow:0 34px 70px rgba(0,0,0,.55) }
.frame span { background:rgba(15,16,18,.55) }
.booth { background:#24262B }
.booth:hover { box-shadow:0 22px 44px rgba(0,0,0,.4) }
.btn:hover { box-shadow:0 14px 30px rgba(0,0,0,.45) }
.final { background:#101113;color:#ECEDEF }
.final::before { background:radial-gradient(900px 420px at 50% 0%,rgba(154,161,172,.12),transparent 65%) }
.final>.wrap>p { color:rgba(236, 237, 239,.72) }
.areas { color:rgba(236, 237, 239,.55) }
.form input, .form select, .form textarea { background:rgba(236, 237, 239,.05);color:#ECEDEF;color-scheme:dark }
.form select option { color:#191A1D }
.form .flash { box-shadow:0 0 0 3px rgba(154,161,172,.3) }
.form-alt { color:rgba(236, 237, 239,.6) }
.form-alt a { border-bottom:1px solid rgba(221,224,229,.4) }
.form .btn { color:#191A1D }
.form .btn:hover { color:#191A1D;box-shadow:0 14px 34px rgba(0,0,0,.55) }
.btn-ed { color:#131417 }
.fixbg .tag:hover { color:#131417 }
::selection { background:#DDE0E5;color:#131417 }
.v1-pin .l { background:rgba(25, 26, 29,.85) }
.v1-pin .d { box-shadow:0 0 0 4px rgba(154,161,172,.2) }
.v1-pin:hover .d { box-shadow:0 0 0 7px rgba(154,161,172,.26) }
.v1-pin .pol { box-shadow:0 18px 36px rgba(0,0,0,.6) }
.ed-photo img { box-shadow:0 40px 80px rgba(0,0,0,.5) }
.seq-f img { box-shadow:0 30px 60px rgba(0,0,0,.45) }
.v1-map canvas { filter:saturate(0) brightness(1.7) }
.addon-picks label { color:#ECEDEF }
.addon-picks { border-color:rgba(236,237,239,.2) }
@media(max-width:619px){.addon-picks legend{font-size:.66rem;letter-spacing:.05em}}