/* ============================================================================
   Perfect Home — theme custom layer  (perfect.millend.eu)
   Faithful rebuild of the Intorio Webflow template: Poppins, warm-beige canvas
   (#f4efec) + near-black ink (#010101), 960/1170/1350 container, 100px section
   rhythm, 100px-pill buttons. Foundation (reset, --space-*, --radius-*, utilities)
   comes from globals.css (linked first). Class names mirror the Intorio template
   so the markup lifts over 1:1. Animations reproduced 1:1 from RECON/intorio/
   animations.md (IX2 spec) — modern CSS + minimal JS, no jQuery/Webflow runtime.

   Layout: (1) re-point semantic tokens to the Intorio palette UNLAYERED (beats
   every @layer), (2) element typography in @layer base, (3) all chrome in
   @layer custom.
   ============================================================================ */

/* ---- token overrides (unlayered → win over globals.css token layer) ------- */
:root {
  color-scheme: light;

  /* Intorio palette (exact, from intorio.webflow.shared.css :root) */
  --secondary:   #010101;   /* near-black — text, borders, dark sections */
  --primary:     #f4efec;   /* warm beige — page canvas, soft fills */
  --ph-white:    #ffffff;
  --ph-black:    #000000;

  /* mapped onto millend-css semantic tokens */
  --surface:        var(--ph-white);
  --surface-raised: var(--ph-white);
  --surface-beige:  var(--primary);
  --text:           var(--secondary);
  --text-soft:      #5b5b5b;
  --border:         var(--secondary);
  --on-primary:     var(--secondary);

  /* type — single family, like the template */
  --font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-primary: var(--font-family);
  --font-secondary: var(--font-family);
  --line-height: 1.5;
  --line-height-tight: 1.2;

  /* Intorio fixed type scale (px→rem @16) — headings lh 1.2, body lh 1.5.
     Webflow shrinks these on tablet/mobile; overrides in the breakpoints block. */
  --fs-h1: 2.75rem;   /* 44px */
  --fs-h2: 2.375rem;  /* 38px */
  --fs-h3: 1.875rem;  /* 30px */
  --fs-h4: 1.5rem;    /* 24px */
  --fs-body: 1.25rem; /* 20px */
  --fs-body-s: 1.125rem; /* 18px */
  --fs-eyebrow: 1.125rem; /* 18px, uppercase */

  /* container widths per breakpoint (Intorio .main-container) */
  --container: 960px;
  --container-pad: 15px;

  /* section rhythm */
  --section-y: 100px;

  /* radii */
  --radius-card: 16px;
  --radius-pill: 100px;

  /* motion — easings mapped from Webflow IX2 (see animations.md) */
  --ease-out-quad:  cubic-bezier(.5, 1, .89, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out:    cubic-bezier(.45, 0, .55, 1);
  --dur-hover: .5s;
}

/* ============================================================================
   @layer base — element-level typography (mirrors Intorio, overrides globals base)
   ============================================================================ */
@layer base {
  body {
    font-family: var(--font-family);
    font-size: var(--fs-body);
    line-height: var(--line-height);
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: 600;
    line-height: var(--line-height-tight);
    color: var(--secondary);
    text-wrap: balance;
    margin: 0;
  }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-h4); }
  p  { max-width: none; }
  a  { color: inherit; text-decoration: none; }
  a:hover { color: inherit; }
}

/* ============================================================================
   @layer custom — layout primitives + components (Intorio class names)
   ============================================================================ */
@layer custom {

  /* ---- layout ----------------------------------------------------------- */
  .main-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .section-y-axis-gap { padding-block: var(--section-y); }
  .section-bottom-gap { padding-bottom: var(--section-y); }
  .section-top-gap    { padding-top: var(--section-y); }

  /* ---- buttons (a-/a-2: arrow moves +5px on hover) ---------------------- */
  .primary-button-block {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border: 1px solid var(--secondary);
    border-radius: var(--radius-pill);
    background: var(--ph-white);
    color: var(--secondary);
    line-height: 1.4;
    position: relative;
    cursor: pointer;
    transition: border-color var(--dur-hover), color var(--dur-hover), background-color var(--dur-hover);
  }
  .primary-button-block:hover { background: var(--secondary); color: var(--ph-white); }
  .primary-button-block.bg-transparent { background: transparent; }
  .primary-button-block.bg-transparent:hover { background: var(--secondary); color: var(--ph-white); }
  .primary-button-block.without-border { border-color: transparent; }
  .primary-button-text { z-index: 10; font-size: 1rem; line-height: 1.4; }
  .arrow-icon {
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-hover) var(--ease-out-quad);
  }
  .primary-button-block:hover .arrow-icon { transform: translateX(5px); }
  .arrow-icon svg { width: 1em; height: 1em; display: block; }

  /* ---- section heading cluster (eyebrow + title + optional CTA) --------- */
  .section-heading-block { display: flex; flex-direction: column; }
  .section-heading-block.align-center { align-items: center; text-align: center; }

  .section-subtitle-block { display: flex; align-items: center; gap: 10px; }
  .breadcrumb-icon { display: flex; align-items: center; justify-content: center; }
  /* a-3: decorative spinner icon rotates 360° / 8s, infinite */
  .breadcrumb-icon svg, .breadcrumb-icon img { width: 22px; height: 22px; animation: ph-spin 8s linear infinite; }
  .subtitle-text { text-transform: uppercase; font-size: var(--fs-eyebrow); line-height: 1.6; letter-spacing: .01em; }

  .section-title-block { margin-top: 20px; }
  .section-title { font-size: var(--fs-h2); }
  .section-title.text-white, .text-white { color: var(--ph-white); }

  .section-title-and-button-block {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-l); flex-wrap: wrap;
  }

  /* max-width helpers used on titles (Intorio names) */
  .max-width-716px { max-width: 716px; }
  .max-width-1070px { max-width: 550px; }
  .max-width-800px { max-width: 800px; }
  .margin-top-24px { margin-top: 20px; }

  /* ---- keyframes -------------------------------------------------------- */
  @keyframes ph-spin { to { transform: rotate(360deg); } }

  /* ============================================================================
     REVEAL ANIMATIONS — one-shot on scroll-into-view (IntersectionObserver adds
     .is-inview). Recipes reproduced exactly from animations.md. Elements carry a
     data-reveal="<name>" attribute; CSS sets the from-state, .is-inview the to-state.
     ============================================================================ */
  [data-reveal] { will-change: transform, opacity; }

  /* a-45 "Text View Animation" (×100): opacity 0→1, y -20px→0, 1000ms delay 250ms outQuad */
  [data-reveal="text"] { opacity: 0; transform: translateY(-20px);
    transition: opacity 1s var(--ease-out-quad) .25s, transform 1s var(--ease-out-quad) .25s; }
  [data-reveal="text"].is-inview { opacity: 1; transform: none; }

  /* a-34/a-33 "Slide Up" (y 70px→0, opacity, 800ms ease, delays 0.6s/0.4s) */
  [data-reveal="up"] { opacity: 0; transform: translateY(70px);
    transition: opacity .8s ease, transform .8s ease; }
  [data-reveal="up"].is-inview { opacity: 1; transform: none; }
  [data-reveal="up"][data-delay="400"] { transition-delay: .4s; }
  [data-reveal="up"][data-delay="600"] { transition-delay: .6s; }

  /* slideInBottom (×17): opacity 0, y 100px→0, 1000ms outQuart */
  [data-reveal="slide-bottom"] { opacity: 0; transform: translateY(100px);
    transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); }
  [data-reveal="slide-bottom"].is-inview { opacity: 1; transform: none; }

  /* fadeIn (×20): opacity 0→1, 1000ms outQuart */
  [data-reveal="fade"] { opacity: 0; transition: opacity 1s var(--ease-out-quart); }
  [data-reveal="fade"].is-inview { opacity: 1; }

  /* a-21/a-22 "Fade In" : opacity + scale .99→1 + y 5px→0 */
  [data-reveal="fade-rise"] { opacity: 0; transform: translateY(5px) scale(.99);
    transition: opacity 1s var(--ease-out-quad), transform .5s var(--ease-out-quad); }
  [data-reveal="fade-rise"].is-inview { opacity: 1; transform: none; }

  /* a-41 "Image Reveal" (×38): inner image scale 1.5→1, 1200ms delay 200ms outQuad.
     Apply to a wrapper with overflow:hidden; the <img> is the scaled child. */
  [data-reveal="image"] { overflow: hidden; }
  [data-reveal="image"] > img,
  [data-reveal="image"] > picture > img { transform: scale(1.5); transform-origin: center;
    transition: transform 1.2s var(--ease-out-quad) .2s; }
  [data-reveal="image"].is-inview > img,
  [data-reveal="image"].is-inview > picture > img { transform: scale(1); }

  /* flipInLeft (×9): rotateY -90deg→0 + opacity, 1000ms outQuart */
  [data-reveal="flip-left"] { opacity: 0; transform: perspective(800px) rotateY(-90deg); transform-origin: left center;
    transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); }
  [data-reveal="flip-left"].is-inview { opacity: 1; transform: none; }

  /* growIn: opacity + scale .75→1, 1000ms outQuart */
  [data-reveal="grow"] { opacity: 0; transform: scale(.75);
    transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); }
  [data-reveal="grow"].is-inview { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    [data-reveal="image"] > img { transform: none !important; }
    .breadcrumb-icon svg, .breadcrumb-icon img { animation: none !important; }
  }
}

/* ============================================================================
   @layer custom (cont.) — site header / nav / mobile menu
   Intorio header: fixed bar over the hero, dark wordmark + link row + pill CTA;
   gains a solid backdrop once scrolled (.is-scrolled, toggled in app.js).
   ============================================================================ */
@layer custom {
  .site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 1000;
    padding-block: 22px;
    transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease;
  }
  .site-header.is-scrolled {
    background: var(--surface-beige);
    box-shadow: 0 1px 0 rgba(1,1,1,.06);
    padding-block: 14px;
  }
  .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); }

  .nav-brand {
    font-weight: 700; font-size: 1.625rem; line-height: 1; letter-spacing: -.01em;
    color: var(--secondary); white-space: nowrap;
  }

  .nav-menu { margin-inline: auto; }
  .nav-list { display: flex; align-items: center; gap: 36px; }
  .nav-link { position: relative; font-size: 1.0625rem; color: var(--secondary); padding-block: 4px; }
  .nav-link::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease-out-quad);
  }
  .nav-link:hover::after { transform: scaleX(1); }

  .nav-cta { flex: none; }

  .menu-button { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
    align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
  .menu-button span { display: block; width: 24px; height: 2px; background: var(--secondary);
    transition: transform .3s ease, opacity .3s ease; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-nav { background: var(--surface-beige); border-top: 1px solid rgba(1,1,1,.08); }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav__list { padding: var(--space-s) var(--container-pad) var(--space-l); }
  .mobile-nav__list li { border-bottom: 1px solid rgba(1,1,1,.08); }
  .mobile-nav__list a { display: block; padding: 16px 4px; font-size: 1.25rem; color: var(--secondary); }

  @media screen and (max-width: 991px) {
    .nav-menu, .nav-cta { display: none; }
    .menu-button { display: flex; }
  }
}

/* ============================================================================
   @layer custom (cont.) — footer (dark near-black band, light text, social pills)
   ============================================================================ */
@layer custom {
  .footer-section { background: var(--secondary); color: var(--ph-white); padding-block: 80px 32px; }
  .footer-section .nav-brand { color: var(--ph-white); }
  .footer-upper-block {
    display: grid; gap: var(--space-2xl);
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    padding-bottom: 56px;
  }
  .footer-summary { margin-top: 22px; max-width: 36ch; color: rgba(255,255,255,.72); font-size: 1.0625rem; }
  .footer-social-block-wrap { display: flex; gap: 12px; margin-top: 28px; }
  .footer-social-block {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--ph-white);
    transition: background-color var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover);
  }
  .footer-social-block:hover { background: var(--ph-white); color: var(--secondary); border-color: var(--ph-white); }
  .footer-menu-title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 22px; }
  .footer-menu-block, .footer-contact-info-block { display: flex; flex-direction: column; gap: 14px; }
  .footer-menu-link { color: rgba(255,255,255,.72); transition: color var(--dur-hover); width: fit-content; }
  .footer-menu-link:hover { color: var(--ph-white); }
  .footer-location { color: rgba(255,255,255,.72); }
  .footer-lower-border { height: 1px; background: rgba(255,255,255,.14); }
  .footer-copyright-block { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding-top: 28px; flex-wrap: wrap; }
  .footer-copyright-text, .footer-menu-flex { color: rgba(255,255,255,.6); font-size: .9375rem; }
  .footer-menu-flex { display: flex; gap: 20px; }

  @media screen and (max-width: 991px) {
    .footer-upper-block { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    .footer-single-column-block.first-column { grid-column: 1 / -1; }
  }
  @media screen and (max-width: 479px) {
    .footer-upper-block { grid-template-columns: 1fr; }
    .footer-copyright-block { flex-direction: column; align-items: flex-start; }
  }
}

/* ============================================================================
   @layer custom (cont.) — home sections (Intorio home-one)
   ============================================================================ */
@layer custom {

  /* ---- HERO (crossfade slider, Ken-Burns + staggered content; a-4/a-5) --- */
  .hero-section { padding-top: 150px; }
  .hero-slider-block { position: relative; border-radius: var(--radius-card); overflow: hidden; }
  .hero-slider-mask { position: relative; height: clamp(520px, 82vh, 880px); }
  .hero-slider-item { position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity .8s var(--ease-out-quad); }
  .hero-slider-item.is-active { opacity: 1; pointer-events: auto; }
  .hero-slider-item-wrap { position: absolute; inset: 0; }
  .hero-slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-slider-item.is-active .hero-slide-image { animation: kenburns 7s var(--ease-out-quad) forwards; }
  @keyframes kenburns { from { transform: scale(1.18); } to { transform: scale(1); } }
  .hero-image-overlay { position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(1,1,1,.05) 0%, rgba(1,1,1,.15) 45%, rgba(1,1,1,.65) 100%); }
  .hero-slider-content-block { position: absolute; z-index: 3; inset: auto 60px 56px; max-width: 760px; color: var(--ph-white); }
  .hero-title { color: var(--ph-white); font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); }
  .hero-sub { margin-top: 18px; max-width: 46ch; color: rgba(255,255,255,.9); font-size: 1.125rem; }
  .hero-button-wrap { margin-top: 28px; }
  .hero-section .primary-button-block { background: var(--ph-white); color: var(--secondary); border-color: var(--ph-white); }
  .hero-section .primary-button-block:hover { background: transparent; color: var(--ph-white); }
  .hero-author-block { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
  .hero-author-image-block { display: flex; }
  .hero-author-image { width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--ph-white); margin-left: -14px; }
  .hero-author-image:first-child { margin-left: 0; }
  .hero-author-text { font-size: 1rem; color: rgba(255,255,255,.92); line-height: 1.4; }
  /* staggered content entrance on the active slide (mirrors a-4 delays) */
  .hero-slider-item .hero-title-block, .hero-slider-item .hero-sub,
  .hero-slider-item .hero-button-wrap, .hero-slider-item .hero-author-block {
    opacity: 0; transform: translateY(30px); transition: opacity 1.6s ease, transform 1.6s ease; }
  .hero-slider-item.is-active .hero-title-block { opacity: 1; transform: none; transition-delay: .2s; }
  .hero-slider-item.is-active .hero-sub { opacity: 1; transform: none; transition-delay: .35s; }
  .hero-slider-item.is-active .hero-button-wrap { opacity: 1; transform: none; transition-delay: .5s; }
  .hero-slider-item.is-active .hero-author-block { opacity: 1; transform: none; transition-delay: .65s; }
  .slider__nav { position: absolute; z-index: 4; left: 60px; bottom: 28px; display: flex; gap: 10px; }
  .slider__dot { width: 28px; height: 3px; border: 0; border-radius: 2px; background: rgba(255,255,255,.4); cursor: pointer; transition: background .3s; }
  .slider__dot.is-active { background: var(--ph-white); }

  /* ---- WHO WE ARE (cross-sliding side images; a-44 via view-timeline) ---- */
  .wwa-wrapper { position: relative; display: grid; grid-template-columns: 1fr minmax(auto, 600px) 1fr;
    align-items: center; gap: var(--space-xl); }
  /* tilted framed cards; the photo drifts WITHIN the clipped frame (never cut off) */
  .wwa-left-image-block, .wwa-right-image-block { aspect-ratio: 3/4; border-radius: var(--radius-card);
    overflow: hidden; will-change: translate; }
  /* tilt lives on the independent `rotate` property so the scroll-driven `translate`
     can move the whole tilted card without clobbering the tilt */
  .wwa-left-image-block  { rotate: -4deg; }
  .wwa-right-image-block { rotate: 4deg; }
  .wwa-image { width: 100%; height: 100%; object-fit: cover; }
  .wwa-button-wrap { margin-top: 28px; }
  /* a-44 (Intorio): the two side cards counter-slide as the section crosses the
     viewport — left drifts up, right drifts down. The original swept ±70-100% of the
     card height, which overlapped neighbours and looked cut off; ±20% (of the card's
     own height, so it scales per breakpoint) keeps it lively while staying inside the
     section's padding band. At cover 50% both cards rest in their designed position;
     nothing clips them (no overflow on the section/wrapper). */
  @supports (animation-timeline: view()) {
    .wwa-wrapper { view-timeline-name: --wwa; view-timeline-axis: block; }
    .wwa-left-image-block  { animation: wwa-up   linear both; animation-timeline: --wwa; animation-range: cover 0% cover 100%; }
    .wwa-right-image-block { animation: wwa-down linear both; animation-timeline: --wwa; animation-range: cover 0% cover 100%; }
    @keyframes wwa-up   { from { translate: 0 20%;  } to { translate: 0 -20%; } }
    @keyframes wwa-down { from { translate: 0 -20%; } to { translate: 0 20%;  } }
  }

  /* ---- SERVICES sticky showcase (a-52: cards Y 0→-75%, images X 0→-300%) - */
  .service-section .main-container { margin-bottom: var(--space-l); }
  .service-showcase { position: relative; height: calc(var(--count, 4) * 78vh); }
  .service-showcase__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; }
  .service-showcase__cards, .service-showcase__images { position: relative; overflow: hidden; height: 100%; }
  /* large bleeding image: round the inner (left) corners only */
  .service-showcase__images { border-radius: var(--radius-card) 0 0 var(--radius-card); }
  /* LEFT text + RIGHT image both pinned & crossfaded per scroll segment — the
     heading column stays put while the four services advance in sync (a-52 spirit). */
  /* The slide items are absolutely positioned (inset:0), so they ignore any padding
     on the cards column — the inset has to live on the items themselves. Align their
     left edge to the site container's CONTENT edge so the service titles line up with
     the "Как мы работаем" heading above (which sits inside .main-container). */
  .service-showcase__cards { position: relative; }
  .service-single-item-wrap { position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: center; gap: 18px; opacity: 0;
    padding-left: max(var(--container-pad), calc((100vw - var(--container)) / 2 + var(--container-pad)));
    padding-right: var(--space-xl); }
  .service-single-item-wrap:first-child { opacity: 1; }
  .service-number-wrap { display: flex; align-items: baseline; gap: 8px; font-size: 1.125rem; color: var(--text-soft); }
  .service-number { font-weight: 600; }
  .service-title-v2 { font-size: var(--fs-h2); }
  .service-summary-text { max-width: 42ch; color: var(--text-soft); }
  .service-showcase__images .service-bg-image-wrap { position: absolute; inset: 0; opacity: 0; }
  .service-showcase__images .service-bg-image-wrap:first-child { opacity: 1; }
  .service-large-bg-image { width: 100%; height: 100%; object-fit: cover; }
  @supports (animation-timeline: view()) {
    .service-showcase { view-timeline-name: --svc; view-timeline-axis: block; }
    .service-single-item-wrap, .service-showcase__images .service-bg-image-wrap {
      opacity: 0; animation: svc-fade linear both; animation-timeline: --svc; }
    .service-single-item-wrap:nth-child(1), .service-showcase__images .service-bg-image-wrap:nth-child(1) {
      animation-name: svc-fade-first; animation-range: cover 0%  cover 27%; }
    .service-single-item-wrap:nth-child(2), .service-showcase__images .service-bg-image-wrap:nth-child(2) { animation-range: cover 25% cover 52%; }
    .service-single-item-wrap:nth-child(3), .service-showcase__images .service-bg-image-wrap:nth-child(3) { animation-range: cover 50% cover 77%; }
    .service-single-item-wrap:nth-child(4), .service-showcase__images .service-bg-image-wrap:nth-child(4) { animation-range: cover 75% cover 100%; }
    @keyframes svc-fade       { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes svc-fade-first { 0% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
  }

  /* ---- FEATURED PROJECTS (grid; image scale-in reveal + hover zoom; a-41/a-43) */
  .projects-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }
  .project-image-link { display: block; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; }
  .project-image { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out-quad); }
  .project-image-link:hover .project-image { transform: scale(1.05); }
  .project-content-block { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); margin-top: 18px; }
  .project-title { font-size: 1.5rem; font-weight: 600; transition: opacity .3s; }
  .project-title-link:hover .project-title { opacity: .65; }
  .project-location { color: var(--text-soft); white-space: nowrap; }
  .project-button-wrap { display: flex; justify-content: center; margin-top: var(--space-2xl); }
  .project-image--placeholder, .blog-thumbnail--placeholder { display: block; width: 100%; height: 100%; background: var(--surface-beige); }

  /* ---- APPROACH + COUNTERS ---------------------------------------------- */
  .approach-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; margin-top: var(--space-2xl); }
  .approach-image { width: 100%; border-radius: var(--radius-card); aspect-ratio: 1/1; object-fit: cover; }
  .approach-summary { font-size: 1.25rem; color: var(--text); }
  .approach-funfact-block { display: flex; gap: var(--space-2xl); margin-top: var(--space-xl); flex-wrap: wrap; }
  .funfact-number { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem); font-weight: 600; line-height: 1; }
  .number-text-label { margin-top: 8px; color: var(--text-soft); }

  /* ---- TESTIMONIALS slider (a-46/a-47 staggered) ------------------------ */
  .testimonial-wrapper { margin-top: var(--space-2xl); }
  .testimonial-slider-block { position: relative; }
  .testimonial-slider-mask { position: relative; min-height: 320px; }
  .testimonial-slide-item { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
  .testimonial-slide-item.is-active { opacity: 1; pointer-events: auto; position: relative; }
  /* match the mask's min-height so the card always fills the mask exactly — keeps the
     absolutely-centered (top:50%) prev/next arrows on the card's true vertical center */
  .testimonial-slide-wrap { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-2xl); align-items: center;
    min-height: 320px; background: var(--surface-beige); border-radius: var(--radius-card); padding: var(--space-2xl); }
  .testimonial-avatar { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center;
    background: var(--secondary); color: var(--ph-white); font-size: 2.5rem; font-weight: 600; }
  .testimonial-rating-block { display: flex; align-items: center; gap: 4px; color: var(--secondary); }
  .testimonial-rating-icon svg { width: 18px; height: 18px; }
  .testimonial-rating-text { margin-left: 8px; color: var(--text-soft); }
  .testimonial-review { margin-top: 18px; font-size: 1.375rem; line-height: 1.5; }
  .testimonial-author-block { margin-top: 22px; }
  .testimonial-author-name { font-weight: 600; font-size: 1.125rem; }
  .testimonial-author-designation { color: var(--text-soft); }
  /* staggered entrance on active slide */
  .testimonial-slide-item .testimonial-left-column,
  .testimonial-slide-item .testimonial-rating-block,
  .testimonial-slide-item .testimonial-review-block,
  .testimonial-slide-item .testimonial-author-block { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
  .testimonial-slide-item.is-active .testimonial-left-column { opacity: 1; transform: none; }
  .testimonial-slide-item.is-active .testimonial-rating-block { opacity: 1; transform: none; transition-delay: .3s; }
  .testimonial-slide-item.is-active .testimonial-review-block { opacity: 1; transform: none; transition-delay: .5s; }
  .testimonial-slide-item.is-active .testimonial-author-block { opacity: 1; transform: none; transition-delay: .8s; }
  .testimonial-arrow-block { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--secondary); background: var(--surface);
    display: grid; place-items: center; cursor: pointer; transition: background .4s, color .4s; }
  .testimonial-arrow-block:hover { background: var(--secondary); color: var(--ph-white); }
  .testimonial-arrow-block.left { left: -10px; } .testimonial-arrow-block.right { right: -10px; }
  .testimonial-arrow-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }
  .testimonial-arrow-icon svg { display: block; width: 16px; height: 12px; }
  .testimonial-arrow-icon.flip { transform: rotate(180deg); }
  .testimonial-nav { position: static; justify-content: center; margin-top: var(--space-l); }
  .testimonial-nav .slider__dot { background: rgba(1,1,1,.2); }
  .testimonial-nav .slider__dot.is-active { background: var(--secondary); }

  /* ---- BLOG (3-up; thumb scale-in reveal + hover zoom; a-12) ------------ */
  .blog-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }
  .blog-thumbnail-block { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; }
  .blog-thumbnail-link { display: block; height: 100%; }
  .blog-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out-quad); }
  .blog-thumbnail-block:hover .blog-thumbnail { transform: scale(1.05); }
  .blog-meta-block { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--text-soft); font-size: .95rem; }
  .blog-meta-separator { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
  .blog-title { margin-top: 12px; font-size: 1.375rem; font-weight: 600; transition: opacity .3s; }
  .blog-title-link:hover .blog-title { opacity: .65; }

  /* ---- CTA band --------------------------------------------------------- */
  .cta-section { background: var(--secondary); padding-block: clamp(80px, 10vw, 140px); }
  .cta-content-block { max-width: 800px; margin-inline: auto; }
  .cta-section .section-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
  .cta-button-wrap { margin-top: 32px; }
  .cta-section .primary-button-block { background: var(--ph-white); color: var(--secondary); }
  .cta-section .primary-button-block:hover { background: transparent; color: var(--ph-white); border-color: var(--ph-white); }

  /* ---- section responsive ----------------------------------------------- */
  @media screen and (max-width: 991px) {
    .hero-slider-content-block { inset: auto 28px 32px; }
    .slider__nav { left: 28px; }
    .wwa-wrapper { grid-template-columns: 1fr; }
    .wwa-left-image-block, .wwa-right-image-block { display: none; }
    .service-showcase { height: auto; }
    .service-showcase__sticky { position: relative; height: auto; grid-template-columns: 1fr; }
    .service-showcase__cards { padding-inline: var(--container-pad); }
    .service-single-item-wrap { position: static; opacity: 1 !important; animation: none !important;
      padding-block: var(--space-l); border-top: 1px solid rgba(1,1,1,.1); }
    .service-showcase__images { display: none; }
    .approach-wrapper { grid-template-columns: 1fr; }
    .blog-wrapper { grid-template-columns: 1fr; }
  }
  @media screen and (max-width: 767px) {
    .projects-wrapper { grid-template-columns: 1fr; }
    .testimonial-slide-wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .approach-funfact-block { gap: var(--space-l); }
  }
}

/* ============================================================================
   Responsive — Intorio breakpoints (≤991 tablet, ≤767, ≤479 mobile; ≥1280/1440 up)
   ============================================================================ */
@media screen and (min-width: 1280px) { :root { --container: 1170px; } }
@media screen and (min-width: 1440px) { :root { --container: 1350px; --section-y: 135px; } }

@media screen and (max-width: 991px) {
  :root {
    --container: 740px;
    --fs-h1: 2.5rem; --fs-h2: 2rem; --fs-h3: 1.625rem; --fs-h4: 1.375rem;
    --fs-body: 1.125rem; --section-y: 90px;
  }
}
@media screen and (max-width: 767px) {
  :root { --container: 100%; --fs-h1: 2.25rem; --fs-h2: 1.875rem; --section-y: 80px; }
  .section-title-and-button-block { flex-direction: column; align-items: flex-start; }
}
@media screen and (max-width: 479px) {
  :root { --fs-h1: 1.875rem; --fs-h2: 1.625rem; --fs-body: 1.0625rem; --fs-eyebrow: 1rem; }
}

/* ============================================================================
   Lenis smooth scroll — required helper rules. Classes are added to <html> by
   the Lenis runtime (app.js) only while active, so under reduced-motion (Lenis
   not started) the native `scroll-behavior` from globals.css stays in effect.
   `.lenis-smooth { scroll-behavior: auto }` overrides globals so the browser and
   Lenis don't fight over animated jumps. Mark internally-scrolling regions with
   `data-lenis-prevent` to keep their native wheel scroll. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }