/* ===========================================================
   v12 contact lab, option 04 HOLD YOUR DATE.
   Visual system borrowed from v10 08 Studio Poster and its wedding
   page: white field, ink, warm gray, one clay accent, Cormorant
   Garamond display with a single italic word, Inter for everything
   that is read, the tilted invitation card.
   Rebuilt around one idea: an engaged couple reserves first (the
   first lesson holds the date) and plans the seven lessons after.
   =========================================================== */
:root{
  --paper:#ffffff;--ink:#111111;--ink-soft:#3a3733;--warm:#7d786f;--warm-lift:#a5a096;
  --clay:#c96f4a;--clay-deep:#a9552f;--clay-dark:#8e4524;--clay-pale:#f3e6de;
  --tint:#faf8f5;--line:#e7e2da;--line-soft:#f1ede6;--card:#faf6f0;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --maxw:1280px;
  --bar:62px;
  --optical:-0.028em;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,p,figure,figcaption,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;border:0;display:block}
a{color:inherit}
::selection{background:var(--clay);color:#fff}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

/* ---------------- type ---------------- */
.eyebrow{font:500 11px/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--warm)}
.label{font:500 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--clay-deep)}
/* labels that are h2s carry the longer search lines: wrap them evenly */
h2.label{text-wrap:balance}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.8vw,66px);line-height:1.02;letter-spacing:-.012em;margin-left:var(--optical)}
.it{font-style:italic;font-weight:300;color:var(--clay)}
.quote{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:-.012em}
.lede{font-size:clamp(16.5px,1.3vw,19px);line-height:1.6;color:var(--ink-soft);max-width:50ch}
.body{color:var(--ink-soft);max-width:56ch}
.small{font-size:14.5px;line-height:1.58;color:var(--warm)}
.mt10{margin-top:10px}.mt14{margin-top:14px}.mt18{margin-top:18px}.mt24{margin-top:24px}.mt32{margin-top:32px}

/* ---------------- layout ---------------- */
.sec{padding:clamp(60px,8vw,120px) var(--gutter)}
.wrap{max-width:var(--maxw);margin:0 auto}
.wrap-n{max-width:920px;margin:0 auto}
.tint{background:var(--tint)}
.pale{background:var(--clay-pale)}

/* ---------------- buttons and links ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--clay-deep);color:#fff;text-decoration:none;
  font:600 14px/1.1 var(--sans);letter-spacing:.08em;text-transform:uppercase;min-height:54px;padding:0 28px;border-radius:2px;border:1px solid var(--clay-deep);
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.btn:hover{background:var(--clay-dark);border-color:var(--clay-dark);transform:translateY(-1px)}
.btn .arw{flex:0 0 auto;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:2px}
.btn-full{display:flex;width:100%}
.tl{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink);font:500 15px/1.3 var(--sans);
  border-bottom:1px solid var(--line);transition:border-color .25s ease,color .25s ease}
.tl:hover{border-color:var(--clay);color:var(--clay-deep)}
.inl{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--clay);padding-bottom:1px}
.inl:hover{color:var(--clay-deep)}

/* ---------------- top bar ---------------- */
.topbar{position:relative;z-index:6;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 var(--gutter);background:var(--paper)}
.mark{font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:-.008em;text-decoration:none;color:var(--ink);white-space:nowrap}
.topbar .mark{display:inline-block;padding:10px 0}
.mark em{font-style:italic;font-weight:400;color:var(--clay)}
.topnav{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.navlink{text-decoration:none;font:500 13.5px/1 var(--sans);color:var(--ink-soft);padding:12px 0}
.navlink:hover{color:var(--clay-deep)}
.navnum{font-weight:600;color:var(--ink);letter-spacing:.02em}
@media(max-width:880px){:root{--bar:56px}.mark{font-size:19px}.hide-s{display:none}}

/* ===========================================================
   HERO. Poster type, the couple at poster scale on white, the
   invitation card over the hem. Nothing on this screen moves.
   =========================================================== */
.hp{position:relative;overflow:hidden;background:var(--paper);height:clamp(600px,calc(100svh - var(--bar)),1010px)}
.hp-in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(26px,3vw,46px) var(--gutter) clamp(30px,4vw,56px)}
.hp-top,.hp-foot{position:relative;z-index:2}
.hp-h1{font-family:var(--serif);font-weight:300;font-size:clamp(64px,7.4vw,128px);line-height:.94;letter-spacing:-.022em;color:var(--ink);margin-left:var(--optical);margin-top:clamp(12px,1.4vw,20px)}
.hp-eyebrow{text-wrap:balance;max-width:36ch}
.h2,.h2-poster{text-wrap:balance}
.hp-sub{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(16px,1.25vw,18.5px);line-height:1.5;color:var(--ink-soft);max-width:30ch}
/* the couple: bottom aligned, driven by the hero height, running off the right */
.hp-fig{position:absolute;z-index:1;pointer-events:none;right:max(2%,calc(50% - 640px));bottom:-10px;height:calc(100% - 20px);width:min(56%,760px)}
.hp-fig img{width:100%;height:100%;object-fit:contain;object-position:bottom center}
/* the invitation card */
.card-inv{position:relative;background:var(--card);border:1px solid var(--line);padding:clamp(24px,2.8vw,40px);box-shadow:0 18px 50px rgba(42,38,34,.1)}
.card-inv::after{content:"";position:absolute;left:9px;top:9px;right:9px;bottom:9px;border:1px solid var(--line-soft);pointer-events:none}
.card-in{position:relative;z-index:1}
.hp-foot{max-width:470px;transform:rotate(-1.2deg)}
.hp-note{margin-top:12px;font-size:16px;line-height:1.52;color:var(--ink-soft)}
.hp-note b{font-weight:600;color:var(--ink)}
.hp-foot .btn{margin-top:18px}
.hp-contact{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.hp-num{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font:600 16px/1 var(--sans);letter-spacing:.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.hp-num svg,.hp-txt svg{width:16px;height:16px;flex:none;color:var(--clay-deep)}
.hp-txt{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font:500 15px/1 var(--sans);color:var(--ink);border-bottom:1px solid var(--line)}
.hp-num:hover,.hp-txt:hover{color:var(--clay-deep)}
/* David's real face beside Text David (david-portrait.jpg, 400 x 400, 18 KB), so nobody takes the
   illustrated groom for him */
.av{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;background:#6c5fe0;box-shadow:0 0 0 1.5px var(--card),0 0 0 2.5px var(--line)}
.av img{position:absolute;width:64px;max-width:none;height:64px;left:-3px;top:-11px}
.hp-txt{border-bottom:0}

@media(max-width:880px){
  .hp{height:calc(100svh - var(--bar))}
  .hp-in{padding:clamp(12px,3.4vw,20px) var(--gutter) clamp(14px,3.6vw,22px)}
  .hp-h1{font-size:clamp(50px,14vw,84px);line-height:.93;margin-top:8px}
  .hp-sub{display:none}
  /* 390 x 844: bar 56, hero 788. The type ends near 150 inside the hero,
     so the couple is drawn about 108 percent of the screen wide from just
     under it, and the card covers the gown from its middle down. Heads,
     hands and faces stay in the open. */
  .hp-fig{right:auto;left:-2%;width:104%;height:auto;top:clamp(138px,19svh,170px);bottom:auto}
  .hp-fig img{height:auto;max-height:none}
  .hp-foot{max-width:none;margin:0 4px 0 2px;transform:rotate(-1deg)}
  .card-inv{padding:20px 20px 16px}
  .hp-note{font-size:15.5px;margin-top:8px}
  .hp-foot .btn{margin-top:14px}
}
/* small phones (360 to 389px): keep the number, Text David and the button on one line each */
.hp-num,.hp-txt{white-space:nowrap}
@media(max-width:389px){
  .hp-contact{gap:8px}
  .hp-num{font-size:15px;letter-spacing:0}
  .hp-num svg{display:none}
  .hp-txt{font-size:14.5px;gap:7px}
  .hp-foot .btn{padding:0 14px;font-size:13px;letter-spacing:.05em;gap:10px}
}

/* ---------------- Meet David: his one studio photo off the edge, a card over it ----------------
   The photo is a tall portrait (1200 x 1800), so it keeps a 4:5 frame on every screen; the card
   overlaps its lower edge. It is uncaptioned: the card beside it says "This is David". */
.pasthero{position:absolute;left:0;top:0;width:1px;height:1px}
.meet{position:relative;padding:clamp(56px,8vw,120px) 0 clamp(60px,8vw,120px)}
.meet-ph{position:relative;margin-left:var(--gutter);aspect-ratio:4/5;background:#6c5fe0;overflow:hidden}
.meet-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 74%}
.meet-card{margin:-84px var(--gutter) 0 calc(var(--gutter) - 6px);transform:rotate(-1deg)}
.meet-card .h2{margin-top:14px}
.meet-card .body{margin-top:14px}
.meet-card .tl{margin-top:10px}
@media(min-width:881px){
  .meet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding-right:0;max-width:1440px;margin:0 auto}
  .meet-ph{grid-column:2;grid-row:1;margin-left:0;justify-self:start;width:min(100%,620px,calc(86vh * .8))}
  .meet-card{grid-column:1;grid-row:1;justify-self:end;margin:0 -64px 0 var(--gutter);z-index:2;max-width:540px;transform:rotate(-1.4deg)}
}
/* David's story, behind a tap inside the card */
.story{margin-top:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:50px;font:500 15px/1.3 var(--sans);color:var(--ink)}
.story summary::-webkit-details-marker{display:none}
.story-in{padding:2px 0 18px}
.story-in p{font-size:15.5px;line-height:1.62;color:var(--ink-soft)}
.story-in p + p{margin-top:10px}
.story-in .quote{font-size:clamp(24px,2.3vw,30px);line-height:1.16;color:var(--ink);margin-top:16px}
.story-in .sig{font:500 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--clay-deep);margin-top:10px}
/* the plus that turns into a cross, shared by the story and the questions */
.pm{flex:none;position:relative;width:14px;height:14px;transition:transform .3s ease}
.pm::before,.pm::after{content:"";position:absolute;background:var(--clay-deep)}
.pm::before{left:0;right:0;top:6.25px;height:1.5px}
.pm::after{top:0;bottom:0;left:6.25px;width:1.5px}
details[open] > summary .pm{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.pm{transition:none}}

/* ---------------- the plan, the package and the price ---------------- */
.plan{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,84px);align-items:start}
.h2-poster{font-family:var(--serif);font-weight:300;font-size:clamp(46px,6.2vw,96px);line-height:.96;letter-spacing:-.022em;margin-left:var(--optical)}
.steps{margin-top:clamp(24px,2.8vw,38px);border-top:1px solid rgba(17,17,17,.1)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:16px 0;border-bottom:1px solid rgba(17,17,17,.1);font-size:16px;line-height:1.55;color:var(--ink-soft)}
.steps b{font-family:var(--serif);font-weight:400;font-size:30px;line-height:.9;color:var(--clay-deep);font-variant-numeric:lining-nums}
.steps strong{font-weight:600;color:var(--ink)}
.when{margin-top:22px;display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.when b{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.4vw,48px);line-height:1;color:var(--ink);font-variant-numeric:lining-nums}
.when span{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
.pkg ul{margin-top:14px}
.pkg li{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:10px 0;border-top:1px solid var(--line-soft);font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.pkg li:first-child{border-top:0}
.pkg li i{font-family:var(--serif);font-style:normal;font-size:19px;line-height:1.2;color:var(--clay-deep);font-variant-numeric:lining-nums}
.prices{margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:14px 0}
.prow + .prow{border-top:1px solid var(--line-soft)}
.prow .pl{font:500 15px/1.35 var(--sans);color:var(--ink)}
.prow .pl small{display:block;font-size:13px;color:var(--warm);margin-top:2px}
.money{font:500 clamp(32px,3vw,42px)/1 var(--sans);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.money .cur{font-size:.55em;letter-spacing:0;vertical-align:.38em;margin-right:.04em}
.pkg .btn{margin-top:20px}
.pkg .small{margin-top:10px}
@media(max-width:880px){.plan{grid-template-columns:minmax(0,1fr)}.pkg{transform:rotate(-.6deg)}}

/* ---------------- questions: one accordion, the question in serif italic, the answer behind a tap ---------------- */
.qrows{margin-top:clamp(26px,3vw,44px);border-bottom:1px solid var(--line)}
.qrow{border-top:1px solid var(--line)}
.qrow summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:clamp(12px,1.4vw,18px) 0;
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(23px,2.2vw,30px);line-height:1.18;color:var(--ink)}
.qrow summary::-webkit-details-marker{display:none}
.qrow summary:hover{color:var(--clay-deep)}
.qrow .a{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:62ch;padding:0 0 clamp(18px,2vw,24px)}
.qrow .a p + p,.qrow .a p + ul,.qrow .a ul + p{margin-top:10px}
.places li{padding:6px 0 6px 18px;position:relative}
.places li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--clay)}
.places b{font-weight:600;color:var(--ink)}
.mins{margin-top:10px}
.mins li{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:6px 0;font-size:15px;line-height:1.5}
.mins b{font-weight:600;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.notwed{margin-top:clamp(26px,3vw,40px);font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:60ch}
.notwed strong{font-weight:600;color:var(--ink)}

/* ---------------- closing and footer ---------------- */
.closing{position:relative;padding:clamp(60px,8vw,120px) 0 0}
.close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.close-ph{grid-column:1;grid-row:1;height:min(72vh,640px);overflow:hidden;background:var(--tint)}
.close-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.close-card{grid-column:2;grid-row:1;margin:0 var(--gutter) 0 -10vw;z-index:2;transform:rotate(-1.2deg)}
.close-card .btn{margin-top:22px}
.close-card .small{margin-top:10px}
.crow{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft)}
.crow a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:500 15px/1.2 var(--sans);color:var(--ink)}
.crow a:hover{color:var(--clay-deep)}
.crow .big{font-weight:600;letter-spacing:.02em;font-variant-numeric:lining-nums tabular-nums}
@media(max-width:880px){
  .close-grid{grid-template-columns:minmax(0,1fr)}
  .close-ph{grid-column:1;grid-row:1;height:auto;aspect-ratio:4/3;margin-right:var(--gutter)}
  .close-card{grid-column:1;grid-row:2;margin:-70px var(--gutter) 0 calc(var(--gutter) + 8px);transform:rotate(-1deg)}
}
.foot{margin-top:clamp(56px,7vw,100px);padding:clamp(28px,4vw,56px) var(--gutter) calc(clamp(28px,4vw,56px) + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:18px clamp(30px,5vw,80px);justify-content:space-between;align-items:flex-end}
.foot-links{display:flex;flex-wrap:wrap;gap:0 24px}
.foot-links a{display:inline-block;padding:10px 0;text-decoration:none;font:500 14px/1.3 var(--sans);color:var(--ink-soft)}
.foot-links a:hover{color:var(--clay-deep)}

/* ---------------- the book bar: after the hero, phones only, hidden over the closing ---------------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:6px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.dock.show{transform:none}
.dock .btn{flex:1 1 auto;min-height:50px;padding:0 14px;font-size:13px}
.dock-l{flex:0 0 auto;display:inline-flex;align-items:center;min-height:48px;padding:0 10px;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none}
.dock-l:hover{color:var(--clay-deep)}
@media(min-width:881px){.dock{display:none}}
@media(max-width:389px){.dock{gap:2px;padding-inline:10px}.dock .btn{padding:0 10px;font-size:12px;letter-spacing:.04em;white-space:nowrap}.dock-l{padding:0 8px}}

/* ---------------- footer: the one Areas block and the lesson links, in the footer's small label style ---------------- */
.foot-more{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);align-items:flex-start}
.foot-h{font:500 11px/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin-bottom:6px}
.areas{flex:1 1 320px;max-width:60ch}