:root{
  --ink:#111111;
  --ink-soft:#252525;
  --muted:#b8b8b4;
  --muted-dark:#6e706f;
  --line:#e4e3df;
  --paper:#ffffff;
  --cream:#f2f1ed;
  --dark:#121212;
  --dark-soft:#181818;
  --radius:14px;
  --radius-lg:22px;
  --pill:999px;
  --maxw:1320px;
  --header-h:68px;
  --font:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;

  /* ===== Post-hero design system — airy glass / floating panels =====
     Scoped to everything from .why-continuation (#about) down. Does NOT touch
     the locked hero tokens above. */
  --re-forest:#0e2a20;      /* primary dark (evergreen)            */
  --re-forest-2:#123527;    /* dark panel raise                    */
  --re-forest-3:#0a1f17;    /* deepest dark (footer / services)    */
  --re-ink:#12261e;         /* body ink on light                   */
  --re-ink-soft:#39473f;
  --re-muted:#6a776f;       /* secondary text on light             */
  --re-muted-dk:#9db0a7;    /* secondary text on dark              */
  --re-ivory:#f5f2ea;       /* warm light                          */
  --re-mist:#e9efec;        /* cool light background                */
  --re-mist-2:#eef3f0;
  --re-sky:#dae7ec;         /* cool tint for glass sections        */
  --re-brass:#b3894e;       /* single warm accent                  */
  --re-brass-soft:#c7a370;
  --re-line:rgba(16,40,31,.11);
  --re-line-soft:rgba(16,40,31,.07);
  --re-line-dk:rgba(255,255,255,.12);
  --re-glass:rgba(255,255,255,.60);
  --re-glass-strong:rgba(255,255,255,.80);
  --re-glass-dk:rgba(255,255,255,.055);
  --re-radius:30px;
  --re-radius-sm:20px;
  --re-radius-xs:14px;
  --re-shadow-sm:0 12px 34px -16px rgba(14,42,32,.30);
  --re-shadow:0 34px 74px -30px rgba(14,42,32,.34);
  --re-shadow-lg:0 50px 110px -36px rgba(14,42,32,.44);
  --re-blur:saturate(150%) blur(22px);

  /* ===== ATON Milan redesign — cohesive tokens shared by all 6 morphism styles =====
     One hue family (evergreen + brass); styles differ only in surface treatment.
     Does NOT touch the locked hero tokens above. */
  --aton-forest:#0e2a20;
  --aton-forest-2:#123527;
  --aton-forest-deep:#0a1f17;
  --aton-ink:#12261e;
  --aton-ink-soft:#39473f;
  --aton-muted:#5c6a62;
  --aton-muted-dk:#9db0a7;
  --aton-ivory:#f5f2ea;
  --aton-mist:#e9efec;
  --aton-mist-2:#eef3f0;
  --aton-sky:#dae7ec;
  --aton-brass:#b3894e;
  --aton-brass-soft:#c7a370;
  --aton-brass-deep:#8a6532;
  --aton-neu-surface:#e6ebe7;
  --aton-neu-light:#ffffff;
  --aton-neu-dark:#c3ccc6;
  --aton-neu-surface-dk:#16241d;
  --aton-neu-light-dk:#22332b;
  --aton-neu-dark-dk:#0a1712;
  --aton-clay-sage:hsl(150 22% 92%);
  --aton-clay-shadow:hsl(150 30% 42%);
  --aton-clay-brass:hsl(36 45% 88%);
  --aton-glass-light:rgba(255,255,255,.14);
  --aton-glass-dark:rgba(255,255,255,.055);
  --aton-glass-border:rgba(255,255,255,.35);
  --aton-line:rgba(16,40,31,.11);
  --aton-line-dk:rgba(255,255,255,.12);
  --aton-shadow-rgb:14,42,32;
  --aton-radius:30px;
  --aton-radius-sm:20px;
  --aton-radius-clay:34px;
  --aton-focus:3px solid #2f6df6;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 38px}
.section{padding:122px 0}

/* Safe fallback for genuinely missing images. */
.img-fallback{background:linear-gradient(135deg,#c9d6e4,#e7d8cc);min-height:200px}
.img-fallback[src]{visibility:hidden}

/* Typography */
.eyebrow{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.01em;color:inherit;margin-bottom:24px}
.big-heading{font-size:clamp(44px,6.8vw,92px);font-weight:550;line-height:.97;letter-spacing:-.045em}
.big-lead{font-size:clamp(34px,4.7vw,66px);font-weight:500;line-height:1.08;letter-spacing:-.035em;max-width:1080px}
.mid-lead{font-size:clamp(34px,4.35vw,60px);font-weight:500;line-height:1.08;letter-spacing:-.032em}
.center{text-align:center}
.body-lg{font-size:clamp(17px,1.45vw,21px);line-height:1.5}

/* Scroll-linked word colouring. Dark sections are explicit, so text can never become black on black. */
/* Accessibility skip link — off-screen until keyboard-focused (was unstyled → showed as stray text). */
.skip-link{position:fixed;left:12px;top:-60px;z-index:1000;background:var(--dark);color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

.reveal-copy{color:var(--muted)}
.reveal-copy .w{color:var(--muted);transition:color .12s linear}
.reveal-copy .w.lit{color:var(--ink)}
[data-theme="dark"] .reveal-copy,
[data-theme="dark"] .reveal-copy .w{color:#575757}
[data-theme="dark"] .reveal-copy .w.lit{color:#ffffff}
.cta .reveal-copy,.cta .reveal-copy .w{color:#ffffff}
.cta .reveal-copy .w.lit{color:#ffffff}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 28px;border:1px solid transparent;border-radius:var(--pill);
  font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn em{font-style:normal;transition:transform .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:hover em{transform:translateX(4px)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-pill-sm{padding:11px 22px;font-size:14px}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-dark-light{background:#fff;color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border-color:#c9c8c4}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:rgba(255,255,255,.1)}

/* Header: it belongs to the hero only. It no longer leaves a permanent white strip over the page. */
.site-header{
  position:absolute;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  transition:opacity .25s linear,transform .25s linear;
}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo-mark{height:22px;width:auto;color:var(--ink)}
.main-nav{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:auto}
.main-nav a{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--ink)}
.main-nav a:hover{opacity:.55}
.main-nav a i{display:inline-block;font-style:normal;font-size:11px;transform:rotate(90deg);opacity:.7}
.header-actions{display:flex;align-items:center}
.header-actions .btn{padding:9px 18px;font-size:12px}
.hamburger{display:none;flex-direction:column;gap:5px;padding:7px;background:none;border:0;cursor:pointer}
.hamburger span{width:24px;height:2px;background:var(--ink);border-radius:2px}

/* ============================================================================================
   🔒 LOCKED REGION — HERO STYLES (.scroll-hero … @keyframes bob). DO NOT MODIFY these rules unless
   the user EXPLICITLY asks to change the hero animation itself. See CLAUDE.md. Leave untouched when
   working on anything else on the page.
   ============================================================================================ */
/* Cinematic hero — layered SVG scene, GSAP ScrollTrigger (pinned + scrubbed) */
.scroll-hero{position:relative;height:100vh;background:transparent;overflow:hidden}
.stage{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.stage-sky{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at 15% 82%,rgba(255,197,152,.5),transparent 34%),
    radial-gradient(circle at 82% 16%,rgba(255,255,255,.62),transparent 32%),
    linear-gradient(180deg,#9dbfe2 0%,#c8dbec 32%,#e7edf2 58%,#f6e3d4 84%,#fdefe3 100%);
}
.stage-sky::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 30%,rgba(255,255,255,.14));
  mix-blend-mode:screen;
}

/* Upper opening clouds — a cloud bank that fills the TOP of the hero (around the headline). It sits
   at z-index 1 and BEFORE the headline in the DOM, so it's BEHIND the title (the title stays readable
   and "floats" in the clouds) and behind the SVG scene (the building still rises in front of it). On
   scroll it parts left/right (added in main.js) to give the building room. */
.hero-cover-top{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* will-change removed 2026-07-15 — see the note on .hero-scene .cloud below (GPU memory). */
.hero-cover-top img{position:absolute;display:block;max-width:none;height:auto;opacity:.98}

/* The whole cinematic scene */
.hero-scene{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block}
/* FLASH GUARD (2026-07-15) — the animation itself is untouched; this only hides the frame BEFORE it
   starts. The SVG paints as soon as the HTML parses, with every cloud and the building at their
   authored spots; GSAP then jumps them to the t=0 state on init, which read as "all the clouds show
   up and then vanish". Hold the scene until initHero() adds .hero-ready (it adds it even when
   GSAP/opentype fail, so the static first frame still shows — see main.js). The sky stays visible
   throughout, so there is no blank screen and the headline (LCP) is never delayed. */
.scroll-hero .hero-scene{opacity:0}
.scroll-hero.hero-ready .hero-scene{opacity:1;transition:opacity .28s ease}
/* 🐛 WHITE-HERO-ON-SCROLL-BACK, fixed 2026-07-15. `will-change` was on all 56 clouds, and it is not
   a "go faster" switch: it orders the browser to keep a compositor layer for that element ALIVE AT
   ALL TIMES. Measured: 106 permanent layers ≈ 272MB of texture memory. Park at the bottom of a
   22000px page and the compositor evicts those textures under memory pressure; scroll back and it
   cannot re-raster them, so the hero painted BLANK/WHITE (on desktop and phone alike, only ever when
   coming back, never on a fresh load). Headless has no real GPU compositor, which is exactly why it
   would not reproduce in tests.
   The clouds do not need it: they are only transformed while you scroll, and the browser composites
   them for the duration of the tween by itself. Keep the hint ONLY on the 3 elements that carry the
   heaviest continuous work. The animation is unchanged — this is a rendering hint, not a tween. */
#bgBuilding,#logoFill,#logoInk{will-change:transform,opacity}

/* Logo outline stroke (thin, crisp, drawn on scroll) */
.stroke-letter{
  fill:none;stroke:#f8f8f4;stroke-width:1.6;
  stroke-linecap:butt;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  /* will-change dropped 2026-07-15: stroke-dashoffset is NOT a compositable property, so the hint
     bought nothing and still pinned a layer per letter (15 of them). See the note above. */
}
#logoInk{filter:drop-shadow(0 3px 12px rgba(16,22,16,.34))}

/* Intro headline */
.stage-headline{
  /* z-index 1 = BEHIND the SVG scene (z2), so the rising building physically slides in front of the
     title and occludes it (it goes "behind the building") instead of just fading away. */
  position:absolute;z-index:1;left:0;right:0;top:12vh;text-align:center;padding:0 26px;
  will-change:transform,opacity;
}
.hero-title{
  font-size:clamp(58px,7.4vw,112px);font-weight:650;line-height:.94;letter-spacing:-.052em;
  margin-bottom:18px;white-space:nowrap;color:var(--ink);
}
.hero-sub{font-size:clamp(15px,1.45vw,20px);font-weight:500;line-height:1.35;margin-bottom:25px}
.hero-sub b{font-weight:650;color:var(--ink)}
.hero-sub span{color:var(--muted-dark)}
.stage-headline .btn{padding:11px 21px;font-size:13px}

/* soft warm haze (not a flat white cut) so the hero hands off into the cloud field below */
.stage-veil{position:absolute;inset:0;z-index:7;background:#f7f0e6;opacity:0;pointer-events:none;will-change:opacity}
.scroll-hint{position:absolute;left:50%;bottom:26px;z-index:8;transform:translateX(-50%);font-size:12px;font-weight:600;letter-spacing:.05em;animation:bob 1.7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
/* 🔒 END LOCKED REGION — HERO STYLES */

/* Generic reveal classes are only added by JS, so content remains visible without JavaScript. */
.motion-reveal{opacity:0;transform:translate3d(0,48px,0);transition:opacity .85s cubic-bezier(.2,.75,.2,1),transform .9s cubic-bezier(.2,.75,.2,1);transition-delay:var(--delay,0ms)}
.motion-reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
.motion-clip{clip-path:inset(0 0 100% 0);transform:translate3d(0,28px,0);transition:clip-path 1.1s cubic-bezier(.22,.8,.2,1),transform 1.1s cubic-bezier(.22,.8,.2,1);transition-delay:var(--delay,0ms)}
.motion-clip.is-visible{clip-path:inset(0 0 0 0);transform:translate3d(0,0,0)}

/* Why ATON — the real post-close destination inside the pinned hero. */
.hero-why{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(circle at 82% 16%,rgba(255,255,255,.5),transparent 34%),
    linear-gradient(180deg,#9dbfe2 0%,#c8dbec 24%,#dbe4e2 56%,#e7ebe8 100%)}
.hero-why::after{content:"Un modo più chiaro di muoverti";position:absolute;right:38px;top:52px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(16,38,31,.54)}
/* Clean line the clouds reveal (the stats moved OUT of the hero to their own section below). */
.hero-why-line{position:absolute;left:0;right:0;top:36vh;margin-inline:auto;max-width:var(--maxw);padding-inline:clamp(20px,5vw,64px);text-align:center}
.hw-eyebrow{display:block;margin-bottom:22px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#10261f}
.hw-lead{max-width:1000px;margin:0 auto;font-size:clamp(34px,4.6vw,66px);font-weight:500;line-height:1.06;letter-spacing:-.04em;color:#10261f}
.hw-lead span{color:rgba(16,38,31,.4)}
/* Impact stats — now a normal section right under the hero (Homy-style: two photos flank a stats card). */
.impact-section{background:#fff;padding:15vh 0 12vh}
.impact-wrap{width:min(100% - 8.4vw,1370px);margin-inline:auto;display:flex;flex-direction:column;gap:clamp(24px,3.8vh,54px)}
.impact-head{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:44px}
.impact-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#151515}
.impact-eyebrow i{position:relative;width:15px;height:15px;border-radius:50%;border:2px solid #151515}
.impact-eyebrow i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#151515}
.impact-title{margin-top:16px;font-size:clamp(30px,3.7vw,58px);font-weight:700;line-height:1.03;letter-spacing:-.035em;color:#141414}
.impact-sub{align-self:end;max-width:440px;font-size:clamp(15px,1.25vw,20px);line-height:1.4;color:#5c5f63}
.impact-grid{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:stretch;gap:clamp(14px,1.6vw,26px)}
.impact-photo{margin:0;border-radius:22px;overflow:hidden;min-height:0}
.impact-photo img{width:100%;height:100%;object-fit:cover;display:block}
.impact-stats{display:flex;flex-direction:column;gap:clamp(8px,1vh,12px)}
.impact-stat{flex:1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(16px,2.6vh,30px) clamp(22px,2vw,38px);background:#f1f1f1;border-radius:18px}
.impact-num{font-size:clamp(34px,3.6vw,54px);font-weight:700;letter-spacing:-.03em;color:#141414;opacity:0;transition:opacity .5s ease}
.impact-stats.counting .impact-num{opacity:1}
.impact-label{max-width:9ch;font-size:clamp(12px,1.05vw,17px);font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#20232a;text-align:right}
/* Odometer digits — each digit is a 1em-tall clipped column; the strip slides on Y to the final digit. */
.impact-num.od{display:inline-flex;align-items:flex-start;line-height:1}
.od-col{display:inline-block;height:1em;overflow:hidden;line-height:1}
.od-strip{display:flex;flex-direction:column;will-change:transform}
.od-strip>span{display:block;height:1em;line-height:1;text-align:center}
.od-static{display:inline-block;line-height:1}
@media (max-width:900px){
  .hero-why-line{top:30vh}.hw-lead{font-size:clamp(30px,8vw,48px)}
  .impact-section{padding:11vh 0}.impact-wrap{gap:22px}
  .impact-head{grid-template-columns:1fr;gap:12px}
  .impact-sub{align-self:start}
  .impact-grid{grid-template-columns:1fr;gap:12px}
  .impact-photo{display:none}
  .impact-num{font-size:32px}
  .impact-stat{padding:16px 22px}
}
/* Immobili in evidenza — full-bleed property reel the statement scrolls into (Homy-style). */
.props{background:#fff;padding:2vh 0 0}
.props-head{width:min(100% - 8.4vw,1370px);margin:0 auto clamp(30px,4.4vh,64px);display:grid;grid-template-columns:1.3fr .7fr;grid-template-areas:"eyebrow sub" "title sub";align-items:end;column-gap:44px;row-gap:16px}
.props-eyebrow{grid-area:eyebrow;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#151515}
.props-eyebrow i{position:relative;width:15px;height:15px;border-radius:50%;border:2px solid #151515}
.props-eyebrow i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#151515}
.props-title{grid-area:title;max-width:740px;font-size:clamp(30px,3.7vw,58px);font-weight:700;line-height:1.03;letter-spacing:-.035em;color:#141414}
.props-sub{grid-area:sub;align-self:end;max-width:400px;font-size:clamp(15px,1.25vw,20px);line-height:1.4;color:#5c5f63}
.props-reel{display:flex;flex-direction:column;gap:0;background:#0b0d0c}
.prop-panel{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(520px,84vh,880px);overflow:hidden;background:#0b0d0c;isolation:isolate;transform-origin:50% 0;backface-visibility:hidden;will-change:transform,opacity}
.prop-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.2s cubic-bezier(.2,.75,.2,1);filter:saturate(.96)}
.prop-panel:hover .prop-img{transform:scale(1.09)}
.prop-panel::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(4,6,8,.34)}
/* Homy-style frosted glass panel, centred (was a big name straight on the image). */
.prop-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:min(88vw,388px);padding:clamp(24px,3vw,34px) clamp(22px,2.6vw,30px);border-radius:18px;background:rgba(10,11,13,.24);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff}
.prop-price{display:inline-block;margin-bottom:16px;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);font-size:clamp(13px,1vw,16px);font-weight:600}
.prop-name{font-size:clamp(27px,2.6vw,34px);font-weight:600;line-height:1.06;letter-spacing:-.03em}
.prop-loc{margin-top:8px;font-size:clamp(14px,1.1vw,16px);font-weight:500;color:rgba(255,255,255,.82)}
.prop-cta{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:13px 22px;border-radius:999px;background:#fff;color:#111;font-size:14px;font-weight:600;transition:transform .25s ease}
.prop-cta span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#111;color:#fff;font-size:12px;transition:transform .25s ease}
.prop-cta:hover{transform:translateY(-2px)}
.prop-cta:hover span{transform:translateX(3px)}
@media (max-width:900px){
  .props-head{grid-template-columns:1fr;grid-template-areas:"eyebrow" "title" "sub";align-items:start;row-gap:12px}
  .props-sub{align-self:start;max-width:none}
  .prop-panel{height:clamp(440px,74vh,660px)}
  .prop-name{font-size:clamp(25px,6vw,32px)}
}
/* ============================================================================================
   HOMY-STYLE POST-HERO SECTIONS (continuation after #immobili): Services, Listings, Highlighted
   Home, Client Reviews, FAQ, Footer. Clean editorial system reusing the .impact / .props tokens.
   Additive only — does NOT touch the locked hero or the three sections above (#impatto/#approccio/#immobili).
   ============================================================================================ */
:root{--homy-ink:#080b0f;--homy-sub:#5c5f63;--homy-line:#e6e6e4;--homy-dark:#0b0d10}
.hs-shell{width:min(100% - 8.4vw,1370px);margin-inline:auto}
.hs-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#151515}
.hs-eyebrow i{position:relative;width:15px;height:15px;border-radius:50%;border:2px solid currentColor}
.hs-eyebrow i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:currentColor}
.hs-title{margin-top:16px;font-size:clamp(30px,3.7vw,58px);font-weight:700;line-height:1.03;letter-spacing:-.035em;color:var(--homy-ink)}
.hs-sub{font-size:clamp(15px,1.25vw,20px);line-height:1.4;color:var(--homy-sub)}
.hs-pill{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;background:var(--homy-ink);color:#fff;font-size:15px;font-weight:600;transition:transform .25s ease,background .25s}
.hs-pill span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--homy-ink);font-size:12px;transition:transform .25s}
.hs-pill:hover{transform:translateY(-2px)}.hs-pill:hover span{transform:translateX(3px)}

/* --- SERVICES — dark field, numbered full-width rows (01/02/03) --- */
.hs-services{background:var(--homy-dark);color:#fff;padding:clamp(80px,12vh,150px) 0}
.hs-services .hs-eyebrow,.hs-services .hs-title{color:#fff}
.hs-services .hs-sub{color:#9aa0a6}
.hs-serv-head{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:44px;margin-bottom:clamp(38px,6vh,68px)}
.hs-serv-head .hs-sub{align-self:end;max-width:420px}
.hs-serv-list{border-top:1px solid rgba(255,255,255,.14)}
.hs-serv-row{display:grid;grid-template-columns:76px 1fr clamp(200px,26vw,340px) 58px;align-items:center;gap:clamp(20px,3vw,44px);padding:clamp(24px,3.6vh,42px) 0;border-bottom:1px solid rgba(255,255,255,.14)}
.hs-serv-num{font-size:15px;font-weight:600;color:#7d848b}
.hs-serv-main h3{font-size:clamp(28px,3.6vw,54px);font-weight:600;line-height:1;letter-spacing:-.04em}
.hs-serv-main p{margin-top:12px;font-size:clamp(14px,1.15vw,18px);color:#9aa0a6}
.hs-serv-media{position:relative;height:clamp(96px,15vh,150px);border-radius:16px;overflow:hidden}
.hs-serv-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.hs-serv-arrow{justify-self:end;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:20px;transition:.3s}
.hs-serv-row:hover .hs-serv-media img{transform:scale(1.07)}
.hs-serv-row:hover .hs-serv-arrow{background:#fff;color:#111;border-color:#fff;transform:translateX(3px)}

/* --- PROPERTY LISTINGS — white, 4-card grid with badge + specs --- */
.hs-listings{background:#fff;padding:clamp(80px,12vh,150px) 0}
.hs-list-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;margin-bottom:clamp(34px,5vh,58px)}
.hs-list-head .hs-sub{margin-top:16px;max-width:520px}
.hs-list-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.hs-card{display:flex;flex-direction:column}
.hs-card-media{position:relative;aspect-ratio:4/4.6;border-radius:20px;overflow:hidden;background:#ececea}
.hs-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.hs-card:hover .hs-card-media img{transform:scale(1.06)}
.hs-badge{position:absolute;left:14px;top:14px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:12px;font-weight:600;color:#111}
.hs-card-price{position:absolute;right:14px;bottom:14px;padding:8px 15px;border-radius:999px;background:rgba(8,11,15,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:14px;font-weight:600}
.hs-card-body{padding:18px 4px 0}
.hs-card-body h3{font-size:clamp(19px,1.5vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--homy-ink)}
.hs-card-loc{margin-top:5px;font-size:14px;color:var(--homy-sub)}
.hs-specs{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--homy-line);font-size:13px;color:#3a3d42}
.hs-specs span{display:inline-flex;align-items:center;gap:6px}
.hs-specs span::before{content:"";width:5px;height:5px;border-radius:50%;background:#b7bbc0}
.hs-specs span:first-child::before{display:none}

/* --- MASTHEAD the clouds reveal — a villa emerging from fog (replaces the old "Perché ATON" text).
   Content-only: the #heroWhy container, its sky background and the cloud tween stay locked/untouched. --- */
#heroWhy::after{display:none!important}   /* hide the old "Un modo più chiaro di muoverti" caption */
.hw-masthead{position:absolute;inset:0;margin:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.hw-villa{width:min(72%,940px);max-height:84%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 30px 60px rgba(20,40,60,.18));transform:translateY(3%)}
.hw-fog{position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(to top,#fff 4%,rgba(255,255,255,.92) 32%,rgba(255,255,255,0) 100%);pointer-events:none}
@media (max-width:640px){.hw-villa{width:118%;max-height:70%}.hw-fog{height:38%}}

/* --- ESPLORA PER CATEGORIA — the 6 category cards the clouds reveal (inside #heroWhy, over the locked
   sky). Only the REVEALED CONTENT is authored here; the cloud animation/timeline and the sky background
   are untouched. Hit-testing note: the decorative hero layers (SVG scene, intro headline box, scroll
   hint) don't need to receive clicks, so we disable pointer-events on them ONLY so clicks reach the
   revealed cards — this changes nothing about the animation. The intro CTA stays clickable. --- */
#heroScene,#stageHeadline,#scrollHint{pointer-events:none}
#stageHeadline .btn{pointer-events:auto}
.hw-cats{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(16px,3vh,32px);padding:clamp(70px,10vh,124px) clamp(20px,4.4vw,70px) clamp(40px,7vh,86px);
  pointer-events:auto}
.hw-cats-head{text-align:center;max-width:900px;margin-inline:auto}
.hw-cats-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#10261f}
.hw-cats-eyebrow i{position:relative;width:14px;height:14px;border-radius:50%;border:2px solid #10261f}
.hw-cats-eyebrow i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#10261f}
.hw-cats-title{margin-top:14px;font-size:clamp(28px,3.6vw,56px);font-weight:700;line-height:1.03;letter-spacing:-.035em;color:#0d1f18}
/* Neumorphic property search bar above the cards (raised soft pill, brass extruded button). */
.hw-search{display:flex;align-items:center;gap:6px;width:min(100%,780px);margin:0 auto;
  padding:7px 7px 7px 8px;border-radius:999px;background:linear-gradient(145deg,#eef3f9,#dde5ef);
  box-shadow:9px 11px 24px rgba(92,116,148,.45), -9px -9px 20px rgba(255,255,255,.92)}
.hws-field{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0 8px 0 14px;height:52px}
.hws-loc{flex:1.5}
.hws-ic{width:19px;height:19px;flex:none;color:#7d8a97}
.hws-field input,.hws-field select{border:0;background:transparent;font:inherit;font-size:15px;color:#243a30;width:100%;outline:none;text-overflow:ellipsis}
.hws-field input{cursor:text}
.hws-field select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8a97' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") right center/12px no-repeat}
.hws-field input::placeholder{color:#8b98a4}
/* custom neumorphic dropdown — replaces the native <select> popup (which CSS can't theme) */
.hws-select{position:relative}
.hws-selbtn{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:0;background:transparent;font:inherit;font-size:15px;color:#243a30;cursor:pointer;padding:0}
.hws-selval{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hws-caret{width:16px;height:16px;flex:none;color:#7d8a97;transition:transform .3s ease}
.hws-select[data-open="true"] .hws-caret{transform:rotate(180deg)}
.hws-menu{position:absolute;top:calc(100% + 12px);left:-14px;right:-6px;z-index:30;margin:0;padding:8px;
  list-style:none;border-radius:20px;background:linear-gradient(145deg,#eef3f9,#dde5ef);
  box-shadow:13px 15px 32px rgba(92,116,148,.5), -10px -10px 22px rgba(255,255,255,.94);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top center;
  transition:opacity .24s ease,transform .26s cubic-bezier(.2,.7,.2,1),visibility .24s}
.hws-select[data-open="true"] .hws-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.hws-menu li{padding:11px 14px;border-radius:12px;font-size:14.5px;color:#41544b;cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.hws-menu li:hover{color:#243a30;box-shadow:inset 3px 3px 7px rgba(92,116,148,.34), inset -3px -3px 7px rgba(255,255,255,.85)}
.hws-menu li.is-sel{color:#8a6532;font-weight:600}
.hws-sep{width:1px;height:26px;flex:none;background:linear-gradient(rgba(150,165,185,.6),transparent);box-shadow:1px 0 0 rgba(255,255,255,.7)}
.hws-go{flex:none;display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 26px;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:15px;color:#231a0e;white-space:nowrap;
  background:linear-gradient(145deg,#c7a370,#a6793f);
  box-shadow:5px 6px 14px rgba(120,90,40,.42), -3px -3px 8px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.hws-go svg{width:18px;height:18px}
.hws-go:hover{transform:translateY(-2px);box-shadow:6px 8px 18px rgba(120,90,40,.5), -3px -3px 8px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.42)}
.hws-go:active{transform:translateY(0);box-shadow:inset 3px 3px 8px rgba(120,90,40,.5), inset -2px -2px 6px rgba(255,255,255,.3)}
/* minmax(0,1fr), NOT 1fr: a bare 1fr floors each column at its min-content, so the cards with the
   longest labels ("Villette / soluzioni indipendenti") steal width and the square wells come out at
   different sizes across the row. minmax(0,1fr) lets the text wrap and keeps all 6 wells identical. */
.hw-cats-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1vw,18px);width:min(100%,1400px);margin-inline:auto}
/* Neumorphic soft-UI card: a light surface extruded from the sky, photo pressed into an inset well.
   Same dual-shadow language as the site's legacy .neu (light hi up-left, cool lo down-right). */
.cat-card{position:relative;display:flex;flex-direction:column;gap:clamp(11px,1vw,15px);
  padding:clamp(12px,1.1vw,16px);border-radius:26px;text-decoration:none;color:#243a30;
  background:linear-gradient(145deg,#eef3f9,#dde5ef);
  box-shadow:11px 13px 28px rgba(92,116,148,.5), -10px -10px 22px rgba(255,255,255,.92);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.cat-card:hover,.cat-card:focus-visible{transform:translateY(-5px);outline:none;
  box-shadow:15px 18px 38px rgba(92,116,148,.56), -12px -12px 26px rgba(255,255,255,.96), 0 12px 34px rgba(179,137,78,.2)}
.cat-card:active{transform:translateY(0);
  box-shadow:inset 7px 7px 15px rgba(92,116,148,.5), inset -7px -7px 15px rgba(255,255,255,.9)}
.cat-media{position:relative;aspect-ratio:1/1;border-radius:19px;overflow:hidden;background:#e3eaf2;
  display:grid;place-items:center}
.cat-media::after{content:"";position:absolute;inset:0;border-radius:19px;pointer-events:none;
  box-shadow:inset 7px 7px 14px rgba(92,116,148,.42), inset -6px -6px 12px rgba(255,255,255,.7)}
.cat-photo{width:100%;height:100%;object-fit:contain;padding:14%;
  filter:drop-shadow(0 10px 14px rgba(50,80,115,.28));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cat-photo.is-photo{object-fit:cover;padding:0;filter:none}
.cat-card:hover .cat-photo{transform:scale(1.045)}
.cat-cap{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:0 4px 4px}
.cat-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
/* Type scales WITH the card instead of stepping at a breakpoint: 6 columns on a 1180px tablet make
   ~175px cards, and a fixed 13/11.5px label shattered "Cerca tra le 148 soluzioni che gestiamo" into
   4-5 lines. The vw terms are tuned so ≥1440px desktop lands on the max (14.4/11.5px) = unchanged
   from the approved desktop look, while tablets glide down to the 11/9.5px floor. */
.cat-name{font-size:clamp(11px,1vw,17px);font-weight:700;line-height:1.16;letter-spacing:-.01em;color:#243a30}
.cat-count{font-size:clamp(9.5px,.8vw,11.5px);line-height:1.26;color:#6a7a72}
/* hover "go" arrow — the extra touch of premium (brass, neumorphic) */
.cat-go{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  color:#8a6532;font-size:14px;background:linear-gradient(145deg,#f3f6fb,#dfe6ef);
  box-shadow:3px 3px 7px rgba(92,116,148,.42), -3px -3px 6px rgba(255,255,255,.92);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),color .4s ease,background .4s ease,box-shadow .4s ease}
.cat-card:hover .cat-go,.cat-card:focus-visible .cat-go{transform:translate(2px,-2px);color:#fff;
  background:linear-gradient(145deg,#c7a370,#a6793f);
  box-shadow:3px 4px 9px rgba(120,90,40,.5), -2px -2px 6px rgba(255,255,255,.55)}
@media (max-width:1100px){.hw-cats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (max-width:680px){
  /* Pinned reveal is 100vh and can't scroll, so heading + search + all 6 cards must fit: keep it tight. */
  .hw-cats{gap:clamp(10px,2vh,16px);padding:clamp(46px,7vh,74px) 13px 14px;justify-content:center}
  .hw-cats-eyebrow{font-size:11px}
  .hw-cats-title{font-size:clamp(19px,5.6vw,27px);margin-top:7px}
  .hw-search{width:100%;padding:5px 5px 5px 6px;gap:4px}
  .hws-loc{flex:1}
  .hws-type,.hws-sep{display:none}
  .hws-field{height:44px;padding:0 6px 0 12px}
  .hws-field input{font-size:14px}
  .hws-go{height:44px;width:44px;padding:0;border-radius:50%;justify-content:center;gap:0}
  .hws-go span{display:none}
  .hws-go svg{width:19px;height:19px}
  .hw-cats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cat-card{border-radius:18px;padding:9px;gap:8px;
    box-shadow:6px 8px 16px rgba(92,116,148,.42), -6px -6px 13px rgba(255,255,255,.9)}
  .cat-media{aspect-ratio:16/10;border-radius:13px}
  .cat-media::after{border-radius:13px}
  .cat-name{font-size:12px;line-height:1.12}.cat-count{font-size:10px;line-height:1.18}
  .cat-go{width:26px;height:26px;font-size:12px}
}

/* --- HIGHLIGHTED HOME — pinned scroll-zoom: small thumbnail → full-bleed crop over a drifting marquee.
   Sizing here is the START/END frame; GSAP (find-reference.js) scrubs scale + border-radius. --- */
.hs-highlight{background:#fff;padding:clamp(30px,6vh,80px) 0 0}
.hl2-intro{max-width:760px;padding-bottom:clamp(28px,5vh,58px)}
.hl2-intro .hs-sub{margin-top:18px}
.hl2-pin{position:relative;height:100vh;height:100svh;overflow:hidden;background:#fff;display:grid;place-items:center}
.hl2-marquee{position:absolute;top:50%;left:0;transform:translateY(-50%);display:flex;white-space:nowrap;font-size:clamp(30px,3.3vw,46px);font-weight:600;letter-spacing:-.025em;color:#3f484b;will-change:transform;z-index:1;pointer-events:none}
.hl2-marquee span{padding-right:.15em}
.hl2-frame{position:absolute;top:50%;left:50%;width:100vw;height:100vh;height:100svh;overflow:hidden;z-index:2;border-radius:0;will-change:transform,border-radius}
.hl2-frame img,.hl2-frame video{width:100%;height:100%;object-fit:cover;object-position:center 62%;will-change:transform;display:block}

/* --- CLIENT REVIEWS — light gray, quote slider + portrait card --- */
.hs-reviews{background:#f4f4f2;padding:clamp(80px,12vh,150px) 0}
.hs-rev-head{margin-bottom:clamp(38px,6vh,64px);max-width:760px}
.hs-rev-head .hs-sub{margin-top:16px}
.hs-rev-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,3vw,56px);align-items:stretch}
.hs-rev-quote{display:flex;flex-direction:column;justify-content:center}
.hs-rev-mark{font-family:Georgia,serif;font-size:76px;line-height:.5;color:var(--homy-ink)}
.hs-rev-quote blockquote{margin:28px 0 0;font-size:clamp(23px,2.5vw,38px);font-weight:500;line-height:1.18;letter-spacing:-.025em;color:#111;transition:opacity .35s ease}
.hs-rev-who{margin-top:32px}
.hs-rev-who b{display:block;font-size:18px;color:#111}
.hs-rev-who span{font-size:14px;color:var(--homy-sub)}
.hs-rev-nav{display:flex;gap:12px;margin-top:34px}
.hs-rev-nav button{width:48px;height:48px;border-radius:50%;border:1px solid #c9c9c7;background:transparent;font-size:18px;color:#111;cursor:pointer;transition:.25s}
.hs-rev-nav button:hover{background:#111;color:#fff;border-color:#111}
.hs-rev-photo{position:relative;border-radius:24px;overflow:hidden;min-height:440px}
.hs-rev-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-rev-photo figcaption{position:absolute;left:20px;bottom:20px;z-index:1;color:#fff}
.hs-rev-photo figcaption b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.hs-rev-photo figcaption span{font-size:13px;color:rgba(255,255,255,.82)}
.hs-rev-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,9,8,.6))}
/* Reviews as a horizontal track (Homy-style): text cards + a final portrait card, free scroll. */
.hs-rev-track{overflow:hidden;padding-bottom:10px;-ms-overflow-style:none;scrollbar-width:none}
.hs-rev-track::-webkit-scrollbar{display:none}
.hs-rev-lane{display:flex;gap:24px;width:max-content;will-change:transform}
.hs-rev-tcard,.hs-rev-pcard{flex:0 0 auto;width:clamp(290px,29vw,392px);height:clamp(400px,52vh,478px);border-radius:16px;margin:0}
@media (prefers-reduced-motion:reduce){.hs-rev-track{overflow-x:auto}.hs-rev-lane{width:max-content}}
.hs-rev-tcard{display:flex;flex-direction:column;padding:clamp(28px,2.4vw,36px) clamp(26px,2.2vw,34px);background:#f6f6f5}
.hs-rev-tcard .hs-rev-mark{font-family:Georgia,serif;font-size:58px;line-height:.5;color:#c8c9c7}
.hs-rev-tcard p{margin-top:26px;font-size:clamp(16px,1.35vw,19px);line-height:1.42;color:#1c1e22;letter-spacing:-.01em}
.hs-rev-author{margin-top:auto;display:flex;align-items:center;gap:14px}
.hs-rev-ava{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#111216;color:#fff;font-size:15px;font-weight:600;letter-spacing:.02em}
.hs-rev-author b{display:block;font-size:18px;font-weight:600;color:#111}
.hs-rev-author span{font-size:13px;color:#73787a}
.hs-rev-pcard{position:relative;overflow:hidden}
.hs-rev-pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-rev-pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(6,8,10,.66))}
.hs-rev-pcard figcaption{position:absolute;left:22px;bottom:22px;z-index:1;color:#fff}
.hs-rev-pcard figcaption b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.hs-rev-pcard figcaption span{font-size:13px;color:rgba(255,255,255,.82)}

/* --- FAQ — sticky heading + accordion --- */
.hs-faq{background:#fff;padding:clamp(80px,12vh,150px) 0}
.hs-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,90px);align-items:start}
.hs-faq-side{position:sticky;top:100px}
.hs-faq-list{border-top:1px solid var(--homy-line)}
.hs-faq-item{border-bottom:1px solid var(--homy-line)}
.hs-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;background:none;border:0;text-align:left;font-size:clamp(18px,1.5vw,24px);font-weight:500;color:var(--homy-ink);cursor:pointer}
.hs-faq-q i{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid #c9c9c7;display:grid;place-items:center;font-style:normal;font-size:20px;line-height:1;transition:.3s}
.hs-faq-item.open .hs-faq-q i{background:#111;color:#fff;border-color:#111;transform:rotate(45deg)}
.hs-faq-a{overflow:hidden;max-height:0;transition:max-height .4s ease}
.hs-faq-a p{padding:2px 0 26px;max-width:640px;font-size:16px;line-height:1.5;color:var(--homy-sub)}

/* --- CTA + FOOTER — measured from the Homy reference at 1440 × 900. --- */
.hs-close{position:relative;margin:16px;border-radius:26px;overflow:hidden;isolation:isolate;background:#080b0f;color:#fff}
.hs-close-media{position:relative;height:clamp(900px,86.8vw,1214px);overflow:hidden;background:#9ccde1}
.hs-close-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;-webkit-mask-image:linear-gradient(to bottom,#000 0 58%,rgba(0,0,0,.72) 72%,transparent 93%);mask-image:linear-gradient(to bottom,#000 0 58%,rgba(0,0,0,.72) 72%,transparent 93%)}
.hs-close-villa{position:absolute;left:0;right:0;bottom:0;width:100%;height:68.8%;object-fit:cover;object-position:center bottom;z-index:1;filter:saturate(.91) contrast(1.03);-webkit-mask-image:linear-gradient(to bottom,#000 0 71%,rgba(0,0,0,.92) 82%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0 71%,rgba(0,0,0,.92) 82%,transparent 100%)}
.hs-close-media::after{content:"";position:absolute;inset:48% 0 0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent 0,rgba(7,11,15,.08) 36%,rgba(7,11,15,.52) 82%,#080b0f 100%)}
.hs-cta{position:relative;z-index:4;padding-top:clamp(72px,6.5vw,96px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;color:#080b0f}
.hs-cta-eyebrow{color:#4b5b63}.hs-cta-eyebrow i{color:#4b5b63}
.hs-cta-title{max-width:690px;font-size:clamp(40px,3.35vw,48px);font-weight:700;line-height:1.4;letter-spacing:-.035em;color:#080b0f}
.hs-cta-sub{max-width:650px;font-size:clamp(16px,1.25vw,18px);font-weight:500;line-height:1.6;color:#4b5b63}
.hs-cta-button{display:inline-flex;align-items:center;gap:16px;margin-top:2px;padding:8px 8px 8px 17px;border-radius:12px;background:#080b0f;color:#fff;font-size:14px;line-height:1;box-shadow:0 10px 28px rgba(7,17,24,.16);transition:transform .2s,background .2s}
.hs-cta-button span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#fff;color:#080b0f;font-size:20px}.hs-cta-button:hover{transform:translateY(-2px);background:#182028}
/* A wide SVG wordmark whose vertical fill fades every letter into the wet floor. */
.hs-mega{position:absolute;left:50%;bottom:clamp(70px,6.6vw,94px);z-index:3;width:min(82.5%,1150px);transform:translateX(-50%);pointer-events:none;user-select:none;opacity:.88;filter:blur(.32px)}
.hs-mega svg{display:block;width:100%;height:auto;overflow:visible}.hs-mega text{font-family:var(--font);font-size:420px;font-weight:800;letter-spacing:-.035em}
.hs-foot-zone{position:relative;z-index:5;background:#080b0f;padding:0 0 26px}
.hs-foot{display:grid;grid-template-columns:1.7fr .6fr .9fr;gap:clamp(28px,4vw,56px);padding-top:0}
.hs-foot-brand>p{margin:18px 0;max-width:320px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}
.hs-foot-logo{height:26px;filter:brightness(0) invert(1)}
.hs-foot-social{display:flex;gap:16px}
.hs-foot-social a{display:inline-grid;place-items:center;color:#fff;opacity:.85;transition:opacity .2s}
.hs-foot-social a:hover{opacity:1}
.hs-foot-social svg{width:20px;height:20px;display:block}
.hs-foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#8a9096;margin-bottom:18px}
.hs-foot-col a,.hs-foot-col p{display:block;font-size:16px;color:#d5d8db;margin-bottom:12px}
.hs-foot-col a{transition:color .2s}.hs-foot-col a:hover{color:#fff}
.hs-foot-contact p{display:flex;align-items:center;gap:12px}
.hs-ci{flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.34);font-size:14px}
.hs-foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:clamp(28px,4vh,44px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.72)}

/* --- HOMY sections — responsive --- */
@media (max-width:1000px){
  .hs-serv-row{grid-template-columns:56px 1fr 52px;gap:20px}.hs-serv-media{display:none}
  .hs-list-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .hs-hl-grid{grid-template-columns:1fr;gap:34px}.hs-hl-media{height:min(52vh,440px);order:-1}
  .hs-rev-grid{grid-template-columns:1fr}.hs-rev-photo{min-height:320px;order:-1}
  .hs-faq-grid{grid-template-columns:1fr;gap:30px}.hs-faq-side{position:static}
  .hs-foot{grid-template-columns:1fr 1fr}.hs-foot-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .hs-serv-head,.hs-list-head,.hs-rev-head{grid-template-columns:1fr}.hs-serv-head .hs-sub,.hs-list-head .hs-sub{max-width:none}
  .hs-list-head{gap:22px}.hs-list-grid{grid-template-columns:1fr}
  .hs-serv-main h3{font-size:32px}
  .hs-close{margin:8px;border-radius:20px}.hs-close-media{height:880px}.hs-close-villa{width:auto;height:61%;left:50%;right:auto;transform:translateX(-50%);max-width:none}.hs-cta{padding:56px 20px 0}.hs-cta-title{font-size:38px;line-height:1.08}.hs-cta-sub{font-size:15px}.hs-mega{width:96%;bottom:98px}.hs-mega text{font-size:404px}.hs-foot-zone{padding-top:8px}.hs-foot{grid-template-columns:1fr}
}

/* ============================================================================================
   REDESIGN ZONE — everything from here down (Why ATON continuation → footer) is free to restyle.
   Airy, premium, glass / floating-panel system. Does NOT touch the locked hero above.
   ============================================================================================ */

/* ---- Shared glass / panel / label utilities ---- */
.glass{background:var(--re-glass);backdrop-filter:var(--re-blur);-webkit-backdrop-filter:var(--re-blur);
  border:1px solid rgba(255,255,255,.6);box-shadow:var(--re-shadow)}
.re-tag{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--pill);
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.kicker{display:inline-flex;align-items:center;gap:11px;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--re-brass)}
.kicker::before{content:"";width:24px;height:1.5px;background:currentColor;border-radius:2px;opacity:.75}
/* KPI stat tiles */
.stat{display:flex;flex-direction:column;gap:5px}
.stat-num{font-size:clamp(30px,3.2vw,44px);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--re-forest)}
.stat-num em{font-style:normal;color:var(--re-brass)}
.stat-label{font-size:12px;letter-spacing:.02em;color:var(--re-muted)}

/* ---- Why ATON — editorial continuation (light, airy) ---- */
.why-continuation{position:relative;padding:104px 0 150px;background:
  radial-gradient(120% 80% at 88% -12%,rgba(179,137,78,.10),transparent 52%),
  linear-gradient(180deg,var(--re-mist-2),var(--re-mist) 58%,var(--re-ivory))}
.why-continuation .container{display:grid;grid-template-columns:minmax(150px,.26fr) minmax(0,1fr);column-gap:70px;row-gap:0}
.why-continuation .kicker{grid-column:1;padding-top:9px}
.why-lead{grid-column:2;max-width:780px;margin-bottom:50px;font-size:clamp(25px,2.5vw,37px);font-weight:500;
  line-height:1.2;letter-spacing:-.03em;color:var(--re-ink)}
.why-lead b{font-weight:600}
.why-lead span{color:var(--re-muted)}
.why-media{grid-column:2;position:relative;width:100%;height:min(68vh,640px);border-radius:var(--re-radius);
  overflow:hidden;box-shadow:var(--re-shadow-lg);border:1px solid rgba(255,255,255,.5)}
.why-media img{width:100%;height:116%;object-fit:cover;transform:translate3d(0,-6%,0) scale(1.035);filter:saturate(.94);will-change:transform}
.media-tag{position:absolute;left:22px;top:22px;z-index:2;color:#fff;background:rgba(10,31,23,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28)}
.why-stats{grid-column:2;justify-self:end;align-self:start;position:relative;z-index:3;
  margin:-72px 30px 0 0;padding:26px 34px;border-radius:var(--re-radius-sm);
  display:grid;grid-auto-flow:column;gap:44px}
.why-caption{grid-column:2;display:grid;grid-template-columns:.34fr .66fr;gap:50px;padding:36px 4px 0;
  border-top:1px solid var(--re-line);margin-top:42px}
.why-caption span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--re-muted)}
.why-caption p{max-width:620px;font-size:clamp(18px,1.8vw,25px);line-height:1.32;letter-spacing:-.02em;color:var(--re-ink)}

/* ---- Story / chevrons (deep evergreen) ---- */
.chevrons{position:relative;color:#f4f0e8;padding:150px 0 170px;overflow:hidden;background:
  radial-gradient(90% 60% at 50% -12%,rgba(179,137,78,.14),transparent 58%),
  linear-gradient(180deg,var(--re-forest),var(--re-forest-3))}
.chevrons::before{content:"ATON / A different kind of move";position:absolute;top:36px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--re-brass-soft);white-space:nowrap}
.chevrons .mid-lead{max-width:1000px;margin:0 auto;color:#f4f0e8}
.chevron-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:80px auto 86px;max-width:1180px}
.chev{position:relative;width:auto;height:clamp(320px,45vw,540px);margin:0;overflow:hidden;
  border-radius:210px 210px 26px 26px;background:#173328;box-shadow:var(--re-shadow);border:1px solid rgba(255,255,255,.08)}
.chev:nth-child(2),.chev:nth-child(4){transform:translateY(42px)}
.chev::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(7,22,16,.6))}
.chev img{width:100%;height:108%;object-fit:cover;transform:translateY(-4%) scale(1.03);filter:saturate(.9);transition:transform 1.1s cubic-bezier(.2,.75,.2,1),filter .6s}
.chev:hover img{transform:translateY(-4%) scale(1.09);filter:saturate(1.05)}
.chev-copy{max-width:940px;margin:0 auto;font-size:clamp(24px,3vw,42px);font-weight:450;line-height:1.16;letter-spacing:-.03em;color:#f4f0e8}

/* ---- Real estate, rewired (light — floating glass step cards) ---- */
.rewired{position:relative;padding:160px 0;background:linear-gradient(180deg,var(--re-ivory),var(--re-mist-2))}
.rewired::before{content:"01 — The ATON method";position:absolute;top:48px;left:max(38px,calc((100vw - 1360px)/2 + 38px));font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--re-brass)}
.rewired-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:96px;align-items:start}
.rewired-left{position:sticky;top:110px}
.rewired-left .big-heading{margin-bottom:40px;max-width:560px;color:var(--re-forest)}
.steps-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px;color:var(--re-muted)}
.step-row{position:relative;display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;margin-bottom:16px;
  padding:32px 34px;border:1px solid var(--re-line-soft);border-radius:var(--re-radius-sm);
  background:var(--re-glass-strong);backdrop-filter:var(--re-blur);-webkit-backdrop-filter:var(--re-blur);
  box-shadow:var(--re-shadow-sm);transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .4s,border-color .4s}
.step-row:hover{transform:translateY(-4px);box-shadow:var(--re-shadow);border-color:rgba(179,137,78,.42)}
.step-num{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-size:13px;font-weight:600;
  color:#fff;background:linear-gradient(160deg,var(--re-forest-2),var(--re-forest));box-shadow:var(--re-shadow-sm)}
.step-row p{font-size:clamp(22px,2.2vw,31px);font-weight:500;line-height:1.2;letter-spacing:-.03em}

/* ---- Agent ownership (evergreen — sticky media + floating glass card) ---- */
.for-agents{position:relative;color:#f6f2ea;padding:170px 0;overflow:hidden;background:
  radial-gradient(80% 60% at 12% 0%,rgba(179,137,78,.12),transparent 55%),
  linear-gradient(180deg,var(--re-forest-2),var(--re-forest-3))}
.for-agents::before{content:"02 — Built for ownership";position:absolute;top:48px;right:max(38px,calc((100vw - 1360px)/2 + 38px));font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--re-brass-soft)}
.agents-grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:80px;align-items:start}
.agents-media{position:sticky;top:84px;min-height:760px}
.agents-img-1{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--re-radius);filter:saturate(.9);will-change:transform}
.agents-float{position:absolute;left:24px;right:24px;bottom:24px;z-index:2;display:flex;align-items:center;gap:26px;
  padding:22px 28px;border-radius:var(--re-radius-sm);color:var(--re-ink);
  background:rgba(255,255,255,.84);backdrop-filter:var(--re-blur);-webkit-backdrop-filter:var(--re-blur);
  border:1px solid rgba(255,255,255,.55);box-shadow:var(--re-shadow)}
.agents-float .stat{flex:0 0 auto}
.agents-float .divider{width:1px;align-self:stretch;background:var(--re-line)}
.agents-float p{font-size:13px;line-height:1.42;color:var(--re-ink-soft)}
.agents-copy{padding-top:70px}
.agents-copy .eyebrow{color:var(--re-brass-soft)}
.agents-copy .big-heading{margin-bottom:50px;color:#fff;max-width:720px}
.agents-img-2{width:76%;height:340px;object-fit:cover;border-radius:180px 24px 24px 180px;margin:0 0 42px auto;
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--re-shadow);will-change:transform}
.agents-copy .body-lg{max-width:670px;margin-bottom:40px;color:#cdd8d2}

/* ---- Testimonials (cool light — big floating glass quote card) ---- */
.testimonials{position:relative;padding:150px 0 170px;overflow:hidden;background:
  radial-gradient(90% 70% at 82% 0%,rgba(255,255,255,.72),transparent 55%),
  linear-gradient(180deg,var(--re-sky),#e6edf0)}
.testimonials::before{content:"03 — Client stories";position:absolute;top:46px;left:max(38px,calc((100vw - 1360px)/2 + 38px));font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--re-brass)}
.testimonials .mid-lead{max-width:850px;margin-bottom:64px;color:var(--re-forest)}
.testi-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:24px;align-items:stretch}
.testi-photo{position:relative;overflow:hidden;min-height:600px;border-radius:var(--re-radius);box-shadow:var(--re-shadow)}
.testi-photo img{width:100%;height:110%;object-fit:cover;transform:translateY(-4%);filter:saturate(.92);will-change:transform}
.testi-panel{display:flex;flex-direction:column;justify-content:space-between;padding:46px 50px;border-radius:var(--re-radius);
  background:var(--re-glass-strong);backdrop-filter:var(--re-blur);-webkit-backdrop-filter:var(--re-blur);
  border:1px solid rgba(255,255,255,.6);box-shadow:var(--re-shadow)}
.testi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}
.testi-dots{display:flex;gap:9px}
.testi-dots button{width:32px;height:32px;border:1px solid var(--re-line);border-radius:50%;background:rgba(255,255,255,.5);color:var(--re-ink-soft);font-size:11px;cursor:pointer;transition:.25s}
.testi-dots button:hover{border-color:var(--re-brass)}
.testi-dots button.active{border-color:var(--re-forest);background:var(--re-forest);color:#fff}
.testi-quote{font-family:var(--serif);font-size:76px;line-height:.6;color:var(--re-brass)}
.testi-quote-text{min-height:250px;font-family:var(--serif);font-size:clamp(25px,2.4vw,37px);line-height:1.26;font-weight:400;letter-spacing:-.015em;color:var(--re-ink);transition:opacity .25s ease,transform .25s ease}
.testi-quote-text.is-changing{opacity:0;transform:translateY(8px)}
.testi-meta{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--re-ink)}
.testi-meta .slash{color:var(--re-muted)}
.testi-stars{letter-spacing:2px;color:var(--re-brass)}

/* ---- Services / How ATON can help (deepest dark — animated rows) ---- */
.help{position:relative;color:#fff;padding:148px 0 0;background:
  radial-gradient(80% 50% at 50% 0%,rgba(179,137,78,.10),transparent 60%),
  linear-gradient(180deg,var(--re-forest-3),#081712)}
.help-intro{display:grid;grid-template-columns:minmax(120px,.28fr) minmax(0,1fr);gap:64px;align-items:start;padding-bottom:86px}
.help-eyebrow{grid-column:1;color:var(--re-brass-soft)}
.help-title{grid-column:2;font-size:clamp(54px,7vw,104px);font-weight:470;line-height:.92;letter-spacing:-.055em;text-align:left;max-width:870px}
.help-rows{border-top:1px solid var(--re-line-dk)}
.help-row{position:relative;min-height:38vh;border-bottom:1px solid var(--re-line-dk);overflow:hidden;isolation:isolate}
.help-row-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;opacity:0;clip-path:inset(0 100% 0 0);transform:scale(1.08);will-change:clip-path,opacity,transform}
.help-row-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,15,11,.92),rgba(6,15,11,.3) 55%,rgba(6,15,11,.8))}
.help-row-inner{position:relative;z-index:1;min-height:38vh;display:grid;grid-template-columns:56px minmax(230px,340px) 1fr 56px;gap:32px;align-items:center;padding:34px 38px}
.help-num{width:44px;height:44px;border:1px solid rgba(255,255,255,.28);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#cdd8d2;transition:.3s}
.help-text{font-size:14px;line-height:1.6;color:#93a099;transition:color .3s}
.help-word{font-size:clamp(86px,11vw,164px);font-weight:470;line-height:.8;letter-spacing:-.065em;justify-self:start;transition:transform .5s cubic-bezier(.2,.75,.2,1),color .3s;color:#f4f4f1}
.help-arrow{font-size:38px;opacity:.2;transform:translateX(-12px);transition:.4s;color:var(--re-brass-soft)}
.help-row.is-active .help-num{border-color:var(--re-brass);color:#fff;background:rgba(179,137,78,.2)}
.help-row.is-active .help-text{color:#fff}
.help-row.is-active .help-word{transform:translateX(22px)}
.help-row.is-active .help-arrow{opacity:1;transform:translateX(0);color:var(--re-brass)}
.help-cta{padding:112px 38px 140px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:40px}
.help-sub{max-width:980px;font-size:clamp(30px,3.8vw,54px);font-weight:470;line-height:1.1;letter-spacing:-.04em}

/* ---- Beyond the transaction / support (evergreen — glass-captioned photo cards) ---- */
.support{position:relative;color:#fff;padding:150px 0 170px;background:linear-gradient(180deg,#081712,var(--re-forest-2))}
.support-head{display:grid;grid-template-columns:1.08fr .92fr;gap:90px;align-items:end;margin-bottom:80px}
.support-head .big-heading{line-height:.91;font-size:clamp(56px,7.2vw,104px)}
.support-head-right{padding:0 0 10px}
.support-head-right .body-lg{margin-bottom:38px;color:#c8d2cd}
.support-cards{display:grid;grid-template-columns:1.05fr .85fr 1.1fr;gap:20px;padding-bottom:10px;align-items:end}
.support-card{position:relative;min-height:560px;border-radius:var(--re-radius);overflow:hidden;background:#22362e;border:1px solid rgba(255,255,255,.08);box-shadow:var(--re-shadow)}
.support-card:nth-child(2){min-height:470px}
.support-card img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:saturate(.88);transition:transform 1s cubic-bezier(.2,.75,.2,1),filter .5s;will-change:transform}
.support-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(4,15,10,.8))}
.support-card:hover img{transform:scale(1.06);filter:saturate(1)}
.support-card-body{position:absolute;inset:0;z-index:2;padding:28px;display:flex;flex-direction:column;align-items:flex-start}
.support-card-body h3{font-size:clamp(28px,2.5vw,38px);font-weight:480;line-height:1.02;letter-spacing:-.035em}
.support-card-desc{max-width:300px;margin-top:auto;margin-bottom:20px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.84)}
.support-card .btn{margin-top:auto;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.support-card:nth-child(3) .btn{margin-top:0}

/* ---- Journal / blog (light — glass cards) ---- */
.blog{position:relative;padding:160px 0 180px;background:linear-gradient(180deg,var(--re-mist),var(--re-ivory))}
.blog-head{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:end;margin-bottom:56px}
.blog-head .big-heading{color:var(--re-forest)}
.blog-head-right{padding:0 0 10px}
.blog-head-right .body-lg{margin-bottom:36px}
.blog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.blog-post{display:flex;flex-direction:column-reverse;align-items:stretch;padding:0;overflow:hidden;
  border:1px solid var(--re-line-soft);border-radius:var(--re-radius);background:var(--re-glass-strong);
  backdrop-filter:var(--re-blur);-webkit-backdrop-filter:var(--re-blur);box-shadow:var(--re-shadow-sm);
  transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .4s}
.blog-post:hover{transform:translateY(-5px);box-shadow:var(--re-shadow)}
.blog-post:first-child{grid-column:1/-1;display:grid;grid-template-columns:.88fr 1.12fr;min-height:560px}
.blog-post.reverse .blog-post-media{order:0}
.blog-post.reverse .blog-post-text{padding-left:34px}
.blog-post-text{padding:34px;display:flex;flex-direction:column;align-items:flex-start}
.blog-date{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--re-brass)}
.blog-post-text h3{font-size:clamp(28px,3vw,46px);font-weight:500;line-height:1.05;letter-spacing:-.04em;margin:16px 0;color:var(--re-ink)}
.blog-post:not(:first-child) .blog-post-text h3{font-size:clamp(25px,2.2vw,34px)}
.blog-post-text p{max-width:500px;margin-bottom:30px;font-size:14px;line-height:1.6;color:var(--re-muted)}
.blog-post-text .btn{margin-top:auto}
.blog-post-media{overflow:hidden;aspect-ratio:16/10}
.blog-post:first-child .blog-post-media{aspect-ratio:auto}
.blog-post-media img{width:100%;height:110%;object-fit:cover;transform:translateY(-4%);filter:saturate(.92);transition:transform .8s;will-change:transform}
.blog-post:hover .blog-post-media img{transform:translateY(-4%) scale(1.04)}

/* ---- Closing invitation / CTA (floating rounded stage) ---- */
.cta{position:relative;height:150vh;padding:28px;background:var(--re-ivory)}
.cta-stage{position:sticky;top:28px;height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;border-radius:var(--re-radius);box-shadow:var(--re-shadow-lg)}
.cta-bg{position:absolute;inset:-7%;width:114%;height:114%;object-fit:cover;object-position:center 45%;filter:grayscale(.06) contrast(1.03) saturate(.9);will-change:transform}
.cta-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,25,18,.3),rgba(6,22,16,.78));will-change:opacity}
.cta-inner{position:relative;z-index:2;text-align:center;color:#fff;will-change:transform,opacity}
.cta-inner .kicker{color:var(--re-brass-soft);justify-content:center;margin-bottom:24px}
.cta-title{max-width:1100px;margin:0 auto 38px;font-size:clamp(44px,6.4vw,94px);font-weight:470;line-height:.96;letter-spacing:-.055em;color:#fff}
.cta .btn-light{background:rgba(255,255,255,.96)}

/* ---- Footer (deepest dark) ---- */
.site-footer{position:relative;color:#fff;padding:110px 0 30px;background:linear-gradient(180deg,var(--re-forest-2),#081712)}
.site-footer::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:24px;background:#081712;pointer-events:none}
.footer-top{display:grid;grid-template-columns:1.7fr .8fr .6fr;gap:70px;padding-bottom:80px;border-bottom:1px solid var(--re-line-dk);margin-bottom:56px}
.footer-news h3{font-size:clamp(26px,2.6vw,38px);font-weight:470;letter-spacing:-.035em;margin-bottom:32px}
.news-form{display:flex;align-items:center;max-width:620px;border:1px solid var(--re-line-dk);border-radius:var(--pill);padding:6px 6px 6px 22px;background:var(--re-glass-dk)}
.news-form input{flex:1;padding:12px 0;border:0;outline:0;background:transparent;color:#fff;font-size:15px}
.news-form input::placeholder{color:#8a948f}
.news-form button{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;background:var(--re-brass);color:#0e2a20;font-size:20px;cursor:pointer;transition:.25s}
.news-form button:hover{background:var(--re-brass-soft);transform:translateX(2px)}
.footer-links,.footer-social{display:flex;flex-direction:column;gap:15px}
.footer-links a{font-size:clamp(21px,2vw,29px);font-weight:470}
.footer-links a:hover,.footer-social a:hover{color:var(--re-brass-soft)}
.footer-social a{font-size:13px;color:#a7b0ab}
.footer-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:850px;padding-bottom:60px}
.fc-label{display:block;margin-bottom:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--re-brass)}
.footer-contact p{font-size:14px;line-height:1.55;color:#c8d2cd}
.footer-wordmark{padding:12px 38px 42px;overflow:hidden}
.footer-wordmark img{width:100%;height:auto;filter:brightness(0) invert(1);opacity:.96;transform:translateY(4%);will-change:transform}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--re-line-dk)}
.footer-legal{display:flex;flex-wrap:wrap;gap:18px}
.footer-legal a,.footer-copy span{font-size:10px;color:#8a948f}
.footer-legal a:hover{color:#fff}
.footer-copy{display:flex;gap:28px}

@media (max-width:1050px){
  .container{padding:0 25px}
  .section{padding:96px 0}
  .hero-why-grid,.why-continuation .container,.help-intro{grid-template-columns:1fr;gap:16px}
  .hero-why .eyebrow,.hero-why .big-lead,.why-media,.why-caption,.help-eyebrow,.help-title{grid-column:1}
  .why-media{width:100%}
  .why-continuation .kicker,.why-lead,.why-stats{grid-column:1}
  .why-stats{justify-self:start;margin:26px 0 0}
  .chevron-row{grid-template-columns:repeat(2,1fr);max-width:760px}
  .rewired-grid,.agents-grid,.testi-grid,.support-head,.blog-head{grid-template-columns:1fr;gap:42px}
  .rewired-left{position:static}
  .agents-media{position:relative;top:auto;min-height:620px}
  .agents-img-1{width:100%;height:100%}
  .agents-copy{padding-top:20px}
  .testi-photo{min-height:540px}
  .support-cards{grid-template-columns:1fr}
  .support-card{aspect-ratio:16/8;min-height:360px}
  .support-card:nth-child(2){min-height:360px}
  .blog-list{grid-template-columns:1fr}
  .blog-post:first-child{grid-column:1;grid-template-columns:1fr;min-height:0}
  .blog-post,.blog-post.reverse{grid-template-columns:1fr;gap:28px}
  .blog-post.reverse .blog-post-media{order:0}
  .blog-post.reverse .blog-post-text{padding-left:0}
  .help-row-inner{grid-template-columns:44px minmax(190px,280px) 1fr 38px;gap:20px;padding-left:25px;padding-right:25px}
  .footer-top{grid-template-columns:1fr;gap:38px}
  .footer-contact{grid-template-columns:1fr}
}

@media (max-width:760px){
  :root{--header-h:64px}
  .container{padding:0 20px}
  .section{padding:78px 0}
  .main-nav{display:none}
  .header-actions{display:none}
  .hamburger{display:flex}
  .main-nav.open{display:flex;position:fixed;top:0;left:0;right:0;z-index:120;flex-direction:column;align-items:flex-start;gap:18px;margin:0;padding:84px 24px 28px;background:rgba(255,255,255,.97);box-shadow:0 12px 30px rgba(0,0,0,.1)}
  .main-nav.open a{font-size:18px}
  .hamburger{position:relative;z-index:130}
  .scroll-hero{height:100vh}
  .hero-title{font-size:clamp(48px,14vw,78px);white-space:normal}
  .stage-headline{top:13vh}
  .hero-sub span{display:block}
  .hero-why::after{display:none}
  .hero-why-grid{top:24vh}
  .hero-why .big-lead{font-size:clamp(36px,9vw,60px)}
  .why-continuation{padding:56px 0 110px}
  .why-media{height:48vh;margin-top:46px;border-radius:20px}
  .why-stats{gap:22px;padding:22px 24px}
  .why-caption{grid-template-columns:1fr;gap:14px}
  .agents-float{flex-wrap:wrap;gap:14px;padding:16px 18px;left:16px;right:16px;bottom:16px}
  .agents-float .divider{display:none}
  .chevrons{padding:120px 0}
  .chevron-row{grid-template-columns:repeat(2,1fr);gap:10px;margin:56px auto 64px}
  .chev{width:auto;height:280px;margin:0;border-radius:999px 999px 18px 18px}
  .chev:nth-child(2),.chev:nth-child(4){transform:translateY(22px)}
  .agents-media{min-height:460px}
  .agents-img-1{width:100%}
  .agents-img-2{width:100%;height:280px;border-radius:140px 20px 20px 140px}
  .testi-photo{min-height:420px}
  .testi-panel{padding:30px 24px}
  .testi-quote-text{min-height:auto;margin-bottom:30px}
  .help{padding-top:84px}
  .help-intro{padding-bottom:44px}
  .help-row{min-height:auto}
  .help-row-inner{min-height:330px;grid-template-columns:38px 1fr;grid-template-rows:auto auto auto;gap:18px;padding:28px 20px}
  .help-text{grid-column:2}
  .help-word{grid-column:2;font-size:clamp(65px,22vw,105px)}
  .help-arrow{display:none}
  .help-cta{padding:72px 20px 92px}
  .support-card{aspect-ratio:3/4;min-height:390px}
  .cta{height:125vh;padding:14px}
  .cta-stage{top:14px;height:calc(100vh - 28px);border-radius:22px}
  .cta-title{font-size:clamp(39px,12vw,62px)}
  .footer-wordmark{padding-left:20px;padding-right:20px}
  .footer-legal{gap:13px}
  .footer-copy{gap:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .motion-reveal,.motion-clip{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ============================================================================================
   NEUMORPHISM PASS — 2026-07-15 (user request)
   1) SEAM-FREE CANVAS: every light post-hero section shares ONE soft tone (--canvas), close to the
      hero sky's pale bottom (#e7ebe8), so section-to-section colour steps vanish. Dark sections
      (#immobili reel, #servizi, footer) stay dark on purpose.
   2) NEUMORPHIC CARDS: the price / listing / review cards get the same soft-extruded language as
      the category cards (.cat-card) — LIGHT neu where the surface is light, DARK ("black") neu where
      it is dark. White chips stay white-neu, dark chips stay dark-neu (respecting the originals).
   Additive block, kept last so it wins by source order. NOTHING here touches the locked hero.
   ============================================================================================ */
:root{
  --canvas:#e7ebe8;            /* == the hero sky's pale bottom, so hero → post-hero is seamless */
  --neu-surface:linear-gradient(145deg,#eef3f9,#dde5ef);
  --neu-raise:11px 13px 28px rgba(92,116,148,.5), -10px -10px 22px rgba(255,255,255,.92);
  --neu-raise-lg:15px 18px 40px rgba(92,116,148,.56), -12px -12px 26px rgba(255,255,255,.96);
  --neu-inset:inset 6px 6px 13px rgba(92,116,148,.4), inset -5px -5px 11px rgba(255,255,255,.72);
  --neu-dark-surface:linear-gradient(145deg,#1a1e24,#0b0d11);
  --neu-dark-raise:16px 18px 38px rgba(0,0,0,.72), -12px -12px 26px rgba(78,88,100,.22);
  --neu-dark-inset:inset 5px 5px 12px rgba(0,0,0,.6), inset -5px -5px 11px rgba(78,88,100,.16);
}

/* ---- 1) one continuous canvas → no visible seams between light sections ---- */
/* body carries the canvas too, so the small pin-spacer gap between the hero section and .find-page
   shows the canvas (not the white body) → the hero→#impatto seam disappears entirely. */
body{background:var(--canvas)}
.impact-section,.props,.hs-listings,.hs-reviews,.hs-faq,.hs-highlight{background:var(--canvas)}
.hl2-pin,.hl2-frame{background:var(--canvas)}

/* ---- IMPATTO: stat cards + flanking photos lifted onto the canvas ---- */
.impact-stat{background:var(--neu-surface);box-shadow:var(--neu-raise);border-radius:20px}
.impact-num,.impact-label{color:#22303a}
.impact-photo{box-shadow:var(--neu-raise)}

/* ---- 2a) IMMOBILI (#immobili): glass card → BLACK neumorphism (opaque, extruded) ---- */
.prop-card{
  background:var(--neu-dark-surface);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid rgba(90,100,112,.14);
  box-shadow:var(--neu-dark-raise);
  border-radius:28px;
}
.prop-price{
  background:transparent;border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--neu-dark-inset);
  color:#e9eef3;
}
.prop-cta{
  background:linear-gradient(145deg,#ffffff,#e7ecf2);color:#14171b;
  box-shadow:7px 8px 17px rgba(0,0,0,.42), -4px -4px 11px rgba(78,88,100,.22);
}
.prop-cta span{background:#14171b;color:#fff}

/* ---- 2b) ANNUNCI (#annunci): listing cards → LIGHT neumorphism, photo in an inset well ---- */
.hs-card{
  background:var(--neu-surface);
  box-shadow:var(--neu-raise);
  border-radius:26px;padding:12px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;
}
.hs-card:hover{transform:translateY(-6px);box-shadow:var(--neu-raise-lg)}
.hs-card-media{border-radius:17px;background:#d7dfe9}
.hs-card-media::after{content:"";position:absolute;inset:0;z-index:1;border-radius:17px;pointer-events:none;
  box-shadow:inset 6px 6px 13px rgba(92,116,148,.34), inset -5px -5px 11px rgba(255,255,255,.6)}
.hs-badge,.hs-card-price{z-index:2}
.hs-badge{ /* white chip → white-neu raised */
  background:linear-gradient(145deg,#f4f7fb,#e2e9f1);color:#243a30;border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:4px 5px 11px rgba(92,116,148,.42), -3px -3px 8px rgba(255,255,255,.92);
}
.hs-card-price{ /* dark chip → dark-neu raised */
  background:var(--neu-dark-surface);color:#e9eef3;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:4px 5px 11px rgba(0,0,0,.42), -3px -3px 8px rgba(78,88,100,.28);
}
.hs-card-body{padding:16px 10px 6px}
.hs-specs{border-top-color:rgba(92,116,148,.26)}
.hs-card-loc,.hs-specs{color:#5a6b73}

/* ---- 2c) RECENSIONI (#recensioni): review panels → LIGHT neumorphism, consistent ---- */
.hs-rev-tcard{background:var(--neu-surface);box-shadow:var(--neu-raise);border-radius:24px}
.hs-rev-tcard .hs-rev-mark{color:#b7c5d6}
.hs-rev-tcard p{color:#26333b}
.hs-rev-author b{color:#1a2830}
.hs-rev-ava{background:var(--neu-dark-surface);box-shadow:4px 5px 11px rgba(0,0,0,.4), -3px -3px 8px rgba(78,88,100,.2)}
.hs-rev-pcard{box-shadow:var(--neu-raise);border-radius:24px}

/* ============================================================================================
   UNIFIED ARROW BUTTON + "arrow-slide" hover — 2026-07-15 (user request)
   One pill style for every text+arrow CTA. On hover the arrow slides out to the right while a
   second arrow slides in from the left (the classic Framer "arrow loop"), and the pill lifts and
   lights up a touch. Reuse anywhere by adding class "btn-arrow" (+ "btn-arrow-light" on dark
   backgrounds). Applied to: footer "Contattaci" (.hs-cta-button), "Esplora tutti" (.hs-pill),
   the card "Esplora" (.prop-cta, light), and the hero "Cerca Immobili" (CSS-only, below).
   ============================================================================================ */
.btn-arrow{
  display:inline-flex;align-items:center;gap:14px;
  padding:8px 8px 8px 20px;border-radius:14px;border:0;cursor:pointer;
  background:#080b0f;color:#fff;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  box-shadow:0 10px 26px rgba(7,17,24,.16);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s ease,box-shadow .3s ease;
}
.btn-arrow>span{
  position:relative;overflow:hidden;flex:none;
  display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  background:#fff;color:#080b0f;font-size:0;
}
.btn-arrow>span::before,.btn-arrow>span::after{
  content:"\2192";position:absolute;inset:0;display:grid;place-items:center;
  font-size:17px;line-height:1;
  transition:transform .42s cubic-bezier(.34,1.1,.4,1);
}
.btn-arrow>span::after{transform:translateX(-150%)}
.btn-arrow:hover{transform:translateY(-2px);background:#182028;box-shadow:0 16px 34px rgba(7,17,24,.26)}
.btn-arrow:hover>span{transform:none}                       /* keep the chip still — arrows slide inside it */
.btn-arrow:hover>span::before{transform:translateX(150%)}
.btn-arrow:hover>span::after{transform:translateX(0)}
.btn-arrow:active{transform:translateY(0)}
.btn-arrow:focus-visible{outline:2px solid #8a6532;outline-offset:3px}
/* light variant — for dark surfaces (e.g. the #immobili black cards) */
.btn-arrow-light{background:#fff;color:#14171b;box-shadow:0 12px 30px rgba(0,0,0,.32)}
.btn-arrow-light>span{background:#14171b;color:#fff}
.btn-arrow-light:hover{background:#eef1f5;box-shadow:0 18px 40px rgba(0,0,0,.42)}

/* Hero "Cerca Immobili" button — same unified pill + arrow-slide, applied CSS-ONLY (no markup change
   inside the locked hero). Only the button's look/hover changes; the scroll animation is untouched. */
#stageHeadline .btn.btn-dark{
  gap:14px;padding:8px 8px 8px 20px;border-radius:14px;background:#080b0f;
  box-shadow:0 10px 26px rgba(7,17,24,.18);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s ease,box-shadow .3s ease;
}
#stageHeadline .btn.btn-dark:hover{transform:translateY(-2px);background:#182028;box-shadow:0 16px 34px rgba(7,17,24,.28)}
#stageHeadline .btn em{
  position:relative;overflow:hidden;flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:10px;background:#fff;color:#080b0f;font-size:0;transition:none;
}
#stageHeadline .btn em::before,#stageHeadline .btn em::after{
  content:"\2192";position:absolute;inset:0;display:grid;place-items:center;color:#080b0f;
  font-size:17px;line-height:1;transition:transform .42s cubic-bezier(.34,1.1,.4,1);
}
#stageHeadline .btn em::after{transform:translateX(-150%)}
#stageHeadline .btn:hover em{transform:none}                /* cancel the base translateX(4px) */
#stageHeadline .btn:hover em::before{transform:translateX(150%)}
#stageHeadline .btn:hover em::after{transform:translateX(0)}

/* ============================================================================================
   CATEGORY CARDS — the render fills the frame like a photo and its TOP alone bursts out
   (2026-07-15, rev.2 — rebuilt against the user's reference shot).
   How it must read: the well CLIPS the render at its left/right/bottom borders — the base of the
   isometric island (fence, grass, pool) is cut by the frame exactly like a framed photo — while
   the TOP edge stays open, so the roof crosses the border and spills onto the card/sky. Part of
   the photo INSIDE the border, part OUTSIDE: that contrast is the whole effect. (This supersedes
   the earlier "never clip" rule: back then the render was small and floated, so a clip read as a
   broken image. Zoomed in like a real photo, the clip reads as the frame.)
   Implementation: the clip lives on .cat-media — clip-path inset with a NEGATIVE top (open) and
   `round` = the well radius. Each card zooms its render past the well (--zoom, × well width) and
   sinks its base below the well bottom (--drop, × well height) so the frame bites into the island
   on three sides and the top clears the border by ~15-25% of the well.
   Content-only: cloud animation / sky / timeline untouched.
   ============================================================================================ */
.cat-card{overflow:visible}
.cat-card:hover{z-index:5}
.cat-card{padding:clamp(12px,1.9vw,26px)}
.cat-card .cat-media{overflow:visible;
  clip-path:inset(-75% 0 0 0 round 19px)}      /* sides+bottom clip at the well border, top open */
.cat-card .cat-media::after{z-index:1}          /* rim stays BEHIND the render */
/* :not(.is-photo) = safety. If a cutout PNG ever 404s, the onerror swaps in a cover .jpg and adds
   .is-photo — that one must keep the plain "fills the well" behaviour, not the cutout geometry. */
.cat-card .cat-photo:not(.is-photo){
  position:absolute;left:50%;bottom:calc(var(--drop,0)*-100%);z-index:2;
  width:calc(var(--zoom,1.25)*100%);height:auto;max-width:none;padding:0;
  /* real box size BEFORE the file loads: without this the absolute img is 0px tall until decode,
     the browser's lazy-loader never sees it intersect and may simply never fetch it (bit us with
     cat-palazzi.png). --par = the PNG's true w/h, declared per card next to --zoom/--drop. */
  aspect-ratio:var(--par,1);
  transform:translateX(-50%);pointer-events:none;
  /* Two shadows on purpose: the soft one lifts the bursting top off the card, the TIGHT one traces
     the silhouette (a white roof vanishes on the light card without it). The clip eats them on the
     framed part — they only show on the piece that escapes, which is exactly right. */
  filter:drop-shadow(0 13px 15px rgba(30,50,80,.3)) drop-shadow(0 1px 2px rgba(35,55,85,.34));
}
/* The well is SQUARE → displayed height = --zoom/aspect (× well height) and the top burst =
   height − 1 − --drop. Portrait cutouts (palazzi, terreni) get tall fast → zoom less, sink more;
   landscape ones (appartamenti, box) must zoom well past the sides to clear the top at all —
   that's the aspect constraint from before, now solved by clipping instead of capping. */
.cat-card[data-cat="appartamenti"]{--zoom:1.52;--drop:.02;--par:900/682}  /* landscape */
.cat-card[data-cat="villette"]    {--zoom:1.28;--drop:.07;--par:800/800}  /* square    */
.cat-card[data-cat="palazzi"]     {--zoom:1.06;--drop:.30;--par:624/900}  /* portrait  */
.cat-card[data-cat="negozi"]      {--zoom:1.20;--drop:.06;--par:848/900}
.cat-card[data-cat="box"]         {--zoom:1.44;--drop:.02;--par:900/747}  /* landscape */
.cat-card[data-cat="terreni"]     {--zoom:1.14;--drop:.08;--par:779/900}  /* portrait  */
.cat-card:hover .cat-photo:not(.is-photo){transform:translateX(-50%) scale(1.04)}
/* Scoped to ≥681px on purpose: unscoped, this generous desktop gap beat the mobile block's tight
   one (later in source order) and quietly stole ~44px of height from the 100svh pin — enough to
   push the last row of cards off the bottom of a 360×740 phone. */
@media (min-width:681px){
  .hw-cats-grid{gap:clamp(12px,1.5vw,22px)}
  .hw-cats{gap:clamp(18px,5vh,46px)}
}
/* ---- TABLET (681-1100px) ------------------------------------------------------------------
   Landscape tablets (1024×768 & co.): the 3-column layout overflowed the 100vh pin by ~100px —
   the well is square and sized by its column, so 3 columns on a wide viewport make the cards far
   too tall for a short one. Landscape has width to spare and height to save → all 6 in one row,
   with type dialled down so the labels don't wrap into five lines inside a ~120px card. */
@media (min-width:681px) and (max-width:1100px) and (orientation:landscape){
  .hw-cats-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
  .cat-card{padding:clamp(9px,1.3vw,14px);gap:9px;border-radius:20px}
  .cat-media{border-radius:15px}
  .cat-media::after{border-radius:15px}
  .cat-card .cat-media{clip-path:inset(-75% 0 0 0 round 15px)}
  .cat-name{font-size:11.5px;line-height:1.14}
  .cat-count{font-size:9.5px;line-height:1.2}
  .cat-go{width:24px;height:24px;font-size:11px}
}
/* Portrait tablets keep 3×2, but the row gap must clear the bursts (~24% of the well, 40-50px)
   or the second row's roofs land on the first row's captions; plus air under the search bar. */
@media (min-width:681px) and (max-width:1100px) and (orientation:portrait){
  .hw-cats-grid{gap:clamp(40px,5.5vh,60px) 16px;margin-top:10px}
}
/* ---- MOBILE (≤680px) ------------------------------------------------------------------------
   Wells here are much WIDER than tall, so the desktop --zoom/--drop pair doesn't transfer: with
   it the render floated inside the well again (the rejected "sticker" look). Same reasoning,
   mobile-tuned pair: the render fills the well just past its sides (--zoom-m) and sinks DEEP
   below the bottom (--drop-m — on wide wells most of the island's base goes under the frame),
   so the frame still bites on three sides and only the top escapes by ~22% of the well.
   16/9 wells (vs 16/10) + tighter top padding buy the row-gap the bursts need in the 100vh pin. */
@media (max-width:680px){
  .cat-card{padding:clamp(10px,3vw,16px)}
  .cat-card .cat-media{aspect-ratio:16/9;clip-path:inset(-75% 0 0 0 round 13px)}
  .cat-card .cat-photo:not(.is-photo){
    width:calc(var(--zoom-m,1.04)*100%);bottom:calc(var(--drop-m,.6)*-100%)}
  .cat-card[data-cat="appartamenti"]{--zoom-m:1.06;--drop-m:.21}
  .cat-card[data-cat="villette"]    {--zoom-m:1.04;--drop-m:.63}
  .cat-card[data-cat="palazzi"]     {--zoom-m:1.02;--drop-m:1.40}
  .cat-card[data-cat="negozi"]      {--zoom-m:1.04;--drop-m:.74}
  .cat-card[data-cat="box"]         {--zoom-m:1.05;--drop-m:.32}
  .cat-card[data-cat="terreni"]     {--zoom-m:1.03;--drop-m:.88}
  .hw-cats{padding-top:clamp(38px,5.5vh,58px)}
  .hw-cats-grid{gap:26px 12px}
}
/* SHORT PHONES (360×740, 320×568…). The pin is exactly one screen and cannot scroll, so anything
   taller than it is simply cut off — measured: the last row of cards lost its caption. Nothing is
   removed, it's all dialled down: tighter chrome, and the count clamped to 2 lines (…) instead of
   wrapping to 4 inside a ~120px card. */
@media (max-width:680px) and (max-height:750px){
  .hw-cats{padding:clamp(28px,4.5vh,42px) 12px 10px;gap:clamp(8px,1.6vh,13px)}
  .hw-cats-title{margin-top:7px}   /* size already handled by the ≤680 block — don't grow it back */
  .cat-card{padding:8px;gap:6px;border-radius:15px}
  .cat-media,.cat-media::after{border-radius:11px}
  .cat-card .cat-media{clip-path:inset(-75% 0 0 0 round 11px)}
  .cat-count{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hw-cats-grid{gap:15px 10px}
  .cat-go{width:22px;height:22px;font-size:10px}
}
/* VERY SHORT PHONES (320×568 — SE 1st gen and friends). 3 rows of cards simply do not fit a 568px
   pin at the sizes above; measured 39px short. Last squeeze: the count drops to a single line and
   the chrome goes minimal. Everything is still there and the burst still reads (~15px). */
@media (max-width:680px) and (max-height:620px){
  .hw-cats{padding:clamp(14px,2.6vh,24px) 10px 6px;gap:6px}
  .cat-card{padding:6px;gap:4px}
  .cat-count{-webkit-line-clamp:1}
  .hw-cats-grid{gap:8px 9px}
}
/* LANDSCAPE PHONES (844×390 & co.) — the widest-but-shortest case: 6 columns fit fine, but the
   hero's desktop top padding (70px) ate a fifth of a 390px screen and pushed the row off. */
@media (orientation:landscape) and (max-height:520px){
  .hw-cats{padding:clamp(14px,4vh,26px) clamp(14px,3vw,34px) 10px;gap:clamp(6px,1.4vh,12px)}
  .hw-cats-title{font-size:clamp(20px,3.4vh,30px);margin-top:6px}
  .hw-cats-eyebrow{font-size:10.5px;margin-bottom:0}
  .cat-count{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* TOUCH — a finger has no hover, so on a phone/tablet the :hover state LATCHES on tap and stays
   stuck (card left hanging mid-lift, arrow stuck brass) until you tap elsewhere. Neutralise the
   mouse-only state there; :active (press-in) is re-asserted after it because both match during a
   tap and source order decides, and :focus-visible (keyboard) is untouched. Nothing changes for
   anyone on a mouse. */
@media (hover:none){
  .cat-card:hover{transform:none;
    box-shadow:11px 13px 28px rgba(92,116,148,.5), -10px -10px 22px rgba(255,255,255,.92)}
  .cat-card:hover .cat-photo{transform:none}
  .cat-card:hover .cat-photo:not(.is-photo){transform:translateX(-50%)}
  .cat-card:hover .cat-go{transform:none;color:#8a6532;
    background:linear-gradient(145deg,#f3f6fb,#dfe6ef);
    box-shadow:3px 3px 7px rgba(92,116,148,.42), -3px -3px 6px rgba(255,255,255,.92)}
  .cat-card:active{transform:translateY(0);
    box-shadow:inset 7px 7px 15px rgba(92,116,148,.5), inset -7px -7px 15px rgba(255,255,255,.9)}
}