#hero{position:relative;overflow:hidden;background:var(--c-bg)}
/* ---------------------------------------------------------- hero slider
   FULL BLEED, EDGE TO EDGE. Not a split panel.
   Every other site in this collection opens with type in one column and a
   picture in the other, and this business is one whose work sells itself in
   about three seconds. So the photograph is the header: it runs the whole
   width and the type sits ON it.

   The pictures are the client's own work, relit for even lighting and cropped
   to 16:9 by hand at a chosen focal point per image, so the arch, the thrones
   and the shop front are each actually in frame. They are NOT outpainted:
   expanding them to landscape invented a domestic kitchen behind the proposal
   arch and blank white screens behind the thrones.

   Phones keep the portrait original through <picture>. A 16:9 file covering a
   tall narrow viewport shows a vertical sliver of the middle, which is worse
   than what it replaced. */
.hs{position:relative;isolation:isolate;overflow:hidden;background:var(--c-dark-bg)}
.hs__track{position:relative;display:grid}
/* Stacked in one grid cell so the header is as tall as its tallest slide and
   never jumps height when the slide changes. */
.hs__slide{grid-area:1/1;position:relative;display:flex;align-items:center;min-height:min(84vh,760px);opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.hs__slide.is-active{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.hs__pic{position:absolute;inset:0;display:block}
.hs__img{width:100%;height:100%;object-fit:cover;display:block}
/* Per-slide focal point for the PHONE crop, where the portrait frame is used
   and the subject sits at a different height in each photograph. */
.hs__slide:nth-child(1) .hs__img{object-position:center 30%}
.hs__slide:nth-child(2) .hs__img{object-position:center 45%}
.hs__slide:nth-child(3) .hs__img{object-position:center 46%}

/* THE SCRIM HAS TO DO TWO OPPOSING JOBS.
   Dark enough that white type is legible over a photograph that might be pale
   drapes or hot pink, and light enough that the work behind it is still
   readable at a glance, which is the entire reason the picture is full width.
   So it is a diagonal wash weighted into the corner the type occupies, falling
   away to almost nothing across the right half, plus a shallow floor fade for
   the controls. The right side of every slide stays essentially untouched. */
.hs__scrim{position:absolute;inset:0;background:
  linear-gradient(105deg,rgba(5,10,22,.96) 0%,rgba(5,10,22,.92) 24%,rgba(5,10,22,.78) 42%,rgba(5,10,22,.48) 60%,rgba(5,10,22,.20) 76%,rgba(5,10,22,.04) 90%),
  linear-gradient(180deg,rgba(5,10,22,.44) 0%,rgba(5,10,22,0) 28%,rgba(5,10,22,0) 62%,rgba(5,10,22,.60) 100%),
  /* A FLAT LAYER ACROSS THE WHOLE FRAME, on top of the directional wash.
     The three photographs are nothing like each other in brightness: a hot
     pink sweet shop, pale ivory drapes, and an already-dark ballroom. A
     gradient alone therefore produced three different-looking headers. This
     evens them out so the set reads as one, and it is deliberately mild so
     the work behind it is still legible, which is the whole reason the
     picture runs full width. */
  linear-gradient(rgba(5,10,22,.28),rgba(5,10,22,.28))}
.hs__inner{position:relative;width:100%;padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
/* The measure belongs to the TEXT, not to the block. Constraining the whole
   column also constrained the button row, so Call and Email Stephanie stacked
   into two lines for no reason other than inherited width. */
.hs__type{max-width:none}
.hs__slide .hairline-node{display:none}

/* Type rhythm: a rule, then the label, then the line, then the promise, then
   the action. Each step gets its own space rather than four blocks stacked at
   the same interval, which is what made the old header read flat. */
.hs__eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 var(--sp-4);font-family:var(--f-body);font-weight:600;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.22em;color:var(--c-tint);text-shadow:0 1px 10px rgba(2,6,14,.85)}
.hs__eyebrow::before{content:"";width:34px;height:1px;background:var(--c-gold);flex:none}
.hs__headline{font-family:var(--f-display);color:#fff;font-weight:400;line-height:1.04;letter-spacing:-.015em;font-size:clamp(2.1rem,5.6vw,4.15rem);margin:0 0 var(--sp-5);max-width:min(100%,31rem);text-wrap:balance;text-shadow:0 2px 22px rgba(2,6,14,.9),0 1px 4px rgba(2,6,14,.7)}
.hs__sub{color:#F2ECE2;font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.65;margin:0 0 var(--sp-6);max-width:min(100%,27rem);text-shadow:0 1px 14px rgba(2,6,14,.92),0 1px 3px rgba(2,6,14,.65)}
.hs__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5)}
.hs__email{color:#fff;font-weight:600}
/* One h1 for the document, available to assistive tech, out of the layout. */
.hs__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.hs__controls{position:absolute;right:var(--sp-5);bottom:var(--sp-5);z-index:2;display:flex;align-items:center;gap:var(--sp-4)}
.hs__arrow{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(9,16,33,.32);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s ease,border-color .2s ease}
.hs__arrow:hover{background:rgba(9,16,33,.72);border-color:#fff}
.hs__arrow:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}
.hs__dots{display:flex;gap:var(--sp-2)}
.hs__dot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:transparent;cursor:pointer;transition:background .2s ease,transform .2s ease}
.hs__dot.is-active{background:#fff;transform:scale(1.15)}
.hs__dot:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}

@media (min-width:768px){
  /* HEIGHT IS FIXED, NOT MINIMUM, FROM HERE UP.
     With min-height the type decided how tall the header was: a headline that
     wrapped to six lines stretched the slide to 1148px, the 16:9 photograph
     then had to cover a 1.2 ratio box, and it zoomed in hard enough to lose
     the arch entirely. The frame owns its proportions and the type sits
     inside them. */
  .hs__slide{height:min(84vh,780px);min-height:560px}
  .hs__controls{right:var(--sp-6);bottom:var(--sp-6)}
}
@media (min-width:1100px){
}
@media (max-width:767px){
  /* Portrait source here, so the wash runs bottom-up rather than diagonally:
     there is no empty right half to protect on a phone. */
  .hs__slide{min-height:min(86vh,680px);align-items:flex-end}
  .hs__scrim{background:linear-gradient(180deg,rgba(5,10,22,.46) 0%,rgba(5,10,22,.32) 30%,rgba(5,10,22,.86) 72%,rgba(5,10,22,.97) 100%),linear-gradient(rgba(5,10,22,.26),rgba(5,10,22,.26))}
  .hs__inner{padding-bottom:calc(var(--sp-8) + var(--sp-7))}
  .hs__controls{left:var(--sp-5);right:auto;bottom:var(--sp-4)}
}
@media (prefers-reduced-motion: reduce){
  .hs__slide,.hs__slide.is-active{transition:none}
}

/* ------------------------------------------------------------------- gallery
   Placed directly after What We Create: the offerings make the claim and this
   is the evidence, rather than making somebody scroll to the footer for it.
   The chrome stays navy, cream and gold and the photographs supply all of the
   colour, which is what keeps a maximalist portfolio from fighting the type. */
.gal__lede{margin-top:var(--sp-3);color:var(--c-text);opacity:.75;max-width:46ch}
.gal__grid{list-style:none;margin:var(--sp-7) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
.gal__item{margin:0}
.gal__fig{margin:0;position:relative;overflow:hidden}
.gal__fig .media-zoom{display:block;overflow:hidden}
.gal__fig img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.gal__fig:hover img{transform:scale(1.04)}
/* The caption sits under the frame rather than over the photograph: these are
   busy, saturated images and text laid on top of them was unreadable at every
   size worth shipping. */
.gal__cap{margin-top:var(--sp-3);font-family:var(--f-body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-gold-ink)}
@media (min-width:640px){.gal__grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}}
@media (min-width:1024px){.gal__grid{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion: reduce){.gal__fig img,.gal__fig:hover img{transition:none;transform:none}}

/* --------------------------------------------------------------- about logo
   The real hand-lettered lockup, at a size where it can actually be read. It
   is a 1137px square with fine gold filigree, so it is deliberately NOT in the
   header: at the 28px the header mark occupies, the gold detail turns to mush
   and the name is illegible. */
.about__logo{display:block;width:min(300px,72%);height:auto;margin:0 auto var(--sp-5)}
@media (min-width:1100px){.about__logo{width:min(340px,80%)}}


/* ==========================================================================
   SECTION LAYOUT, REBUILT 2026-08-18.

   These rules were destroyed by my own edit and are a reconstruction, not the
   original. Replacing the hero CSS, I cut from the first hero rule to the
   gallery comment marker, having earlier APPENDED the gallery rules to the end
   of this file. That span therefore covered everything after the hero: every
   layout rule for What We Create, For DIY Hosts, About, Coming Soon, the FAQ
   and the closing panel went with it, and the page collapsed into one
   undifferentiated column.

   Nothing survived to restore from. build/*/site/ is gitignored, KV had
   already been overwritten by later deploys, and the section classes are
   generated per site so no other build shares them.

   What IS original: the markup, and every brand device in global.css, which
   was untouched. foil-frame, media-zoom, numeral, kicker, pull-quote, chip and
   the dark-section heading colours all still come from there. Only the
   arrangement is rebuilt, from the screenshots taken earlier in the session.

   The lesson, recorded where the next person will hit it: never cut a CSS
   range by "from this selector to that comment" when anything has been
   appended to the file since.
   ========================================================================== */

/* -------------------------------------------------------- what we create --
   Alternating rows: text one side, framed photograph the other, flipping each
   time so the eye zig-zags down the list instead of reading four identical
   blocks. */
.wwc__head{margin-bottom:var(--sp-8);max-width:24ch}
.wwc__rows{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-8)}
.wwc__row{display:grid;gap:var(--sp-5);align-items:center}
.wwc__row+.wwc__row{padding-top:var(--sp-8);border-top:1px solid var(--c-gold-30)}
.wwc__text{display:grid;gap:var(--sp-3);align-content:start;min-width:0}
.wwc__label{margin:0;font-family:var(--f-body);font-weight:600;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.2em;color:var(--c-gold-ink)}
.wwc__copy{margin:0;max-width:46ch;line-height:1.75;color:var(--c-text)}
.wwc__media{min-width:0}
.wwc__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (min-width:900px){
  .wwc__row{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:var(--sp-8)}
  /* The flip is done with order, not by reordering the markup, so the reading
     order stays text-then-image for anyone not seeing the grid. */
  .wwc__row--flip .wwc__text{order:2}
  .wwc__row--flip .wwc__media{order:1}
}

/* ----------------------------------------------------------- for DIY hosts --
   Deliberately outside .container: the photograph runs to the viewport edge
   and the copy sits on a tint panel beside it. */
.diy__grid{display:grid}
.diy__panel{margin:0;position:relative;min-height:56vw;max-height:70vh;overflow:hidden}
.diy__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.diy__body{background:var(--c-tint);padding:clamp(2.5rem,7vw,4.5rem) clamp(1.5rem,5vw,4rem)}
/* The markup carries kicker--dark, which is built for a dark ground and left
   this one pale gold on cream: technically present, practically invisible.
   The panel is light, so the chip goes back to ink on a gold hairline. */
.diy__kicker{margin-bottom:var(--sp-4);color:var(--c-primary);border-color:var(--c-gold-50);background:transparent}
.diy__body h2{max-width:18ch;margin-bottom:var(--sp-6)}
.diy__block{margin-bottom:var(--sp-2)}
.diy__block h3{margin-bottom:var(--sp-3)}
.diy__block p{margin:0;max-width:44ch;line-height:1.7}
.diy__rule{display:block;width:72px;height:1px;background:var(--c-gold-45);margin:var(--sp-6) 0}
.diy__chips{margin-top:var(--sp-5)}
.diy__license{margin:var(--sp-3) 0 0;font-size:.85rem;color:var(--c-gold-ink)}
@media (min-width:900px){
  .diy__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:stretch}
  .diy__panel{min-height:100%;max-height:none}
}

/* The three template cards, fanned. Absolute inside a fixed-height stage so
   the rotations cannot push the section around. */
.fan{position:relative;height:190px;margin:var(--sp-6) 0 var(--sp-5);max-width:320px}
.fan__card{position:absolute;top:0;width:132px;min-height:164px;background:var(--c-surface);border:1px solid var(--c-gold-30);border-radius:var(--r-sm);padding:12px 11px;box-shadow:0 8px 22px rgba(21,32,58,.10);display:flex;flex-direction:column;gap:6px}
.fan__card--back{left:0;transform:rotate(-7deg);z-index:1}
.fan__card--mid{left:150px;transform:rotate(6deg);z-index:2}
.fan__card--front{left:74px;top:14px;transform:rotate(-1deg);z-index:3;align-items:center;text-align:center}
.fan__tag{font-family:var(--f-body);font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-primary)}
.fan__line{display:block;height:2px;background:var(--c-gold-12);border-radius:1px}
.fan__line--short{width:72%}
.fan__arch{color:var(--c-gold);margin-bottom:2px}
.fan__invite{font-family:var(--f-display);font-size:11px;color:var(--c-primary);margin-bottom:4px}
.fan__fuchsia{display:block;width:26px;height:2px;background:var(--c-accent);border-radius:1px;margin-top:auto}

/* ------------------------------------------------------------------ about --
   Copy left, a framed panel right carrying the real logo, the pull quote and
   the owner's name. */
.about__grid{display:grid;gap:var(--sp-7);align-items:start}
.about__text{min-width:0}
.about__p{margin:0 0 var(--sp-5);max-width:62ch;line-height:1.8}
.about__p:last-child{margin-bottom:0}
.about__panel{padding:clamp(1.75rem,4vw,2.75rem);text-align:center}
.about__quote{margin:0 auto;color:var(--c-primary)}
.about__rule{display:block;width:52px;height:1px;background:var(--c-gold-45);margin:var(--sp-5) auto}
.about__name{margin:0;font-family:var(--f-body);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-gold-ink)}
@media (min-width:900px){
  .about__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:var(--sp-8)}
}

/* ------------------------------------------------------------ coming soon --
   One centred column on the dark ground. Nothing else in it, on purpose: it is
   an announcement, not a section of content. */
/* THESE TWO SECTIONS DO NOT CARRY .section, SO THEY GET NO PADDING FROM IT.
   Their markup is "section--dark ribbon" and "section--dark close", and the
   vertical padding came from rules that were destroyed with the rest. Both
   computed to 0px top and bottom, which is why they read as cramped bands
   jammed against their neighbours on a phone. */
.ribbon{text-align:center;padding-block:clamp(3.75rem,9vw,6.5rem)}
.close{padding-block:clamp(3.75rem,9vw,6.5rem)}
.ribbon__stack{display:grid;justify-items:center;gap:var(--sp-5);max-width:44ch;margin-inline:auto}
.ribbon__line{margin:0;max-width:20ch}
.ribbon__rule{display:block;width:72px;height:1px;background:var(--c-gold-60)}
.ribbon__invite{font-size:1.02rem}

/* -------------------------------------------------------------------- FAQ --
   Heading column left, one framed sheet of questions right, hairline between
   each so the sheet reads as a single object rather than six cards. */
.faq__grid{display:grid;gap:var(--sp-6);align-items:start}
.faq__head{max-width:22ch}
.faq__arch{display:block;margin-top:var(--sp-5);color:var(--c-gold);opacity:.55}
.faq__sheet{padding:clamp(1.25rem,3vw,2.25rem)}
.faq__row{padding-block:var(--sp-5)}
.faq__row+.faq__row{border-top:1px solid var(--c-gold-30)}
.faq__row:first-child{padding-top:0}
.faq__row:last-child{padding-bottom:0}
.faq__row h3{margin-bottom:var(--sp-3)}
.faq__row p{margin:0;max-width:60ch;line-height:1.75}
.faq__link{color:var(--c-primary);font-weight:500}
@media (min-width:900px){
  .faq__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:var(--sp-8)}
}

/* ------------------------------------------------------------------ close --
   The last thing on the page is the phone number, at the size of a headline. */
.close__grid{display:grid;gap:var(--sp-7);align-items:center}
.close__body{min-width:0}
.close__line{margin:0 0 var(--sp-5);max-width:18ch}
.close__phone{display:inline-block;font-family:var(--f-display);font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.1;color:var(--c-dark-text);text-decoration:none}
.close__phone:hover{color:#fff}
.close__email{margin:var(--sp-5) 0 0}
.close__emaillabel{display:block;font-family:var(--f-body);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.72;margin-bottom:var(--sp-2)}
.close__area{margin:var(--sp-5) 0 0;font-size:.95rem;opacity:.75}
.close__media{margin:0}
.close__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (min-width:900px){
  .close__grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--sp-8)}
}

/* ----------------------------------------------------------------- footer --*/
/* Stacked, not a row. As flex it laid the wordmark, the rule, the tagline and
   the note side by side and squashed all four into slivers. */
.footer__brand{display:grid;gap:var(--sp-3);align-content:start;max-width:36ch}
.footer__brand .hairline-node{margin:var(--sp-1) 0}
.footer__tagline{margin:0;font-family:var(--f-display);font-style:italic;font-size:1.05rem;color:var(--c-tint)}
.footer__note{margin:0;line-height:1.7;opacity:.8}

/* Gallery head, to match the other section heads. */
/* Wide enough that the headline sets on two lines rather than three, which
   is what 30ch was doing to it. */
.gal__head{max-width:40ch}