/* ============================================================
   Concept "STUUDIO" — showroom / design-studio
   Visual direction referenced from cabstone.us: a serif display
   against a neutral sans, warm off-white surfaces, a single gold
   accent, generous rounding, and a floating pill header.
   Content and structure are Remondiabi24's own.
   ============================================================ */

:root {
  --bg:          #ffffff;
  --surface:     #edecea;      /* warm off-white panels */
  --surface-2:   #f6f5f3;
  --text:        #121212;      /* headings */
  --body:        #636363;      /* body copy — deliberately lighter than headings */
  --muted:       #8b8b8b;
  --line:        #e2e0dd;
  --accent:      #c9a873;      /* gold — eyebrows, rules, icons */
  --accent-deep: #a8872f;
  --cta:         #121212;      /* primary button */
  --cta-text:    #ffffff;
  --dark:        #121212;
  --dark-text:   #ededea;
  --dark-muted:  #9a9a98;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.15rem, 4vw, 4rem);
  --maxw: 1280px;
  --r:    20px;
  --r-sm: 10px;
  --pill: 50px;
  --ease: cubic-bezier(.2, .8, .25, 1);
  --shadow: 0 2px 6px rgba(18,18,18,.05), 0 18px 48px rgba(18,18,18,.08);
  --shadow-sm: 0 1px 3px rgba(18,18,18,.06), 0 6px 18px rgba(18,18,18,.06);
}

*, *::before, *::after { box-sizing: border-box; }
/* `clip`, not `hidden`: overflow-x:hidden turns the element into a scroll
   container, which silently kills position:sticky on the service stack. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 118px; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--text); letter-spacing: -.01em; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.75rem); line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.65rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .55vw, 1.5rem); }
p  { margin: 0; }
.lead { font-size: clamp(.9375rem, .92rem + .2vw, 1.0625rem); line-height: 1.75; max-width: 62ch; }

.eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--accent); margin: 0 0 .6rem; }

section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.head { max-width: 72ch; }
.head .lead { margin-top: 1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-body); font-size: .9375rem; font-weight: 500;
  text-decoration: none; padding: .95rem 1.6rem; border-radius: var(--pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .22s var(--ease), background .22s, color .22s, border-color .22s;
}
.btn--dark  { background: var(--cta); color: var(--cta-text); }
.btn--dark:hover  { background: #2c2c2c; transform: translateY(-2px); }
.btn--gold  { background: var(--accent); color: #1c1608; }
.btn--gold:hover  { background: #b8945d; transform: translateY(-2px); }
.btn--line  { border-color: var(--line); background: #fff; color: var(--text); }
.btn--line:hover  { border-color: var(--text); transform: translateY(-2px); }
.btn--light { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--light:hover { background: #fff; color: var(--text); border-color: #fff; }
.btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* =========================================================
   HEADER — floating pill, detached from the top edge
   ========================================================= */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 14px var(--gutter) 0; }
.hdr__in {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  background: rgba(246,245,243,.92); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: var(--pill);
  padding: .5rem .5rem .5rem 1.35rem; min-height: 62px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), background .3s;
}
.hdr.is-stuck .hdr__in { box-shadow: 0 6px 28px rgba(18,18,18,.12); background: rgba(255,255,255,.95); }

.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--text); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; }
.brand span { color: var(--accent-deep); }
.brand small { display: block; font-family: var(--font-body); font-size: .5rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }

.nav { display: flex; gap: 1.45rem; margin-inline: auto; }
.nav a { font-size: .875rem; font-weight: 500; color: var(--text); text-decoration: none; opacity: .78; transition: opacity .2s; }
.nav a:hover { opacity: 1; }

.hdr__end { display: flex; align-items: center; gap: .45rem; }
.langs { display: flex; gap: 1px; background: #fff; border: 1px solid var(--line); border-radius: var(--pill); padding: 2px; }
.langs button { font-family: var(--font-body); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; background: none; border: 0; padding: .35rem .5rem; border-radius: var(--pill); color: var(--muted); cursor: pointer; transition: .18s; }
.langs button.is-active { background: var(--text); color: #fff; }

.burger { display: none; width: 42px; height: 42px; position: relative; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; padding: 0; }
.burger span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; background: var(--text); border-radius: 2px; transform: translate(-50%, -50%) translateY(var(--y, 0)); transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { --y: -5.5px; }
.burger span:nth-child(3) { --y: 5.5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 55; background: var(--bg);
  padding: 6rem var(--gutter) 2.5rem; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer > a { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 7vw, 2.1rem); color: var(--text); text-decoration: none; padding-block: .6rem; border-bottom: 1px solid var(--line); }
.drawer__foot { margin-top: auto; padding-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }

/* =========================================================
   HERO — washed-out photo backdrop, text left, framed photo right
   ========================================================= */
.hero { position: relative; padding-block: clamp(7rem, 12vw, 10rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* the reference washes its hero photo almost to white so the serif stays legible */
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.55) 100%); }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

/* The hero column used to read as one unbroken block of text: eyebrow,
   four-line headline, a five-line lead and four bullets running straight on
   into each other. The copy lost its redundant half (the lead's tail and the
   fourth bullet both repeated what the panel below already says); these
   rules do the rest, by giving the three parts distinctly different weight
   and separating the bullets with a rule rather than just a gap. */
.hero h1 { margin-bottom: 1.4rem; max-width: 15ch; }
.hero__in .lead { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); max-width: 46ch; }
.hero__pts {
  list-style: none; padding: 0; display: grid; gap: .75rem;
  margin: 1.9rem 0 0; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.hero__pts li { display: flex; gap: .7rem; align-items: start; font-size: .875rem; line-height: 1.5; color: var(--body); }
.hero__pts svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-deep); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.1rem; }

/* ---------- hero photo stack ----------

   The single framed photo read as plain. Three layers now: a gold hairline
   frame offset behind, the main card, and a smaller card lapping over its
   bottom-left corner. White frames and soft shadows, as in the reference. */
.hero__stack { position: relative; padding-bottom: clamp(2rem, 5vw, 3.5rem); }

.hero__frame {
  position: absolute; z-index: 0;
  inset: clamp(1.25rem, 3vw, 2.25rem) calc(clamp(1.25rem, 3vw, 2.25rem) * -1)
         calc(clamp(1.25rem, 3vw, 2.25rem) * -1) clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--accent); border-radius: calc(var(--r) + 8px);
  opacity: .55; pointer-events: none;
}

.hero__card {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.72); border-radius: calc(var(--r) + 8px);
  padding: 14px; box-shadow: var(--shadow);
}
.hero__card img { width: 100%; aspect-ratio: 4/3; height: auto; object-fit: cover; border-radius: var(--r); }

.hero__card--sm {
  position: absolute; z-index: 2;
  left: clamp(-2rem, -3vw, -1rem); bottom: 0;
  width: clamp(9rem, 32%, 13rem);
  background: #fff; padding: 9px;
}
.hero__card--sm img { aspect-ratio: 1/1; }

/* ---------- the phone hero leads with the photo ----------

   Stacked, the hero used to open with the eyebrow, a four-line headline, a
   five-line lead, three bullets and two buttons before any photograph — the
   stack landed a full screen down, so on a phone the pitch for a renovation
   company showed no renovation. Below the two-column breakpoint the stack
   moves above the copy instead.

   The composition is rebuilt, not just reordered. The gold frame is offset
   up and to the RIGHT here (offset left, as on desktop, it would sit outside
   the 1.15rem gutter and clip), and the small card laps the main card's
   bottom-right corner rather than running off the left edge. */
@media (max-width: 960px) {
  /* less air above, so the photo starts high on the screen. 4.5rem clears
     the floating header pill (bottom edge ~57px) by about 12px. */
  .hero { padding-block: clamp(4rem, 13vw, 8rem) clamp(3rem, 6vw, 5rem); }
  .hero__grid { gap: 1.25rem; }

  /* padding-bottom is what the small card hangs into */
  .hero__stack { order: -1; padding-bottom: 2rem; margin-bottom: 0; }
  .hero h1 { margin-bottom: 1.1rem; }
  /* letterboxed, not 4:3: a phone screen is short and the copy still has to fit */
  .hero__card img { aspect-ratio: 16/9; }

  /* With a photo on top, the two buttons fell off the bottom of the screen
     behind the three proof bullets. On a phone the order flips: act first,
     read the detail after. Only the buttons are focusable, and they are the
     last focusable thing in the column either way, so tab order is unchanged. */
  .hero__in { display: flex; flex-direction: column; }
  .hero__pts { order: 1; margin-top: 1.5rem; padding-top: 1.3rem; }
  .hero__cta { margin-top: 1.3rem; }

  .hero__frame { inset: -.6rem -.6rem .6rem .6rem; }

  .hero__card--sm {
    left: auto; right: 1.15rem; bottom: 0;
    width: clamp(6.75rem, 26vw, 9.5rem);
    padding: 7px;
  }
}

/* =========================================================
   TRUST STRIP — an elevated panel straddling the hero edge

   The previous version was four numbers on hairline dividers, flat on the
   page, and read as a placeholder. This one is a raised plate pulled up
   over the hero's bottom edge, with an icon, a Playfair numeral and a gold
   rule that draws in per stat.
   ========================================================= */
/* No negative pull. An earlier version overlapped the hero's bottom edge to
   tie the two together; it read as the panel bleeding into the hero and
   crowding the buttons. It sits below the hero, clear of it. */
.trust { padding-block: clamp(1.75rem, 3.5vw, 3rem); }
.trust__panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;

  /* Pulled out by exactly its own inner padding plus its border, so the
     NUMBERS line up with the hero's headline and lead rather than the card's
     edge doing so. Aligning the box instead left the "29" sitting ~29px to
     the right of everything above it, which is what reads as misaligned —
     the eye follows the text, not the container.
     `--pad` keeps the two values in one place; change it, not the calc. */
  --pad: clamp(1rem, 2vw, 1.75rem);
  margin-inline: calc((var(--pad) + 1px) * -1);
}
.trust__i {
  position: relative; padding: clamp(1.4rem, 2.6vw, 2.1rem) var(--pad);
  display: flex; flex-direction: column; align-items: flex-start;
}
.trust__i + .trust__i { border-left: 1px solid var(--line); }

/* The gold rule, drawn in when the panel scrolls into view. Staggered with
   attribute selectors, matching the reveal convention further down this
   file — this concept has no `--d` custom property, so a calc() on one
   would silently resolve to 0 and all four rules would fire together.

   In flow, NOT absolutely positioned at bottom: 0. Pinned to the bottom it
   landed on the panel's own rounded edge, got clipped by `overflow: hidden`,
   and read as a stray mark instead of an accent. As a flex item it sits
   under the label with its own spacing, inside the cell's padding. */
.trust__i::after {
  content: ''; margin-top: 1rem;
  height: 2px; width: 2.25rem; background: var(--accent); flex: none;
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease) .25s;
}
.trust__i[data-d="1"]::after { transition-delay: .35s; }
.trust__i[data-d="2"]::after { transition-delay: .45s; }
.trust__i[data-d="3"]::after { transition-delay: .55s; }
.trust__i.is-in::after { transform: scaleX(1); }

.trust__ico {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: var(--surface); color: var(--accent-deep);
  margin-bottom: .9rem; flex: none;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.trust__ico svg { width: 1.1rem; height: 1.1rem; }
.trust__i:hover .trust__ico { background: var(--accent); color: #1c1608; }

.trust__n { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--text); line-height: 1; }
.trust__l { font-size: .8125rem; margin-top: .45rem; line-height: 1.4; }

@media (max-width: 860px) {
  .trust__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* At two columns "+ .trust__i" would draw a line down the left of the
     2nd, 3rd and 4th cells — including the one starting a new row. Rebuild
     the grid lines explicitly instead. */
  .trust__i + .trust__i { border-left: 0; }
  .trust__i:nth-child(even) { border-left: 1px solid var(--line); }
  .trust__i:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
/* On a phone the pull would put the card within a pixel of both screen
   edges, and the alignment it buys is invisible there anyway — the headline
   and the numbers are stacked far apart rather than side by side. Give the
   card its page margin back. */
@media (max-width: 620px) {
  .trust__panel { margin-inline: 0; }
}
/* ---------- phone: compact rows, not four stacked cards ----------

   Below 460px the four cells went one per row and each kept the tall
   portrait shape — icon, big numeral, label, rule, all stacked. Four of
   those in a column is a lot of height for very little information and it
   reads as filler.

   They become rows instead: icon on the left, numeral and label beside it,
   and the gold rule turned on its side as a tick at the right edge. Same
   markup — the cell becomes a small grid and the three children are placed
   by area, so nothing in the HTML needs to know about this. Roughly half
   the height, and it reads as a list of facts rather than four boxes. */
@media (max-width: 460px) {
  .trust__panel { grid-template-columns: 1fr; }
  .trust__i:nth-child(even) { border-left: 0; }
  .trust__i + .trust__i { border-top: 1px solid var(--line); }

  .trust__i {
    display: grid; align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ico num tick" "ico lbl tick";
    column-gap: 1rem; row-gap: .15rem;
    padding: 1.05rem var(--pad);
  }
  .trust__ico { grid-area: ico; margin-bottom: 0; align-self: center; }
  .trust__n { grid-area: num; align-self: end; font-size: 1.6rem; }
  .trust__l { grid-area: lbl; align-self: start; margin-top: 0; }
  .trust__i::after {
    grid-area: tick; align-self: center;
    margin-top: 0; width: 2px; height: 1.6rem;
    transform: scaleY(0); transform-origin: bottom;
  }
  .trust__i.is-in::after { transform: scaleY(1); }
  /* No lift on touch — there is no hover, and it only causes a jump when a
     tap registers as one. */
  .trust__i:hover { transform: none; }
}

/* =========================================================
   ABOUT — bento mosaic of photos and small info tiles
   ========================================================= */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.65rem, 1.2vw, 1rem); margin-top: clamp(2rem, 4vw, 3rem); }
.bento > * { border-radius: var(--r-sm); overflow: hidden; }
.bento img { width: 100%; height: 100%; object-fit: cover; }
.bt { background: var(--surface); padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; justify-content: center; }
.bt h3 { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); margin-bottom: .35rem; }
.bt p { font-size: .8125rem; line-height: 1.5; }
/* The tall cell spans two rows, so its height is whatever those two rows
   come to — which is taller than a 3/4 image of that width. Pinning an
   aspect-ratio here left ~70px of blank white under the photo at desktop
   widths. It fills its cell instead and crops, like any other cover image.
   (`height: 100%` resolves because a grid item stretches by default, so the
   cell has a definite height.) */
.bento .ph img { aspect-ratio: 4/3; height: auto; }
/* AFTER the .ph rule on purpose. `.ph--tall` also carries `.ph`, and both
   selectors have identical specificity, so whichever comes last wins —
   written above, this override silently lost and the blank came back. */
.bento .ph--tall { grid-row: span 2; }
.bento .ph--tall img { aspect-ratio: auto; height: 100%; }
@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .ph--tall { grid-row: auto; }
  .bento .ph--tall img { aspect-ratio: 4/3; height: auto; }
}

/* =========================================================
   SERVICES — alternating panel + photo rows
   ========================================================= */
/* The "collapsing scroll": every row is sticky at the same band below the header,
   so each one scrolls up and covers the previous — a deck being dealt. Each card
   gets a slightly larger offset than the one before (--i), so the covered cards
   keep a visible sliver at the top instead of disappearing completely.

   This needs `overflow-x: clip` (not `hidden`) on html/body — `hidden` makes the
   element a scroll container and position:sticky then has nothing to stick to. */
.stack { --stick: 104px; }
.srow {
  position: sticky; top: calc(var(--stick) + var(--i, 0) * 13px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--surface); border-radius: var(--r); overflow: hidden; align-items: stretch;
  border: 1px solid var(--line);
  box-shadow: 0 -1px 0 rgba(18,18,18,.04), 0 -18px 40px rgba(18,18,18,.10);
  min-height: 380px;
  transform-origin: 50% 0;
}
.srow + .srow { margin-top: clamp(.75rem, 1.5vw, 1.15rem); }
.srow__tx { padding: clamp(1.5rem, 3.2vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.srow__tx p { font-size: .9375rem; line-height: 1.7; margin-top: .75rem; }
.srow__price { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--text); font-weight: 500; }
.srow__tx .btn { align-self: flex-start; margin-top: 1.5rem; }
.srow__ph { min-height: 260px; }
.srow__ph img { width: 100%; height: 100%; object-fit: cover; }
/* nth-of-type, not nth-child: the section heading is the first child of .wrap,
   so nth-child would flip the alternation one row out of step. */
.srow:nth-of-type(even) .srow__ph { order: -1; }
/* Scroll-driven polish where the browser supports it: the outgoing card settles
   back a touch as the next one covers it. Purely additive — without support the
   stack still works, it just doesn't recede. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
    @keyframes srow-recede {
      to { transform: scale(.955) translateY(-6px); filter: brightness(.965); }
    }
    .srow {
      animation: srow-recede linear forwards;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
    .srow:last-of-type { animation: none; }
  }
}

@media (max-width: 820px) {
  .srow, .srow:nth-of-type(even) { grid-template-columns: 1fr; }
  .srow:nth-of-type(even) .srow__ph { order: 0; }
  .srow__ph { min-height: 220px; order: -1; }
  /* Stacking tall cards on a short screen hides most of each one — the rows
     simply flow on phones. */
  .srow { position: static; min-height: 0; box-shadow: var(--shadow-sm); }
}


/* =========================================================
   WORK — photo grid with caption under, not overlaid
   ========================================================= */
.work__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem; }
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) { .work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work__grid { grid-template-columns: 1fr; } }
.work__i { margin: 0; }
.work__i img { width: 100%; aspect-ratio: 4/3; height: auto; object-fit: cover; border-radius: var(--r-sm); transition: transform .8s var(--ease); }
.work__i figure, .work__i > div { overflow: hidden; border-radius: var(--r-sm); }
.work__i:hover img { transform: scale(1.035); }
.work__i h3 { font-size: 1.1rem; margin-top: 1rem; }
.work__i p { font-size: .8125rem; margin-top: .3rem; color: var(--muted); }
.work__all { font-size: .9375rem; font-weight: 500; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px; white-space: nowrap; }
.work__all:hover { color: var(--accent-deep); }

/* =========================================================
   TEAM — two wide cards on the off-white surface
   ========================================================= */
.team { background: var(--surface-2); }
.team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 720px) { .team__grid { grid-template-columns: 1fr; } }
.team__i { display: grid; grid-template-columns: 130px 1fr; gap: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; align-items: center; }
@media (max-width: 420px) { .team__i { grid-template-columns: 96px 1fr; gap: 1rem; } }
.team__i .ph { border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.team__i .ph img { width: 100%; aspect-ratio: 3/4; height: auto; object-fit: cover; object-position: top center; }
.team__i h3 { font-size: 1.2rem; }
.team__i .role { font-size: .8125rem; color: var(--muted); margin-top: .2rem; line-height: 1.4; }
.team__i .tel { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; font-weight: 600; font-size: .9375rem; color: var(--text); text-decoration: none; }
.team__i .tel svg { width: 14px; height: 14px; color: var(--accent-deep); }
.team__i .tel:hover { color: var(--accent-deep); }

/* =========================================================
   REVIEWS — three quiet quote cards
   ========================================================= */
.rev__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.rev__q { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.35rem, 2.5vw, 1.85rem); display: flex; flex-direction: column; }
.rev__st { color: #d8a63a; letter-spacing: .12em; font-size: .9rem; }
.rev__q p { font-size: .9375rem; line-height: 1.7; margin-top: .9rem; }
.rev__q footer { margin-top: auto; padding-top: 1.25rem; }
.rev__nm { font-weight: 600; color: var(--text); font-size: .9375rem; }
.rev__mt { font-size: .8125rem; color: var(--muted); margin-top: .1rem; }
.rev__src { text-align: center; margin-top: 1.75rem; font-size: .875rem; color: var(--muted); }

/* =========================================================
   FAQ — accordion on off-white
   ========================================================= */
.faq { background: var(--surface-2); }
.faq__list { max-width: 840px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: .65rem; }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 3rem 1.15rem 1.35rem; position: relative;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1rem, .96rem + .3vw, 1.15rem); color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 1.35rem; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.faq details p { padding: 0 1.35rem 1.35rem; font-size: .9375rem; line-height: 1.7; }

/* =========================================================
   CONTACT — dark band, form on the right
   ========================================================= */
.cta { background: var(--dark); color: var(--dark-text); }
.cta h2 { color: #fff; }
.cta .eyebrow { color: var(--accent); }
.cta .lead { color: var(--dark-muted); }
.cta__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 880px) { .cta__grid { grid-template-columns: 1fr; } }
.cta__call { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.14); }
.cta__call .k { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-muted); }
.cta__call a.big { display: inline-block; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); color: #fff; text-decoration: none; margin: .5rem 0 .2rem; }
.cta__call a.big:hover { color: var(--accent); }
.cta__call .hrs { font-size: .875rem; color: var(--dark-muted); }
.cta__call .mail { display: inline-block; margin-top: .85rem; color: var(--dark-text); font-size: .9375rem; }

.f { display: grid; gap: 1rem; background: #fff; border-radius: var(--r); padding: clamp(1.25rem, 3vw, 2rem); }
.f__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .f__row { grid-template-columns: 1fr; } }
.f label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.f input, .f select, .f textarea {
  width: 100%; font-family: inherit; font-size: .9375rem; padding: .75rem .9rem; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; transition: border-color .18s, box-shadow .18s;
}
.f input:focus, .f select:focus, .f textarea:focus { outline: 0; border-color: var(--text); box-shadow: 0 0 0 3px rgba(18,18,18,.06); }
.f textarea { resize: vertical; min-height: 104px; }
.f input[type=file] { font-size: .8125rem; color: var(--muted); padding: .55rem .9rem; }
.f__note { font-size: .75rem; color: var(--muted); }
.f .btn { justify-self: start; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot { background: var(--dark); color: var(--dark-muted); padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgba(255,255,255,.1); font-size: .875rem; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
.foot .brand { color: #fff; font-size: 1.3rem; }
.foot .brand span { color: var(--accent); }
.foot__brand p { margin-top: .9rem; line-height: 1.7; max-width: 42ch; }
.foot h4 { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 .9rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot a { color: var(--dark-muted); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot__legal { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: .8125rem; }
.foot__demo { margin-top: 1rem; font-size: .75rem; color: #6d6d6b; }

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; gap: .55rem;
  background: var(--cta); color: #fff; text-decoration: none; font-weight: 500; font-size: .9375rem;
  padding: .95rem 1rem calc(.95rem + env(safe-area-inset-bottom));
}

/* =========================================================
   MICRO-INTERACTIONS
   Additive polish only. All of it is switched off under
   prefers-reduced-motion at the bottom of this file.
   ========================================================= */

/* ---- header condenses as you scroll ---- */
.hdr__in { transition: box-shadow .3s var(--ease), background .3s, min-height .3s var(--ease), padding .3s var(--ease); }
.hdr.is-stuck .hdr__in { min-height: 56px; padding-block: .35rem; }
.brand small { transition: opacity .3s var(--ease), max-height .3s var(--ease); overflow: hidden; max-height: 14px; }
.hdr.is-stuck .brand small { opacity: 0; max-height: 0; }

/* ---- nav underline sweeps out from the left ---- */
.nav a { position: relative; padding-block: .3rem; }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }

/* ---- buttons: arrow slides, phone icon nudges, dark pill catches a sheen ---- */
.btn svg { transition: transform .32s var(--ease); }
.btn:hover svg:last-child { transform: translateX(4px); }
.btn[href^="tel:"]:hover svg { animation: nudge .5s var(--ease); }
@keyframes nudge {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-11deg); }
  60%      { transform: rotate(8deg); }
}
.btn--dark { position: relative; overflow: hidden; isolation: isolate; }
.btn--dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn--dark:hover::before { transform: translateX(120%); }

/* ---- hero: staggered entrance, words rise out of a mask ---- */
.hero__in > * { opacity: 0; transform: translateY(14px); animation: rise .8s var(--ease) forwards; }
.hero__in > *:nth-child(1) { animation-delay: .05s; }
.hero__in > *:nth-child(2) { animation-delay: .12s; }
.hero__in > *:nth-child(3) { animation-delay: .34s; }
.hero__in > *:nth-child(4) { animation-delay: .44s; }
.hero__in > *:nth-child(5) { animation-delay: .54s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero h1 .w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%); animation: wordUp .85s var(--ease) forwards;
  animation-delay: calc(.18s + var(--wi) * .045s);
}
@keyframes wordUp { to { transform: none; } }

.hero__pts li { opacity: 0; transform: translateX(-10px); animation: slideIn .6s var(--ease) forwards; animation-delay: calc(.6s + var(--pi) * .08s); }
@keyframes slideIn { to { opacity: 1; transform: none; } }
.hero__pts svg { transition: transform .3s var(--ease); }
.hero__pts li:hover svg { transform: scale(1.18); }

.hero__card { opacity: 0; transform: translateY(26px) scale(.97); animation: cardIn 1.1s var(--ease) .3s forwards; }
@keyframes cardIn { to { opacity: 1; transform: none; } }
/* parallax drift, --par is set from app.js */
.hero__card img { transform: translateY(var(--par, 0px)) scale(1.06); }

/* ---- trust numbers ---- */
.trust__n { font-variant-numeric: tabular-nums; }
.trust__i { transition: transform .35s var(--ease); }
.trust__i:hover { transform: translateY(-3px); }

/* ---- bento: lift and image zoom ---- */
.bento > * { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.bento .ph img { transition: transform 1s var(--ease); }
.bento .ph:hover img { transform: scale(1.06); }
.bento .ph:hover, .bt:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.bt h3 { transition: color .3s var(--ease); }
.bt:hover h3 { color: var(--accent-deep); }

/* ---- service rows: image breathes, the price rule draws in ---- */
.srow__ph img { transition: transform 1.2s var(--ease); }
.srow:hover .srow__ph img { transform: scale(1.04); }
.srow__price { position: relative; }
.srow__price::before {
  content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease);
}
.srow.is-in .srow__price::before { transform: scaleX(1); transition-delay: .25s; }


/* ---- work cards ---- */
.work__i > div { position: relative; }
.work__i > div::after {
  content: '\2197'; position: absolute; right: 14px; bottom: 14px;
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--text);
  display: grid; place-items: center; font-size: 1rem;
  opacity: 0; transform: translateY(8px) scale(.85);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.work__i:hover > div::after { opacity: 1; transform: none; }
.work__i h3 { transition: color .3s var(--ease); }
.work__i:hover h3 { color: var(--accent-deep); }
.work__all { position: relative; }
.work__all::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent-deep); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.work__all:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- team ---- */
.team__i { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.team__i:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.team__i .ph img { transition: transform .9s var(--ease); }
.team__i:hover .ph img { transform: scale(1.05); }

/* ---- reviews: stars pop in one at a time ---- */
.rev__q { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.rev__q:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.rev__st span { display: inline-block; opacity: 0; transform: scale(.4); }
.rev__q.is-in .rev__st span { animation: pop .42s var(--ease) forwards; animation-delay: calc(var(--si) * .07s); }
@keyframes pop { 60% { transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }

/* ---- FAQ: <details> cannot animate its own height, so app.js wraps the body
        and a grid-template-rows 0fr -> 1fr transition does the work ---- */
.faq details { transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.faq details[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq .faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq details[open] .faq__body { grid-template-rows: 1fr; }
.faq .faq__body > div { overflow: hidden; }

/* ---- form ---- */
.f input, .f select, .f textarea { transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s; }

/* ---- sticky call bar slides up once the hero has gone ---- */
.callbar { transform: translateY(100%); transition: transform .4s var(--ease); }
.callbar.is-up { transform: none; }

/* ---- scroll-progress hairline ---- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 70; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--accent); pointer-events: none; }

/* =========================================================
   MOTION
   ========================================================= */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .1s; }
.reveal[data-d="2"] { transition-delay: .2s; }
.reveal[data-d="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* anything that starts hidden or displaced has to be reset here, or with
     animations neutered it would simply stay invisible */
  .hero__in > *, .hero__pts li, .hero__card { opacity: 1; transform: none; }
  .hero h1 .w > i { transform: none; }
  .rev__st span { opacity: 1; transform: none; }
  .hero__card img { transform: scale(1.06); }
  .srow__price::before, .nav a::after { transform: scaleX(1); }
  .callbar { transform: none; }
  .progress { display: none; }
  .work__i:hover img, .bento .ph:hover img, .srow:hover .srow__ph img, .team__i:hover .ph img { transform: none; }
  .work__i:hover > div::after { opacity: 1; transform: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1060px) {
  .nav { display: none; }
  .burger { display: block; }
  .hdr__end { margin-left: auto; }
  /* `.trust__row` and its `:nth-child(3) { padding-left: 0 }` partner used to
     live here, left over from the strip this panel replaced. The row class is
     gone, but the nth-child rule still matched — so below 1060px the third
     cell (the "2") lost its left padding and sat 16px left of the cell above
     it. That is what the misalignment was. The panel does its own responsive
     work up at its definition; nothing belongs here. */
}
/* Below 520px the pill can't hold the brand, the number and the burger without
   pushing the burger past the edge — the number drops to an icon, and it is
   still on the full-width sticky bar at the bottom. */
@media (max-width: 520px) {
  .hdr__num { display: none; }
  .brand small { display: none; }
  .hdr__in { gap: .6rem; }
}

@media (max-width: 680px) {
  .hdr { padding-top: 8px; }
  .hdr__in { min-height: 56px; padding-left: 1rem; }
  .hdr .langs { display: none; }          /* moves into the drawer */
  .callbar { display: flex; }
  body { padding-bottom: 54px; }
}
.drawer .langs { display: none; }
@media (max-width: 680px) { .drawer .langs { display: flex; } }

/* =========================================================
   BEFORE / AFTER PAGE (enne-ja-parast.html)

   Shares ba.js. The stage IS a native range input at full
   size with opacity 0, so drag, touch and keyboard all work
   without pointer maths — see ba.js for the contract.
   ========================================================= */
.subhero { padding-top: calc(var(--hdr-h, 76px) + clamp(3.5rem, 8vw, 6rem)); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.subhero h1 { max-width: 16ch; }
.subhero .lead { margin-top: 1.1rem; }
.bapage { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.balist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.75rem); }
@media (max-width: 1040px) { .balist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .balist { grid-template-columns: 1fr; } }

.bacard { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: .75rem .75rem 1.1rem; display: flex; flex-direction: column; gap: .9rem; }
.bacard__cap { display: grid; gap: .25rem; padding-inline: .4rem; }
.bacard h2 { font-size: 1.25rem; }
.bacard__meta { font-size: .8125rem; color: var(--muted); }

.ba-stage {
  position: relative; overflow: hidden; background: var(--text);
  aspect-ratio: 4 / 5; width: 100%; border-radius: var(--r-sm);
  touch-action: pan-y;
}
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-stage .ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-tag {
  position: absolute; top: .6rem; z-index: 3; background: rgba(255, 255, 255, .92);
  color: var(--text); padding: .28rem .6rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 600; pointer-events: none;
}
.ba-tag--l { left: .6rem; }
.ba-tag--r { right: .6rem; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; z-index: 4; pointer-events: none; box-shadow: 0 0 0 1px rgba(18,18,18,.18); }
.ba-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-sm);
}
/* A two-way arrow, not a chevron: a single chevron reads as "go back". */
.ba-handle::before {
  content: "\2194 "; position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -50%); color: var(--accent-deep);
  font: 700 1.125rem/1 var(--font-body);
}
.ba-range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; appearance: none; background: none; cursor: ew-resize; opacity: 0; }
.ba-range::-webkit-slider-thumb { appearance: none; width: 46px; height: 100%; }
.ba-range::-moz-range-thumb { width: 46px; height: 100%; border: 0; }
.ba-range:focus-visible { opacity: 1; outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.banote { margin-top: 2rem; font-size: .8125rem; color: var(--muted); max-width: 70ch; }

.ctaband { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; }
.ctaband h2 { max-width: 18ch; }
.ctaband__btns { display: flex; gap: .75rem; flex-wrap: wrap; }

.ba-item { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ba-item.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ba-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}