/* ==========================================================================
   HnM Event Decor — core stylesheet
   Palette + logo sampled from the brand's own price-sheet artwork.
   Signature motif: the arch. Backdrop panels are arches, so images,
   cards and buttons echo that same rounded-top silhouette.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --cream:        #FBF4EE;
  --cream-deep:   #F3E5DA;
  --paper:        #FFFBF8;
  --ink:          #40201A;
  --ink-soft:     #7A5A4E;
  --ink-faint:    #9C8177;
  --clay:         #C08272;
  --clay-deep:    #A45F4C;
  --gold:         #B58A57;
  --line:         rgba(64,32,26,.14);
  --line-soft:    rgba(64,32,26,.08);

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --script:  "Parisienne", cursive;

  --arch: 999px 999px 6px 6px;   /* the backdrop-panel silhouette */
  --shell: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.68,.35,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.005em;
  margin:0;
  color:var(--ink);
}
h1{ font-size:clamp(2.9rem,7.2vw,5.2rem); }
h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); }
h3{ font-size:clamp(1.35rem,2vw,1.7rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--clay);
  margin:0 0 1.1rem;
  display:block;
}
.script{ font-family:var(--script); color:var(--clay); }
.lede{ font-size:clamp(1.05rem,1.35vw,1.2rem); color:var(--ink-soft); line-height:1.8; }
.muted{ color:var(--ink-soft); }
.tiny{ font-size:.82rem; letter-spacing:.02em; color:var(--ink-faint); }

/* Thin ornamental rule with a diamond, echoing the price sheets */
.rule{ display:flex; align-items:center; justify-content:center; gap:.85rem; margin:1.4rem 0; }
.rule::before,.rule::after{ content:""; height:1px; width:clamp(34px,7vw,74px); background:var(--clay); opacity:.45; }
.rule i{ width:6px; height:6px; background:var(--clay); transform:rotate(45deg); opacity:.75; }

/* ---------- Layout ---------- */
.shell{ width:min(var(--shell),100% - var(--gut)*2); margin-inline:auto; }
.shell-wide{ width:min(1560px,100% - var(--gut)*2); margin-inline:auto; }
section{ padding-block:clamp(64px,9vw,124px); }
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:.6rem; }
.section-head{ max-width:62ch; margin-inline:auto; }
.section-head.center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 2.1rem;
  font-family:var(--sans); font-size:.74rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--clay); border-radius:999px;
  background:var(--clay); color:#fff;
  cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background:var(--clay-deep); border-color:var(--clay-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.btn-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-sm{ padding:.7rem 1.5rem; font-size:.68rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  padding-bottom:.35rem; border-bottom:1px solid var(--clay);
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover{ gap:.95rem; color:var(--clay-deep); }

/* ---------- Header ---------- */
.topbar{
  background:var(--ink); color:var(--cream);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.6rem 0;
}
.topbar .shell{ display:flex; justify-content:center; gap:1.6rem; flex-wrap:wrap; text-align:center; }
.topbar a{ text-decoration:none; opacity:.85; transition:opacity .3s; }
.topbar a:hover{ opacity:1; }
.topbar span{ opacity:.6; }

/* The frosted panel lives on a pseudo-element, not on .site-header itself:
   backdrop-filter would make the header a containing block for position:fixed
   descendants, which pins the mobile drawer to the header instead of the
   viewport. Keeping the filter on ::before keeps the drawer full-screen. */
.site-header{
  position:sticky; top:0; z-index:60;
  background:transparent;
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .35s var(--ease);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(251,244,238,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.site-header.is-stuck{ box-shadow:0 10px 40px -28px rgba(64,32,26,.55); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem; }
.brand{ display:block; flex-shrink:0; }
.brand img{ height:clamp(46px,4.6vw,62px); width:auto; }
.nav-links{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.3rem); list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; font-size:.72rem; font-weight:400;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink);
  padding-bottom:.3rem; border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.nav-links a:hover{ border-color:var(--clay); }
.nav-links a[aria-current="page"]{ border-color:var(--clay); color:var(--clay-deep); }
.nav-cta{ flex-shrink:0; }
.nav-links .m-cta{ display:none; }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0;
  background:none; border:1px solid var(--line); border-radius:50%;
  cursor:pointer; position:relative;
}
.nav-toggle span{
  position:absolute; left:13px; width:18px; height:1.4px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span:nth-child(1){ top:17px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:940px){
  .nav-toggle{ display:block; position:relative; z-index:3; }
  .nav-cta{ display:none; }

  /* Scrim. Sits under the drawer, over the page; tapping it closes the menu. */
  .site-header::after{
    content:""; position:fixed; inset:0; z-index:1;
    background:rgba(40,18,13,.42);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .45s var(--ease), visibility .45s;
  }
  .nav-open .site-header::after{ opacity:1; visibility:visible; pointer-events:auto; }

  .nav-links{
    position:fixed; inset:0 0 0 auto; z-index:2;
    width:min(340px,86vw);
    background:var(--paper); border-left:1px solid var(--line);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:.2rem;
    padding:calc(108px + env(safe-area-inset-top)) clamp(1.5rem,6vw,2.4rem)
            calc(2rem + env(safe-area-inset-bottom));
    overflow-y:auto; overscroll-behavior:contain;
    /* hidden when closed so the links leave the tab order and the off-canvas
       panel cannot widen the document */
    visibility:hidden;
    transform:translateX(101%);
    transition:transform .45s var(--ease), visibility .45s;
    box-shadow:-30px 0 70px -50px rgba(64,32,26,.8);
  }
  .nav-links.is-open{ transform:none; visibility:visible; }
  .nav-links li{ width:100%; }
  .nav-links a{
    display:block; width:100%;
    font-size:.86rem; letter-spacing:.22em;
    padding:.95rem 0; border-bottom:1px solid var(--line-soft);
  }
  .nav-links a:hover{ border-color:var(--line-soft); color:var(--clay-deep); }
  .nav-links a[aria-current="page"]{ color:var(--clay-deep); }
  .nav-links .m-cta{ display:block; margin-top:1.4rem; }
  .nav-links .m-cta a{
    text-align:center;
    border:1px solid var(--clay); border-bottom-color:var(--clay);
    border-radius:999px; padding:1rem 1.7rem; color:var(--clay-deep);
  }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:min(86vh,760px); display:grid; isolation:isolate; overflow:hidden; }
.hero-slides{ position:absolute; inset:0; z-index:-2; }
.hero-slides figure{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity 1.5s var(--ease), transform 8s linear;
  transform:scale(1.06);
}
.hero-slides figure.is-active{ opacity:1; transform:scale(1); }
.hero-slides img{ width:100%; height:100%!important; object-fit:cover; object-position:center 42%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(40,18,13,.46) 0%, rgba(40,18,13,.34) 34%, rgba(40,18,13,.74) 100%);
}
.hero-inner{
  align-self:end; padding-block:clamp(56px,9vw,104px);
  color:#fff; max-width:min(680px,100%);
}
.hero h1{ color:#fff; font-weight:500; }
.hero .eyebrow{ color:rgba(255,255,255,.86); }
.hero p{ color:rgba(255,255,255,.9); font-size:1.05rem; margin-top:1.1rem; max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.hero-dots{
  position:absolute; bottom:clamp(20px,3vw,34px); right:var(--gut); z-index:2;
  display:flex; gap:.6rem;
}
.hero-dots button{
  width:30px; height:2px; padding:0; border:0; cursor:pointer;
  background-color:rgba(255,255,255,.4); transition:background-color .35s;
}
.hero-dots button[aria-selected="true"]{ background-color:#fff; }
@media (max-width:700px){ .hero-dots{ display:none; } .hero-inner{ max-width:none; } }

/* ---------- Surfaces ---------- */
/* .paper = background only. .intro = the narrow, centred opening statement. */
.paper,.intro{ background:var(--paper); }
.intro > .shell{ max-width:74ch; text-align:center; }
.intro h2{ margin-bottom:.4rem; }

/* ---------- Arch cards (categories) ---------- */
.arch-grid{
  display:grid; gap:clamp(20px,2.6vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:clamp(38px,5vw,60px);
}
.arch-card{ text-decoration:none; display:block; group:card; }
.arch-card figure{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--arch);
  aspect-ratio:3/4; background:var(--cream-deep);
}
.arch-card img{
  width:100%; height:100%!important; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.arch-card:hover img{ transform:scale(1.06); }
.arch-card figure::after{
  content:""; position:absolute; inset:0;
  border-radius:var(--arch);
  background:linear-gradient(180deg,rgba(40,18,13,0) 42%,rgba(40,18,13,.66) 100%);
}
.arch-card figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.4rem 1.2rem 1.6rem; text-align:center; color:#fff;
}
.arch-card figcaption b{
  display:block; font-family:var(--display); font-size:1.45rem; font-weight:500; letter-spacing:.01em;
}
.arch-card figcaption small{
  display:block; margin-top:.35rem;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; opacity:.82;
}
/* inset hairline frame, borrowed from the reference sites */
.arch-card figure::before{
  content:""; position:absolute; inset:14px; z-index:1;
  border:1px solid rgba(255,255,255,.5);
  border-radius:calc(999px - 14px) calc(999px - 14px) 3px 3px;
  opacity:0; transform:scale(.97);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.arch-card:hover figure::before{ opacity:1; transform:none; }

/* ---------- Packages ---------- */
.price-grid{
  display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  margin-top:clamp(38px,5vw,58px);
}
.price-card{
  position:relative; background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:180px 180px 10px 10px;
  padding:clamp(2.2rem,3vw,2.8rem) 1.5rem clamp(1.8rem,2.4vw,2.2rem);
  text-align:center;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.price-card:hover{ transform:translateY(-6px); border-color:var(--clay); box-shadow:0 30px 60px -50px rgba(64,32,26,.7); }
.price-card .tier{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--clay); font-weight:500;
}
.price-card .amount{
  font-family:var(--display); font-size:clamp(3rem,4.6vw,3.9rem); font-weight:500;
  line-height:1; margin:.5rem 0 .1rem; display:block;
}
.price-card ul{ list-style:none; margin:1.2rem 0 0; padding:0; }
.price-card li{ font-size:.93rem; color:var(--ink-soft); padding:.32rem 0; }
.price-card li + li{ border-top:1px solid var(--line-soft); }
.price-card.is-featured{ border-color:var(--clay); background:var(--cream-deep); }
.price-card .flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--clay); color:#fff; border-radius:999px;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.34rem 1rem; white-space:nowrap;
}

.notes{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1rem,3vw,3rem);
  margin-top:clamp(30px,4vw,46px); padding-top:1.8rem; border-top:1px solid var(--line-soft);
}
.notes div{ text-align:center; max-width:24ch; }
.notes b{ display:block; font-family:var(--display); font-size:1.1rem; font-weight:600; }
.notes span{ font-size:.86rem; color:var(--ink-soft); }

/* ---------- Steps ---------- */
.steps{ display:grid; gap:clamp(26px,3.4vw,48px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:clamp(40px,5vw,60px); }
.step{ text-align:center; }
.step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin-bottom:1.1rem;
  border:1px solid var(--clay); border-radius:999px 999px 8px 8px;
  font-family:var(--display); font-size:1.25rem; color:var(--clay-deep);
}
.step h3{ font-size:1.3rem; margin-bottom:.5rem; }
.step p{ color:var(--ink-soft); font-size:.96rem; }

/* ---------- Gallery ---------- */
.filters{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  margin:clamp(28px,4vw,44px) 0 clamp(30px,4vw,46px);
}
.filters button{
  border:1px solid var(--line); background:transparent; border-radius:999px;
  padding:.6rem 1.35rem; cursor:pointer;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filters button:hover{ border-color:var(--clay); color:var(--clay-deep); }
.filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

.masonry{ columns:3; column-gap:clamp(14px,1.8vw,24px); }
@media (max-width:1000px){ .masonry{ columns:2; } }
@media (max-width:560px){ .masonry{ columns:1; } }
.masonry .tile{
  /* margin:0 first — a bare <figure> otherwise keeps the UA's 40px side
     margins, which shove every tile out of its column */
  break-inside:avoid; margin:0 0 clamp(14px,1.8vw,24px);
  position:relative; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  display:block; overflow:hidden; border-radius:10px;
}
.masonry .tile img{ width:100%; height:auto; transition:transform 1s var(--ease), filter .5s var(--ease); }
.masonry .tile:hover img{ transform:scale(1.045); }
.masonry .tile figcaption{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:2.6rem 1.1rem 1.05rem;
  text-align:left; color:#fff;
  background:linear-gradient(180deg,rgba(40,18,13,0),rgba(40,18,13,.72));
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.masonry .tile:hover figcaption, .masonry .tile:focus-visible figcaption{ opacity:1; transform:none; }
.masonry .tile figcaption b{ display:block; font-family:var(--display); font-size:1.2rem; font-weight:500; }
.masonry .tile figcaption small{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; opacity:.8; }
.masonry .tile[hidden]{ display:none; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(30,14,10,.94); padding:clamp(14px,3vw,40px);
  place-items:center;
}
.lightbox[open]{ display:grid; }
.lightbox img{ max-width:100%; max-height:78vh; width:auto; border-radius:8px; }
.lightbox .lb-cap{ text-align:center; color:rgba(255,255,255,.86); margin-top:1rem; font-size:.9rem; }
.lightbox .lb-cap b{ font-family:var(--display); font-size:1.3rem; font-weight:500; display:block; color:#fff; }
.lb-btn{
  position:absolute; width:52px; height:52px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:1.4rem; line-height:1; display:grid; place-items:center;
  transition:background .3s;
}
.lb-btn:hover{ background:rgba(255,255,255,.24); }
.lb-close{ top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); }
.lb-prev{ left:clamp(10px,2.4vw,30px); top:50%; transform:translateY(-50%); }
.lb-next{ right:clamp(10px,2.4vw,30px); top:50%; transform:translateY(-50%); }
@media (max-width:620px){ .lb-prev{ left:8px; } .lb-next{ right:8px; } }

/* ---------- Split feature ---------- */
.split{
  display:grid; gap:clamp(30px,5vw,74px); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.split figure{ margin:0; border-radius:var(--arch); overflow:hidden; aspect-ratio:4/5; }
.split.flip figure{ order:2; }
.split figure img{ width:100%; height:100%!important; object-fit:cover; }
@media (max-width:760px){ .split.flip figure{ order:0; } }

/* ---------- Strip (edge-to-edge photos) ---------- */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.strip a{ display:block; overflow:hidden; aspect-ratio:1; }
.strip img{ width:100%; height:100%!important; object-fit:cover; transition:transform 1s var(--ease); }
.strip a:hover img{ transform:scale(1.07); }
@media (max-width:800px){ .strip{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Quote band ---------- */
.band{ position:relative; isolation:isolate; color:#fff; text-align:center; overflow:hidden; }
.band img.bg{ position:absolute; inset:0; width:100%; height:100%!important; object-fit:cover; z-index:-2; }
.band::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(40,18,13,.62); }
.band h2{ color:#fff; }
.band p{ color:rgba(255,255,255,.88); max-width:52ch; margin-inline:auto; }
.band .eyebrow{ color:rgba(255,255,255,.8); }

/* ---------- Forms ---------- */
.form-wrap{ background:var(--paper); border:1px solid var(--line-soft); border-radius:18px; padding:clamp(1.6rem,3.4vw,3rem); }
.field-row{ display:grid; gap:1.1rem 1.4rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.field{ display:block; margin-bottom:1.1rem; }
.field > span{
  display:block; margin-bottom:.45rem;
  font-size:.67rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  width:100%; font:inherit; color:var(--ink);
  /* never below 16px: anything smaller makes iOS Safari zoom in on focus */
  font-size:max(16px,.98rem);
  min-height:48px;
  background:var(--cream); border:1px solid var(--line);
  border-radius:8px; padding:.85rem 1rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--clay); background:var(--paper);
}
.field input:invalid:not(:placeholder-shown){ border-color:#B4574A; }
.form-note{ font-size:.82rem; color:var(--ink-faint); margin-top:1rem; }
.form-status{ margin-top:1.1rem; padding:.9rem 1.1rem; border-radius:8px; font-size:.92rem; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:#EEF3EA; color:#3F5A32; border:1px solid #CBDCC0; }
.form-status.err{ background:#FBEDEA; color:#8A3B2C; border:1px solid #EFCDC5; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(251,244,238,.78); padding-block:clamp(52px,7vw,84px) 0; }
.site-footer h4{ color:var(--cream); font-size:1.05rem; letter-spacing:.02em; margin-bottom:1rem; }
.foot-grid{ display:grid; gap:clamp(30px,4vw,56px); grid-template-columns:1.4fr 1fr 1.4fr; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr; } }
.site-footer img.mark{ height:70px; width:auto; margin-bottom:1.1rem; filter:brightness(0) invert(1); opacity:.92; }
.site-footer p{ font-size:.92rem; line-height:1.8; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:.55rem; }
.site-footer a{ text-decoration:none; transition:color .3s; }
.site-footer a:hover{ color:var(--clay); }
.foot-links a{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; }
.serving{ font-size:.8rem; line-height:1.9; color:rgba(251,244,238,.52); }
.foot-bottom{
  margin-top:clamp(38px,5vw,60px); padding-block:1.5rem;
  border-top:1px solid rgba(251,244,238,.14);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.75rem; color:rgba(251,244,238,.5);
}

/* ---------- Page header (inner pages) ---------- */
.page-head{ padding-block:clamp(56px,8vw,96px) clamp(30px,4vw,44px); text-align:center; }
.page-head .lede{ max-width:56ch; margin-inline:auto; }

/* ---------- Reveal on scroll ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .hero-slides figure{ transition:opacity .01s; transform:none; }
  .arch-card img,.strip img,.masonry .tile img{ transition:none; }
}

/* ---------- A11y ---------- */
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:3px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--cream); padding:.8rem 1.4rem; text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Contact layout ----------
   Beats the inline grid-template-columns on contact.html, whatever ratio
   that inline style happens to use. */
@media (max-width:860px){
  .split{ grid-template-columns:1fr !important; }
}

/* ---------- FAQ details ---------- */
details summary{ list-style:none; position:relative; padding-right:2rem; }
details summary::-webkit-details-marker{ display:none; }
details summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-weight:300; font-size:1.4rem; color:var(--clay);
  transition:transform .3s var(--ease);
}
details[open] summary::after{ content:"–"; }
details summary:hover{ color:var(--clay-deep); }

/* ---------- Hero on short/landscape phones ---------- */
@media (max-height:560px) and (orientation:landscape){
  .hero{ min-height:100vh; }
  .hero h1{ font-size:2.4rem; }
}

/* ---------- Topbar on small screens ----------
   Two wrapped lines of dark bar ate too much of the fold; the email also
   lives in the footer and on the contact page, so drop it here. */
@media (max-width:620px){
  .topbar{ font-size:.62rem; letter-spacing:.12em; }
  .topbar .shell{ gap:.6rem; }
  .topbar span[aria-hidden="true"], .topbar a{ display:none; }
}

/* ==========================================================================
   Mobile refinements
   Everything below is phone/tablet-only polish: no horizontal scroll,
   thumb-sized tap targets, and hover-only affordances made visible on touch.
   ========================================================================== */

/* Nothing should ever push the page sideways. `clip` rather than `hidden`
   so the sticky header keeps working (hidden would make html a scroll box). */
html,body{ overflow-x:clip; }
@supports not (overflow:clip){ body{ overflow-x:hidden; } }

/* Softer, on-brand tap flash instead of the default grey box */
a,button,summary,[role="tab"]{ -webkit-tap-highlight-color:rgba(192,130,114,.16); }

/* Keep the close button legible once the scrim dims the header behind it */
.nav-open .nav-toggle{ background:var(--paper); border-color:var(--line); }

/* ---------- Touch: reveal hover-only content ---------- */
@media (hover:none){
  .masonry .tile figcaption{ opacity:1; transform:none; }
  .arch-card figure::before{ opacity:1; transform:none; }
  /* hover lifts are meaningless on touch and can leave elements stuck raised */
  .btn:hover,.price-card:hover{ transform:none; }
}

/* ---------- Tap targets (Apple/Google both want ~44px) ---------- */
@media (max-width:940px){
  .btn{ padding:1rem 1.9rem; }
  .btn-sm{ padding:.85rem 1.6rem; font-size:.7rem; }

  .filters button{ min-height:44px; padding-inline:1.2rem; }

  /* footer links are set in small caps; give them vertical room.
     Note: no display change on .topbar a — it is deliberately hidden
     below 620px and must stay that way. */
  .topbar a{ padding-block:.35rem; }

  /* mailto links sitting in body copy (contact.html aside) */
  main a[href^="mailto:"]{ display:inline-block; padding-block:.55rem; }
  .site-footer li{ margin-bottom:.1rem; }
  .site-footer li a,
  .site-footer p a,
  .foot-links a{ display:inline-block; padding-block:.85rem; }
  .foot-bottom{ gap:.25rem 1rem; }

  /* FAQ rows on packages.html */
  details summary{ padding-block:.5rem; }

  /* Underlined text links: grow the hit area without moving the underline */
  .link-arrow{ position:relative; }
  .link-arrow::after{ content:""; position:absolute; inset:-9px 0; }

  /* Hero dots are a 2px stripe — pad the box out to a thumb, keeping the
     stripe itself the only painted part */
  .hero-dots{ gap:.15rem; }
  .hero-dots button{
    box-sizing:content-box; height:2px; padding:21px 0;
    background-clip:content-box;
  }
}

/* ---------- Hero ---------- */
@media (max-width:700px){
  /* svh keeps the hero from jumping as mobile browser chrome hides/shows */
  .hero{ min-height:min(88vh,720px); }
  .hero-inner{ padding-bottom:calc(clamp(48px,9vw,72px) + env(safe-area-inset-bottom)); }
  .hero h1{ font-size:clamp(2.4rem,9.4vw,3.5rem); }
  .hero p{ font-size:1rem; max-width:none; }
  .hero-slides img{ object-position:center 38%; }
}
@supports (height:100svh){
  @media (max-width:700px){ .hero{ min-height:min(88svh,720px); } }
}
@media (max-width:480px){
  /* two long labels side by side wrap into a ragged row — stack them instead */
  .hero-actions{ gap:.7rem; }
  .hero-actions .btn{ width:100%; }
}

/* ---------- Cards & sections ---------- */
@media (max-width:560px){
  /* a 180px arch on a ~330px card swallows the tier label */
  .price-card{ border-radius:130px 130px 10px 10px; padding-inline:1.25rem; }
  .arch-card figure{ aspect-ratio:4/5; }
  .notes div{ max-width:none; }
  .split figure{ aspect-ratio:4/3; }
}

/* ---------- Lightbox ---------- */
@media (max-width:620px){
  .lightbox{
    padding:calc(70px + env(safe-area-inset-top)) 10px
            calc(76px + env(safe-area-inset-bottom));
    align-content:center;
  }
  .lightbox img{ max-height:62vh; }
  /* prev/next off the image and onto the bottom bar, so they stop covering it */
  .lb-prev,.lb-next{
    top:auto; transform:none;
    bottom:calc(14px + env(safe-area-inset-bottom));
  }
  .lb-prev{ left:calc(50% - 62px); }
  .lb-next{ right:calc(50% - 62px); }
  .lb-close{ top:calc(14px + env(safe-area-inset-top)); right:14px; }
}
@supports (height:100dvh){
  @media (max-width:620px){ .lightbox img{ max-height:62dvh; } }
}

/* ---------- Forms ---------- */
@media (max-width:560px){
  .form-wrap{ border-radius:14px; padding:1.4rem 1.15rem; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .field textarea{ min-height:120px; }
}