/* ==========================================================
   Vancity AI landing page
   1. base + components (hand written)
   2. layout rules lifted out of the markup, in page order

   Accent palette
   --------------
   #5C1E9D  rgb(92,30,157)    brand purple, matches the logo mark.
                              Solid fills only — buttons, active pills,
                              badges. Always carries #fff text (9.9:1).
   #7328C4                    hover for those solid fills.
   #A66BEF  rgb(166,107,239)  same hue, lifted for the near-black ground.
                              Used for accent TEXT, borders, outlines,
                              glows and low-alpha washes, where #5C1E9D
                              would only reach 2.0:1 against #0B0A09.
                              Reads 5.6:1 — matches the weight the old
                              red accent carried.
   #C09BFA                    hover for accent text / links.
   ========================================================== */


/* Type — inherited from vancouverphotovideo.com, the parent brand, so the
   two sites read as one company.
     Bebas Neue 400 — headings, nav, buttons, logo. One weight, no true
       lowercase, and already condensed: heading rules set uppercase, leave
       font-weight alone (it is inert), and use POSITIVE tracking. The old
       Geist rules ran -0.02 to -0.04em, which crushes this face.
     Roboto — body copy, inputs, and the small uppercase eyebrow labels
       that used to be Geist Mono.
   The parent declares `"Bebas Neue", cursive` — an Elementor default and a
   wrong fallback for a condensed display sans. Corrected here to a
   condensed stack, so a failed webfont degrades to something close. */
:root {
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* headings: replaces the old negative tracking, matching the parent's
     +0.75px on a 31px h2 */
  --track-display: 0.02em;
}
html {
  scroll-behavior: smooth;
  /* the header floats over the page, so an anchor scrolled to the very top
     would land under it */
  scroll-padding-top: 108px;
}
body { margin: 0; background: #0B0A09; color: #F2EDE7; font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
/* No browser inherits type into form controls, so without this they fall
   back to Arial. The parent site sets the same thing explicitly
   (--theme-font-input_font-family: Roboto). Class rules on the styled
   buttons outrank this, so their Bebas stands. */
input, textarea, select, button { font-family: inherit; }
* { box-sizing: border-box; }
a { color: #A66BEF; text-decoration: none; }
a:hover { color: #C09BFA; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
[data-rail]::-webkit-scrollbar { height: 6px; }
[data-rail]::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 999px; }
[data-rail]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 999px; }
[data-rail]:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.45); }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- hover / focus states lifted from style-hover + style-focus --- */
.hv1:hover{color:#F2EDE7 !important}
.hv2:hover{background:#7328C4 !important;color:#fff !important}
.hv3:hover{background:rgba(255,255,255,0.1) !important;color:#F2EDE7 !important}
.hv4:hover{background:rgba(255,255,255,0.11) !important;color:#F2EDE7 !important}
.hv5:hover{background:rgba(255,255,255,0.12) !important;color:#F2EDE7 !important}
.hv6:hover{background:rgba(255,255,255,0.12) !important}
.fc1:focus{border-bottom-color:#A66BEF !important}

/* --- category pills --- */
.pill { background: rgba(255,255,255,0.04); color: #A09A93; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.pill:hover { background: rgba(255,255,255,0.09); color: #F2EDE7; }
.pill.is-active { background: #5C1E9D !important; color: #fff !important; border-color: #5C1E9D !important; }

/* --- work reels: thumbnail until hover --- */
.reel-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; opacity:1; transition:opacity .28s ease; }
.reel-thumb.is-hidden { opacity:0; }

/* --- per-reel audio toggle --- */
.reel-audio { position:absolute; top:12px; right:12px; z-index:3; width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.14); border-radius:999px; background:rgba(11,10,9,0.68); backdrop-filter:blur(8px); color:#E8E2DB; cursor:pointer; opacity:0.9; transition:background .18s ease, border-color .18s ease, opacity .18s ease; }
.reel-audio:hover { background:rgba(11,10,9,0.88); opacity:1; }
.reel-audio:focus-visible { outline:2px solid #A66BEF; outline-offset:2px; }
.reel-audio.is-on { background:#5C1E9D; border-color:#5C1E9D; color:#fff; opacity:1; }
.reel-audio svg { width:16px; height:16px; display:block; }

/* --- FAQ marker: + rotates into x --- */
summary > span:last-child { display: inline-block; transition: transform .22s ease; }
details[open] > summary > span:last-child { transform: rotate(45deg); }

/* --- accessibility floor --- */
:focus-visible { outline: 2px solid #A66BEF; outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* --- what we do: one image in, one ad out --- */
.flow { display: flex; align-items: center; justify-content: center; gap: clamp(16px,2.6vw,36px); flex-wrap: wrap; }
.flow-panel { flex: 1 1 300px; max-width: 380px; min-width: 0; }
.flow-arrow { flex: 0 0 auto; width: 48px; height: 48px; margin-bottom: 76px; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(166,107,239,0.35); background: rgba(166,107,239,0.12); color: #A66BEF; font-size: 21px; line-height: 1; }
@media (max-width: 720px) {
    .flow-panel { flex-basis: 100%; max-width: 420px; }
    .flow-arrow { transform: rotate(90deg); margin: 0; }
}
/* --- mobile --- */
@media (max-width: 860px) {
    header nav { display: none !important; }
}
/* the phone would crowd the CTA once the menu is gone */
@media (max-width: 560px) {
    .header-tel { display: none; }
}
@media (max-width: 560px) {
    h1 span { text-align: center !important; }
}

/* ==========================================================
   Page styles, section by section
   ========================================================== */

/* --- PAGE --- */
.page-div {
  background: #0B0A09;
  /* clip, not hidden: hidden computes overflow-y to auto, which makes this a
     scroll container and stops the sticky header and the sticky hero stage
     inside it from ever engaging. clip trims the same overhang without
     creating one. The hidden line above it is the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* --- HEADER ---
   Lockup copied from the parent brand, vancouverphotovideo.com: an
   oversized logo hard against the left edge, the menu grouped right beside
   it (not pushed to the far margin), and phone + squared CTA on the right.
   Parent measures at 1440: logo 240x102, menu Bebas 20px/500 starting at
   x=351, phone Bebas 22px, CTA 45px tall on a 3px radius.

   fixed, not sticky: sticky would take its height out of the flow and push
   the hero's 100svh stage that far past the fold, cutting the bottom row
   of the contact sheet and the scroll cue off. Fixed lets the film start
   at the top of the viewport and the header float over it. */
.header-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  /* transparent only over the hero film, so the cut runs edge to edge
     behind it. .is-solid is added from the foot of index.html the moment
     the hero clears the header band, and the bar takes a ground from there
     down — the sections past the hero run from bright reel frames to the
     white contact block, and white type cannot hold on both. */
  background: transparent;
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.header-header.is-solid {
  background: #0B0A09;
  border-bottom-color: rgba(255,255,255,0.08);
}
.header-div {
  /* the parent runs edge-to-edge on a 45px gutter rather than centring a
     column, which is what puts the logo hard left */
  max-width: none;
  margin: 0;
  padding: 20px clamp(20px, 3.1vw, 45px);
  /* three tracks rather than a flex row: the outer two take equal space so
     the middle one sits on the page centre line, which is what centres the
     menu against the viewport instead of against the gap left over by the
     logo and the actions */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 3.4vw, 48px);
}
.header-a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #F2EDE7;
  flex: 0 0 auto;
}
/* wordmark logo — width follows the art's aspect ratio, so only height is
   set. The art is 187x76, so 60px tall reads ~148px wide, holding roughly
   the presence the parent's 240x102 block has on the same viewport. */
.header-img {
  width: auto;
  height: clamp(40px, 4.2vw, 60px);
  display: block;
}

/* --- NAV --- */
/* centre track of the header grid, so the menu sits on the page centre
   line rather than wherever the logo happens to end */
.nav-nav {
  display: flex;
  gap: clamp(16px, 1.9vw, 27px);
  align-items: center;
  justify-self: center;
}
.nav-a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
}
/* phone + CTA hold the right edge */
.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  justify-self: end;
}
.header-tel {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: var(--track-display);
  color: #FFFFFF;
  white-space: nowrap;
}
/* squared, not the pill the rest of the page uses — the parent's CONNECT
   button is a 3px radius with a trailing arrow, and it is the one control
   they set in Roboto rather than Bebas */
.nav-a-2 {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #5C1E9D;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 18px;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
}
.nav-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform .18s ease;
}
.nav-a-2:hover .nav-arrow { transform: translateX(3px); }

/* Once the menu is hidden the header is a two-track grid, not three.
   display:none removes the menu as a grid ITEM, not just visually, so a
   three-track template would be left holding two items: they auto-place
   into columns 1 and 2, and justify-self:end then pins the actions to the
   end of the MIDDLE track instead of the right edge. Declared here rather
   than in the mobile block near the top of this file, because .header-div
   is defined below that block and would otherwise win on source order. */
@media (max-width: 860px) {
  .header-div { grid-template-columns: 1fr auto; }
}

/* --- HERO -------------------------------------------------------------
   The section is taller than the viewport and the stage inside it is
   sticky, so the extra length is a runway. Over that runway the film frame
   shrinks from full bleed to one square in the contact sheet, the sheet
   fades up behind it, and the headline rides down into the sheet's middle
   band. --hero-p (0 -> 1), --hero-fade (1 -> 0) and --hero-in (0 -> 1) come
   from the script at the foot of index.html; with no JS — or with reduced
   motion asked for — they keep the defaults below and the hero is a plain
   full-bleed video one screen tall.                                    */
.hero-section {
  --hero-p: 0;
  --hero-fade: 1;
  --hero-in: 0;

  /* one square in the sheet — also the size the film shrinks down to */
  --tile: clamp(84px, min(15vh, 11vw), 190px);
  --tile-radius: clamp(10px, 1.1vw, 18px);
  --mosaic-gap: clamp(16px, 2.4vh, 38px);
  --mosaic-band: clamp(76px, 12vh, 140px);   /* the row the headline lands in */
  --mosaic-top: 66px;                        /* clearance for the sticky header */

  /* padding-top shifts a centred grid down by half of itself, and the
     headline has to follow the sheet to stay inside its band */
  --mosaic-shift: calc(var(--mosaic-top) / 2);
  /* centre of row 4 — where the film lands — measured from the middle */
  --land-y: calc(var(--mosaic-shift) + var(--mosaic-band) / 2
                 + var(--mosaic-gap) + var(--tile) / 2);

  position: relative;
  /* svh is the right unit for a stage that must not jump when the mobile
     URL bar slides away, but it is not universal — a browser that does not
     know it drops the whole declaration. Every height in the hero therefore
     carries a vh line first: without it the section collapses to nothing,
     which takes the film and the sheet down with it and leaves the script
     with no runway to load either from. */
  min-height: 100vh;
  min-height: 100svh;
  background: #0B0A09;
}
/* the runway only exists once the script is driving it */
.js-hero .hero-section { min-height: 0; height: 210vh; height: 210svh; }

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* the purple wash the old tile field carried, now sitting behind the film */
.hero-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  width: 1100px;
  height: 640px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(166,107,239,0.16), rgba(166,107,239,0) 70%);
  pointer-events: none;
}

/* --- hero contact sheet --- */
.hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: var(--tile) var(--tile) var(--mosaic-band) var(--tile) var(--tile);
  row-gap: var(--mosaic-gap);
  align-content: center;
  justify-items: center;
  align-items: center;
  padding: var(--mosaic-top) clamp(10px, 2.4vw, 40px) 0;
  pointer-events: none;
  opacity: var(--hero-in);
  transform: scale(calc(.955 + .045 * var(--hero-in)));
}

.mtile {
  grid-row: var(--r);
  grid-column: var(--c) / span 2;
  width: var(--tile);
  height: var(--tile);
  border-radius: var(--tile-radius);
  overflow: hidden;
  background: #151311;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 10px 26px rgba(0,0,0,0.5);
}
.mtile > img,
.mtile > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- hero film --- */
.hero-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  /* full bleed at rest, one tile at the end of the runway */
  width:  calc(100% + (var(--tile) - 100%) * var(--hero-p));
  height: calc(100% + (var(--tile) - 100%) * var(--hero-p));
  transform: translate(-50%, calc(-50% + var(--land-y) * var(--hero-p)));
  border-radius: calc(var(--tile-radius) * var(--hero-p));
  overflow: hidden;
  background: #0B0A09;
  pointer-events: none;
  /* the landed square has to sit in the sheet like the tiles around it,
     and carry none of that weight while it is still full bleed */
  box-shadow: 0 0 0 calc(1px * var(--hero-p)) rgba(255,255,255,0.07),
              0 calc(10px * var(--hero-p)) calc(26px * var(--hero-p)) rgba(0,0,0,0.5);
  /* the box resizes every scroll frame — keep that relayout off the rest
     of the stage, and only hint the property the compositor can take */
  contain: layout paint;
  will-change: transform;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  /* the headline sits on the film with nothing over it, so the film is
     graded down while it is full bleed and lifts back to full as it
     becomes a thumbnail — the landed square then reads like the tiles
     around it rather than a dark hole in the sheet */
  filter: brightness(calc(0.66 + 0.34 * var(--hero-p)));
}


/* --- hero copy ---
   the headline is the only child in flow, so this box is centred on the
   headline alone and the buttons hang off it — that is what lets the
   headline hold its place while they clear out */
.hero-div-4 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: min(1000px, 100% - 48px);
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}
.hero-h1 {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(68px,10.8vw,156px);
  line-height: 0.95;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  /* the band is a single strip, so the headline has to stay one line */
  white-space: nowrap;
  transform: translateY(calc(var(--mosaic-shift) * var(--hero-p)));
}
.hero-span {
  color: #A66BEF;
}
.hero-div-5 {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 34px 0 0;
  opacity: var(--hero-fade);
}
/* once the buttons have faded they must stop taking clicks */
.hero-section.is-shrinking .hero-div-5 { pointer-events: none; }
.hero-a {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #5C1E9D;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 16px 22px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
}
.hero-a-2 {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: #F2EDE7;
  font-size: 15px;
  font-weight: 500;
  padding: 16px 22px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.hero-cue {
  position: absolute;
  right: clamp(20px,4vw,40px);
  bottom: clamp(34px,6vw,64px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: var(--hero-fade);
}
.hero-cue__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,237,231,0.6);
}
.hero-cue__line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, #A66BEF, transparent);
}

/* <= 720px — six columns, and the sheet is thinned to what fits */
@media (max-width: 720px) {
  .hero-section {
    --tile: clamp(70px, min(12vh, 26vw), 130px);
    --mosaic-top: 74px;
  }
  .js-hero .hero-section { height: 190vh; height: 190svh; }
  .hero-mosaic { grid-template-columns: repeat(6,1fr); }
  .mtile { grid-row: var(--rm); grid-column: var(--cm) / span 2; }
  /* six columns cannot hold sixteen frames — thin it, keeping one of each
     product in view and both centre rows still moving */
  .mtile[data-off-phone] { display: none; }
  /* one line would be unreadably small on a phone, so the headline wraps —
     the band it lands in is two rows deep here anyway */
  .hero-h1 {
    white-space: normal;
    font-size: clamp(60px, min(18.8vw, 14.4vh), 92px);
    line-height: 0.92;
  }
  .hero-cue { display: none; }
}

/* <= 520px tall — a phone held sideways, or a short desktop window.
   The sheet's five rows cost 4x--tile + the band + four gaps + the header
   clearance, and every one of those is already sitting on its clamp floor
   here, so nothing scales down far enough to fit: the outer still rows end
   up half off the stage top and bottom. Collapse rows 1 and 5 to nothing
   and let the two clip rows and the film carry the sheet on their own. */
@media (max-height: 520px) {
  .hero-section {
    --tile: clamp(52px, min(19vh, 9vw), 110px);
    --mosaic-gap: clamp(8px, 1.6vh, 18px);
    --mosaic-band: clamp(48px, 14vh, 96px);
    --mosaic-top: 54px;
  }
  .hero-mosaic {
    grid-template-rows: 0 var(--tile) var(--mosaic-band) var(--tile) 0;
  }
  .mtile[data-outer] { display: none; }
}

/* --- FORMATS --- */
.formats-section {
  padding: clamp(80px,10vw,150px) 24px;
}
.formats-div {
  max-width: 1240px;
  margin: 0 auto;
}
.formats-div-2 {
  text-align: center;
  max-width: none;
  margin: 0 auto;
}
.formats-div-3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A66BEF;
}
.formats-h2 {
  font-family: var(--font-display);
  margin: 16px 0 0;
  font-size: clamp(32px,4.4vw,62px);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-wrap: balance;
  text-transform: uppercase;
}
.formats-p {
  margin: 20px auto 0;
  color: #A09A93;
  font-size: clamp(16px,1.3vw,18px);
  line-height: 1.65;
  text-wrap: pretty;
}
.formats-strong {
  color: #F2EDE7;
  font-weight: 600;
}
.formats-div-4 {
  margin: clamp(44px,5vw,64px) 0 0;
}
.formats-div-5 {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #121110;
  border: 1px solid rgba(255,255,255,0.09);
  aspect-ratio: 9/16;
}
.formats-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.formats-div-6 {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,10,9,0.72);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E8E2DB;
}
.formats-div-7 {
  margin: 18px 0 0;
  text-align: center;
}
.formats-div-8 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: var(--track-display);
  color: #F2EDE7;
  text-transform: uppercase;
}
.formats-p-2 {
  margin: 8px 0 0;
  color: #A09A93;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.formats-div-9 {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #121110;
  border: 1px solid rgba(166,107,239,0.35);
  aspect-ratio: 9/16;
  box-shadow: 0 0 0 1px rgba(166,107,239,0.12),0 24px 60px -24px rgba(166,107,239,0.45);
}
.formats-div-10 {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(92,30,157,0.9);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.formats-div-11 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 32px;
  margin: clamp(48px,5vw,68px) 0 0;
  padding: clamp(36px,4vw,48px) 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.formats-div-12 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: #A66BEF;
}
.formats-div-13 {
  font-family: var(--font-display);
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: var(--track-display);
  color: #F2EDE7;
  text-transform: uppercase;
}

/* --- WORK --- */
.work-section {
  padding: clamp(80px,10vw,150px) 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: #0E0D0B;
}
.work-h2 {
  font-family: var(--font-display);
  margin: 16px 0 0;
  font-size: clamp(32px,4.4vw,62px);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
  text-transform: uppercase;
}
.work-p {
  margin: 18px auto 0;
  text-align: center;
  color: #A09A93;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
/* keeps a centred intro paragraph to a readable measure in the 1240px container */
.lede {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
.work-div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 40px 0 0;
}
.work-button {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  font-size: 16px;
  font-weight: 400;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12);
}
.work-div-2 {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 14px;
  margin: 36px 0 0;
}
.work-div-3 {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #121110;
  border: 1px solid rgba(255,255,255,0.08);
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 3/4;
}
.work-div-4 {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,10,9,0.68);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E8E2DB;
}
.work-div-6 {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #121110;
  border: 1px solid rgba(255,255,255,0.08);
  min-width: 0;
  grid-column: 3;
  grid-row: 1;
  aspect-ratio: 3/4;
}
.work-div-8 {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #121110;
  border: 1px solid rgba(255,255,255,0.08);
  min-width: 0;
  grid-column: 3;
  grid-row: 2;
  aspect-ratio: 3/4;
}
.work-div-9 {
  margin: 36px 0 0;
}
.work-div-10 {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #121110;
  border: 1px solid rgba(255,255,255,0.08);
  aspect-ratio: 16/9;
}

/* --- PROCESS --- */
.process-h2 {
  font-family: var(--font-display);
  margin: 16px 0 0;
  font-size: clamp(32px,4.4vw,62px);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
  text-transform: uppercase;
}
.process-div {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 1px;
  margin: 56px 0 0;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  overflow: hidden;
}
.process-div-2 {
  background: #0B0A09;
  padding: 32px 26px 38px;
}
.process-div-3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: #A66BEF;
}
.process-h3 {
  font-family: var(--font-display);
  margin: 20px 0 0;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.process-p {
  margin: 10px 0 0;
  color: #A09A93;
  font-size: 14.5px;
  line-height: 1.65;
}

/* --- COMPARE --- */
.compare-h2 {
  font-family: var(--font-display);
  margin: 16px 0 0;
  font-size: clamp(32px,4.4vw,62px);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
  text-transform: uppercase;
}
.compare-div {
  margin: 48px 0 0;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  font-size: 14.5px;
}
.compare-th {
  text-align: left;
  padding: 20px 22px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7C766F;
  font-weight: 400;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.compare-th-2 {
  text-align: left;
  padding: 20px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #F2EDE7;
  background: rgba(166,107,239,0.09);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.compare-th-3 {
  text-align: left;
  padding: 20px 22px;
  font-size: 15px;
  font-weight: 500;
  color: #A09A93;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.compare-td {
  padding: 18px 22px;
  color: #7C766F;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.compare-td-2 {
  padding: 18px 22px;
  font-weight: 600;
  background: rgba(166,107,239,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.compare-td-3 {
  padding: 18px 22px;
  color: #A09A93;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.compare-td-4 {
  padding: 18px 22px;
  color: #7C766F;
}
.compare-td-5 {
  padding: 18px 22px;
  font-weight: 600;
  background: rgba(166,107,239,0.05);
}
.compare-td-6 {
  padding: 18px 22px;
  color: #A09A93;
}

/* --- PRICING --- */
.pricing-h2 {
  font-family: var(--font-display);
  margin: 16px 0 0;
  font-size: clamp(32px,4.4vw,62px);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
  text-transform: uppercase;
}
.pricing-div {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  gap: 16px;
  margin: 48px 0 0;
  align-items: start;
}
.pricing-div-2 {
  border: 1px solid rgba(166,107,239,0.4);
  border-radius: 22px;
  background: linear-gradient(180deg,rgba(166,107,239,0.10),rgba(166,107,239,0) 55%),#121110;
  padding: 36px 32px 40px;
}
.pricing-div-3 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pricing-h3 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.pricing-span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A66BEF;
  border: 1px solid rgba(166,107,239,0.45);
  padding: 5px 9px;
  border-radius: 999px;
}
.pricing-div-4 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 0;
}
.pricing-span-2 {
  font-family: var(--font-display);
  font-size: clamp(46px,5.5vw,68px);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: 1;
  text-transform: uppercase;
}
.pricing-span-3 {
  color: #A09A93;
  font-size: 16px;
}
.pricing-p {
  margin: 14px 0 0;
  color: #A09A93;
  font-size: 15px;
  line-height: 1.6;
}
.pricing-div-5 {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
}
.pricing-div-6 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #E8E2DB;
  font-size: 15px;
}
.pricing-span-4 {
  color: #A66BEF;
  line-height: 1.4;
}
.pricing-a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  display: block;
  text-align: center;
  margin: 32px 0 0;
  background: #5C1E9D;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  padding: 15px 24px;
  border-radius: 999px;
}
.pricing-div-7 {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  background: #121110;
  padding: 36px 32px 40px;
}
.pricing-span-5 {
  font-family: var(--font-display);
  font-size: clamp(46px,5.5vw,68px);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: #E8E2DB;
  text-transform: uppercase;
}
.pricing-span-6 {
  color: #7C766F;
  line-height: 1.4;
}
.pricing-a-2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  display: block;
  text-align: center;
  margin: 32px 0 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #F2EDE7;
  font-size: 18px;
  font-weight: 400;
  padding: 15px 24px;
  border-radius: 999px;
}
.pricing-div-8 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 1px;
  margin: 16px 0 0;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  overflow: hidden;
}
.pricing-div-9 {
  background: #0B0A09;
  padding: 30px 26px;
}
.pricing-div-10 {
  font-family: var(--font-display);
  font-size: clamp(30px,3.4vw,42px);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: 1;
  text-transform: uppercase;
}
.pricing-div-11 {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7C766F;
}

/* --- QUOTES --- */
.quotes-div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.quotes-h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(28px,3.4vw,46px);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-transform: uppercase;
}
.quotes-span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7C766F;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 5px 9px;
  border-radius: 999px;
}
.quotes-div-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 16px;
  margin: 40px 0 0;
}
.quotes-div-3 {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  background: #121110;
  padding: 30px 28px 26px;
}
.quotes-p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: normal;
  color: #E8E2DB;
  text-wrap: pretty;
}
.quotes-div-4 {
  margin: 24px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.quotes-div-5 {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: repeating-linear-gradient(135deg,#1A1715 0 6px,#221E1B 6px 12px);
}
.quotes-div-6 {
  font-size: 14px;
  font-weight: 600;
}
.quotes-div-7 {
  font-size: 13px;
  color: #7C766F;
}

/* --- FAQ --- */
.faq-div {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 48px;
}
.faq-h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(32px,4.4vw,56px);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-transform: uppercase;
}
.faq-p {
  margin: 18px 0 0;
  max-width: 380px;
  color: #A09A93;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.faq-div-2 {
  display: grid;
  gap: 1px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  overflow: hidden;
}
.faq-details {
  background: #0B0A09;
}
.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-size: 16px;
  font-weight: 500;
  color: #F2EDE7;
}
.faq-span {
  color: #A66BEF;
  font-size: 20px;
  line-height: 1;
}
.faq-p-2 {
  margin: 0;
  padding: 0 24px 24px;
  color: #A09A93;
  font-size: 15px;
  line-height: 1.65;
  max-width: 620px;
}

/* --- CTA --- */
.cta-section {
  padding: 0 24px clamp(80px,10vw,140px);
}
.cta-div {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  border: 1px solid rgba(166,107,239,0.3);
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg,rgba(166,107,239,0.14),rgba(166,107,239,0.02)),#121110;
  padding: clamp(48px,7vw,96px) clamp(28px,5vw,72px);
  text-align: center;
}
.cta-h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(32px,4.8vw,68px);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-wrap: balance;
  text-transform: uppercase;
}
.cta-p {
  margin: 22px auto 0;
  max-width: none;
  color: #C0B9B1;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}
.cta-tel {
  color: #F2EDE7;
  font-weight: 600;
  border-bottom: 1px solid rgba(166,107,239,0.5);
}
.cta-tel:hover {
  color: #A66BEF;
  border-bottom-color: #A66BEF;
}
.cta-a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  background: #5C1E9D;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  padding: 16px 30px;
  border-radius: 999px;
}
.cta-div-2 {
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8A837C;
}

/* --- FOOTER --- */
.footer-footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: clamp(48px,6vw,72px) 24px 40px;
}
.footer-div {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: 40px;
}
.footer-div-2 {
  max-width: 280px;
}
.footer-div-3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-img {
  width: auto;
  height: 34px;
  display: block;
}
.footer-p {
  margin: 16px 0 0;
  color: #7C766F;
  font-size: 14px;
  line-height: 1.6;
}
.footer-div-4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #A66BEF;
}
.footer-div-5 {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}
.footer-a {
  color: #A09A93;
  font-size: 14px;
}
/* --- footer social row --- */
/* 5 x 32px + 4 x 7px = 188px, so the row still fits on one line in the
   narrowest footer grid cell the auto-fit can produce (minmax floor is 190px) */
.footer-social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0 0;
  padding: 0;
}
.footer-social-a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #A09A93;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.footer-social-a svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}
.footer-social-a:hover {
  background: #5C1E9D;
  border-color: #5C1E9D;
  color: #fff;
}
.footer-div-6 {
  max-width: 1240px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #6E6862;
}
.footer-div-7 {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6,5,5,0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.footer-div-8 {
  width: 100%;
  max-width: 640px;
  margin: auto;
  background: #100E0D;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 22px;
  padding: clamp(28px,4vw,44px);
  position: relative;
}
.footer-button {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #C9C2BA;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.footer-div-9 {
  padding: 26px 0 6px;
  text-align: center;
}
.footer-h2 {
  font-family: var(--font-display);
  margin: 18px 0 0;
  font-size: clamp(26px,3.2vw,38px);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-transform: uppercase;
}
.footer-p-2 {
  margin: 16px auto 0;
  max-width: 400px;
  color: #A09A93;
  font-size: 15px;
  line-height: 1.6;
}
.footer-button-2 {
  margin: 28px 0 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #F2EDE7;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.footer-h2-2 {
  font-family: var(--font-display);
  margin: 14px 0 0;
  font-size: clamp(26px,3.4vw,40px);
  line-height: 1.03;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-transform: uppercase;
}
.footer-p-3 {
  margin: 14px 0 0;
  max-width: 440px;
  color: #A09A93;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.footer-form {
  margin: 28px 0 0;
  display: grid;
  gap: 18px;
}
.footer-div-10 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
  gap: 14px;
}
.footer-div-11 {
  display: grid;
  gap: 8px;
}
.footer-label {
  font-size: 13px;
  font-weight: 500;
  color: #C9C2BA;
}
.footer-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  border-radius: 0;
  padding: 13px 0;
  color: #F2EDE7;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .18s ease;
}
.footer-select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  border-radius: 0;
  padding: 13px 0;
  color: #F2EDE7;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .18s ease;
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.footer-textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  border-radius: 0;
  padding: 13px 0;
  color: #F2EDE7;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .18s ease;
  line-height: 1.5;
  resize: vertical;
  min-height: 84px;
}
.footer-div-12 {
  border: 1px solid rgba(166,107,239,0.4);
  background: rgba(166,107,239,0.08);
  border-radius: 10px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #E8E2DB;
}
.footer-a-2 {
  color: #A66BEF;
  text-decoration: underline;
}
.footer-div-13 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 0;
}
.footer-button-3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  background: #5C1E9D;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  padding: 17px 32px 15px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}
.footer-span-2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7C766F;
}

/* --- inline contact form (bottom of page) --- */
.contact-wrap {
  max-width: none;
  margin: 0;
  text-align: left;
}
.contact-actions {
  justify-content: flex-start;
  margin: 10px 0 0;
}
/* --- CONTACT: two-column block, underline-only fields ---
   Follows vancouverphotovideo.com's contact layout: copy and direct-contact
   lines left, form right. Their fields are 48px tall, transparent, no box,
   Roboto 14px on a 13px/36px pad with the icon in that left inset, and the
   submit is Bebas 18px uppercase behind a leading icon.

   Their palette is that form on white, so the values are translated rather
   than copied: the hairline under each field and the placeholder grey are
   restated for the near-black ground, and the accent stays brand purple
   where theirs is red. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(38px, 5vw, 84px);
  align-items: start;
  text-align: left;
}
.contact-intro {
  /* the copy column is set to a comfortable measure rather than filling
     its track, the way the parent's does */
  max-width: 460px;
}
.contact-list {
  list-style: none;
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-icon {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  color: #A66BEF;
}
.contact-icon svg { width: 100%; height: 100%; display: block; }
.contact-link {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: #E8E2DB;
  word-break: break-word;
}

/* --- underline fields --- */
/* the icon sits in the field's left inset, so the wrapper is the
   positioning context */
.footer-div-11.has-icon { position: relative; }
.field-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #7C766F;
  pointer-events: none;
  transition: color .18s ease;
}
/* the textarea is taller than one line, so its icon pins to the first line
   instead of the box's centre */
.field-icon-top {
  top: 15px;
  transform: none;
}
.field-icon svg { width: 100%; height: 100%; display: block; }
.footer-div-11.has-icon:focus-within .field-icon { color: #A66BEF; }

/* placeholders now carry the label wording, so they read as field names
   rather than hints — same grey weight the parent gives them */
.footer-input::placeholder,
.footer-textarea::placeholder { color: #7C766F; opacity: 1; }
/* the empty option acts as the select's placeholder */
.footer-select:has(option[value=""]:checked) { color: #7C766F; }
.footer-select option { background: #171412; color: #F2EDE7; }

/* appearance:none removed the native arrow, so the wrapper draws one */
.footer-div-11.has-icon::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.6px solid #7C766F;
  border-bottom: 1.6px solid #7C766F;
  transform: rotate(45deg);
  pointer-events: none;
  opacity: 0;
}
/* only the wrappers that actually hold a select get the chevron */
.footer-div-11.has-icon:has(select)::after { opacity: 1; }

/* the submit carries a leading icon, as the parent's does */
.footer-button-3 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.button-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
.button-icon svg { width: 100%; height: 100%; display: block; }

/* one column once the two tracks stop fitting side by side */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-intro { max-width: none; }
}

/* --- hero stat line --- */
.hero-stats {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 26px 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7C766F;
}

/* --- anchor offset so the sticky header never covers the contact form --- */
#work,
#contact, #contactForm {
  scroll-margin-top: 88px;
}

/* --- section eyebrows that sit in a single-column header --- */
.formats-div > .formats-div-3 {
  text-align: center;
}

/* --- work gallery: single-clip categories share a row under the "All" tab --- */
.work-singles {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 14px;
  align-items: start;
}

/* --- one type scale for every section title --- */
.formats-h2,
.work-h2,
.process-h2,
.compare-h2,
.pricing-h2,
.quotes-h2,
.faq-h2,
.cta-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px,4.4vw,62px);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  font-weight: 400;
  text-transform: uppercase;
}

/* titles that head a full-width, single-column section */
.formats-h2,
.work-h2,
.process-h2,
.compare-h2,
.pricing-h2,
.cta-h2 {
  font-family: var(--font-display);
  text-align: center;
  text-wrap: balance;
  text-transform: uppercase;
}

/* --- matching intro copy under those titles --- */
.formats-p,
.work-p {
  /* auto, not 0, on the sides: .lede caps these at 62ch and centres the
     block with auto margins, and a `margin` shorthand with 0 here would
     silently cancel that and pin the measure to the left of the column */
  margin: 20px auto 0;
  color: #A09A93;
  font-size: clamp(16px,1.3vw,18px);
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

/* --- work gallery ---------------------------------------------------
   Two shapes, two rhythms: 9:16 verticals run three across,
   16:9 landscapes run two across. The per-category wrappers use
   display:contents so their tiles join the grid directly; [hidden]
   still wins over that, so tab switching keeps working.
   ------------------------------------------------------------------ */
.work-galleries {
  margin: 36px 0 0;
  display: grid;
  gap: 14px;
}

/* vertical reels — three columns */
#galleryFood { display: contents; }
.work-div-2 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin: 0;
}
.work-div-3,
.work-div-6,
.work-div-8 {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: 9/16;
  margin: 0;
}

/* landscape cuts — two columns */
.work-singles {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  align-items: start;
}
#galleryBeauty,
#galleryWellness,
#galleryFoodWide,
#galleryTech,
.work-div-9 {
  display: contents;
}
.work-div-10 {
  aspect-ratio: 16/9;
  margin: 0;
}

@media (max-width: 860px) {
  .work-div-2 { grid-template-columns: repeat(2,1fr); }
  .work-singles { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .work-div-2 { grid-template-columns: 1fr; }
}

/* --- contact form: 3 / 3 / 2 / 1 field rows --- */
.form-row-3 { grid-template-columns: repeat(3,1fr); }
.form-row-2 { grid-template-columns: repeat(2,1fr); }
@media (max-width: 720px) {
  .form-row-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px) {
  .form-row-3,
  .form-row-2 { grid-template-columns: 1fr; }
}

/* --- contact: undo the section's centred defaults ---
   .cta-div centres its children and .cta-h2 is in the group of section
   titles that get text-align:center + auto margins. Both are right for a
   one-column CTA and wrong for the two-column contact block, so the grid
   restates them. These come last in the file to outrank the grouped rule
   above without adding !important. */
.contact-grid .cta-h2,
.contact-grid .cta-p,
.contact-grid .formats-div-3 {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.contact-grid .cta-h2 { text-wrap: pretty; }
.contact-grid .footer-h2 { text-align: left; }

/* the leading-icon inset applies only where an icon is actually rendered;
   the booking modal reuses .footer-input/.footer-select/.footer-textarea
   without icons and keeps its own visible labels */
.footer-div-11.has-icon .footer-input,
.footer-div-11.has-icon .footer-select,
.footer-div-11.has-icon .footer-textarea { padding-left: 34px; }
/* the chevron would otherwise sit on top of the last characters */
.footer-div-11.has-icon .footer-select { padding-right: 20px; }

/* --- contact block on white -------------------------------------------
   The parent brand runs its contact area on white, so this one section
   inverts while the rest of the page stays on #0B0A09.

   Everything here is scoped to .contact-light because the block shares its
   classes with the footer and the booking modal — .footer-input,
   .footer-h2, .footer-p-2, .footer-div-12, .footer-a-2, .footer-span-2,
   .formats-div-3 — and both of those stay dark. Unscoped, these rules
   would bleach them too.

   The accent also has to change, not just the ground: #A66BEF is the
   lifted purple for near-black and reads about 2.6:1 on white. Inside this
   block the accent is the solid brand purple #5C1E9D, which carries the
   same weight on white that #A66BEF does on the dark ground. */
/* full bleed: the white runs the width of the page and meets the footer,
   so the section drops its gutters and the card drops its frame. The
   readable column moves inward to .contact-grid, which keeps the content
   on the same 1240px measure the rest of the page uses. */
.contact-light { padding: 0; }
.contact-light .cta-div {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
  padding: clamp(56px,7vw,104px) clamp(24px,5vw,72px);
}
.contact-light .contact-grid {
  max-width: 1240px;
  margin: 0 auto;
}

/* --- copy column --- */
.contact-light .cta-h2,
.contact-light .contact-link { color: #171412; }
.contact-light .cta-p { color: #54504B; }
.contact-light .formats-div-3 { color: #5C1E9D; }
.contact-light .contact-icon { color: #5C1E9D; }
/* .hv1:hover lifts links to #F2EDE7 with !important, which is invisible
   here — this needs both the higher specificity and its own !important */
.contact-light .hv1:hover { color: #5C1E9D !important; }

/* --- fields --- */
.contact-light .footer-input,
.contact-light .footer-select,
.contact-light .footer-textarea {
  color: #171412;
  border-bottom-color: rgba(0,0,0,0.18);
}
.contact-light .footer-select { color-scheme: light; }
/* these placeholders carry the label wording, so they are the only visible
   name a sighted user gets for the field — held at AA (4.5:1) rather than
   the parent's #9E9E9E, which lands near 2.9:1 on white */
.contact-light .footer-input::placeholder,
.contact-light .footer-textarea::placeholder { color: #6E6862; }
.contact-light .footer-select:has(option[value=""]:checked) { color: #6E6862; }
.contact-light .footer-select option { background: #FFFFFF; color: #171412; }
.contact-light .field-icon { color: #8A837C; }
.contact-light .footer-div-11.has-icon:focus-within .field-icon { color: #5C1E9D; }
.contact-light .footer-div-11.has-icon::after {
  border-right-color: #8A837C;
  border-bottom-color: #8A837C;
}
/* .fc1:focus sets the underline with !important, so this needs it too */
.contact-light .fc1:focus { border-bottom-color: #5C1E9D !important; }
/* the required marker and the caption under the button */
.contact-light .hero-span { color: #5C1E9D; }
.contact-light .footer-span-2 { color: #6E6862; }

/* --- success and error panes --- */
.contact-light .footer-h2 { color: #171412; }
.contact-light .footer-p-2 { color: #54504B; }
.contact-light .footer-div-12 {
  border-color: rgba(92,30,157,0.28);
  background: rgba(92,30,157,0.07);
  color: #3A3632;
}
.contact-light .footer-a-2 { color: #5C1E9D; }

/* --- header links: hover ---
   .hv1:hover lifts links to #F2EDE7 with !important, which was a lift from
   #E8E2DB but is a slight dim now the header sits at pure #FFFFFF. In the
   header the hover moves to the accent instead, which reads on both the
   transparent-over-film state and the solid bar. */
.header-header .hv1:hover { color: #C09BFA !important; }

/* --- FOOTER: parent-brand treatment ---
   vancouverphotovideo.com's footer measures at: ground rgb(22,21,21), one
   step lighter than the page; column headings in Bebas 19px uppercase at
   near-white on 0.35px tracking; link lists in grey on generous leading;
   the email picked out in the accent; a rgb(67,67,67) rule above a bottom
   line that leads with the brand in white.

   The column headings were Roboto 10.5px in accent purple, which is the
   eyebrow treatment used mid-page — in the parent these read as proper
   section titles, so they take the display face here. */
.footer-footer {
  background: #161515;
  border-top: 0;
}
.footer-div-4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FCFCFC;
}
/* the parent's lists breathe more than a 10px gap allows */
.footer-div-5 {
  gap: 14px;
  margin: 20px 0 0;
}
.footer-a {
  color: #A09A93;
  font-size: 16px;
}
/* the email is the one line in the parent's footer given the accent */
.footer-a-mail {
  color: #A66BEF;
  font-weight: 700;
}

/* --- bottom bar --- */
.footer-div-6 {
  margin: 52px auto 0;
  padding-top: 26px;
  border-top: 1px solid #434343;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px 28px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  color: #8A837C;
}
.footer-legal { margin: 0; }
/* the parent leads this line with the domain set solid white */
.footer-brand {
  color: #FFFFFF;
  font-weight: 700;
}
.footer-note {
  font-size: 13px;
  color: #6E6862;
}
/* back to top — a plain anchor to the hero's #top, so it needs no script
   and still works with scroll-behavior: smooth already set on <html> */
.footer-top {
  margin-left: auto;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #E8E2DB;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.footer-top svg { width: 20px; height: 20px; display: block; }
.footer-top:hover {
  background: #5C1E9D;
  border-color: #5C1E9D;
  color: #fff;
}

@media (max-width: 620px) {
  /* the arrow would otherwise be pushed onto a line of its own well away
     from the text it belongs beside */
  .footer-div-6 { gap: 14px 20px; }
  .footer-top { margin-left: 0; }
}

/* --- icon wrappers: size independent of the parent ---
   .contact-icon and .button-icon are <span>s, and a span is display:inline,
   where width/height are simply ignored. They only held 21px/19px because
   their parents happened to be flex containers making them flex items.
   Lose that — a parent rule not yet parsed, a stale stylesheet, a future
   layout change — and the span collapses to inline, its width/height stop
   applying, and the `svg { width: 100% }` inside resolves against the whole
   column instead. That is how a 21px phone icon renders full-bleed.
   An explicit display makes the declared size authoritative on its own.
   (.field-icon already escapes this: position:absolute blockifies it.) */
.contact-icon,
.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Belt and braces: the svgs now carry width="24" height="24" attributes so
   they render small even with no CSS at all, and these caps stop a
   percentage height resolving against an auto-height parent. */
.contact-icon svg,
.field-icon svg,
.button-icon svg {
  max-width: 100%;
  max-height: 100%;
}