/*
Theme Name: Core Studio Marketing
Theme URI: https://core-studio-marketing.museomaradon-0843.chatgpt.site/
Author: Core Studio
Description: Tema WordPress per il sito Core Studio Marketing.
Version: 1.1.1
Requires at least: 6.0
Text Domain: core-studio
*/
:root {
      --ink: #102b3b;
      --ink-2: #18394a;
      --red: #a81216;
      --red-bright: #c42120;
      --ochre: #c7812f;
      --cream: #f3eadb;
      --paper: #eee1cd;
      --white: #fffaf0;
      --line: rgba(243,234,219,.22);
      --display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
      --body: "Helvetica Neue", Arial, sans-serif;
      --serif: Georgia, "Times New Roman", serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--ink);
      color: var(--cream);
      font-family: var(--body);
      font-size: 16px;
      line-height: 1.5;
      overflow-x: hidden;
    }
    body.menu-open { overflow: hidden; }
    a { color: inherit; }
    button, input, textarea { font: inherit; }
    button { color: inherit; }
    img { max-width: 100%; display: block; }
    .skip-link {
      position: fixed;
      left: 1rem;
      top: -5rem;
      z-index: 100;
      background: var(--cream);
      color: var(--ink);
      padding: .8rem 1rem;
    }
    .skip-link:focus { top: 1rem; }

    .noise {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .055;
      z-index: 90;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
    }

    .nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 80;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem clamp(1rem, 4vw, 4rem);
      background: rgba(16,43,59,.92);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(14px);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: .8rem;
      text-decoration: none;
      font-family: var(--display);
      letter-spacing: -.04em;
      font-size: 1.05rem;
    }
    .brand-mark {
      width: 38px;
      aspect-ratio: 1;
      object-fit: cover;
      object-position: center;
      border: 1px solid rgba(243,234,219,.35);
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }
    .nav-links a {
      text-decoration: none;
      font-size: .82rem;
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .nav-links a:not(.nav-cta) { opacity: .72; }
    .nav-links a:hover, .nav-links a:focus-visible { opacity: 1; }
    .nav-cta {
      padding: .7rem 1rem;
      background: var(--cream);
      color: var(--ink);
      font-weight: 800;
    }
    .menu-button {
      display: none;
      border: 0;
      background: transparent;
      font-size: .8rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: .6rem;
    }

    .hero {
      min-height: 100svh;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
      position: relative;
      padding: clamp(8rem, 16vh, 11rem) clamp(1rem, 5vw, 5rem) 3.5rem;
      overflow: hidden;
    }
    .hero::before {
      content: "";
      position: absolute;
      width: 46vw;
      height: 46vw;
      min-width: 460px;
      min-height: 460px;
      right: -10vw;
      top: 10vh;
      border: 1px solid rgba(243,234,219,.12);
      transform: rotate(17deg);
    }
    .hero-copy { position: relative; z-index: 2; align-self: center; }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: .8rem;
      margin: 0 0 1.4rem;
      text-transform: uppercase;
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .15em;
      color: var(--ochre);
    }
    .eyebrow::before { content:""; width: 2.8rem; height: 2px; background: currentColor; }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: 950px;
      margin-bottom: 1.5rem;
      font-family: var(--display);
      font-size: clamp(4rem, 9.5vw, 10rem);
      line-height: .8;
      letter-spacing: -.085em;
      text-transform: uppercase;
    }
    h1 .heart-word {
      display: block;
      color: var(--red-bright);
      font-family: var(--serif);
      font-weight: 400;
      font-style: italic;
      letter-spacing: -.07em;
      text-transform: none;
      transform: translateX(clamp(.2rem, 4vw, 4rem));
    }
    .hero-lead {
      max-width: 620px;
      font-size: clamp(1.1rem, 2vw, 1.45rem);
      color: rgba(243,234,219,.78);
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      margin-top: 2rem;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      min-width: 210px;
      gap: 1rem;
      padding: .95rem 1.1rem;
      border: 1px solid var(--cream);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: .78rem;
      font-weight: 900;
      background: transparent;
      cursor: pointer;
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }
    .button:hover, .button:focus-visible { background: var(--cream); color: var(--ink); transform: translateY(-2px); }
    .button.solid { background: var(--red); border-color: var(--red); color: var(--cream); }
    .button.solid:hover, .button.solid:focus-visible { background: var(--cream); border-color: var(--cream); color: var(--ink); }
    .button .arrow { font-size: 1.1rem; }
    .hero-note { font-size: .83rem; color: rgba(243,234,219,.52); max-width: 240px; }

    .hero-art {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 520px;
    }
    .hero-logo {
      width: min(44vw, 640px);
      filter: drop-shadow(0 24px 38px rgba(0,0,0,.24));
      transform: rotate(2deg);
      transition: transform .25s ease-out;
    }
    .hero-stamp {
      position: absolute;
      right: 1%;
      bottom: 7%;
      width: 145px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 1px solid var(--ochre);
      color: var(--ochre);
      font-family: var(--display);
      text-align: center;
      font-size: .75rem;
      line-height: 1.1;
      letter-spacing: .08em;
      text-transform: uppercase;
      transform: rotate(8deg);
      border-radius: 50%;
    }
    .scroll-cue {
      position: absolute;
      bottom: 2rem;
      left: clamp(1rem, 5vw, 5rem);
      writing-mode: vertical-rl;
      font-size: .67rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      opacity: .5;
    }

    .ticker {
      overflow: hidden;
      background: var(--red);
      border-block: 1px solid rgba(243,234,219,.25);
      transform: rotate(-1.2deg) scale(1.02);
    }
    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker 28s linear infinite;
    }
    .ticker-track span {
      padding: .75rem 1rem;
      font-family: var(--display);
      font-size: clamp(1.15rem, 2vw, 1.9rem);
      letter-spacing: -.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .ticker-track span::after { content: " ♥"; color: var(--ochre); margin-left: 1.4rem; }
    @keyframes ticker { to { transform: translateX(-50%); } }

    .section { padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 6vw, 6rem); }
    .section-head {
      display: grid;
      grid-template-columns: minmax(180px,.55fr) minmax(0,1.45fr);
      gap: 3rem;
      align-items: start;
      margin-bottom: clamp(3rem, 7vw, 6rem);
    }
    .kicker {
      color: var(--ochre);
      font-size: .74rem;
      letter-spacing: .15em;
      font-weight: 900;
      text-transform: uppercase;
    }
    h2 {
      max-width: 1000px;
      font-family: var(--display);
      font-size: clamp(2.6rem, 6.6vw, 6.8rem);
      line-height: .92;
      letter-spacing: -.065em;
      text-transform: uppercase;
    }
    h2 em { font-family: var(--serif); font-weight: 400; text-transform: none; color: var(--red-bright); }

    .manifesto { background: var(--cream); color: var(--ink); }
    .manifesto-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
      align-items: stretch;
    }
    .manifesto-old {
      grid-column: 1 / 6;
      min-height: 500px;
      padding: clamp(2rem, 4vw, 4rem);
      background: var(--ink);
      color: var(--cream);
      position: relative;
      overflow: hidden;
    }
    .manifesto-old::after {
      content: "AGENZIA";
      position: absolute;
      left: -1rem;
      bottom: -2rem;
      color: transparent;
      -webkit-text-stroke: 1px rgba(243,234,219,.18);
      font-family: var(--display);
      font-size: clamp(5rem, 11vw, 11rem);
      line-height: .75;
      transform: rotate(-90deg) translateY(95%);
      transform-origin: left bottom;
    }
    .manifesto-new {
      grid-column: 6 / 13;
      padding: clamp(2rem, 5vw, 5rem);
      background: var(--red);
      position: relative;
    }
    .manifesto-card h3 {
      font-family: var(--display);
      font-size: clamp(2rem, 4vw, 4.5rem);
      line-height: .95;
      letter-spacing: -.05em;
      text-transform: uppercase;
      margin-bottom: 2rem;
    }
    .strike-list, .love-list { list-style: none; padding: 0; margin: 0; }
    .strike-list li, .love-list li {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 0;
      border-top: 1px solid currentColor;
      font-size: clamp(1rem, 1.7vw, 1.25rem);
    }
    .strike-list li { opacity: .55; text-decoration: line-through; }
    .love-list li::before {
      content: "♥";
      color: var(--cream);
      font-size: .8rem;
    }
    .manifesto-punch {
      margin: 3rem 0 0;
      max-width: 670px;
      font-family: var(--serif);
      font-size: clamp(1.6rem, 3vw, 3rem);
      line-height: 1.08;
      font-style: italic;
    }

    .chemistry { position: relative; overflow: hidden; }
    .chemistry::after {
      content: "FEELING";
      position: absolute;
      right: -3vw;
      top: 20%;
      font-family: var(--display);
      font-size: 18vw;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px rgba(243,234,219,.07);
      pointer-events: none;
    }
    .chemistry-grid {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: clamp(2rem, 7vw, 8rem);
      position: relative;
      z-index: 2;
    }
    .chemistry-copy p {
      max-width: 480px;
      color: rgba(243,234,219,.72);
      font-size: 1.1rem;
    }
    .chemistry-panel {
      border-top: 1px solid var(--line);
    }
    .question { padding: 1.5rem 0 1.8rem; border-bottom: 1px solid var(--line); }
    .question p { font-weight: 800; margin-bottom: 1rem; }
    .answers { display: flex; flex-wrap: wrap; gap: .6rem; }
    .answer {
      border: 1px solid rgba(243,234,219,.4);
      background: transparent;
      padding: .65rem .85rem;
      cursor: pointer;
      font-size: .86rem;
    }
    .answer:hover, .answer:focus-visible, .answer.active { background: var(--cream); color: var(--ink); }
    .match-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      min-height: 110px;
      margin-top: 1rem;
      padding: 1.2rem;
      background: var(--ochre);
      color: var(--ink);
    }
    .match-result strong { font-family: var(--display); font-size: clamp(1.3rem, 3vw, 2.3rem); line-height: 1; text-transform: uppercase; }
    .pulse-heart { font-size: 2rem; animation: pulse 1.2s ease-in-out infinite; }
    @keyframes pulse { 50% { transform: scale(1.18); } }

    .method { background: var(--red); }
    .method .kicker { color: var(--cream); }
    .timeline { counter-reset: step; border-top: 1px solid rgba(243,234,219,.4); }
    .timeline-row {
      counter-increment: step;
      display: grid;
      grid-template-columns: 90px minmax(200px,.8fr) minmax(0,1.2fr);
      gap: 1.5rem;
      align-items: center;
      min-height: 150px;
      border-bottom: 1px solid rgba(243,234,219,.4);
      transition: background .2s ease, padding .2s ease;
    }
    .timeline-row:hover { background: rgba(16,43,59,.18); padding-inline: 1rem; }
    .timeline-row::before {
      content: "0" counter(step);
      font-family: var(--serif);
      font-size: 2rem;
      font-style: italic;
      color: var(--ochre);
    }
    .timeline-row h3 {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(1.5rem, 3vw, 3.4rem);
      line-height: .95;
      letter-spacing: -.04em;
      text-transform: uppercase;
    }
    .timeline-row p { margin: 0; max-width: 600px; color: rgba(243,234,219,.76); }

    .heart-and-head { background: var(--cream); color: var(--ink); overflow: hidden; }
    .split-story {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      min-height: 720px;
      border: 1px solid rgba(16,43,59,.25);
    }
    .story-copy {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(2rem, 5vw, 5rem);
    }
    .story-copy blockquote {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(2rem, 4.7vw, 5rem);
      line-height: 1;
      letter-spacing: -.04em;
    }
    .story-copy blockquote em { color: var(--red); }
    .story-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; }
    .story-point { padding-top: 1rem; border-top: 1px solid rgba(16,43,59,.35); }
    .story-point strong { display: block; text-transform: uppercase; font-size: .77rem; letter-spacing: .12em; margin-bottom: .5rem; }
    .story-point p { margin: 0; color: rgba(16,43,59,.68); }
    .story-visual { position: relative; background: var(--ink); min-height: 550px; overflow: hidden; }
    .story-visual img:first-child { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) contrast(1.08); opacity: .78; }
    .story-visual .portrait {
      position: absolute;
      width: 34%;
      right: 6%;
      bottom: 5%;
      border: 10px solid var(--cream);
      transform: rotate(4deg);
      filter: grayscale(1) contrast(1.15);
    }
    .story-visual .visual-label {
      position: absolute;
      left: 0;
      top: 10%;
      background: var(--ochre);
      color: var(--ink);
      padding: .8rem 1.2rem;
      font-family: var(--display);
      text-transform: uppercase;
      transform: rotate(-3deg);
    }

    .services { background: var(--paper); color: var(--ink); }
    .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid rgba(16,43,59,.35); }
    .service {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 1rem;
      min-height: 280px;
      padding: 2rem;
      border-right: 1px solid rgba(16,43,59,.35);
      border-bottom: 1px solid rgba(16,43,59,.35);
      position: relative;
      transition: background .2s ease, color .2s ease;
    }
    .service:nth-child(even) { border-right: 0; }
    .service:hover { background: var(--ink); color: var(--cream); }
    .service-number { font-family: var(--serif); font-size: 1.3rem; color: var(--red); }
    .service h3 {
      font-family: var(--display);
      font-size: clamp(1.6rem, 3.4vw, 3.2rem);
      line-height: .95;
      letter-spacing: -.04em;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .service p { max-width: 480px; margin-bottom: 0; opacity: .72; }
    .service-tag { position: absolute; bottom: 1.5rem; right: 1.5rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

    .relations { background: var(--ink); }
    .relations .section-head { margin-bottom: 2.5rem; }
    .brand-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
    .filter-button {
      padding: .65rem .85rem;
      background: transparent;
      border: 1px solid rgba(243,234,219,.35);
      cursor: pointer;
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .filter-button.active, .filter-button:hover, .filter-button:focus-visible { background: var(--cream); color: var(--ink); }
    .brand-constellation {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .brand-orbit {
      min-height: 170px;
      display: grid;
      place-items: center;
      padding: 1.4rem;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: transparent;
      transition: background .2s ease, transform .2s ease;
    }
    .brand-orbit:hover { background: var(--red); transform: translateY(-3px); }
    .brand-orbit img { max-height: 68px; max-width: 90%; object-fit: contain; filter: brightness(0) invert(1); }
    .brand-orbit.hidden { display: none; }
    .brands-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      margin-top: 2rem;
      color: rgba(243,234,219,.62);
    }
    .brands-note strong { color: var(--ochre); font-family: var(--serif); font-size: 1.3rem; font-style: italic; }

    .network { background: var(--ochre); color: var(--ink); }
    .network-map {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid rgba(16,43,59,.38);
      position: relative;
    }
    .network-node {
      min-height: 210px;
      padding: 1.5rem;
      border-right: 1px solid rgba(16,43,59,.38);
      border-bottom: 1px solid rgba(16,43,59,.38);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .network-node:nth-child(3n) { border-right: 0; }
    .network-node:nth-last-child(-n+3) { border-bottom: 0; }
    .network-node.core-node { background: var(--red); color: var(--cream); }
    .node-icon { font-family: var(--serif); font-size: 2rem; }
    .network-node strong { font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 2.3rem); line-height: .95; text-transform: uppercase; }
    .network-copy { max-width: 720px; margin: 2rem 0 0 auto; font-size: 1.1rem; }

    .final {
      min-height: 84svh;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 6rem 1rem;
      position: relative;
      overflow: hidden;
    }
    .final::before, .final::after {
      content: "♥";
      position: absolute;
      font-family: var(--serif);
      color: var(--red);
      font-size: 38vw;
      opacity: .09;
      line-height: 1;
    }
    .final::before { left: -12vw; top: -8vw; transform: rotate(-14deg); }
    .final::after { right: -12vw; bottom: -15vw; transform: rotate(16deg); }
    .final-inner { position: relative; z-index: 2; max-width: 1100px; }
    .final h2 { margin-inline: auto; }
    .final p { max-width: 620px; margin: 0 auto 2rem; color: rgba(243,234,219,.7); font-size: 1.15rem; }
    .final .button { margin-inline: auto; }

    footer {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      padding: 2rem clamp(1rem, 5vw, 5rem);
      border-top: 1px solid var(--line);
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: rgba(243,234,219,.56);
    }

    dialog {
      width: min(680px, calc(100% - 2rem));
      padding: 0;
      border: 1px solid var(--cream);
      background: var(--ink);
      color: var(--cream);
    }
    dialog::backdrop { background: rgba(7,23,32,.82); backdrop-filter: blur(7px); }
    .dialog-inner { padding: clamp(1.5rem, 5vw, 4rem); }
    .dialog-close { float: right; background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.5rem; }
    dialog h2 { font-size: clamp(2.2rem, 6vw, 4.5rem); margin-bottom: 1rem; }
    .message-box {
      width: 100%;
      min-height: 130px;
      resize: vertical;
      margin: 1.2rem 0;
      padding: 1rem;
      border: 1px solid rgba(243,234,219,.4);
      background: var(--ink-2);
      color: var(--cream);
    }
    .dialog-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
    .dialog-status { min-height: 1.4em; margin: .8rem 0 0; color: var(--ochre); font-size: .86rem; }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }

    @media (max-width: 1050px) {
      .hero { grid-template-columns: 1fr; padding-top: 9rem; }
      .hero-art { min-height: 390px; }
      .hero-logo { width: min(74vw, 610px); }
      .scroll-cue { display: none; }
      .brand-constellation { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 780px) {
      .nav-links {
        position: fixed;
        inset: 69px 0 auto;
        height: calc(100svh - 69px);
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        padding: 2rem;
        background: var(--ink);
      }
      .nav-links.open { display: flex; }
      .nav-links a { font-family: var(--display); font-size: 1.8rem; padding: .7rem 0; }
      .nav-cta { text-align: center; margin-top: 1rem; }
      .menu-button { display: block; }
      .hero { padding-inline: 1.2rem; }
      h1 { font-size: clamp(3.6rem, 18vw, 6.4rem); }
      .hero-art { min-height: 330px; }
      .hero-stamp { width: 110px; }
      .section-head, .chemistry-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .manifesto-grid { display: block; }
      .manifesto-old, .manifesto-new { min-height: auto; }
      .manifesto-old { margin-bottom: 1rem; }
      .timeline-row { grid-template-columns: 54px 1fr; padding: 1.4rem 0; }
      .timeline-row p { grid-column: 2; }
      .split-story { grid-template-columns: 1fr; }
      .story-copy { min-height: 600px; }
      .service-grid { grid-template-columns: 1fr; }
      .service { border-right: 0; }
      .brand-constellation { grid-template-columns: repeat(2, 1fr); }
      .brand-orbit { min-height: 130px; }
      .network-map { grid-template-columns: 1fr 1fr; }
      .network-node, .network-node:nth-child(3n) { border-right: 1px solid rgba(16,43,59,.38); border-bottom: 1px solid rgba(16,43,59,.38); }
      .network-node:nth-child(even) { border-right: 0; }
      .network-node:nth-last-child(-n+2) { border-bottom: 0; }
      footer { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .hero-actions { align-items: stretch; }
      .button { width: 100%; }
      .hero-note { max-width: none; }
      .story-points { grid-template-columns: 1fr; }
      .network-map { grid-template-columns: 1fr; }
      .network-node, .network-node:nth-child(even), .network-node:nth-child(3n) { border-right: 0; border-bottom: 1px solid rgba(16,43,59,.38); }
      .network-node:last-child { border-bottom: 0; }
      .brands-note { display: block; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }