/* ============================================================
   Catch a Moment Studio — homepage draft (v2)
   ============================================================ */

:root{
  --white:#FFFFFF;
  --espresso:#4A3428;
  --mocha:#7A5C48;
  --taupe:#B69886;
  --cream:#FAF6F0;
  --cream:#FAF6F0;
  --ivory:#F5EFE6;
  --champagne-gold:#C8AA7D;
  /* was #C8AA7D — a desaturated, dusty tan. Client's actual brand gold
     (see the logo: metallic gold camera on white) is far more saturated
     and reflective. This one hex feeds every button, border, icon and
     glow on the site via var(--gold), so brightening it here is the
     single highest-leverage fix for the "przytłumione" (muted) feedback. */
  --gold:#D4AF37;
  --gold-deep:#A8841F;
  --gold-light:#EAD9A0;
  /* metallic foil gradient — a flat gold fill reads as a colour, a gradient
     with a light streak through it reads as an actual reflective metal.
     Used on the primary CTA and headline accents for the "glamour" pass. */
  --gold-gradient: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 32%, var(--gold-light) 50%, var(--gold) 68%, var(--gold-deep) 100%);
  /* the site's "elegant line" gradient — ivory fading up into gold, deepening
     to mocha at the far end. Used for any decorative rule/border/connector
     line instead of a flat colour, so even a 1px line reads as intentional. */
  --line-gradient-v: linear-gradient(180deg, var(--ivory) 0%, var(--gold) 55%, var(--mocha) 100%);
  --line-gradient-h: linear-gradient(90deg, var(--ivory) 0%, var(--gold) 55%, var(--mocha) 100%);
  --black:#1F1F1F;

  --ink:#2A211C;
  --ink-soft: rgba(42,33,28,.85);
  --line: rgba(42,33,28,.14);

  --font-display:'Cormorant Garamond', serif;
  --font-accent:'Playfair Display', serif;
  --font-script:'Playfair Display', 'Cormorant Garamond', serif;
  --font-body:'Montserrat', sans-serif;

  --container: 1280px;
  --gutter: clamp(20px, 6vw, 84px);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background: #FFFFFF;
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* Crisp pure white background — noise texture removed for maximum clarity */
body::before{
  display:none;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
:root h1, :root h2, :root h3, :root h4, :root h5, :root h6 { font-family:var(--font-display); font-weight:500; margin:0 0 .4em; color:var(--espresso); letter-spacing:-.01em; line-height:1.15; }
:root p { margin:0 0 1em; }

/* remove the default mobile-tap blue flash + browser focus ring, replace
   with a deliberate brand-gold focus outline for keyboard users only */
a, button{ -webkit-tap-highlight-color:transparent; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:2100;
  background:var(--espresso); color:var(--ivory); padding:.8em 1.2em;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- section label system ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--mocha);
  margin-bottom:1.1em;
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--line-gradient-h); display:inline-block; }
.lede{ color:var(--ink-soft); font-size:1.12rem; max-width:46ch; }
/* foil-effect headline accents: a gradient clipped to the text reads as
   shimmering metal rather than flat coloured type — the single biggest
   lever for a "glamour"/expensive feel on the display headlines, since
   <em> is already used for every gold accent word across the page. */
em{
  font-style:italic; font-family:var(--font-accent);
  color:var(--gold); /* fallback for browsers without background-clip:text */
  background:var(--gold-gradient); background-size:220% auto; background-position:30% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ghost background word — big faint editorial type used to fill / anchor empty space.
   Sized down and lightened from the original clamp(6-13rem)/.05 — at the
   larger scale it competed with the real heading sitting on top of it
   instead of just quietly filling space behind it. */
.ghost-text{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:clamp(4rem, 10vw, 8rem) !important;
  color:transparent !important; -webkit-text-fill-color:transparent !important; -webkit-text-stroke:1px rgba(74,52,40,0.12) !important;
  line-height:1 !important; white-space:nowrap;
  top:-.15em; left:-.05em;
}
.ghost-text--right{ left:auto; right:-.05em; }
/* for centred sections (Services, How, Testimonials) — the default
   left:-.05em anchors to a left-aligned text column, which reads wrong
   behind centred copy. Centres the word itself instead. */
.ghost-text--center{ left:50% !important; right:auto !important; transform:translateX(-50%) !important; text-align:center; }
/* Business/Services/How all sit inside a section with overflow:hidden AND
   (per client's "ustawiamy wszędzie 2rem" instruction) only 2rem of top
   padding above the heading — the default top:-.3em offset (up to
   -2.4rem at the clamp's upper end) exceeds that 2rem cushion, so the
   glyph's own top edge gets sliced off by the section's overflow:hidden
   instead of just quietly bleeding above the heading. Testimonials/About/
   Why don't need this — they either have generous section padding or no
   overflow:hidden in the way. */
.ghost-text--flush{ top:-.05em; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6em;
  padding:1.05em 2.1em;
  font-family:var(--font-body);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .45s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }

/* metallic gradient fill + a dark ambient shadow under the gold glow for
   real depth (a flat colour + single soft shadow reads flat/matte; the
   two-layer shadow is what makes it look like it's catching light), plus
   a light streak that sweeps across on hover — a small, classic
   "polished metal" cue rather than a constant animation. */
.btn-primary{
  position:relative; overflow:hidden;
  background:var(--gold-gradient); background-size:220% auto; background-position:20% 0;
  color:var(--black);
  box-shadow:0 20px 36px -14px rgba(20,16,13,.4), 0 10px 24px -10px rgba(212,175,55,.6);
}
.btn-primary::after{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease);
}
.btn-primary:hover{ background-position:80% 0; }
.btn-primary:hover::after{ left:130%; }
@media (prefers-reduced-motion: reduce){ .btn-primary::after{ display:none; } }

.btn-dark{ background:var(--black); color:var(--ivory); border-color:rgba(212,175,55,.4); }
.btn-dark:hover{ background:var(--espresso); border-color:var(--gold); }
.btn-outline{ border-color:var(--espresso); color:var(--espresso); background:transparent; }
.btn-outline:hover{ background:var(--espresso); color:var(--ivory); }
.btn-outline-light{ border-color:rgba(255,253,248,.55); color:var(--ivory); background:transparent; }
.btn-outline-light:hover{ background:var(--ivory); color:var(--black); }
.btn-ghost{ color:var(--ivory); border-color:rgba(255,253,248,.6); }
.btn-ghost:hover{ background:rgba(255,253,248,.14); border-color:var(--ivory); }
.btn-lg{ padding:1.25em 2.8em; font-size:.82rem; }

@media (max-width:640px){
  .btn{
    max-width:100%;
    padding:0.95em 1.25em;
    font-size:0.72rem;
    letter-spacing:0.09em;
    white-space:normal;
    text-align:center;
    line-height:1.35;
  }
  .btn-lg{
    padding:1em 1.35em;
    font-size:0.75rem;
  }
}

/* ---------- custom cursor ----------
   NOTE: this previously used mix-blend-mode:difference, which inverts
   whatever colour is underneath — over the gold/cream palette that
   produces an ugly, unpredictable blue/teal tint (and looked especially
   bad enlarged over button text). Fixed colour, no blend mode, and the
   hover state is now a hollow ring instead of a filled blob so it never
   sits as an opaque shape on top of text. */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px;
  border-radius:50%; background:var(--gold); border:none;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), opacity .25s, background-color .25s, border-width .25s;
  opacity:0;
}
.cursor-dot.is-active{ opacity:.85; }
.cursor-dot.is-hover{
  width:40px; height:40px;
  background:transparent; border:1.5px solid var(--gold);
}
@media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } }

/* ================= HEADER ================= */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:500; }

.topbar{
  background:var(--black); color:rgba(255,253,248,.72);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  transition:max-height .4s var(--ease), opacity .4s var(--ease), padding .4s var(--ease);
  overflow:hidden;
}
.topbar-inner{
  max-width:var(--container); margin:0 auto; padding:.6rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.topbar-loc{ display:inline-flex; align-items:center; }
.topbar-links{ display:flex; align-items:center; gap:.6rem; }
.topbar-links a{ display:inline-flex; align-items:center; }
.topbar-links a:hover{ color:var(--gold); }
.topbar-sep{ opacity:.4; }
.topbar-loc .nav-icon, .topbar-links .nav-icon{ width:16px; height:16px; margin-right:.4em; opacity:.85; flex:none; }
.topbar-social{ display:flex; align-items:center; gap:.9rem; margin-left:.4rem; padding-left:1rem; border-left:1px solid rgba(255,253,248,.25); }
.topbar-social a{ display:flex; color:rgba(255,253,248,.85); transition:color .3s, transform .3s; }
.topbar-social a:hover{ color:var(--gold); transform:translateY(-1px); }
.topbar-social svg{ width:16px; height:16px; }
.site-header.is-scrolled .topbar{ max-height:0; padding:0; opacity:0; }
@media (max-width: 760px){ .topbar-inner{ display:none; } }

/* The fading gradient (white → transparent) was the actual problem, not
   just the blur artifact fixed earlier — a bar that dissolves into the
   photo will always fight with whatever's behind it (logo/text losing
   contrast right where the tint runs out). Fix: a genuinely solid,
   uniform-opacity bar (this is also why backdrop-filter is safe here now
   — see [[feedback_backdrop_filter_fade_artifact]], it only misbehaves
   on backgrounds that fade within their own box) with a fine gold edge,
   full-bleed edge-to-edge like the topbar above it. The nav content
   itself stays container-width via the .header-row wrapper inside. */
.header-inner{
  position:relative; width:100%;
  padding: 1.5rem var(--gutter);
  background:rgba(255,253,248,.96);
  backdrop-filter:blur(10px);
  transition:padding .4s var(--ease), box-shadow .4s var(--ease);
}
.header-inner::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line-gradient-h);
}
.site-header.is-scrolled .header-inner{
  padding-top:1.05rem; padding-bottom:1.05rem;
  box-shadow:0 10px 30px -14px rgba(20,16,13,.28);
}

/* nav-left and nav-right are the two 1fr tracks flanking the logo — since
   they now hold comparable content (3 links each), they land genuinely
   equal-width, so the logo sits truly centred and both link groups
   diverge from it symmetrically. The CTA button and hamburger are their
   own trailing auto columns, appended after the right nav group rather
   than sharing its track, so they add width on the right without
   disturbing the nav-left/nav-right balance around the logo. */
.header-row{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr auto;
  align-items:center; column-gap:1.6rem;
}
/* justify-self:end (not start) — the links should hug the logo, not the
   outer edge of the header, so the two nav clusters sit close in around
   the centre with open space toward the screen edges. */
.nav-left{ justify-self:end; }
.logo{ display:inline-flex; align-items:center; justify-self:center; }
.nav-right{ justify-self:start; }
.logo-img{
  height:80px; width:auto; display:block;
  /* used to be flattened to a white silhouette for legibility over the
     photo directly — now sits on a solid light bar, so the logo shows
     its real gold artwork from the very top of the page, with just a
     soft shadow for a bit of lift off the background. */
  filter:drop-shadow(0 2px 8px rgba(20,16,13,.22));
  transition:height .4s var(--ease), filter .4s var(--ease);
}
.site-header.is-scrolled .logo-img{ height:58px; filter:none; }
/* was filter:brightness(0) invert(1) — flattened to a plain white
   silhouette, a leftover from when the footer background was dark and
   needed a white logo for contrast. Now that the footer is light --cream,
   that filter was actually hiding the logo (near-invisible white on
   cream) instead of making it gold. Removed so it shows the same real
   gold artwork as the header. */
.footer-brand .logo-img{ height:76px; }
@media (max-width:760px){ .logo-img{ height:50px; } }

.nav ul{ display:flex; gap:2.3rem; }
/* was .78rem — next to an 80px-tall logo mark that reads as noticeably
   undersized rather than "delicately small". Sized up along with the
   icons so the whole nav row feels proportionate to the header again. */
.nav a,
.nav-dropdown-toggle{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.92rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--espresso); position:relative; padding:.4em 0;
  border:0; background:none; cursor:pointer; font-family:inherit;
  line-height:inherit;
  transition:color .3s;
}
.nav-icon{ width:17px; height:17px; flex:none; opacity:.85; }
.nav a::after,
.nav-dropdown-toggle::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--gold); transition:right .35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after,
.nav-dropdown-toggle:hover::after,
.has-dropdown:hover .nav-dropdown-toggle::after,
.has-dropdown.is-open .nav-dropdown-toggle::after{ right:0; }

.has-dropdown{ position:relative; }
.dropdown{
  /* top:100% with zero gap is deliberate — a real layout gap here would
     create a dead zone the mouse has to cross, closing the menu before
     you reach it. The caret below is purely decorative/overlapping. */
  position:absolute; top:100%; left:50%; transform:translateX(-50%) scale(0.97);
  /* both this and .header-inner::after (the thin gold bottom border) are
     position:absolute with z-index:auto inside the same .header-inner
     stacking context — with no explicit z-index, ::after paints LAST
     (it's generated after all of .header-inner's real children), so the
     border line rendered on top of the dropdown wherever the open panel
     extended below the header's bottom edge. Explicit z-index lifts the
     dropdown above it. */
  z-index:5;
  background:var(--ivory); border-radius:3px; box-shadow:0 26px 56px -12px rgba(20,16,13,.32);
  padding:.5rem; min-width:250px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
/* small caret pointing back up at the trigger link */
.dropdown::before{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--ivory);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) scale(1);
}
/* was a flat grey border-top on every item but the first — the one
   accent line on the whole page still using plain var(--line) instead
   of the site's signature gold-gradient treatment, which made it read
   as a leftover/generic template divider. Removed rather than
   re-themed: each row already has generous padding (.75em) plus a
   hover background, so a hard rule between items wasn't adding
   separation, just visual noise. */
.dropdown a{
  position:relative; display:block; color:var(--espresso); background:transparent;
  padding:.75em 1.1em; font-size:.85rem; font-weight:500; letter-spacing:.04em; border-radius:2px;
  transition:background-color .25s, color .25s, padding-left .25s;
}
.dropdown a::after{ display:none; }
.dropdown a:hover{ background:var(--cream); color:var(--mocha); padding-left:1.4em; }

.menu-toggle{
  display:none; flex:none; width:36px; height:26px; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:space-between; padding:2px;
}
.menu-toggle span{ display:block; height:1.5px; background:var(--espresso); transition:transform .3s, opacity .3s; }
/* was forced to ivory for the X state — a leftover from when the header
   could sit transparent over a dark hero photo. The header is a solid
   light bar now (see [[project_catchamomentstudio_overview]]), so white
   lines here would vanish against it; espresso stays visible in both the
   closed (hamburger) and open (X) states. */
.menu-toggle[aria-expanded="true"] span{ background:var(--espresso) !important; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(11px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }

/* mobile nav lives at the body level (not inside <header>) on purpose:
   when it was nested in the fixed header it visually overlapped its own
   toggle button (same top-right corner), so there was no way to close it.
   It now also has its own close button + backdrop + Escape key. */
.mobile-nav-backdrop{
  position:fixed; inset:0; z-index:900;
  background:rgba(10,8,6,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.mobile-nav-backdrop.is-open{ opacity:1; visibility:visible; }

.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(88vw,380px);
  /* was a dark espresso-to-black panel — client wants the whole site kept
     to white + gold rather than introducing a dark "night mode" panel for
     mobile specifically (see [[feedback_brand_colors_white_gold]]).
     Same structural idea (soft gold corner glows + a faint oversized
     ghost wordmark) just rebuilt on an ivory base instead of a dark one,
     so every colour below flips to a dark-on-light pairing. */
  background: var(--ivory);
  border-left:1px solid rgba(212,175,55,.4);
  color:var(--espresso);
  transform:translateX(100%); transition:transform .5s var(--ease);
  padding:1.6rem 2rem 2rem; z-index:1000;
  overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  box-shadow:-16px 0 40px -20px rgba(20,16,13,.35);
}
.mobile-nav.is-open{ transform:translateX(0); }

.mobile-nav-ghost{
  z-index:-1; top:auto; bottom:-.1em; left:auto; right:-.04em;
  font-size:5rem; opacity:.04; color:var(--espresso);
  transform:rotate(-6deg); white-space:nowrap;
}
.mobile-nav-head{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; }
.mobile-nav-logo{ height:38px; width:auto; }
.mobile-nav-close{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px solid rgba(42,33,28,.3); background:none; color:var(--espresso);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background-color .3s, transform .3s;
}
.mobile-nav-close:hover{ background:rgba(212,175,55,.14); transform:rotate(90deg); }

.mobile-nav-list{ display:flex; flex-direction:column; }
.mobile-nav-list > li{
  border-bottom:1px solid rgba(42,33,28,.12);
  opacity:0; transform:translateX(18px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.mobile-nav.is-open .mobile-nav-list > li{ opacity:1; transform:none; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(1){ transition-delay:.05s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(2){ transition-delay:.1s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(3){ transition-delay:.15s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(4){ transition-delay:.2s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(5){ transition-delay:.25s; }

/* was a large italic serif (font-display) — matched the site's decorative
   headline type, but sat right next to the now-larger uppercase sans
   desktop nav and read as a different menu entirely. Switched to the
   same uppercase/letter-spaced font-body treatment as the desktop links,
   just scaled up for a touch target-friendly mobile panel. */
.mobile-nav-list > li > a{
  display:flex; align-items:center; gap:.8em;
  padding:.95em .1em; font-size:1rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  font-family:var(--font-body);
  color:var(--espresso); transition:color .25s, padding-left .25s;
}
.mobile-nav-list > li > a:hover, .mobile-nav-list > li > a:active{ color:var(--gold); padding-left:.4em; }
.mobile-nav-list .nav-icon{ width:17px; height:17px; opacity:.85; flex:none; }

/* Gallery accordion */
.mobile-nav-accordion-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:0; cursor:pointer; color:var(--espresso);
  padding:.95em .1em; font-family:var(--font-body); transition:color .25s;
}
.mobile-nav-accordion-toggle:hover{ color:var(--gold); }
.mobile-nav-link-label{ display:flex; align-items:center; gap:.8em; font-family:var(--font-body); font-weight:600; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; }
.mobile-nav-chevron{ width:13px; height:13px; flex:none; transition:transform .35s var(--ease); }
.mobile-nav-accordion-toggle[aria-expanded="true"] .mobile-nav-chevron{ transform:rotate(180deg); }

.mobile-nav-submenu-wrap{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease);
}
.mobile-nav-accordion.is-open .mobile-nav-submenu-wrap{ grid-template-rows:1fr; }
.mobile-nav-submenu{ overflow:hidden; min-height:0; }
.mobile-nav-submenu li{ border-left:1px solid rgba(42,33,28,.16); }
.mobile-nav-submenu a{
  display:block; padding:.68em 0 .68em 1.4em; font-family:var(--font-body);
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(42,33,28,.62);
  transition:color .25s, padding-left .25s;
}
.mobile-nav-submenu a:hover{ color:var(--gold); padding-left:1.7em; }

.mobile-nav-contact{ margin-top:auto; padding-top:1.6rem; border-top:1px solid rgba(42,33,28,.12); display:flex; flex-direction:column; gap:.9rem; }
.mobile-nav-contact a{
  display:flex; align-items:center; gap:.7em;
  padding:0; font-family:var(--font-body); font-size:.85rem; color:rgba(42,33,28,.7);
  transition:color .25s;
}
.mobile-nav-contact a:hover{ color:var(--gold); }
.mobile-nav-contact .nav-icon{ width:15px; height:15px; opacity:.8; flex:none; }

@media (max-width: 980px){
  .nav{ display:none; }
  .menu-toggle{ display:flex; }
  /* root cause of the hamburger sitting mid-screen instead of the top-right
     corner: header-row is a 4-column grid (nav-left 1fr | logo | nav-right
     1fr | toggle). Hiding nav-left/nav-right with display:none removes
     their CONTENT but not their grid TRACKS — the two 1fr columns still
     claim equal leftover space either side of the logo, shoving the
     toggle inward. Below this breakpoint there are only two visible
     items, so switch to a plain 2-item flex row instead of fighting the
     desktop grid: logo left, toggle pinned to the far right. */
  .header-row{ display:flex; align-items:center; justify-content:space-between; }
}

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; color:var(--white);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,10,8,.66) 0%, rgba(12,10,8,.32) 28%, rgba(12,10,8,.94) 100%),
    linear-gradient(90deg, rgba(12,10,8,.62) 0%, rgba(12,10,8,0) 45%);
}

.hero-frame{ position:absolute; inset:clamp(16px,3vw,40px); z-index:2; pointer-events:none; }
.corner{ position:absolute; width:28px; height:28px; border:1px solid rgba(255,253,248,.65); }
.corner.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.corner.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.corner.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.corner.br{ bottom:0; right:0; border-left:0; border-top:0; }

.hero-side-label{
  position:absolute; right:clamp(20px,3.4vw,48px); top:50%; z-index:2;
  writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg);
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,253,248,.8);
  margin:0;
}
.hero-index{
  position:absolute; left:clamp(20px,3.4vw,48px); top:clamp(120px,16vh,180px); z-index:2;
  font-family:var(--font-display); font-style:italic; font-size:.95rem; color:rgba(255,253,248,.75);
  margin:0;
}
@media (max-width:760px){ .hero-side-label, .hero-index{ display:none; } }

@media (max-width:760px){
  /* the eyebrow was overlapping the fixed logo/menu at the top — it was
     wrapping to 2 lines (long text + wide letter-spacing) and, combined
     with a too-tall content stack, the whole block was starting almost
     at the very top of the section, right under the header. Fix: much
     tighter letter-spacing so it stays on one line, shorter copy overall
     so the block is short enough to comfortably sit above the marquee
     with room to spare, and a taller safe minimum height for the section. */
  .hero{ min-height:100svh; height:auto; justify-content:center; padding-top:5.5rem; }
  .header-inner{ padding-top:.9rem; padding-bottom:.9rem; }
  .header-row{ column-gap:1rem; }
  .hero-frame{ inset:12px; }
  .hero-content{ padding-top:1.5rem; padding-bottom:2.5rem; margin-top:0; }
  .hero .eyebrow{ margin-bottom:.6em; font-size:.58rem; letter-spacing:.08em; }
  .hero .eyebrow::before{ width:14px; }
  .hero h1{ font-size:clamp(2rem, 8.5vw, 2.6rem); line-height:1.08; margin-bottom:.35em; max-width:100%; }
  .hero .lede{ font-size:.92rem; line-height:1.55; padding-left:.8rem; margin-bottom:1.15em; }
  .hero-actions{ gap:.6rem; }
  .hero-actions .btn{ padding:.8em 1.2em; font-size:.66rem; }
  .marquee{ padding:.75rem 0; }
  .marquee-track span{ font-size:.85rem; }
}

/* phones held in landscape (e.g. 812–926px wide but only ~375–430px
   tall) fall outside the max-width:760px block above entirely — width
   alone doesn't catch them. .hero only has min-height:100svh (not a
   hard height), so it doesn't visually break/overlap on a short
   viewport, but with full desktop padding + heading size it can force
   the section to grow well past the visible screen, making the whole
   hero feel like it never ends. Target short viewports directly by
   height instead of width, with the same tightening the mobile block
   above does. */
@media (max-height:500px) and (orientation:landscape){
  .hero-content{ padding-bottom:3rem; }
  .hero h1{ font-size:clamp(1.8rem, 5vw, 2.6rem); line-height:1.1; margin-bottom:.3em; }
  .hero .lede{ font-size:.92rem; margin-bottom:1em; }
  .hero-side-label, .hero-index, .scroll-cue{ display:none; }
}

.hero-content{
  position:relative; z-index:2; max-width:var(--container); margin:auto auto;
  width:100%; padding: 6.5rem var(--gutter) 2.5rem;
  text-shadow:0 3px 20px rgba(10,8,6,.4);
}
.hero .eyebrow{ color:var(--white); }
.hero h1{
  color:var(--white); font-size:clamp(2.5rem, 5vw, 4.2rem); font-weight:500;
  line-height:1.15; margin-bottom:.4em; max-width:28ch; letter-spacing:-.01em;
}
.hero h1 em{ color:var(--gold); font-style:italic; white-space:nowrap; }
.hero .lede{ position:relative; color:rgba(255,253,248,.92); font-size:1.05rem; line-height:1.55; margin-bottom:1.6em; padding-left:1.2rem; max-width:580px; }
.hero .lede::before{ content:""; position:absolute; left:0; top:.08em; bottom:.08em; width:2px; background:linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); }
.hero-actions{ display:flex; gap:1.1rem; flex-wrap:wrap; }

.marquee{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,253,248,.2);
  background:rgba(12,10,8,.62); backdrop-filter:blur(3px);
  overflow:hidden; padding:1.05rem 0;
}
.marquee-track{ display:flex; width:max-content; will-change:transform; }
.marquee-group{ display:flex; align-items:center; flex-shrink:0; gap:1.6rem; padding-right:1.6rem; }
.marquee-track span{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; letter-spacing:.03em; color:rgba(255,253,248,.9); white-space:nowrap; }
.marquee-track .dot{ color:var(--gold); font-style:normal; }

.scroll-cue{
  position:absolute; left:50%; bottom:6.6rem; z-index:2; transform:translateX(-50%);
  width:1px; height:60px; background:rgba(255,253,248,.4);
}
.scroll-cue span{
  position:absolute; left:-2.5px; top:0; width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:scrollcue 2.2s var(--ease) infinite;
}
@keyframes scrollcue{ 0%{ top:0; opacity:1; } 90%{ opacity:0; } 100%{ top:100%; opacity:0; } }
@media (max-width: 700px){ .scroll-cue{ display:none; } }

/* ================= reveal ================= */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }


/* ================= ABOUT TEASER ================= */
.about-teaser{
  position:relative; overflow:hidden; padding:8rem var(--gutter);
  background: #FFFFFF;
}
.about-inner{
  position:relative; z-index:1;
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1.25fr .95fr; gap:clamp(2.5rem,6vw,6rem); align-items:stretch;
}

.about-copy{ position:relative; z-index:1; }
.about-copy h2{ font-size:clamp(2.3rem,4.4vw,3.2rem); line-height:1.12; color:var(--espresso); }
.about-copy h2 .script{
  font-family:var(--font-accent); font-style:italic; font-weight:500;
  color:var(--gold-deep); font-size:1.08em; line-height:1.1; display:inline-block;
}
.about-copy p{ color:var(--mocha); max-width:50ch; font-size:1.02rem; }

.about-signature{ position:relative; display:flex; align-items:flex-start; gap:1em; padding:.15em 0 .15em 1.2em; margin:1.6em 0 1.8em; }
.about-signature::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); }
.about-signature .script{ font-family:var(--font-script); font-size:2rem; line-height:1; color:var(--espresso); }
.about-signature p{ margin:.5em 0 0; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mocha); }
.about-signature .heart{ color:var(--gold); font-size:.9em; }

/* -- image side: a matted, gallery-print frame so the FULL photo shows
   (object-fit:contain, no cropping), with gold viewfinder corners,
   a soft shine sweep on scroll-reveal, and two small twinkling sparkles
   for a bit of "wow" without being gimmicky. -- */
.about-media{ position:relative; height:100%; box-sizing:border-box; }
.about-corner{ position:absolute; width:34px; height:34px; border:1px solid var(--gold); z-index:2; }
.about-corner.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.about-corner.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.about-corner.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.about-corner.br{ bottom:0; right:0; border-left:0; border-top:0; }

.about-photo-wrap{
  position:absolute; top:22px; left:22px; right:22px; bottom:22px; z-index:1; overflow:hidden;
  background:var(--ivory); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 40px 70px -30px rgba(42,33,28,.35);
}
.about-photo-wrap::after{
  content:""; position:absolute; inset:12px;
  border:1px solid rgba(212,175,55,.22);
  pointer-events:none; z-index:2;
}
.about-photo-wrap img{
  width:100%; height:100%; object-fit:cover; object-position:center 10%;
  /* photo now sits in the LEFT column — mirror it so Daniella faces right,
     into the text, instead of looking off the edge of the page */
  transform:scaleX(-1);
}
.about-shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,253,248,.65) 50%, transparent 58%);
  transform:translateX(-120%);
}
.about-media.reveal.is-visible .about-shine{ animation:about-shine-sweep 1.6s ease .3s 1; }
@keyframes about-shine-sweep{
  from{ transform:translateX(-120%); }
  to{ transform:translateX(120%); }
}

.about-sparkle{
  position:absolute; z-index:4; color:var(--gold);
  filter:drop-shadow(0 0 7px rgba(212,175,55,.75));
  animation:about-twinkle 3s ease-in-out infinite;
}
.about-sparkle svg{ width:100%; height:100%; display:block; }
.about-sparkle--1{ top:-16px; right:10%; width:30px; height:30px; animation-delay:.2s; }
.about-sparkle--2{ bottom:14%; left:-18px; width:22px; height:22px; animation-delay:1.5s; }
@keyframes about-twinkle{
  0%, 100%{ opacity:.4; transform:scale(.7) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.15) rotate(12deg); }
}

.about-badge{
  position:absolute; left:-1.6rem; bottom:-1.8rem; z-index:3;
  background:linear-gradient(155deg, #241a14 0%, var(--espresso) 55%, #2a1e17 100%);
  color:var(--ivory);
  font-family:var(--font-display); font-style:italic; font-size:1.15rem; line-height:1.3;
  padding:1.5em 1.6em 1.3em; max-width:230px;
  box-shadow:0 26px 50px -18px rgba(42,33,28,.55);
}
.about-badge::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--line-gradient-h);
}
.about-badge::after{
  content:"\201C"; position:absolute; top:.08em; right:.4em;
  font-family:var(--font-accent); font-size:2.4rem; line-height:1;
  color:rgba(212,175,55,.4); pointer-events:none;
}

@media (max-width: 1023px){
  .about-teaser{ padding:5.5rem var(--gutter); }
  .about-inner{ grid-template-columns:1fr; }
  /* ujednolicenie z breakpointem Tailwind lg (1024px) — likwidacja luki miedzy 861px a 1023px oraz wsparcie ekranów elastycznych (Galaxy Z Fold 2) */
  .about-media{ height:auto; padding:14px; order:-1; display:block; min-height:360px; }
  .about-photo-wrap{ position:relative; top:auto; left:auto; right:auto; bottom:auto; width:100%; height:auto; aspect-ratio:4/5; min-height:340px; margin:0 auto; max-width:480px; }
  .about-photo-wrap img{ width:100%; height:100%; object-fit:cover; object-position:center 10%; }
  .about-corner{ width:24px; height:24px; }
  /* was position:static — a fix for a real bug (.about-media used to be
     display:flex on mobile, which turned the badge into a flex sibling
     sitting beside the photo). .about-media is plain display:block on
     mobile now, so that bug no longer applies, and static was left
     behind as a full-width flat espresso slab under the photo — oversized
     and flat exactly as flagged. Back to floating over the photo corner
     like desktop, just scaled down to fit a narrow screen. */
  .about-badge{
    position:absolute; left:auto; right:.9rem; bottom:.9rem;
    max-width:168px; padding:1.1em 1.05em .9em; font-size:.85rem; line-height:1.35;
    box-shadow:0 18px 34px -16px rgba(42,33,28,.5);
  }
  .about-badge::after{ font-size:1.9rem; }
  .about-sparkle--1{ width:22px; height:22px; top:-10px; }
  .about-sparkle--2{ width:18px; height:18px; }
}

@media (prefers-reduced-motion: reduce){
  .about-shine{ display:none; }
  .about-sparkle{ animation:none; opacity:.7; }
}

/* ================= BUSINESS PHOTOGRAPHY ================= */
.business-features{
  position:relative; overflow:hidden;
  background: #FAF6F0;
  padding:8rem var(--gutter);
}
.business-inner{
  position:relative; z-index:1; max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4.5vw,4rem);
  align-items:start;
}

.business-text{ position:relative; padding-top:.4rem; }
.business-header{ max-width:620px; margin-bottom:2.4rem; }
.business-header .eyebrow{ color:var(--mocha); }
.business-header h2{ font-size:clamp(2.2rem,4.4vw,3.2rem); line-height:1.14; max-width:20ch; margin-bottom:.55em; color:var(--espresso); }
.business-lede{ color:var(--mocha); font-size:1.02rem; line-height:1.75; max-width:56ch; margin:0 0 1.1rem; }
.business-note{
  position:relative;
  font-family:var(--font-display); font-style:italic; font-size:1.18rem;
  color:var(--espresso); opacity:.9; line-height:1.55; max-width:none;
  margin:0; padding-left:1.2rem; border-left:none;
}
.business-note::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1.5px;
  background:var(--line-gradient-v); opacity:.75;
}

.business-list{ position:relative; list-style:none; margin:0; padding:0; }
.business-list::before{
  content:""; position:absolute; z-index:0; top:6px; bottom:6px; left:27px;
  width:1px; background:var(--line-gradient-v);
}
.business-list li{
  position:relative; display:flex; align-items:flex-start; gap:1.8rem;
  padding:1.9rem 0;
}
.business-list li:first-child{ padding-top:0; }
.business-list li:last-child{ padding-bottom:0; }

.business-num{
  position:relative; z-index:1; flex:none;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--gold);
  font-family:var(--font-display); font-style:italic; font-size:1.1rem; color:var(--gold-deep);
  transition:background .4s, color .4s, border-color .4s,
             transform .6s var(--ease), opacity .6s var(--ease);
}
.business-list li:hover .business-num{ background:var(--espresso); border-color:var(--espresso); color:var(--ivory); }

.business-list li .business-num{ transform:scale(.72); opacity:0; }
.business-list li.is-visible .business-num{ transform:scale(1); opacity:1; }
.business-list li:nth-child(1) .business-num{ transition-delay:.05s; }
.business-list li:nth-child(2) .business-num{ transition-delay:.2s; }
.business-list li:nth-child(3) .business-num{ transition-delay:.35s; }
.business-list li:nth-child(4) .business-num{ transition-delay:.5s; }
@media (prefers-reduced-motion: reduce){
  .business-list li .business-num{ transform:none; opacity:1; transition:background .4s, color .4s, border-color .4s; }
}

.business-item-body{
  padding-top:.5rem;
  display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:.7rem;
  transition:transform .4s var(--ease);
}
.business-list li:hover .business-item-body{ transform:translateX(.4rem); }
.business-icon{
  grid-row:1; grid-column:1;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, rgba(212,175,55,.24), rgba(212,175,55,.06));
  border:1px solid rgba(212,175,55,.5); color:var(--gold-deep);
}
.business-icon svg{ width:17px; height:17px; }
.business-item-body h3{ grid-row:1; grid-column:2; margin:0; font-size:1.2rem; color:var(--espresso); }
.business-item-body p{ grid-row:2; grid-column:1 / -1; margin:.55em 0 0; color:var(--mocha); font-size:.94rem; max-width:46ch; }

.business-coverage{
  position:relative;
  margin:2.4rem 0 0; padding-top:1.8rem;
  font-family:var(--font-display); font-style:italic; font-size:1.02rem;
  color:var(--mocha); max-width:58ch;
}
.business-coverage::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--line-gradient-h);
}

@media (max-width:900px){
  .business-inner{ grid-template-columns:1fr; gap:3rem; }
  .business-text{ padding-top:0; }
  .business-header,
  .business-lede,
  .business-note,
  .business-coverage{ max-width:none; }
}
@media (max-width:560px){
  .business-features{ padding:5.5rem var(--gutter); }
  .business-list::before{ left:21px; }
  .business-num{ width:44px; height:44px; font-size:.95rem; }
  .business-list li{ gap:1.1rem; padding:1.5rem 0; }
  .business-item-body{ grid-template-columns:auto 1fr; column-gap:.5rem; }
  .business-icon{ width:28px; height:28px; }
  .business-icon svg{ width:14px; height:14px; }
  .business-item-body h3{ font-size:1.08rem; }
}

/* ================= PHOTO SLIDER ================= */
.photo-slider{ position:relative; overflow:hidden; background:var(--black); padding:3px 0; }
.photo-slider.reveal{
  opacity:1; transform:none;
  clip-path:inset(0 16% 0 16%);
  transition:clip-path 1.1s var(--ease);
}
.photo-slider.reveal.is-visible{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){
  .photo-slider.reveal{ clip-path:none; transition:none; }
}
.photo-slider-track{ display:flex; width:max-content; will-change:transform; }
.photo-slider-group{ display:flex; flex-shrink:0; }
.photo-slide{
  position:relative; flex:none; display:block;
  width:min(28vw, 320px); aspect-ratio:3/4; margin-right:3px;
  padding:0; border:0; background:none; overflow:hidden;
}
.photo-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center 10%; display:block;
  filter:grayscale(.25); transform:scale(1.01);
  transition:transform 1.1s var(--ease), filter .6s;
}
.photo-slide:hover img{ transform:scale(1.06); filter:grayscale(0); }
@media (max-width:1024px){
  .photo-slide{ width:min(38vw, 280px); aspect-ratio:3/4; }
}
@media (max-width:700px){
  .photo-slide{ width:58vw; aspect-ratio:3/4; }
}
@media (max-width:430px){
  .photo-slide{ width:66vw; aspect-ratio:3/4; }
}
@media (prefers-reduced-motion: reduce){ .photo-slide img{ transition:filter .6s; } }

/* -- lightbox -- */
.lightbox{
  position:fixed; inset:0; z-index:1500;
  display:flex; align-items:center; justify-content:center; padding:4vh 4vw;
  background:rgba(20,15,11,.92);
  opacity:0; transition:opacity .3s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lightbox-figure{ margin:0; max-width:min(1100px,92vw); max-height:92vh; }
.lightbox-img{
  display:block; max-width:min(1100px,92vw); max-height:92vh;
  width:auto; height:auto; object-fit:contain;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.6);
  transform:scale(.96); transition:transform .35s var(--ease);
}
.lightbox.is-open .lightbox-img{ transform:scale(1); }
.lightbox-close{
  position:fixed; top:2rem; right:2rem; z-index:1;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,253,248,.1); border:1px solid rgba(255,253,248,.4);
  color:var(--ivory); cursor:pointer; transition:background .3s, transform .3s;
}
.lightbox-close:hover{ background:rgba(255,253,248,.22); transform:rotate(90deg); }
@media (max-width:560px){
  .lightbox-close{ top:1.1rem; right:1.1rem; width:38px; height:38px; }
}

/* ================= WHY ================= */
.why{
  position:relative; overflow:hidden; padding:7rem var(--gutter);
  background: #FFFFFF;
}
.why-inner{
  position:relative; z-index:1;
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns: 5fr 7fr; gap:clamp(2.5rem,4vw,4.5rem);
  align-items:start;
}

.why-head{ position:relative; align-self:start; top:0; }
.why-head h2{ font-size:clamp(2.2rem,3.8vw,3.2rem); line-height:1.15; color:var(--espresso); margin-bottom:.6em; }
.why-lede{ color:var(--mocha); max-width:46ch; font-size:1.05rem; line-height:1.7; }

.why-orb{
  position:absolute; z-index:0; top:-4rem; right:2%;
  width:340px; height:340px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(212,175,55,.25), transparent 68%);
  filter:blur(30px);
  animation:why-breathe 7s ease-in-out infinite;
}
@keyframes why-breathe{
  0%, 100%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.18); opacity:.9; }
}

.why-points{
  position:relative; z-index:1; align-self:start;
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 2.5rem;
}
.why-sparkle{
  position:absolute; z-index:2; color:var(--gold);
  filter:drop-shadow(0 0 7px rgba(212,175,55,.75));
  animation:about-twinkle 3s ease-in-out infinite;
}
.why-sparkle svg{ width:100%; height:100%; display:block; }
.why-sparkle--1{ top:-2.2rem; right:4%; width:24px; height:24px; animation-delay:.3s; }
.why-sparkle--2{ bottom:2%; left:-1.4rem; width:20px; height:20px; animation-delay:1.6s; }

.why-point{ position:relative; padding-left:1.3rem; }
.why-point::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1.5px;
  background:var(--line-gradient-v); opacity:.75; transition:opacity .4s var(--ease);
}
.why-point:hover::before{ opacity:1; }
.why-point h3{ font-size:1.22rem; line-height:1.3; margin-bottom:.45em; color:var(--espresso); font-family:var(--font-display); }
.why-point p{ color:var(--mocha); font-size:.98rem; line-height:1.68; max-width:none; margin:0; }

@media (max-width:1024px){
  .why{ padding:5rem var(--gutter); }
  .why-inner{ grid-template-columns:1fr; gap:2.5rem; }
  .why-head{ position:relative; top:0; }
  .why-points{ grid-template-columns:1fr 1fr; gap:2.2rem 2rem; }
  .why-sparkle--2{ display:none; }
}
@media (max-width:640px){
  .why{ padding:4rem var(--gutter); }
  .why-points{ grid-template-columns:1fr; gap:2rem; }
  .why-orb{ width:220px; height:220px; top:-2rem; }
}
@media (prefers-reduced-motion: reduce){
  .why-orb{ animation:none; }
  .why-sparkle{ animation:none; opacity:.7; }
}

/* ================= SECTION DIVIDER ================= */
.section-divider{
  position:relative; z-index:10; height:0 !important; margin:0 !important; padding:0 var(--gutter) !important;
  background: transparent !important;
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
  overflow: visible !important;
}
.section-divider-line{
  flex:1 1 auto; max-width:320px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), transparent) !important;
  margin: 0;
}
.section-divider-mark{
  flex:none; width:16px; height:16px; color:var(--gold);
  margin: 0;
  display:flex; align-items:center; justify-content:center;
}
.section-divider-mark svg{ width:100%; height:100%; display:block; }
@media (max-width:640px){
  .section-divider{ padding:0 var(--gutter) !important; gap:1rem; }
  .section-divider-line{ max-width:80px; }
}

/* ================= SERVICES ================= */
.services{
  position:relative; overflow:hidden;
  max-width:none; margin:0; padding:8rem 0;
  background: #FAF6F0;
}
.services-head, .services-secondary-head, .services-grid, .services-actions{ position:relative; z-index:1; max-width:var(--container); margin-left:auto; margin-right:auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.services-head, .services-secondary-head{ max-width:660px; text-align:center !important; margin-left:auto; margin-right:auto; }
.services-head h2{ font-size:clamp(2.2rem,4.4vw,3.2rem); color:var(--espresso); }
.services-head .lede{ margin:0 auto; max-width:52ch; color:var(--mocha); }
.services-secondary-head p, .services-secondary-head h3{ text-align:center !important; }

.services-ring{
  position:absolute; z-index:0; top:1.6rem; right:7%; pointer-events:none;
  width:128px; height:128px; color:var(--gold); opacity:.6;
  animation:services-ring-spin 46s linear infinite;
}
.services-ring svg{ width:100%; height:100%; display:block; }
@keyframes services-ring-spin{ to{ transform:rotate(360deg); } }
@media (max-width:700px){
  .services-ring{ width:84px; height:84px; top:.6rem; right:4%; opacity:.45; }
}
@media (prefers-reduced-motion: reduce){
  .services-ring{ animation:none; }
}

.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem;
  margin-top:2.5rem;
}
.services-grid--primary{
  grid-template-columns:repeat(4,1fr); gap:1.4rem;
}
.services-grid--secondary{
  grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:1050px; margin-left:auto; margin-right:auto;
}
@media (max-width: 1024px) {
  .services-grid--primary { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px) {
  .services-grid--primary, .services-grid--secondary { grid-template-columns:1fr; }
}

.card-badge{
  position:absolute; top:18px; left:18px; z-index:3;
  background:linear-gradient(120deg, #A8841F, #D4AF37);
  color:#FFFFFF; font-family:var(--font-body); font-size:0.65rem; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; padding:0.35em 0.85em;
  border-radius:2px; box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

.service-card{
  position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:4/5; border: 1px solid rgba(212,175,55,.3);
  box-shadow: 0 10px 30px rgba(74,52,40,.06);
}
.service-card::before{
  content:""; position:absolute;
  top:16px; right:16px;
  width:24px; height:24px;
  border-top:1px solid rgba(255, 253, 248, 0.4);
  border-right:1px solid rgba(255, 253, 248, 0.4);
  pointer-events:none; z-index:2;
  transition:border-color .45s var(--ease), top .45s var(--ease), right .45s var(--ease);
}
.service-card:hover::before{
  border-color:var(--gold);
  top:12px; right:12px;
}
.service-card::after{
  content:""; position:absolute;
  bottom:16px; left:16px;
  width:24px; height:24px;
  border-bottom:1px solid rgba(255, 253, 248, 0.4);
  border-left:1px solid rgba(255, 253, 248, 0.4);
  pointer-events:none; z-index:2;
  transition:border-color .45s var(--ease), bottom .45s var(--ease), left .45s var(--ease);
}
.service-card:hover::after{
  border-color:var(--gold);
  bottom:12px; left:12px;
}
.service-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease), filter 1.1s var(--ease); filter:brightness(.82); }
.service-card:hover img{ transform:scale(1.08); filter:brightness(.95); }

.service-overlay{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem 1.6rem;
  background:linear-gradient(180deg, rgba(15,11,8,0) 0%, rgba(15,11,8,.65) 50%, rgba(15,11,8,.95) 100%);
}
.service-title{ color:var(--ivory) !important; font-size:clamp(1.3rem, 2vw, 1.7rem); line-height:1.2; margin:0 0 .25em; text-shadow: 0 2px 10px rgba(10,8,6,0.95), 0 1px 3px rgba(10,8,6,0.85); }
.service-tags{
  color:var(--gold); font-family:var(--font-display); font-style:italic;
  font-size:clamp(.84rem, 1.3vw, .98rem); line-height:1.35; margin-bottom:.6rem;
  text-shadow: 0 2px 8px rgba(10,8,6,0.95), 0 1px 2px rgba(10,8,6,0.85);
}
.service-text{ color:rgba(255,253,248,.92); font-size:.84rem; line-height:1.5; margin:0 0 .7em; text-shadow: 0 1px 4px rgba(10,8,6,0.95); }
.service-text em{ font-style:italic; color:var(--gold); }
.service-cta{
  display:inline-flex; align-items:center; gap:.45em; align-self:flex-start;
  background:var(--ivory); color:var(--espresso);
  font-size:.66rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:.55em 1em; border-radius:2px;
}

.services-actions{ margin-top:4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* mouse/trackpad devices only: hide the description + button until
   hover, keep just the title resting on a soft scrim */
@media (hover:hover) and (pointer:fine){
  .service-overlay{
    background:linear-gradient(180deg, rgba(18,14,11,0) 30%, rgba(18,14,11,.45) 60%, rgba(18,14,11,.86) 100%);
    transition:background .5s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .service-card:hover .service-overlay{
    background:linear-gradient(180deg, rgba(15,11,8,.4) 0%, rgba(15,11,8,.94) 100%);
  }
  .service-tags{
    margin-bottom:0;
    transition:margin-bottom .45s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .service-card:hover .service-tags{
    margin-bottom:.6rem;
  }
  .service-text{
    max-height:0; opacity:0; margin-bottom:0; overflow:hidden;
    transform:translateY(12px);
    transition:max-height .55s cubic-bezier(0.25, 1, 0.5, 1), 
               opacity .45s cubic-bezier(0.25, 1, 0.5, 1) .06s, 
               transform .5s cubic-bezier(0.25, 1, 0.5, 1) .06s;
  }
  .service-card:hover .service-text{ 
    max-height:160px; 
    opacity:1; 
    transform:translateY(0);
    margin-bottom:0; 
  }
}

@media (max-width:980px){
  .services-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:700px){
  .services{ padding:5.5rem 0; }
  .services-grid{ grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2.6rem; }
  .service-overlay{ padding:1.2rem; }
  .service-title{ font-size:1.15rem; margin-bottom:.2em; }
  .service-tags{ font-size:.78rem; margin-bottom:.5rem; }
  .service-text{ font-size:.8rem; }
}
@media (max-width:460px){
  .services-grid{ grid-template-columns:1fr; }
  .service-overlay{ padding:1.8rem; }
  .service-title{ font-size:1.35rem; }
  .service-tags{ font-size:.88rem; }
}

/* ================= HOW ================= */
.how{
  background: #FFFFFF;
  padding:5.5rem var(--gutter); text-align:center; position:relative; overflow:hidden;
}
.how::before{
  content:""; position:absolute; z-index:0; top:50%; left:50%;
  width:min(60vw,620px); height:min(60vw,620px);
  border:1px solid var(--espresso); opacity:.04;
  transform:translate(-50%,-50%) rotate(45deg);
  pointer-events:none;
}
.how-head{
  position:relative; z-index:1;
  max-width:660px; margin:0 auto; text-align:center !important;
}
.how-head h2, .how-head p{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
.how h2{ font-size:clamp(2.2rem,4.4vw,3.2rem); color:var(--espresso); }
.how .eyebrow{ justify-content:center !important; text-align:center !important; }

.how-timeline{ position:relative; max-width:var(--container); margin:2.5rem auto 0; }

.how-track, .how-progress{
  display:block; position:absolute; left:20px; width:2px; z-index:0;
}
.how-track{
  top:24px; bottom:24px; background:rgba(42,33,28,.14);
}
.how-progress{
  top:24px; height:0; background:var(--line-gradient-v);
  transition:height 1.8s var(--ease) .3s;
}
.how-timeline.is-visible .how-progress{ height:calc(100% - 48px); }

@media (min-width:860px){
  .how-track, .how-progress{ left:8%; right:8%; width:auto; height:1px; top:134px; bottom:auto; }
  .how-track{ background:rgba(42,33,28,.14); }
  .how-progress{ background:var(--line-gradient-h); transition:width 1.8s var(--ease) .3s; width:0; height:1px; }
  .how-timeline.is-visible .how-progress{ width:84%; height:1px; }
}

.how-steps{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:3.5rem;
}
@media (min-width:860px){
  .how{ padding:8rem var(--gutter); }
  .how-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
}

.how-step{
  display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto;
  align-items:start; text-align:left; padding:0; position:relative;
}
@media (min-width:860px){
  .how-step{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:0 1.7rem;
  }
}

.how-step-top{
  position:relative; width:100%; height:auto;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
  padding-bottom:0.4rem;
  opacity:0; transform:translateY(-15px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  grid-column:2; grid-row:1;
}
@media (min-width:860px){
  .how-step-top{
    height:128px; padding-bottom:1.5rem;
    justify-content:flex-end; align-items:center;
    transform:translateY(-26px);
  }
}
.how-timeline.is-visible .how-step-top{ opacity:1; transform:none; }

.how-num{
  display:block;
  font-family:var(--font-display); font-weight:600; font-style:normal;
  font-size:1.1rem; line-height:1; margin-bottom:0.2rem;
  color:var(--espresso); opacity:.4; user-select:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.how-step:hover .how-num{ opacity:.26; transform:translateY(-2px); }
@media (min-width:860px){
  .how-num{
    font-size:clamp(2.6rem,4vw,3.6rem); line-height:1; margin-bottom:.3em;
    opacity:.16;
  }
}

.how-step-top h3{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1.7rem; letter-spacing:.01em; margin:0; color:var(--espresso);
}

.how-dot{
  width:12px; height:12px; border-radius:50%; flex:none;
  background:var(--cream); border:2px solid rgba(42,33,28,.22);
  margin:6px 0 0 0;
  transform:scale(0);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1), background-color .3s, border-color .3s;
  grid-column:1; grid-row:1 / span 2; justify-self:center; z-index:2;
}
@media (min-width:860px){
  .how-dot{ margin:0; }
}
.how-timeline.is-visible .how-dot{ transform:scale(1); }
.how-step:hover .how-dot{ transform:scale(1.4); background:var(--gold); border-color:var(--gold); }

.how-step-desc{
  color:var(--mocha); font-size:1rem; line-height:1.7; max-width:100%;
  padding-top:0; margin:0;
  opacity:0; transform:translateY(15px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  grid-column:2; grid-row:2;
}
@media (min-width:860px){
  .how-step-desc{ padding-top:2.4rem; max-width:28ch; transform:translateY(26px); }
}
.how-timeline.is-visible .how-step-desc{ opacity:1; transform:none; }

.how-step:nth-child(1) .how-step-top, .how-step:nth-child(1) .how-step-desc{ transition-delay:0s; }
.how-step:nth-child(1) .how-dot{ transition-delay:.15s; }
.how-step:nth-child(2) .how-step-top, .how-step:nth-child(2) .how-step-desc{ transition-delay:.15s; }
.how-step:nth-child(2) .how-dot{ transition-delay:.3s; }
.how-step:nth-child(3) .how-step-top, .how-step:nth-child(3) .how-step-desc{ transition-delay:.3s; }
.how-step:nth-child(3) .how-dot{ transition-delay:.45s; }
.how-step:nth-child(4) .how-step-top, .how-step:nth-child(4) .how-step-desc{ transition-delay:.45s; }
.how-step:nth-child(4) .how-dot{ transition-delay:.6s; }

.how-cta{
  margin-top:5rem;
  display:flex; justify-content:center; align-items:center;
  width:100%; max-width:100%; box-sizing:border-box;
  padding:0 1rem;
}

@media (prefers-reduced-motion: reduce){
  .how-step-top, .how-step-desc{ opacity:1; transform:none; transition:none; }
  .how-dot{ transform:scale(1); transition:background-color .3s, border-color .3s; }
  .how-progress{ transition:none; }
}

/* ================= TESTIMONIALS ================= */
.testimonials{
  position:relative; max-width:100%; margin:0 auto; padding:8rem 0; text-align:center; overflow:hidden;
  background: #FAF6F0; /* Soft ivory cream for perfect color rhythm against .how (#FFFFFF) above and .cta-band below */ /* Pure white background for review cards contrast */
}
.testimonials-head{ position:relative; }
.testimonials .ghost-text{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:clamp(4rem, 10vw, 8rem) !important;
  color:transparent !important; -webkit-text-fill-color:transparent !important; -webkit-text-stroke:1px rgba(74,52,40,0.12) !important;
  line-height:1 !important; white-space:nowrap;
  top:-.15em; left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
}
.testimonials > *{ position:relative; z-index:1; }
.testimonials .eyebrow{ justify-content:center; }
.testimonials h2{ font-size:clamp(2.1rem,4.2vw,3.1rem); padding:0 var(--gutter); color:var(--espresso); }
.testimonials .lede{ margin:0 auto 4rem; padding:0 var(--gutter); color:var(--mocha); }

.testimonial-marquee{ overflow:hidden; }
.testimonial-track{ display:inline-flex; gap:1.4rem; animation:testimonial-scroll 46s linear infinite; padding:0 var(--gutter); }
.testimonial-marquee:hover .testimonial-track{ animation-play-state:paused; }
@keyframes testimonial-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (max-width:760px){
  .testimonials{ padding:5.5rem 0; }
}

blockquote{
  margin:0; padding:2rem 1.8rem 1.6rem; background:var(--white); border-radius:var(--radius);
  border: 1px solid rgba(212,175,55,.3); box-shadow: 0 12px 30px rgba(74,52,40,.05);
  font-family:var(--font-display); font-size:1.05rem; color:var(--espresso); line-height:1.5;
  width:min(350px, 80vw); height:245px; flex:none; text-align:left; position:relative;
  display:flex; flex-direction:column;
}
.quote-mark{ display:block; font-family:var(--font-accent); font-size:2.2rem; color:var(--gold); line-height:1; margin-bottom:.1em; }
blockquote p{
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  flex-grow:0;
}
.read-more-btn{
  background:none; border:none;
  font-family:var(--font-body); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep);
  cursor:pointer; padding:0; margin-top:0.4rem; margin-bottom:0.2rem;
  align-self:flex-start; transition:color .2s ease;
  position:relative; z-index:2;
}
.read-more-btn:hover{ color:var(--espresso); }
blockquote cite{
  display:block; margin-top:auto; padding-top:.6rem;
  font-family:var(--font-body); font-style:normal; font-weight:600; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mocha);
}

/* ================= TESTIMONIAL MODAL ================= */
.review-modal{
  position:fixed; inset:0; background:rgba(18, 16, 15, 0.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  z-index:2000; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  padding:var(--gutter);
}
.review-modal.is-active{ opacity:1; pointer-events:auto; }
.review-modal-content{
  background:var(--cream); padding:3.5rem 2.5rem 2.5rem; border-radius:var(--radius);
  max-width:500px; width:100%; position:relative;
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
  transform:translateY(20px); transition:transform .3s ease;
}
.review-modal.is-active .review-modal-content{ transform:translateY(0); }
.review-modal-close{
  position:absolute; top:1.5rem; right:1.5rem;
  background:none; border:none; font-size:2rem; line-height:1;
  color:var(--mocha); cursor:pointer; padding:0.5rem; transition:color .2s ease;
}
.review-modal-close:hover{ color:var(--gold); }
.review-modal-content p{
  margin:0; font-family:var(--font-display); font-size:1.12rem;
  color:var(--espresso); line-height:1.5;
}
.review-modal-content cite{
  display:block; margin-top:1.3em; font-family:var(--font-body);
  font-style:normal; font-weight:600; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mocha);
}
.testimonial-note{ margin-top:2.4rem; font-size:.78rem; color:var(--ink-soft); font-style:italic; padding:0 var(--gutter); }

/* ================= CTA BAND ================= */
.cta-band{ position:relative; padding:8rem var(--gutter); text-align:center; color:var(--ivory); overflow:hidden; isolation:isolate; }
/* this section had NO responsive rules at all — the 10rem top/bottom
   padding (160px each side) stayed fixed at every viewport width, unlike
   every other section on the page which tightens its vertical rhythm on
   mobile. Not broken layout-wise (the heading already scales via clamp),
   but on a phone it reads as an oversized, mostly-empty band. */
@media (max-width:760px){
  .cta-band{ padding:5.5rem var(--gutter); }
  .cta-band .quote-mark{ font-size:2.4rem; }
  .cta-heading{ margin-bottom:.9em; }
}
.cta-media{ position:absolute; inset:0; z-index:-1; }
.cta-media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.92) contrast(1.02); }
.cta-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,14,11,.35) 0%, rgba(18,14,11,.58) 100%);
}
.cta-content{ position:relative; max-width:680px; margin:0 auto; text-align:center; }
.cta-band .quote-mark{ font-size:3.2rem; margin:0 auto .3em; text-align:center; }
.cta-heading{ color:#FFFFFF !important; font-size:clamp(2.4rem,5.6vw,3.8rem); margin-bottom:1.1em; font-weight:500; }
.cta-band em{
  color:#F7E5A9 !important;
  font-style:italic;
  font-family:var(--font-accent);
  text-shadow: 0 0 35px rgba(212,175,55,0.65), 0 4px 20px rgba(0,0,0,0.95);
}

/* This section closes out the whole homepage, so it gets its own
   signature arrival instead of the generic .reveal fade+rise used
   everywhere else: each line of the headline is held inside an
   overflow:hidden mask and starts translated up above it (hidden), then
   physically drops down into place — a "falling text" reveal, distinct
   from the blur-resolve in How, the shutter in the photo slider, and the
   scale-in in Business. One-shot IntersectionObserver (js/main.js,
   initCtaReveal) adds .is-visible to .cta-band the first time it scrolls
   into view; CSS transitions do the rest. The button waits until the
   lines have mostly landed, then fades/rises in on its own delay. */
.cta-line-mask{ display:block; overflow:hidden; }
.cta-line{
  display:block;
  color:#FFFFFF !important;
  font-weight:500;
  text-shadow: 0 4px 28px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,0.9);
  transform:translateY(-115%);
  transition:transform 1.1s var(--ease);
}
.cta-line-mask:nth-of-type(2) .cta-line{ transition-delay:.16s; }
.cta-band.is-visible .cta-line{ transform:translateY(0); }

.cta-fade{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease) .55s, transform .9s var(--ease) .55s;
}
.cta-band.is-visible .cta-fade{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .cta-line{ transform:none; transition:none; }
  .cta-fade{ opacity:1; transform:none; transition:none; }
}

/* ================= BEAUTY CROSS-PROMO ================= */
@keyframes beautyGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.beauty{
  position:relative; overflow:hidden; color:var(--espresso);
  padding:4.5rem var(--gutter);
  /* Zmieniony gradient na wyraźniejszy, cieplejszy odcień szampana/złota */
  background: linear-gradient(120deg, #FFFFFF, rgba(212, 175, 55, 0.15), #FDF5E6, rgba(212, 175, 55, 0.08), #FFFFFF);
  background-size: 300% 300%;
  animation: beautyGlow 14s ease-in-out infinite;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.beauty-inner{
  position:relative; z-index:1; max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; gap:clamp(2.5rem,5vw,5rem);
}

/* the script word does the job a photo would — big, warm, personal —
   with the lash/brow icon sitting just under it as a small, concrete
   anchor to what the word actually means in this context. A vertical
   gold hairline (same --line-gradient-v used elsewhere for connectors)
   separates the two columns instead of leaving them just floating. */
.beauty-visual{
  position:relative; text-align:center; padding:1rem 2.5rem 1rem 0;
}
.beauty-visual::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:1px;
  background:var(--line-gradient-v); opacity:.5;
}
.beauty-script{
  position:relative; display:block; font-family:var(--font-script); font-weight:400; font-style:normal;
  font-size:clamp(3.2rem,7vw,5.4rem); line-height:1;
  background:var(--gold-gradient); background-size:260% auto; background-position:20% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
  animation:beauty-shimmer 7s ease-in-out infinite;
}
@keyframes beauty-shimmer{
  0%, 100%{ background-position:10% 0; }
  50%{ background-position:90% 0; }
}
.beauty-sparkle{
  position:absolute; color:var(--gold); animation:beauty-twinkle 2.6s ease-in-out infinite;
}
.beauty-sparkle svg{ width:100%; height:100%; display:block; }
.beauty-sparkle--1{ top:-.4rem; right:1.2rem; width:22px; height:22px; animation-delay:.2s; }
.beauty-sparkle--2{ bottom:-.2rem; left:2.4rem; width:16px; height:16px; animation-delay:1.4s; }
@keyframes beauty-twinkle{
  0%, 100%{ opacity:.25; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1.05); }
}
.beauty-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:68px; height:68px; border-radius:50%; margin-top:1.4rem;
  border:1px solid rgba(212,175,55,.6); color:var(--gold);
  background: radial-gradient(circle, rgba(212,175,55,0.1) 0%, transparent 70%);
  box-shadow: 0 4px 18px rgba(212,175,55,0.15);
}
.beauty-icon svg{ width:44px; height:34px; overflow:visible; }
.beauty-eye-lid{
  transform-origin: 27px 25px;
  animation: eyeBlink 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes eyeBlink{
  0%, 78%, 88%, 100% {
    transform: scaleY(1);
  }
  83% {
    transform: scaleY(0.08);
  }
  86% {
    transform: scaleY(1);
  }
  87.5% {
    transform: scaleY(0.45);
  }
}

.beauty-content{ text-align:left; }
.beauty h2{ color:var(--espresso); font-size:clamp(2rem,4vw,2.7rem); }
.beauty .eyebrow{ color:var(--mocha); }
.beauty p{ color:var(--mocha); margin:0 0 1.2em; max-width:60ch; }

/* was max-width:760px — every other two-column section on the page
   (About/Business/Why) stacks at 860-900px, so between 761-900px
   (a very common tablet-portrait range, e.g. 768px/810px/820px) those
   sections had already gone single-column while Beauty was still
   forcing its .7fr/1.3fr split into a cramped ~220px left column —
   tight enough to risk the script word/icon feeling squeezed. Now
   matches the same 900px breakpoint as its neighbours. */
@media (max-width:900px){
  .beauty{ padding:5.5rem var(--gutter); }
  .beauty-inner{ grid-template-columns:1fr; text-align:center; }
  .beauty-visual{ padding:0 0 2rem; }
  .beauty-visual::after{ top:auto; right:0; left:0; bottom:0; width:auto; height:1px; background:var(--line-gradient-h); }
  .beauty-content{ text-align:center; }
  .beauty p{ margin-left:auto; margin-right:auto; }
}
@media (prefers-reduced-motion: reduce){
  .beauty-script{ animation:none; }
  .beauty-sparkle{ animation:none; opacity:.7; }
}

/* bordered gold outline that fills solid gold on hover, plus the same
   light-streak shimmer sweep used on .btn-primary — a "leave the site"
   link shouldn't look like an afterthought next to the photography CTAs. */
.btn-beauty{
  position:relative; overflow:hidden;
  border-color:rgba(212,175,55,.8); color:var(--mocha); background:transparent;
}
.btn-beauty::after{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(212,175,55,.55), transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease);
}
.btn-beauty svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.btn-beauty:hover{ background:var(--gold); border-color:var(--gold); color:var(--black); }
.btn-beauty:hover svg{ transform:translateX(3px); }
.btn-beauty:hover::after{ left:130%; }
@media (prefers-reduced-motion: reduce){ .btn-beauty::after{ display:none; } }

/* ================= FOOTER ================= */
.site-footer{
  position:relative; overflow:hidden;
  background: #FAF6F0;
  border-top: 1px solid rgba(212,175,55,.2);
  color: rgba(42,33,28,.85); padding:0 var(--gutter) 2.2rem;
}

.footer-grid{
  position:relative; z-index:1;
  max-width:var(--container); margin:0 auto; padding-top:4.5rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2.6rem;
}
.socials{ display:flex; gap:.9rem; }
.socials a{
  width:36px; height:36px; border:1px solid rgba(212,175,55,.4); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold);
  background: rgba(42,33,28,.03);
  transition:background-color .3s, border-color .3s, color .3s, transform .3s;
}
.socials a svg{ width:16px; height:16px; display:block; }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:var(--white); transform:translateY(-2px); }

.footer-grid > div{ position:relative; }
.footer-grid > div:not(:first-child)::before{
  content:""; position:absolute; top:.15rem; bottom:.15rem; left:-1.5rem;
  width:1px; background:linear-gradient(180deg, transparent, rgba(212,175,55,.25), transparent); opacity:.7;
}

.footer-col h3{
  position:relative; display:inline-block;
  color:#7A5510 !important; font-family:var(--font-body); font-size:.78rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.3em;
}
.footer-col h3::after{
  content:""; position:absolute; left:0; bottom:-.65em; width:28px; height:1px;
  background:var(--gold); opacity:.7;
}
.footer-col p, .footer-col li{ margin-bottom:.75em; font-size:.92rem; color:rgba(42,33,28,.82); }
.footer-col a{ color:rgba(42,33,28,.82); transition:color .25s; }
.footer-col a:hover{ color:var(--gold); text-decoration:none; }

.footer-contact-list, .footer-link-list{ list-style:none; margin:0; padding:0; }
.footer-contact-list li, .footer-link-list li{
  display:flex; align-items:flex-start; gap:.7em;
  margin-bottom:.9em; font-size:.92rem; color:rgba(42,33,28,.82);
}
.footer-contact-list a, .footer-link-list a{ color:rgba(42,33,28,.82); }
.footer-contact-list a:hover, .footer-link-list a:hover{ color:var(--gold); }
.footer-ico{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-top:-.05em; border-radius:50%;
  border:1px solid rgba(212,175,55,.4); color:var(--gold); background:rgba(42,33,28,.03);
}
.footer-ico svg{ width:14px; height:14px; display:block; }
.footer-address{ color:var(--ink); font-weight:600; letter-spacing:.01em; }

.footer-hours li{ line-height:1.5; }
.footer-hours-day{ color:var(--ink); font-weight:600; }

.footer-map{ max-width:var(--container); margin:3.5rem auto 0; }
.footer-map-label{
  font-family:var(--font-body); font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#7A5510 !important; margin-bottom:1em;
}
.footer-map iframe{
  width:100%; height:260px; display:block; border:1px solid rgba(212,175,55,.3); border-radius:var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  filter:grayscale(.4) sepia(.1) saturate(1.1) contrast(1.02);
}

.footer-bottom{
  max-width:var(--container); margin:4rem auto 0; padding-top:1.8rem;
  border-top:1px solid rgba(212,175,55,.3);
  font-size:.78rem; letter-spacing:.04em; color:rgba(42,33,28,.85) !important;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.2rem;
}
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid > div:not(:first-child)::before{ display:none; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-map iframe{ height:200px; }
  .footer-bottom{
  max-width:var(--container); margin:4rem auto 0; padding-top:1.8rem;
  border-top:1px solid rgba(212,175,55,.3);
  font-size:.78rem; letter-spacing:.04em; color:rgba(42,33,28,.85) !important;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.2rem;
}
}

/* ============================================================
   ABOUT PAGE (about-photographer-aberdeen.html) — v98
   History: v92 reused the homepage's .about-teaser/.why verbatim
   (rejected — "looks like the homepage", 2/10). v94 rebuilt those as
   .bio + .reasons with distinct layouts. v98 is a fuller rebuild
   modelled on a reference template the client shared (a wedding-
   photography site), colour/content-adapted to this brand and to a
   solo photographer (no team, no video, no FAQ yet — client confirmed
   dropping/replacing those). Current section order: .page-header
   (dark) → .bio (ivory, now a layered double-photo + rotating circular
   text badge) → .approach (dark — Story/Mission/Vision, replaces the
   old .reasons 4-card pass) → .process (cream — "What We Do" 4-step
   grid + stacked photos) → .sessions (ivory — 4 photo links to gallery
   categories, replacing the reference template's team grid) →
   .style-section (cream — "My Style" 3-photo strip, unchanged since
   v94) → .testimonials (ivory, default/unmodified) → .cta-band (dark)
   → footer. .page-header and .pull-quote are shared components from
   v92/v94, unchanged. */

/* ================= PAGE HEADER (interior pages) ================= */
.page-header{
  position:relative; min-height:56vh; display:flex; flex-direction:column;
  overflow:hidden; color:var(--ivory);
}
.page-header.vogue-style {
  height: 100vh;
  min-height: 680px;
}
.page-header-media{ position:absolute; inset:0; }
.page-header-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.page-header-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,10,8,.6) 0%, rgba(12,10,8,.3) 32%, rgba(12,10,8,.94) 100%),
    linear-gradient(90deg, rgba(12,10,8,.58) 0%, rgba(12,10,8,0) 48%);
}
.page-header.vogue-style .page-header-media::after {
  background:
    linear-gradient(to top, rgba(18, 10, 8, 0.85) 0%, rgba(18, 10, 8, 0.15) 60%, transparent 100%),
    linear-gradient(to right, rgba(18, 10, 8, 0.65) 0%, transparent 70%);
}
.page-header-inner{
  position:relative; z-index:2; max-width:var(--container); margin:0 auto;
  margin-top:auto;
  width:100%; padding:13rem var(--gutter) 5rem;
  text-shadow:0 3px 20px rgba(10,8,6,.4);
}
.page-header.vogue-style .page-header-inner {
  padding-bottom: clamp(5rem, 10vh, 10rem);
  padding-top: 15rem;
}
.breadcrumb{
  display:flex; align-items:center; font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,253,248,.7);
  margin-bottom:1.6em;
}
.breadcrumb a{ color:rgba(255,253,248,.7); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb span{ color:var(--gold); }
.page-header .eyebrow{ color:var(--ivory); }
.page-header h1{
  color:var(--ivory); font-size:clamp(2.6rem,6vw,4.6rem); font-weight:500;
  line-height:1.05; margin-bottom:.35em; max-width:16ch;
}
.page-header.vogue-style h1 {
  font-size: clamp(3.2rem, 8vw, 6.2rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 1.8rem;
  max-width: 20ch;
}
.page-header h1 em{ color:var(--gold); font-style:italic; }
.page-header .lede{ position:relative; color:rgba(255,253,248,.92); max-width:46ch; padding-left:1.4rem; }
.page-header .lede::before{ content:""; position:absolute; left:0; top:.08em; bottom:.08em; width:2px; background:linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); }

/* Vogue-Style Hero Extras */
.hero-frame {
  pointer-events: none;
  position: absolute;
  inset: 24px;
  z-index: 10;
}
@media (min-width: 768px) {
  .hero-frame {
    inset: 40px;
  }
}
.hero-frame .corner {
  position: absolute;
  width: 32px;
  height: 32px;
  border-color: rgba(200, 170, 125, 0.4); /* gold/40 */
  border-style: solid;
  border-width: 0;
}
.hero-frame .corner.tl { top: 0; left: 0; border-left-width: 1px; border-top-width: 1px; }
.hero-frame .corner.tr { top: 0; right: 0; border-right-width: 1px; border-top-width: 1px; }
.hero-frame .corner.bl { bottom: 0; left: 0; border-left-width: 1px; border-bottom-width: 1px; }
.hero-frame .corner.br { bottom: 0; right: 0; border-right-width: 1px; border-bottom-width: 1px; }

.hero-sublabel {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.hero-desc {
  max-width: 480px;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  border-left: 1.5px solid rgba(200, 170, 125, 0.3);
  padding-left: 1.5rem;
  margin-bottom: 2.5rem;
}
.hero-cta {
  display: block;
}
.hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #1F1F1F;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 1.1rem 2.2rem;
  border-radius: 2px;
  overflow: hidden;
  transition: color 0.4s ease;
  cursor: pointer;
  z-index: 1;
  border: none;
  text-decoration: none;
  text-shadow: none;
}
.hero-btn .btn-text {
  position: relative;
  z-index: 2;
}
.hero-btn .btn-hover-bg {
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.hero-btn:hover {
  color: #1F1F1F !important;
}
.hero-btn:hover .btn-hover-bg {
  transform: scaleX(1);
}

/* =============================================
   VOGUE HERO — Czyste animacje wejścia
   Bez konfliktów z IntersectionObserver
   ============================================= */

/* Obraz tła: odsłona migawki */
.page-header.vogue-style .page-header-media img {
  animation: heroImgReveal 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes heroImgReveal {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1.02); }
}

/* Nagłówek H1 */
.hero-h1 {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 6.2rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 1.8rem;
  max-width: 20ch;
  animation: heroTextReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.hero-h1 em {
  color: var(--gold);
  font-style: italic;
  font-family: var(--font-display);
}
@keyframes heroTextReveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pozostałe elementy hero — staggered */
.page-header.vogue-style .reveal:not(.reveal-img):not(.reveal-mask) {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUpHero 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.page-header.vogue-style .breadcrumb.reveal   { animation-delay: 0.3s; }
.page-header.vogue-style .hero-sublabel.reveal { animation-delay: 0.5s; }
.page-header.vogue-style .hero-desc.reveal     { animation-delay: 0.7s; }
.page-header.vogue-style .hero-cta.reveal      { animation-delay: 0.9s; }

@keyframes fadeUpHero {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width:760px){
  .page-header{ min-height:auto; }
  .page-header-inner{ padding:7rem var(--gutter) 3.5rem; }
  .breadcrumb{ font-size:.6rem; margin-bottom:1.1em; }
  .page-header h1{ font-size:clamp(2.2rem,8vw,2.8rem); }
  .page-header .lede{ font-size:.94rem; padding-left:.8rem; }
}

/* ================= BIO (About page — replaces .about-teaser) ================= */
/* v2 fix (still relevant in v3 below): the first pass was a full-bleed
   side photo that read as big/empty — the source photo has a plain
   white studio backdrop, and blown up full-bleed that backdrop is just
   a wall of blank space next to the text. Fixed with a contained,
   shadowed photo CARD (like a real print, not a wallpaper panel),
   zoomed in tighter to crop out most of that white backdrop, with a
   soft radial fade at the card's own edges so any backdrop that
   remains blends into the section tone instead of reading as a flat
   rectangle. v3 (below, .bio-photo-accent/.bio-badge) adds a second
   offset photo and a rotating circular text badge on top of this same
   base card for the layered "reference template" look. */
.bio{
  position:relative; overflow:hidden; padding:8rem var(--gutter);
  background: #FFFFFF;
}
/* the grid itself is capped to the site's shared container and centred —
   without this it stretched to the full viewport width, so on wide
   screens the text column sat in the right HALF of the browser window
   instead of the right column of the same centred 1280px block every
   other section uses, reading as "shifted toward the left" relative to
   the rest of the page. */
.bio-grid{
  position:relative; z-index:1; max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:stretch;
}
/* First attempt used height:100% on .bio-photo-card nested inside
   .bio-visual — doesn't work: percentage heights only resolve against
   an ancestor with a DEFINITE height, and since .bio-visual's own
   height:100% has nothing non-percentage above it in the normal flow
   (the grid row's auto-height is computed from content BEFORE stretch
   is applied, and a height:100% branch contributes no usable intrinsic
   size to that calculation), the chain never resolves — the img just
   fell back to its own natural 4:5 aspect ratio, taller than the text.
   Real fix, copied from the homepage's .about-media/.about-photo-wrap
   (which actually works): the photo card is ABSOLUTELY positioned with
   inset:0 inside .bio-visual. An absolutely-positioned child is exempt
   from the parent's own intrinsic-size calculation, so the grid row's
   auto height is now determined purely by .bio-content (the text
   column) as intended; stretch then gives .bio-visual that same real
   height, and inset:0 computes the photo card's height directly from
   it — no percentage-height guesswork involved. */
.bio-visual{ position:relative; z-index:1; height:100%; }
.bio-corner{ display: none; }
.bio-photo-main{
  position:absolute; inset:0; overflow:hidden; border-radius:200px 200px 200px 200px; /* Capsule shape */
  box-shadow:0 40px 70px -30px rgba(42,33,28,.35);
}
.bio-photo-main img{
  width:100%; height:100%; object-fit:cover; object-position:center 14%;
  transform:scale(1.3);
}
.bio-photo-main::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 38%, transparent 42%, rgba(247,242,235,.6) 100%);
}
.bio-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,253,248,.65) 50%, transparent 58%);
  transform: translateX(-120%);
  z-index: 3;
}
.bio-visual.reveal.is-visible .bio-shine {
  animation: about-shine-sweep 1.6s ease .3s 1;
}
/* second, smaller offset photo overlapping the main card's bottom-right
   corner — the "stacked prints" motif the client referenced, giving the
   visual side layered depth instead of a single flat rectangle. */
.bio-photo-accent{
  position:absolute; right:-1.6rem; bottom:-1.8rem; z-index:2;
  width:44%; aspect-ratio:1/1; overflow:hidden;
  border-radius:50%; border:5px solid var(--ivory); /* Circular shape */
  box-shadow:0 26px 50px -20px rgba(42,33,28,.4);
  transform:rotate(-3deg);
}
.bio-photo-accent img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
/* vertical text label along the left side of the main photo */
.bio-photo-label {
  position: absolute;
  left: -2.8rem;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mocha);
  white-space: nowrap;
  opacity: 0.8;
  z-index: 3;
}
@media (max-width: 1100px) {
  .bio-photo-label {
    left: -1.8rem;
    font-size: 0.6rem;
  }
}

.bio-content{
  position:relative; z-index:1;
  padding-top: 0.5rem;
  min-width:0;
}

.bio-content h1, .bio-content h2{ font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.12; }
.bio-content h1 .script, .bio-content h2 .script{
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-deep);
  font-size: 1.08em;
  line-height: 1.15;
  display: inline;
}
.bio-content p{
  color:var(--mocha); max-width:50ch; font-size:1.02rem;
  /* zapobiega overflow przy bardzo długich słowach */
  overflow-wrap:break-word; word-break:break-word;
}

/* vertical-divider stat bar instead of a bordered box — reads as one
   continuous strip of facts rather than a boxed-off "widget". */
.bio-stats{ display:flex; flex-wrap:wrap; gap:.6rem 0; margin:1.8rem 0 2rem; }
.bio-stat{ display:flex; flex-direction:column; padding:0 1.8rem; border-left:1px solid var(--line); min-width:0; }
.bio-stat:first-child{ padding-left:0; border-left:0; }
.bio-stat-num{
  font-family:var(--font-display); font-weight:600; font-size:1.9rem; line-height:1;
  color:var(--gold); background:var(--gold-gradient); background-size:220% auto; background-position:30% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.bio-stat-label{ display:block; font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mocha); margin-top:.4em; max-width:14ch; overflow-wrap:break-word; }

.bio-quote{ grid-column:1/-1; position:relative; z-index:1; margin-top:1rem; }

/* Brand quote blockquote — italic pull-quote with left gold bar */
.bio-brand-quote {
  margin: 1.4rem 0 1.6rem;
  padding: 1rem 0 1rem 1.5rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-style: italic;
  font-weight: 400;
  color: var(--espresso);
  line-height: 1.4;
}
.bio-brand-quote p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  max-width: none;
}


.bio {
  padding: 13rem var(--gutter) 6rem;
}

@media (max-width:900px){
  .bio{ padding:9.5rem var(--gutter) 4rem; }
  .bio-grid{ grid-template-columns:1fr; }
  /* stacked layout: uwalniamy overflow z hidden na visible, aby cienie i nakładające się zdjęcie nie były sztucznie przycinane na krawędziach */
  .bio-visual{
    position: relative;
    width: calc(100% - 2rem);
    max-width: 360px;
    aspect-ratio: 4/5;
    margin: 0 auto 3.5rem;
    overflow: visible;
  }
  .bio-photo-main{ inset: 0; }
  .bio-corner{ display: none; }
  .bio-photo-accent{ width:38%; right:-0.5rem; bottom:-0.8rem; }
  .bio-photo-label{ display: none; }
}
@media (max-width:600px){
  .bio-stats{ flex-wrap:wrap; gap:.4rem 0; }
  .bio-stat{ padding:0 1rem; }
  .bio-stat:first-child{ padding-left:0; }
}
/* Na bardzo małych ekranach (320px) h2 może być za duże */
@media (max-width:400px){
  .bio-content h1, .bio-content h2{ font-size:clamp(1.75rem, 6.5vw, 2.2rem); }
  .bio-brand-quote{ font-size:1.2rem; padding-left:1rem; }
  .bio-stats{ flex-direction:column; gap:.8rem; }
  .bio-stat{ border-left:0; border-top:1px solid var(--line); padding:.8rem 0 0; }
  .bio-stat:first-child{ border-top:0; padding-top:0; }
}

/* ================= APPROACH (About page) — pełna implementacja na dole pliku ================= */
/* Styl sekcji .approach zdefiniowany w bloku "APPROACH (Values)" na dole pliku CSS.
   Używa układu "alternating spine": manifesto jako centred card + 5 wartości
   naprzemiennie wzdłuż złotej pionowej linii. */
/* ================= PROCESS (light cream — 4 numbered steps) ================= */
.process {
  position: relative;
  overflow: hidden;
  padding: 8rem var(--gutter);
  background: rgba(255,253,248,.75);
}

/* centred heading */
.process-top {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto 5.5rem;
  text-align: center;
}
.process-top h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  margin-bottom: .5em;
}
.process-top .eyebrow {
  justify-content: center;
}
.process-top .eyebrow::before { display: none; }
.process-top .lede {
  margin: 0 auto;
}

/* 4-column step row */
.process-steps {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.process-step {
  padding: 0 2.4rem 0 0;
  /* złota linia oddzielająca kolejne kroki */
}
.process-step + .process-step {
  padding: 0 2.4rem 0 2.4rem;
  border-left: 1px solid rgba(42,33,28,.12);
}
.process-step:last-child {
  padding-right: 0;
}

/* duży złoty numer — dekoracyjny, nie dominujący */
.process-step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.8rem, 5vw, 4rem);
  line-height: 1;
  margin-bottom: 1.1rem;
  background: var(--gold-gradient);
  background-size: 220% auto;
  background-position: 30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .45;
  letter-spacing: -.02em;
  transition: opacity .45s var(--ease);
}
/* cienka złota kreska nad numerem */
.process-step-num::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--line-gradient-h);
  margin-bottom: .85rem;
}
.process-step:hover .process-step-num {
  opacity: .85;
}

.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--espresso);
  margin: 0 0 .55em;
  line-height: 1.2;
}
.process-step p {
  font-size: .88rem;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0;
}

/* CTA */
.process-cta {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 4.5rem auto 0;
  text-align: center;
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  .process { padding: 5.5rem var(--gutter); }
  .process-top { margin-bottom: 4rem; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  /* linia pozioma między wierszami */
  .process-step:nth-child(3),
  .process-step:nth-child(4) {
    padding-top: 2.4rem;
    border-top: 1px solid rgba(42,33,28,.12);
  }
  /* 1. i 3. (nieparzyste) — lewy krawędź */
  .process-step:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }
  .process-step:nth-child(even) {
    padding-right: 0;
  }
}

@media (max-width: 560px) {
  .process-steps { grid-template-columns: 1fr; }
  .process-step,
  .process-step + .process-step {
    padding: 2rem 0;
    border-left: none;
    border-top: 1px solid rgba(42,33,28,.1);
  }
  .process-step:first-child { border-top: none; padding-top: 0; }
  .process-step:nth-child(3),
  .process-step:nth-child(4) {
    border-top: 1px solid rgba(42,33,28,.1);
    padding-top: 2rem;
  }
  .process-cta { margin-top: 3rem; }
}


/* ================= SESSIONS (About page — ivory, replaces Team) ================= */
/* Daniella works solo, so the reference template's 3-person team grid
   doesn't apply — client asked for 4 photo links to session categories
   in its place. Deliberately styled differently from the homepage's
   .service-card (reveal-on-hover overlay): a plain always-visible
   caption bar, so it doesn't repeat that component verbatim either. */
.sessions{
  position:relative; overflow:hidden; padding:8rem var(--gutter);
  }
.sessions-head{ position:relative; z-index:1; max-width:640px; margin:0 auto; text-align:center; }
.sessions-head h2{ font-size:clamp(2.1rem,4.2vw,3rem); line-height:1.18; }
.sessions-head .lede{ margin:1em auto 0; }

.sessions-flex {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 4rem auto 0;
  display: flex;
  gap: 1.2rem;
  height: 520px;
  overflow: hidden;
  border-radius: 120px 120px 0 0;
}
.session-flex-card {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 120px 120px 0 0;
  box-shadow: 0 20px 48px -20px rgba(42,33,28,.35);
  border: 1px solid var(--line);
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.35, 1), box-shadow 0.6s ease, border-color 0.6s ease;
  text-decoration: none;
  cursor: pointer;
}
.session-flex-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.35, 1);
}
.session-flex-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20,16,13,.75) 100%);
  transition: background 0.6s ease;
  z-index: 1;
}
.session-flex-content {
  position: relative;
  z-index: 2;
  /* Uniform padding — title sits exactly 1.8rem from left AND from bottom */
  padding: 1.8rem;
  width: 100%;
  transition: transform 0.6s ease;
}
.session-flex-num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(20,16,13,.6);
}
.session-flex-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ivory);
  margin: 0 0 0.5rem;
  font-weight: 500;
  /* Text shadow for readability on bright/light images */
  text-shadow: 0 2px 12px rgba(20,16,13,.65), 0 1px 4px rgba(20,16,13,.5);
}
.session-flex-desc {
  font-size: 0.88rem;
  color: rgba(255, 253, 248, 0.8);
  line-height: 1.5;
  /* max-height collapse so it takes zero layout space when hidden
     — this ensures h3 margin-bottom = content padding-bottom (1.8rem) */
  max-height: 0;
  overflow: hidden;
  margin: 0;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.4s ease, margin 0.4s ease;
}
.session-flex-btn {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  border-bottom: 1px solid rgba(212,175,55,0.4);
  padding-bottom: 2px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.4s ease;
}

/* Hover effects — only on devices that support real hover */
@media (hover: hover) {
  .session-flex-card:hover {
    flex: 2;
    box-shadow: 0 30px 64px -16px rgba(42,33,28,.5), 0 0 20px rgba(212,175,55,0.15);
    border-color: rgba(212,175,55,0.4);
  }
  .session-flex-card:hover .session-flex-bg {
    transform: scale(1.1);
  }
  .session-flex-card:hover .session-flex-overlay {
    background: linear-gradient(180deg, rgba(20,16,13,.15) 30%, rgba(20,16,13,.85) 100%);
  }
  .session-flex-card:hover .session-flex-desc {
    max-height: 120px;
    opacity: 1;
    margin: 0 0 1rem;
    transition-delay: 0.1s;
  }
  .session-flex-card:hover .session-flex-btn {
    max-height: 40px;
    opacity: 1;
    transition-delay: 0.2s;
  }
  .session-flex-card:hover .session-flex-btn:hover {
    color: var(--ivory);
    border-color: var(--ivory);
  }
}

/* Mobile responsive for flex showcase */
@media (max-width: 860px) {
  .sessions-flex {
    flex-direction: column;
    height: auto;
    gap: 1.4rem;
  }
  .session-flex-card {
    height: 200px;
    border-radius: 100px 100px 0 0;
    flex: none;
  }
  .session-flex-desc {
    display: none;
  }
  .session-flex-btn {
    opacity: 1;
    transform: none;
  }
  .session-flex-card:hover {
    flex: none;
  }
}
.sessions-footer-text{
  position:relative; z-index:1; text-align:center; margin:3rem 0 0;
  font-size:.88rem; color:var(--ink-soft);
}
.sessions-footer-text a{ color:var(--gold); font-weight:600; border-bottom:1px solid rgba(212,175,55,.4); }
.sessions-footer-text a:hover{ color:var(--espresso); }

@media (max-width:860px){
  .sessions{ padding:5.5rem var(--gutter); }
}

/* ================= PULL QUOTE (reusable) ================= */
/* A short, centred, italic accent line used to punctuate a section
   without a photo or icon — reused three times on this page (after
   the bio, after "Why clients remember it", after "My style"). Flanked
   by the same short gold rule used in .eyebrow, so it reads as part of
   the same typographic system rather than a one-off. */
.pull-quote{
  position:relative; z-index:1; text-align:center; margin:4.5rem auto 0; max-width:34ch;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,2.8vw,2rem); line-height:1.4; color:var(--espresso);
}
.pull-quote::before{
  content:""; display:block; width:34px; height:1px; margin:0 auto 1.2em;
  background:var(--line-gradient-h);
}
@media (max-width:760px){
  .pull-quote{ margin-top:3rem; }
}

/* ================= MY STYLE (standalone section — Layered Lookbook) ================= */
.style-section{
  position:relative; overflow:hidden; padding:8rem var(--gutter);
  background: rgba(255,253,248,.75);
}
.style-inner{ position:relative; z-index:1; max-width:var(--container); margin:0 auto; }
.style-intro{ text-align:center; max-width:640px; margin:0 auto 3.5rem; }
.mini-divider{
  display:block; width:34px; height:1px; margin:0 auto 1.6em;
  background:var(--line-gradient-h);
}
.style-intro h2{ font-size:clamp(2rem,4vw,2.7rem); line-height:1.15; }
.style-intro .lede{ margin:1em auto 0; }

/* Layered Lookbook — flex layout with negative margins for reliable overlap */
.style-lookbook {
  position: relative;
  z-index: 2;
  margin: 5rem auto 2rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Allows rotated cards to extend vertically without cropping */
  overflow: visible;
}
.style-lookbook-card {
  /* position:relative so layout is in normal flow — no absolute chaos */
  position: relative;
  flex-shrink: 0;
  width: clamp(200px, 22vw, 280px);
  aspect-ratio: 3/4;
  border-radius: var(--radius, 12px);
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(42,33,28,.4);
  border: 1px solid rgba(212,175,55,.14);
  padding: 0;
  background: var(--ivory);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), 
              box-shadow .6s cubic-bezier(.22,.61,.36,1), 
              opacity .5s ease, 
              filter .5s ease,
              z-index 0s,
              border-color .35s ease;
}
.style-lookbook-card .lookbook-img-wrap {
  width: 100%;
  flex: 1;
  overflow: hidden;
  position: relative;
}
.style-lookbook-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
/* LOOKBOOK LABEL — elegant transparent styling floating under each photo */
.style-lookbook-card .lookbook-label {
  padding: 1.1rem 1.4rem;
  background: transparent;
  color: var(--espresso);
  text-align: left;
  border-top: none;
  transition: opacity .35s ease;
}
.lookbook-title {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  margin-bottom: .2em;
  color: var(--espresso);
}
.lookbook-tag {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Tilt & overlap via transform + negative margins — always stays centred */
.style-lookbook-card.card-left {
  transform: rotate(-5deg) translateY(20px);
  z-index: 1;
  margin-right: -50px;
}
.style-lookbook-card.card-center {
  transform: rotate(1.5deg) translateY(-12px);
  z-index: 3;
  margin-top: 10px;
}
.style-lookbook-card.card-right {
  transform: rotate(5deg) translateY(24px);
  z-index: 2;
  margin-left: -50px;
}

/* Hover behaviors — only on real pointer devices */
@media (hover: hover) {
  .style-lookbook-card:hover {
    z-index: 10;
    box-shadow: 0 30px 68px -18px rgba(42,33,28,.65), 0 0 25px rgba(212,175,55,0.25);
    border-color: rgba(212,175,55,0.45);
  }
  .style-lookbook-card:hover img {
    transform: scale(1.08);
  }
  .style-lookbook-card:hover .lookbook-label {
    background: transparent;
  }
  /* Each card straightens and floats up on hover */
  .style-lookbook-card.card-left:hover {
    transform: rotate(0deg) translateY(-10px);
  }
  .style-lookbook-card.card-center:hover {
    transform: rotate(0deg) translateY(-18px);
  }
  .style-lookbook-card.card-right:hover {
    transform: rotate(0deg) translateY(-10px);
  }
  /* Non-hovered cards recede */
  .style-lookbook:hover .style-lookbook-card:not(:hover) {
    opacity: 0.6;
    filter: blur(1.5px) grayscale(15%);
  }
}

@media (max-width: 860px) {
  .style-section { padding: 5.5rem var(--gutter); }
  .style-lookbook {
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    margin: 3.5rem auto 1.5rem;
    padding-bottom: 0;
  }
  .style-lookbook-card {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 3/4;
    box-shadow: 0 15px 32px rgba(42,33,28,.15);
  }
  .style-lookbook-card:hover {
    transform: translateY(-8px) !important;
  }
  .style-lookbook:hover .style-lookbook-card:not(:hover) {
    opacity: 1;
    filter: none;
  }
}

/* ================= PROCESS DARK SECTION ================= */
/*
  Dark espresso break — shatters the beige soup.
  2×2 grid with large gold numbers and generous whitespace.
  Background: var(--espresso). Text: var(--ivory).
*/
.process-dark {
  position: relative;
  overflow: hidden;
  padding: 9rem var(--gutter);
  background: var(--espresso);
  color: var(--ivory);
}
/* subtle gold radial glow from corners */
.process-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 500px at -5% 110%, rgba(212,175,55,.10), transparent 60%);
  pointer-events: none;
}
.process-dark-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
}
.process-dark-head {
  text-align: center;
  margin-bottom: 5rem;
}
.process-dark-head .eyebrow {
  color: var(--champagne-gold);
  justify-content: center;
}
.process-dark-head .eyebrow::before {
  background: var(--champagne-gold);
}
.process-dark-head h2 {
  color: var(--ivory);
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin-bottom: .4em;
}
.process-dark-head h2 em {
  color: var(--gold);
  font-style: italic;
}
.process-dark-head .lede {
  color: rgba(255,253,248,.68);
  margin: 0 auto;
  max-width: 52ch;
  text-align: center;
}

/* 2×2 grid */
.process-dark-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem 6.5rem;
  max-width: 960px;
  margin: 0 auto;
}
.process-dark-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  transition: transform .45s var(--ease);
  position: relative;
}
.process-dark-step::before {
  display: none;
}
.process-dark-step:hover {
  border: none;
  background: transparent;
  transform: translateY(-5px);
}
.process-dark-step:hover::before {
  display: none;
}
/* Large gold step number */
.process-dark-num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 6.5rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  letter-spacing: -.02em;
  opacity: .5;
  transition: opacity .45s var(--ease), -webkit-text-stroke-color .45s var(--ease);
  margin-bottom: -0.5rem;
}
.process-dark-step:hover .process-dark-num {
  opacity: 1;
  -webkit-text-stroke-color: var(--gold-light);
}
.process-dark-step h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--ivory);
  margin: 0;
  line-height: 1.25;
}
.process-dark-step h3 .script {
  font-family: var(--font-script);
  font-size: 2rem;
  font-weight: 400;
  color: var(--gold);
  display: inline-block;
  margin-right: 0.5rem;
  margin-bottom: 0;
}
.process-dark-step p {
  font-size: .94rem;
  line-height: 1.8;
  color: rgba(255,253,248,.65);
  margin: 0;
}

/* Stagger animation delays */
.process-dark-step:nth-child(1) { transition-delay: .05s; }
.process-dark-step:nth-child(2) { transition-delay: .15s; }
.process-dark-step:nth-child(3) { transition-delay: .25s; }
.process-dark-step:nth-child(4) { transition-delay: .35s; }

@media (max-width: 760px) {
  .process-dark { padding: 5.5rem var(--gutter); }
  .process-dark-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .process-dark-step { padding: 0; }
  .process-dark-head { margin-bottom: 3.5rem; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .process-dark-grid { gap: 3rem 4rem; }
}

/* ================= EDUCATION SECTION (E-E-A-T pillar + Local SEO) ================= */
.education-section {
  position: relative;
  overflow: hidden;
  padding: 8rem var(--gutter);
  }
.education-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.education-inner h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.18;
  margin: 0.8rem 0 1.4rem;
}
.education-inner p {
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  line-height: 1.75;
  color: var(--ink);
  max-width: 62ch;
  margin: 0 auto 1.2rem;
}
.education-inner p:last-of-type {
  color: var(--ink-soft);
  margin-bottom: 2.4rem;
}
.education-inner strong {
  color: var(--espresso);
}
/* Arc image — wide photo with arch top, closing the E-E-A-T architecture */
.education-arc-wrap {
  margin: 3.5rem auto 0;
  max-width: 680px;
  position: relative;
}
.education-arc-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 200px 200px 0 0;
  display: block;
  box-shadow: 0 32px 64px -24px rgba(42,33,28,.28);
}
/* gold overlay shimmer on the arc image */
.education-arc-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 200px 200px 0 0;
  background: linear-gradient(to bottom, rgba(212,175,55,.06) 0%, transparent 40%);
  pointer-events: none;
}
@media (max-width: 760px) {
  .education-section { padding: 5.5rem var(--gutter); }
  .education-arc-img { border-radius: 120px 120px 0 0; }
}

/* FAQ — soft ivory background */
.faq{
  position:relative; overflow:hidden; padding:8rem var(--gutter);
  background: #FAF6F0; /* Soft luxury ivory background */
}
.faq-inner{ position:relative; z-index:1; max-width:820px; margin:0 auto; }
.faq-head{ text-align:center; margin-bottom:3.5rem; }
.faq-head h2{ font-size:clamp(2.1rem,4.2vw,3.1rem); line-height:1.15; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); padding:1.6rem 0; }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  font-family:var(--font-display); font-size:1.2rem; color:var(--espresso);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-toggle{ position:relative; flex:none; width:20px; height:20px; }
.faq-toggle::before, .faq-toggle::after{
  content:""; position:absolute; background:var(--gold); border-radius:1px;
}
.faq-toggle::before{ left:0; top:50%; width:100%; height:1px; transform:translateY(-50%); }
.faq-toggle::after{ top:0; left:50%; width:1px; height:100%; transform:translateX(-50%); transition:opacity .2s ease; }
.faq-item[open] .faq-toggle::after{ opacity:0; }
.faq-item p{ margin:1rem 0 0; color:var(--ink-soft); font-size:.95rem; line-height:1.75; max-width:60ch; }

@media (max-width:860px){
  .faq{ padding:5.5rem var(--gutter); }
  .faq-item summary{ font-size:1.05rem; }
}

/* ================= CONTACT PAGE (contact.html) =================
   Structurally distinct from About: form + dark floating info card on
   a light section, then a framed map, then the shared testimonials
   marquee, then a CTA pointing at the gallery instead of "book" (this
   whole page already IS the booking step, so its own closing CTA
   offers a different next action). */
.contact{
  position:relative; overflow:hidden; padding:8rem var(--gutter);
  background: rgba(255,253,248,.75);
}
.contact-grid{
  position:relative; z-index:1; max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start;
}
.contact-intro{ max-width:520px; margin-bottom:2.6rem; }
.contact-intro h2{ font-size:clamp(2.1rem,4.2vw,3rem); line-height:1.16; }
.contact-intro .lede{ margin:1em 0 0; }

.contact-form{ display:grid; gap:1.2rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group{ display:flex; flex-direction:column; gap:.5rem; }
.form-group label{
  font-family:var(--font-body); font-size:.68rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--mocha);
}
.contact-form input, .contact-form select, .contact-form textarea{
  font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  padding:.95em 1.1em; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--ivory); transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  width:100%;
}
.contact-form textarea{ resize:vertical; min-height:130px; font-family:inherit; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.15);
}
.contact-form-note{ font-size:.8rem; color:var(--ink-soft); margin:0; }
.contact-form-status{
  font-size:.82rem; color:var(--gold-deep); margin:0; opacity:0; height:0; overflow:hidden;
  transition:opacity .3s var(--ease);
}
.contact-form-status.is-visible{ opacity:1; height:auto; }

.contact-info-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  padding:3rem 2.4rem; color:var(--ivory);
  background:linear-gradient(155deg, #1c1512 0%, #241a14 50%, #2a1e17 100%);
  box-shadow:0 40px 70px -30px rgba(42,33,28,.4);
}
.contact-info-card h3{ font-family:var(--font-display); font-size:1.5rem; margin:0 0 .3em; }
.contact-info-card > p{ color:rgba(255,253,248,.78); font-size:.92rem; line-height:1.6; margin:0 0 2.2rem; }
.contact-info-list{ display:grid; gap:1.5rem; margin-bottom:2.2rem; }
.contact-info-item{ display:flex; gap:1rem; align-items:flex-start; }
.contact-info-ico{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(212,175,55,.5); color:var(--gold);
}
.contact-info-ico svg{ width:17px; height:17px; }
.contact-info-item a, .contact-info-item span{ color:rgba(255,253,248,.92); font-size:.92rem; line-height:1.55; }
.contact-info-item a{ transition:color .3s; }
.contact-info-item a:hover{ color:var(--gold-light); }
.contact-socials{ display:flex; gap:.8rem; padding-top:1.8rem; border-top:1px solid rgba(255,253,248,.14); }
.contact-socials a{
  width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,253,248,.3); color:var(--ivory); transition:background .3s, border-color .3s, color .3s;
}
.contact-socials a:hover{ background:var(--gold); border-color:var(--gold); color:var(--black); }

@media (max-width:900px){
  .contact{ padding:5.5rem var(--gutter); }
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ---- Map (cream, continues the alternation after .contact-ivory...
   see comment above .faq for the page's own colour order) ---- */
.contact-map{
  position:relative; overflow:hidden; padding:8rem var(--gutter);
  }
.map-inner{ position:relative; z-index:1; max-width:var(--container); margin:0 auto; }
.map-head{ text-align:center; max-width:560px; margin:0 auto 3rem; }
.map-head h2{ font-size:clamp(2rem,4vw,2.7rem); line-height:1.15; }
.map-frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(212,175,55,.35);
  box-shadow:0 40px 70px -30px rgba(42,33,28,.35);
}
.map-frame iframe{ width:100%; height:420px; display:block; border:0; }
.map-caption{ text-align:center; margin:1.6rem 0 0; color:var(--ink-soft); font-size:.9rem; }

@media (max-width:860px){
  .contact-map{ padding:5.5rem var(--gutter); }
  .map-frame iframe{ height:320px; }
}

/* No .testimonials override needed on this page: v99 made .approach a
   light (cream) section instead of a dark break, so the light run now
   spans Bio→Testimonials in one unbroken alternation: Bio(ivory)
   Approach(cream) Process(ivory) Sessions(cream) Style(ivory) FAQ(cream)
   Testimonials(ivory — its sitewide default, no override required) /
   [dark CTA]. Only .page-header and .cta-band are dark on this page now. */

/* ================= CUSTOM BRAND STYLES (Mood Board Alignment) ================= */
.font-script {
  font-family: var(--font-script);
  font-style: normal;
}

.bio-brand-quote {
  /* Override global blockquote styling */
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  flex: auto;
  display: block;

  position: relative;
  margin: 2.2rem 0;
  padding: 0.8rem 0 0.8rem 1.6rem;
  border-left: 2px solid var(--champagne-gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--espresso);
}

.process-checklist-card {
  margin-top: 3.5rem;
  padding: 2.5rem;
  background: var(--ivory);
  border: 1px solid var(--champagne-gold);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -18px rgba(42,33,28,.15);
}

.process-checklist-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--espresso);
  margin-bottom: 1.6rem;
  text-align: center;
}

.process-checklist-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.process-checklist-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.process-checklist-card li strong {
  color: var(--espresso);
  font-weight: 600;
}

.process-checklist-card .check-ico {
  color: var(--champagne-gold);
  font-size: 1.05rem;
  line-height: 1;
  flex: none;
}

.brand-strip {
  background: var(--espresso);
  color: var(--champagne-gold);
  padding: 2.5rem var(--gutter);
  text-align: center;
  border-top: 1px solid var(--champagne-gold);
}

.brand-strip-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.brand-strip-sep {
  opacity: 0.5;
  font-size: 0.72rem;
}

.brand-strip-heart {
  color: var(--champagne-gold);
  font-size: 1rem;
  margin-left: 0.5rem;
}

@media (max-width: 760px) {
  .brand-strip-inner {
    gap: 1rem;
    font-size: 0.74rem;
  }
}

/* ================= APPROACH (Values) ================= */
/*
  Układ "alternating spine":
  - Manifesto na pełną szerokość u góry (eliminuje problem asymetrii kolumn)
  - 5 wartości ułożonych naprzemiennie wzdłuż centralnej złotej linii (spine)
  - Nieparzyste: ikona po lewej, tekst po prawej
  - Parzyste:   tekst po lewej, ikona po prawej
  - Nie ma żadnych "leveled columns" do wyrównywania — każdy rząd
    jest niezależny i ma własną naturalną wysokość.
*/
.approach {
  position: relative;
  overflow: hidden;
  padding: 8rem var(--gutter);
  background: var(--cream);
}

/* ---- sekcja nagłówka ---- */
.approach-head {
  position: relative;
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 5rem;
}
.approach-head h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  margin-bottom: .5em;
}
.approach-head .eyebrow {
  justify-content: center;
}
.approach-head .eyebrow::before {
  display: none;
}
.approach-head .lede {
  margin: 0 auto;
  text-align: center;
}

/* ---- manifesto (My Story) ---- */
.approach-manifesto {
  position: relative;
  max-width: 780px;
  margin: 0 auto 5.5rem;
  padding: 3.2rem 3.6rem;
  background: var(--ivory);
  border: 1px solid rgba(212,175,55,.28);
  text-align: center;
}
/* złota linia górna */
.approach-manifesto::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--gold-gradient);
}
/* złota linia dolna */
.approach-manifesto::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold-gradient);
}
.approach-manifesto h3 {
  font-family: var(--font-script);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: .6em;
  line-height: 1;
}
.manifesto-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--mocha);
  max-width: 52ch;
  margin: 0 auto 1.4em;
}
.manifesto-sig {
  display: block;
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--espresso);
  opacity: .75;
  line-height: 1;
}

/* ---- EDITORIAL GRID (replaces the old timeline spine) ---- */
/* Clean 2-column asymmetric grid: icon left, text right — no vertical line, no nodes, no boxed cards */
.approach-list {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem 6rem;
}

/* ---- pojedynczy item wartości ---- */
.approach-list-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.8rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  transition: transform .45s var(--ease);
}
.approach-list-item:hover {
  transform: translateY(-4px);
}
.approach-list-item::before {
  display: none;
}

/* ikona — elegancki krąg po lewej stronie */
.approach-list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid rgba(212,175,55,.35);
  color: var(--mocha);
  flex: none;
  box-shadow: 0 8px 20px -8px rgba(212,175,55,.2);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .35s, color .35s;
}
.approach-list-item:hover .approach-list-icon {
  transform: scale(1.08);
  box-shadow: 0 12px 24px -8px rgba(212,175,55,.45);
  background: var(--espresso);
  color: var(--champagne-gold);
  border-color: var(--gold);
}
.approach-list-icon svg {
  width: 22px;
  height: 22px;
}

/* content — zawsze obok ikony */
.approach-list-content {
  flex: 1;
  text-align: left;
}

.approach-list-content h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: .45em;
  color: var(--espresso);
}
.approach-list-content h4 .script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.65rem;
  line-height: .85;
  color: var(--gold);
  display: inline-block;
}
.approach-list-content p {
  font-size: .92rem;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0;
}

/* ---- mobile ---- */
@media (max-width: 760px) {
  .approach { padding: 5rem var(--gutter); }
  .approach-list {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }
  .approach-manifesto {
    padding: 2.2rem 1.6rem;
    margin-bottom: 3.5rem;
  }
  .manifesto-text { font-size: 1.05rem; }
  .approach-list-item {
    gap: 1.2rem;
  }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .approach-list {
    gap: 3.5rem 4rem;
  }
}

/* ================= PREMIUM GLAMOUR & GOLD UPGRADES ================= */

/* Glamour Shimmer sweep on cards */
.glamour-shimmer {
  position: relative;
  overflow: hidden;
}
.glamour-shimmer::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(212, 175, 55, 0.18) 30%,
    rgba(255, 253, 248, 0.35) 50%,
    rgba(212, 175, 55, 0.18) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
  pointer-events: none;
  z-index: 5;
}
.glamour-shimmer:hover::after {
  left: 150%;
  transition: left 1.4s cubic-bezier(.22,.61,.36,1);
}

/* Staggered load-in animation delays for .approach and .process */
.approach-list-item:nth-child(1) { transition-delay: .05s; }
.approach-list-item:nth-child(2) { transition-delay: .15s; }
.approach-list-item:nth-child(3) { transition-delay: .25s; }
.approach-list-item:nth-child(4) { transition-delay: .35s; }
.approach-list-item:nth-child(5) { transition-delay: .45s; }

.process-step:nth-child(1) { transition-delay: .05s; }
.process-step:nth-child(2) { transition-delay: .15s; }
.process-step:nth-child(3) { transition-delay: .25s; }
.process-step:nth-child(4) { transition-delay: .35s; }

/* Dynamic gold text glow on hover */
.approach-list-item:hover .approach-list-content h4 {
  color: var(--gold);
}
.approach-list-item:hover .approach-list-content h4 .script {
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
  transform: scale(1.03);
}
.approach-list-content h4 .script {
  transition: transform .35s var(--ease), text-shadow .35s var(--ease);
}

/* Upgrade process step numbers with hover text-shadow gold glow */
.process-step:hover .process-step-num {
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.35);
  transform: scale(1.05) translateY(-2px);
}
.process-step-num {
  transition: transform .45s var(--ease), opacity .45s var(--ease), text-shadow .45s var(--ease);
}

/* Elegant gold particle "gold dust" background layer */
.has-gold-dust {
  position: relative;
}
.gold-dust-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.gold-dust {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
    opacity: 0;
  will-change: transform, opacity;
  animation: floatGoldDust 14s linear infinite;
}
.gold-dust.sparkle {
  background: none !important;
  color: rgba(212,175,55,0.7);
  font-family: serif;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gold-dust.sparkle::before {
  content: "✦";
}

@keyframes floatGoldDust {
  0% {
    transform: translateY(120px) translateX(0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.55;
  }
  85% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(-160px) translateX(45px) scale(0.9) rotate(180deg);
    opacity: 0;
  }
}

/* Smooth zoom effect on portrait page sections */
.bio-photo-main img, .bio-photo-accent img, .session-card img, .style-card img {
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.bio-photo-main:hover img {
  transform: scale(1.36);
}
.bio-photo-accent:hover img {
  transform: scale(1.08) rotate(1deg);
}

/* Smooth active-glowing headers */
.about-signature:hover .script {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}
.about-signature .script {
  transition: color .4s, text-shadow .4s;
}

/* Extra delicate golden dot next to em accents inside titles on hover */
h2:hover em {
  text-shadow: 0 0 8px rgba(212,175,55,0.25);
}

/* ================= MY STYLE — Editorial Lookbook ================= */
.style-section {
  background: var(--ivory);
  padding: clamp(5rem, 10vw, 9rem) 0;
  overflow: hidden;
  position: relative;
}
.style-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.style-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.style-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  color: var(--espresso);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.style-intro .lede {
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  color: var(--mocha);
  line-height: 1.75;
  max-width: 52ch;
  margin: 0 auto;
}

/* Lookbook grid — 3 staggered editorial cards */
.style-lookbook {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: end;
}
.style-lookbook-card {
  position: relative;
  display: block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
/* Middle card taller — editorial stagger */
.style-lookbook-card.card-center {
  transform: translateY(-2rem);
}
.style-lookbook-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 30px 60px -15px rgba(42, 33, 28, 0.25);
}
.style-lookbook-card.card-center:hover {
  transform: translateY(calc(-2rem - 4px)) scale(1.01);
}
.lookbook-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
}
.lookbook-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  display: block;
}
.style-lookbook-card:hover .lookbook-img-wrap img {
  transform: scale(1.06);
}
/* Scrim overlay on each card */
.lookbook-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42,33,28,0.7) 0%, transparent 50%);
  transition: opacity 0.4s ease;
  border-radius: 4px;
}
/* Label at bottom of each card */
.lookbook-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.4rem 1.2rem 1.2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.lookbook-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.lookbook-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
}

@media (max-width: 760px) {
  .style-lookbook {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
  .style-lookbook-card.card-center {
    transform: none;
    grid-column: span 2;
    max-width: 60%;
    margin: 0 auto;
  }
  .style-lookbook-card.card-center:hover {
    transform: translateY(-4px) scale(1.01);
  }
  .style-lookbook-card.card-right {
    display: none; /* uproszczony mobile: 2 karty */
  }
}

/* ================= APPROACH ================= */
.approach {
  background: var(--cream);
  padding: clamp(5rem, 10vw, 9rem) 0;
  position: relative;
}
.approach-head {
  max-width: var(--container);
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding: 0 var(--gutter);
  position: relative;
}
.approach-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  color: var(--espresso);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.approach-head .lede {
  color: var(--mocha);
  max-width: 52ch;
}
.approach-manifesto {
  max-width: var(--container);
  margin: 0 auto 3.5rem;
  padding: 2.5rem 2rem 2.5rem var(--gutter);
  border-left: 2px solid var(--gold);
  background: rgba(212,175,55,0.04);
  border-radius: 0 8px 8px 0;
}
.approach-manifesto h3 {
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.manifesto-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--espresso);
  margin-bottom: 1rem;
}
.manifesto-sig {
  display: block;
  font-size: 1.2rem;
  color: var(--mocha);
}
.approach-list {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 4rem;
}
.approach-list-item {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
}
.approach-list-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 50%;
  padding: 8px;
}
.approach-list-icon svg {
  width: 22px;
  height: 22px;
}
.approach-list-content h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: 0.4rem;
  transition: color 0.35s;
}
.approach-list-content p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mocha);
}
@media (max-width: 760px) {
  .approach-list { grid-template-columns: 1fr; gap: 2rem; }
}

/* ================= PROCESS DARK ================= */
.process-dark {
  background: var(--espresso);
  color: var(--ivory);
  padding: clamp(5rem, 10vw, 9rem) 0;
  position: relative;
}
.process-dark-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.process-dark-head {
  text-align: center;
  max-width: 580px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.process-dark-head .eyebrow {
  color: var(--gold);
}
.process-dark-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.process-dark-head h2 em { color: var(--gold); font-style: italic; }
.process-dark-head .lede {
  color: rgba(255,253,248,0.75);
  max-width: 48ch;
  margin: 0 auto;
}
.process-dark-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 1;
}
.process-dark-step {
  border-top: 1px solid rgba(212,175,55,0.3);
  padding-top: 1.8rem;
  transition: border-color 0.4s;
}
.process-dark-step:hover { border-color: var(--gold); }
.process-dark-num {
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(212,175,55,0.25);
  line-height: 1;
  margin-bottom: 1.2rem;
  transition: color 0.4s;
}
.process-dark-step:hover .process-dark-num { color: rgba(212,175,55,0.55); }
.process-dark-step h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ivory);
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.process-dark-step h3 .script {
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1.2;
}
.process-dark-step p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255,253,248,0.7);
}
@media (max-width: 900px) {
  .process-dark-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
}
@media (max-width: 500px) {
  .process-dark-grid { grid-template-columns: 1fr; }
}

/* ================= EDUCATION SECTION ================= */
.education-section {
  background: var(--ivory);
  padding: clamp(5rem, 10vw, 9rem) 0;
  position: relative;
}
.education-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
  position: relative;
}
.education-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
  color: var(--espresso);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}
.education-inner h2 em { color: var(--gold); font-style: italic; }
.education-inner p {
  color: var(--mocha);
  max-width: 60ch;
  margin: 0 auto 1.2rem;
  line-height: 1.75;
}
.education-inner .btn { margin-bottom: 3rem; }
.education-arc-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 70px -20px rgba(42,33,28,0.2);
}
.education-arc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.22,1,0.36,1);
}
.education-arc-wrap:hover .education-arc-img {
  transform: scale(1.03);
}

/* ================= 2026 LUXURY INTERACTIVE EFFECTS ================= */

/* Spotlight mouse-following gradient for Dark Process section */
.process-dark {
  position: relative;
}
.process-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: background: radial-gradient(550px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px), rgba(212,175,55,0.08) 0%, rgba(212,175,55,0) 80%);
  pointer-events: none;
  z-index: 0;
}

/* Luxury curtain-reveal for images — resets generic reveal overrides */
.reveal-img.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.reveal-img {
  overflow: hidden;
  position: relative;
}
.reveal-img img {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s ease;
  will-change: clip-path, opacity;
}
.reveal-img.is-visible img {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* Luxury clip-reveal for headlines — replaced with a bulletproof fade-up
   because clip-path on multiline text is buggy in Safari/iOS and can
   cause permanent hiding. */
.reveal-mask.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.reveal-mask.reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ================= THE MANIFESTO ================= */
.manifesto-page {
  background: var(--ivory);
  color: var(--espresso);
}

/* 1. The Prologue (Editorial Hero) */
@layer base {
    :root {
        --color-ivory: #FFFDF8;
        --color-cream: #F7F2EB;
        --color-espresso: #4A3428;
        --color-black: #1F1F1F;
        --color-gold: #C8AA7D;
        --color-line: rgba(74, 52, 40, 0.12);

        --font-serif: 'Cormorant Garamond', serif;
        --font-sans: 'Montserrat', sans-serif;

        --gutter: clamp(1.5rem, 5vw, 5rem);
        --max-width: 1320px;
    }
}

/* Stylizacja Sekcji Hero */
.hero-editorial {
    position: relative;
    height: 100svh;
    width: 100%;
    background: radial-gradient(circle at 30% 0%, var(--color-ivory) 0%, var(--color-cream) 100%);
    padding: 11rem var(--gutter) 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;

    & .hero-wrapper {
        display: grid;
        grid-template-columns: 5.5fr 4.5fr;
        gap: clamp(3rem, 6vw, 6rem);
        max-width: var(--max-width);
        width: 100%;
        margin: auto;
        align-items: center;
    }

    & .hero-block-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-right: clamp(1rem, 3vw, 3rem);

        & .kicker-wrap {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;

            & .kicker-line {
                width: 40px;
                height: 1px;
                background-color: var(--color-gold);
            }

            & .kicker-text {
                font-family: var(--font-sans);
                font-size: 0.65rem;
                font-weight: 400;
                text-transform: uppercase;
                letter-spacing: 0.3em;
                color: var(--color-mocha);
            }
        }

        & .hero-headline {
            font-family: var(--font-serif);
            font-size: clamp(2.4rem, 4.5vw, 4.2rem);
            font-weight: 300;
            line-height: 1.15;
            color: var(--color-black);
            letter-spacing: -0.02em;
            margin-bottom: 2rem;
            text-wrap: balance;

            & .text-serif-accent {
                font-style: italic;
                color: var(--color-gold);
                font-family: var(--font-serif);
            }
        }

        & .hero-description {
            font-family: var(--font-sans);
            font-size: clamp(0.85rem, 1vw, 1rem);
            font-weight: 300;
            line-height: 1.8;
            color: var(--color-mocha);
            max-width: 44ch;
            border-left: 1px solid var(--color-line);
            padding-left: 1.5rem;
            margin-bottom: 3rem;
        }
    }

    /* Prawa kolumna - Obraz */
    & .hero-block-right {
        width: 100%;

        & .hero-figure {
            position: relative;
            width: 100%;
            aspect-ratio: 3 / 4;
            overflow: hidden;
            background-color: var(--color-cream);
            
            /* Animacja odsłonięcia maski na wejście (Shutter Effect) */
            clip-path: inset(0 100% 0 0);
            transition: clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1);

            &.is-revealed {
                clip-path: inset(0 0 0 0);
            }
        }

        & .hero-img-parallax {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transform: scale(1.08);
            will-change: transform;
            transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
    }

    /* Przycisk Premium (Ghost Button) */
    & .btn-ghost-luxury {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1.2rem 3rem;
        border: 1px solid var(--color-gold);
        background: transparent;
        overflow: hidden;
        text-decoration: none;
        cursor: pointer;

        & .btn-text {
            font-family: var(--font-sans);
            font-size: 0.75rem;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--color-black);
            position: relative;
            z-index: 2;
            transition: color 0.4s ease;
        }

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background-color: var(--color-gold);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1;
        }

        &:hover::before {
            transform: scaleX(1);
        }

        &:hover .btn-text {
            color: var(--color-ivory);
        }
    }

    /* Scroll Indicator */
    & .scroll-indicator-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding-bottom: 2rem;
        width: 100%;

        & .scroll-label {
            font-family: var(--font-sans);
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.3em;
            color: var(--color-taupe, #A59C94);
        }

        & .scroll-line-container {
            width: 1px;
            height: 50px;
            background-color: rgba(74, 52, 40, 0.15);
            position: relative;
            overflow: hidden;

            & .scroll-line-active {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 40%;
                background-color: var(--color-gold);
                animation: luxuryScroll 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
            }
        }
    }
}

@keyframes luxuryScroll {
    0% { transform: translateY(-100%); }
    50% { transform: translateY(100%); }
    100% { transform: translateY(260%); }
}

/* RESPONSIVE BREAKPOINT (Tablet i Mobile) */
@media (max-width: 900px) {
    .hero-editorial {
        height: auto;
        min-height: 100svh;
        padding-top: 7rem;
        padding-bottom: 3rem;

        & .hero-wrapper {
            grid-template-columns: 1fr;
            gap: 4rem;
        }

        & .hero-block-left {
            padding-right: 0;
            order: 2;
        }

        & .hero-block-right {
            order: 1;
            max-width: 500px;
            margin: 0 auto;
        }

        & .scroll-indicator-wrap {
            display: none; /* Ukrywamy indykator na mobile dla oczyszczenia ekranu */
        }
    }
}

/* 2. The Core */
.manifesto-core {
  padding: 6rem var(--gutter);
  background: var(--cream);
}
.core-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 240px;
  border: 1px solid rgba(212,175,55,0.3); /* hairline gold/mocha */
}
.core-cell {
  position: relative;
  padding: 3rem;
  border: 1px solid rgba(212,175,55,0.3);
  margin: -1px 0 0 -1px; /* Hairline collapse */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  transition: background 0.5s ease;
}
.core-cell:hover {
  background: rgba(212,175,55,0.05); /* subtle glow */
}
.core-num {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.core-cell h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 400;
  color: var(--espresso);
}

/* 3. The Authority */
.manifesto-authority {
  padding: 10rem var(--gutter);
}
.authority-content {
  max-width: 600px;
  margin: 0 auto;
}
.authority-text {
  position: relative;
  padding-left: 2rem;
}
.authority-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 50px;
  background: var(--mocha);
}
.authority-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--espresso);
  max-width: 55ch;
  margin: 0 auto;
}
.authority-quote {
  margin-top: 5rem;
  text-align: center;
}
.authority-quote p {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-style: italic;
  color: var(--espresso);
  line-height: 1.3;
}

/* 4. The Curation */
.manifesto-curation {
  padding: 4rem var(--gutter) 10rem;
  background: var(--ivory);
}
.curation-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: center;
}
.curation-center {
  transform: translateY(12%);
}
.curation-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.curation-img-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--ink);
  /* Force GPU composite layer for this container to prevent scroll repaint */
  transform: translateZ(0);
}
.curation-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
  transform: translateZ(0);
}
.curation-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.25;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.curation-card:hover .curation-img-wrap img {
  transform: scale(1.03) translateZ(0);
}
.curation-card:hover .curation-img-wrap::after {
  opacity: 0;
}
.curation-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3rem 2rem 2rem;
  background: linear-gradient(to top, rgba(42,33,28,0.8), transparent);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.curation-card:hover .curation-title {
  opacity: 1;
}

/* 5. The Whisper Wall */
.manifesto-whispers {
  padding: 8rem var(--gutter) 12rem;
  background: var(--cream);
}
.whispers-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 5rem;
  align-items: start;
}
.whisper-card {
  margin-bottom: 5rem;
  position: relative;
}
.whisper-card::before {
  content: "“";
  position: absolute;
  left: -2.5rem;
  top: -1.5rem;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--gold);
  opacity: 0.3;
  line-height: 1;
}
.whisper-card p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--espresso);
  margin-bottom: 1.5rem;
}
.whisper-card cite {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--mocha);
}
.whisper-offset {
  margin-top: 4rem;
}

/* 6. The Exit */
.manifesto-exit {
  background: var(--espresso); /* Soft Black fallback */
  padding: 14rem var(--gutter);
  text-align: center;
}
.exit-content {
  max-width: 800px;
  margin: 0 auto;
}
.manifesto-exit h2 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  color: var(--ivory);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 4rem;
}
.btn-luxury {
  display: inline-block;
  padding: 1.4rem 4rem;
  border: 1px solid var(--gold);
  color: var(--ivory);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  transition: background 0.4s ease, color 0.4s ease;
  text-decoration: none;
}
.btn-luxury:hover {
  background: var(--gold);
  color: var(--espresso);
}

/* Responsive Manifesto */
@media (max-width: 1024px) {
  .prologue-grid { gap: 3rem; }
  .curation-grid { gap: 1rem; }
}
@media (max-width: 768px) {
  .prologue-grid { grid-template-columns: 1fr; }
  .prologue-left { max-width: 400px; margin: 0 auto; }
  .curation-grid { grid-template-columns: 1fr; gap: 4rem; }
  .curation-center { transform: none; }
  .whispers-grid { column-count: 1; }
  .core-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EDITORIAL EXPERIENCE SECTION ("Why clients remember it")
   ============================================================ */
.experience-section {
  position: relative;
  padding: 8rem var(--gutter) 11rem; /* Added bottom padding to accommodate staggered offset */
  background: #FAF6F0; /* Soft luxury ivory background */
  color: var(--ink);
  overflow: hidden;
}
/* Glowing background blobs for 3D depth */
.experience-glow-blob-1 {
  position: absolute;
  top: 15%; left: 5%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}
.experience-glow-blob-2 {
  position: absolute;
  bottom: 15%; right: 5%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(182, 152, 134, 0.12) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}
.experience-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.experience-header {
  text-align: center;
  margin-bottom: 6rem;
}
.experience-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight: 300;
  color: var(--espresso);
  line-height: 1.2;
  margin: 0;
}
.experience-grid-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .experience-grid-editorial {
    grid-template-columns: 1fr 1fr;
    gap: 5rem 3.5rem;
  }
}
.experience-editorial-item {
  background: #FFFFFF; /* Crisp pure white card contrast */
  border: 1px solid rgba(212, 175, 55, 0.35); /* champagne-gold line */
  border-radius: 4px;
  padding: 3rem 2.5rem;
  box-shadow: 0 15px 35px -15px rgba(74, 52, 40, 0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease, 
              background-color 0.4s ease, 
              box-shadow 0.5s ease;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) {
  .experience-editorial-item:nth-child(even) {
    transform: translateY(3.5rem);
  }
  .experience-editorial-item:nth-child(even):hover {
    background-color: #FFFDF8;
    border-color: var(--gold);
    transform: translateY(calc(3.5rem - 6px));
    box-shadow: 0 25px 50px -15px rgba(74, 52, 40, 0.12),
                0 0 25px rgba(212, 175, 55, 0.08);
  }
  .experience-editorial-item:nth-child(odd) {
    transform: translateY(0);
  }
  .experience-editorial-item:nth-child(odd):hover {
    background-color: #FFFDF8;
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow: 0 25px 50px -15px rgba(74, 52, 40, 0.12),
                0 0 25px rgba(212, 175, 55, 0.08);
  }
}
@media (max-width: 767px) {
  .experience-editorial-item:hover {
    background-color: #FFFDF8;
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(74, 52, 40, 0.08);
  }
}
.experience-header-group {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.experience-icon-wrapper {
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: transform 0.4s ease, opacity 0.4s ease;
  flex-shrink: 0;
}
.experience-editorial-item:hover .experience-icon-wrapper {
  transform: scale(1.1);
  opacity: 1;
}
.experience-title-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.experience-num {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--taupe);
  letter-spacing: 0.1em;
  line-height: 1;
}
.experience-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 400;
  color: var(--espresso);
  margin: 0;
  line-height: 1.2;
}
.experience-desc {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.02rem);
  line-height: 1.75;
  color: #4A3428; /* High-contrast crystal clear mocha text */
  font-weight: 300;
  margin: 0;
  max-width: 48ch;
}
.experience-footer {
  text-align: center;
  margin-top: 8rem; /* Pushed down to compensate for staggered elements */
}
.experience-footer h4 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 300;
  color: var(--espresso);
  margin-bottom: 0.5rem;
}
.experience-footer p {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--taupe);
  margin: 0;
}


/* ============================================================
   SCATTERED EDITORIAL GALLERY ("Fragments of real stories")
   ============================================================ */
.scattered-gallery-section {
  position: relative;
  padding: 8rem var(--gutter) 11rem;
  background: #FFFFFF; /* Pure crisp white background for gallery contrast */
  overflow: hidden;
}
.scattered-gallery-header {
  text-align: center;
  margin-bottom: 5rem;
}
.scattered-gallery-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight: 300;
  color: var(--espresso);
  line-height: 1.2;
  margin: 0;
}
.scattered-gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  height: 600px; /* space for desktop absolute positioning */
}
.scattered-photo {
  position: absolute;
  background: #ffffff;
  padding: 0.9rem 0.9rem 2.2rem;
  box-shadow: 0 12px 32px rgba(74, 52, 40, 0.05);
  border: 1px solid rgba(200, 170, 125, 0.15);
  border-radius: 2px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.scattered-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.scattered-caption {
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: var(--taupe);
  margin: 0;
  text-align: center;
  user-select: none;
}
.scattered-photo:hover {
  z-index: 99 !important;
  transform: scale(1.08) rotate(0deg) !important;
  box-shadow: 0 35px 70px rgba(74, 52, 40, 0.16);
  border-color: var(--gold);
}

/* Positions & offsets for desktop prints */
.scattered-photo-1 { width: 220px; top: 10px; left: 4%; transform: rotate(-5deg); z-index: 5; }
.scattered-photo-2 { width: 200px; top: -20px; left: 26%; transform: rotate(4deg); z-index: 8; }
.scattered-photo-3 { width: 230px; top: 30px; left: 48%; transform: rotate(-3deg); z-index: 6; }
.scattered-photo-4 { width: 210px; top: 5px; left: 74%; transform: rotate(5deg); z-index: 7; }
.scattered-photo-5 { width: 240px; top: 220px; left: 9%; transform: rotate(6deg); z-index: 10; }
.scattered-photo-6 { width: 220px; top: 210px; left: 33%; transform: rotate(-4deg); z-index: 9; }
.scattered-photo-7 { width: 230px; top: 240px; left: 57%; transform: rotate(3deg); z-index: 11; }
.scattered-photo-8 { width: 200px; top: 220px; left: 79%; transform: rotate(-6deg); z-index: 12; }
.scattered-gallery-action {
  text-align: center;
  margin-top: 6rem;
  position: relative;
  z-index: 20;
}
.scattered-action-text {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: var(--espresso);
  margin-bottom: 2.2rem;
  font-weight: 300;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}
.scattered-deck-hint {
  display: none !important;
}
.scattered-action-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .scattered-gallery-container {
    height: 480px;
  }
  .scattered-photo-1 { width: 170px; }
  .scattered-photo-2 { width: 160px; }
  .scattered-photo-3 { width: 170px; }
  .scattered-photo-4 { width: 160px; }
  .scattered-photo-5 { width: 180px; }
  .scattered-photo-6 { width: 170px; }
  .scattered-photo-7 { width: 180px; }
  .scattered-photo-8 { width: 160px; }
}

@media (max-width: 767px) {
  .scattered-gallery-section {
    padding: 3.5rem 0 3rem !important;
  }
  .scattered-gallery-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 290px !important;
    height: 420px !important;
    margin: 0 auto 1.5rem !important;
    perspective: 1000px;
    touch-action: manipulation;
  }
  .scattered-photo {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    margin-left: -130px !important; /* Centered 260px wide card */
    width: 260px !important;
    padding: 0.75rem 0.75rem 1.8rem !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 40px -12px rgba(74, 52, 40, 0.22), 0 0 20px rgba(212, 175, 55, 0.1) !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.4s ease, 
                box-shadow 0.4s ease !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Cascading deck offsets & rotations for 8 cards */
  .scattered-photo:nth-child(1) { z-index: 8; transform: rotate(-5deg) translateY(0) scale(1) !important; }
  .scattered-photo:nth-child(2) { z-index: 7; transform: rotate(4deg) translateY(6px) scale(0.97) !important; opacity: 0.96 !important; }
  .scattered-photo:nth-child(3) { z-index: 6; transform: rotate(-3deg) translateY(12px) scale(0.94) !important; opacity: 0.92 !important; }
  .scattered-photo:nth-child(4) { z-index: 5; transform: rotate(5deg) translateY(18px) scale(0.91) !important; opacity: 0.88 !important; }
  .scattered-photo:nth-child(5) { z-index: 4; transform: rotate(-4deg) translateY(24px) scale(0.88) !important; opacity: 0.84 !important; }
  .scattered-photo:nth-child(6) { z-index: 3; transform: rotate(3deg) translateY(30px) scale(0.85) !important; opacity: 0.80 !important; }
  .scattered-photo:nth-child(7) { z-index: 2; transform: rotate(-5deg) translateY(36px) scale(0.82) !important; opacity: 0.76 !important; }
  .scattered-photo:nth-child(8) { z-index: 1; transform: rotate(4deg) translateY(42px) scale(0.79) !important; opacity: 0.72 !important; }

  /* Interactive swipe-out animation classes (Alternating Right / Left) */
  .scattered-photo.swiping-out-right {
    transform: translateX(118%) rotate(18deg) scale(0.95) !important;
    opacity: 0 !important;
  }
  .scattered-photo.swiping-out-left {
    transform: translateX(-118%) rotate(-18deg) scale(0.95) !important;
    opacity: 0 !important;
  }

  .scattered-caption {
    font-size: 1.05rem;
    color: var(--espresso);
  }

  .scattered-deck-hint {
    display: flex !important;
    position: relative !important;
    z-index: 30 !important;
    margin-top: 1rem !important;
    margin-bottom: 1.75rem !important;
    color: var(--gold) !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  }
}

/* =================================================================
   ABOUT PAGE — UNIFIED DESIGN SYSTEM OVERRIDES
   Fixes: h2 consistency, section padding parity with index.html,
   "art of capturing" spacing, and comprehensive mobile responsive.
   ================================================================= */

/* ── 1. UNIFIED h2 SIZE — all section headings match index.html ── */
/*
   TARGET:    clamp(2.1rem, 4.2vw, 3.1rem) — matches index.html's 
              clamp(2.2rem,4.4vw,3.2rem) closely (within ~2px at all sizes).
   
   PROBLEM:   #why / #process / #stats use Tailwind v4 CDN utility classes
              (text-3xl md:text-4xl). Tailwind v4 CDN places responsive
              breakpoints inside @media with specificity 0,1,0 BUT they are 
              outside any @layer, and our rules are also unlayered. Source
              order wins — but Tailwind CDN is in <head> and our style.css
              comes after it, so OUR rules should win in cascade order.
              
              However, Tailwind v4 CDN uses @media for responsive variants:
                @media (min-width:768px) { .md\\:text-4xl { font-size:2.25rem } }
              This is specificity 0,1,0 inside a media query. Our plain h2
              override at specificity 0,2,1 wins — BUT only if the selector
              correctly matches. Adding !important guarantees it.

   STRATEGY:  Single .page-about h2 rule with !important covers ALL h2 on the
              about page. Then individual exclusions for special cases (CTA, bio h1).
*/

/* Single source of truth — ALL h2 globally across all pages: */
h2:not(.cta-heading) {
  font-size: clamp(2.1rem, 4.2vw, 3.1rem) !important;
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  color: var(--espresso) !important;
  line-height: 1.2 !important;
}

/* Ensure Why section h3 headings match the elegant serif display style */
#why h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important; /* text-xl md:text-2xl */
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  color: var(--espresso) !important;
  margin-bottom: 0.5rem !important;
}

/* CTA band h2 is intentionally larger — a display size, not a section heading */
.cta-heading {
  font-size: clamp(2.4rem, 5.6vw, 3.8rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

/* All italic keyword em elements inside headings are gold */
h1 em,
h2 em,
h3 em {
  color: var(--gold) !important;
  font-style: italic;
}

/* The script/italic em uses elegant legible Playfair Display italic */
h1 em.script,
h2 em.script,
h3 em.script {
  font-size: 1.08em !important;
  line-height: 1.1;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-deep) !important;
}

/* Bio h1 uses its own system (bio-content h1) — exclude from global rule */
.bio-content h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem) !important;
}


/* ── 2. SECTION PADDING — Unified 5rem top/bottom spacing for all sections ── */
.about-teaser,
.business-features,
.why,
.services,
.how,
.testimonials,
.beauty,
.faq,
.contact,
.contact-map,
.experience-section,
.scattered-gallery-section,
.approach,
.process,
.process-dark,
.education-section,
#why,
#process,
#stats,
.cta-band {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Bio section: custom top padding to clear fixed header with tight, elegant spacing */
.page-about .bio {
  padding-top: 6.8rem !important;
  padding-bottom: 4.5rem !important;
}


/* ── 3. "THE ART OF CAPTURING" — reduce excessive internal spacing ── */

/* Section header: was mb-24 (6rem). Bring to 3.5rem. */
.page-about #process .reveal.text-center.mb-24 {
  margin-bottom: 3.5rem !important;
}

/* Story rows: was mb-28 md:mb-36 (7rem/9rem). Bring to 4rem. */
.page-about #process .grid.mb-28,
.page-about #process .grid.md\:mb-36 {
  margin-bottom: 4rem !important;
}

/* Specific targeting via child selector approach */
.page-about #process > div > div[class*="mb-28"],
.page-about #process > div > div[class*="mb-36"] {
  margin-bottom: 4rem !important;
}

/* ── 4. MOBILE RESPONSIVE — full suite for 90% mobile users ── */

/* ---- 4a. Bio section ---- */
@media (max-width: 767px) {
  /* Bio section top padding adjusted for mobile header height */
  .page-about .bio {
    padding-top: 4.2rem !important;
    padding-bottom: 3.5rem !important;
  }
  .page-about .bio-grid {
    max-width: 100% !important;
  }
  /* Breadcrumb container */
  .page-about .bio > div:first-child {
    max-width: 100% !important;
    padding: 0 var(--gutter);
  }
}

/* ---- 4b. Why section mobile ---- */
@media (max-width: 767px) {
  /* Stack to single column on mobile */
  .page-about #why .grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  /* Hide desktop vertical divider on mobile */
  .page-about #why .hidden.lg\:block {
    display: none !important;
  }
  /* Center text on mobile */
  .page-about #why .lg\:text-left {
    text-align: center !important;
  }
  /* Pull-quote on mobile */
  .page-about #why .mt-12 {
    margin-top: 2.5rem !important;
  }
  .page-about #why .pt-10 {
    padding-top: 2rem !important;
  }
  .page-about #why .text-xl,
  .page-about #why .md\:text-2xl {
    font-size: 1.15rem !important;
  }
}

/* ---- 4c. Process section (art of capturing) mobile ---- */
@media (max-width: 767px) {
  /* Reduce header gap on mobile */
  .page-about #process .mb-24 {
    margin-bottom: 2.5rem !important;
  }
  /* Story rows stack and reduce gap */
  .page-about #process .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  /* Ensure images come first on all mobile rows */
  .page-about #process .lg\:order-2 {
    order: -1 !important;
  }
  .page-about #process .lg\:order-1 {
    order: 0 !important;
  }
  /* Reduce row bottom margins */
  .page-about #process .mb-28,
  .page-about #process .md\:mb-36 {
    margin-bottom: 3rem !important;
  }
  /* Image heights */
  .page-about #process img.h-\[320px\],
  .page-about #process img.md\:h-\[450px\] {
    height: 240px !important;
  }
  /* Remove lg: gap overrides */
  .page-about #process .lg\:gap-20 {
    gap: 1.5rem !important;
  }
}

/* ---- 4d. Stats section mobile ---- */
@media (max-width: 767px) {
  /* Stat numbers slightly smaller on mobile */
  .page-about #stats .counter {
    font-size: 3.5rem !important;
  }
  /* Header spacing */
  .page-about #stats .mb-16 {
    margin-bottom: 2.5rem !important;
  }
  /* Bottom sentence */
  .page-about #stats .mt-16 {
    margin-top: 2.5rem !important;
  }
}

/* ---- 4e. Experience section mobile ---- */
@media (max-width: 767px) {
  .experience-header {
    margin-bottom: 3rem;
  }
  .experience-editorial-item {
    padding: 2rem 1.5rem;
  }
  .experience-footer {
    margin-top: 3.5rem;
  }
  .experience-footer h4 {
    font-size: 1.4rem;
  }
  .experience-grid-editorial {
    gap: 1.5rem;
  }
}

/* ---- 4f. Scattered gallery section mobile ---- */
@media (max-width: 767px) {
  .scattered-gallery-header {
    margin-bottom: 2.5rem;
    padding: 0 1rem;
  }
  /* scattered h2 uses the same clamp - scales naturally on mobile */
  .scattered-gallery-action {
    margin-top: 3rem;
    padding: 0 1rem;
  }
  .scattered-action-text {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
  }
  .scattered-action-buttons {
    gap: 1rem;
  }
  /* Buttons go full width on very small screens */
  .scattered-action-buttons .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ---- 4g. FAQ section mobile ---- */
@media (max-width: 600px) {
  /* faq-head h2 font-size scales via clamp - no mobile override needed */
  .faq-item summary {
    font-size: 0.95rem;
    gap: 1rem;
  }
}

/* ---- 4h. Stat grid — better 2-col on mobile ---- */
@media (max-width: 479px) {
  /* Single column stat cards on very small screens */
  .page-about #stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-about #stats .counter {
    font-size: 2.8rem !important;
  }
}

/* ---- 4i. Eyebrow lines — hide decorative lines on small screens ---- */
@media (max-width: 479px) {
  /* The decorative gold lines flanking eyebrow text get cramped */
  .page-about .flex.items-center.justify-center .w-10 {
    width: 1.5rem;
  }
}

/* ---- 4j. Ghost text clipping on mobile for about page sections ---- */
@media (max-width: 767px) {
  /* Prevent ghost watermarks from causing horizontal scroll */
  .page-about #why,
  .page-about #process,
  .page-about #stats {
    overflow: hidden;
  }
}

/* ---- 4k. Process story rows: ensure proper column widths on tablet ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-about #process .gap-12 {
    gap: 2rem !important;
  }
  .page-about #process img.md\:h-\[450px\] {
    height: 320px !important;
  }
}

/* -- 5. EXPERIENCE SECTION -- staggered offset only on >=768px -- */
/* On mobile the 3.5rem translateY offset breaks the flow, disable it */
@media (max-width: 767px) {
  .experience-editorial-item:nth-child(even) {
    transform: none !important;
  }
}

/* ---- Bio section: override inline padding-top on mobile ---- */
/* Desktop: 14rem (header is taller with topbar). Mobile: topbar is hidden. */
@media (max-width: 860px) {
  .page-about .bio {
    padding-top: 8rem !important;
  }
}
@media (max-width: 600px) {
  .page-about .bio {
    padding-top: 7rem !important;
  }
}

/* Form floating label pattern */
.floating-input:focus ~ label,
.floating-input:not(:placeholder-shown) ~ label {
  transform: translateY(-1.25rem) scale(0.85);
  color: var(--gold-deep, #D4AF37);
}

/* Select float label support */
select:focus ~ label,
select.has-value ~ label {
  transform: translateY(-1.25rem) scale(0.85);
  color: var(--gold-deep, #D4AF37);
}

/* ============================================================
   Vogue Editorial 3-Column Masonry Gallery (Women's Portfolio)
   ============================================================ */
.cam-woman-vogue-clean-editorial {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.cam-woman-vogue-clean-editorial .reveal,
.cam-woman-vogue-clean-editorial .cam-woman-vogue-clean-row,
.cam-woman-vogue-clean-editorial .cam-woman-vogue-clean-item,
.cam-woman-vogue-clean-editorial .cam-woman-vogue-clean-note {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
@media (min-width: 768px) {
  .cam-woman-vogue-clean-editorial {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 1.75rem;
  }
}

.cam-woman-vogue-clean-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cam-woman-vogue-clean-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: start;
}

.cam-woman-vogue-clean-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 6px;
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(74, 52, 40, 0.04);
  transition: all 0.5s var(--ease);
  cursor: zoom-in;
}

.cam-woman-vogue-clean-item:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(212, 175, 55, 0.2);
}

/* Full-width single items - portrait 4:5 ratio */
.cam-woman-vogue-clean-item img {
  width: 100%;
  height: 100% !important;
  display: block;
  border-radius: 2px;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.8s var(--ease);
  aspect-ratio: 4 / 5;
}

/* 2-column row items: landscape 3:2 for visual balance */
.cam-woman-vogue-clean-row .cam-woman-vogue-clean-item img {
  aspect-ratio: 3 / 4;
  height: 100% !important;
}

.cam-woman-vogue-clean-item:hover img {
  transform: scale(1.04);
}

/* Corner Ornaments */
.cam-woman-vogue-clean-item::before,
.cam-woman-vogue-clean-item::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 5;
  transition: border-color 0.3s;
}
.cam-woman-vogue-clean-item::before {
  top: 10px;
  left: 10px;
  border-top: 1.5px solid rgba(212, 175, 55, 0.7);
  border-left: 1.5px solid rgba(212, 175, 55, 0.7);
}
.cam-woman-vogue-clean-item::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.7);
  border-right: 1.5px solid rgba(212, 175, 55, 0.7);
}
.cam-woman-vogue-clean-item:hover::before,
.cam-woman-vogue-clean-item:hover::after {
  border-color: var(--gold);
}

/* Note Banner Box */
.cam-woman-vogue-clean-note {
  padding: 2.5rem 1.5rem;
  background: #FAF6F0;
  border: 2px solid rgba(212, 175, 55, 0.4);
  border-radius: 3px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.12);
  margin: 0.25rem 0;
  position: relative;
}
.cam-woman-vogue-clean-note-line {
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 1rem;
}
.cam-woman-vogue-clean-note-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--espresso);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.cam-woman-vogue-clean-note-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--mocha);
  font-weight: 300;
  line-height: 1.6;
}


/* ============================================================
   Standalone CSS Utilities (Replacing Tailwind Browser JIT CDN)
   ============================================================ */

/* Layout & Display */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* Grid Columns & Gaps */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }
.gap-24 { gap: 6rem; }

.gap-x-8 { column-gap: 2rem; }
.gap-y-12 { row-gap: 3rem; }

/* Space Y */
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-12 > * + * { margin-top: 3rem; }
.space-y-16 > * + * { margin-top: 4rem; }

/* Multi-column Masonry */
.columns-1 { column-count: 1; }
.break-inside-avoid { break-inside: avoid; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-2 { top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem; }

.top-0 { top: 0; }
.top-2 { top: 0.5rem; }
.top-4 { top: 1rem; }
.top-5 { top: 1.25rem; }
.top-10 { top: 2.5rem; }
.top-1\/2 { top: 50%; }

.bottom-0 { bottom: 0; }
.bottom-2 { bottom: 0.5rem; }
.bottom-4 { bottom: 1rem; }
.bottom-\[-1\.5rem\] { bottom: -1.5rem; }

.left-0 { left: 0; }
.left-2 { left: 0.5rem; }
.left-4 { left: 1rem; }
.left-6 { left: 1.5rem; }
.left-1\/2 { left: 50%; }

.right-0 { right: 0; }
.right-2 { right: 0.5rem; }
.right-4 { right: 1rem; }
.right-6 { right: 1.5rem; }

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }

/* Sizing */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-max { width: max-content; }
.w-screen { width: 100vw; }
.w-1\.5 { width: 0.375rem; }
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.h-px { height: 1px; }
.h-1\.5 { height: 0.375rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-20 { height: 5rem; }

.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-none { max-width: none; }

.min-h-\[400px\] { min-height: 400px; }
.min-h-\[40vh\] { min-height: 40vh; }
.min-h-\[70vh\] { min-height: 70vh; }
.min-h-\[750px\] { min-height: 750px; }
.min-h-\[90vh\] { min-height: 90vh; }

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.aspect-\[2\/3\] { aspect-ratio: 2 / 3; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }

/* Spacing: Padding */
.p-1\.5 { padding: 0.375rem; }
.p-2 { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }

.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-12 { padding-top: 3rem; }
.pt-24 { padding-top: 6rem; }

.pb-4 { padding-bottom: 1rem; }
.pb-16 { padding-bottom: 4rem; }

.pl-4 { padding-left: 1rem; }
.pl-6 { padding-left: 1.5rem; }

/* Spacing: Margin */
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-1 { margin-right: 0.25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-auto { margin-top: auto; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-20 { margin-bottom: 5rem; }

/* Typography */
.font-body { font-family: var(--font-body); }
.font-display { font-family: var(--font-display); }
.font-accent { font-family: var(--font-accent); }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }

/* Colors & Backgrounds */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: #ffffff; }
.text-white { color: #ffffff; }

.bg-\[\#FAF6F0\] { background-color: #FAF6F0; }
.bg-\[\#FDFBF7\] { background-color: #FDFBF7; }
.bg-\[\#FFFFFF\] { background-color: #FFFFFF; }

.border { border-width: 1px; border-style: solid; border-color: rgba(42,33,28,0.14); }
.border-0 { border-width: 0; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-color: rgba(42,33,28,0.14); }
.border-t { border-top-width: 1px; border-top-style: solid; border-color: rgba(42,33,28,0.14); }
.border-l { border-left-width: 1px; border-left-style: solid; border-color: rgba(42,33,28,0.14); }
.border-r { border-right-width: 1px; border-right-style: solid; border-color: rgba(42,33,28,0.14); }

.border-b-2 { border-bottom-width: 2px; }
.border-dashed { border-style: dashed; }

.border-\[\#4A3428\]\/20 { border-color: rgba(74, 52, 40, 0.2); }
.border-\[\#D4AF37\]\/30 { border-color: rgba(212, 175, 55, 0.3); }

/* Transitions & Transforms */
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }

.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }

.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }

.scale-90 { transform: scale(0.9); }
.scale-100 { transform: scale(1); }

.overflow-hidden { overflow: hidden; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-\[2px\] { border-radius: 2px; }
.rounded-\[3px\] { border-radius: 3px; }
.rounded-\[4px\] { border-radius: 4px; }

.pointer-events-none { pointer-events: none; }
.resize-none { resize: none; }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.cursor-zoom-in { cursor: zoom-in; }

.object-cover { object-fit: cover; }
.object-center { object-position: center; }

/* Group & Hover Effects */
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.10); }

.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:opacity-100:hover { opacity: 1; }

/* Responsive Media Queries (Mobile First) */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  .sm\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:flex-row { flex-direction: row; }
  .md\:flex-nowrap { flex-wrap: nowrap; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  
  .md\:col-span-5 { grid-column: span 5 / span 5; }
  .md\:col-span-7 { grid-column: span 7 / span 7; }
  .md\:col-start-2 { grid-column-start: 2; }
  .md\:col-end-11 { grid-column-end: 11; }
  
  .md\:columns-2 { column-count: 2; }
  
  .md\:w-1\/2 { width: 50%; }
  .md\:w-5\/12 { width: 41.666667%; }
  .md\:w-7\/12 { width: 58.333333%; }
  
  .md\:gap-4 { gap: 1rem; }
  .md\:gap-12 { gap: 3rem; }
  
  .md\:p-8 { padding: 2rem; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:p-16 { padding: 4rem; }
  
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
  
  .md\:text-left { text-align: left; }
  .md\:justify-end { justify-content: flex-end; }
  
  .md\:border-l { border-left-width: 1px; border-left-style: solid; }
  .md\:border-t-0 { border-top-width: 0; }
  .md\:mb-36 { margin-bottom: 9rem; }
  .md\:mt-0 { margin-top: 0; }
}

@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-row-reverse { flex-direction: row-reverse; }
  
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  
  .lg\:columns-3 { column-count: 3; }
  
  .lg\:w-1\/2 { width: 50%; }
  
  .lg\:gap-12 { gap: 3rem; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:gap-20 { gap: 5rem; }
  .lg\:gap-24 { gap: 6rem; }
  
  .lg\:p-24 { padding: 6rem; }
  .lg\:pt-32 { padding-top: 8rem; }
  
  .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
  .lg\:text-8xl { font-size: 6rem; line-height: 1; }
  
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
}


@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-marquee-reverse { animation: marquee-reverse 30s linear infinite; }
.animate-marquee-luxury { animation: marquee 45s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* 3D Wave Dock (Desktop) & Infinite Glide Reel (Mobile/Tablet) */
.wave-gallery-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* Mobile & Tablet: Infinite Silky Glide (<= 900px) */
@media (max-width: 900px) {
  .wave-gallery-container {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    padding-block: 0.5rem;
  }
  .wave-gallery-track {
    display: flex;
    width: max-content;
    gap: 0.75rem;
    height: clamp(200px, 52vw, 260px);
    animation: marquee 35s linear infinite;
    padding-inline: 0.5rem;
  }
  .wave-gallery-track:hover,
  .wave-gallery-track:active {
    animation-play-state: paused;
  }
  .wave-card {
    flex: 0 0 clamp(135px, 38vw, 175px);
    height: 100%;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(200, 170, 125, 0.35);
    background-color: #FAF6F0;
    box-shadow: 0 6px 18px rgba(74, 52, 40, 0.08);
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .wave-card:active {
    transform: scale(0.98);
    border-color: #D4AF37;
  }
  .wave-card.is-dup {
    display: block;
  }
}

/* Desktop (> 900px): 3D Wave Fisheye Dock */
@media (min-width: 901px) {
  .wave-gallery-container {
    perspective: 1400px;
    transform-style: preserve-3d;
    padding: 1rem 1.5rem;
  }
  .wave-gallery-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    height: clamp(210px, 24vw, 280px);
    transform-style: preserve-3d;
    padding: 1rem 0;
  }
  .wave-card {
    flex: var(--card-flex, 1);
    min-width: clamp(65px, 7vw, 95px);
    max-width: clamp(140px, 18vw, 240px);
    height: 100%;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(200, 170, 125, 0.35);
    background-color: #FAF6F0;
    box-shadow: 0 8px 20px rgba(74, 52, 40, 0.07);
    transform-style: preserve-3d;
    cursor: pointer;
    will-change: transform, flex, filter, box-shadow;
    transform: 
      translateZ(var(--card-tz, 0px))
      rotateY(var(--card-ry, 0deg))
      scale(var(--card-scale, 1));
    filter: brightness(var(--card-bright, 0.95)) saturate(var(--card-sat, 0.92));
    transition: 
      transform var(--card-trans-time, 0.4s) cubic-bezier(0.16, 1, 0.3, 1),
      flex var(--card-trans-time, 0.4s) cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease;
  }
  .wave-card:hover,
  .wave-card.is-active {
    border-color: #D4AF37;
    box-shadow: 0 20px 40px -10px rgba(200, 170, 125, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.5);
    filter: brightness(1.06) saturate(1.08);
    z-index: 30;
  }
  .wave-card.is-dup {
    display: none !important;
  }
}

.wave-card picture,
.wave-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.wave-card:hover img,
.wave-card:active img {
  transform: scale(1.05);
}

.aspect-\[2\/3\] { aspect-ratio: 2 / 3; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.bg-\[\#4A3428\] { background-color: #4A3428; }
.bg-\[\#C8AA7D\] { background-color: #C8AA7D; }
.bg-\[\#D4AF37\] { background-color: #D4AF37; }
.bg-\[\#FAF6F0\] { background-color: #FAF6F0; }
.bg-\[\#FDFBF7\] { background-color: #FDFBF7; }
.bg-\[\#FFFFFF\] { background-color: #FFFFFF; }
.bg-\[var\(--gold\)\] { background-color: var(--gold); }
.border-\[\#C8AA7D\] { border-color: #C8AA7D; }
.border-\[\#F7F2EB\] { border-color: #F7F2EB; }
.border-\[\#FFFDF8\] { border-color: #FFFDF8; }
.border-\[1px\] { border-width: 1px; border-style: solid; }
.border-\[6px\] { border-width: 6px; border-style: solid; }
.border-\[8px\] { border-width: 8px; border-style: solid; }
.border-\[var\(--gold\)\] { border-color: var(--gold); }
.bottom-\[-1\.5rem\] { bottom: -1.5rem; }
.bottom-\[-10\%\] { bottom: -10%; }
.bottom-\[-5\%\] { bottom: -5%; }
.bottom-\[10\%\] { bottom: 10%; }
.bottom-\[20\%\] { bottom: 20%; }
.bottom-\[5\%\] { bottom: 5%; }
.focus-within\:border-\[\#D4AF37\]:focus-within { border-color: #D4AF37; }
.group:hover .group-hover\:bg-\[\#C8AA7D\] { background-color: #C8AA7D; }
.group:hover .group-hover\:bg-\[var\(--gold\)\] { background-color: var(--gold); }
.group:hover .group-hover\:text-\[\#4A3428\] { color: #4A3428; }
.h-\[1px\] { height: 1px; }
.h-\[25vh\] { height: 25vh; }
.h-\[2px\] { height: 2px; }
.h-\[320px\] { height: 320px; }
.h-\[3px\] { height: 3px; }
.h-\[400px\] { height: 400px; }
.h-\[40vw\] { height: 40vw; }
.h-\[500px\] { height: 500px; }
.h-\[50vh\] { height: 50vh; }
.h-\[55vh\] { height: 55vh; }
.h-\[600px\] { height: 600px; }
.h-\[60vw\] { height: 60vw; }
.h-\[800px\] { height: 800px; }
.h-\[90\%\] { height: 90%; }
.h-\[95\%\] { height: 95%; }
.hover\:bg-\[var\(--gold\)\]:hover { background-color: var(--gold); }
.hover\:shadow-\[0_10px_20px_-10px_rgba\(184\,160\,119\,0\.15\)\]:hover { box-shadow: 0 10px 20px -10px rgba(184,160,119,0.15); }
.hover\:shadow-\[0_15px_35px_-15px_rgba\(184\,160\,119\,0\.18\)\]:hover { box-shadow: 0 15px 35px -15px rgba(184,160,119,0.18); }
.hover\:shadow-\[0_20px_40px_rgba\(74\,52\,40\,0\.08\)\]:hover { box-shadow: 0 20px 40px rgba(74,52,40,0.08); }
.hover\:shadow-\[0_20px_45px_rgba\(212\,175\,55\,0\.15\)\]:hover { box-shadow: 0 20px 45px rgba(212,175,55,0.15); }
.hover\:shadow-\[0_35px_80px_rgba\(212\,175\,55\,0\.22\)\]:hover { box-shadow: 0 35px 80px rgba(212,175,55,0.22); }
.hover\:text-\[\#C8AA7D\]:hover { color: #C8AA7D; }
.leading-\[1\.05\] { line-height: 1.05; }
.leading-\[1\.08\] { line-height: 1.08; }
.leading-\[1\.1\] { line-height: 1.1; }
.leading-\[1\.25\] { line-height: 1.25; }
.leading-\[1\.2\] { line-height: 1.2; }
.left-\[-10\%\] { left: -10%; }
.left-\[-5\%\] { left: -5%; }
.left-\[10\%\] { left: 10%; }
.left-\[15\%\] { left: 15%; }
.left-\[45\%\] { left: 45%; }
.left-\[5\%\] { left: 5%; }
.max-w-\[1400px\] { max-width: 1400px; }
.max-w-\[15ch\] { max-width: 15ch; }
.max-w-\[280px\] { max-width: 280px; }
.max-w-\[35ch\] { max-width: 35ch; }
.max-w-\[440px\] { max-width: 440px; }
.max-w-\[45ch\] { max-width: 45ch; }
.max-w-\[48ch\] { max-width: 48ch; }
.max-w-\[50ch\] { max-width: 50ch; }
.max-w-\[550px\] { max-width: 550px; }
.max-w-\[700px\] { max-width: 700px; }
.max-w-\[800px\] { max-width: 800px; }
.max-w-\[var\(--container\)\] { max-width: var(--container); }
.max-width-\[34rem\] { max-width: 34rem; }
.min-h-\[400px\] { min-height: 400px; }
.min-h-\[40vh\] { min-height: 40vh; }
.min-h-\[70vh\] { min-height: 70vh; }
.min-h-\[750px\] { min-height: 750px; }
.min-h-\[90vh\] { min-height: 90vh; }
.px-\[clamp\(20px\,6vw\,84px\)\] { padding-left: clamp(20px,6vw,84px); padding-right: clamp(20px,6vw,84px); }
.px-\[var\(--gutter\)\] { padding-left: var(--gutter); padding-right: var(--gutter); }
.py-\[10rem\] { padding-top: 10rem; padding-bottom: 10rem; }
.py-\[5rem\] { padding-top: 5rem; padding-bottom: 5rem; }
.py-\[6rem\] { padding-top: 6rem; padding-bottom: 6rem; }
.py-\[8rem\] { padding-top: 8rem; padding-bottom: 8rem; }
.right-\[-10\%\] { right: -10%; }
.right-\[-5\%\] { right: -5%; }
.right-\[0\%\] { right: 0%; }
.right-\[10\%\] { right: 10%; }
.rounded-\[16px\] { border-radius: 16px; }
.rounded-\[24px\] { border-radius: 24px; }
.rounded-\[2px\] { border-radius: 2px; }
.rounded-\[3px\] { border-radius: 3px; }
.rounded-\[4px\] { border-radius: 4px; }
.shadow-\[0_15px_35px_rgba\(74\,52\,40\,0\.04\)\] { box-shadow: 0 15px 35px rgba(74,52,40,0.04); }
.shadow-\[0_15px_35px_rgba\(74\,52\,40\,0\.06\)\] { box-shadow: 0 15px 35px rgba(74,52,40,0.06); }
.shadow-\[0_20px_50px_rgba\(74\,52\,40\,0\.04\)\] { box-shadow: 0 20px 50px rgba(74,52,40,0.04); }
.shadow-\[0_24px_48px_-12px_rgba\(74\,52\,40\,0\.08\)\] { box-shadow: 0 24px 48px -12px rgba(74,52,40,0.08); }
.shadow-\[0_25px_60px_rgba\(74\,52\,40\,0\.12\)\] { box-shadow: 0 25px 60px rgba(74,52,40,0.12); }
.shadow-\[0_30px_60px_-15px_rgba\(74\,52\,40\,0\.06\)\] { box-shadow: 0 30px 60px -15px rgba(74,52,40,0.06); }
.shadow-\[0_4px_18px_rgba\(74\,52\,40\,0\.08\)\] { box-shadow: 0 4px 18px rgba(74,52,40,0.08); }
.shadow-\[0_8px_30px_rgba\(74\,52\,40\,0\.02\)\] { box-shadow: 0 8px 30px rgba(74,52,40,0.02); }
.space-y-\[5rem\] > * + * { margin-top: 5rem; }
.text-\[\#4A3428\] { color: #4A3428; }
.text-\[\#7A5C48\] { color: #7A5C48; }
.text-\[\#A8841F\] { color: #A8841F; }
.text-\[\#C8AA7D\] { color: #C8AA7D; }
.text-\[\#D4AF37\] { color: #D4AF37; }
.text-\[\#EAD9A0\] { color: #EAD9A0; }
.text-\[\#FFFDF8\] { color: #FFFDF8; }
.text-\[1\.3em\] { font-size: 1.3em; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[15px\] { font-size: 15px; }
.text-\[15vw\] { font-size: 15vw; }
.text-\[20vw\] { font-size: 20vw; }
.text-\[25vw\] { font-size: 25vw; }
.text-\[5rem\] { font-size: 5rem; }
.text-\[8px\] { font-size: 8px; }
.text-\[9px\] { font-size: 9px; }
.text-\[clamp\(1\.8rem\,4vw\,3\.2rem\)\] { font-size: clamp(1.8rem,4vw,3.2rem); }
.text-\[clamp\(2\.5rem\,4vw\,3\.5rem\)\] { font-size: clamp(2.5rem,4vw,3.5rem); }
.text-\[clamp\(2\.5rem\,5vw\,4rem\)\] { font-size: clamp(2.5rem,5vw,4rem); }
.text-\[clamp\(2\.5rem\,6vw\,4\.5rem\)\] { font-size: clamp(2.5rem,6vw,4.5rem); }
.text-\[clamp\(2\.5rem\,6vw\,5rem\)\] { font-size: clamp(2.5rem,6vw,5rem); }
.text-\[clamp\(2rem\,4vw\,3\.2rem\)\] { font-size: clamp(2rem,4vw,3.2rem); }
.text-\[clamp\(2rem\,5vw\,4rem\)\] { font-size: clamp(2rem,5vw,4rem); }
.text-\[var\(--espresso\)\] { color: var(--espresso); }
.text-\[var\(--gold\)\] { color: var(--gold); }
.text-\[var\(--gold\)\]\/\[0\.03\] { color: var(--gold)]/[0.03; }
.text-\[var\(--mocha\)\] { color: var(--mocha); }
.top-\[10\%\] { top: 10%; }
.top-\[40\%\] { top: 40%; }
.top-\[5\%\] { top: 5%; }
.top-\[60\%\] { top: 60%; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.22em\] { letter-spacing: 0.22em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }
.w-\[35\%\] { width: 35%; }
.w-\[40\%\] { width: 40%; }
.w-\[400px\] { width: 400px; }
.w-\[40vw\] { width: 40vw; }
.w-\[45\%\] { width: 45%; }
.w-\[50\%\] { width: 50%; }
.w-\[500px\] { width: 500px; }
.w-\[60\%\] { width: 60%; }
.w-\[600px\] { width: 600px; }
.w-\[60vw\] { width: 60vw; }
.w-\[80\%\] { width: 80%; }
.w-\[800px\] { width: 800px; }
.w-\[85\%\] { width: 85%; }
.w-\[90\%\] { width: 90%; }

/* Custom Hover Scale Helpers for Lexington Interactive Card Deck */
.hover\:scale-125:hover { transform: scale(1.25) !important; }
.hover\:scale-130:hover { transform: scale(1.30) !important; }
.hover\:scale-135:hover { transform: scale(1.35) !important; }
.hover\:scale-140:hover { transform: scale(1.40) !important; }
@media (min-width: 1024px) {
  .lg\:hover\:scale-128:hover { transform: scale(1.28) !important; }
  .lg\:hover\:scale-130:hover { transform: scale(1.30) !important; }
}

/* Portfolio items - default cursor without zoom */
.cam-woman-vogue-clean-item, .cam-woman-vogue-clean-item img, .cam-woman-vogue-clean-editorial figure { cursor: default !important; }

/* ==========================================================================
   COMPILED UTILITIES (STATIC STANDALONE CSS - ZERO RUNTIME DEPENDENCIES)
   ========================================================================== */

/* Layout & Containers */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.-inset-6 { top: -1.5rem; right: -1.5rem; bottom: -1.5rem; left: -1.5rem; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.-z-10 { z-index: -10; }
.pointer-events-none { pointer-events: none; }
.overflow-hidden { overflow: hidden; }
.mx-auto { margin-left: auto; margin-right: auto; }
.-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.-mx-8 { margin-left: -2rem; margin-right: -2rem; }
.-mx-10 { margin-left: -2.5rem; margin-right: -2.5rem; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.w-10 { width: 2.5rem; }
.h-px { height: 1px; }
.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }

.w-\[32\%\] { width: 32%; }
.max-w-xl { max-width: 36rem; }
.max-w-\[540px\] { max-width: 540px; }
.max-w-\[1440px\] { max-width: 1440px; }
.max-w-\[var\(--container\)\] { max-width: var(--container); }

.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.object-cover { object-fit: cover; }
.shrink-0 { flex-shrink: 0; }

/* Grid & Flex */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Spacing */
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-9 { padding-left: 2.25rem; padding-right: 2.25rem; }
.px-\[var\(--gutter\)\] { padding-left: var(--gutter); padding-right: var(--gutter); }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }
.pt-24 { padding-top: 6rem; }
.pt-32 { padding-top: 8rem; }
.pt-36 { padding-top: 9rem; }
.pt-48 { padding-top: 12rem; }

.pb-2 { padding-bottom: 0.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pl-6 { padding-left: 1.5rem; }

.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-7 > * + * { margin-top: 1.75rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* Typography */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono { font-family: monospace; }
.font-\[var\(--font-body\)\] { font-family: var(--font-body); }
.font-\[var\(--font-display\)\] { font-family: var(--font-display); }

.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.22em\] { letter-spacing: 0.22em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[1\.18em\] { font-size: 1.18em; }

.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.18\] { line-height: 1.18; }
.text-center { text-align: center; }

/* Colors & Backgrounds */
.text-white { color: #FFFFFF; }
.text-\[var\(--espresso\)\] { color: var(--espresso); }
.text-\[var\(--mocha\)\] { color: var(--mocha); }
.text-\[var\(--gold\)\] { color: var(--gold); }
.text-\[\#4A3428\] { color: #4A3428; }
.text-\[\#D4AF37\] { color: #D4AF37; }
.text-\[\#7A5C48\] { color: #7A5C48; }
.text-\[\#A8841F\] { color: #A8841F; }

.bg-white { background-color: #FFFFFF; }
.bg-\[\#FFFFFF\] { background-color: #FFFFFF; }
.bg-\[\#FAF6F0\] { background-color: #FAF6F0; }
.bg-\[\#F5EFE6\] { background-color: #F5EFE6; }
.bg-\[\#C8AA7D\] { background-color: #C8AA7D; }
.bg-\[var\(--gold\)\] { background-color: var(--gold); }

/* Borders & Radius */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l-2 { border-left-width: 2px; }
.border-\[var\(--gold\)\] { border-color: var(--gold); }
.border-\[var\(--gold\)\]\/40 { border-color: rgba(212, 175, 55, 0.4); }

.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* Shadows & Effects */
.blur-3xl { filter: blur(64px); }
.shadow-\[0_4px_18px_rgba\(74\,52\,40\,0\.08\)\] { box-shadow: 0 4px 18px rgba(74, 52, 40, 0.08); }
.shadow-\[0_25px_50px_-12px_rgba\(74\,52\,40\,0\.38\)\] { box-shadow: 0 25px 50px -12px rgba(74, 52, 40, 0.38); }
.shadow-\[0_30px_60px_-15px_rgba\(74\,52\,40\,0\.45\)\] { box-shadow: 0 30px 60px -15px rgba(74, 52, 40, 0.45); }

/* Transforms & Transitions */
.transform { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.origin-bottom { transform-origin: bottom; }
.cursor-pointer { cursor: pointer; }

.-rotate-12 { --tw-rotate: -12deg; transform: rotate(-12deg); }
.rotate-12 { --tw-rotate: 12deg; transform: rotate(12deg); }
.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: scale(1.05); }
.translate-y-2 { --tw-translate-y: 0.5rem; transform: translateY(0.5rem); }

.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* Interactive Hover States */
.hover\:translate-y-0:hover { transform: translateY(0) !important; }
.hover\:rotate-0:hover { transform: rotate(0) !important; }
.hover\:scale-125:hover { transform: scale(1.25) !important; }
.hover\:z-40:hover { z-index: 40 !important; }
.hover\:bg-\[var\(--gold\)\]:hover { background-color: var(--gold) !important; }
.hover\:text-white:hover { color: #FFFFFF !important; }

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:max-w-\[660px\] { max-width: 660px; }
  .sm\:w-\[35\%\] { width: 35%; }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .sm\:scale-110 { transform: scale(1.1); }
  .sm\:translate-y-6 { transform: translateY(1.5rem); }
  .sm\:-mx-8 { margin-left: -2rem; margin-right: -2rem; }
}

@media (min-width: 768px) {
  .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }
  .lg\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .lg\:col-span-7 { grid-column: span 7 / span 7 !important; }
  .lg\:col-span-8 { grid-column: span 8 / span 8 !important; }
  
  .lg\:text-\[3\.25rem\] { font-size: 3.25rem; line-height: 1.1; }
  .lg\:max-w-\[780px\] { max-width: 780px; }
  .lg\:w-\[39\%\] { width: 39%; }
  .lg\:rounded-2xl { border-radius: 1rem; }
  .lg\:space-y-8 > * + * { margin-top: 2rem; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:pt-8 { padding-top: 2rem; }
  .lg\:pb-8 { padding-bottom: 2rem; }
  .lg\:pt-48 { padding-top: 12rem; }
  .lg\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .lg\:-mx-10 { margin-left: -2.5rem; margin-right: -2.5rem; }
  .lg\:hover\:scale-128:hover { transform: scale(1.28) !important; }
}

@media (min-width: 1280px) {
  .xl\:text-\[3\.5rem\] { font-size: 3.5rem; line-height: 1.1; }
  .xl\:max-w-\[820px\] { max-width: 820px; }
}


/* ==========================================================================
   DYNAMIC JIT COMPILED CSS TO STATIC STYLESHEET
   ========================================================================== */
.text-\[\#4A3428\] { color: #4A3428; }
.mb-4 { margin-bottom: 1rem; }
.mt-4 { margin-top: 1rem; }
.bg-\[\#FAF6F0\] { background-color: #FAF6F0; }
.font-\[var\(--font-display\)\] { font-family: var(--font-display); }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.max-w-\[var\(--container\)\] { max-width: var(--container); }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-\[var\(--gutter\)\] { padding-left: var(--gutter); padding-right: var(--gutter); }
.mb-8 { margin-bottom: 2rem; }
.font-\[var\(--font-body\)\] { font-family: var(--font-body); }
.text-\[var\(--mocha\)\] { color: var(--mocha); }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }
.gap-4 { gap: 1rem; }
.w-10 { width: 2.5rem; }
.h-px { height: 1px; }
.max-w-4xl { max-width: 56rem; }
.mb-12 { margin-bottom: 3rem; }
.text-\[var\(--espresso\)\] { color: var(--espresso); }
.text-\[var\(--gold\)\] { color: var(--gold); }
.mt-2 { margin-top: 0.5rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.gap-8 { gap: 2rem; }
.max-w-6xl { max-width: 72rem; }
.bg-\[\#FFFDF8\] { background-color: #FFFDF8; }
.p-7 { padding: 1.75rem; }
.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.mb-5 { margin-bottom: 1.25rem; }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.text-\[\#D4AF37\] { color: #D4AF37; }
.text-\[\#8C6D58\] { color: #8C6D58; }
.mb-6 { margin-bottom: 1.5rem; }
.gap-3 { gap: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.text-\[\#5C4638\] { color: #5C4638; }
.p-8 { padding: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.text-\[\#A8841F\] { color: #A8841F; }
.mb-0 { margin-bottom: 0rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-3 { margin-bottom: 0.75rem; }
.gap-12 { gap: 3rem; }
.mb-24 { margin-bottom: 6rem; }
.border-\[var\(--gold\)\]\/25 { border-color: rgba(212, 175, 55, 0.25); }
.hover\:border-\[var\(--gold\)\]\/60:hover { border-color: rgba(212, 175, 55, 0.6); }
.hover\:shadow-\[0_20px_40px_-15px_rgba\(184\,160\,119\,0\.22\)\]:hover { box-shadow: 0 20px 40px -15px rgba(184,160,119,0.22); }
.bg-\[\#FFFFFF\] { background-color: #FFFFFF; }
.w-full { width: 100%; }
.h-\[320px\] { height: 320px; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.border-\[var\(--gold\)\]\/20 { border-color: rgba(212, 175, 55, 0.2); }
.p-2 { padding: 0.5rem; }
.hover\:border-\[var\(--gold\)\]\/50:hover { border-color: rgba(212, 175, 55, 0.5); }
.hover\:shadow-\[0_12px_24px_-10px_rgba\(184\,160\,119\,0\.2\)\]:hover { box-shadow: 0 12px 24px -10px rgba(184,160,119,0.2); }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.gap-2 { gap: 0.5rem; }
.mt-6 { margin-top: 1.5rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.pt-36 { padding-top: 9rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.max-w-\[1440px\] { max-width: 1440px; }
.gap-10 { gap: 2.5rem; }
.space-y-7 > * + * { margin-top: 1.75rem; }
.bg-\[var\(--gold\)\] { background-color: var(--gold); }
.text-\[1\.18em\] { font-size: 1.18em; }
.pt-2 { padding-top: 0.5rem; }
.max-w-xl { max-width: 36rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.border-\[var\(--gold\)\] { border-color: rgba(212, 175, 55, 1); }
.pl-6 { padding-left: 1.5rem; }
.pt-4 { padding-top: 1rem; }
.gap-5 { gap: 1.25rem; }
.px-9 { padding-left: 2.25rem; padding-right: 2.25rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.hover\:bg-\[var\(--gold\)\]:hover { background-color: var(--gold); }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.tracking-\[0\.22em\] { letter-spacing: 0.22em; }
.shadow-\[0_4px_18px_rgba\(74\,52\,40\,0\.08\)\] { box-shadow: 0 4px 18px rgba(74,52,40,0.08); }
.max-w-\[540px\] { max-width: 540px; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.w-\[32\%\] { width: 32%; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.shadow-\[0_25px_50px_-12px_rgba\(74\,52\,40\,0\.38\)\] { box-shadow: 0 25px 50px -12px rgba(74,52,40,0.38); }
.border-\[var\(--gold\)\]\/40 { border-color: rgba(212, 175, 55, 0.4); }
.-rotate-12 { transform: rotate(-12deg); }
.translate-y-2 { transform: translateY(0.5rem); }
.hover\:translate-y-0:hover { transform: translateY(0rem); }
.hover\:rotate-0:hover { transform: rotate(0deg); }
.hover\:scale-125:hover { transform: scale(1.25); }
.hover\:z-40:hover { z-index: 40 !important; }
.h-full { height: 100%; }
.-ml-12 { margin-left: -3rem; }
.rotate-6 { transform: rotate(6deg); }
.-rotate-6 { transform: rotate(-6deg); }
.translate-y-3 { transform: translateY(0.75rem); }
.rotate-12 { transform: rotate(12deg); }
.pt-0 { padding-top: 0rem; }
.pb-16 { padding-bottom: 4rem; }
.max-w-\[1400px\] { max-width: 1400px; }
.shadow-\[0_15px_35px_rgba\(74\,52\,40\,0\.06\)\] { box-shadow: 0 15px 35px rgba(74,52,40,0.06); }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.border-\[var\(--gold\)\]\/30 { border-color: rgba(212, 175, 55, 0.3); }
.max-w-\[1000px\] { max-width: 1000px; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.w-8 { width: 2rem; }
.text-\[1\.15em\] { font-size: 1.15em; }
.max-w-2xl { max-width: 42rem; }
.pt-24 { padding-top: 6rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.max-w-\[800px\] { max-width: 800px; }
.text-\[\#7A5C48\] { color: #7A5C48; }
.space-y-8 > * + * { margin-top: 2rem; }
.pt-8 { padding-top: 2rem; }
.pb-4 { padding-bottom: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.max-w-\[280px\] { max-width: 280px; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.bg-\[\#FDFBF7\] { background-color: #FDFBF7; }
.w-\[800px\] { width: 800px; }
.h-\[800px\] { height: 800px; }
.w-\[600px\] { width: 600px; }
.h-\[600px\] { height: 600px; }
.w-\[400px\] { width: 400px; }
.h-\[400px\] { height: 400px; }
.w-\[500px\] { width: 500px; }
.h-\[500px\] { height: 500px; }
.max-w-\[550px\] { max-width: 550px; }
.mb-14 { margin-bottom: 3.5rem; }
.space-y-12 > * + * { margin-top: 3rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.text-\[11px\] { font-size: 11px; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.space-y-16 > * + * { margin-top: 4rem; }
.h-10 { height: 2.5rem; }
.translate-y-4 { transform: translateY(1rem); }
.shadow-\[0_25px_50px_-12px_rgba\(74\,52\,40\,0\.10\)\] { box-shadow: 0 25px 50px -12px rgba(74,52,40,0.10); }
.text-\[15px\] { font-size: 15px; }
.pt-3 { padding-top: 0.75rem; }
.gap-6 { gap: 1.5rem; }
.shadow-\[0_10px_30px_rgba\(74\,52\,40\,0\.04\)\] { box-shadow: 0 10px 30px rgba(74,52,40,0.04); }
.hover\:shadow-\[0_20px_45px_rgba\(74\,52\,40\,0\.09\)\]:hover { box-shadow: 0 20px 45px rgba(74,52,40,0.09); }
.w-32 { width: 8rem; }
.h-32 { height: 8rem; }
.text-\[10px\] { font-size: 10px; }
.pt-1 { padding-top: 0.25rem; }
.h-\[2px\] { height: 2px; }
.w-0 { width: 0rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.p-6 { padding: 1.5rem; }
.bg-\[\#F9F6F0\] { background-color: #F9F6F0; }
.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
.bg-\[\#D4AF37\] { background-color: #D4AF37; }
.shadow-\[0_15px_40px_rgba\(74\,52\,40\,0\.06\)\] { box-shadow: 0 15px 40px rgba(74,52,40,0.06); }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.pb-3 { padding-bottom: 0.75rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.translate-y-5 { transform: translateY(1.25rem); }
.shadow-\[0_30px_60px_-15px_rgba\(74\,52\,40\,0\.10\)\] { box-shadow: 0 30px 60px -15px rgba(74,52,40,0.10); }
.h-auto { height: auto; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.mb-20 { margin-bottom: 5rem; }
.h-64 { height: 16rem; }
.text-\[\#FFFDF8\] { color: #FFFDF8; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.p-4 { padding: 1rem; }
.mt-8 { margin-top: 2rem; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.p-5 { padding: 1.25rem; }
.shadow-\[0_20px_60px_-15px_rgba\(74\,52\,40\,0\.10\)\] { box-shadow: 0 20px 60px -15px rgba(74,52,40,0.10); }
.bg-\[\#4A3428\] { background-color: #4A3428; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.tracking-\[0\.16em\] { letter-spacing: 0.16em; }
.w-2\.5 { width: 0.625rem; }
.h-2\.5 { height: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.tracking-\[0\.14em\] { letter-spacing: 0.14em; }
.hover\:text-\[\#D4AF37\]:hover { color: #D4AF37; }
.w-3\.5 { width: 0.875rem; }
.h-3\.5 { height: 0.875rem; }
.tracking-\[0\.28em\] { letter-spacing: 0.28em; }
.h-8 { height: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.max-w-\[290px\] { max-width: 290px; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.pt-12 { padding-top: 3rem; }
.mt-10 { margin-top: 2.5rem; }
.shadow-\[0_15px_45px_rgba\(74\,52\,40\,0\.04\)\] { box-shadow: 0 15px 45px rgba(74,52,40,0.04); }
.max-w-3xl { max-width: 48rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.bg-\[\#C8AA7D\] { background-color: #C8AA7D; }
.w-\[85\%\] { width: 85%; }
.w-\[45\%\] { width: 45%; }
.mt-12 { margin-top: 3rem; }
.text-\[\#C8AA7D\] { color: #C8AA7D; }
.h-\[1px\] { height: 1px; }
.w-16 { width: 4rem; }
.hover\:text-\[\#C8AA7D\]:hover { color: #C8AA7D; }
.w-\[40\%\] { width: 40%; }
.w-\[90\%\] { width: 90%; }
.aspect-\[2\/3\] { aspect-ratio: 2 / 3; }
.h-\[3px\] { height: 3px; }
.max-w-\[700px\] { max-width: 700px; }
.w-\[50\%\] { width: 50%; }
.rotate-3 { transform: rotate(3deg); }
.w-\[35\%\] { width: 35%; }
.aspect-square { aspect-ratio: 1 / 1; }
.p-10 { padding: 2.5rem; }
.w-\[80\%\] { width: 80%; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.hover\:scale-105:hover { transform: scale(1.05); }
.w-\[60\%\] { width: 60%; }
.gap-16 { gap: 4rem; }
.p-12 { padding: 3rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.mt-5 { margin-top: 1.25rem; }
.max-w-\[850px\] { max-width: 850px; }
.shadow-\[0_20px_50px_rgba\(74\,52\,40\,0\.07\)\] { box-shadow: 0 20px 50px rgba(74,52,40,0.07); }
.mb-10 { margin-bottom: 2.5rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }

@media (min-width: 640px) {
  .sm\:max-w-\[660px\] { max-width: 660px; }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .sm\:w-\[35\%\] { width: 35%; }
  .sm\:translate-y-6 { transform: translateY(1.5rem); }
  .sm\:-ml-14 { margin-left: -3.5rem; }
  .sm\:translate-y-8 { transform: translateY(2rem); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:w-6 { width: 1.5rem; }
  .sm\:h-6 { height: 1.5rem; }
  .sm\:space-y-6 > * + * { margin-top: 1.5rem; }
  .sm\:tracking-\[0\.25em\] { letter-spacing: 0.25em; }
  .sm\:space-y-4 > * + * { margin-top: 1rem; }
  .sm\:p-7 { padding: 1.75rem; }
  .sm\:w-16 { width: 4rem; }
  .sm\:h-16 { height: 4rem; }
  .sm\:w-8 { width: 2rem; }
  .sm\:h-8 { height: 2rem; }
  .sm\:tracking-\[0\.2em\] { letter-spacing: 0.2em; }
  .sm\:w-5 { width: 1.25rem; }
  .sm\:h-5 { height: 1.25rem; }
  .sm\:w-3 { width: 0.75rem; }
  .sm\:h-3 { height: 0.75rem; }
  .sm\:pt-2 { padding-top: 0.5rem; }
  .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .sm\:max-w-\[380px\] { max-width: 380px; }
  .sm\:w-auto { width: auto; }
}

@media (min-width: 768px) {
  .md\:mb-16 { margin-bottom: 4rem; }
  .md\:p-9 { padding: 2.25rem; }
  .md\:p-11 { padding: 2.75rem; }
  .md\:mb-24 { margin-bottom: 6rem; }
  .md\:mb-32 { margin-bottom: 8rem; }
  .md\:h-\[460px\] { height: 460px; }
  .md\:gap-4 { gap: 1rem; }
  .md\:pt-2 { padding-top: 0.5rem; }
  .md\:pb-24 { padding-bottom: 6rem; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:p-16 { padding: 4rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .md\:space-y-20 > * + * { margin-top: 5rem; }
  .md\:p-8 { padding: 2rem; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:pt-0 { padding-top: 0rem; }
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:h-72 { height: 18rem; }
  .md\:p-14 { padding: 3.5rem; }
  .md\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .md\:mb-8 { margin-bottom: 2rem; }
  .md\:py-0 { padding-top: 0rem; padding-bottom: 0rem; }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .md\:col-span-5 { grid-column: span 5 / span 5 !important; }
  .md\:col-span-7 { grid-column: span 7 / span 7 !important; }
  .md\:mt-0 { margin-top: 0rem; }
  .md\:w-\[75\%\] { width: 75%; }
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:gap-10 { gap: 2.5rem; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .lg\:gap-20 { gap: 5rem; }
  .lg\:col-span-7 { grid-column: span 7 / span 7 !important; }
  .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }
  .lg\:pt-48 { padding-top: 12rem; }
  .lg\:pt-8 { padding-top: 2rem; }
  .lg\:pb-8 { padding-bottom: 2rem; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .lg\:space-y-8 > * + * { margin-top: 2rem; }
  .lg\:text-\[3\.25rem\] { font-size: 3.25rem; }
  .lg\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .lg\:max-w-\[780px\] { max-width: 780px; }
  .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .lg\:w-\[39\%\] { width: 39%; }
  .lg\:hover\:scale-128:hover { transform: scale(1.28) !important; }
  .lg\:-ml-16 { margin-left: -4rem; }
  .lg\:pt-32 { padding-top: 8rem; }
  .lg\:p-24 { padding: 6rem; }
  .lg\:gap-8 { gap: 2rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:p-16 { padding: 4rem; }
  .lg\:col-span-4 { grid-column: span 4 / span 4 !important; }
  .lg\:my-0 { margin-top: 0rem; margin-bottom: 0rem; }
  .lg\:max-w-\[420px\] { max-width: 420px; }
  .lg\:h-\[540px\] { height: 540px; }
  .lg\:gap-24 { gap: 6rem; }
  .lg\:mt-0 { margin-top: 0rem; }
}

@media (min-width: 1280px) {
  .xl\:text-\[3\.5rem\] { font-size: 3.5rem; }
  .xl\:max-w-\[820px\] { max-width: 820px; }
  .xl\:-ml-18 { margin-left: -4.5rem; }
}