/* Designs by Erika, site stylesheet. One file for every page (R-5, R-7).
   Tokens come from the adopted specimen (Discovery/specimen/index.html, R-10).
   Fonts are self-hosted, OFL 1.1, see fonts/LICENSE.txt (DV-004). */

@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-var-normal-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --paper:#FBF7F3; --raised:#FFFFFF; --band:#F6E9EC;
  --ink:#2A1F24; --muted:#6B5A60; --line:#E9DCDF;
  --blush:#EAC2CC; --berry:#962D52; --berry-dark:#7A2242;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1180px; --r:14px; --head:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-settle:cubic-bezier(.3,1.25,.4,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.6 var(--sans)}  /* 17px at the default size, and it grows with the reader's text setting */
img{display:block;max-width:100%;height:auto}
a{color:var(--berry);text-underline-offset:3px}
a:hover{color:var(--berry-dark)}
a[href^="mailto:"]{overflow-wrap:anywhere}  /* a long email address may break, so large phone text never widens the page */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.skip-link:focus{top:12px;color:#fff}
:focus-visible{outline:3px solid var(--berry);outline-offset:3px}

/* Type. Heading classes let a reusable block pick its level without changing its look (L-HR-13). */
h1,h2,h3,h4,.t-display,.t-section,.t-item{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0 0 .4em;letter-spacing:-.005em;color:var(--ink)}
h1,.t-display{font-size:clamp(min(2.7rem,13.5vw),6.2vw,4.8rem)}  /* 13.5vw equals 2.7rem at 320 px: no change at normal text size; with enlarged phone text the headline still fits the screen */
h2,.t-section{font-size:clamp(min(2.1rem,10.5vw),4.2vw,3.2rem)}  /* 10.5vw equals 2.1rem at 320 px, same idea as h1 */
h1,h2,.t-display,.t-section{overflow-wrap:break-word}  /* last resort for very large text settings */
h3,h4,.t-item{font-size:1.65rem;font-weight:600;line-height:1.15}
.eyebrow{font:600 .78rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--berry);margin:0 0 14px}
.lede{font-size:1.15rem;color:var(--muted);max-width:36em}
p{margin:0 0 1em}

/* Buttons */
.btn{display:inline-block;font:600 1rem/1 var(--sans);padding:15px 24px;border-radius:999px;text-decoration:none;border:2px solid var(--berry);transition:background-color .2s,color .2s,transform .2s var(--ease)}
.btn-solid{background:var(--berry);color:#fff}
.btn-solid:hover{background:var(--berry-dark);border-color:var(--berry-dark);color:#fff}
.btn-ghost{color:var(--berry);background:transparent}
.btn-ghost:hover{background:var(--band);color:var(--berry-dark)}
.btn:active{transform:translateY(1px)}

/* AWAITING: a visible, honest gap (L-HR-09). Never shipped to the client while present. */
.awaiting{border:2px dashed var(--berry);border-radius:var(--r);padding:18px 22px;background:var(--raised);color:var(--muted);font-size:.95rem;margin:0}
.awaiting strong{color:var(--berry)}
.chip{display:inline-block;border:1.5px dashed var(--berry);border-radius:8px;padding:4px 9px;font-size:.8rem;line-height:1.35;color:var(--berry);background:var(--raised);margin:4px 0}

/* Header: Erika's logo (no separate name text) top left, Home, Services, Gallery, FAQ, Inquire, then socials (S1 p1, R-4; Gate 1 2026-10-23).
   The Inquire button exists twice in the markup: .btn-inquire-nav inside the nav for wide screens,
   .btn-inquire-bar in the bar for phones, and exactly one is displayed at any width. */
.site-header{position:sticky;top:0;z-index:20;background:rgba(251,247,243,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.bar{display:flex;align-items:center;gap:18px;height:var(--head)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{height:60px;width:auto}
.site-nav{display:flex;align-items:center;gap:22px}
.nav-list,.socials,.sub{list-style:none;margin:0;padding:0}
.nav-list{display:flex;align-items:center;gap:24px}
.nav-list a,.sub-toggle{color:var(--ink);text-decoration:none;font:500 .98rem/1 var(--sans);background:none;border:0;padding:8px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-list a:hover,.sub-toggle:hover,.nav-list a[aria-current="page"]{color:var(--berry)}
.nav-list a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.sub-toggle svg{transition:transform .2s var(--ease)}
.sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.has-sub{position:relative}
.sub{position:absolute;top:calc(100% + 10px);left:-18px;min-width:210px;background:var(--raised);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(42,31,36,.12);padding:8px;display:none}
.sub a{display:block;padding:11px 12px;border-radius:8px;white-space:nowrap}  /* the menu widens to its longest item, one line each */
.sub a:hover{background:var(--band)}
.has-sub.open .sub{display:block}
.no-js .has-sub:hover .sub,.no-js .has-sub:focus-within .sub{display:block}
.socials{display:flex;gap:8px}
.socials a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);color:var(--ink);transition:border-color .2s,color .2s}
.socials a:hover{border-color:var(--berry);color:var(--berry)}
.socials svg{width:16px;height:16px}
.btn-inquire{padding:12px 22px;font-size:.95rem}
.btn-inquire-bar{display:none}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--raised);color:var(--ink);place-items:center;cursor:pointer;order:3}

/* Hero (Home) */
.hero{padding:56px 0 72px}
.hero .eyebrow{font-size:1.02rem;letter-spacing:.12em}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 30px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;margin:0;list-style:none;color:var(--muted);font-size:.95rem}
.facts li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blush);margin-right:8px;vertical-align:middle}
.arch-photo{position:relative;isolation:isolate}
.arch-photo img{border-radius:240px 240px var(--r) var(--r);aspect-ratio:4/4.4;object-fit:cover;width:100%}
.arch-photo::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:2px solid var(--blush);border-radius:240px 240px var(--r) var(--r);z-index:-1}

/* Inner page heads */
.page-head{padding:56px 0 48px;background:var(--band);position:relative;overflow:hidden}
.page-head .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.page-head .arch-photo img{aspect-ratio:4/4.6;max-height:440px}
.page-head.text-only .wrap{grid-template-columns:1fr}

/* Sections */
section{padding:84px 0}
.band{background:var(--band)}
.head{max-width:42em;margin-bottom:40px}
.fine{color:var(--muted);font-size:.92rem;margin-top:22px}
.prose{max-width:42em}
.prose p{color:var(--ink)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--raised);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(42,31,36,.10)}
.card > img{aspect-ratio:4/5;object-fit:cover;width:100%}
.card .body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.card p{margin:0;color:var(--muted)}
.more{margin-top:auto;padding-top:8px;font-weight:600;text-decoration:none}
.more::after{content:" \2192";display:inline-block;transition:transform .2s var(--ease)}
.more:hover::after{transform:translateX(4px)}
dd .more{display:block;width:fit-content;margin:6px 0 14px;padding-top:0}  /* the Ask about this link under each item in a card's list (Arches) */

/* Packages */
.pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pkg{background:var(--raised);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pkg:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(42,31,36,.10)}
.pkg > img{aspect-ratio:1/1;object-fit:cover;width:100%}
.pkg .body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.pkg .tag{color:var(--muted);font-style:italic;margin:0 0 10px;font-size:.95rem}
.price{font-family:var(--serif);font-weight:600;font-size:2.1rem;line-height:1;margin:4px 0 14px}
.price small{display:block;font:600 .72rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.price.tbd{font:500 1rem/1.4 var(--sans);color:var(--muted)}
.pkg ul,.item ul{margin:0 0 18px;padding-left:18px;font-size:.95rem}
.pkg li,.item li{margin-bottom:3px}
.pkg .btn,.item .btn{margin-top:auto;text-align:center;padding:12px 16px;font-size:.92rem}
/* Cards share rows, so a card without a tagline keeps its price level with its neighbours */
@supports (grid-template-rows:subgrid){
  .pkg{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .pkg .body{display:grid;grid-row:2 / span 5;grid-template-rows:subgrid;row-gap:0}
  .pkg h3{grid-row:1}
  .pkg .tag{grid-row:2}
  .pkg .price{grid-row:3}
  .pkg .body > ul,.pkg .pkg-detail{grid-row:4}
  .pkg .btn{grid-row:5;align-self:end}
}

/* Product items (decor, rentals, designs to go) */
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.item{background:var(--raised);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.item:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(42,31,36,.10)}
.item > img{aspect-ratio:4/5;object-fit:cover;width:100%}
.item > img.pos-top{object-position:50% 8%}  /* the wall garland sits high in its photo; the phone 4:3 crop cut its top off */
.item .body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:6px;flex:1}
.item p{margin:0 0 6px;color:var(--muted)}
.item .choices{margin:4px 0 0}
.item .choices dt{font-size:1.15rem;margin:10px 0 2px}
.item .choices dd{margin:0;color:var(--muted)}
.item .noimg{aspect-ratio:4/5;background:var(--band);display:grid;place-items:center;color:var(--muted);font-size:.9rem;padding:20px;text-align:center}
.terms{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.terms span{font:600 .74rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:var(--ink)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s;padding:0;margin:0;list-style:none}
.step{border-top:2px solid var(--blush);padding-top:20px}
.step::before{counter-increment:s;content:counter(s);font-family:var(--serif);font-size:2.8rem;color:var(--berry);display:block;line-height:1;margin-bottom:10px}
.step p{color:var(--muted);margin:0}

/* Split blocks (photo beside copy) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.flip > :first-child{order:2}

/* Gallery */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.mosaic img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:10px;transition:transform .7s var(--ease)}
.mosaic a{overflow:hidden;border-radius:10px;display:block}
.mosaic a:hover img{transform:scale(1.04)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none}
.filters button{font:600 .92rem/1 var(--sans);padding:11px 18px;border-radius:999px;border:2px solid var(--berry);background:transparent;color:var(--berry);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--berry);color:#fff}
.no-js .filters{display:none}
.grid-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0;list-style:none}
.grid-gallery figure{margin:0}
.grid-gallery img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:10px}
.grid-gallery figcaption{font-size:.88rem;color:var(--muted);margin-top:6px}
.grid-gallery li[hidden]{display:none}
.grid-gallery a.zoom{display:block;border-radius:10px;cursor:zoom-in}
.grid-gallery a.zoom img{transition:opacity .2s}
.grid-gallery a.zoom:hover img{opacity:.88}
.all-link{margin-top:18px}
/* Season banner (partials/header.html, site.js setupSeasonBanner) */
[data-when-open][hidden],[data-when-closed][hidden]{display:none}  /* seasonal parts that follow her Jotform (site.js) */
.order-closed .contact-card{max-width:640px}
.season-banner{background:var(--berry);color:#fff;text-align:center;font-size:.95rem;font-weight:600;padding:9px 16px;line-height:1.4}
.season-banner p{margin:0}
.season-count{font-weight:500;white-space:nowrap;opacity:.9;margin-left:4px}
.season-banner a{color:#fff;text-decoration:underline;margin-left:6px}
.season-banner a:focus-visible{outline-color:#fff}
/* Gallery viewer (site.js setupLightbox): the dialog fills the screen; the photo fits inside it. */
html.lb-open{overflow:hidden}
.lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;touch-action:pan-y}
.lightbox::backdrop{background:rgba(24,14,19,.92)}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:calc(100vw - 150px)}
.lightbox img{max-width:100%;max-height:calc(100dvh - 120px);width:auto;height:auto;border-radius:10px;touch-action:pan-y}
.lightbox figcaption{margin-top:10px;font-size:.95rem;text-align:center;color:#fff}
.lightbox .lb-count{color:#D9C7CD}
.lightbox button{position:absolute;width:52px;height:52px;border-radius:50%;border:0;background:#fff;color:var(--berry);font:400 2rem/1 var(--sans);cursor:pointer;display:grid;place-items:center}
.lightbox button:focus-visible{outline:3px solid var(--blush);outline-offset:3px}
.lightbox .lb-close{top:16px;right:16px}
.lightbox video{max-width:100%;max-height:calc(100dvh - 150px);border-radius:10px;background:#000}
.video-box figcaption{max-width:540px}
.watch{display:inline-block;margin:4px 0 2px;font-weight:600;color:var(--berry)}
.watch::before{content:"";display:inline-block;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-right:8px;vertical-align:0}
.lightbox .lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:16px;top:50%;transform:translateY(-50%)}

/* Meet Erika (Home): her own quote beside her own words */
.meet{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.pull{margin:0;font:italic 500 clamp(1.6rem,2.6vw,2.3rem)/1.25 var(--serif);color:var(--berry)}
.pull::before{content:"\201C";display:block;font-size:4.5rem;line-height:.6;color:var(--blush);margin-bottom:14px}
.pull p{margin:0}
.sign{font:italic 500 1.7rem/1 var(--serif);color:var(--berry);margin:6px 0 0}

/* Reviews (Home): a row of Facebook reviews that scrolls sideways and snaps to each card; the
   buttons step one card. Without the script the row still scrolls by swipe, trackpad or keys. */
.review-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0;padding:4px 2px 18px;list-style:none;scrollbar-width:thin;scrollbar-color:var(--blush) transparent}
.review{scroll-snap-align:start;background:var(--raised);border-radius:var(--r);padding:28px 26px 24px;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line)}
.review blockquote{margin:0 0 18px;flex:1}
.review blockquote::before{content:"\201C";display:block;font:500 3.4rem/.6 var(--serif);color:var(--blush);margin-bottom:10px}
.review blockquote p{margin:0;font-size:1rem}
.who{margin:0;font-weight:600}
.who span{font-weight:400;color:var(--muted)}
.review-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.review-btn{width:46px;height:46px;border-radius:50%;border:2px solid var(--berry);background:transparent;color:var(--berry);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s}
.review-btn:hover{background:var(--berry);color:#fff}
.review-btn[aria-disabled="true"]{opacity:.35;cursor:default;background:transparent;color:var(--berry)}
.no-js .review-nav{display:none}

/* FAQ */
.qa{border-top:1px solid var(--line);padding:26px 0}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa .t-item{margin-bottom:12px}

/* Closing band */
.cta{background:var(--ink);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta p{color:#E9DCDF;max-width:34em;margin:0 auto 28px}
.cta :focus-visible{outline-color:var(--blush)}
.cta .btn-solid{background:var(--blush);border-color:var(--blush);color:var(--ink)}
.cta .btn-solid:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* Form */
.form-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.contact-card{background:var(--band);border-radius:var(--r);padding:28px;position:sticky;top:calc(var(--head) + 20px)}
.contact-card ul{list-style:none;padding:0;margin:0 0 6px}
.contact-card li{margin-bottom:8px}
form.inquiry{background:var(--raised);border-radius:var(--r);padding:32px;box-shadow:0 1px 0 var(--line)}
fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}  /* browsers size a fieldset to its widest content by default; large text then widened the page */
.form-wrap > *,.order-wrap > *{min-width:0}
legend{font-family:var(--serif);font-weight:600;font-size:1.5rem;padding:0;margin-bottom:12px}
.field{margin-bottom:18px}
.field label,.label{display:block;font-weight:600;margin-bottom:6px}
.req{color:var(--berry)}
.hint{display:block;font-weight:400;color:var(--muted);font-size:.9rem;margin-top:2px}
.field > .hint{margin-top:6px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid #CBB8BE;border-radius:10px;padding:12px 14px}
input,select,textarea{min-width:0;max-width:100%}  /* date and time boxes have a wide built-in minimum at large text sizes */
input:focus,select:focus,textarea:focus{outline:3px solid var(--berry);outline-offset:1px;border-color:var(--berry)}
/* Dropdowns match the text boxes (DBE-028): the browser's own arrow, and the grey gradient iPhone
   draws, are removed, and a chevron in the muted ink is drawn at the right instead. The site has
   no dark theme, so one chevron color serves. In Windows high contrast the native arrow returns. */
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%236B5A60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px 9px;padding-right:42px;line-height:1.6;cursor:pointer;text-overflow:ellipsis}
@media (forced-colors:active){select{-webkit-appearance:auto;appearance:auto;background-image:none;padding-right:14px}}
textarea{min-height:120px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}  /* equal thirds, so a time box fits "Choose a time" */
.row2,.row3{align-items:start}
input[type=file]{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;font-size:.95rem;color:var(--muted);background:var(--paper);border:1.5px dashed #CBB8BE;border-radius:10px;padding:8px 10px;cursor:pointer}
input[type=file]::file-selector-button{font:600 .9rem/1 var(--sans);padding:10px 16px;margin:0 12px 0 0;border-radius:999px;border:2px solid var(--berry);background:transparent;color:var(--berry);cursor:pointer;transition:background-color .2s,color .2s}
input[type=file]::file-selector-button:hover{background:var(--band);color:var(--berry-dark)}
input[type=file]:focus{outline:3px solid var(--berry);outline-offset:1px;border-color:var(--berry)}
.field-error{display:none;color:#A4262C;font-weight:600;font-size:.92rem;margin:6px 0 0}
.field.invalid .field-error,fieldset.invalid .field-error{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#A4262C;background-color:#FFF5F5}  /* the color only, so a dropdown keeps its chevron */
fieldset.invalid .checks{outline:2px solid #A4262C;outline-offset:10px;border-radius:4px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:0}
.checks input{margin-top:5px;width:18px;height:18px;flex:none;accent-color:var(--berry)}  /* never shrink beside a wrapping label (CR-037) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nojs-note{display:none}
.no-js .nojs-note{display:block;background:var(--raised);border:2px solid var(--berry);border-radius:var(--r);padding:24px;font-size:1.05rem}
.no-js form.inquiry{display:none}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;list-style:none;padding:0}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.pkg-field{margin-bottom:18px}
.pkg-row{display:flex;gap:10px;align-items:center}
.pkg-value{flex:1;display:block;background:var(--band);border:1.5px solid var(--blush);border-radius:10px;padding:12px 14px;font-weight:600;color:var(--ink)}
.pkg-remove{flex:none;font:600 .9rem/1 var(--sans);padding:12px 14px;border-radius:10px;border:1.5px solid var(--berry);background:transparent;color:var(--berry);cursor:pointer}
.form-status{margin-top:16px;font-weight:600}
.ts-box{margin:6px 0 14px}
/* Sending overlay (site.js setupForm): three balloons bob while the inquiry goes out. */
.sending{border:0;border-radius:var(--r);padding:34px 38px 28px;background:var(--raised);color:var(--ink);text-align:center;max-width:min(380px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(42,31,36,.25)}
.sending::backdrop{background:rgba(42,31,36,.55)}
.sending-art svg{display:block;margin:0 auto 10px;overflow:visible}
.sending-title{font:500 1.5rem/1.25 var(--serif);margin:0 0 6px}
.sending-sub{margin:0;color:var(--muted);font-size:.95rem}
.sending .b{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .sending .b{animation:bob-tilt 1.8s ease-in-out infinite}
  .sending .b2{animation-delay:-.6s}
  .sending .b3{animation-delay:-1.2s}
}
/* Its own name: the order page's loading dots have a plain "bob" below, and with one name the later rule won, so these balloons lost their tilt (CR-145). */
@keyframes bob-tilt{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}
.form-status.ok{color:#2E6B3F}
.form-status.err{color:#A4262C}

/* Order page: Erika's Jotform in a raised card beside the steps (R-15). The frame starts at a
   modest height and site.js grows it from Jotform's setHeight messages; without JS it is tall
   enough to show the whole form, and it can still scroll inside. */
.order-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:start}
.order-list{list-style:none;counter-reset:o;padding:0;margin:4px 0 18px}
.order-list li{counter-increment:o;position:relative;padding:4px 0 14px 46px}
.order-list li::before{content:counter(o);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--berry);color:#fff;display:grid;place-items:center;font:600 .95rem/1 var(--sans)}
.order-frame{position:relative;background:var(--raised);border-radius:var(--r);overflow:hidden;min-height:560px;box-shadow:0 1px 0 var(--line),0 18px 40px rgba(42,31,36,.08)}
.order-iframe{display:block;width:100%;height:900px;border:0;opacity:0;transition:opacity .6s var(--ease)}
.order-frame.loaded .order-iframe,.no-js .order-iframe{opacity:1}
.no-js .order-iframe{height:2600px}
.order-loading{position:absolute;inset:0;display:grid;place-items:center;align-content:start;padding-top:160px;gap:16px;color:var(--muted);font-size:.95rem}
.order-frame.loaded .order-loading,.no-js .order-loading{display:none}
.bob{display:flex;gap:10px}
.bob i{display:block;width:16px;height:20px;border-radius:50% 50% 46% 46%;background:var(--blush);animation:bob 1.5s ease-in-out infinite}
.bob i:nth-child(2){background:var(--berry);animation-delay:.2s}
.bob i:nth-child(3){animation-delay:.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.order-fallback{color:var(--muted);font-size:.92rem;margin:16px 0 0}

/* Footer */
.site-footer{padding:60px 0 30px;font-size:.95rem;color:var(--muted);border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot-brand img{height:84px;width:auto;margin-bottom:14px}
.foot-title{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--ink);margin:0 0 10px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:6px}
.site-footer a{color:var(--ink)}
.site-footer a:hover{color:var(--berry)}
.foot-base{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;font-size:.88rem}

/* Motion (R-2): soft and short, only when the visitor has not asked for less motion.
   The hidden start state needs html.js. A script that never loads never sets it, and once it
   is set the reveal runs first and falls back to showing everything (site.js, end), so a
   failure never hides the page. */
@media (prefers-reduced-motion:no-preference){
  /* Reveals are a one-shot animation, not a transition: hiding on load is instant (content never
     fades OUT first). The hidden state sits only on blocks not yet revealed, and the revealed rule
     sets nothing but the animation, so a card's own :hover lift and transition apply afterwards.
     Fill mode "backwards" holds the start frame through the stagger delay and lets go at the end. */
  .js .reveal:not(.is-in){opacity:0;transform:translateY(26px)}
  .js .reveal.is-in{animation:rise 1.1s var(--ease-settle) backwards}
  .js .reveal-stagger:not(.is-in) > *{opacity:0;transform:translateY(26px)}
  .js .reveal-stagger.is-in > *{animation:rise 1s var(--ease-settle) backwards}
  .js .reveal-stagger.is-in > :nth-child(2){animation-delay:.14s}
  .js .reveal-stagger.is-in > :nth-child(3){animation-delay:.28s}
  .js .reveal-stagger.is-in > :nth-child(4){animation-delay:.42s}
  .js .reveal-stagger.is-in > :nth-child(n+5){animation-delay:.52s}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  .settle{animation:settle 1.3s var(--ease-settle) both}
  .settle-late{animation:settle 1.4s .3s var(--ease-settle) both}
  @keyframes settle{from{opacity:0;transform:translateY(20px) scale(.975)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* Tablet and phone */
@media (max-width:1060px){
  .pkgs{grid-template-columns:repeat(2,1fr)}
  .items{grid-template-columns:repeat(2,1fr)}
  .grid-gallery{grid-template-columns:repeat(3,1fr)}
  .review-track{grid-auto-columns:calc((100% - 24px) / 2)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  :root{--head:64px}
  .bar{gap:10px}
  .brand img{height:48px}
  .menu-toggle{display:grid}
  .btn-inquire-nav{display:none}
  .btn-inquire-bar{display:inline-block;order:2;padding:11px 16px}
  .js .site-nav{display:none}
  .site-nav{position:absolute;left:0;right:0;top:var(--head);max-height:calc(100vh - var(--head));max-height:calc(100dvh - var(--head));overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:6px 20px 20px;box-shadow:0 14px 24px rgba(42,31,36,.08)}
  .no-js .site-nav{position:static;box-shadow:none;border:0;padding:0}
  .no-js .bar{height:auto;flex-wrap:wrap;padding:10px 20px}
  .no-js .site-header{position:static}  /* without the script the whole menu shows, so it scrolls away with the page */
  .site-nav.open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list > li{border-bottom:1px solid var(--line)}
  .nav-list a,.sub-toggle{padding:14px 0;width:100%;justify-content:space-between;font-size:1.05rem}
  .sub{position:static;display:block;box-shadow:none;border:0;padding:0 0 8px 14px;min-width:0;background:transparent}
  .has-sub .sub-toggle{display:none}
  .sub a{padding:11px 0;white-space:normal}  /* phone menu: long items may wrap rather than push the page sideways */
  .socials{padding-top:14px}
  .hero{padding:24px 0 52px}
  .hero-grid,.page-head .wrap,.split,.form-wrap,.order-wrap{grid-template-columns:1fr;gap:30px}
  .hero-grid .arch-photo,.page-head .arch-photo{order:-1;margin:0 14px}
  .arch-photo img{aspect-ratio:4/3.6}
  .page-head{padding:28px 0 40px}
  .page-head .arch-photo img{aspect-ratio:4/3.2;max-height:none}
  .split.flip > :first-child{order:0}
  section{padding:60px 0}
  .cards,.steps,.meet{grid-template-columns:1fr}
  .meet{gap:28px}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .contact-card{position:static}
  html{scroll-padding-top:76px}
}
@media (max-width:600px){
  .pkgs,.items{grid-template-columns:1fr}
  .pkg > img,.item > img,.item .noimg{aspect-ratio:4/3}
  .grid-gallery{grid-template-columns:repeat(2,1fr);gap:10px}
  /* Phone viewer: the photo takes the full width; previous and next sit below it. */
  .pkg-row{flex-wrap:wrap}  /* the package name and price get the full width; Remove sits below */
  .pkg-value{flex:1 1 100%}
  .lightbox figure{max-width:calc(100vw - 24px)}
  .lightbox img{max-height:calc(100dvh - 190px)}
  .lightbox .lb-prev,.lightbox .lb-next{top:auto;bottom:20px;transform:none}
  .lightbox .lb-prev{left:calc(50% - 64px)}
  .lightbox .lb-next{right:calc(50% - 64px)}
  .review-track{grid-auto-columns:88%;gap:14px}  /* the next card peeks in, so the row reads as swipeable */
  .row2,.row3,.checks{grid-template-columns:minmax(0,1fr)}
  form.inquiry{padding:22px 18px}
  .foot{grid-template-columns:1fr}
}
@media (max-width:350px){
  .brand img{height:40px}
  .btn-inquire-bar{padding:10px 12px}
  .menu-toggle{width:40px;height:40px}
}