/* Wix renders the Locations dropdown at runtime; the stripped snapshot keeps
   only a bare hidden <ul>. These rules reproduce the live panel: black,
   right-aligned, white serif — matched against the real site. */
/* The submenu is ours, not Wix's, so it inherits nothing from the header and was
   rendering in the Arial fallback at 19px next to a nav set in kepler at 25px. The
   face, colour and hairline below match the header's own rules. */
.wixclone-sub {
  display: none; position: absolute; top: 100%; z-index: 9999;
  /* Centred on the "Locations" item rather than pinned to its right edge, which
     left the panel sitting ~29px off to one side. */
  left: 50%; right: auto; transform: translateX(-50%);
  min-width: 215px; margin: 0; padding: 2px 0; list-style: none;
  background: #000; text-align: center;
  border: 1px solid rgba(255, 255, 255, .28);
}
li:hover > .wixclone-sub, .wixclone-sub:hover,
li[data-wixclone-open="true"] > .wixclone-sub { display: block; }
.wixclone-sub li { margin: 0; padding: 0; list-style: none; }
/* A hairline between entries, echoing the thin rules either side of the nav. */
.wixclone-sub li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
.wixclone-sub a {
  display: block; padding: 11px 26px; color: #fff; text-decoration: none;
  font-family: "kepler-w03-light-scd-cp", Georgia, serif;
  /* Tracks the nav's own size — matching the family but not the size still read
     as a different typeface sitting under it. Both moved 25px -> 30px together. */
  font-size: 30px; font-weight: 400; line-height: 1.25; white-space: nowrap;
  transition: color .18s ease;
}
.wixclone-sub a:hover { color: #b9b9b9; }

/* gallery arrows are real buttons again */
[data-hook="nav-arrow-next"], [data-hook="nav-arrow-prev"],
.nav-arrows-container { cursor: pointer; }
.gallery-horizontal-scroll { scroll-behavior: smooth; }

/* fullscreen image viewer (Wix opens a dialog on item click) */
.wixclone-lb {
  position: fixed; inset: 0; z-index: 100000; display: none;
  background: rgba(0,0,0,.92); align-items: center; justify-content: center;
}
.wixclone-lb[data-open="true"] { display: flex; }
.wixclone-lb img { max-width: 94vw; max-height: 90vh; object-fit: contain; }
/* the 250px crop stands in until the 2000px file arrives; blurring it reads as a
   deliberate progressive load rather than a soft photo */
.wixclone-lb[data-hd-loading="true"] img { filter: blur(6px); }
.wixclone-lb img { transition: filter .25s ease; }
.wixclone-lb[data-hd-loading="true"]::after {
  content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: wixclone-spin .8s linear infinite;
}
@keyframes wixclone-spin { to { transform: rotate(360deg); } }
.wixclone-lb button {
  position: absolute; top: 18px; right: 22px; background: none; border: 0;
  color: #fff; font-size: 34px; line-height: 1; cursor: pointer;
}

/* ---- Aveline header lockup ---------------------------------------------
   Replaces the Truffle horse PNG (and the galloping rig that animated it; the
   limb layers it depended on now live in _archive/unused-assets, so that code
   had already gone inert -- every part 404'd and the onerror path left the flat
   logo alone).

   The mark is the "Soft A": two legs meeting at a rounded apex with the
   crossbar run well past both of them, so the horizontal reads before the
   letter does. Drawn inline rather than shipped as a PNG so it inherits the
   header's white and stays crisp at any density.

   ONE WORD UNDER THE MARK. It read "AVELINE / Films" over two lines; the second
   is gone at Daniel's request, and with it the reason the first was set small --
   it was the quieter half of a pair. Alone it is the wordmark, so it takes the
   size the pair used to share.

   Set in the Dancing Script the site uses for its taglines, so the header
   matches the line of script beneath it. The stack ends in `serif`, never the
   bare `cursive` keyword -- `cursive` resolves to Comic Sans on Windows.
   ------------------------------------------------------------------------ */
.avl-lockup {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: #fff; line-height: 1; text-align: center;
}
/* 35% up on the original 100%/150px. The lockup is centred, so the extra width spills
   evenly either side of the link box and into the shield behind it — there is room:
   the gap between the two nav bars is far wider than the mark. */
.avl-a { width: 135%; max-width: 202px; height: auto; display: block; flex: none; }
/* AN UPRIGHT DIDONE, WHICH THE SITE DID NOT HAVE. The wordmark wants the flat hairline
   serifs and heavy stems of a Bodoni; the only Didot the mirror carries is the ITALIC
   cut, and there is no un-slanting an italic — `font-style: normal` does nothing to a
   file whose glyphs are drawn on a slope, and shearing it back upright (tested at 8, 11
   and 14 degrees) leaves the letterforms still reading as italic and now distorted with
   it. Falling back to the Mac's own Didot would look right on the machine it was
   designed on and like Georgia on Windows, which is not a thing a logo may do.

   So: Bodoni Moda, the latin subset, 46KB, served from the site's own asset directory.
   SIL Open Font License 1.1 — bundling and serving it is exactly what that licence is
   for. It is a variable font, and `opsz` is the axis that decides how fine the hairlines
   are drawn: at its display end (96) they are sub-pixel at 20px and the thin strokes of
   the A and the V simply vanish on a non-retina screen — the wordmark came out reading
   "\/\/ELINE". 14 is near its TEXT end, which is what that axis is for, and the weight
   is up to 600 to carry the stems. Set together they are the drawing that survives being
   small.

   `text-indent` matches the tracking so the trailing space after the last letter does
   not push the whole word off centre. */
@font-face {
  font-family: "bodoni-moda";
  src: url("/a/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
.avl-name {
  font-family: "bodoni-moda", Didot, "Bodoni 72", "Hoefler Text", Garamond, serif;
  font-style: normal; font-weight: 600; font-variation-settings: "opsz" 14;
  white-space: nowrap;
  font-size: 20px; line-height: 1.1; letter-spacing: .22em; text-indent: .22em;
  text-transform: uppercase; margin-top: 4px;
}
/* the Wix link class clips its child; the lockup is shorter than the box, but
   keep it visible so no descender is ever sheared */
#comp-lvy323wm .apPOZK { overflow: visible; }

/* The phone's shield is narrower than the desktop's, and .22em of tracking on eight
   letters is a lot of width to ask of it — the tracking comes in with the size. */
@media (max-width: 750px) {
  .avl-a { max-width: 135px; }
  .avl-name { font-size: 13px; letter-spacing: .18em; text-indent: .18em; margin-top: 3px; }
}
/* ---- end Aveline header lockup ---- */

/* ---- the calendar ------------------------------------------------------
   ONE calendar, worn two ways. The wedding-date field pops it open below the
   box; the meeting scheduler further down the same form draws it already open,
   in the flow of its block. Every rule below is shared and only .twf-cal-inline
   at the end undoes the four things that make the first one a popup.

   That sharing is the whole point. Two date pickers a few hundred pixels apart
   on one form that disagree about the weight of a day numeral read as two
   different sites, and the only reliable way to keep them agreeing is to have
   one set of declarations rather than two kept in step by hand.

   Wix shipped the wedding-date field as a read-only text box plus an "Open
   calendar" button whose script is not part of the mirror. It was briefly
   promoted to <input type="date">, which worked but dragged the browser's own
   chrome in with it: a permanent mm/dd/yyyy ghost in an otherwise empty form
   and a second, second-hand calendar glyph next to Wix's. This is a real panel
   instead, drawn from the form's own tokens -- #EFF0E8 fill, 1px black rule,
   didot italic, square corners -- so it reads as part of the page.

   Colours are inherited rather than restated wherever possible; the two that
   are hard-coded are the field fill and the black rule, both sampled from the
   live form. */
.twf-cal-anchor { position: relative; overflow: visible; }

.twf-cal {
  position: absolute; z-index: 9999; top: calc(100% + 7px); left: 0;
  /* border-box so place() can clamp the whole panel to a narrow form in one
     number -- the mobile form is 280px, narrower than the panel's natural 292 */
  box-sizing: border-box; width: 292px; padding: 14px 16px 16px;
  background: #eff0e8; border: 1px solid #000;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  font-family: didot-w01-italic, serif; color: #000;
  text-align: center; cursor: default;
  animation: twf-cal-in .16s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes twf-cal-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
/* flipped above the field when it would open off the bottom of the window */
.twf-cal.twf-cal-up { top: auto; bottom: calc(100% + 7px); animation-name: twf-cal-in-up; }
@keyframes twf-cal-in-up {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

.twf-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 9px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, .22);
}
.twf-cal-title { font-size: 16px; letter-spacing: .04em; white-space: nowrap; }
/* the didot single-angle-quote glyphs are small for their point size, so these
   run larger than the day numerals to read as controls at all */
.twf-cal-head button {
  width: 26px; height: 26px; padding: 0; flex: none;
  background: none; border: 0; cursor: pointer; color: inherit;
  font: inherit; font-size: 23px; line-height: 24px; opacity: .55;
}
.twf-cal-head button:hover { opacity: 1; }
.twf-cal-head button[disabled] { opacity: .15; cursor: default; }

.twf-cal table { border-collapse: collapse; width: 100%; }
.twf-cal th {
  padding: 7px 0 4px; font-weight: normal; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(0, 0, 0, .45);
}
.twf-cal td { padding: 0; }
.twf-cal td button {
  display: block; width: 100%; height: 30px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: inherit;
}
/* Square, not the usual circle -- the form's boxes have no radius anywhere,
   and a pill in the middle of them looks borrowed from another site. */
.twf-cal td button:hover { background: rgba(0, 0, 0, .07); }
.twf-cal td button[disabled] { color: rgba(0, 0, 0, .2); cursor: default; background: none; }
.twf-cal td button[aria-current="date"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38); }
/* aria-selected is the wedding-date panel, where a day is one option among many;
   aria-pressed is the meeting scheduler, where pressing the chosen day again
   clears it. Different semantics, deliberately identical paint. */
.twf-cal td button[aria-selected="true"],
.twf-cal td button[aria-pressed="true"] { background: #000; color: #eff0e8; box-shadow: none; }
.twf-cal :focus-visible { outline: 1px solid #000; outline-offset: -1px; }

@media (prefers-reduced-motion: reduce) { .twf-cal { animation: none; } }

/* The meeting scheduler's copy, which is already open and sits in the flow of
   its block rather than hanging off a field. Only the popup-ness comes off: no
   absolute placement (so its place() has nothing to do), no lift off the page,
   and no entrance -- it is not entering, it is already there.

   THE 292px SURVIVES, as a maximum rather than a width. The meeting block is as
   wide as the form column -- 436px on a desktop -- and letting the panel fill it
   stretches every day cell to 58x30, so the same numerals in the same face read
   as a different control two fields further down the page. Capped, the two are
   the same object twice. It is a max and not a width so that a phone, whose
   column is narrower than 292, still gets a panel that fits its form -- and the
   phone-number input in this same block is already capped at 300 for the same
   reason. */
.twf-cal.twf-cal-inline {
  position: static; width: 100%; max-width: 292px; margin-top: 6px;
  box-shadow: none; animation: none;
}

/* ---- the times, beside the calendar -------------------------------------
   The scheduler used to be a month with a row of wrapped time chips underneath, so
   choosing a day pushed the submit button down by however many times that day had —
   and at half-hourly slots that is fifteen of them, a block taller than the calendar
   that moved every time you changed your mind. They sit in a column to its right now.

   NO MEASURING. The row is `align-items: stretch`, so the column is exactly as tall as
   the calendar beside it whatever month is showing; the list inside is absolutely
   positioned against it and scrolls. That is the whole of "no longer than the calendar,
   scroll for more" — there is no height to compute and nothing to keep in step on a
   resize. `min-height: 0` because a flex child will not shrink below its content
   without it, and the content here is fifteen buttons.

   The phone stacks instead (.twf-when-stack): 292px of calendar and a column of times
   do not both fit in a 280px form, and a 168px-tall scroller under the month is the
   same offer in the space there is. */
.twf-when-row { display: flex; align-items: stretch; gap: 14px; margin-top: 6px; }
.twf-when-row > .twf-cal-inline { flex: 0 1 auto; margin-top: 0; }
/* A column of times is as wide as a time and no wider. It used to grow into whatever the
   calendar left, which was right while it was the last thing in the row; with the zone menu and
   the number field beside it now, growing here starves them and the zone gets elided to
   "CDT · Chi…". The spare width goes to that column instead — see .twf-when-side. */
.twf-when { flex: 0 1 138px; display: flex; flex-direction: column; min-width: 0; }
.twf-when-head {
  font-family: avenir-lt-w01_35-light1475496, "Avenir Next", Avenir, Helvetica, sans-serif;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; line-height: 1.5;
  color: rgba(0, 0, 0, .55); padding-bottom: 5px; margin-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, .22);
}
/* Two lines by construction — see times(). Blocks so the break is ours and not the column's. */
.twf-when-head span { display: block; white-space: nowrap; }
.twf-when-head span + span { color: rgba(0, 0, 0, .42); }
.twf-when-list { position: relative; flex: 1 1 auto; min-height: 0; }
.twf-when-scroll {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 5px; padding-right: 3px;
}
.twf-when-scroll button {
  flex: none; box-sizing: border-box; width: 100%; padding: 6px 4px;
  background: #eff0e8; border: 1px solid #000; cursor: pointer;
  font-family: didot-w01-italic, Didot, Georgia, serif; font-size: 13px; color: #000;
  transition: background .25s ease, color .25s ease;
}
.twf-when-scroll button:hover { background: rgba(0, 0, 0, .08); }
.twf-when-scroll button[aria-pressed="true"] { background: #000; color: #eff0e8; }
.twf-when-scroll :focus-visible { outline: 1px solid #000; outline-offset: -1px; }
/* A scrollbar in the page's ink rather than the platform's blue-grey. */
.twf-when-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.35) transparent; }
.twf-when-scroll::-webkit-scrollbar { width: 5px; }
.twf-when-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .35); }
.twf-when-empty {
  font-family: avenir-lt-w01_35-light1475496, "Avenir Next", Avenir, Helvetica, sans-serif;
  font-size: 11.5px; color: rgba(0, 0, 0, .6); line-height: 1.45;
}
/* ---- the column beside the month ----------------------------------------
   The zone the times are written in, and the number to call, both starting on the calendar's
   own top line — which is what was asked for and is also the better shape: the panel reads
   left to right (pick a day, pick a time, tell us where to ring) instead of stacking three
   questions above the month. The two sit side by side so BOTH their tops are on that line;
   `align-items: flex-start` is what keeps them there rather than centring them in a column as
   tall as the calendar. */
.twf-when-side {
  flex: 1 1 330px; min-width: 0;
  display: flex; align-items: flex-start; gap: 10px;
}
.twf-when-side > * { min-width: 0; }
.twf-when-reach { flex: 1 1 auto; min-width: 0; }
/* The zone control carries `flex: 1 1 0` inline, from when it shared a line with a label and
   was meant to fill it. Sharing this column with the number field instead, that basis collapses
   it to its floor and the city name is elided to "CDT · C…". Its own width here, capped so it
   cannot crowd out the field beside it. !important is the only thing that beats the inline
   style it is built with. */
.twf-when-side > [data-tz-wrap] {
  /* Wide enough for the longest zone it can show — "PDT · Los Angeles" plus its caret — and
     fixed, so it does not take a share of a column whose share is a fraction of a fraction and
     end up eliding the city it exists to name. */
  flex: 0 0 152px !important;
  max-width: 152px !important;
  margin-left: 0 !important;
}
/* Drawn on its own when there is no month to sit beside — a failed slot fetch still has to ask
   for a number. */
.twf-when-side.twf-when-side-alone { display: block; }
.twf-when-side.twf-when-side-alone > [data-tz-wrap] { margin-bottom: 10px; }

/* Stacked: the column has no calendar to take its height from, so it gets one of its own. */
.twf-when-row.twf-when-stack { display: block; }
.twf-when-row.twf-when-stack .twf-when-side { display: block; margin-top: 12px; }
.twf-when-row.twf-when-stack .twf-when-reach { margin-top: 10px; }
.twf-when-row.twf-when-stack > .twf-cal-inline { margin: 0 auto; }
.twf-when-row.twf-when-stack .twf-when { margin-top: 11px; }
/* Tall enough for five, which is what a day now offers — it was 168px from when a day held
   fifteen of them and scrolling was the point, and that clipped the fifth of five for no
   reason. It stays an explicit height on purpose: the list inside is positioned against this
   box, so `auto` measures nothing and the column collapses to a header with no times under it. */
.twf-when-row.twf-when-stack .twf-when-list { height: 205px; flex: none; }
@media (prefers-reduced-motion: reduce) { .twf-when-scroll button { transition: none; } }

/* ---- the two steps ------------------------------------------------------
   The page is a funnel and now says so: build the day you want in one, ask us for it in
   two. A NUMERAL, not the words "step one" — the number is the whole message and a
   letter-spaced eyebrow above the title was saying it in type too small to be the first
   thing anyone read. Set in the title's own cursive at 1.55× its size, so the pair reads
   as one drawn object rather than as a figure borrowed from another face.

   Both heads are built from these rules — step two is drawn by _clone.js — so they cannot
   drift apart. `.twf-price-head h2` (the calculator's own rule, in the page's <style>) still
   supplies the cursive; the size is set here, 35% up from the 40px it was.

   Baseline, not centre: `align-items: baseline` sits the numeral ON the title's line rather
   than floating it beside the block, and the small negative bottom margin pulls the cursive's
   generous descender space back so the group reads as one line. */
.twf-step {
  display: flex; align-items: baseline; justify-content: center;
  gap: 18px; text-align: center;
}
/* NOT THE TITLE'S CURSIVE. Sacramento's "1" is a single leaning stroke with no flag and no
   foot — at 84px beside the words it read as a stray pen mark rather than as a number, which
   is the one thing this character has to do. The page's didot italic, which is the face on
   every field label below it, has a numeral that is unmistakably a numeral. */
.twf-step-n {
  font-family: didot-w01-italic, Didot, Georgia, serif; font-weight: 400;
  font-size: 76px; line-height: 1; color: #000;
}
.twf-step h2 { font-size: 54px !important; line-height: 66px !important; }

/* Steps two and three are drawn ABOVE the block they head, on the page's own tan rather than
   on the white panel or the films — they name the step, and the block below is only where it
   is carried out. */
.twf-step2, .twf-step3 { margin: 0 0 14px; }

/* A flex item will not shrink below its own content unless told it may, and a cursive title
   that cannot shrink runs out through the side of the card instead of wrapping. */
.twf-step h2 { min-width: 0; }

@media (max-width: 767px) {
  .twf-step { gap: 10px; }
  .twf-step-n { font-size: 52px; }
  .twf-step h2 { font-size: 33px !important; line-height: 42px !important; }
}

/* ---- the tagline --------------------------------------------------------
   Underlined at Daniel's request. `text-underline-offset` because this is a 41px script
   face with long descenders — the default rule is drawn through the tails of the g, p
   and y in "Photography & Videography" and reads as a strikethrough. Dropped clear of
   them and thinned, it reads as a rule under the line, which is what was wanted.
   The class is put on by _clone.js, keyed on the sentence: the element's id is a Wix
   build hash and there is no way to match text from a stylesheet. */
.twf-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-skip-ink: none;
}

/* ---- header rules ------------------------------------------------------- */
/* ONE MARKER, TWO PLACES IT CAN LAND. Everything sits at its hairline weight by default and
   exactly one thing thickens to 3px to say where you are. On a subpage that is the tab you
   are on — the whole HORIZONTAL rule it sits on, above and below. On the homepage
   it is the two VERTICAL lines flanking the logo, and the horizontal rules stay thin.

   THE VERTICALS ARE NOT THE NAV RULES, which is what this got wrong twice. They are the
   left and right BORDERS of the logo's own <a href="/"> — one element, 1px solid white on
   its left and right only, 145px tall, sitting either side of the logo. They are easy to
   miss when hunting the DOM: the element is 180px wide, so it fails any "narrow box" test;
   what makes it two thin lines is that only its side borders are painted.

   HOVER IS A TRIGGER AGAIN, asked for on 2026-08-11. It had been removed on the reasoning
   that the marker should state which page you are on rather than react to the mouse — that
   reasoning is superseded, so do not "restore" the hover-less version. It is the same 3px
   the current page carries, which makes hovering a tab a preview of landing on it. On the
   tab you are already on, hover is a no-op because it is drawn at that weight already.

   No transition, matching the current-page marker: `data-twf-item` is applied by the
   deferred script, so anything animated here plays once on every page load as a flash. */
/* THE MARKER IS THE WHOLE RULE, NOT THE TAB (changed 2026-08-12). It used to be the
   tab's own segment of the rule; selecting or hovering a tab now thickens the entire
   line running through it, top and bottom. The overlay therefore sits on the <ul> --
   the element whose top/bottom borders actually draw that rule -- and the tabs only
   decide when it lights, which the deferred script does by toggling the attributes
   below. Overlays rather than a fatter border, for the same reason as the verticals:
   border width is layout, and growing it would shift the centred header. */
[data-twf-line] { position: relative; }
[data-twf-line]::before,
[data-twf-line]::after {
  content: ""; position: absolute; left: 0; right: 0; height: 0;
  background: #fff; opacity: 0; pointer-events: none;
}
[data-twf-line]::before { top: -1px; }
[data-twf-line]::after  { bottom: -1px; }
[data-twf-line][data-twf-line-hover]::before,
[data-twf-line][data-twf-line-hover]::after,
[data-twf-line][data-twf-line-current]::before,
[data-twf-line][data-twf-line-current]::after { height: 3px; opacity: 1; }

/* NO VERTICAL RULES BESIDE THE LOGO. Asked for on 2026-08-12. There were two of them and
   they had different sources, so both have to go: the 3px overlay this used to paint as the
   homepage's "you are here" marker, and Wix's OWN hairline left/right borders on the logo
   link, which showed on every page underneath it.
   The borders are made transparent rather than removed — they are 0.6px of layout each, and
   dropping them would narrow the logo and shift the centred header sideways. With the
   overlay gone the homepage simply has no marker, which is the intended trade. */
[data-twf-vbar]::before,
[data-twf-vbar]::after { content: none; }
/* !important because the white comes from `#comp-lwe7e5ex .style-moermv4t__root`, an
   ID-plus-class rule that outranks any attribute selector — and that id is a Wix build hash
   that changes whenever the site is republished, so matching it by name would quietly stop
   working. Colour only: the 1px of border stays as layout. */
[data-twf-vbar] {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

/* ---- award badge links --------------------------------------------------
   The award strip is a single flat PNG, so each badge gets a transparent
   anchor laid over its measured extent (see tools/award-hotspots.py). The
   gaps between badges are deliberately left uncovered -- clicking the empty
   ivory between two awards should do nothing.

   A flat image cannot light up one badge on hover, so the affordance is a
   hairline rule that wipes in underneath it, which is how the rest of the
   page signals a link. */
.twf-awards { position: relative; }
.twf-award-hit {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  display: block; text-decoration: none; cursor: pointer;
}
.twf-award-hit::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4%;
  border-bottom: 1px solid rgba(0, 0, 0, .55);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}
.twf-award-hit:hover::after, .twf-award-hit:focus-visible::after { transform: scaleX(1); }
.twf-award-hit:focus-visible { outline: 1px solid rgba(0, 0, 0, .6); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .twf-award-hit::after { transition: none; } }

/* ---- Wix anchor-menu rail ------------------------------------------------
   The pinned column of dots and labels ("Inquire", plus two unlabelled stops)
   down the left edge of the DESKTOP HOMEPAGE — Wix's anchor-menu widget, jumping
   to sections of that page. Removed at the user's request.

   Hidden rather than cut out of the snapshot: this is Wix markup the mirror
   regenerates, so an HTML edit would come back on the next re-mirror and a rule
   here will not. Matched on `wixui-anchor-menu`, which is Wix's semantic class and
   stable across republishes — unlike the sibling hashes (UQZdkM, comp-m0se2cmd),
   which change every build.

   The nav is the visible part; its `-pinned-layer` wrapper is a 0x0 fixed box that
   would leave nothing on screen anyway, but it goes too. That selector is its OWN
   rule on purpose — folded into the list above, a browser without `:has()` would
   treat the whole selector list as invalid and the rail would come back. */
.wixui-anchor-menu { display: none !important; }
[id$="-pinned-layer"]:has(.wixui-anchor-menu) { display: none !important; }

/* ---- "Ready to Book" ----------------------------------------------------
   GONE. It was the right half of a centred pair with "Schedule a Call" and led off
   to a Google Form; with its partner deleted and the inquiry form now taking the
   date, the meeting and the venue itself, it was a third route to a conversation
   the page was already having. The rule that used to re-centre the survivor of the
   pair (`#comp-lw0w6gjh { left: 361px }`) went with it.

   Cut from the markup of both homepages AND hidden here, which is belt and braces on
   purpose: these files are 800k+ of mirrored Wix output that gets regenerated, and an
   HTML edit does not survive a re-mirror — the same reason the anchor-menu rail above
   is hidden rather than deleted.

   KEYED ON THE BUTTON'S OWN LABEL, not on `#comp-lw0w6gjh`. The id is a Wix build hash
   and is regenerated on every republish; the label is content Daniel typed. The wrapper
   goes rather than the link, because the link is 258x54 inside a positioned wrapper that
   would otherwise hold its grid row open around nothing. That selector is its OWN rule:
   folded in with the one above it, a browser without `:has()` would throw out both and
   the button would come back. */
a[aria-label="Ready to Book"] { display: none !important; }
[data-semantic-classname="button"]:has(a[aria-label="Ready to Book"]) { display: none !important; }


/* ---- header nav size ----------------------------------------------------
   Pricing / Locations / Meet the Team / FAQs. Wix sizes the menu through a --fnt
   custom property on the component, not a font-size on the link, so the override
   goes to the property: the family, weight and leading it set are all preserved and
   only the size moves. `html` prefix because the page's own <style> block is emitted
   after this file loads and would otherwise win on equal specificity.
   25px -> 30px; the dropdown above tracks it. */
/* TWO menus, not one: Wix splits the bar either side of the logo, so Pricing/Locations
   and Meet the Team/FAQs are separate components. Setting only the first left the right
   pair at 25px. */
html #comp-lvy35vuc,
html #comp-j77j3epu { --fnt: normal normal normal 30px/1.4em kepler-w03-light-scd-cp, serif; }

/* At 25px the items sat at zero padding and still read as separate words; at 30px
   "Meet the Team" and "FAQs" ran together. Each group's <ul> is 410px wide and was only
   ~240px full, so the room for this was already there. The ::before/::after page marker
   spans the item box, so its segment of the rule widens with it — which is the intent. */
/* Wix measures the menu in JS and writes an inline width on each <li> — sized for the
   old 25px text, so at 30px the labels overflowed their boxes and "Meet the Team" ran
   into "FAQs". !important is the only thing that beats an inline style; letting the item
   size to its own content is what actually fixes it, and the padding is the gap between
   them. Each group's <ul> is 410px and was ~240px full, so the room was already there. */
html #comp-lvy35vuc [data-twf-item],
html #comp-j77j3epu [data-twf-item] { width: auto !important; padding-inline: 14px; }

/* ---- stray mobile nav arrows --------------------------------------------
   Wix ships four unlabelled <button>s in the mobile menu parked off the left edge at
   left:-47px. They were never visible because each nav item's wrapper painted the black
   bar over them; deleting the Reviews item removed that fill and left two of their white
   border rules showing as short lines at the left edge of the nav.

   They are decorative — aria-label is empty and they hold only an SVG. The REAL submenu
   control is a different element (aria-label="Locations", data-testid="expandablemenu-toggle")
   and is deliberately not matched here. Keyed on Wix's semantic testid rather than the
   style-lwe7miww__root hashes beside it, which change on every republish. */
.device-mobile-optimized button[data-testid="buttonContent"][aria-label=""] { display: none !important; }

/* ---- cookie banner, removed ---------------------------------------------
   Taken out on 2026-08-11 at the user's request: no pop-up, and no privacy policy page
   behind it either (that page is deleted, archived in _archive/). The banner's own
   "Privacy Policy" link pointed at /home, which has never existed and 404s, so it was
   asking for consent against a disclosure that would not load.

   Hidden rather than cut out of the 20 snapshots: this is Wix markup a re-mirror
   regenerates, and it is render-blocking CSS in <head>, so the banner never paints — no
   flash before it disappears. Matched on Wix's semantic data-hook, not the build hashes
   beside it.

   NOTE FOR WHOEVER READS THIS NEXT: the GA4 and Google Ads tags still fire. They never
   depended on this banner — it recorded a click in localStorage and hid itself, it did not
   gate the tags. So tracking is unchanged; only the disclosure is gone. Google's Analytics
   and Ads terms ask for a published privacy policy; that trade was made knowingly. */
[data-hook="consent-banner-root"] { display: none !important; }

/* ---- "Submit Inquiry", as the thing you press ---------------------------
   The pill was cream on cream with a hairline around it and its label in grey — the same
   weight as the two "Phone Call"/"Zoom Meeting" choices above it and lighter than the field
   boxes it sat under, so the one control that ENDS the form looked like one more option in
   it. Filled instead: black pill, cream label, and the hover inverts it back to the outline
   it used to be. Nothing else on the card is a solid black shape, which is the whole point.

   The black and the cream are the page's own — #000 is the header bar and the tickbox rules,
   rgb(239,240,232) is the field fill — and they are already paired in this form: it is
   exactly how a chosen meeting kind is drawn. So the button reads as the same family, one
   step louder.

   KEYED ON THE LABEL and matched with ^=, because the label is not constant: choosing a
   meeting rewrites it (and its aria-label) to "Submit Inquiry & Schedule Meeting". `html`
   prefix and !important because Wix emits the button's own colours from a <style> block
   after this file loads, and paints the label colour inline on the span.

   The span carries the colour, not the button: `color` on the button is inherited straight
   past by a Wix rule that sets the label's own. */
html [aria-label^="Submit Inquiry"][data-testid="buttonElement"],
html [aria-label^="Submit Inquiry"].wixui-button {
  background: #000 !important;
  border-color: #000 !important;
  /* LIFTED OFF THE CARD. The pill was flat black on white and read as a printed label; a soft
     drop shadow and a hover that raises it are the difference between a shape and a thing you
     press. The shadow is the same near-black at low alpha as the page's own ink, not a grey. */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important;
  transition: background .35s ease, border-color .35s ease,
              box-shadow .35s ease, transform .35s ease;
}
html [aria-label^="Submit Inquiry"][data-testid="buttonElement"]:hover,
html [aria-label^="Submit Inquiry"].wixui-button:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
  transform: translateY(-2px);
}
html [aria-label^="Submit Inquiry"][data-testid="buttonElement"]:active,
html [aria-label^="Submit Inquiry"].wixui-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25) !important;
}
html [aria-label^="Submit Inquiry"][data-testid="buttonElement"] span,
html [aria-label^="Submit Inquiry"].wixui-button span {
  color: rgb(239, 240, 232) !important;
  font-size: 23px !important;
  letter-spacing: .015em;
}
html [aria-label^="Submit Inquiry"][data-testid="buttonElement"]:hover,
html [aria-label^="Submit Inquiry"].wixui-button:hover {
  background: rgb(239, 240, 232) !important;
}
html [aria-label^="Submit Inquiry"][data-testid="buttonElement"]:hover span,
html [aria-label^="Submit Inquiry"].wixui-button:hover span { color: #000 !important; }
@media (prefers-reduced-motion: reduce) {
  html [aria-label^="Submit Inquiry"][data-testid="buttonElement"],
  html [aria-label^="Submit Inquiry"].wixui-button { transition: none; }
  html [aria-label^="Submit Inquiry"][data-testid="buttonElement"]:hover,
  html [aria-label^="Submit Inquiry"].wixui-button:hover { transform: none; }
}

/* ---- the enquiry panel --------------------------------------------------
   The white rectangle behind the form. It gets the 1px black rule the calculator's own
   panel has, so the two blocks on this page are the same object twice — and it is widened
   to the calculator's width by _clone.js, which measures that panel rather than repeating
   its number here. Border-box because the width it is given is the width it should paint. */
html [data-twf-panel] { box-sizing: border-box; border: 1px solid #000 !important; }

/* ---- the fields keep their outline ---------------------------------------
   Wix builds each field's border out of custom properties and gives the hover and focus
   states a WHITE one: `--brdh`/`--brdf` are 255,255,255 at 3px. On a cream page that is not a
   thicker border, it is no border — so the box you were typing in was the one box on the form
   with no line around it, which reads as the field having been switched off.

   Black in all three states, and 1px in all three: the border sits inside the box, so letting
   the focus state stay at 3px would shunt the text you are typing two pixels sideways the
   moment you clicked in. The focus cue is an inset shadow instead — it thickens the line
   without moving anything, and it is drawn on top of the white fill Wix swaps in, which is
   left alone because that swap is a good affordance and always was.

   `!important` because Wix declares these on a rule keyed on the component's own ID, which a
   class selector cannot outrank — and custom properties take !important like any other. */
html .wixui-text-input, html .wixui-date-picker, html .wixui-text-box {
  --brdh: 0, 0, 0 !important; --brwh: 1px !important;
  --brdf: 0, 0, 0 !important; --brwf: 1px !important;
}
html .wixui-text-input__input:focus,
html .wixui-date-picker__input:focus,
html .wixui-text-box textarea:focus {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
}

/* ---- the calculator's sample strip --------------------------------------
   The gap between the bottom of the option table and the photographs the wires point down
   into, halved at Daniel's request. Scoped to the homepage's copy of the calculator: the
   same component is a whole page of its own at /calculator, where it has the room. */
#twf-home-calc .samples { margin-top: 13px !important; }

/* ---- homepage funnel arrows ---------------------------------------------
   Same hand as the calculator's own wires: a hairline at .34 with a slightly
   firmer head, so these read as drawn by whoever drew those. overflow:visible
   because the corridors they run down sit outside the section's own box on the
   widest screens. pointer-events:none — they are a signpost, not a control. */
.twf-arrows {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
/* Square corners, deliberately: these are drafting lines now, not the swept hooks they
   started as, so the joins are mitred and the ends cut flat. */
.twf-arrows .twf-arrow { fill: none; stroke: #000; stroke-width: 1.1; opacity: .34;
  stroke-linecap: butt; stroke-linejoin: miter; }
.twf-arrows .twf-arrow-head { stroke-width: 1.5; opacity: .5; }
/* No corridor to wrap around once everything is one column, and the calculator's
   wires bow out at the same width for the same reason. */
@media (max-width: 900px) { .twf-arrows { display: none; } }

/* ---- step one -----------------------------------------------------------
   Enough of a gap that it is not crowding the site title, and no more: the whole
   point of the order below it is that the price panel's bottom edge lands above
   the fold on a 900px-tall window, and every pixel here is one it has to spend. */
#twf-home-calc .twf-step { margin-top: 4px; }