/* SimplyCelebr8 — Soft Arches (Sage Mist palette) */
:root{
  --mist:#E6EAE3;      /* page background */
  --linen:#F6F4EE;     /* arch panels, cards */
  --ink:#1F2A44;       /* navy from the logo lettering */
  --sage:#7E8F78;      /* leaf sprig in the logo */
  --dusk:#5B7895;      /* blue balloon */
  --marigold:#C4893A;  /* the "8" — small accents only */
  --line:rgba(31,42,68,.14);
  --display:"Fraunces",Georgia,serif;
  --body:"Figtree",system-ui,sans-serif;
  --arch:999px 999px 0 0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--mist);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--marigold);outline-offset:4px;border-radius:4px}
.wrap{width:min(100% - 48px,1240px);margin-inline:auto}
.display{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 0;font-optical-sizing:auto;font-weight:340;letter-spacing:-.02em;line-height:1.02}
h1.display{font-size:clamp(2.8rem,6.6vw,5.6rem);margin:0 0 .3em}
h2.display{font-size:clamp(2.2rem,4.6vw,3.9rem);margin:0 0 .35em}
h3{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:420;font-size:1.45rem;line-height:1.2;margin:0}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:1.15rem;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.muted{color:var(--sage)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:20;background:var(--linen);padding:10px 14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* header + footer */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:1.55rem;font-weight:400;letter-spacing:-.02em}
.brand img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.top nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-weight:500;font-size:.98rem}
.top nav a{text-decoration:none}
.top nav a:not(.btn):hover,.top nav [aria-current]{text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--marigold)}
.site-foot{margin-top:clamp(40px,7vw,90px);border-top:1px solid var(--line);padding:34px 0 48px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;font-size:.95rem}
.site-foot h2{font:600 .95rem var(--body);margin:0 0 10px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-foot a{text-decoration:none}.site-foot a:hover{text-decoration:underline}
.site-foot small{grid-column:1/-1;color:color-mix(in srgb,var(--ink) 65%,transparent)}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.35em;border-radius:999px;background:var(--ink);color:var(--linen);text-decoration:none;font:600 .98rem var(--body);border:0;cursor:pointer}
.btn:hover{background:#2c3a5c}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--linen)}
.btn.light{background:var(--linen);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* shared arch frame */
.arch-frame{border-radius:var(--arch);overflow:hidden;background:var(--linen);box-shadow:0 0 0 10px var(--linen)}
.arch-frame img{width:100%;height:100%;object-fit:cover}

/* home hero: the backdrop trio */
.hero{display:grid;grid-template-columns:1fr 1.05fr;align-items:end;gap:clamp(28px,5vw,80px);padding:clamp(28px,6vw,80px) 0 clamp(40px,6vw,90px)}
.hero h1{font-size:clamp(3.2rem,8.4vw,7.4rem);margin:0 0 .3em}
.hero h1 span{display:block}
.hero h1 span:nth-child(2){padding-left:.6em}
.hero h1 span:nth-child(3){padding-left:1.2em}
.hero .lede{margin-bottom:1.8em}
.where{margin-top:2.2em;font-size:.95rem;color:var(--sage)}
.trio{position:relative;height:clamp(420px,52vw,640px);isolation:isolate}
.trio::after{content:"";position:absolute;left:4%;right:2%;bottom:-22px;height:54px;border-radius:50%;background:radial-gradient(closest-side,rgba(31,42,68,.16),transparent);z-index:-1}
.arch{position:absolute;bottom:0;border-radius:var(--arch);overflow:hidden;background:var(--linen);box-shadow:0 0 0 10px var(--linen),0 30px 60px -30px rgba(31,42,68,.35)}
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
.arch img.on{opacity:1}
.a1{left:0;width:40%;height:78%;z-index:2}
.a2{left:27%;width:46%;height:100%;z-index:1}
.a3{right:0;width:34%;height:60%;z-index:3}
@media (prefers-reduced-motion:no-preference){
  .arch{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
  .a2{animation-delay:.12s}.a3{animation-delay:.26s}
  @keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
/* occasions: a row of small backdrops, each one a door into that kind of event */
.occasions-block{padding-top:clamp(24px,4vw,48px)}
.occasion-row{list-style:none;margin:0;padding:6px 4px 10px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.occasion-row a{display:grid;gap:12px;justify-items:center;text-align:center;text-decoration:none}
.mini-arch{display:block;width:100%;aspect-ratio:3/4.4;border-radius:var(--arch);overflow:hidden;background:var(--linen);box-shadow:0 0 0 6px var(--linen);transition:transform .35s ease,box-shadow .35s ease}
.mini-arch img{width:100%;height:100%;object-fit:cover}
.occ-name{font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:1.1rem;line-height:1.2}
.occasion-row a:hover .mini-arch,.occasion-row a:focus-visible .mini-arch{transform:translateY(-6px);box-shadow:0 0 0 6px var(--linen),0 0 0 7.5px var(--marigold)}
.occasion-row a:hover .occ-name{text-decoration:underline;text-underline-offset:.25em;text-decoration-color:var(--marigold)}

/* sections */
.section{padding:clamp(64px,9vw,128px) 0}
.section.tight{padding-top:clamp(24px,4vw,48px)}
.band{background:var(--linen)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:center}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:34px}
.page-head{padding:clamp(28px,5vw,64px) 0 clamp(20px,3vw,36px)}
.page-head p{margin-bottom:0}
.back{display:inline-block;margin-bottom:22px;font-weight:500;text-underline-offset:.3em}

/* services picker */
.piece-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.piece-list button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:20px 4px;border-bottom:1px solid var(--line)}
.piece-list button:focus-visible{outline:2px solid var(--marigold);outline-offset:-2px}
.piece-list h3{transition:color .25s}
.piece-list p{grid-column:1;margin:0;font-size:.98rem;color:color-mix(in srgb,var(--ink) 72%,transparent);max-height:0;overflow:hidden;transition:max-height .35s ease}
.piece-list .dot{grid-row:1;grid-column:2;align-self:center;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .25s}
.piece-list [aria-pressed=true] .dot{background:var(--marigold);box-shadow:none}
.piece-list [aria-pressed=true] p{max-height:6em}
.piece-list button:hover h3,.piece-list [aria-pressed=true] h3{color:var(--dusk)}
.piece-frame{position:relative;aspect-ratio:3/4;border-radius:var(--arch);overflow:hidden;background:var(--linen);box-shadow:0 0 0 12px var(--linen)}
.piece-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}

/* services page rows */
.service-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,90px);align-items:center;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line)}
.service-row:nth-child(even){grid-template-columns:1.2fr .8fr}
.service-row:nth-child(even) .arch-frame{order:2}
.service-row .arch-frame{aspect-ratio:4/5}
.service-row ul{margin:0 0 1.2em;padding-left:1.1em}
.seen-in{font-size:.95rem}
.seen-in a{text-underline-offset:.25em}

/* rentals */
.rent-items{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 28px;padding:0;list-style:none}
.rent-items li{padding:.45em 1em;border-radius:999px;background:var(--mist);font-weight:500;font-size:.95rem}
.band .rent-items li{background:var(--mist)}
.rounded-photo{margin:0;border-radius:28px;overflow:hidden}
.rounded-photo img{width:100%;height:100%;object-fit:cover}
.photo-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;align-items:stretch}
.photo-row .rounded-photo{aspect-ratio:auto;height:clamp(260px,32vw,440px)}

/* work gallery */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font:500 .93rem var(--body);color:var(--ink);background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:.5em 1em;cursor:pointer}
.filters button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.filters [aria-pressed=true]{background:var(--ink);color:var(--linen);box-shadow:none}
.gallery{columns:4 240px;column-gap:22px}
.card{break-inside:avoid;margin:0 0 30px;display:block;text-decoration:none}
.card .frame{position:relative;border-radius:var(--arch);overflow:hidden;background:var(--linen);box-shadow:0 0 0 7px var(--linen)}
.card img{width:100%;aspect-ratio:var(--r,3/4);object-fit:cover;transition:transform .6s ease}
.card:hover img{transform:scale(1.04)}
.card h3{font-size:1.2rem;margin-top:16px}
.card span{font-size:.88rem;color:var(--sage)}
.card .film-tag{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:var(--linen);color:var(--ink);font-size:.82rem;font-weight:600;padding:.3em .9em;border-radius:999px}
.card[hidden]{display:none}

/* project page */
.project-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:end;padding:clamp(20px,4vw,48px) 0 clamp(40px,6vw,72px)}
.project-hero .arch-frame{aspect-ratio:4/5;max-height:720px}
.project-hero .label{color:var(--sage);font-weight:500;margin-bottom:.6em}
.photo-grid{columns:3 260px;column-gap:18px}
.photo-grid button{all:unset;display:block;width:100%;margin:0 0 18px;cursor:zoom-in;border-radius:20px;overflow:hidden;break-inside:avoid}
.photo-grid button:focus-visible{outline:2px solid var(--marigold);outline-offset:3px}
.photo-grid img{width:100%;height:auto;transition:transform .5s}
.photo-grid button:hover img{transform:scale(1.03)}
.project-film{display:grid;grid-template-columns:1fr minmax(0,300px);gap:clamp(28px,6vw,80px);align-items:center;background:var(--ink);color:var(--linen);border-radius:28px;padding:clamp(28px,5vw,64px)}
.project-film .lede{color:color-mix(in srgb,var(--linen) 78%,transparent)}
.project-film video{width:100%;aspect-ratio:9/16;border-radius:var(--arch);background:#2a3655;object-fit:cover}
.next-project{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px;margin-top:clamp(48px,7vw,90px)}
.next-project a{text-decoration:none}
.next-project a span{display:block;font-size:.9rem;color:var(--sage)}
.next-project a strong{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:400;font-size:clamp(1.4rem,3vw,2.2rem)}
.next-project a:hover strong{text-decoration:underline;text-underline-offset:.2em}

/* lightbox */
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:92vh}
dialog.lightbox::backdrop{background:rgba(22,29,48,.86)}
dialog.lightbox img{max-height:84vh;width:auto;margin:auto;border-radius:16px}
dialog.lightbox p{color:var(--linen);text-align:center;margin:12px auto 0;font-size:.95rem}
dialog.lightbox .close{position:fixed;top:18px;right:18px}

/* films */
.films{background:var(--ink);color:var(--linen)}
.films .lede{color:color-mix(in srgb,var(--linen) 78%,transparent)}
.reel-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,22vw,260px);gap:22px;overflow-x:auto;padding:36px 4px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--sage) transparent}
.reel{scroll-snap-align:start;margin:0}
.reel .screen{position:relative;aspect-ratio:9/16;border-radius:var(--arch);overflow:hidden;background:#2a3655}
.reel video,.reel .screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .play{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:22px;background:linear-gradient(transparent 55%,rgba(20,26,44,.55));border:0;cursor:pointer;color:var(--linen)}
.reel .play i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--linen);color:var(--ink);font-style:normal;font-size:1.1rem;padding-left:3px;transition:transform .25s}
.reel .play:hover i{transform:scale(1.08)}
.reel figcaption{margin-top:14px;font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:1.15rem}
.reel figcaption a{text-decoration:none}.reel figcaption a:hover{text-decoration:underline}

/* process */
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px);counter-reset:s}
.steps li{counter-increment:s;padding-top:22px;border-top:1px solid var(--ink)}
.steps li::before{content:counter(s);display:block;font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:300;font-size:3.4rem;line-height:1;color:var(--marigold);margin-bottom:14px}
.steps p{margin-top:10px;font-size:.98rem}

/* invite + contact form */
.invite{position:relative;background:var(--linen);border-radius:clamp(160px,30vw,420px) clamp(160px,30vw,420px) 28px 28px;padding:clamp(80px,12vw,150px) clamp(24px,6vw,90px) clamp(48px,7vw,80px);text-align:center}
.invite h2,.invite h1{font-size:clamp(2.6rem,6.4vw,5.4rem);margin-inline:auto;max-width:12ch}
.invite p{margin-inline:auto}
.invite .actions{justify-content:center;margin-top:28px}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin-top:34px;font-weight:500}
.contact-links a{text-underline-offset:.3em}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;text-align:left;max-width:760px;margin:40px auto 0}
.form label{display:grid;gap:6px;font-weight:500;font-size:.95rem}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:.75em .9em}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--dusk);outline-offset:1px}
.form fieldset{border:0;padding:0;margin:0;grid-column:1/-1}
.form legend{font-weight:500;font-size:.95rem;margin-bottom:8px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:8px;font-weight:500;background:var(--mist);padding:.45em .95em;border-radius:999px;cursor:pointer}
.checks input{accent-color:var(--ink);margin:0}
.form .error{color:#a3352d;font-size:.88rem;font-weight:500;min-height:1.2em}
.form .submit{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* about */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.about-grid .arch-frame{aspect-ratio:4/5}
.values{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:18px}
.values li{padding-top:16px;border-top:1px solid var(--line)}
.values p{margin:.3em 0 0;font-size:.98rem}

/* responsive */
@media (max-width:960px){.top nav a.hide-md{display:none}}
@media (max-width:1020px){
  .occasion-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:150px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--sage) transparent}
  .occasion-row li{scroll-snap-align:start}
}
@media (max-width:880px){
  .hero,.split,.project-hero,.about-grid,.service-row,.service-row:nth-child(even),.project-film{grid-template-columns:1fr}
  .service-row:nth-child(even) .arch-frame{order:0}
  .service-row .arch-frame,.project-hero .arch-frame,.about-grid .arch-frame{max-width:440px;width:100%;margin-inline:auto}
  .trio{height:min(118vw,560px)}
  .piece-frame{max-width:420px;margin-inline:auto;width:100%}
  .steps,.site-foot{grid-template-columns:1fr}
  .photo-row{grid-template-columns:1fr 1fr}.photo-row .rounded-photo:first-child{grid-column:1/-1}
  .project-film video{max-width:300px;margin-inline:auto}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .top nav a:not(.btn){display:none}
  .top .btn{padding:.65em 1.05em;font-size:.9rem}
  .brand{font-size:1.3rem}.brand img{width:40px;height:40px}
  .gallery{columns:2;column-gap:14px}
  .card .frame{box-shadow:0 0 0 5px var(--linen)}
  .form{grid-template-columns:1fr}
  .photo-grid{columns:2;column-gap:10px}.photo-grid button{margin-bottom:10px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}