@import url('./resonapet-v13.css?v=14');

/* V14 — the references become photographed ResonaPet architecture. */
body.v14{background:var(--ivory-cool)}
.v14 .section{padding-block:clamp(92px,8vw,144px)}
.v14 .nav-shell{background:var(--ivory-cool)}
.v14 .brand-logo{display:block;flex:0 0 202px;width:202px;height:39px}
.v14 .brand-logo img{width:100%;height:100%;object-fit:contain;object-position:left center}

/* Hero: brighter, calmer, and entirely built from one coherent scene. */
.v14 .hero{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);background:var(--ivory-warm);border:1px solid rgba(33,23,63,.09);box-shadow:0 32px 90px rgba(33,23,63,.13)}
.v14 .hero:before{inset:18px;border-color:rgba(33,23,63,.18);clip-path:none;opacity:.5}
.v14 .hero-copy{padding-inline:clamp(40px,5.2vw,86px)}
.v14 .hero-copy:after{background:linear-gradient(transparent,rgba(33,23,63,.22),transparent)}
.v14 .hero .eyebrow{color:var(--cocoa)}
.v14 .hero h1,.v14 .hero h1 em,.v14 .hero-lead,.v14 .hero .action-note,.v14 .hero-facts,.v14 .hero-facts strong{color:var(--ink)}
.v14 .hero h1 em{color:var(--cocoa)}
.v14 .hero-visual{border-radius:clamp(150px,15vw,250px) 0 0 0;background:#e8dfd1}
.v14 .hero-visual>img{object-position:50% 49%;transform:scale(1.01)}
.v14 .hero-visual:before{border-color:rgba(247,246,242,.82);border-radius:clamp(131px,13vw,224px) 0 0 0;box-shadow:inset 0 0 0 1px rgba(33,23,63,.06)}
.v14 .hero-visual:after{background:linear-gradient(90deg,rgba(33,23,63,.14),transparent 25%,transparent 84%,rgba(33,23,63,.05))}
.v14 .frequency-label{display:none}
.v14 .hero .button{border-color:rgba(33,23,63,.12);background:var(--ink);color:var(--ivory-cool);box-shadow:0 14px 34px rgba(33,23,63,.2),inset 0 1px 0 rgba(255,255,255,.14)}
.v14 .hero .button:hover{background:var(--ink-2)}
.v14 .hero .button-arrow{background:var(--ivory-warm);color:var(--ink)}

/* The journey is deliberately simple: architecture frames the real cat. */
.v14 .journey{background:var(--ivory-cool);box-shadow:0 0 0 100vmax var(--ivory-cool)}
.v14 .everyday-image{border-radius:190px 190px 28px 28px;background:var(--ivory-warm);box-shadow:0 28px 76px rgba(33,23,63,.1)}
.v14 .steps li,.v14 .steps li:first-child,.v14 .steps li:last-child{background:var(--ivory-warm);border-color:rgba(33,23,63,.1)}

/* Personal area: a generated architectural environment, not CSS rings. */
.v14 .personal-area{min-height:860px;background:var(--ivory-warm);color:var(--ink)}
.v14 .personal-area .area-grid{grid-template-columns:.88fr 1.12fr;gap:7%}
.v14 .visual-shell{position:relative;width:100%;min-width:0;isolation:isolate}
.v14 .visual-shell>figure{width:calc(100% - 28px);margin-inline:14px}
.v14 .visual-shell:before{content:"";position:absolute;z-index:2;top:9%;bottom:9%;width:1px;pointer-events:none}
.v14 .visual-shell:after{position:absolute;z-index:3;top:50%;padding:10px 4px;background:var(--ivory-warm);font-size:8px;font-weight:700;line-height:1;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;pointer-events:none}
.v14 .visual-shell--area:before{right:3px;background:linear-gradient(to bottom,transparent,var(--gold) 18% 39%,transparent 39% 61%,var(--gold) 61% 82%,transparent)}
.v14 .visual-shell--area:after{content:"Area riservata";right:0;color:var(--cocoa);transform:translateY(-50%)}
.v14 .phone-stage{position:relative;max-width:none;min-height:670px;justify-self:center;display:grid;place-items:center;align-content:center;padding:0;border:0;border-radius:48% 34px 34px 48% / 50% 34px 34px 50%;overflow:hidden;background:var(--ink);box-shadow:0 38px 96px rgba(33,23,63,.2);isolation:isolate}
.v14 .phone-stage:before,.v14 .phone-stage:after{display:none}
.v14 .phone-plinth{display:none}
.v14 .portal-backdrop{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.v14 .personal-area.is-scene-visible .portal-backdrop{transform:scale(1)}
.v14 .phone{width:min(284px,38vw);transform:translateY(18px);box-shadow:0 34px 72px rgba(0,0,0,.42)}
.v14 .phone-stage figcaption{display:none}
.v14 .deliverables>div{padding-block:25px}

/* Method: one generated hero artwork, with labels placed in its architectural margins. */
.v14 .method{min-height:900px;padding-block:clamp(96px,8vw,150px);background:var(--ink);box-shadow:0 0 0 100vmax var(--ink)}
.v14 .method-grid{grid-template-columns:1.15fr .85fr;gap:8%;align-items:center}
.v14 .visual-shell--method:before{left:3px;background:linear-gradient(to bottom,transparent,var(--gold) 18% 39%,transparent 39% 61%,var(--gold) 61% 82%,transparent)}
.v14 .visual-shell--method:after{content:"Frequenze su misura";left:0;background:var(--ink);color:var(--gold-soft);transform:translateY(-50%) rotate(180deg)}
.v14 .frequency-panel{position:relative;min-height:0;aspect-ratio:4/3;display:block;padding:0;border:0;border-radius:34px 48% 48% 34px / 34px 50% 50% 34px;isolation:isolate;background:transparent;box-shadow:0 38px 96px rgba(0,0,0,.32);overflow:hidden}
.v14 .frequency-panel:before,.v14 .frequency-panel:after{display:none}
.v14 .method-art{display:block;width:100%;height:100%}
.v14 .method-art img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.025);transition:transform 1.65s cubic-bezier(.2,.8,.2,1)}
.v14 .method.is-scene-visible .method-art img{transform:scale(1)}
.v14 .frequency-panel>.frequency-heading{display:none}
.v14 .frequency-panel figcaption{position:absolute;z-index:5;left:0;right:auto;bottom:28px;width:max-content;max-width:calc(100% - 42px);padding:14px 22px 14px 24px;border:0;border-radius:0 22px 22px 0;background:rgba(244,232,213,.93);color:var(--ink);font-size:14px;line-height:1.45;box-shadow:0 14px 36px rgba(8,4,20,.2);backdrop-filter:blur(8px)}
.v14 .method-copy{padding-right:clamp(0px,3vw,44px)}
.v14 .method-copy h3{color:var(--ivory-warm)}

/* Daylight returns for Giorgia and the real story. */
.v14 .founder{min-height:850px;background:var(--ivory-cool)}
.v14 .founder-photo{border-radius:240px 240px 30px 30px;box-shadow:0 30px 80px rgba(33,23,63,.13)}
.v14 .founder-photo figcaption{background:rgba(244,232,213,.95)}
.v14 .stories{min-height:810px;padding-block:0;background:var(--ivory-warm);isolation:isolate}
.v14 .stories:before{z-index:4}
.v14 .stories-backdrop{display:block;overflow:hidden}
.v14 .stories-backdrop img{width:100%;height:100%;object-fit:cover}
.v14 .stories-backdrop--wide{position:absolute;z-index:0;inset:0}
.v14 .stories-backdrop--mobile{display:none}
.v14 .story-grid{position:relative;z-index:1;min-height:810px;grid-template-columns:1.08fr .92fr;gap:8%;align-items:center;padding-block:88px}
.v14 .story-copy{max-width:650px;padding:38px 42px;border:1px solid rgba(33,23,63,.1);border-radius:34px;background:rgba(244,232,213,.82);box-shadow:0 24px 70px rgba(77,52,33,.08);backdrop-filter:blur(5px)}
.v14 .story-visual{position:relative;left:var(--story-align-x,0px);min-height:650px;display:grid;place-items:center;padding:58px 38px 42px}
.v14 .story-photo{position:relative;z-index:2;width:min(320px,72%);max-width:none;aspect-ratio:9/16;margin:0;padding:0;border:1px solid rgba(247,246,242,.82);border-radius:30px;background:transparent;box-shadow:0 34px 82px rgba(8,4,20,.42);transform:translateY(14px);overflow:hidden}
.v14 .story-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:29px}
.v14 .story-photo figcaption{display:none}

/* The price remains the final dark monolith, now without decorative geometry. */
.v14 .offer-card{min-height:640px;border-radius:64px;background:var(--ink);box-shadow:0 34px 96px rgba(33,23,63,.2)}
.v14 .offer-card:before{left:8%;right:8%;bottom:26px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

@media(min-width:1700px){
  .v14 .hero{grid-template-columns:.86fr 1.14fr}
  .v14 .hero-copy{padding-inline:94px}
  .v14 .personal-area .area-grid{grid-template-columns:.84fr 1.16fr}
  .v14 .phone-stage{min-height:720px}
}

@media(max-width:1100px){
  .v14 .hero-copy{padding-inline:40px}
  .v14 .personal-area .area-grid{gap:5%}
  .v14 .phone-stage{min-height:600px}
  .v14 .phone{width:min(260px,35vw)}
  .v14 .method-grid{gap:6%}
  .v14 .frequency-panel figcaption{font-size:12px}
}

@media(max-width:800px){
  .v14 .brand-logo{flex-basis:168px;width:168px;height:33px}
  .v14 .hero{grid-template-columns:1fr;border-radius:28px 28px 0 0}
  .v14 .hero:before{inset:10px}
  .v14 .hero-copy{padding:56px 24px 42px}
  .v14 .hero h1{font-size:clamp(43px,10.8vw,66px)}
  .v14 .hero-visual{aspect-ratio:.82;border-radius:100px 0 0 0}
  .v14 .hero-visual>img{object-position:50% 47%}
  .v14 .hero-visual:before{border-radius:84px 0 0 0}
  .v14 .everyday-image{border-radius:92px 92px 22px 22px}
  .v14 .personal-area .area-grid,.v14 .method-grid{grid-template-columns:1fr;gap:42px}
  .v14 .visual-shell--area,.v14 .visual-shell--method{width:calc(100% + 48px);margin-inline:-24px}
  .v14 .visual-shell:after{font-size:7px;padding-inline:3px}
  .v14 .phone-stage{max-width:none;min-height:540px;border-radius:46% 24px 24px 46% / 50% 24px 24px 50%}
  .v14 .portal-backdrop{object-position:center}
  .v14 .phone{width:225px;transform:translateY(17px)}
  .v14 .method{min-height:0;padding-bottom:92px}
  .v14 .frequency-panel{aspect-ratio:1/1;border-radius:24px 46% 46% 24px / 24px 50% 50% 24px}
  .v14 .method-art img{object-fit:cover;object-position:center}
  .v14 .frequency-panel figcaption{left:0;right:auto;bottom:22px;width:max-content;max-width:calc(100% - 34px);padding:12px 16px 12px 18px;border-radius:0 18px 18px 0;font-size:12px}
  .v14 .founder{min-height:0}
  .v14 .founder-photo{border-radius:150px 150px 24px 24px}
  .v14 .stories{min-height:0;padding-block:76px 0}
  .v14 .stories-backdrop--wide{display:none}
  .v14 .story-grid{min-height:0;grid-template-columns:1fr;padding-block:0;gap:44px}
  .v14 .story-copy{max-width:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
  .v14 .story-visual{left:auto;width:calc(100% + 48px);min-height:0;aspect-ratio:4/5;margin-inline:-24px;padding:8% 12% 6%;overflow:hidden;border-radius:110px 110px 0 0}
  .v14 .stories-backdrop--mobile{display:block;position:absolute;z-index:0;inset:0}
  .v14 .stories-backdrop--mobile img{object-position:center}
  .v14 .story-photo{width:min(225px,48vw);border-radius:27px;box-shadow:0 26px 62px rgba(8,4,20,.42);transform:none}
  .v14 .story-photo img{border-radius:26px}
  .v14 .offer-card{border-radius:30px}
}

@media(max-width:390px){
  .v14 .hero-copy{padding-inline:20px}
  .v14 .hero-visual{aspect-ratio:.78}
  .v14 .visual-shell--area,.v14 .visual-shell--method{width:calc(100% + 40px);margin-inline:-20px}
  .v14 .phone-stage{min-height:500px}
  .v14 .phone{width:208px}
  .v14 .frequency-panel{aspect-ratio:.94}
  .v14 .story-visual{width:calc(100% + 40px);min-height:0;aspect-ratio:4/5;margin-inline:-20px;border-radius:90px 90px 0 0}
  .v14 .story-photo{width:min(190px,48vw);transform:none}
}

@media(prefers-reduced-motion:reduce){
  .v14 .portal-backdrop,.v14 .method-art img{transform:none}
}