/* ============================================================
   C&Y Fashion — Design System
   Boutique elegant, whitespace-first, single navy accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;1,300;1,400&family=Public+Sans:wght@400;500;600&display=swap');

:root{
  /* Hero editorial palette */
  --ivory: #F6F1E9;
  --ink:   #2B3A67;
  --navy:  #1F2A3D;
  --gold:  #B08D57;
  --clay:  #E4CBB8;
  --muted: #5C564C;
  --f-fraunces: 'Fraunces', Georgia, serif;
  --f-public: 'Public Sans', 'Segoe UI', sans-serif;

  /* Colors */
  --c-bg:        #FAF8F4;
  --c-bg-alt:    #F1EBE2;
  --c-surface:   #FFFFFF;
  --c-card-alt:  #dce3ea;
  --c-ink:       #24231F;
  --c-ink-soft:  #6E6A62;
  --c-ink-faint: #A79F92;
  --c-line:      #E4DDD1;
  --c-accent:    #2E3B57;
  --c-accent-2:  #47597F;
  --c-accent-tint: #EDF0F5;
  --c-overlay:   rgba(24,26,32,.46);

  /* Type */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-sans: 'Jost', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.6rem, 3.6vw + 1.2rem, 5.25rem);
  --fs-h2: clamp(2.1rem, 2.1vw + 1.2rem, 3.15rem);
  --fs-h3: clamp(1.5rem, 1vw + 1rem, 2rem);
  --fs-h4: clamp(1.15rem, .4vw + 1rem, 1.4rem);
  --fs-lead: clamp(1.05rem, .4vw + .95rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-label: .78rem;

  /* Spacing */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5.5rem;
  --sp-7: 8rem;

  --container: 1280px;
  --container-narrow: 860px;
  --ease: cubic-bezier(.16,1,.3,1);
  --nav-h: 92px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }
h1,h2,h3,h4,h5{
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 var(--sp-2);
  color: var(--c-ink);
}
h1{ font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.01em; }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); font-family: var(--f-sans); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
p{ margin: 0 0 var(--sp-2); color: var(--c-ink-soft); }
.lead{ font-size: var(--fs-lead); color: var(--c-ink-soft); font-weight: 300; }

svg.icon{ fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible{ outline: 2px solid var(--c-accent); outline-offset: 3px; }
::selection{ background: var(--c-accent); color: #fff; }

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

/* ---------- Layout helpers ---------- */
.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }
.container-narrow{ max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--sp-4); }
.section{ padding-block: var(--sp-7); }
.section-tight{ padding-block: var(--sp-6); }
.section-alt{ background: var(--c-bg-alt); }
.section-dark{ background: var(--c-accent); color: #EDEFF3; padding-block: var(--sp-4); }
.section-dark p, .section-dark .lead{ color: #C7CEDB; }
.section-dark h1, .section-dark h2, .section-dark h3{ color: #fff; }

.hstack{ display: flex; align-items: center; }
.vstack{ display: flex; flex-direction: column; }
.gap-1{ gap: var(--sp-1); } .gap-2{ gap: var(--sp-2); } .gap-3{ gap: var(--sp-3); }
.center-text{ text-align: center; }

.eyebrow{
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.eyebrow::before{ content: ""; width: 28px; height: 1px; background: var(--c-accent); display: inline-block; }
.section-dark .eyebrow{ color: #C7CEDB; }
.section-dark .eyebrow::before{ background: #C7CEDB; }

.section-head{ max-width: 640px; margin-bottom: var(--sp-5); }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head.split{ display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); max-width: none; }

.divider{ width: 60px; height: 1px; background: var(--c-accent); border: 0; margin: var(--sp-3) 0; }
.hr-line{ border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-6) 0; }

/* ---------- Buttons ---------- */
.btn{
  position: relative;
  display: inline-flex; align-items: center; gap: .75rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  border: 1px solid var(--c-accent); background: transparent; color: var(--c-accent);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.btn svg{ width: 15px; height: 11px; transition: transform .45s var(--ease); flex: none; }
.btn:hover{ transform: translateY(-2px); }
.btn:hover svg{ transform: translateX(5px); }
.btn-primary{ background: var(--c-accent); color: #fff; }
.btn-primary:hover{ background: var(--c-ink); border-color: var(--c-ink); }
.btn-outline:hover{ background: var(--c-accent); color: #fff; }
.btn-light{ background: #fff; color: var(--c-accent); border: none; }
.btn-light:hover{ opacity: .85; }
.btn-sm{ padding: .62rem 1.2rem; font-size: .68rem; }
.btn-round{ border-radius: 999px; }
.btn-block{ width: 100%; justify-content: center; }
.btn-outline-ink{ border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline-ink:hover{ background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* ============================================================
   Navigation
   ============================================================ */
.site-header{
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center;
  color: var(--c-ink);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), height .4s var(--ease), border-color .5s var(--ease), color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--sp-3); padding-inline: var(--sp-5); }
.site-header.is-transparent{ background: transparent; color: #fff; }
.site-header.is-solid, .site-header.is-scrolled{
  background: rgba(250,248,244,.92); backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(20,20,10,.06);
  border-color: var(--c-line);
  height: 76px;
  color: var(--c-ink);
}
.site-header.is-editorial{
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--clay);
}
.site-header.is-editorial .brand img{ height: 54px; }
.site-header.is-editorial .nav-links a{ font-size: .95rem; font-weight: 600; }
.site-header.is-editorial .lang-btn{ font-size: .92rem; font-weight: 600; }

.brand{ display: flex; align-items: center; gap: .7rem; z-index: 2; }
.brand img{ height: 40px; width: auto; transition: height .4s var(--ease); }
.is-scrolled .brand img{ height: 34px; }
.brand-name{ font-family: var(--f-display); font-size: 1.2rem; letter-spacing: .02em; }

.nav-links{ display: flex; align-items: center; gap: var(--sp-4); }
.nav-links a{
  position: relative; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  padding: .4rem 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ transform: scaleX(1); transform-origin: left; }
.nav-links a.is-active{ color: var(--c-accent); }

.nav-right{ display: flex; align-items: center; gap: var(--sp-3); }

/* Language selector (design-only) */
.lang-select{ position: relative; }
.lang-btn{
  display: flex; align-items: center; gap: .45rem; background: none; border: none; color: inherit;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding: .4rem .2rem;
}
.lang-btn svg{ width: 9px; height: 9px; transition: transform .3s var(--ease); }
.lang-select.is-open .lang-btn svg{ transform: rotate(180deg); }
.lang-menu{
  position: absolute; top: calc(100% + 14px); right: 0; min-width: 168px;
  background: #fff; border: 1px solid var(--c-line); box-shadow: 0 20px 40px rgba(20,20,10,.1);
  padding: .4rem; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.lang-select.is-open .lang-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu button{
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  background: none; border: none; text-align: left; padding: .65rem .75rem; font-size: .82rem; color: var(--c-ink);
}
.lang-menu button:hover{ background: var(--c-accent-tint); }
.lang-menu button[aria-current="true"]{ color: var(--c-accent); font-weight: 500; }
.lang-menu button[aria-current="true"]::after{ content:"●"; font-size: .5rem; color: var(--c-accent); }
.lang-menu .tag-soon{ font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-faint); }

.nav-toggle{
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  width: 42px; height: 42px; background: none; border: none; z-index: 2;
}
.nav-toggle span{ display:block; width: 100%; height: 1px; background: currentColor; transition: transform .4s var(--ease), opacity .3s var(--ease); }

/* Compact dropdown under the header, not a full-screen takeover — a
   5-link menu doesn't need the whole viewport. */
.mobile-panel{
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 480;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 16px 32px rgba(20,20,10,.14);
  display: flex; flex-direction: column; align-items: stretch;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mobile-panel.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-panel a{
  font-family: var(--f-sans); font-size: 1rem; font-weight: 500;
  padding: .8rem 0; border-bottom: 1px solid var(--c-line);
}
.mobile-panel .btn{ margin-top: var(--sp-2); align-self: stretch; justify-content: center; border-bottom: none; }

body.nav-open{ overflow: hidden; }

/* ============================================================
   Hero — editorial split panel
   ============================================================ */
.hero{
  /* min-height (not height) so the section can grow past a full screen
     instead of clipping hero-actions when the heading wraps to extra
     lines — happens on wide viewports where the clamp() hits its max
     font-size, or with longer translations of the heading/lead text. */
  position: relative; display: flex; min-height: calc(100vh - var(--nav-h));
  margin-top: var(--nav-h);
  overflow: hidden;
}

.hero-left{
  width: 58%; background: var(--ivory);
  display: flex; align-items: flex-start;
  padding: calc(var(--sp-2) + .6rem) var(--sp-6) var(--sp-6);
}
.hero-left-inner{ max-width: 600px; }

.hero-left .eyebrow{
  font-family: var(--f-public); font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.hero-left .eyebrow::before{ background: var(--gold); }

.hero-left h1{
  font-family: var(--f-fraunces); font-weight: 400; font-style: normal;
  /* Capped lower than before (was 3.9rem) — at the old cap, on wide
     viewports the heading wrapped to enough lines to push hero-actions
     past the fold. */
  font-size: clamp(2.4rem, 2.2vw + 1.4rem, 3.3rem);
  line-height: 1.15; letter-spacing: 0; color: var(--ink);
  margin: 0 0 var(--sp-3);
}
.hero-left h1 em{ font-style: italic; font-weight: 300; color: var(--gold); }
.hero-left h1 .f-alt{ font-family: Georgia, serif; font-weight: 400; }

.hero-left p{
  font-family: var(--f-public); font-weight: 400;
  color: var(--muted); font-size: 1.05rem; line-height: 1.75; max-width: 46ch;
}

.hero-actions{ display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); flex-wrap: wrap; }

.btn-hero-primary{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.6rem; background: var(--ink); color: var(--ivory);
  font-family: var(--f-public); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  border: 1px solid var(--ink); border-radius: 8px;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease);
}
.btn-hero-primary svg{ width: 14px; height: 10px; transition: transform .35s var(--ease); flex: none; }
.btn-hero-primary:hover{
  background: var(--navy); border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(31,42,61,.18);
}
.btn-hero-primary:hover svg{ transform: translateX(4px); }

.hero-link-secondary{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .74rem 1.6rem;
  font-family: var(--f-public); font-size: .98rem; font-weight: 500; color: var(--ink);
  border: 1px solid var(--gold); border-radius: 8px; background: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
}
.hero-link-secondary svg{ width: 13px; height: 10px; transition: transform .35s var(--ease); flex: none; }
.hero-link-secondary:hover{ background: rgba(176,141,87,.1); border-color: var(--ink); transform: translateY(-1px); }
.hero-link-secondary:hover svg{ transform: translateX(4px); }

/* Right panel — image */
.hero-right{
  position: relative; width: 42%; background: var(--navy); overflow: hidden;
}
.hero-right img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
}
.hero-right::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ivory) 0%, rgba(246,241,233,0) 5%),
    linear-gradient(180deg, rgba(31,42,61,.35) 0%, transparent 20%, transparent 75%, rgba(31,42,61,.5) 100%);
  pointer-events: none;
}

/* Promotions hero variant: left content centered vertically except the eyebrow,
   which stays pinned to the top (and a little lower than the default hero). */
.hero--promo .hero-left{ width: 50%; }
.hero--promo .hero-right{ width: 50%; }
.hero--promo .hero-right img{ object-fit: cover; object-position: center 18%; }
.hero--promo .hero-left{
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero--promo .hero-left > .eyebrow{ margin-top: var(--sp-3); }
.hero--promo .hero-left-inner{
  flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: var(--sp-4); padding-top: 2rem;
}
.hero--promo .hero-left h1{ margin-bottom: 0; }
.hero--promo .hero-left p{ margin-bottom: 0; }
.hero--promo .hero-actions{
  gap: var(--sp-5); margin-top: 0;
  width: 100%; justify-content: center;
}
/* Same outline style as "Programează o consultație" on Despre, a touch smaller, equal width */
.hero--promo .hero-actions .hero-link-secondary{
  padding: .6rem 1.3rem; font-size: .88rem;
  min-width: 200px; justify-content: center;
}
.hero--promo .hero-badges{ width: 108%; max-width: 108%; height: auto; margin-top: 0; }

@media (min-width: 901px){
  .hero--promo .hero-actions{ flex-wrap: nowrap; }
}

/* Narrower photo panel on the About hero — hero-left picks up the difference,
   but its content (hero-left-inner) is capped at max-width: 600px, so the
   extra width just becomes ivory margin around the text, not a wider column. */
.hero--about .hero-left{ width: 50%; }
.hero--about .hero-right{ width: 50%; }
/* The client cropped stand.jpg themselves and wants exactly that framing
   shown — no further cropping or zooming from CSS. object-fit: cover would
   crop it (there's no panel width that shows the whole photo full-height
   without cropping), so instead the panel is locked to the photo's own
   aspect ratio (1554/1245) and doesn't stretch to the section's height —
   align-self: flex-start opts it out of the row's default stretch. With the
   panel's shape equal to the photo's shape, cover fills it exactly: the
   whole photo, unmodified, no crop, no letterbox bars either. hero-left
   still stretches (default) to match, so the ivory column fills in behind
   it at whatever height the photo ends up needing at a given width — this
   is why the section is no longer forced to a full viewport height below. */
.hero--about .hero-right{
  align-self: flex-start; aspect-ratio: 1554 / 1245; height: auto;
}
.hero--about .hero-right img{
  object-fit: cover; object-position: center;
}
/* stand.jpg's banner starts right at the file's left edge, and with the
   panel's aspect ratio matching the photo's, the image always fills the
   panel edge-to-edge, so this fade blends that hard pixel seam into
   hero-left's ivory background. */
.hero--about .hero-right::after{
  background:
    linear-gradient(90deg, var(--ivory) 0%, rgba(246,241,233,0) 1.5%),
    linear-gradient(180deg, rgba(31,42,61,.35) 0%, transparent 20%, transparent 75%, rgba(31,42,61,.5) 100%);
}
.hero--about{
  /* The base .hero rule sets min-height: calc(100vh - var(--nav-h)) (a full
     screen) — that only worked with a photo panel that stretched to fill
     it via cover-crop. Now that the panel's height instead follows the
     photo's own aspect ratio (see above), forcing a full-screen minimum
     would leave a blank gap under a photo that's shorter than the screen,
     so the About hero opts out and sizes to its content instead — same
     idea the mobile layout already uses, just no longer mobile-only. */
  min-height: auto;
}
@media (min-width: 901px){
  /* Forcing the CTAs onto one row (borrowed from .hero--promo) avoids the
     second, wrapped button row that used to push the section past the
     viewport on narrower desktop widths. The tighter gap/padding/font on
     both buttons buys back the room nowrap needs to avoid overflow, and
     the reduced side padding on hero-left buys back a bit more. */
  .hero--about .hero-left{
    padding-left: var(--sp-4); padding-right: var(--sp-4); padding-bottom: var(--sp-5);
  }
  .hero--about .hero-left h1{ margin-bottom: var(--sp-2); }
  .hero--about .hero-actions{ flex-wrap: nowrap; gap: .6rem; margin-top: var(--sp-2); }
  .hero--about .hero-actions .btn-hero-primary{
    padding: .72rem .85rem; white-space: nowrap; flex: none;
  }
  .hero--about .hero-actions .hero-link-secondary{
    padding: .6rem .8rem; font-size: .8rem; white-space: nowrap; flex: none;
  }
  /* min-width is the CTA row's floor (measured with the compact button
     styling above, then rounded up): below it hero-left stops shrinking so
     the buttons never overflow into the photo, and hero-right (flex: 1,
     below) gives up width instead — this only bites at the narrowest end
     of the desktop range. The 50/50 split itself just carries over from
     the base rule above. */
  .hero--about .hero-left{ width: 50%; min-width: 465px; flex-shrink: 1; }
  .hero--about .hero-right{ width: 50%; flex: 1 1 auto; min-width: 280px; }
}

.page-hero{
  position: relative; min-height: 56vh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; margin-top: 0;
}
.page-hero img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,15,15,.35), rgba(10,10,10,.6)); }
.page-hero .container{ position: relative; z-index: 1; padding-bottom: var(--sp-5); padding-top: calc(var(--nav-h) + var(--sp-5)); }
.page-hero .eyebrow, .page-hero .eyebrow::before{ color: #E7E1D6; }
.page-hero h1{ color: #fff; }
.page-hero p{ color: rgba(255,255,255,.85); max-width: 560px; }

.breadcrumb{ position: relative; z-index: 1; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: var(--sp-2); }
.breadcrumb a:hover{ color: #fff; }
.breadcrumb span{ margin: 0 .5em; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: none; }
.reveal-delay-1{ transition-delay: .12s; }
.reveal-delay-2{ transition-delay: .24s; }
.reveal-delay-3{ transition-delay: .36s; }

/* ============================================================
   Cards & feature blocks
   ============================================================ */
.grid{ display: grid; gap: var(--sp-4); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   Decorative pattern-cut lines (Pasiune pentru eleganță)
   ============================================================ */
.eleganta-deco{
  position: absolute;
  top: 20px;
  bottom: 20px;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.eleganta-deco--left{ left: 1.75rem; }
.eleganta-deco--right{ right: 1.75rem; }
.eleganta-deco__line{
  flex: 1 1 auto;
  width: 2px;
  min-height: 0;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}
.eleganta-deco__line line{ stroke: #2B3A67; stroke-width: 1.5; stroke-dasharray: 24 9; }
.eleganta-deco__scissors{ flex: 0 0 auto; width: 50.6px; height: 50.6px; margin: 22px 0; }
.eleganta-deco--left .eleganta-deco__scissors{ transform: rotate(100deg); }
.eleganta-deco--right .eleganta-deco__scissors{ transform: rotate(-80deg); }

.media-frame{ position: relative; overflow: hidden; background: var(--c-bg-alt); }
.media-frame img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.media-frame:hover img{ transform: scale(1.055); }
.ratio-portrait{ aspect-ratio: 3/4; }
.ratio-tall{ aspect-ratio: 4/5.4; }
.ratio-square{ aspect-ratio: 1/1; }
.ratio-wide{ aspect-ratio: 16/10; }

.feature-card{ display: block; }
.feature-card .cap{ padding-top: var(--sp-2); }
.feature-card .cap .tag{ font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-faint); }
.feature-card .cap h3{ margin: .35rem 0; }
.feature-card .cap p{ margin: 0; }
.feature-card .cap .link{ display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }
.feature-card .cap .link svg{ width: 13px; height: 10px; transition: transform .4s var(--ease); }
.feature-card:hover .cap .link svg{ transform: translateX(5px); }

.overlay-card{ position: relative; overflow: hidden; color: #fff; }
.overlay-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.overlay-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(8,8,8,.72) 100%); }
.overlay-card:hover img{ transform: scale(1.06); }
.overlay-card .cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding: var(--sp-3); }
.overlay-card .cap .tag{ font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #E7E1D6; }
.overlay-card .cap h3{ color: #fff; margin: .3rem 0 0; }

/* Values / why-us list */
.value-row{ display: grid; grid-template-columns: 90px 1fr; gap: var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--c-line); }
.value-row:last-child{ border-bottom: 1px solid var(--c-line); }
.value-row .num{ font-family: var(--f-display); font-size: 1.6rem; color: var(--c-ink-faint); }
.value-row h4{ text-transform: none; letter-spacing: 0; font-family: var(--f-display); font-size: 1.25rem; font-weight: 500; }

.icon-tile{ width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-line); margin-bottom: var(--sp-2); }
.icon-tile svg{ width: 22px; height: 22px; stroke: var(--c-accent); fill: none; }

/* Stat strip */
.stat{ text-align: center; }
.stat .n{ font-family: var(--f-display); font-size: clamp(2rem, 2vw + 1.2rem, 3.2rem); color: var(--c-accent); }
.stat .l{ font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft); margin-top: .3rem; }

/* ============================================================
   Testimonials
   ============================================================ */
.quote-card{ background: var(--c-surface); border: 1px solid var(--c-line); padding: var(--sp-4); height: 100%; }
.quote-card .stars{ color: var(--c-accent); letter-spacing: .2em; font-size: .85rem; margin-bottom: var(--sp-2); }
.quote-card p{ font-family: var(--f-display); font-style: italic; font-size: 1.08rem; color: var(--c-ink); }
.quote-who{ display: flex; align-items: center; gap: .8rem; margin-top: var(--sp-3); }
.quote-who img{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.quote-who .name{ font-size: .88rem; font-weight: 500; }
.quote-who .role{ font-size: .76rem; color: var(--c-ink-faint); }
.quote-avatar{
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--c-accent-tint); display: flex; align-items: center; justify-content: center;
}
.quote-avatar svg{ width: 20px; height: 20px; stroke: var(--c-accent); fill: none; }

.quote-photos{ display: flex; gap: .6rem; margin-top: var(--sp-3); flex-wrap: wrap; }
.quote-photos a{ display: block; flex: none; cursor: zoom-in; }
.quote-photos img{ width: 130px; height: 130px; object-fit: cover; border-radius: 4px; transition: opacity .25s var(--ease); }
.quote-photos a:hover img{ opacity: .85; }

.placeholder-flag{
  display: inline-flex; align-self: flex-start; margin-bottom: var(--sp-2);
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-faint); border: 1px dashed var(--c-line); padding: .3rem .6rem;
}

/* Quotes masonry — cards vary in height (some carry photos), so a column
   flow lets each stack to its own content height instead of stretching
   every card in a row to match the tallest one. */
.quotes-masonry{ column-count: 3; column-gap: var(--sp-4); }
.quotes-masonry .quote-card{ break-inside: avoid; margin-bottom: var(--sp-4); height: auto; }

.rail{ display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); scrollbar-width: none; }
.rail::-webkit-scrollbar{ display: none; }
.rail > *{ scroll-snap-align: start; flex: 0 0 auto; }
.rail-controls{ display: flex; justify-content: flex-end; gap: .6rem; margin-top: var(--sp-3); }
.rail-btn{ width: 46px; height: 46px; border: 1px solid var(--c-line); background: none; display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), border-color .3s var(--ease); }
.rail-btn:hover{ background: var(--c-accent); border-color: var(--c-accent); }
.rail-btn:hover svg{ stroke: #fff; }
.rail-btn svg{ width: 16px; height: 16px; stroke: var(--c-ink); fill: none; transition: stroke .3s var(--ease); }

/* ============================================================
   Collections
   ============================================================ */

/* Centered intro hero — mirrors the hero-left type system (Fraunces + gold italic + Public Sans), no split image */
.collections-hero{ padding-top: calc(var(--nav-h) + var(--sp-3)); padding-bottom: var(--sp-2); }
.collections-hero + .section{ padding-top: var(--sp-3); }
body[data-page="collections"] main > .section{ padding-bottom: var(--sp-3); }
body[data-page="collections"] main > .section + .section-tight{ padding-top: var(--sp-3); }
.collections-hero .eyebrow{
  justify-content: center;
  font-family: var(--f-public); font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.collections-hero .eyebrow::before, .collections-hero .eyebrow::after{
  content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block;
}
.collections-hero h1{
  font-family: var(--f-fraunces); font-weight: 400; font-style: normal;
  font-size: clamp(2.4rem, 2.6vw + 1.4rem, 3.9rem); line-height: 1.15; color: var(--ink);
  margin: 0 0 var(--sp-2);
}
.collections-hero h1 em{ font-style: italic; font-weight: 300; color: var(--gold); }
.collections-hero .lead{
  font-family: var(--f-public); font-weight: 400; color: var(--muted);
  font-size: 1.05rem; max-width: 52ch; margin-inline: auto;
}

.collection-card{
  position: relative; display: block; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  max-width: 420px; margin-inline: auto; width: 100%;
}
.collection-card:hover{ box-shadow: 0 16px 32px -18px rgba(43,58,103,.25); transform: translateY(-2px); }
.collection-card .media-frame{ margin-bottom: 0; aspect-ratio: 4 / 3.4; }
.collection-card .media-frame img{ object-position: top center; }
.collection-card-body{ padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.collection-card .badge{
  display: inline-block;
  background: #F5EBD2; color: #8A6D2F; font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: .4rem .85rem; border-radius: 999px; margin-bottom: var(--sp-2);
}
.collection-card h3{ margin-bottom: .25rem; }
.collection-card .desc{ max-width: 46ch; }
.collection-card .card-link{ display: flex; justify-content: center; width: 100%; font-size: 1.05rem; }
.collection-card .card-link svg{ width: 16px; height: 12px; }

/* Bold inline text-link (image caption / card CTA that isn't a full button) */
.card-link{
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem;
  font-family: var(--f-sans); font-size: .85rem; font-weight: 700; color: var(--c-accent);
}
.card-link svg{ width: 13px; height: 10px; transition: transform .4s var(--ease); flex: none; }
.card-link:hover svg{ transform: translateX(5px); }

/* Masonry-style gallery */
.masonry{ column-count: 3; column-gap: var(--sp-3); }
.masonry .m-item{ break-inside: avoid; margin-bottom: var(--sp-3); position: relative; overflow: hidden; cursor: zoom-in; }
.masonry .m-item img{ width: 100%; display: block; transition: transform 1s var(--ease); }
.masonry .m-item:hover img{ transform: scale(1.04); }
.masonry .m-item::after{ content:""; position:absolute; inset:0; background: rgba(46,59,87,0); transition: background .4s var(--ease); }
.masonry .m-item:hover::after{ background: rgba(46,59,87,.08); }

/* Collection video (rendered above or below the gallery, per collection).
   Source clips are vertical (phone-shot, ~9:16), so the block is capped to a
   phone-preview width instead of stretching full-container like the gallery. */
.collection-video{ max-width: 360px; margin: 0 auto var(--sp-5); }
.collection-video video{
  width: 100%; display: block; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px;
  border: 1px solid var(--c-line); background: var(--ink);
  box-shadow: 0 16px 32px -18px rgba(43,58,103,.25);
}

/* Lightbox */
.lightbox{ position: fixed; inset: 0; z-index: 900; background: rgba(14,13,12,.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox figure{ margin: 0; max-width: min(90vw, 1000px); max-height: 86vh; text-align: center; }
.lightbox img{ max-width: 100%; max-height: 78vh; margin-inline: auto; object-fit: contain; }
.lightbox figcaption{ color: #E7E1D6; font-size: .82rem; letter-spacing: .06em; margin-top: var(--sp-2); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position: absolute; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.lightbox-close{ top: var(--sp-3); right: var(--sp-3); width: 46px; height: 46px; }
.lightbox-prev, .lightbox-next{ top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox-prev{ left: var(--sp-3); } .lightbox-next{ right: var(--sp-3); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width: 18px; height: 18px; stroke: #fff; fill: none; }
.lightbox-count{ position: absolute; bottom: var(--sp-3); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .78rem; letter-spacing: .1em; }

/* ============================================================
   Promotions
   ============================================================ */
:root{ --c-price: #B5453D; }

/* The bridal and gala carousels sit back-to-back on this page; the default
   .section padding-block on both sides leaves an oversized gap between the
   last bridal card and the "Rochii de Gală" heading, so trim gala's top. */
#gala{ padding-top: var(--sp-4); }

.promo-section-head{ max-width: 640px; margin: 0 auto var(--sp-4); text-align: center; }
.promo-section-head h2{ color: var(--ink); }
.promo-section-head .lead{ font-size: 1.02rem; }

.promo-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }

.promo-card{
  position: relative; display: grid; grid-template-columns: 240px 1fr;
  background: var(--c-surface); border: 1px solid var(--c-line); overflow: hidden;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.promo-card:hover{ box-shadow: 0 30px 60px rgba(30,30,20,.1); transform: translateY(-4px); }
.promo-media-link{ display: block; cursor: zoom-in; }
.promo-card .media-frame{ margin: 0; aspect-ratio: 3/5; background: transparent; }
.promo-card .media-frame img{ object-fit: cover; object-position: left center; }
/* Cutout (background-removed) photos: show the whole figure instead of cropping.
   Height is trimmed slightly so tall/narrow cutouts get breathing room at the
   top instead of the figure touching the frame edge; anchored to the bottom
   so the card height itself is unchanged. */
.promo-card.has-cutout .media-frame img{
  object-fit: contain; object-position: center bottom;
  position: absolute; left: 0; bottom: 0; width: 100%; height: 94%;
}

.promo-card-body{ position: relative; z-index: 1; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: .55rem; }
.promo-tag{ display: inline-flex; align-self: flex-start; background: var(--c-accent-tint); color: var(--c-accent); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: .4rem .8rem; }
.promo-card-body h3{ margin: 0; }
.promo-card-body .desc{ max-width: 56ch; margin: 0; }

.promo-meta{ display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: .2rem; }
.promo-meta .l{ display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: .25rem; }
.promo-sizes{ color: var(--c-ink); font-weight: 500; }
.promo-discount{ color: var(--c-price); font-weight: 500; }
.promo-discount .l{ color: var(--c-price); opacity: .75; }

.promo-card .price{ display: flex; align-items: baseline; gap: .8rem; margin-top: auto; padding-top: .5rem; }
.promo-card .price .old{ text-decoration: line-through; color: var(--ink); font-size: .9rem; }
.promo-card .price .new{ font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; color: var(--c-price); }

/* Subtle line-art rose in the corner, transparent pale pink */
.promo-decor{
  position: absolute; top: -6px; right: -6px; width: 96px; height: 96px;
  color: #E8B9BE; opacity: .55; pointer-events: none; z-index: 0;
  fill: none; stroke: currentColor; stroke-width: 1.1;
}

/* Alternate card background for visual rhythm within a category.
   Uses its own tint (not --c-bg-alt) so it still reads against
   .section-alt sections, which share --c-bg-alt for their own background. */
.promo-card:nth-child(even){ background: var(--c-card-alt); }

/* ============================================================
   Careers
   ============================================================ */
.career-row{ display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-5); align-items: stretch; }
.career-row--reverse{ grid-template-columns: 1fr 1.15fr; }
.career-row + .career-row{ margin-top: var(--sp-6); }
.career-media{ position: relative; overflow: hidden; min-height: 600px; background: var(--c-bg-alt); }
.career-media--tall{ min-height: 700px; }
.career-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.career-media:hover img{ transform: scale(1.045); }
.career-content{ display: flex; flex-direction: column; justify-content: center; }
.career-content h3{ margin-bottom: var(--sp-2); color: var(--c-accent); font-size: clamp(1.7rem, 1.3vw + 1.1rem, 2.3rem); }
.career-content p{ font-size: 1.18rem; line-height: 1.85; }
.career-content .btn{ margin-top: var(--sp-2); align-self: flex-start; }
#cariere{ padding-top: var(--sp-5); }
#cariere .section-head h2{ color: var(--c-accent); font-size: clamp(2.6rem, 2.5vw + 1.4rem, 3.6rem); }
#cariere .section-head .lead{ font-size: clamp(1.15rem, .5vw + 1rem, 1.35rem); }

/* ============================================================
   Contact / forms
   ============================================================ */
.contact-card{
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px;
  padding: var(--sp-3) var(--sp-4); max-width: 560px; margin-inline: auto; width: 100%;
}
.contact-card .section-head{ margin-bottom: var(--sp-3); }
.contact-card .info-row{ padding-block: .7rem; }
.contact-card .map-frame{ aspect-ratio: 16/7; }
.contact-card--wide{ max-width: none; width: 85%; }
@media (max-width: 680px){
  .contact-card--wide{ width: 100%; }
}
.field{ margin-bottom: var(--sp-3); }
.field label{ display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: .5rem; }
.field input, .field textarea, .field select{
  width: 100%; border: none; border-bottom: 1px solid var(--c-line); background: transparent;
  padding: .8rem .2rem; color: var(--c-ink); transition: border-color .3s var(--ease);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--c-accent); outline: none; }
.field.has-error input, .field.has-error textarea{ border-color: #A5473F; }
.field .error-msg{ display: none; font-size: .74rem; color: #A5473F; margin-top: .4rem; }
.field.has-error .error-msg{ display: block; }
.form-note{ font-size: .78rem; color: var(--c-ink-faint); }
.form-success{ display: none; border: 1px solid var(--c-accent); background: var(--c-accent-tint); color: var(--c-accent); padding: var(--sp-3); font-size: .92rem; }
.form-success.is-visible{ display: block; }

.info-row{ display: flex; gap: var(--sp-2); padding-block: var(--sp-2); border-top: 1px solid var(--c-line); }
.info-row:last-child{ border-bottom: 1px solid var(--c-line); }
.info-row svg{ width: 20px; height: 20px; stroke: var(--c-accent); fill: none; flex: none; margin-top: 3px; }
.info-row .l{ font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: .2rem; }
.map-frame{ position: relative; width: 100%; aspect-ratio: 4/3; border: 1px solid var(--c-line); background: var(--c-bg-alt); }
.map-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
.hours-table{ width: 100%; border-collapse: collapse; }
.hours-table td{ padding: .6rem 0; border-top: 1px solid var(--c-line); font-size: .92rem; }
.hours-table td:last-child{ text-align: right; color: var(--c-ink-soft); }
.social-row{ display: flex; gap: .8rem; margin-top: var(--sp-3); }
.social-row a{ width: 44px; height: 44px; border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), border-color .3s var(--ease); }
.social-row a:hover{ background: var(--c-accent); border-color: var(--c-accent); }
.social-row a:hover svg{ stroke: #fff; }
.social-row svg{ width: 17px; height: 17px; stroke: var(--c-ink); fill: none; transition: stroke .3s var(--ease); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background: var(--c-bg-alt); border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.footer-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--sp-4); padding-bottom: var(--sp-3); }
.footer-brand{ max-width: 320px; margin-right: auto; }
.footer-brand img{ display: block; height: 56px; margin: 0 auto var(--sp-2) 0; }
.footer-brand .social-row{ justify-content: flex-start; margin-left: 0; }
.footer-col h4{ margin-bottom: var(--sp-2); color: var(--c-ink); }
.footer-col ul li{ margin-bottom: .65rem; }
.footer-col a:hover{ color: var(--c-accent); }
.footer-bottom{ border-top: 1px solid var(--c-line); padding-block: var(--sp-2); display: flex; justify-content: center; align-items: center; font-size: .78rem; color: var(--c-ink-faint); }

/* ============================================================
   Utilities
   ============================================================ */
[id]{ scroll-margin-top: calc(var(--nav-h) + 12px); }
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }
.text-soft{ color: var(--c-ink-soft); }
.text-white{ color: #fff; }
.skip-link{
  position: absolute; left: -999px; top: 0; background: var(--c-accent); color: #fff; padding: 1rem 1.5rem; z-index: 1000;
}
.skip-link:focus{ left: var(--sp-2); top: var(--sp-2); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap: var(--sp-4); }
  .masonry{ column-count: 2; }
  .quotes-masonry{ column-count: 2; }

  .footer-col{ text-align: center; }
}

@media (max-width: 768px){
  .eleganta-deco{ display: none; }
}

@media (max-width: 900px){
  :root{ --nav-h: 76px; }
  .nav-links{ display: none; }
  .nav-toggle{ display: flex; }
  .site-header .container{ padding-inline: var(--sp-4); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .section{ padding-block: var(--sp-6); }
  .section-tight:not(.collections-hero){ padding-block: var(--sp-5); }
  .section-head.split{ flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .hero{ flex-direction: column; height: auto; min-height: auto; overflow: visible; }
  .hero-left{ width: 100%; order: 1; padding: var(--sp-5) var(--sp-4); }
  .hero-right{ width: 100%; order: -1; height: 62vh; min-height: 360px; max-height: 520px; }
  .hero-right::after{
    background: linear-gradient(180deg, rgba(31,42,61,.35) 0%, transparent 20%, transparent 75%, rgba(31,42,61,.5) 100%);
  }
  /* .hero--about / .hero--promo set explicit widths for the desktop split-panel
     layout; those selectors are more specific than the rules above, so they must
     be re-asserted here to actually get full width on mobile. */
  .hero--about .hero-left, .hero--about .hero-right,
  .hero--promo .hero-left, .hero--promo .hero-right{ width: 100%; }
  /* The 62vh/360-520px height above is sized for .hero--promo's image, not
     stand.jpg — .hero--about already gets height:auto + aspect-ratio from
     the shared rule above, this just clears the min/max-height floor/cap
     so they can't force it away from that ratio on phone/tablet. */
  .hero--about .hero-right{ min-height: 0; max-height: none; }

  .hero--promo .hero-left > .eyebrow{ margin-top: 0; }
  .hero--promo .hero-left-inner{ padding-top: var(--sp-3); gap: var(--sp-3); }
  .hero--promo .hero-actions{ gap: var(--sp-3); }
  .hero--promo .hero-actions .hero-link-secondary{ min-width: 0; width: 100%; }
  .hero--promo .hero-badges{ width: 100%; max-width: 320px; margin-inline: auto; }

  .hero-left-inner{ text-align: center; margin-inline: auto; }
  .hero-left p{ margin-inline: auto; }
  .hero-actions{ justify-content: center; }

  .career-row, .career-row--reverse{ grid-template-columns: 1fr; gap: var(--sp-3); }
  .career-row + .career-row{ margin-top: var(--sp-5); }
  .career-media{ min-height: 0; aspect-ratio: 3 / 4; order: -1; }
  .career-media--tall{ aspect-ratio: 3 / 4; }
  .career-content{ align-items: center; text-align: center; }
  .career-content .btn{ align-self: center; }

  /* Promo cards become a one-at-a-time carousel with prev/next arrows */
  .promo-carousel{ position: relative; }
  .promo-grid{
    display: flex; grid-template-columns: none; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .promo-grid::-webkit-scrollbar{ display: none; }
  .promo-card{
    grid-template-columns: 1fr; flex: 0 0 100%; width: 100%; scroll-snap-align: start;
  }
  .promo-decor{ width: 72px; height: 72px; }

  .promo-carousel-btn{
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(250,248,244,.92); border: 1px solid var(--c-line);
    box-shadow: 0 6px 18px rgba(30,30,20,.16);
    transition: background .3s var(--ease), border-color .3s var(--ease);
  }
  .promo-carousel-btn:hover{ background: var(--c-accent); border-color: var(--c-accent); }
  .promo-carousel-btn:hover svg{ stroke: #fff; }
  .promo-carousel-btn svg{ width: 16px; height: 16px; stroke: var(--c-ink); fill: none; transition: stroke .3s var(--ease); }
  .promo-carousel-btn.is-prev{ left: 6px; }
  .promo-carousel-btn.is-next{ right: 6px; }
}

@media (min-width: 901px){
  .promo-carousel-btn{ display: none; }
}

@media (max-width: 639px){
  .container, .container-narrow{ padding-inline: var(--sp-3); }
  .site-header .container{ padding-inline: var(--sp-3); }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .masonry{ column-count: 1; }
  .quotes-masonry{ column-count: 1; }
  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; text-align: center; }
  .section{ padding-block: var(--sp-5); }
  .section-tight:not(.collections-hero){ padding-block: var(--sp-4); }
  .value-row{ grid-template-columns: 60px 1fr; }
  .lightbox-prev, .lightbox-next{ width: 42px; height: 42px; }
  .lightbox-prev{ left: var(--sp-1); } .lightbox-next{ right: var(--sp-1); }

  .promo-meta{ gap: var(--sp-3); }

  /* Section intros read better centered once they span the full width
     of a single mobile column; .split keeps its own layout (a heading
     paired with a right-aligned link) so it's excluded. */
  .section-head:not(.split){ text-align: center; margin-inline: auto; }

  /* On phones, keep only the brand block in the footer — Navigare/Contact/
     Program repeat what's already in the header nav and page content, and
     just add scroll length here. Tablet and up keep all four columns. */
  .footer-col{ display: none; }
}

@media (max-width: 560px){
  /* The fixed-position header has no room to wrap: brand logo + lang
     switch + "Contactează-ne" + hamburger no longer fit one row below
     this width, and the excess gets clipped instead of visibly
     overflowing. Drop the redundant CTA (it's duplicated in the
     mobile nav panel) and shrink the logo so the row always fits. */
  .nav-right .btn{ display: none; }
  .site-header.is-editorial .brand img{ height: 40px; }
}

/* Collection detail page: pull the title/dress-count text closer together at
   every breakpoint — must come after the responsive blocks above since it
   shares their specificity and needs to win regardless of viewport width. */
.collections-hero + .section-tight{ padding-top: var(--sp-3); }