@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --ink: #171715;
  --paper: #f4f0e8;
  --white: #fbfaf6;
  --muted: #77736b;
  --line: #d8d2c7
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif
}

.wrap {
  margin: auto;
  padding-left: 5vw;
  padding-right: 5vw
}

.nav {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(251, 250, 246, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(216, 210, 199, .65)
}

.brand {
  font-family: 'Playfair Display';
  font-size: 20px;
  color: inherit;
  text-decoration: none
}

.brand small,
footer small {
  display: block;
  font: 9px 'DM Sans';
  letter-spacing: 3px
}

nav {
  display: flex;
  gap: 30px
}

nav a,
.textlink {
  color: inherit;
  text-decoration: none;
  font-size: 13px
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center
}

.lang {
  border: 0;
  background: none;
  opacity: .4;
  cursor: pointer
}

.lang.active {
  opacity: 1
}

.btn {
  display: inline-block;
  background: #181817;
  color: white;
  text-decoration: none;
  padding: 16px 25px;
  font-size: 13px
}

.btn.small {
  padding: 13px 18px
}

.hero {
  min-height: 700px;
  padding-top: 100px;
  position: relative;
  background: radial-gradient(circle at 80% 25%, #ded6c8 0, transparent 35%)
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 2.2px
}

.hero h1,
h2 {
  font-family: 'Playfair Display';
  font-weight: 500
}

.hero h1 {
  font-size: 72px;
  line-height: .98;
  margin: 28px 0
}

.lead {
  font-family: 'Playfair Display';
  font-size: 20px;
  line-height: 1.5
}

.cta {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: 35px
}

.hero-card {
  position: absolute;
  right: 7%;
  top: 130px;
  width: 39%;
  height: 390px;
  display: flex;
  align-items: center;
  justify-content: center
}

.browser {
  width: 80%;
  height: 65%;
  background: #111;
  border: 9px solid #111;
  border-radius: 12px;
  box-shadow: 0 35px 60px #0003;
  transform: perspective(900px) rotateY(-5deg)
}

.browser>span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #aaa;
  border-radius: 50%;
  margin: 6px 1px
}

.mini {
  background: #eee9df;
  height: calc(100% - 20px);
  padding: 35px
}

.mini h3 {
  font: 34px 'Playfair Display';
  margin-top: 35px
}

.traits {
  position: absolute;
  bottom: 35px;
  left: 5vw;
  display: flex;
  gap: 65px
}

.traits div {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding-right: 45px
}

.traits b {
  font-size: 11px
}

.traits span {
  font-size: 10px;
  margin-top: 5px;
  color: var(--muted)
}

.pricing {
  background: var(--paper);
  padding: 90px 0
}

.grid {
  display: grid;
  grid-template-columns: .8fr 1.25fr .75fr;
  gap: 35px
}

.pricing h2,
.work h2,
.about h2 {
  font-size: 46px;
  line-height: 1.05
}

.pricing p {
  line-height: 1.7;
  font-size: 13px
}

.options,
.quote {
  background: #f9f7f2;
  border: 1px solid #e1dcd2
}

.option {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  gap: 14px
}

.option .icon {
  font-size: 20px
}

.option .desc {
  flex: 1
}

.option .desc b {
  display: block;
  font-size: 13px
}

.option .desc small {
  color: var(--muted)
}

.option button {
  border: 1px solid #999;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: transparent;
  cursor: pointer
}

.option button.on {
  background: #181817;
  color: white
}

.quote {
  padding: 18px
}

.line {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 13px
}

.quote hr {
  border: 0;
  border-top: 1px solid var(--line)
}

.total {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 10px 0
}

.total span {
  font-size: 11px
}

.total strong {
  font: 35px 'Playfair Display'
}

.full {
  display: block;
  text-align: center
}

.quote>small {
  display: block;
  text-align: center;
  margin-top: 14px;
  color: var(--muted)
}

.work {
  padding-top: 20px;
  padding-bottom: 40px
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 45px
}

.thumb {
  height: 260px;
  background: #ddd center/cover
}

.architecture {
  background: linear-gradient(135deg, #d9d3c7, #777)
}

.restaurant {
  background: linear-gradient(135deg, #4d4036, #151515)
}

.bormio {
  background: linear-gradient(135deg, #7e929b, #283e49)
}

.cards h3 {
  margin-bottom: 4px
}

.cards p {
  margin-top: 0;
  color: var(--muted);
  font-size: 12px
}

.about {
  display: grid;
  grid-template-columns: 35% 65%;
  background: var(--paper)
}

.portrait {
  min-height: 520px;
  background: linear-gradient(160deg, #d5cbbd, #4b5048);
  position: relative
}

.portrait span {
  position: absolute;
  bottom: 30px;
  left: 35px;
  color: white;
  letter-spacing: 3px
}

.aboutcopy {
  padding: 80px 8vw
}

.aboutcopy>p {
  max-width: 720px;
  line-height: 1.7
}

.stats {
  display: flex;
  gap: 50px;
  margin-top: 40px
}

.stats div {
  display: flex;
  flex-direction: column
}

.stats strong {
  font: 34px 'Playfair Display'
}

.stats span {
  font-size: 11px;
  color: var(--muted)
}

footer {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px
}

@media(max-width:850px) {
  nav {
    display: none
  }

  .hero {
    padding-top: 55px;
    min-height: 850px
  }

  .hero h1 {
    font-size: 52px
  }

  .hero-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 300px;
    margin-top: 25px
  }

  .traits {
    position: relative;
    left: auto;
    bottom: auto;
    gap: 15px;
    flex-wrap: wrap
  }

  .traits div {
    padding-right: 15px
  }

  .grid {
    grid-template-columns: 1fr
  }

  .cards {
    grid-template-columns: 1fr
  }

  .about {
    grid-template-columns: 1fr
  }

  .portrait {
    min-height: 400px
  }

  .actions .btn {
    display: none
  }
}

.category-tabs {
  display: flex;
  gap: 8px;
  margin-top: 34px;
  flex-wrap: wrap
}

.category-tab {
  border: 1px solid #bdb6aa;
  background: transparent;
  padding: 12px 16px;
  font: 500 11px 'DM Sans';
  letter-spacing: .5px;
  cursor: pointer;
  transition: .2s;
  border-radius: 16px;
}

.category-tab.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink)
}

.category-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 10px;
  min-height: 30px
}

.category-head span {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600
}

.category-head small {
  color: var(--muted);
  font-size: 12px;
  max-width: 55%;
  text-align: right
}


.option {
  min-height: 72px
}

.option button {
  flex: 0 0 auto;
  font-size: 18px;
  transition: .18s
}

.option button:hover {
  transform: scale(1.06)
}

#selected:empty {
  display: none
}

@media(max-width:850px) {
  .category-tabs {
    margin-bottom: 20px
  }

  .category-head {
    align-items: flex-start;
    gap: 10px
  }

  .category-head small {
    max-width: 65%
  }

}

.option .qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto
}

.option .qty-control button {
  font-size: 16px
}

.option .qty-control .qty-value {
  min-width: 22px;
  text-align: center;
  font-weight: 600;
  font-size: 13px
}

.option .unit-price {
  white-space: nowrap
}

.line .qty-note {
  color: var(--muted);
  font-size: 11px;
  margin-left: 5px
}

.section-intro {
  max-width: 620px;
  color: var(--muted);
  line-height: 1.7
}

.project-meta {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-top: 18px
}

.included {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line)
}

.included-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 20px
}

.included-grid span {
  font-size: 11px
}

.advanced-note {
  display: none;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 11px !important;
  border-radius: 16px;
}

.request-btn {
  border: 0;
  width: 100%;
  cursor: pointer
}

.process {
  padding: 100px 5vw
}

.process h2,
.compare h2,
.closing h2 {
  font: 500 46px/1.05 'Playfair Display';
  margin: 20px 0 45px
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line)
}

.steps>div {
  padding: 25px 30px 10px 0;
  border-right: 1px solid var(--line);
  min-height: 190px
}

.steps>div+div {
  padding-left: 30px
}

.steps span {
  font: 22px 'Playfair Display';
  color: var(--muted)
}

.steps h3 {
  font: 500 21px 'Playfair Display';
  margin: 28px 0 10px
}

.steps p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted)
}

.compare {
  background: #171715;
  color: #f7f4ed;
  padding: 90px 0
}

.compare .eyebrow {
  color: #b8b2a8
}

.compare-table {
  border-top: 1px solid #4a4945
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid #3b3a37;
  padding: 18px 0;
  gap: 20px;
  font-size: 12px
}

.compare-row span:nth-child(2) {
  color: #aaa69e
}

.compare-row.head {
  font-size: 10px;
  letter-spacing: 1px;
  color: #aaa69e
}

.closing {
  padding: 110px 5vw 120px;
  text-align: center
}

.closing .cta {
  justify-content: center
}

.modal {
  position: fixed;
  inset: 0;
  background: #0008;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px
}

.modal.open {
  display: flex
}

.modal-card {
  width: min(620px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--white);
  padding: 38px;
  position: relative;
  border-radius: 16px;
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 14px;
  border: 0;
  background: none;
  font-size: 28px;
  cursor: pointer
}

.modal-card h2 {
  font: 500 34px/1.1 'Playfair Display';
  margin: 15px 0 25px
}

.modal-summary {
  background: var(--paper);
  padding: 18px;
  margin-bottom: 24px
}

.summary-row {
  font-size: 11px;
  padding: 7px 0;
  border-top: 1px solid var(--line)
}

.modal-total {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 8px
}

.modal-total strong {
  font: 28px 'Playfair Display'
}

#leadForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

#leadForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px
}

#leadForm label:nth-child(4) {
  grid-column: 1/-1
}

#leadForm input,
#leadForm textarea {
  border: 1px solid var(--line);
  background: white;
  padding: 12px;
  font: 13px 'DM Sans';
  border-radius: 16px;
}

#leadForm .btn,
#leadForm>small {
  grid-column: 1/-1
}

#leadForm>small {
  text-align: center;
  color: var(--muted)
}

.modal-open {
  overflow: hidden
}

@media(max-width:850px) {
  .included-grid {
    grid-template-columns: 1fr
  }

  .steps {
    grid-template-columns: 1fr
  }

  .steps>div,
  .steps>div+div {
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: auto
  }

  .compare-row {
    grid-template-columns: .8fr 1fr 1fr;
    gap: 10px
  }

  .process h2,
  .compare h2,
  .closing h2 {
    font-size: 38px
  }

  #leadForm {
    grid-template-columns: 1fr
  }

  #leadForm label:nth-child(4) {
    grid-column: auto
  }
}

.contact-card {
  max-width: 680px
}

.contact-intro {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: -10px 0 25px
}

.contact-card form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.contact-card label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 10px;
  letter-spacing: .5px
}

.contact-card input,
.contact-card textarea,
.contact-card select {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  padding: 13px;
  font: 13px 'DM Sans';
  color: var(--ink);
  border-radius: 0
}

.contact-card textarea {
  resize: vertical
}

.contact-card .wide {
  grid-column: 1/-1
}

.contact-card .honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important
}

.form-status {
  min-height: 18px;
  text-align: center;
  font-size: 11px;
  color: var(--muted)
}

.contact-card button:disabled {
  opacity: .55;
  cursor: wait
}

@media(max-width:650px) {
  .contact-card form {
    grid-template-columns: 1fr
  }

  .contact-card .wide {
    grid-column: auto
  }
}

/* Premium hero typography */
.hero h1 {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-weight: 400 !important;
  letter-spacing: -1.6px !important;
  line-height: .92 !important;
  font-size: clamp(58px, 6.8vw, 102px) !important
}

/* Visible contact section */
.contact-section {
  background: #171715;
  color: #f7f4ed;
  padding: 110px 0
}

.contact-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 9vw;
  align-items: start
}

.contact-copy {
  position: sticky;
  top: 120px
}

.contact-copy .eyebrow {
  color: #b8b2a8
}

.contact-copy h2 {
  font: 400 clamp(48px, 5vw, 72px)/.98 'Cormorant Garamond', 'Times New Roman', serif;
  margin: 22px 0 25px;
  letter-spacing: -1px
}

.contact-copy>p:not(.eyebrow) {
  max-width: 430px;
  color: #b8b2a8;
  font-size: 13px;
  line-height: 1.75
}

.contact-email {
  display: inline-block;
  margin-top: 34px;
  color: #f7f4ed;
  text-decoration: none;
  border-bottom: 1px solid #77736c;
  padding-bottom: 5px;
  font-size: 12px
}

.contact-form-panel {
  padding-top: 5px
}

.contact-form-panel form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px
}

.contact-form-panel label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #aaa69e
}

.contact-form-panel input,
.contact-form-panel textarea,
.contact-form-panel select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #55514a;
  background: transparent;
  padding: 10px 0 14px;
  color: #f7f4ed;
  font: 13px 'DM Sans';
  outline: none;
  border-radius: 0
}

.contact-form-panel select option {
  color: #171715
}

.contact-form-panel input:focus,
.contact-form-panel textarea:focus,
.contact-form-panel select:focus {
  border-bottom-color: #f7f4ed
}

.contact-form-panel textarea {
  resize: vertical
}

.contact-form-panel .wide {
  grid-column: 1/-1
}

.contact-form-panel .btn {
  margin-top: 12px;
  background: #f7f4ed;
  color: #171715;
  border: 1px solid #f7f4ed;
  border-radius: 16px;
}

.contact-form-panel .honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important
}

.contact-form-panel .form-status {
  text-align: left;
  color: #aaa69e;
  font-size: 14px;
  min-height: 18px
}

@media(max-width:800px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 55px
  }

  .contact-copy {
    position: static
  }

  .contact-form-panel form {
    grid-template-columns: 1fr
  }

  .contact-form-panel .wide {
    grid-column: auto
  }

  .hero h1 {
    font-size: clamp(54px, 15vw, 76px) !important
  }
}

/* HERO V2 — architectural image + compact split */
.hero {
  position: relative !important;
  min-height: 720px !important;
  background: url("../images/hero-premium.jpg") center center/cover no-repeat !important;
  color: #fff !important;
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow: hidden
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 9, .46) 0%, rgba(10, 10, 9, .30) 48%, rgba(10, 10, 9, .76) 70%, rgba(10, 10, 9, .88) 100%)
}

.hero-split {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1.55fr .75fr;
  gap: 7vw;
  align-items: center;
  padding-top: 135px;
  padding-bottom: 90px
}

.hero-left {
  max-width: 780px
}

.hero-left>div {
  max-width: none !important
}

.hero h1 {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: -1.8px !important;
  line-height: .91 !important;
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .16)
}

.hero .eyebrow,
.hero p {
  color: rgba(255, 255, 255, .88) !important
}

.hero-right {
  align-self: center;
  border-top: 1px solid rgba(255, 255, 255, .35)
}

.hero-right .benefit {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  gap: 18px !important;
  padding: 25px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .35) !important;
  background: none !important;
  color: #fff !important
}

.hero-right .benefit>* {
  color: inherit !important
}

.hero-right .benefit h3 {
  font-family: 'DM Sans', sans-serif !important;
  font-style: normal !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin: 0 0 5px !important
}

.hero-right .benefit p {
  font-size: 11px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, .72) !important
}

.hero-right .benefit .num,
.hero-right .benefit>span:first-child {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, .75) !important
}

.contact-email {
  display: inline-block;
  margin-top: 34px;
  color: #f7f4ed;
  border-bottom: 1px solid #77736c;
  padding-bottom: 5px;
  font-size: 12px;
  cursor: default
}

@media(max-width:800px) {
  .hero {
    min-height: auto !important
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(10, 10, 9, .40), rgba(10, 10, 9, .82))
  }

  .hero-split {
    grid-template-columns: 1fr;
    gap: 55px;
    padding-top: 125px;
    padding-bottom: 65px
  }

  .hero-right {
    width: 100%
  }
}

/* Traits positioned on the right side of the hero */
.hero-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border-top: 0 !important;
  min-width: 0
}

.hero-right .traits {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: min(100%, 330px) !important;
  color: #fff !important
}

.hero-right .traits>div {
  display: flex !important;
  flex-direction: column !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .32) !important;
  padding: 22px 0 !important
}

.hero-right .traits>div:last-child {
  border-bottom: 0 !important
}

.hero-right .traits b {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  font-weight: 500 !important;
  color: #fff !important
}

.hero-right .traits span {
  font-size: 10px !important;
  line-height: 1.5 !important;
  margin-top: 7px !important;
  color: rgba(255, 255, 255, .68) !important
}

@media(max-width:800px) {
  .hero-right {
    justify-content: flex-start !important
  }

  .hero-right .traits {
    width: 100% !important
  }
}

/* Traits integrated inside hero grid, styled with hero-title presence */
.hero-split {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr) !important;
  gap: 5vw !important
}

.hero-right {
  position: relative !important;
  z-index: 3 !important;
  justify-content: flex-start !important;
  align-self: center !important
}

.hero-right .traits {
  width: 100% !important;
  max-width: 390px !important
}

.hero-right .traits>div {
  padding: 22px 0 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .55) !important
}

.hero-right .traits b {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-size: clamp(27px, 2.2vw, 38px) !important;
  line-height: 1 !important;
  letter-spacing: -.3px !important;
  font-weight: 400 !important;
  color: #fff !important;
  opacity: 1 !important;
  text-transform: none !important
}

.hero-right .traits span {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  margin-top: 9px !important;
  color: #fff !important;
  opacity: .92 !important;
  max-width: 280px !important
}

@media(max-width:800px) {
  .hero-split {
    grid-template-columns: 1fr !important
  }

  .hero-right .traits {
    max-width: none !important
  }

  .hero-right .traits b {
    font-size: 30px !important
  }
}

/* HERO CTA — boutique/editorial treatment */
.hero .cta {
  gap: 28px !important;
  align-items: center !important;
  margin-top: 38px !important
}

.hero .cta .btn {
  min-width: 225px !important;
  padding: 17px 20px !important;
  border: 1px solid rgba(247, 244, 237, .95) !important;
  border-radius: 16px !important;
  background: #f7f4ed !important;
  color: #171715 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.15px !important;
  text-transform: uppercase !important;
  transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease !important
}

.hero .cta .btn:hover {
  background: #171715 !important;
  color: #fff !important;
  border-color: #171715 !important;
  transform: translateY(-1px) !important
}

.hero .cta .textlink {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 12px 1px 9px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.15px !important;
  text-transform: uppercase !important;
  opacity: 1 !important
}

.hero .cta .textlink::after {
  content: '↘';
  margin-left: 12px;
  font-size: 14px;
  transition: transform .25s ease
}

.hero .cta .textlink::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .7);
  transform-origin: left;
  transition: transform .28s ease, background .28s ease
}

.hero .cta .textlink:hover::before {
  transform: scaleX(.62);
  background: #fff
}

.hero .cta .textlink:hover::after {
  transform: translate(4px, 4px)
}

@media(max-width:600px) {
  .hero .cta {
    gap: 20px !important;
    align-items: flex-start !important;
    flex-direction: column !important
  }

  .hero .cta .btn {
    min-width: 220px !important
  }

  .hero .cta .textlink {
    margin-left: 1px !important
  }
}

/* Header CTA: only "Configura il tuo sito". No other nav item is styled as a button. */
header .header-config-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 17px !important;
  border: 1px solid #292724 !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: #292724 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .75px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .25s ease, color .25s ease, transform .25s ease !important;
}

header .header-config-cta:hover {
  background: #292724 !important;
  color: #f5f1e8 !important;
  transform: translateY(-1px);
}

/* Chi sono: sostituisce esclusivamente lo sfondo già presente */
#about .portrait {
  background-image: url("../images/giacomo-about.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Refinement pass */
.base-offer {
  margin: 28px 0 0;
  padding: 18px 0;
  border: 1px solid var(--line);
}

.base-offer>div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 10px;
}

.base-offer .base-kicker {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 600
}

.base-offer strong {
  font: 400 28px 'Playfair Display'
}

.base-offer p {
  margin: 10px !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: var(--muted) !important
}

.included.compact {
  margin-top: 18px !important;
  padding-top: 0 !important;
  border-top: 0 !important
}

.included.compact .eyebrow {
  margin-bottom: 8px !important
}

.included-inline {
  font-size: 10px !important;
  line-height: 1.8 !important;
  color: var(--muted) !important;
  margin: 0 !important
}

.option {
  min-height: 58px !important
}

.category-tabs {
  margin-top: 28px !important
}

.process {
  padding-top: 88px !important;
  padding-bottom: 96px !important
}

/* GeiVi multipage header, adapted from Valentina's signature/navigation behavior */
.gds-header {
  height: 90px;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(251, 250, 246, .96);
  border-bottom: 1px solid rgba(216, 210, 199, .7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px)
}

.gds-signature {
  position: relative;
  z-index: 1203;
  display: inline-flex;
  flex-direction: column;
  color: #f3efe6;
  text-decoration: none;
  line-height: 1.05;
  font: 400 25px 'Cormorant Garamond', serif;
  letter-spacing: .045em
}

.gds-signature small {
  font: 500 8px 'DM Sans', sans-serif;
  letter-spacing: .31em;
  margin-top: 5px
}

.gds-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 36px)
}

.gds-nav>a {
  font: 500 11px 'DM Sans', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: opacity .2s
}

.gds-nav>a:hover {
  opacity: .55
}

.gds-languages {
  display: flex;
  gap: 8px;
  margin-left: 6px
}

.gds-languages .lang {
  font-size: 10px;
  color: var(--ink);
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer
}

.gds-languages .lang.active {
  opacity: 1
}

.gds-menu-toggle {
  display: none;
  position: relative;
  z-index: 1204;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  background: transparent;
  border: 0;
  cursor: pointer
}

.gds-menu-toggle span {
  width: 25px;
  height: 1px;
  background: #f3efe6;
  display: block;
  transition: transform .35s, opacity .35s
}

.gds-menu-toggle.is-open span:first-child {
  transform: translateY(4px) rotate(45deg)
}

.gds-menu-toggle.is-open span:last-child {
  transform: translateY(-4px) rotate(-45deg)
}

.gds-inner-header .gds-menu-toggle {
  display: flex
}

.gds-inner-header .gds-nav {
  position: fixed;
  top: 86px;
  right: 0;
  width: min(430px, 100vw);
  height: calc(100dvh - 86px);
  padding: 55px 7vw;
  background: #f7f3eb;
  box-shadow: -16px 20px 45px #0001;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .42s ease, visibility .42s
}

.gds-inner-header .gds-nav.open {
  transform: translateX(0);
  visibility: visible
}

.gds-inner-header .gds-nav>a {
  font: 400 clamp(25px, 3vw, 36px) 'Cormorant Garamond', serif;
  letter-spacing: 0;
  text-transform: none
}

.gds-inner-header .gds-languages {
  margin: 16px 0 0
}

@media(max-width:800px) {
  .gds-home-header .gds-menu-toggle {
    display: flex
  }

  .gds-home-header .gds-nav {
    position: fixed;
    top: 86px;
    left: 0;
    width: 100%;
    height: calc(100dvh - 86px);
    padding: 50px 7vw;
    background: #f7f3eb;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .42s ease, visibility .42s
  }

  .gds-home-header .gds-nav.open {
    transform: translateX(0);
    visibility: visible
  }

  .gds-home-header .gds-nav>a {
    font: 400 30px 'Cormorant Garamond', serif;
    letter-spacing: 0;
    text-transform: none
  }

  .gds-home-header .gds-languages {
    margin: 16px 0 0
  }

  .gds-header {
    padding: 0 5vw
  }
}

.gds-inner main {
  min-height: calc(100vh - 190px)
}

/* Header navigation: desktop always visible; compact GeiVi language selector */
.gds-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  order: 3
}

.gds-header .gds-nav {
  order: 2;
  margin-left: auto;
  margin-right: 24px
}

.gds-header .gds-menu-toggle {
  display: none !important
}

.gds-header .gds-nav,
.gds-inner-header .gds-nav {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(14px, 2.4vw, 36px) !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important
}

.gds-header .gds-nav>a,
.gds-inner-header .gds-nav>a {
  font: 300 11px 'DM Sans', sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important
}

.gds-header .compact-language-selector {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  padding-right: 19px
}

.gds-header .compact-language-selector .lang {
  font: 500 11px 'DM Sans', sans-serif;
  color: var(--ink);
  border: 0;
  background: none;
  cursor: pointer;
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  transform: translateX(-7px);
  transition: max-width .3s, opacity .25s, transform .3s, padding .3s, visibility .3s
}

.gds-header .compact-language-selector .lang.active {
  max-width: 42px;
  opacity: 1;
  visibility: visible;
  padding: 5px 0px;
  pointer-events: auto;
  transform: none
}

.gds-header .compact-language-selector.is-open .lang {
  max-width: 42px;
  opacity: .6;
  visibility: visible;
  padding: 5px 7px;
  pointer-events: auto;
  transform: none
}

.gds-header .compact-language-selector.is-open .lang.active {
  opacity: 1
}

.gds-header .compact-language-chevron {
  position: absolute;
  right: 0;
  top: 50%;
  width: 15px;
  height: 20px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0
}

.gds-header .compact-language-chevron:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s
}

.gds-header .compact-language-selector.is-open .compact-language-chevron:after {
  transform: translateY(4px) rotate(225deg)
}

@media(max-width:800px) {
  .gds-header {
    height: 76px !important
  }

  .gds-header-actions {
    gap: 5px;
    margin-left: auto
  }

  .gds-header .gds-menu-toggle {
    display: flex !important
  }

  .gds-header .gds-nav,
  .gds-inner-header .gds-nav {
    position: fixed !important;
    top: 76px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(50dvh - 76px) !important;
    padding: 48px 7vw !important;
    background: #f7f3eb !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 30px !important;
    transform: translateX(105%) !important;
    visibility: hidden !important;
    transition: transform .42s ease, visibility .42s !important;
    margin: 0 !important;
    z-index: 1201
  }

  .gds-header .gds-nav.open,
  .gds-inner-header .gds-nav.open {
    transform: translateX(0) !important;
    visibility: visible !important
  }

  .gds-header .gds-nav>a,
  .gds-inner-header .gds-nav>a {
    font: 400 30px 'Cormorant Garamond', serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important
  }

  .gds-header-actions {
    position: relative;
    z-index: 1205
  }
}

@media(prefers-reduced-motion:reduce) {
  .gds-header .compact-language-selector .lang {
    transition: none !important
  }
}

/* Selettore lingua: triangolo pieno (giù chiuso, su aperto) */
.gds-header .compact-language-chevron::after {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 7px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid rgb(245 241 232) !important;
  border-bottom: 0 !important;
  transform: none !important;
  transition: transform .22s ease !important;
}

.gds-header .compact-language-selector.is-open .compact-language-chevron::after {
  transform: rotate(180deg) !important;
}


/* GeiVi signature footer */
.gds-footer {
  border-top: 1px solid rgba(40, 32, 27, .55);
  background: #f7f4ed;
  color: #302720;
  min-height: 50px;
  display: block !important;
  height: auto !important
}

.gds-footer-inner {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 22px
}

.gds-footer-legal {
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.6
}

.gds-footer-policies {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.gds-footer a {
  color: inherit;
  text-decoration: none
}

.gds-footer a:hover {
  opacity: .65
}

.gds-footer-logo {
  justify-self: center;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 235px;
  max-width: 100%;
  overflow: visible
}

.gds-signature-animation {
  position: relative;
  width: 220px;
  height: 148px;
  display: block;
  overflow: hidden
}

.gds-signature-image {
  position: absolute;
  width: 220px;
  height: auto;
  left: 0;
  top: -2px;
  object-fit: contain
}

/* Reveal order: complete G, then complete V, then smaller lettering. */
.gds-sig-cover {
  position: absolute;
  inset: 0;
  background: #f7f4ed;
  pointer-events: none;
  opacity: 1
}

.gds-sig-g {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: gds-g-draw 3s linear forwards
}

.gds-sig-v {
  clip-path: polygon(47% 0, 100% 0, 100% 100%, 47% 100%);
  animation: gds-v-draw 3s linear forwards
}

.gds-sig-rest {
  clip-path: polygon(34% 20%, 100% 20%, 100% 100%, 34% 100%);
  animation: gds-rest-draw 3s linear forwards
}

@keyframes gds-g-draw {
  0% {
    clip-path: inset(0 0 0 0)
  }

  33% {
    clip-path: inset(0 100% 0 0)
  }

  100% {
    clip-path: inset(0 100% 0 0)
  }
}

@keyframes gds-v-draw {

  0%,
  33% {
    opacity: 1
  }

  66%,
  100% {
    opacity: 0
  }
}

@keyframes gds-rest-draw {

  0%,
  66% {
    opacity: 1
  }

  93%,
  100% {
    opacity: 0
  }
}

.gds-footer-logo-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  margin-top: -5px;
  opacity: 0;
  animation: gds-subtitle 3s ease forwards
}

@keyframes gds-subtitle {

  0%,
  91% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.gds-footer-social {
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.gds-social-link {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase
}

.gds-social-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none
}

@media(max-width:650px) {
  .gds-footer-inner {
    grid-template-columns: minmax(0, 1fr) 130px 36px;
    gap: 8px;
    min-height: 185px;
    padding-left: 4vw;
    padding-right: 4vw
  }

  .gds-footer-legal {
    font-size: 8px;
    letter-spacing: 0;
    gap: 10px
  }

  .gds-footer-policies {
    gap: 5px
  }

  .gds-footer-logo {
    width: 130px
  }

  .gds-signature-animation {
    width: 130px;
    height: 92px
  }

  .gds-signature-image {
    width: 130px
  }

  .gds-footer-logo-text {
    font-size: 6px;
    letter-spacing: 1.8px;
    margin-top: -3px
  }

  .gds-footer-social {
    gap: 5px
  }

  .gds-social-link span {
    display: none
  }

  .gds-social-link svg {
    width: 14px;
    height: 14px
  }
}

@media(prefers-reduced-motion:reduce) {
  .gds-sig-cover {
    display: none
  }

  .gds-footer-logo-text {
    opacity: 1;
    animation: none
  }
}

/* Handwritten signature: SVG path mask, not straight-edged image wipes. */
.gds-signature-animation {
  overflow: visible !important;
  display: block !important;
  height: 148px !important
}

.gds-signature-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible
}

.gds-pen-stroke {
  fill: none;
  stroke: white;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1
}

.gds-pen-g {
  animation: gds-pen-write 1s linear forwards
}

.gds-pen-v {
  animation: gds-pen-write 1s linear 1s forwards
}

.gds-pen-ei {
  animation: gds-pen-write .52s linear 2s forwards
}

.gds-pen-eidot {
  animation: gds-pen-write .08s linear 2.52s forwards;
  stroke-width: 20
}

.gds-pen-i {
  animation: gds-pen-write .20s linear 2.60s forwards
}

.gds-pen-idot {
  animation: gds-pen-write .06s linear 2.80s forwards;
  stroke-width: 20
}

@keyframes gds-pen-write {
  to {
    stroke-dashoffset: 0
  }
}

@media(max-width:650px) {
  .gds-signature-animation {
    height: 92px !important
  }
}

@media(prefers-reduced-motion:reduce) {
  .gds-pen-stroke {
    animation: none !important;
    stroke-dashoffset: 0 !important
  }
}

/* Footer logo: subtitle under "eiVi", starting beneath the e, 5px below the small letters.
   The original SVG signature and its letter-by-letter pen animation are unchanged. */
.gds-footer-logo {
  position: relative !important;
  align-items: center !important
}

.gds-footer-logo-text {
  position: absolute !important;
  left: 40% !important;
  top: 102px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  opacity: 0;
  animation: gds-subtitle-after-signature .45s ease 3.17s forwards !important;
}

@keyframes gds-subtitle-after-signature {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@media(max-width:650px) {
  .gds-footer-logo-text {
    left: 40% !important;
    top: 63px !important;
    font-size: 5.4px !important;
    letter-spacing: 1.1px !important;
    margin: 0 !important
  }
}

@media(prefers-reduced-motion:reduce) {
  .gds-footer-logo-text {
    animation: none !important;
    opacity: 1 !important
  }
}

/* Header brand variant B: signature unchanged, DIGITAL / STUDIO stacked in the G descender space. Footer untouched. */
.gds-header .gds-header-brand {
  width: 112px;
  height: 82px;
  flex: 0 0 112px;
  position: relative;
  display: block;
  align-self: center;
  line-height: normal;
  letter-spacing: normal;
  overflow: visible
}

.gds-header-brand-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

.gds-header .gds-header-brand-words {
  position: absolute;
  top: 55%;
  left: 48%;
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.95px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink)
}

.gds-header .gds-header-brand-words>span {
  display: block
}

@media(max-width:600px) {
  .gds-header .gds-header-brand {
    width: 100px;
    height: 76px;
    flex-basis: 100px
  }

  .gds-header .gds-header-brand-words {
    font-size: 5.4px;
    letter-spacing: 1.1px
  }
}

/* Header: same handwritten stroke animation as footer; subtitle centered below eiVi. */
.gds-header .gds-header-signature-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible
}

.gds-header .gds-header-brand-words {
  left: 38% !important;
  width: 52% !important;
  top: 70% !important;
  align-items: center !important;
  text-align: center !important;
  opacity: 0;
  animation: gds-header-subtitle .42s ease 3.17s forwards
}

@keyframes gds-header-subtitle {
  to {
    opacity: 1
  }
}

@media(max-width:600px) {
  .gds-header .gds-header-brand-words {
    left: 39% !important;
    width: 52% !important
  }
}

@media(prefers-reduced-motion:reduce) {
  .gds-header .gds-header-brand-words {
    animation: none !important;
    opacity: 1 !important
  }
}

/* GeiVi palette 2026 — crema / champagne / petrolio / bordeaux.
   Solo tema cromatico: layout, firme animate, JS e contenuti invariati. */
:root {
  --ink: #1C1B1A;
  --paper: #F5F1E8;
  --white: #F5F1E8;
  --muted: #716B64;
  --line: #D9CFC0;
  --gds-champagne: #E6D8C3;
  --gds-petrol: #181818;
  --gds-bordeaux: #682D38;
  --gds-bordeaux-hover: #8D4854;
}

body {
  background: var(--paper);
  color: var(--ink)
}

.gds-header {
  background: rgba(245, 241, 232, .96) !important;
  border-bottom-color: rgba(28, 27, 26, .17) !important
}

.gds-header .gds-nav a:hover,
.gds-footer a:hover {
  color: var(--gds-bordeaux) !important
}

.gds-header .gds-nav.open {
  background: var(--gds-petrol) !important
}

.gds-header .gds-nav>a:focus-visible,
.gds-header button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gds-bordeaux);
  outline-offset: 4px
}

.hero {
  background-color: var(--gds-petrol) !important
}

.hero-overlay {
  background: linear-gradient(90deg, rgba(9, 27, 28, .61) 0%, rgba(9, 27, 28, .42) 44%, rgba(9, 27, 28, .78) 75%, rgba(9, 27, 28, .9) 100%) !important
}

.btn,
.request-btn {
  background: var(--gds-bordeaux);
  color: #F5F1E8;
  border-color: var(--gds-bordeaux);
  transition: background .25s ease, border-color .25s ease;
  border-radius: 16px;
}

.btn:hover,
.request-btn:hover {
  background: var(--gds-bordeaux-hover);
  border-color: var(--gds-bordeaux-hover)
}

/* Hero CTA mantiene il trattamento champagne approvato. */
.hero .btn {
  background: var(--gds-champagne) !important;
  color: var(--gds-petrol) !important;
  border-color: var(--gds-champagne) !important
}

.hero .btn:hover {
  background: #F5F1E8 !important
}

.process {
  background: var(--paper);
  color: var(--ink)
}

.process .steps>div>span {
  color: var(--gds-bordeaux)
}

.pricing {
  background: var(--ink)
}

.pricing .options,
.pricing .quote,
.base-offer {
  background: #F9F6F0;
  border-color: var(--line);
  border-radius: 16px;
}

.pricing .option {
  border-bottom-color: var(--line)
}

.pricing .category-tab.active,
.pricing .option button.on {
  background: var(--gds-bordeaux);
  border-color: var(--gds-bordeaux);
  color: #fff
}

.pricing .category-tab:hover {
  border-color: var(--gds-bordeaux)
}

.pricing .total strong {
  color: var(--gds-petrol)
}

.pricing input:focus-visible,
.pricing button:focus-visible {
  outline-color: var(--gds-bordeaux)
}

/* Pagina progetti: fondale petrolio per dare risalto ai lavori. */
.gds-page .work {
  background: var(--gds-petrol);
  color: var(--paper);
  max-width: none !important;
  padding-left: max(5vw, calc((100vw - 1380px)/2 + 5vw));
  padding-right: max(5vw, calc((100vw - 1380px)/2 + 5vw));
  min-height: calc(100vh - 320px)
}

.work .section-intro,
.work .cards p,
.work .project-meta {
  color: #D4C7B6
}

.work .project-meta {
  letter-spacing: .13em
}

.work .cards h3 {
  color: #F5F1E8
}

/* Chi sono: toni caldi per valorizzare la foto esistente. */
.about {
  background: var(--paper);
  color: var(--ink)
}

.aboutcopy {
  background: var(--paper)
}

.about .stats strong {
  color: var(--gds-bordeaux)
}

/* Contatti: stesso petrolio dei progetti, form leggibile. */
.contact-section {
  background: var(--gds-petrol) !important;
  color: var(--paper)
}

.contact-copy .eyebrow {
  color: var(--gds-champagne)
}

.contact-copy p,
.contact-copy .contact-email {
  color: #E6D8C3
}

.contact-form-panel input,
.contact-form-panel select,
.contact-form-panel textarea {
  background: rgba(245, 241, 232, .07) !important;
  color: var(--paper) !important;
  border-radius: 16px;
  padding: 10px;
  border: 1px solid #b67985 !important;
}

.contact-form-panel input::placeholder,
.contact-form-panel textarea::placeholder {
  color: #D5C9B8
}

.contact-form-panel select option {
  background: var(--gds-petrol);
  color: var(--paper)
}

.contact-form-panel label {
  color: var(--paper)
}

.contact-form-panel input:focus,
.contact-form-panel textarea:focus,
.contact-form-panel select:focus {
  outline: 1px solid var(--gds-champagne);
  outline-offset: 1px
}

/* Footer e firma: avorio, SVG e tempi di animazione invariati. */
.gds-footer {
  background: #F5F1E8 !important;
  color: var(--ink) !important;
  border-top-color: rgba(28, 27, 26, .38) !important
}

@media(max-width:800px) {
  .hero-overlay {
    background: linear-gradient(180deg, rgba(9, 27, 28, .55), rgba(9, 27, 28, .85)) !important
  }
}

/* Seamless page masthead + sticky translucent navigation */
html,
body {
  max-width: 100%;
  overflow-x: clip
}

.gds-page {
  overflow-x: clip
}

.gds-page main {
  min-width: 0;
  max-width: 100%
}

.gds-page img,
.gds-page svg {
  max-width: 100%
}

.gds-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background-color .32s ease, border-color .32s ease, box-shadow .32s ease !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important
}

.gds-header.is-scrolled {
  background: rgba(245, 241, 232, .94) !important;
  border-bottom-color: rgba(28, 27, 26, .15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 7px 28px rgba(0, 0, 0, .055) !important
}

.gds-page-progetti,
.gds-page-contatti,
.gds-home {
  background: var(--gds-petrol)
}

.gds-page-configura,
.gds-page-chi-sono {
  background: var(--paper)
}

.gds-page-kicker {
  padding: 18px 5vw 0;
  font: 500 11px 'DM Sans', sans-serif;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--ink)
}

.gds-page-progetti .gds-page-kicker,
.gds-page-contatti .gds-page-kicker {
  color: var(--paper)
}

/* Header on dark pages, until it gains its opaque scrolled surface */
.gds-home .gds-header:not(.is-scrolled),
.gds-page-progetti .gds-header:not(.is-scrolled),
.gds-page-contatti .gds-header:not(.is-scrolled) {
  color: var(--paper)
}

.gds-home .gds-header:not(.is-scrolled) .gds-nav>a,
.gds-page-progetti .gds-header:not(.is-scrolled) .gds-nav>a,
.gds-page-contatti .gds-header:not(.is-scrolled) .gds-nav>a,
.gds-home .gds-header:not(.is-scrolled) .lang,
.gds-page-progetti .gds-header:not(.is-scrolled) .lang,
.gds-page-contatti .gds-header:not(.is-scrolled) .lang {
  color: var(--paper) !important
}

.gds-home .gds-header:not(.is-scrolled) .gds-header-signature-svg image,
.gds-page-progetti .gds-header:not(.is-scrolled) .gds-header-signature-svg image,
.gds-page-contatti .gds-header:not(.is-scrolled) .gds-header-signature-svg image {
  filter: brightness(0) invert(1)
}

.gds-home .gds-header:not(.is-scrolled) .gds-header-brand-words,
.gds-page-progetti .gds-header:not(.is-scrolled) .gds-header-brand-words,
.gds-page-contatti .gds-header:not(.is-scrolled) .gds-header-brand-words {
  color: var(--paper) !important
}

.gds-header.is-scrolled,
.gds-header.is-scrolled .gds-nav>a,
.gds-header.is-scrolled .lang,
.gds-header.is-scrolled .gds-header-brand-words {
  color: var(--ink) !important
}

.gds-header.is-scrolled .gds-header-signature-svg image {
  filter: none !important
}

@media(max-width:800px) {
  .gds-page {
    width: 100%;
    overflow-x: clip
  }

  .gds-header .gds-nav.open,
  .gds-inner-header .gds-nav.open {
    color: var(--ink) !important
  }

  .gds-header .gds-nav.open>a {
    color: var(--ink) !important
  }

  .gds-page-kicker {
    padding: 15px 5vw 0
  }

  .gds-page .wrap {
    max-width: 100%
  }

  .gds-page .work {
    padding-left: 5vw !important;
    padding-right: 5vw !important
  }

  .gds-page .cards,
  .gds-page .pricing-grid,
  .gds-page .contact-grid {
    min-width: 0;
    max-width: 100%
  }
}

/* Masthead integrato: fascia superiore + header, unica superficie sticky. */
.gds-page .gds-header {
  position: sticky !important;
  top: 0 !important;
  isolation: isolate;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  transition: border-color .3s ease !important
}

.gds-page .gds-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--gds-masthead-color);
  opacity: 0;
  transition: opacity .35s ease
}

.gds-page .gds-header.is-scrolled {
  background: #060606db !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom-color: rgba(255, 255, 255, .13) !important
}

.gds-page .gds-header.is-scrolled::before {
  opacity: .5
}

.gds-home,
.gds-page-progetti,
.gds-page-contatti {
  --gds-masthead-color: #181818
}

.gds-page-configura,
.gds-page-chi-sono {
  --gds-masthead-color: #F5F1E8
}

.gds-masthead-label {
  position: absolute;
  left: 5vw;
  top: 4px;
  height: 16px;
  display: flex;
  align-items: center;
  font: 500 9px/1 'DM Sans', sans-serif;
  letter-spacing: .2em;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none
}

.gds-home .gds-masthead-label,
.gds-page-progetti .gds-masthead-label,
.gds-page-contatti .gds-masthead-label {
  color: var(--paper)
}

/* Sui fondi scuri i controlli rimangono chiari anche dopo lo scroll: il colore di fondo non cambia. */
.gds-home .gds-header.is-scrolled,
.gds-page-progetti .gds-header.is-scrolled,
.gds-page-contatti .gds-header.is-scrolled {
  color: var(--paper) !important
}

.gds-home .gds-header.is-scrolled .gds-nav>a,
.gds-page-progetti .gds-header.is-scrolled .gds-nav>a,
.gds-page-contatti .gds-header.is-scrolled .gds-nav>a,
.gds-home .gds-header.is-scrolled .lang,
.gds-page-progetti .gds-header.is-scrolled .lang,
.gds-page-contatti .gds-header.is-scrolled .lang,
.gds-home .gds-header.is-scrolled .gds-header-brand-words,
.gds-page-progetti .gds-header.is-scrolled .gds-header-brand-words,
.gds-page-contatti .gds-header.is-scrolled .gds-header-brand-words {
  color: var(--paper) !important
}

.gds-home .gds-header.is-scrolled .gds-header-signature-svg image,
.gds-page-progetti .gds-header.is-scrolled .gds-header-signature-svg image,
.gds-page-contatti .gds-header.is-scrolled .gds-header-signature-svg image {
  filter: brightness(0) invert(1) !important
}

@media(max-width:800px) {
  .gds-masthead-label {
    left: 5vw;
    top: 4px;
    font-size: 8px
  }
}

/* Fascia editoriale: proporzioni del render, sopra la navigazione. */
/*.gds-page .gds-header { padding-top: 46px !important; }*/
.gds-page .gds-masthead-label {
  top: 0px;
  left: 30vw;
  right: 5vw;
  height: 46px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .22em;
}

.gds-page .gds-header::after {
  content: "";
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(20, 40, 42, .18);
  pointer-events: none;
}

.gds-home .gds-header::after,
.gds-page-progetti .gds-header::after,
.gds-page-contatti .gds-header::after {
  background: rgba(230, 216, 195, .34);
}

@media(max-width:800px) {
  .gds-page .gds-masthead-label {
    height: 40px;
    font-size: 9px;
  }

  .gds-page .gds-header::after {
    top: 39px;
  }
}

/* Unified signature: footer reuses the exact header brand SVG and stacked wordmark. */
.gds-footer .gds-footer-logo.gds-header-brand {
  width: 112px !important;
  height: 82px !important;
  flex: 0 0 112px !important;
  display: block !important;
  position: relative !important;
  justify-self: center;
  overflow: visible !important;
  align-self: center;
}

.gds-footer .gds-footer-logo .gds-header-signature-svg {
  width: 100%;
  height: 100%;
}

.gds-footer .gds-footer-logo .gds-header-brand-words {
  position: absolute;
  top: 70%;
  left: 38%;
  width: 52%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.95px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
}

.gds-footer .gds-footer-logo .gds-header-brand-words>span {
  display: block;
}


/* Navigation and current-page indicator — single consolidated implementation.
   Both elements use the same underline geometry and burgundy interaction. */
.gds-page .gds-header::after {
  content: none !important;
  display: none !important;
}

.gds-page .gds-header,
.gds-page .gds-header.is-scrolled {
  border-bottom: 1px solid #2b1c20 !important;
}

.gds-header {
  --gds-nav-accent: #682D38;
}

.gds-home .gds-header,
.gds-page-progetti .gds-header,
.gds-page-contatti .gds-header {
  --gds-nav-accent: #B76B79;

}

/* One geometry for both the menu links and the active page label. */
.gds-header .gds-nav>a,
.gds-header .gds-masthead-text {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  text-decoration: none !important;
}

.gds-header .gds-nav>a::after,
.gds-header .gds-masthead-text::after {
  content: "";
  position: absolute;
  left: 10%;
  bottom: -5px;
  width: 80%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.gds-header .gds-nav>a {
  transition: color .32s ease, letter-spacing .32s ease;
}

.gds-header .gds-nav>a::after {
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}

.gds-header .gds-nav>a:hover,
.gds-header .gds-nav>a:focus-visible,
.gds-page .gds-header.is-scrolled .gds-nav>a:hover,
.gds-page .gds-header.is-scrolled .gds-nav>a:focus-visible {
  color: var(--gds-nav-accent) !important;
  letter-spacing: .035em;
}

.gds-header .gds-nav>a:hover::after,
.gds-header .gds-nav>a:focus-visible::after {
  transform: scaleX(1);
}

/* Current page: always visible and animated on each page load. */
.gds-header .gds-masthead-text {
  color: var(--gds-nav-accent);
  animation: gds-page-label-appear .35s ease both;
}

.gds-header .gds-masthead-text::after {
  transform: scaleX(1);
  animation: gds-page-line-reveal .7s .15s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes gds-page-label-appear {
  from {
    opacity: .55;
  }

  to {
    opacity: 1;
  }
}

@keyframes gds-page-line-reveal {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {

  .gds-header .gds-nav>a,
  .gds-header .gds-nav>a::after {
    transition: none !important;
  }

  .gds-header .gds-masthead-text,
  .gds-header .gds-masthead-text::after {
    animation: none !important;
  }

  .gds-header .gds-masthead-text::after {
    transform: scaleX(1);
  }
}


/* Navigation final: shared hover and current-page indicator. */
.gds-page .gds-header .gds-nav>a {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  transition: color .32s ease, letter-spacing .32s ease !important;
}

.gds-page .gds-header .gds-nav>a:hover,
.gds-page .gds-header .gds-nav>a:focus-visible {
  color: var(--gds-nav-accent) !important;
  letter-spacing: .035em;
}

.gds-page .gds-header .gds-nav>a::after {
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  bottom: -5px !important;
  width: 80% !important;
  height: 1px !important;
  background: var(--gds-nav-accent) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1) !important;
}

.gds-page .gds-header .gds-nav>a:hover::after,
.gds-page .gds-header .gds-nav>a:focus-visible::after {
  transform: scaleX(1) !important;
}

.gds-page .gds-header .gds-masthead-label .gds-masthead-text {
  position: relative !important;
  display: inline-block !important;
  width: max-content;
  color: var(--gds-nav-accent) !important;
}

.gds-page .gds-header .gds-masthead-label .gds-masthead-text::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 10% !important;
  bottom: -5px !important;
  width: 80% !important;
  height: 1px !important;
  background: var(--gds-nav-accent) !important;
  transform-origin: center !important;
  animation: gds-page-line-reveal .7s .15s cubic-bezier(.22, 1, .36, 1) both !important;
}

@media (prefers-reduced-motion: reduce) {
  .gds-page .gds-header .gds-masthead-label .gds-masthead-text::after {
    animation: none !important;
    transform: scaleX(1) !important;
  }
}

/* Unified navigation micro-zoom: visual only, no layout shift. */
.gds-header .gds-nav>a {
  transform: scale(1);
  transform-origin: center center;
  transition: color .32s ease, letter-spacing .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  .gds-header .gds-nav>a:hover {
    transform: scale(1.25);
  }
}

.gds-header .gds-nav>a:focus-visible {
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .gds-header .gds-nav>a {
    transition: none !important;
  }
}

/* GeiVi navigation: explicit hover state, consistent on all pages. */
@media (hover: hover) and (pointer: fine) {
  body.gds-page .gds-header .gds-nav>a:hover {
    transform: scale(1.25) !important;
    color: var(--gds-nav-accent) !important;
  }
}

body.gds-page .gds-header .gds-nav>a:focus-visible {
  transform: scale(1.25) !important;
  color: var(--gds-nav-accent) !important;
}

/* Mobile navigation only: readable ink links on the cream drawer.
   Keep desktop header, hover zoom and masthead untouched. */
@media (max-width: 800px) {

  body .gds-header .gds-nav.open>a,
  body .gds-header.is-scrolled .gds-nav.open>a,
  body .gds-inner-header .gds-nav.open>a,
  body.gds-page .gds-header .gds-nav.open>a:hover,
  body.gds-page .gds-header .gds-nav.open>a:focus-visible {
    color: #14282A !important;
  }
}

/* Header elevation — shared by desktop and mobile, all pages. */
body .gds-header {
  box-shadow: 0 5px 18px rgba(10, 22, 23, .10), 0 1px 3px rgba(10, 22, 23, .045) !important;
}

body .gds-header.is-scrolled {
  box-shadow: 0 9px 26px rgba(10, 22, 23, .15), 0 2px 5px rgba(10, 22, 23, .055) !important;
}

/* Header shadow: specificity higher than legacy .gds-page rules. */
body.gds-page .gds-header {
  box-shadow: 0 7px 22px rgba(5, 14, 16, .20), 0 2px 6px rgba(5, 14, 16, .11) !important;
}

body.gds-page .gds-header.is-scrolled {
  box-shadow: 0 12px 32px rgba(5, 14, 16, .27), 0 3px 9px rgba(5, 14, 16, .14) !important;
}

/* Configurator: independent layout on desktop and mobile. */
.pricing .grid {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr);
  align-items: start;
}

.gds-config-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gds-config-workspace .category-tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  margin: 0;
  padding: 6px;
  isolation: isolate;
}

.gds-config-workspace .category-tabs::-webkit-scrollbar {
  display: none;
}

.gds-config-workspace .category-tab {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  white-space: nowrap;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ink) !important;
  border-radius: 13px;
  transition: color .3s ease;
}

.gds-config-workspace .category-tab.active {
  color: #fff !important;
}

.gds-config-workspace .category-indicator {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  background: #14282A;
  border-radius: 13px;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), width .38s cubic-bezier(.22, 1, .36, 1), height .38s ease;
}

.gds-config-workspace .quote {
  width: 100%;
  box-sizing: border-box;
}

.gds-options-panel {
  min-width: 0;
  height: 500px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: #f9f7f2;
  border: 1px solid #e1dcd2;
  border-radius: 16px;
}

/* Configurator options: understated, rounded scrollbar (desktop + mobile). */
.gds-options-panel {
  scrollbar-color: rgba(20, 40, 42, .38) transparent;
  scrollbar-width: thin;
}

.gds-options-panel::-webkit-scrollbar {
  width: 7px;
}

.gds-options-panel::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 13px;
}

.gds-options-panel::-webkit-scrollbar-thumb {
  background-color: rgba(20, 40, 42, .34);
  border-radius: 999px;
  border: 2px solid #f9f7f2;
}

.gds-options-panel::-webkit-scrollbar-thumb:hover {
  background-color: rgba(20, 40, 42, .58);
}

.gds-options-panel .category-head {
  padding: 16px 18px 0;
}

.gds-options-panel .advanced-note {
  margin: 10px 18px;
}

.gds-options-panel .options {
  border: 0;
  background: transparent;
}

@media (max-width: 850px) {
  .pricing .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gds-config-workspace .category-tabs {
    margin: 0;
  }

  .gds-options-panel {
    height: 350px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gds-config-workspace .category-indicator,
  .gds-config-workspace .category-tabs {
    transition: none;
    scroll-behavior: auto;
  }
}

/* QUOTE - Desktop */
.gds-config-workspace .quote {
  height: 270px;
  overflow-y: auto;
}

/* QUOTE - Mobile */
@media (max-width: 850px) {
  .gds-config-workspace .quote {
    height: 300px;
  }
}

/* Quote: fixed-height card; only SELECTED scrolls, footer remains visible. */
.gds-config-workspace .quote {
  display: flex;
  flex-direction: column;
  height: 350px;
  overflow: hidden;
  min-height: 0;
}

.gds-config-workspace .quote>.eyebrow,
.gds-config-workspace .quote>.line,
.gds-config-workspace .quote>hr,
.gds-config-workspace .quote>.total,
.gds-config-workspace .quote>.request-btn,
.gds-config-workspace .quote>small {
  flex-shrink: 0;
}

.gds-config-workspace .quote #selected {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 40, 42, .32) transparent;
}

.gds-config-workspace .quote #selected::-webkit-scrollbar {
  width: 5px;
}

.gds-config-workspace .quote #selected::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 6px;
}

.gds-config-workspace .quote #selected::-webkit-scrollbar-thumb {
  background: rgba(20, 40, 42, .32);
  border-radius: 999px;
  border: 1px solid #f9f7f2;
}

.gds-config-workspace .quote #selected::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 40, 42, .52);
}

.gds-config-workspace .quote>hr {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 8px;
}

.gds-config-workspace .quote>.total {
  margin-top: 0;
}

@media (max-width: 850px) {
  .gds-config-workspace .quote {
    height: 300px;
    overflow: hidden;
  }
}


/* Configuratore: intro a tutta larghezza, opzioni e QUOTE affiancati. */
.pricing .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 42px);
  align-items: start;
}

.pricing .grid>.gds-config-intro {
  min-width: 0;
}

.gds-config-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(18px, 2.3vw, 32px);
  align-items: stretch;
  min-width: 0;
}

.gds-config-options-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.gds-config-options-column .gds-options-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.gds-config-workspace .quote {
  min-width: 0;
  height: auto;
  min-height: 400px;
  align-self: stretch;
}

@media (max-width: 850px) {
  .gds-config-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .gds-config-workspace .quote {
    height: 300px;
    min-height: 0;
  }

  .gds-config-options-column .gds-options-panel {
    flex: none;
    height: 350px;
  }
}

/* Render-approved full-width introduction: scoped to configurator only. */
.pricing .grid>.gds-config-intro-render {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(26px, 3vw, 56px);
  padding: clamp(28px, 3.2vw, 52px);
  border-radius: 24px;
  background: #f7f5ef;
  border: 1px solid rgba(20, 40, 42, .045);
  width: 100%;
  box-sizing: border-box;
}

.gds-config-intro-render .gds-intro-copy {
  min-width: 0;
}

.gds-config-intro-render .gds-intro-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #244a4a;
  font-size: 12px;
  letter-spacing: .16em;
  margin: 0 0 20px;
}

.gds-config-intro-render .gds-intro-kicker::after {
  content: '';
  display: inline-block;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, #245654, transparent);
}

.gds-config-intro-render h2 {
  font-size: clamp(34px, 3.25vw, 57px);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0 0 16px;
  color: #102c2b;
}

.gds-config-intro-render .gds-intro-description {
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.65;
  color: #31504f;
  max-width: 560px;
  margin: 0;
}

.gds-config-intro-render .gds-intro-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.35vw, 22px);
  min-width: 0;
}

.gds-config-intro-render .gds-intro-benefit {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.gds-config-intro-render .gds-intro-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #efe8e3;
  color: #692d39;
  font-size: 23px;
  font-weight: 600;
}

.gds-config-intro-render .gds-intro-benefit strong {
  display: block;
  font-size: clamp(12px, .95vw, 15px);
  color: #102c2b;
  line-height: 1.35;
  font-weight: 650;
}

.gds-config-intro-render .gds-intro-benefit p {
  margin: 9px 0 0;
  font-size: clamp(11px, .82vw, 13px);
  line-height: 1.65;
  color: #506665;
}

@media (max-width: 1100px) {
  .pricing .grid>.gds-config-intro-render {
    grid-template-columns: 1fr;
  }

  .gds-config-intro-render .gds-intro-benefits {
    gap: 20px;
  }

  .gds-config-intro-render .gds-intro-benefit {
    flex-direction: row;
    align-items: flex-start;
  }
}

@media (max-width: 650px) {
  .pricing .grid>.gds-config-intro-render {
    padding: 24px 20px;
    border-radius: 18px;
    gap: 28px;
  }

  .gds-config-intro-render .gds-intro-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
  }

  .gds-config-intro-render .gds-intro-benefit {
    flex-direction: column;
    gap: 9px;
  }

  .gds-config-intro-render .gds-intro-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .gds-config-intro-render .gds-intro-benefit strong {
    font-size: 13px;
  }

  .gds-config-intro-render .gds-intro-benefit p {
    font-size: 12px;
  }
}


/* Render-aligned configurator cards — visual changes only, existing controls intact. */
.pricing .gds-config-workspace {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
}

.pricing .gds-render-options-card,
.pricing .gds-config-workspace .gds-render-quote-card {
  box-sizing: border-box;
  min-width: 0;
  background: #f9f7f2;
  border: 1px solid #e1dcd2;
  border-radius: 22px;
  box-shadow: 0 8px 30px rgba(17, 45, 43, .025);
}

.pricing .gds-render-options-card {
  padding: 20px;
  gap: 18px;
}

.pricing .gds-render-options-card .category-tabs {
  flex-shrink: 0;
  background: transparent;
  border-radius: 18px;
  padding: 5px;
  min-height: 54px;
  align-items: center;
}

.pricing .gds-render-options-card .category-tab {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .075em;
  text-align: center;
  border: 0 !important;
}

.pricing .gds-render-options-card .category-indicator {
  background: #14282A;
  border-radius: 15px;
  box-shadow: none;
}

.pricing .gds-render-options-card .gds-options-panel {
  height: 500px;
  flex: 0 1 auto;
  min-height: 0;
  border: 1px solid #e1dcd2;
  background: #f9f7f2;
  border-radius: 18px;
}

.pricing .gds-render-options-card .category-head {
  padding: 20px 20px 12px;
}

.pricing .gds-render-options-card .option {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 19px 18px;
  min-height: 70px;
}

.pricing .gds-render-options-card .option:last-child {
  border-bottom: 0;
}

.pricing .gds-config-workspace .gds-render-quote-card {
  height: auto;
  min-height: 0;
  align-self: stretch;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pricing .gds-render-quote-card>.eyebrow {
  background: transparent;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: .14em;
  color: inherit;
}

.pricing .gds-render-quote-card>.line {
  margin: 0 0 16px;
  padding: 4px 8px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  align-items: baseline;
  gap: 12px;
}

.pricing .gds-render-quote-card>.line b {
  font-size: 25px;
  white-space: nowrap;
  color: inherit;
}

.pricing .gds-render-quote-card #selected {
  flex: 1 1 auto;
  min-height: 80px;
  max-height: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 40, 42, .32) transparent;
}

.pricing .gds-render-quote-card #selected::-webkit-scrollbar {
  width: 4px;
}

.pricing .gds-render-quote-card #selected::-webkit-scrollbar-thumb {
  background: rgba(20, 40, 42, .32);
  border-radius: 10px;
}

.pricing .gds-render-quote-card>hr {
  flex-shrink: 0;
  margin: 12px 0 14px;
}

.pricing .gds-render-quote-card>.total {
  flex-shrink: 0;
  margin: 0 0 16px;
  padding: 0 4px;
  align-items: center;
}

.pricing .gds-render-quote-card .total strong {
  color: inherit;
  font-size: clamp(30px, 3vw, 44px);
}

.pricing .gds-render-quote-card>.request-btn {
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--gds-bordeaux);
  color: #F5F1E8;
  min-height: 54px;
  display: grid;
  place-items: center;
}

.pricing .gds-render-quote-card>small {
  flex-shrink: 0;
}

@media (max-width: 850px) {
  .pricing .gds-config-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing .gds-render-options-card {
    padding: 14px;
  }

  .pricing .gds-render-options-card .gds-options-panel {
    height: 350px;
    flex: none;
  }

  .pricing .gds-config-workspace .gds-render-quote-card {
    height: 420px;
    min-height: 0;
    padding: 18px;
  }

  .pricing .gds-render-options-card .category-tab {
    flex: 0 0 auto;
  }
}

/* Quiet, low-contrast scrollbars: configurator panels on all viewports. */
.pricing .gds-options-panel,
.pricing .gds-render-quote-card #selected {
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 40, 42, .14) transparent;
}

.pricing .gds-options-panel::-webkit-scrollbar,
.pricing .gds-render-quote-card #selected::-webkit-scrollbar {
  width: 4px;
}

.pricing .gds-options-panel::-webkit-scrollbar-track,
.pricing .gds-render-quote-card #selected::-webkit-scrollbar-track {
  background: transparent;
}

.pricing .gds-options-panel::-webkit-scrollbar-thumb,
.pricing .gds-render-quote-card #selected::-webkit-scrollbar-thumb {
  background: rgba(20, 40, 42, .14);
  border: 0;
  border-radius: 999px;
}

.pricing .gds-options-panel::-webkit-scrollbar-thumb:hover,
.pricing .gds-render-quote-card #selected::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 40, 42, .25);
}

/* Mobile only: QUOTE precedes the category selector and sticks below the header. */
@media (max-width: 850px) {
  .pricing .gds-config-workspace {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
  }

  .pricing .gds-config-workspace .gds-render-quote-card {
    order: -1;
    position: sticky;
    top: calc(var(--gds-config-header-height, 110px) + 8px);
    z-index: 20;
    height: 300px;
    min-height: 0;
    flex-shrink: 0;
  }

  .pricing .gds-config-workspace .gds-render-quote-card #selected {
    min-height: 0;
  }

  .pricing .gds-render-options-card {
    order: 0;
  }
}


/* Mobile quote: render-matched selected chips and sticky stacked tabs.
   Desktop layout and desktop selected list are unchanged. */
@media (max-width: 850px) {
  .pricing .gds-config-workspace {
    display: flex;
    flex-direction: column;
    overflow: visible;
    align-items: stretch;
    gap: 12px;
  }

  .pricing .gds-config-workspace .gds-render-quote-card {
    order: -1;
    position: sticky;
    top: calc(var(--gds-live-header-height, 100px) + 8px);
    z-index: 31;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 16px 18px;
    gap: 8px;
    box-shadow: 0 6px 22px rgba(20, 40, 42, .12);
    transition: padding .24s ease, gap .24s ease;
  }

  .pricing .gds-render-quote-card #selected {
    display: none;
  }

  .pricing .gds-render-quote-card>hr {
    display: none;
  }

  .pricing .gds-render-quote-card>.eyebrow {
    padding: 5px 0;
  }

  .pricing .gds-render-quote-card>.line {
    margin: 0;
    padding: 8px 0;
  }

  .pricing .gds-render-quote-card>small {
    display: none;
  }

  .pricing .gds-render-quote-card>.total {
    margin: 0;
    padding: 8px 0 0;
  }

  .pricing .gds-render-quote-card .total strong {
    font-size: 30px;
  }

  .pricing .gds-render-quote-card>.request-btn {
    margin: 0;
    min-height: 42px;
  }

  .pricing .gds-render-quote-card.gds-quote-condensed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 10px;
    padding: 11px 14px;
  }

  .pricing .gds-render-quote-card.gds-quote-condensed>.eyebrow,
  .pricing .gds-render-quote-card.gds-quote-condensed>.line {
    display: none;
  }

  .pricing .gds-render-quote-card.gds-quote-condensed>.total {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
    border: 0;
  }

  .pricing .gds-render-quote-card.gds-quote-condensed>.request-btn {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    white-space: nowrap;
    padding: 10px 14px;
  }

  .pricing .gds-render-quote-card.gds-quote-condensed>.gds-selected-tags {
    grid-column: 1/-1;
    grid-row: 2;
  }

  .pricing .gds-config-options-column {
    order: 0;
    overflow: visible;
  }

  .pricing .gds-render-options-card .category-tabs {
    position: sticky;
    top: calc(var(--gds-live-header-height, 100px) + 111px);
    z-index: 30;
    background: #f9f7f2;
    box-shadow: 0 4px 12px rgba(20, 40, 42, .08);
  }

  .pricing .gds-render-options-card .gds-options-panel {
    height: 380px;
  }
}

.gds-selected-tags {
  display: none;
}

@media (max-width:850px) {
  .pricing .gds-render-quote-card .gds-selected-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 40, 42, .18) transparent;
    -webkit-overflow-scrolling: touch;
  }

  .gds-selected-tags::-webkit-scrollbar {
    height: 2px;
  }

  .gds-selected-tags::-webkit-scrollbar-track {
    background: transparent;
  }

  .gds-selected-tags::-webkit-scrollbar-thumb {
    background: rgba(20, 40, 42, .18);
    border-radius: 10px;
  }

  .gds-selected-tag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    max-width: 85%;
    border-radius: 100px;
    padding: 8px 9px 8px 12px;
    background: rgba(20, 40, 42, .065);
    color: inherit;
    font-size: 11px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .gds-selected-tag button {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .75;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0 3px;
  }

  .gds-tags-empty {
    font-size: 12px;
    opacity: .6;
    padding: 6px 2px;
  }
}


/* Mobile compact quote: ONLY total, CTA and one-row horizontally scrollable tags. */
@media (max-width: 850px) {
  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 14px !important;
    gap: 9px 10px !important;
    overflow: hidden !important;
  }

  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>.eyebrow,
  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>.line,
  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>#selected,
  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>hr,
  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>small {
    display: none !important;
  }

  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>.total {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    gap: 1px !important;
  }

  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>.total strong {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }

  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>.request-btn {
    display: inline-flex !important;
    width: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 44px !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>.gds-selected-tags {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }

  .pricing .gds-render-quote-card.gds-quote-condensed .gds-selected-tags::-webkit-scrollbar {
    display: none !important;
  }

  .pricing .gds-render-options-card .category-tabs {
    top: var(--gds-mobile-category-top, 220px) !important;
  }
}

/* Mobile-only base price badge: desktop quote row remains untouched. */
.pricing .gds-mobile-base-badge {
  display: none;
}

@media (max-width: 850px) {
  .pricing .gds-config-workspace .gds-render-quote-card>.line {
    display: none;
  }

  .pricing .gds-config-workspace .gds-render-quote-card>.gds-mobile-base-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    gap: 7px;
    padding: 9px 13px;
    border-radius: 10px;
    background: #682D38;
    color: #F5F1E8;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .pricing .gds-config-workspace .gds-render-quote-card>.gds-mobile-base-badge strong {
    font-size: inherit;
    font-weight: 750;
    color: inherit;
  }

  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>.gds-mobile-base-badge {
    display: none !important;
  }
}

/* Configurator enhancements, both desktop and mobile */
.pricing .gds-category-description {
  margin: 0px 0px 10px;
  color: #682d38;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 20px 0px;
}

@media (max-width:850px) {
  .pricing .gds-category-description {
    font-size: 11px;
  }
}

.pricing .gds-base-info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  border: 1px solid rgba(104, 45, 56, .25);
  border-radius: 999px;
  background: transparent;
  color: #682d38;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  margin: 6px 0
}

.pricing .gds-base-info-panel {
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  border-radius: 12px;
  background: rgba(104, 45, 56, .07);
  color: #14282a
}

.pricing .gds-base-info-panel[hidden] {
  display: none
}

.pricing .gds-quote-disclaimer,
.pricing .gds-quote-steps {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: #682d38;
  margin-top: 8px
}

.pricing .gds-quote-steps {
  font-size: 10px;
  letter-spacing: .015em
}

.pricing .option {
  position: relative;
  isolation: isolate;
  transition: background-color .55s ease, border-color .55s ease;
  background-clip: padding-box
}

.pricing .option.gds-option-selected {
  background-color: rgba(104, 45, 56, .075);
  border-color: #682d38;
  border-radius: 16px;
  margin: 10px;
}

.pricing .option.gds-option-just-selected::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid #682d38;
  border-radius: inherit;
  pointer-events: none;
  animation: gds-draw-border .7s ease both
}

@keyframes gds-draw-border {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0)
  }

  25% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)
  }

  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 0)
  }

  75% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 0)
  }

  100% {
    clip-path: inset(0)
  }
}

@media(prefers-reduced-motion:reduce) {

  .pricing .option,
  .pricing .option.gds-option-just-selected::after {
    animation: none !important;
    transition: none !important
  }
}

@media(max-width:850px) {

  .pricing .gds-render-quote-card.gds-quote-condensed .gds-base-info,
  .pricing .gds-render-quote-card.gds-quote-condensed .gds-base-info-panel,
  .pricing .gds-render-quote-card.gds-quote-condensed .gds-quote-disclaimer,
  .pricing .gds-render-quote-card.gds-quote-condensed .gds-quote-steps {
    display: none !important
  }
}

.gds-ai-section {
  padding: 70px 20px 90px;
  background: #1c1b1a;
  color: #14282a;
  display: none !important;
}

.gds-ai-wrap {
  max-width: 900px;
  margin: auto;
  background: #f9f7f2;
  border: 1px solid #e1dcd2;
  border-radius: 24px;
  padding: clamp(20px, 4vw, 42px);
  box-shadow: 0 10px 36px rgba(20, 40, 42, .05)
}

.gds-ai-wrap h2 {
  font-size: clamp(28px, 4vw, 44px);
  margin: 12px 0
}

.gds-ai-wrap>p:not(.eyebrow) {
  line-height: 1.6
}

.gds-ai-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 350px;
  overflow-y: auto;
  margin: 24px 0;
  padding: 16px;
  background: #f5f1e8;
  border-radius: 16px;
  min-height: 95px
}

.gds-ai-message {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.gds-ai-message.assistant {
  align-self: flex-start;
  background: white;
  border: 1px solid #e1dcd2
}

.gds-ai-message.user {
  align-self: flex-end;
  background: #682d38;
  color: #fff
}

.gds-ai-suggestions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin: 12px 0 18px
}

.gds-ai-suggestions button {
  flex: 0 0 auto;
  border: 1px solid #d7c6c9;
  border-radius: 999px;
  padding: 10px 14px;
  background: transparent;
  color: #682d38;
  cursor: pointer;
  font-size: 12px
}

.gds-ai-form {
  display: flex;
  gap: 10px
}

.gds-ai-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d9d2c8;
  border-radius: 14px;
  padding: 15px;
  background: #fff;
  color: #14282a;
  font: inherit
}

.gds-ai-form button {
  border: 0;
  border-radius: 14px;
  padding: 12px 20px;
  background: #682d38;
  color: white;
  cursor: pointer
}

.gds-ai-wrap>small {
  display: block;
  margin-top: 12px;
  opacity: .7;
  line-height: 1.5
}

/* 2026-10-22: Full perimeter selection outline; persistent selected state. */
.pricing .option.gds-option-selected {
  border: 2px solid #682d38 !important;
  background-color: rgba(104, 45, 56, .095) !important;
  box-shadow: 0 0 0 1px rgba(104, 45, 56, .08);
  transition: background-color 1.2s ease, border-color 1.2s ease, box-shadow 1.2s ease;
}

.pricing .option.gds-option-just-selected::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #682d38;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  animation: gds-outline-trace 1.65s linear both !important;
}

@keyframes gds-outline-trace {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }

  25% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 0);
  }

  75% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }

  100% {
    clip-path: inset(0);
  }
}

@media (max-width:850px) {

  /* Hide all expanded-only content, even when newer styles set display:flex. */
  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed> :is(.eyebrow, .line, .gds-mobile-base-badge, .gds-base-info, .gds-base-info-panel, #selected, hr, small, .gds-quote-steps, .gds-quote-disclaimer) {
    display: none !important;
  }

  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed {
    height: auto !important;
    max-height: none !important;
    grid-template-rows: auto auto !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pricing .option.gds-option-just-selected::after {
    animation: none !important;
  }
}

/* 2026-10-22: aligned base badge and details control, without changing sticky behavior. */
.pricing .gds-base-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}

.pricing .gds-base-row .gds-base-info {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.pricing .gds-base-row .gds-mobile-base-badge {
  flex: 0 0 auto;
}

@media (min-width:851px) {
  .pricing .gds-base-row {
    margin: 4px 0 6px;
  }
}

@media (max-width:850px) {
  .pricing .gds-base-row {
    gap: 8px;
    width: 100%;
  }

  .pricing .gds-base-row .gds-mobile-base-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #682D38;
    color: #F5F1E8;
    font-size: 11px;
    white-space: nowrap;
    text-transform: uppercase;
  }

  .pricing .gds-base-row .gds-mobile-base-badge strong {
    color: inherit;
  }

  .pricing .gds-base-row .gds-base-info {
    font-size: 11px;
    padding: 8px 9px;
    white-space: normal;
    line-height: 1.25;
  }

  .pricing .gds-config-workspace .gds-render-quote-card.gds-quote-condensed>.gds-base-row {
    display: none !important;
  }
}

/* True pen-drawn perimeter: selected outline is hidden while the SVG stroke advances. */
.pricing .option.gds-option-just-selected {
  border-color: transparent !important;
  box-shadow: none !important;
}

.pricing .option.gds-option-just-selected::after {
  content: none !important;
  animation: none !important;
}

.pricing .option .gds-option-pen-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}

.pricing .option .gds-option-pen-outline rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke: #682D38;
  stroke-width: 2px;
  rx: 15px;
  ry: 15px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.pricing .option.gds-option-just-selected .gds-option-pen-outline rect {
  animation: gds-pen-border-write 2.1s linear forwards;
}

@keyframes gds-pen-border-write {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@media(prefers-reduced-motion:reduce) {
  .pricing .option.gds-option-just-selected .gds-option-pen-outline rect {
    animation: gds-pen-border-write .01s linear forwards;
  }
}

/* Pen border: no underlying full-perimeter flash during either direction. */
.pricing .option.gds-option-pen-active,
.pricing .option.gds-option-selected.gds-option-pen-active {
  border-color: transparent !important;
  box-shadow: none !important;
}

.pricing .option.gds-option-pen-active::after {
  content: none !important;
}

.pricing .option.gds-option-pen-removing {
  background-color: #f9f7f2 !important;
}

.pricing .option .gds-option-pen-outline rect {
  animation: none !important;
}

/* Pen stroke is the ONLY visible bordeaux outline while tracing.
   Prevent the legacy border transition from lighting the entire perimeter. */
.pricing .option.gds-option-pen-active,
.pricing .option.gds-option-selected.gds-option-pen-active {
  border-color: transparent !important;
  box-shadow: none !important;
  transition-property: background-color !important;
}

.pricing .option.gds-option-pen-active::after {
  content: none !important;
}

/* Category hint follows the description, aligned on both viewports. */
.pricing .gds-render-options-card .gds-category-hint {
  margin: 0 0 14px;
  padding: 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* Category panel: pen-drawn petrol outline, independent of internal scrolling. */
.pricing .gds-render-options-card {
  position: relative;
}

.pricing .gds-render-options-card .gds-category-pen-outline {
  position: absolute;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}

.pricing .gds-render-options-card .gds-category-pen-outline rect {
  fill: none;
  stroke: #14292b;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}


/* GeiVi — discreet scrollbars; visual-only, no scrolling/layout changes. */
@media (min-width: 851px) {

  .pricing .gds-options-panel,
  .pricing .gds-render-quote-card #selected,
  .gds-ai-suggestions {
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 41, 43, .12) transparent;
  }

  .pricing .gds-options-panel::-webkit-scrollbar,
  .pricing .gds-render-quote-card #selected::-webkit-scrollbar,
  .gds-ai-suggestions::-webkit-scrollbar {
    width: 2px;
    height: 2px;
  }

  .pricing .gds-options-panel::-webkit-scrollbar-track,
  .pricing .gds-render-quote-card #selected::-webkit-scrollbar-track,
  .gds-ai-suggestions::-webkit-scrollbar-track {
    background: transparent;
  }

  .pricing .gds-options-panel::-webkit-scrollbar-thumb,
  .pricing .gds-render-quote-card #selected::-webkit-scrollbar-thumb,
  .gds-ai-suggestions::-webkit-scrollbar-thumb {
    background: rgba(20, 41, 43, .12);
    border-radius: 999px;
  }

  .pricing .gds-options-panel::-webkit-scrollbar-thumb:hover,
  .pricing .gds-render-quote-card #selected::-webkit-scrollbar-thumb:hover,
  .gds-ai-suggestions::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 41, 43, .30);
  }
}

@media (max-width: 850px) {

  .pricing .gds-options-panel,
  .pricing .gds-render-quote-card #selected,
  .pricing .gds-render-quote-card .gds-selected-tags,
  .pricing .gds-render-options-card .category-tabs,
  .gds-ai-suggestions {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
  }

  .pricing .gds-options-panel::-webkit-scrollbar,
  .pricing .gds-render-quote-card #selected::-webkit-scrollbar,
  .pricing .gds-render-quote-card .gds-selected-tags::-webkit-scrollbar,
  .pricing .gds-render-options-card .category-tabs::-webkit-scrollbar,
  .gds-ai-suggestions::-webkit-scrollbar {
    display: none !important;
    width: 0;
    height: 0;
  }

  .pricing .gds-render-options-card .gds-category-hint {
    font-size: 12px;
  }
}

/* Header controls follow the same page contrast as the navigation links.
   Keep the existing language triangle and hamburger/X animations intact. */
body.gds-page .gds-header {
  --gds-header-control-ink: var(--ink);
}

body.gds-home .gds-header,
body.gds-page-progetti .gds-header,
body.gds-page-contatti .gds-header {
  --gds-header-control-ink: var(--paper);
}

/* The language arrow is a CSS triangle: its visible edge inherits the header ink. */
body.gds-page .gds-header .compact-language-chevron {
  color: var(--gds-header-control-ink);
}

body.gds-page .gds-header .compact-language-chevron::after {
  border-top-color: currentColor !important;
}

/* Both hamburger strokes become the X, so this also covers the close state. */
@media (max-width: 800px) {
  body.gds-page .gds-header .gds-menu-toggle {
    color: var(--gds-header-control-ink);
  }

  body.gds-page .gds-header .gds-menu-toggle span {
    background-color: currentColor;
  }
}

/* WOW menu decorations belong exclusively to the mobile overlay.
   The injected footer must not participate in desktop navigation layout. */
@media (min-width:801px) {

  body.gds-page .gds-header .gds-nav .gds-nav-wow-footer,
  body.gds-page .gds-inner-header .gds-nav .gds-nav-wow-footer {
    display: none !important;
  }
}

/* EXPERIMENT: GeiVi cinematic liquid mobile navigation. Remove this block and
   restore js/header.js from the previous ZIP to revert the experiment. */
@media (max-width:800px) {
  body.gds-page.gds-menu-open {
    overflow: hidden !important;
  }

  body.gds-page.gds-menu-open .gds-header {
    z-index: 1300 !important;
    pointer-events: none;
  }

  body.gds-page.gds-menu-open .gds-header .gds-header-brand,
  body.gds-page.gds-menu-open .gds-header .gds-header-actions {
    pointer-events: auto;
  }

  body.gds-page>.gds-nav,
  body.gds-page>.gds-nav {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: clamp(115px, 17dvh, 155px) 8vw 26px !important;
    background: #242424 !important;
    color: #f5f1e8 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    clip-path: circle(0% at calc(100% - 33px) 38px);
    transform: none !important;
    visibility: hidden !important;
    opacity: 1 !important;
    transition: clip-path .72s cubic-bezier(.65, 0, .2, 1), visibility .72s !important;
    z-index: 1201 !important;
  }

  body.gds-page>.gds-nav.open,
  body.gds-page>.gds-nav.open {
    clip-path: circle(155% at calc(100% - 33px) 38px);
    transform: none !important;
    visibility: visible !important;
  }

  body.gds-page>.gds-nav>a,
  body.gds-page>.gds-nav>a,
  body.gds-page>.gds-nav.open>a,
  body.gds-page>.gds-nav.open>a,
  body.gds-page>.gds-nav.open>a {
    position: relative;
    display: block;
    flex: none;
    padding: clamp(10px, 1.6dvh, 17px) 0 clamp(12px, 1.8dvh, 18px) 0 !important;
    border-bottom: 1px solid rgba(245, 241, 232, .23);
    font: 500 clamp(21px, 5.8vw, 30px)/1.18 'DM Sans', sans-serif !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #f5f1e8 !important;
    opacity: 0;
    transform: translateY(25px) !important;
    transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), color .25s ease !important;
  }

  body.gds-page>.gds-nav.open>a {
    opacity: 1;
    transform: translateY(0) !important;
  }

  body.gds-page>.gds-nav.open>a:nth-child(1) {
    transition-delay: .18s !important
  }

  body.gds-page>.gds-nav.open>a:nth-child(2) {
    transition-delay: .24s !important
  }

  body.gds-page>.gds-nav.open>a:nth-child(3) {
    transition-delay: .30s !important
  }

  body.gds-page>.gds-nav.open>a:nth-child(4) {
    transition-delay: .36s !important
  }

  body.gds-page>.gds-nav.open>a:nth-child(5) {
    transition-delay: .42s !important
  }

  body.gds-page>.gds-nav>a::before {
    content: counter(gds-nav-counter, decimal-leading-zero);
    display: block;
    font: 500 10px/1.6 'DM Sans', sans-serif;
    letter-spacing: .13em;
    color: #c6b3a6;
    margin-bottom: 3px;
  }

  body.gds-page>.gds-nav {
    counter-reset: gds-nav-counter;
  }

  body.gds-page>.gds-nav>a {
    counter-increment: gds-nav-counter;
  }

  body.gds-page>.gds-nav.open>a:active,
  body.gds-page>.gds-nav.open>a:focus-visible {
    color: #e3c3bd !important;
  }

  body.gds-page>.gds-nav.open>a:active::after,
  body.gds-page>.gds-nav.open>a:focus-visible::after {
    background: #963c4a !important;
  }

  .gds-nav-wow-footer {
    margin-top: auto;
    padding-top: 26px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s .5s, transform .5s .5s;
  }

  .gds-nav.open .gds-nav-wow-footer {
    opacity: 1;
    transform: translateY(0)
  }

  .gds-nav-wow-copy {
    font: 500 9px/1.65 'DM Sans', sans-serif;
    letter-spacing: .17em;
    color: #f5f1e8;
  }

  .gds-nav-wow-languages {
    display: flex;
    gap: 18px;
    margin-bottom: 17px;
  }

  .gds-nav-wow-languages button {
    appearance: none;
    background: none;
    border: 0;
    padding: 5px 0 8px;
    color: #f5f1e8;
    font: 500 11px 'DM Sans', sans-serif;
    letter-spacing: .1em;
    position: relative;
  }

  .gds-nav-wow-languages button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #9b4654;
  }

  .gds-nav-wow-mark {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .82;
    animation: gds-wow-mark 1.6s ease .6s both;
  }

  @keyframes gds-wow-mark {
    from {
      opacity: 0;
      clip-path: inset(0 100% 0 0)
    }

    to {
      opacity: .82;
      clip-path: inset(0 0 0 0)
    }
  }

  body.gds-page.gds-menu-open .gds-header .gds-menu-toggle {
    color: #f5f1e8 !important;
  }

  body.gds-page.gds-menu-open .gds-header .gds-menu-toggle span {
    background-color: #f5f1e8 !important;
  }

  body.gds-page.gds-menu-open .gds-header .compact-language-chevron,
  body.gds-page.gds-menu-open .gds-header .compact-language-selector .lang {
    color: #f5f1e8 !important;
  }

  body.gds-page.gds-menu-open .gds-header .gds-header-brand-words {
    color: #f5f1e8 !important;
  }

  body.gds-page.gds-menu-open .gds-header .gds-header-signature-svg image {
    filter: brightness(0) invert(1) !important;
  }

  body.gds-page .gds-header .gds-header-brand,
  body.gds-page .gds-header .gds-header-actions {
    position: relative;
    z-index: 1205;
  }

  body.gds-page.gds-menu-open .gds-header {
    background: transparent !important;
    box-shadow: none !important;
  }

  body.gds-page>.gds-nav::-webkit-scrollbar {
    display: none;
  }

  body.gds-page>.gds-nav {
    scrollbar-width: none;
  }
}

@media (max-width:800px) and (max-height:690px) {
  body.gds-page>.gds-nav {
    padding-top: 90px !important;
  }

  body.gds-page>.gds-nav>a {
    font-size: 27px !important;
    padding-top: 7px !important;
    padding-bottom: 8px !important;
  }

  .gds-nav-wow-footer {
    padding-top: 14px;
  }

  .gds-nav-wow-mark {
    width: 55px;
    height: 55px;
  }
}

@media (max-width:800px) and (prefers-reduced-motion:reduce) {
  body.gds-page>.gds-nav {
    transition: none !important;
  }

  body.gds-page>.gds-nav>a,
  .gds-nav-wow-footer,
  .gds-nav-wow-mark {
    transition: none !important;
    animation: none !important;
  }
}

/* WOW mobile: keep the overlay anchored to the viewport after page scroll.
   The scrolled header's backdrop-filter otherwise becomes the containing
   block for position:fixed on Safari/iOS. */
@media (max-width:800px) {

  body.gds-page.gds-menu-open .gds-header,
  body.gds-page.gds-menu-open .gds-header.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
  }

  body.gds-page.gds-menu-open>.gds-nav {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile WOW: pin the real header to the viewport while the body is scroll-locked.
   The nav is already a body-level fixed overlay; the header must share its
   viewport coordinate system rather than retain its former scroll position. */
@media (max-width:800px) {
  body.gds-page.gds-menu-open>.gds-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 1300 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Mobile masthead: center the page title against the entire viewport/header,
   independently of the brand width and the language/menu controls. */
@media (max-width: 800px) {
  body.gds-page .gds-header .gds-masthead-label {
    left: 50% !important;
    right: auto !important;
    width: max-content;
    max-width: 52vw;
    transform: translateX(-50%);
    justify-content: center;
    text-align: center;
  }

  body.gds-page .gds-header .gds-masthead-label .gds-masthead-text {
    text-align: center;
    white-space: normal;
  }
}

/* GeiVi Projects — immersive, infinite 3D coverflow. Scoped to the projects page. */
.gds-page-progetti .gds-coverflow {
  margin: 42px -5vw 0;
  overflow: hidden;
  user-select: none;
}

.gds-page-progetti .gds-coverflow-stage {
  position: relative;
  height: clamp(365px, 42vw, 570px);
  perspective: 1200px;
  perspective-origin: 50% 48%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.gds-page-progetti .gds-coverflow-stage:active {
  cursor: grabbing;
}

.gds-page-progetti .gds-coverflow .cards {
  display: block;
  margin: 0;
  height: 100%;
  transform-style: preserve-3d;
  margin-top: 8px;
}

.gds-page-progetti .gds-coverflow .cards>article {
  position: absolute;
  width: clamp(250px, 38vw, 560px);
  height: 88%;
  left: 50%;
  top: 5%;
  margin: 0;
  padding: 12px 12px 18px;
  background: #242424;
  border: 1px solid rgba(245, 241, 232, .22);
  border-radius: 12px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .35);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translate3d(0, 0, -550px) scale(.3);
  transition: transform 740ms cubic-bezier(.2, .8, .2, 1), opacity 740ms ease, filter 740ms ease;
  overflow: hidden;
}

.gds-page-progetti .gds-coverflow .thumb {
  height: 68%;
  border-radius: 7px;
}

.gds-page-progetti .gds-coverflow .cards h3 {
  font-size: clamp(20px, 2vw, 30px);
  margin: 8px 0 5px;
}

.gds-page-progetti .gds-coverflow .cards p {
  font-size: 12px;
  line-height: 1.45;
}

.gds-page-progetti .gds-coverflow .project-meta {
  margin-top: 14px;
  font-size: 10px;
}

.gds-page-progetti .gds-coverflow .cards>article[data-offset="0"] {
  z-index: 8;
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%) translate3d(0, 0, 110px) rotateY(0) scale(1);
}

.gds-page-progetti .gds-coverflow .cards>article[data-offset="-1"] {
  z-index: 5;
  opacity: .57;
  filter: blur(2px);
  transform: translateX(-50%) translate3d(calc(-1 * min(35vw, 440px)), 0, -100px) rotateY(19deg) scale(.76);
}

.gds-page-progetti .gds-coverflow .cards>article[data-offset="1"] {
  z-index: 5;
  opacity: .57;
  filter: blur(2px);
  transform: translateX(-50%) translate3d(min(35vw, 440px), 0, -100px) rotateY(-19deg) scale(.76);
}

.gds-page-progetti .gds-coverflow .cards>article[data-offset="-2"] {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  filter: blur(6px);
  transform: translateX(-50%) translate3d(-85vw, 0, -330px) rotateY(25deg) scale(.55);
}

.gds-page-progetti .gds-coverflow .cards>article[data-offset="2"] {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  filter: blur(6px);
  transform: translateX(-50%) translate3d(85vw, 0, -330px) rotateY(-25deg) scale(.55);
}

.gds-page-progetti .gds-coverflow .cards>article[data-offset="-3"],
.gds-page-progetti .gds-coverflow .cards>article[data-offset="3"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translate3d(0, 0, -550px) scale(.3);
}

.gds-page-progetti .gds-coverflow .cards>article:not([data-offset="0"]) {
  cursor: pointer;
}

.gds-page-progetti .gds-coverflow-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  margin: 8px auto 0;
}

.gds-page-progetti .gds-coverflow-controls button {
  background: transparent;
  border: 1px solid rgba(245, 241, 232, .35);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: #f5f1e8;
  font-size: 23px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.gds-page-progetti .gds-coverflow-controls button:hover {
  background: rgba(245, 241, 232, .12);
  border-color: #f5f1e8;
}

/* Progetti: frecce essenziali, nella posizione originale. */
.gds-page-progetti .gds-coverflow-controls button {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(245, 241, 232, .74);
  transition: color .25s ease, opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

@media (hover:hover) and (pointer:fine) {
  .gds-page-progetti .gds-coverflow-controls button:hover {
    background: transparent;
    border: 0;
    color: #f5f1e8;
  }

  .gds-page-progetti .gds-coverflow-prev:hover {
    transform: translateX(-5px);
  }

  .gds-page-progetti .gds-coverflow-next:hover {
    transform: translateX(5px);
  }
}

@media (max-width: 800px) {
  .gds-page-progetti .gds-coverflow-controls button {
    display: none;
  }

  .gds-page-progetti .gds-coverflow-controls {
    gap: 0;
  }

  .gds-page-progetti .gds-coverflow .cards>article.gds-coverflow-nudge {
    animation: gds-coverflow-nudge 850ms cubic-bezier(.2, .8, .2, 1) both;
  }
}

@keyframes gds-coverflow-nudge {

  0%,
  100% {
    transform: translateX(-50%) translate3d(0, 0, 110px) rotateY(0) scale(1);
  }

  36% {
    transform: translateX(-50%) translate3d(20px, 0, 110px) rotateY(-2deg) scale(1);
  }

  70% {
    transform: translateX(-50%) translate3d(-8px, 0, 110px) rotateY(1deg) scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .gds-page-progetti .gds-coverflow .cards>article.gds-coverflow-nudge {
    animation: none;
  }
}

.gds-page-progetti .gds-coverflow-counter {
  font: 500 8px 'DM Sans', sans-serif;
  letter-spacing: .18em;
  min-width: 66px;
  text-align: center;
}

.gds-page-progetti .gds-coverflow-hint {
  text-align: center;
  font: 400 10px 'DM Sans', sans-serif;
  letter-spacing: .2em;
  opacity: .55;
  margin: 18px 0 0;
}

@media(max-width:800px) {
  .gds-page-progetti .gds-coverflow {
    margin: 32px -5vw 0;
  }

  .gds-page-progetti .gds-coverflow-stage {
    height: min(490px, 118vw);
    min-height: 355px;
  }

  .gds-page-progetti .gds-coverflow .cards>article {
    width: min(76vw, 390px);
    height: 66%;
    padding: 6px 6px 6px;
  }

  .gds-page-progetti .gds-coverflow .cards>article[data-offset="-1"] {
    transform: translateX(-50%) translate3d(-65vw, 0, -100px) rotateY(19deg) scale(.72);
  }

  .gds-page-progetti .gds-coverflow .cards>article[data-offset="1"] {
    transform: translateX(-50%) translate3d(65vw, 0, -100px) rotateY(-19deg) scale(.72);
  }

  .gds-page-progetti .gds-coverflow .thumb {
    height: 64%;
  }

  .gds-page-progetti .gds-coverflow .cards h3 {
    font-size: 21px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .gds-page-progetti .gds-coverflow .cards>article {
    transition: none !important;
  }
}

/* Progetti — presentazione cinematografica, isolata dalla navigazione esistente */
.gds-page-progetti .gds-coverflow .cards>article[data-offset="0"] {
  cursor: pointer;
}

.gds-projects-cta {
  text-align: center;
  padding: clamp(95px, 12vw, 180px) 20px clamp(100px, 12vw, 160px);
}

.gds-projects-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(35px, 5vw, 76px);
  line-height: 1.15;
  max-width: 900px;
  margin: 18px auto 24px;
}

.gds-projects-cta>p:not(.eyebrow) {
  opacity: .7;
  margin: 0 auto 32px;
}

.gds-projects-cta-link {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  padding: 12px 0;
  text-decoration: none;
  letter-spacing: .16em;
  font-size: 12px;
  transition: opacity .2s;
}

.gds-projects-cta-link:hover {
  opacity: .65;
}

.gds-project-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(12, 12, 12, .96);
  color: #f5f1e8;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 550ms ease, visibility 550ms;
}

.gds-project-modal.is-open {
  opacity: 1;
  visibility: visible;
}

body.gds-project-modal-open {
  overflow: hidden;
}

.gds-project-modal-panel {
  min-height: 100%;
  padding: clamp(74px, 8vw, 120px) clamp(20px, 7vw, 110px) 75px;
  max-width: 1550px;
  margin: auto;
  position: relative;
}

.gds-project-modal-close {
  position: fixed;
  z-index: 3;
  top: 22px;
  right: clamp(20px, 5vw, 70px);
  background: transparent;
  border: 0;
  color: #f5f1e8;
  cursor: pointer;
  font: 400 13px 'DM Sans', sans-serif;
  letter-spacing: .14em;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.gds-project-modal-close:first-letter {
  font-size: 28px;
}

.gds-project-modal-visual {
  height: clamp(240px, 42vw, 570px);
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background: #2b2b2b;
  transform: scale(.78) translateY(60px);
  opacity: .35;
  transition: transform 750ms cubic-bezier(.18, .8, .22, 1), opacity 700ms ease;
}

.gds-project-modal.is-open .gds-project-modal-visual {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.gds-project-modal-preview {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #49413c, #191919);
}

.gds-project-modal-panel[data-project="0"] .gds-project-modal-preview {
  background: linear-gradient(125deg, #5a504a 0%, #272321 46%, #141414 100%);
}

.gds-project-modal-panel[data-project="1"] .gds-project-modal-preview {
  background: linear-gradient(125deg, #484c53, #21262d 65%, #121416);
}

.gds-project-modal-panel[data-project="2"] .gds-project-modal-preview {
  background: linear-gradient(125deg, #5b4b3c, #29221d 65%, #171411);
}

.gds-project-modal-preview::after {
  content: 'GEIVI / SELECTED WORK';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(18px, 4vw, 56px);
  font-family: 'Playfair Display', serif;
  letter-spacing: .08em;
  opacity: .32;
  white-space: nowrap;
}

.gds-project-modal-index {
  position: absolute;
  bottom: 25px;
  right: 28px;
  font-size: 11px;
  letter-spacing: .2em;
}

.gds-project-modal-copy {
  max-width: 1020px;
  margin: clamp(35px, 6vw, 80px) auto 0;
  transform: translateY(35px);
  opacity: 0;
  transition: transform 650ms ease 180ms, opacity 650ms ease 180ms;
}

.gds-project-modal.is-open .gds-project-modal-copy {
  transform: translateY(0);
  opacity: 1;
}

.gds-project-modal-category {
  font-size: 11px;
  letter-spacing: .2em;
  opacity: .6;
}

.gds-project-modal-copy h2 {
  font: 500 clamp(44px, 7vw, 98px)/1.12 'Playfair Display', serif;
  margin: 20px 0 26px;
}

.gds-project-modal-intro {
  font-size: clamp(16px, 2vw, 24px);
  max-width: 750px;
  line-height: 1.5;
  opacity: .82;
}

.gds-project-modal-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 55px);
  border-top: 1px solid rgba(245, 241, 232, .2);
  padding-top: 35px;
  margin-top: 60px;
}

.gds-project-modal-facts span {
  font-size: 10px;
  letter-spacing: .17em;
  opacity: .55;
}

.gds-project-modal-facts p {
  font-size: 14px;
  line-height: 1.7;
  margin-top: 15px;
}

.gds-project-modal-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 40px 0;
}

.gds-project-modal-tags span {
  font-size: 10px;
  letter-spacing: .12em;
  border: 1px solid rgba(245, 241, 232, .3);
  padding: 9px 13px;
  border-radius: 40px;
}

.gds-project-modal-visit {
  display: inline-block;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding: 10px 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-decoration: none;
}

.gds-project-modal-visit[hidden] {
  display: none;
}

@media(max-width:800px) {
  .gds-project-modal-panel {
    padding-top: 95px;
  }

  .gds-project-modal-facts {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 35px;
  }

  .gds-project-modal-visual {
    height: 290px;
  }

  .gds-project-modal-close {
    top: 12px;
    right: 12px;
  }

  .gds-project-modal-copy h2 {
    font-size: 44px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .gds-project-modal,
  .gds-project-modal-visual,
  .gds-project-modal-copy {
    transition: none !important;
  }
}

/* Fix: le card visibili devono ricevere click/tap (regola base: pointer-events:none). */
.gds-page-progetti .gds-coverflow .cards>article[data-offset="0"],
.gds-page-progetti .gds-coverflow .cards>article[data-offset="-1"],
.gds-page-progetti .gds-coverflow .cards>article[data-offset="1"] {
  pointer-events: auto;
}

/* Portfolio → configurator and embedded live preview */
.gds-project-features-heading {
  margin: 42px 0 0;
  font: 500 11px 'DM Sans', sans-serif;
  letter-spacing: .18em;
  opacity: .7
}

.gds-project-modal-tags {
  margin: 16px 0 24px
}

.gds-project-modal-tags .gds-project-feature-tag {
  font: 400 11px 'DM Sans', sans-serif;
  letter-spacing: .06em;
  color: #f5f1e8;
  text-decoration: none;
  border: 1px solid rgba(245, 241, 232, .35);
  padding: 11px 15px;
  border-radius: 40px;
  transition: background .25s, color .25s
}

.gds-project-modal-tags .gds-project-feature-tag:hover {
  background: #f5f1e8;
  color: #181818
}

.gds-project-configure {
  display: inline-block;
  margin-bottom: 65px;
  color: #f5f1e8;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 12px 0;
  font-size: 12px;
  letter-spacing: .1em
}

.gds-project-configure[hidden],
.gds-project-live[hidden] {
  display: none !important
}

.gds-project-live {
  border-top: 1px solid rgba(245, 241, 232, .22);
  padding-top: 30px;
  margin-top: 15px
}

.gds-project-live-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px
}

.gds-project-live-title {
  font-size: 12px;
  letter-spacing: .15em
}

.gds-project-live-modes {
  display: flex;
  gap: 8px
}

.gds-project-live-modes button {
  background: transparent;
  color: #f5f1e8;
  border: 1px solid rgba(245, 241, 232, .3);
  padding: 10px 16px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .08em
}

.gds-project-live-modes button.active {
  background: #f5f1e8;
  color: #181818
}

.gds-project-live-shell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(8px, 2vw, 24px);
  background: #242424;
  border: 1px solid rgba(245, 241, 232, .15);
  border-radius: 12px;
  transition: all .45s ease
}

.gds-project-live-browser {
  width: 100%;
  min-width: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 55px #0006;
  transition: width .55s cubic-bezier(.2, .7, .2, 1)
}

/* iPhone 17 Pro: viewport CSS 402 × 874, plus a 14px device bezel. */
.gds-project-live-shell.is-mobile {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: clamp(8px, 2vw, 24px);
  border-radius: 24px
}

.gds-project-live-shell.is-mobile .gds-project-live-browser {
  position: relative;
  box-sizing: content-box;
  width: 402px;
  max-width: none;
  padding: 14px;
  background: #0a0a0b;
  border: 1px solid #525257;
  border-radius: 58px;
  overflow: hidden;
  box-shadow: 0 24px 65px #0009, inset 0 0 0 2px #27272a;
  transition: width .55s cubic-bezier(.2, .7, .2, 1), border-radius .55s ease, padding .55s ease
}

.gds-project-live-shell.is-mobile .gds-project-live-bar {
  display: none
}

.gds-project-live-shell.is-mobile .gds-project-live-browser::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 34px;
  border-radius: 24px;
  background: #09090a;
  box-shadow: 0 1px 3px #fff2;
  pointer-events: none;
  z-index: 2
}

.gds-project-live-shell.is-mobile .gds-project-live-frame {
  box-sizing: border-box;
  width: 402px;
  height: 874px;
  max-width: none;
  border-radius: 44px;
  background: #fff
}

@media(max-width:520px) {
  .gds-project-live-shell.is-mobile {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden
  }

  .gds-project-live-shell.is-mobile .gds-project-live-browser {
    transform: scale(var(--gds-iphone-scale, .7));
    transform-origin: top center;
    margin-bottom: calc(-902px * (1 - var(--gds-iphone-scale, .7)));
    flex-shrink: 0
  }
}

.gds-project-live-bar {
  height: 36px;
  background: #ededed;
  color: #666;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 15px;
  font: 11px 'DM Sans', sans-serif
}

.gds-project-live-bar span:first-child {
  color: #aaa;
  letter-spacing: 3px
}

.gds-project-live-frame {
  display: block;
  width: 100%;
  height: clamp(440px, 65vh, 760px);
  border: 0;
  background: white
}

.gds-project-live-note {
  font-size: 12px;
  opacity: .62;
  line-height: 1.6;
  margin: 16px 0 10px
}

.gds-project-live-external {
  font-size: 11px;
  letter-spacing: .1em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px
}

@media(max-width:800px) {
  .gds-project-configure {
    margin-bottom: 45px
  }

  .gds-project-live-frame {
    height: 580px
  }

  .gds-project-live-head {
    align-items: flex-start
  }
}

/* On phone/tablet widths the preview starts in phone mode; desktop mode is unavailable. */
@media(max-width:800px) {
  .gds-project-live-modes button[data-mode="desktop"] {
    opacity: .27;
    cursor: not-allowed;
    background: transparent;
    color: #f5f1e8;
    border-color: rgba(245, 241, 232, .16);
    box-shadow: none;
    pointer-events: none
  }

  .gds-project-live-modes button[data-mode="desktop"]:focus-visible {
    outline: none
  }

  .gds-project-live-shell.is-mobile {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden
  }

  .gds-project-live-shell.is-mobile .gds-project-live-browser {
    transform: scale(var(--gds-iphone-scale, .7));
    transform-origin: top center;
    margin-bottom: calc(-902px * (1 - var(--gds-iphone-scale, .7)));
    flex-shrink: 0
  }
}

/* Mobile portfolio preview: native-width interactive site, no nested phone mockup. */
@media (max-width:800px) {
  .gds-project-live-modes {
    display: none !important
  }

  .gds-project-live-shell.is-mobile {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: clamp(5px, 1.5vw, 10px);
    overflow: visible;
    border-radius: 15px;
    background: #242424;
  }

  .gds-project-live-shell.is-mobile .gds-project-live-browser {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    transform: none;
    flex-shrink: 1;
    background: #fff;
    border: 1px solid rgba(245, 241, 232, .15);
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 14px 35px #0005;
  }

  .gds-project-live-shell.is-mobile .gds-project-live-browser::after {
    content: none;
    display: none
  }

  .gds-project-live-shell.is-mobile .gds-project-live-frame {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: min(76svh, 760px);
    min-height: 400px;
    border-radius: 0;
    border: 0;
  }
}

/* Project presentation: menu-style X close control */
.gds-project-modal-close {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
}

.gds-project-close-icon {
  position: relative;
  display: block;
  width: 23px;
  height: 23px;
}

.gds-project-close-icon i {
  position: absolute;
  top: 11px;
  left: 0;
  width: 23px;
  height: 1.5px;
  background: currentColor;
  display: block;
  transform: rotate(45deg);
  transition: transform .25s ease;
}

.gds-project-close-icon i:last-child {
  transform: rotate(-45deg);
}

@media(hover:hover) {
  .gds-project-modal-close:hover .gds-project-close-icon i:first-child {
    transform: rotate(50deg)
  }

  .gds-project-modal-close:hover .gds-project-close-icon i:last-child {
    transform: rotate(-50deg)
  }
}

/* Mobile: retain the recognizable iPhone 17 Pro frame, scaled to fit the device. */
@media(max-width:800px) {
  .gds-project-live-shell.is-mobile {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    padding: 12px 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .gds-project-live-shell.is-mobile .gds-project-live-browser {
    position: relative;
    box-sizing: content-box;
    width: 402px;
    max-width: none;
    min-width: 402px;
    padding: 14px;
    margin: 0;
    flex-shrink: 0;
    transform: scale(var(--gds-iphone-scale, .7));
    transform-origin: top center;
    background: #0a0a0b;
    border: 1px solid #525257;
    border-radius: 58px;
    overflow: hidden;
    box-shadow: 0 24px 65px #0009, inset 0 0 0 2px #27272a;
    margin-bottom: calc(-902px * (1 - var(--gds-iphone-scale, .7)));
  }

  .gds-project-live-shell.is-mobile .gds-project-live-browser::after {
    content: "";
    display: block;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 34px;
    border-radius: 24px;
    background: #09090a;
    box-shadow: 0 1px 3px #fff2;
    pointer-events: none;
    z-index: 2;
  }

  .gds-project-live-shell.is-mobile .gds-project-live-frame {
    box-sizing: border-box;
    width: 402px;
    max-width: none;
    min-width: 402px;
    height: 874px;
    min-height: 874px;
    border-radius: 44px;
    background: #fff;
  }
}

/* Project preview controls — centered, rounded and consistent with GeiVi palette. */
.gds-project-live-head {
  justify-content: center;
}

.gds-project-live-title {
  display: none;
}

.gds-project-live-modes {
  justify-content: center;
  align-items: center;
}

.gds-project-live-modes button {
  border-radius: 12px;
  min-width: 106px;
  min-height: 42px;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.gds-project-live-modes button:hover:not(:disabled) {
  border-color: var(--gds-bordeaux);
}

.gds-project-live-external {
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  margin: 22px auto 0;
  padding: 13px 23px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(245, 241, 232, .42);
  border-radius: 12px;
  background: transparent;
  color: #f5f1e8;
  text-decoration: none;
  text-underline-offset: unset;
  font-size: 12px;
  letter-spacing: .1em;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.gds-project-live-external:hover {
  background: var(--gds-bordeaux);
  border-color: var(--gds-bordeaux);
  color: #fff;
  transform: translateY(-2px);
}

.gds-project-live-external:focus-visible,
.gds-project-live-modes button:focus-visible {
  outline: 2px solid var(--gds-bordeaux-hover);
  outline-offset: 3px;
}

@media(max-width:800px) {
  .gds-project-live-head {
    display: none;
  }

  .gds-project-live-external {
    margin-top: 20px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .gds-project-live-external,
  .gds-project-live-modes button {
    transition: none;
  }
}

/* Unified project CTAs and animated external arrow */
.gds-project-configure {
  display: flex;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  margin: 0 auto 65px;
  padding: 13px 23px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(245, 241, 232, .42);
  border-radius: 16px;
  background: transparent;
  color: #f5f1e8;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.5;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.gds-project-configure:hover {
  background: var(--gds-bordeaux);
  border-color: var(--gds-bordeaux);
  color: #fff;
  transform: translateY(-2px);
}

.gds-project-configure:focus-visible {
  outline: 2px solid var(--gds-bordeaux-hover);
  outline-offset: 3px;
}

.gds-project-cta-arrow {
  display: inline-block;
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform .28s ease;
}

@media(hover:hover) {

  .gds-project-live-external:hover .gds-project-cta-arrow,
  .gds-project-configure:hover .gds-project-cta-arrow {
    transform: translate(4px, -4px);
  }
}

@media(max-width:800px) {
  .gds-project-configure {
    margin-bottom: 32px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .gds-project-configure,
  .gds-project-cta-arrow {
    transition: none !important;
  }
}

/* Reusable cinematic project showcase: replace image per project when assets are available. */
.gds-project-modal-preview {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.gds-project-modal-preview::after {
  content: none !important;
}

.gds-project-showcase-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.09) translateY(16px);
  transition: opacity 850ms ease 160ms, transform 1350ms cubic-bezier(.19, 1, .22, 1);
}

.gds-project-modal.is-open .gds-project-showcase-image:not([hidden]) {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.gds-project-showcase-image[hidden] {
  display: none !important;
}

.gds-project-showcase-fallback {
  font: 400 clamp(18px, 4vw, 52px) 'Playfair Display', serif;
  letter-spacing: .08em;
  opacity: .32;
  text-align: center;
  padding: 20px;
}

.gds-project-modal-preview.has-image .gds-project-showcase-fallback {
  display: none;
}

.gds-project-modal-index {
  z-index: 2;
  text-shadow: 0 1px 8px #000;
  display: none;
}

@media(max-width:800px) {
  .gds-project-modal-visual {
    height: clamp(210px, 63vw, 350px)
  }

  .gds-project-showcase-image {
    object-position: 54% center;
  }
}

@media(prefers-reduced-motion:reduce) {
  .gds-project-showcase-image {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Real-photo reusable project showcase: independently animated browser and phone. */
.gds-showcase-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 67% 28%, #603039 0%, #311c23 38%, #120f12 80%);
  perspective: 1200px;
}

.gds-showcase-stage[hidden] {
  display: none !important
}

.gds-showcase-glow {
  position: absolute;
  width: 82%;
  height: 70%;
  left: 10%;
  bottom: -47%;
  border-radius: 50%;
  background: #823747;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none
}

.gds-showcase-browser {
  position: absolute;
  left: 4%;
  top: 9%;
  width: 84%;
  height: auto;
  border: 6px solid #1d1b1d;
  border-radius: 13px;
  overflow: hidden;
  background: #161414;
  box-shadow: 0 28px 52px #0009, 0 0 0 1px #a3878750;
  transform: translateY(65px) rotateY(-8deg) scale(.94);
  opacity: 0;
  transition: transform 3.75s cubic-bezier(.18, .8, .2, 1), opacity 3.4s ease;
  transform-origin: 50% 65%;
}

.gds-showcase-browser-bar {
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #1c1b1c;
  color: #bfb9b8;
  font: 10px Arial, sans-serif;
  letter-spacing: .04em
}

.gds-showcase-dots {
  position: absolute;
  left: 11px;
  display: flex;
  gap: 5px
}

.gds-showcase-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a74b4c
}

.gds-showcase-dots i:nth-child(2) {
  background: #d8ae58
}

.gds-showcase-dots i:nth-child(3) {
  background: #639a69
}

.gds-showcase-browser>img {
  width: 100%;
  height: auto;
  display: block
}

.gds-showcase-phone {
  position: absolute;
  z-index: 2;
  right: 8%;
  top: 19%;
  height: 74%;
  aspect-ratio: 402/874;
  padding: 5px;
  border: 2px solid #8b7b79;
  border-radius: clamp(16px, 2.4vw, 33px);
  background: #171517;
  box-shadow: 0 22px 36px #000b, 0 0 0 2px #1d1719;
  transform: translate(75px, 35px) rotateY(-12deg) rotateZ(4deg) scale(.9);
  opacity: 0;
  transition: transform 3.15s cubic-bezier(.18, .8, .2, 1) .2s, opacity 3.85s ease .2s;
}

.gds-showcase-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #201b1b
}

.gds-showcase-phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top
}

.gds-showcase-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  height: 10px;
  border-radius: 20px;
  background: #090909;
  box-shadow: 0 1px 3px #3335
}

.gds-project-modal.is-open .gds-showcase-browser {
  transform: translateY(0) rotateY(-5deg) scale(1);
  opacity: 1
}

.gds-project-modal.is-open .gds-showcase-phone {
  transform: translate(0, 0) rotateY(-8deg) rotateZ(3deg) scale(1);
  opacity: 1
}

@media(max-width:800px) {
  .gds-showcase-browser {
    left: 2%;
    top: 12%;
    width: 88%;
    height: auto;
    border-width: 3px;
    border-radius: 8px
  }

  .gds-showcase-browser-bar {
    height: 17px;
    font-size: 7px
  }

  .gds-showcase-browser>img {
    height: auto
  }

  .gds-showcase-dots {
    left: 6px;
    gap: 3px
  }

  .gds-showcase-dots i {
    width: 4px;
    height: 4px
  }

  .gds-showcase-phone {
    right: 5%;
    top: 22%;
    height: 70%;
    padding: 3px;
    border-width: 1px;
    border-radius: 15px
  }

  .gds-showcase-island {
    top: 6px;
    height: 6px
  }
}

@media(prefers-reduced-motion:reduce) {

  .gds-showcase-browser,
  .gds-showcase-phone {
    transition: none !important;
    opacity: 1 !important
  }

  .gds-showcase-browser {
    transform: rotateY(-5deg) !important
  }

  .gds-showcase-phone {
    transform: rotateY(-8deg) rotateZ(3deg) !important
  }
}

/* Desktop-only: allow the full proportional browser screenshot to fit the showcase.
   Mobile layout intentionally unchanged. */
@media (min-width: 801px) {
  .gds-project-modal-panel[data-project="0"] .gds-project-modal-visual {
    height: auto;
    aspect-ratio: 1.48 / 1;
  }
}

/* Valentina Bonanni: real portfolio categories screenshot for the 3D project card only. */
.gds-page-progetti .gds-coverflow .thumb.architecture {
  background-image: url("../images/projects/valentina-portfolio-card.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Birthday Experience carousel card: requested real Fashion gallery screenshot. */
.gds-page-progetti .gds-coverflow .thumb.bormio {
  background-image: url("../images/projects/valentina-fashion-birthday-card.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Fixed intrinsic desktop preview: shrink the whole browser, never its iframe viewport. */
.gds-project-live-shell:not(.is-mobile) {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--gds-desktop-height, 936px) + 48px);
  min-height: 0;
  overflow: hidden;
}

.gds-project-live-shell:not(.is-mobile) .gds-project-live-browser {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 1440px;
  min-width: 1440px;
  max-width: none;
  transform: translateX(-50%) scale(var(--gds-desktop-scale, 1));
  transform-origin: top center;
  transition: transform .35s ease;
}

.gds-project-live-shell:not(.is-mobile) .gds-project-live-frame {
  width: 1440px;
  min-width: 1440px;
  max-width: none;
  height: 900px;
  min-height: 900px;
}

/* Both modes remain selectable on phones; mobile is the default. */
@media(max-width:800px) {
  .gds-project-live-head {
    display: flex;
    justify-content: center;
  }

  .gds-project-live-modes {
    display: flex !important;
    justify-content: center;
  }

  .gds-project-live-modes button[data-mode="desktop"] {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    border-color: rgba(245, 241, 232, .3);
  }

  .gds-project-live-modes button[data-mode="desktop"].active {
    background: #f5f1e8;
    color: #181818;
  }

  .gds-project-live-shell:not(.is-mobile) {
    padding: 12px 4px;
    height: calc(var(--gds-desktop-height, 936px) + 24px);
  }

  .gds-project-live-shell:not(.is-mobile) .gds-project-live-browser {
    top: 12px;
  }
}


/* Progetti — CTA premium: alone bordeaux, bordo tracciato una sola volta */
.gds-page-progetti .gds-projects-cta {
  padding: clamp(0px, 0vw, 100px) 0 clamp(90px, 11vw, 150px);
  max-width: 1200px;
}

.gds-projects-cta-card {
  --cta-glow-x: 50%;
  --cta-glow-y: 52%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  padding: clamp(14px, 1vw, 95px) clamp(24px, 6vw, 90px);
  background: radial-gradient(ellipse 65% 85% at var(--cta-glow-x) var(--cta-glow-y), rgba(104, 45, 56, .42), transparent 85%), linear-gradient(130deg, #1c1719, #161315 55%, #20171b);
  border: 1px solid rgba(179, 117, 127, .20);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 22px 70px rgba(0, 0, 0, .15);
  transition: background-position .2s;
  margin: 4%;
}

@media(max-width:700px) {
  .gds-projects-cta-card {
    margin: 16px;
  }
}

.gds-projects-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 38% 55% at var(--cta-glow-x) var(--cta-glow-y), rgba(152, 67, 83, .16), transparent 100%);
}

/* A single continuous stroke, beginning at the top-right and travelling counterclockwise. */
.gds-projects-cta-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.gds-projects-cta-trace-path {
  stroke: #b67985;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--cta-trace-length, 1);
  stroke-dashoffset: var(--cta-trace-length, 1);
}

.gds-projects-cta-card.is-visible .gds-projects-cta-trace-path {
  animation: gdsCtaTrace 2s cubic-bezier(.22, .7, .2, 1) forwards;
}

@keyframes gdsCtaTrace {
  from {
    stroke-dashoffset: var(--cta-trace-length, 1);
  }

  to {
    stroke-dashoffset: 0;
  }
}

.gds-projects-cta-content {
  position: relative;
  z-index: 1;
}

.gds-page-progetti .gds-projects-cta .eyebrow {
  letter-spacing: .24em;
  color: #e1b9c0;
}

.gds-page-progetti .gds-projects-cta h2 {
  font-size: clamp(34px, 4.7vw, 65px);
  max-width: 760px;
  margin: 10px auto 10px;
  color: #f5f0eb;
}

.gds-page-progetti .gds-projects-cta>.gds-projects-cta-card p:not(.eyebrow) {
  color: #d8cbca;
  opacity: .88;
  margin: 0 auto 24px;
}

.gds-page-progetti .gds-projects-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 18px;
  border: 1px solid rgba(245, 241, 232, .68);
  border-radius: 12px;
  color: #f5f1e8;
  background: rgba(12, 10, 11, .16);
  font-size: 12px;
  letter-spacing: .14em;
  text-decoration: none;
  transition: background .28s, border-color .28s, transform .28s, opacity .28s;
}

.gds-page-progetti .gds-projects-cta-link:hover {
  opacity: 1;
  background: #682d38;
  border-color: #a76a77;
  transform: translateY(-2px);
}

.gds-projects-cta-arrow {
  display: inline-block;
  transition: transform .28s;
}

@media(hover:hover) {
  .gds-projects-cta-link:hover .gds-projects-cta-arrow {
    transform: translate(4px, -4px)
  }
}

@media(max-width:700px) {
  .gds-page-progetti .gds-projects-cta {
    padding: 0px 18px 85px
  }

  .gds-projects-cta-card {
    padding: 25px 10px 25px 10px;
    --cta-glow-x: 50% !important;
    --cta-glow-y: 50% !important
  }

  .gds-page-progetti .gds-projects-cta h2 {
    font-size: clamp(20px, 5vw, 46px)
  }
}

@media(prefers-reduced-motion:reduce) {
  .gds-projects-cta-card.is-visible .gds-projects-cta-trace-path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .gds-projects-cta-arrow,
  .gds-projects-cta-link {
    transition: none !important
  }
}

/* Progetti — From Sketch to Digital: tracciamento SVG indipendente dal carosello. */
.gds-page-progetti .work .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 100px);
  position: relative
}

.gds-sketch {
  width: 100%;
  max-width: 640px;
  justify-self: end;
  pointer-events: none;
  isolation: isolate
}

.gds-sketch-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 28px rgba(104, 45, 56, .13))
}

.gds-sketch-path {
  stroke-dasharray: var(--sketch-length, 3000);
  stroke-dashoffset: var(--sketch-length, 3000)
}

.gds-sketch.is-drawn .gds-sketch-path {
  animation: gdsSketchDraw 1.65s cubic-bezier(.4, 0, .2, 1) both;
  animation-delay: calc(.35s + var(--order)*.34s)
}

.gds-sketch-detail,
.gds-sketch-spark {
  opacity: 0
}

.gds-sketch.is-drawn .gds-sketch-detail {
  animation: gdsSketchAppear .65s ease both;
  animation-delay: calc(.65s + var(--order)*.34s)
}

.gds-sketch.is-drawn .gds-sketch-spark {
  animation: gdsSketchAppear 1s ease 10s forwards
}

@keyframes gdsSketchDraw {
  from {
    stroke-dashoffset: var(--sketch-length, 3000)
  }

  to {
    stroke-dashoffset: 0
  }
}

@keyframes gdsSketchAppear {
  to {
    opacity: 1
  }
}

@media(max-width:800px) {
  .gds-page-progetti .work .section-head {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .gds-sketch {
    width: min(100%, 420px);
    justify-self: center;
    margin-top: 14px
  }
}

@media(prefers-reduced-motion:reduce) {
  .gds-sketch-path {
    stroke-dashoffset: 0 !important;
    animation: none !important
  }

  .gds-sketch-detail,
  .gds-sketch-spark {
    opacity: 1 !important;
    animation: none !important
  }
}

/* FASE 1 — IDEA */
.gds-sketch.is-drawn .gds-sketch-freehand .gds-sketch-path {
  animation-delay: 0.5s;
}

/* FASE 2 — BROWSER */
.gds-sketch.is-drawn .gds-sketch-browser .gds-sketch-path {
  animation-delay: calc(2s + var(--order)*.34s);
}

/* FASE 3 — SMARTPHONE */
.gds-sketch.is-drawn .gds-sketch-phone .gds-sketch-path {
  animation-delay: calc(3s + var(--order)*.34s);
}

/* FASE 1 — IDEA */
.gds-sketch.is-drawn .gds-sketch-freehand .gds-sketch-path {
  animation-duration: 2s;
}

/* FASE 2 — BROWSER */
.gds-sketch.is-drawn .gds-sketch-browser .gds-sketch-path {
  animation-duration: 2s;
}

/* FASE 3 — SMARTPHONE */
.gds-sketch.is-drawn .gds-sketch-phone .gds-sketch-path {
  animation-duration: 1.5s;
}

/* PROGETTI — footer coordinato alla fascia scura dell'header. */
body.gds-page-progetti .gds-footer {
  background: var(--gds-masthead-color, #181818) !important;
  color: #fff !important;
  border-top: 1px solid #2b1c20 !important;
  /* Stessa elevazione dell'header, rivolta verso il contenuto soprastante. */
  box-shadow: 0 -7px 22px rgba(5, 14, 16, .20), 0 -2px 6px rgba(5, 14, 16, .11) !important;
}

body.gds-page-progetti .gds-footer .gds-footer-legal,
body.gds-page-progetti .gds-footer .gds-footer-policies,
body.gds-page-progetti .gds-footer .gds-footer-social,
body.gds-page-progetti .gds-footer .gds-footer-logo .gds-header-brand-words,
body.gds-page-progetti .gds-footer a {
  color: #fff !important;
}

body.gds-page-progetti .gds-footer .gds-footer-logo .gds-header-signature-svg image {
  filter: brightness(0) invert(1) !important;
}

body.gds-page-progetti .gds-footer .gds-social-link svg {
  color: #fff !important;
  stroke: currentColor;
}

/* PROGETTI — solo mobile: titolo a sinistra, SVG a destra, carosello sotto. */
@media (max-width: 800px) {
  body.gds-page-progetti .work .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    column-gap: clamp(6px, 2vw, 16px);
    row-gap: 0;
  }

  body.gds-page-progetti .work .section-head> :first-child {
    min-width: 0;
  }

  body.gds-page-progetti .work .section-head h2 {
    font-size: clamp(20px, 5.6vw, 36px);
    line-height: 1.12;
    overflow-wrap: normal;
  }

  body.gds-page-progetti .work .section-head .eyebrow {
    font-size: clamp(8px, 2vw, 11px);
  }

  body.gds-page-progetti .work .section-head .section-intro {
    font-size: clamp(10px, 2.5vw, 13px);
    line-height: 1.5;
  }

  body.gds-page-progetti .work .section-head .gds-sketch {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-top: 0;
    justify-self: end;
    align-self: center;
  }

  body.gds-page-progetti .work .section-head .gds-sketch-svg {
    width: 100%;
    height: auto;
  }
}

/* Progetti: iPhone preview — integrated iOS status area, not a second inset screen. */
.gds-page-progetti .gds-project-live-shell.is-mobile .gds-project-live-browser {
  background: #f5f2ea;
}

.gds-page-progetti .gds-project-live-shell.is-mobile .gds-project-live-browser::after {
  top: 24px;
  z-index: 5;
}

.gds-page-progetti .gds-project-live-shell.is-mobile .gds-iphone-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 48px;
  padding: 0 27px;
  color: #101010;
  background: #f5f2ea;
  font: 600 16px/1 Arial, sans-serif;
  z-index: 1;
}

.gds-page-progetti .gds-iphone-signals {
  display: flex;
  align-items: center;
  gap: 6px
}

.gds-page-progetti .gds-iphone-battery {
  display: block;
  position: relative;
  width: 22px;
  height: 11px;
  border: 1.6px solid currentColor;
  border-radius: 3px;
  padding: 1px;
  box-sizing: border-box
}

.gds-page-progetti .gds-iphone-battery::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 3px;
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 0 2px 2px 0
}

.gds-page-progetti .gds-iphone-battery i {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: 1px
}

.gds-page-progetti .gds-project-live-shell.is-mobile .gds-project-live-frame {
  display: block;
  margin-top: 0;
  height: 826px;
  min-height: 826px;
  border-radius: 0 0 42px 42px;
  border: 0;
}

.gds-page-progetti .gds-project-live-shell:not(.is-mobile) .gds-iphone-status {
  display: none
}

@media (max-width: 800px) {
  .gds-page-progetti .gds-project-features-heading {
    text-align: center
  }

  .gds-page-progetti .gds-project-modal-tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
    justify-items: center;
    align-items: center;
    max-width: 440px;
    margin: 16px auto 24px;
  }

  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 210px;
    min-width: 0;
    min-height: 42px;
    padding: 10px 7px;
    line-height: 1.3;
  }

  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}

/* Project feature explanations — shared with configurator i18n descriptions. */
.gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag {
  position: relative;
  cursor: help;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
}

.gds-page-progetti .gds-project-modal-tags .gds-project-feature-detail[hidden] {
  display: none !important
}

@media (min-width:801px) {
  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag::after {
    content: attr(data-description);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translate(-50%, 6px);
    min-width: 190px;
    max-width: 260px;
    width: max-content;
    padding: 13px 16px;
    background: #242424;
    color: #f5f1e8;
    border: 1px solid #682d38;
    border-radius: 10px;
    font: 400 12px/1.55 'DM Sans', sans-serif;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 30;
    transition: opacity .2s, transform .2s, visibility .2s;
  }

  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag:hover::after,
  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-detail {
    display: none !important
  }
}

@media (max-width:800px) {
  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag {
    cursor: pointer
  }

  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-detail {
    grid-column: 1/-1;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border: 1px solid rgba(104, 45, 56, .85);
    background: #242424;
    border-radius: 12px;
    color: #f5f1e8;
    text-align: left;
    animation: gdsFeatureReveal .22s ease both;
  }

  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-detail strong {
    font: 500 11px 'DM Sans', sans-serif;
    letter-spacing: .12em;
  }

  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-detail p {
    margin: 9px 0 0;
    font: 400 13px/1.6 'DM Sans', sans-serif;
  }

  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag[aria-expanded='true'] {
    border-color: #b77885;
    background: rgba(104, 45, 56, .28);
  }
}

@keyframes gdsFeatureReveal {
  from {
    opacity: 0;
    transform: translateY(-5px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media (prefers-reduced-motion:reduce) {
  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-detail {
    animation: none
  }
}

/* Progetti — interactive tag and preview selection states (2026-10-23). */
.gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag {
  color: #f5f1e8;
  background: #682d3942;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}

@media (hover:hover) and (pointer:fine) {
  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag:hover {
    border-color: #682D38;
    color: #f5f1e8;
    background: transparent;
    font-size: 11.45px;
  }
}

.gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag:focus-visible {
  border-color: #682D38;
  color: #f5f1e8;
  background: transparent;
}

@media (max-width:800px) {
  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag[aria-expanded='true'] {
    border-color: #682D38;
    color: #f5f1e8;
    background: #682d3942;
  }
}

.gds-page-progetti .gds-project-live-modes button.active,
.gds-page-progetti .gds-project-live-modes button[data-mode='desktop'].active {
  background: #682D38;
  color: #fff;
  border-color: #682D38;
}

/* GV custom cursor: desktop mouse only; hidden for touch and reduced motion. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {

  html.gds-gv-cursor,
  html.gds-gv-cursor body,
  html.gds-gv-cursor a,
  html.gds-gv-cursor button,
  html.gds-gv-cursor input,
  html.gds-gv-cursor textarea,
  html.gds-gv-cursor select,
  html.gds-gv-cursor label,
  html.gds-gv-cursor [role="button"],
  html.gds-gv-cursor [tabindex],
  html.gds-gv-cursor .gds-coverflow article {
    cursor: none !important;
  }

  .gds-gv-pointer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483647;
    pointer-events: none;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 31px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -.17em;
    line-height: 1;
    color: #f5f1e8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
    opacity: 0;
    transform: translate3d(-100px, -100px, 0) translate(-50%, -50%) scale(1);
    will-change: transform;
    transition: opacity .18s ease;
    white-space: nowrap;
  }

  .gds-gv-pointer.is-visible {
    opacity: 1;
  }

  .gds-gv-pointer span {
    display: block;
    transition: transform .25s ease;
    transform-origin: center;
    will-change: translate;
  }

  .gds-gv-pointer.is-interactive span {
    transform: scale(1.4);
  }
}

@media (max-width:800px) {
  .gds-page-progetti .gds-project-modal-tags .gds-project-feature-tag::before {
    content: 'ⓘ';
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    margin-right: 7px;
    color: inherit;
    vertical-align: baseline;
    opacity: .9;
  }
}

/* Progetti: tre blocchi informativi affiancati anche su smartphone.
   Override limitato alla pagina Progetti e al viewport mobile. */
@media (max-width: 800px) {
  .gds-page-progetti .gds-project-modal-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 2.4vw, 16px);
    align-items: start;
    padding-top: 22px;
  }

  .gds-page-progetti .gds-project-modal-facts>div {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .gds-page-progetti .gds-project-modal-facts span {
    display: block;
    font-size: clamp(8px, 2.2vw, 10px);
    line-height: 1.45;
    letter-spacing: .075em;
  }

  .gds-page-progetti .gds-project-modal-facts p {
    font-size: clamp(11px, 2.8vw, 12px);
    line-height: 1.55;
    margin-top: 10px;
  }
}

/* GeiVi — Apri sito as an editorial link (desktop + mobile). */
.gds-page-progetti .gds-project-live-external {
  position: relative;
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 42px;
  padding: 9px 2px 12px;
  margin: 22px auto 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5f1e8;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  transform: none;
  transition: color .25s ease;
}

.gds-page-progetti .gds-project-live-external::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1px;
  background: #682D38;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s ease;
}

@media (hover:hover) {
  .gds-page-progetti .gds-project-live-external:hover {
    background: transparent;
    border-color: transparent;
    color: #f5f1e8;
    transform: none;
  }

  .gds-page-progetti .gds-project-live-external:hover::after {
    transform: scaleX(1);
  }
}

.gds-page-progetti .gds-project-live-external:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion:reduce) {
  .gds-page-progetti .gds-project-live-external::after {
    transition: none;
  }
}

/* Progetti: contatore interno esclusivamente alla card attiva. */
.gds-page-progetti .gds-coverflow .cards>article[data-offset="0"] {
  position: absolute;
}

.gds-page-progetti .gds-coverflow .cards>article .gds-coverflow-counter {
  position: absolute;
  right: 22px;
  bottom: 15px;
  z-index: 2;
  min-width: 0;
  color: #f5f1e8;
  text-align: left;
  pointer-events: none;
}

.gds-page-progetti .gds-coverflow-hint {
  transition: opacity 500ms ease, visibility 500ms ease;
  visibility: visible;
}

.gds-page-progetti .gds-coverflow-hint.is-dismissed {
  opacity: 0;
  visibility: hidden;
}

.gds-page-progetti .gds-hint-mobile {
  display: none;
}

@media (max-width:800px) {
  .gds-page-progetti .gds-hint-desktop {
    display: none;
  }

  .gds-page-progetti .gds-hint-mobile {
    display: inline;
  }

  .gds-page-progetti .gds-coverflow .cards>article .gds-coverflow-counter {
    right: 7px;
    bottom: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gds-page-progetti .gds-coverflow-hint {
    transition: none;
  }
}

/* Progetti desktop: dopo la scomparsa del suggerimento, le frecce
   scorrono ai lati della card centrale, sotto le card laterali. */
@media (min-width: 801px) {
  .gds-page-progetti .gds-coverflow-controls {
    position: relative;
    z-index: 12;
    pointer-events: none;
  }

  .gds-page-progetti .gds-coverflow-controls button {
    pointer-events: auto;
    transition: color .25s ease, opacity .25s ease,
      transform 600ms cubic-bezier(.2, .8, .2, 1);
  }

  .gds-page-progetti .gds-coverflow.gds-coverflow-hint-finished .gds-coverflow-prev {
    transform: translate3d(calc(-1 * min(30vw, 400px)), calc(-1 * clamp(48px, 6vw, 88px)), 0);
  }

  .gds-page-progetti .gds-coverflow.gds-coverflow-hint-finished .gds-coverflow-next {
    transform: translate3d(min(30vw, 400px), calc(-1 * clamp(48px, 6vw, 88px)), 0);
  }
}

@media (min-width: 801px) and (prefers-reduced-motion: reduce) {
  .gds-page-progetti .gds-coverflow-controls button {
    transition: none;
  }
}

/* Progetti mobile: frecce puramente indicative, senza testo né controlli.
   La dissolvenza usa la logica già esistente di .gds-coverflow-hint. */
@media (max-width: 800px) {
  .gds-page-progetti .gds-coverflow-hint {
    width: min(76vw, 390px);
    margin: 8px auto 0;
    letter-spacing: normal;
    opacity: .8;
    transition: opacity 400ms ease, visibility 400ms ease;
    pointer-events: none;
  }

  .gds-page-progetti .gds-coverflow-hint.is-dismissed {
    opacity: 0;
    visibility: hidden;
  }

  .gds-page-progetti .gds-coverflow-hint .gds-hint-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    color: #f5f1e8;
    font: 400 22px/1 'DM Sans', sans-serif;
  }

  /* Dimezza lo spazio di chiusura della sezione carosello (40px → 20px).
     Nessuna modifica alla CTA o al layout desktop. */
  body.gds-page-progetti .work {
    padding-bottom: 20px;
  }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .gds-page-progetti .gds-coverflow-hint {
    transition: none;
  }
}

/* Progetti mobile — remove the unused empty area beneath the central card.
   Preserve the original card height (66% of the former 118vw stage),
   while sizing the 3D stage around that card rather than leaving a tall gap. */
@media (max-width: 800px) {
  body.gds-page-progetti .gds-coverflow-stage {
    height: calc(min(323.4px, 77.88vw) + 32px);
    min-height: 0;
  }

  body.gds-page-progetti .gds-coverflow .cards>article {
    height: min(323.4px, 77.88vw);
    top: 8px;
  }

  body.gds-page-progetti .gds-coverflow-hint {
    margin-top: 4px;
  }

  body.gds-page-progetti .work {
    padding-bottom: 10px;
  }
}

/* Progetti modal: mobile editorial facts, label left and readable copy right.
   Desktop three-column layout remains unchanged. */
@media (max-width: 800px) {
  body.gds-page-progetti .gds-project-modal-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 8px;
    margin-top: 35px;
  }

  body.gds-page-progetti .gds-project-modal-facts>div {
    display: grid;
    grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
    padding: 18px 0;
    overflow-wrap: normal;
  }

  body.gds-page-progetti .gds-project-modal-facts>div+div {
    border-top: 1px solid rgba(245, 241, 232, .16);
  }

  body.gds-page-progetti .gds-project-modal-facts span {
    display: block;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .07em;
    overflow-wrap: break-word;
  }

  body.gds-page-progetti .gds-project-modal-facts p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    min-width: 0;
  }
}

/* Footer mobile: three balanced columns, logo and copyright in true center. */
.gds-footer-copyright {
  display: none;
}

@media (max-width: 800px) {
  .gds-footer .gds-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    padding: 30px 16px;
    min-height: 165px;
  }

  .gds-footer .gds-footer-legal {
    justify-self: start;
    min-width: 0;
    font-size: 9px;
  }

  .gds-footer .gds-footer-policies {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    white-space: nowrap;
  }

  .gds-footer .gds-footer-policies>span[aria-hidden="true"] {
    display: none;
  }

  .gds-footer .gds-footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    min-width: 0;
    width: 100%;
    gap: 7px;
  }

  .gds-footer .gds-footer-center .gds-footer-logo {
    margin: 0 auto;
    justify-self: center;
  }

  .gds-footer .gds-footer-copyright {
    display: block;
    font-size: clamp(7px, 1.9vw, 9px);
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
  }

  .gds-footer .gds-footer-social {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
  }

  .gds-footer .gds-social-link {
    line-height: 1;
  }

  .gds-footer .gds-social-link svg {
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 360px) {
  .gds-footer .gds-footer-inner {
    padding-left: 10px;
    padding-right: 10px;
    column-gap: 3px;
  }

  .gds-footer .gds-footer-legal {
    font-size: 8px;
  }

  .gds-footer .gds-footer-center .gds-footer-logo.gds-header-brand {
    transform: scale(.86);
    transform-origin: center;
  }
}

@media (max-width: 800px) {
  .gds-footer .gds-footer-copyright-desktop {
    display: none;
  }
}

/* Footer desktop: same three-column hierarchy as mobile. */
@media (min-width: 801px) {
  .gds-footer .gds-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 24px;
  }

  .gds-footer .gds-footer-copyright-desktop {
    display: none;
  }

  .gds-footer .gds-footer-legal {
    justify-self: start;
    min-width: 0;
  }

  .gds-footer .gds-footer-policies {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
  }

  .gds-footer .gds-footer-policies>span[aria-hidden="true"] {
    display: none;
  }

  .gds-footer .gds-footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    width: 100%;
    min-width: 0;
    gap: 7px;
  }

  .gds-footer .gds-footer-center .gds-footer-logo {
    margin: 0 auto;
    justify-self: center;
  }

  .gds-footer .gds-footer-copyright {
    display: block;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
  }

  .gds-footer .gds-footer-social {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
  }

  .gds-footer .gds-social-link span {
    display: none;
  }

  .gds-footer .gds-social-link {
    line-height: 1;
  }

  .gds-footer .gds-social-link svg {
    width: 17px;
    height: 17px;
  }
}

/* Footer: DIGITAL / STUDIO appears only after the handwritten signature.
   Start both animations when the footer enters the viewport. */
.gds-footer .gds-footer-logo .gds-pen-stroke {
  animation-play-state: paused;
}

.gds-footer .gds-footer-logo .gds-header-brand-words {
  opacity: 0;
  animation: none;
}

.gds-footer.gds-footer-signature-visible .gds-footer-logo .gds-pen-stroke {
  animation-play-state: running;
}

.gds-footer.gds-footer-signature-visible .gds-footer-logo .gds-header-brand-words {
  animation: gds-header-subtitle .42s ease 3.17s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .gds-footer .gds-footer-logo .gds-pen-stroke {
    animation: none;
    stroke-dashoffset: 0;
  }

  .gds-footer .gds-footer-logo .gds-header-brand-words {
    animation: none !important;
    opacity: 1;
  }
}

/* Tema header/footer per pagina: Progetti è il riferimento per le pagine scure.
   Non modifica struttura, dimensioni o animazioni della firma. */
body.gds-home .gds-footer,
body.gds-page-contatti .gds-footer {
  background: var(--gds-masthead-color, #181818) !important;
  color: #fff !important;
  border-top: 1px solid #2b1c20 !important;
  box-shadow: 0 -7px 22px rgba(5, 14, 16, .20), 0 -2px 6px rgba(5, 14, 16, .11) !important;
}

body.gds-home .gds-footer .gds-footer-legal,
body.gds-home .gds-footer .gds-footer-policies,
body.gds-home .gds-footer .gds-footer-social,
body.gds-home .gds-footer .gds-footer-logo .gds-header-brand-words,
body.gds-home .gds-footer a,
body.gds-page-contatti .gds-footer .gds-footer-legal,
body.gds-page-contatti .gds-footer .gds-footer-policies,
body.gds-page-contatti .gds-footer .gds-footer-social,
body.gds-page-contatti .gds-footer .gds-footer-logo .gds-header-brand-words,
body.gds-page-contatti .gds-footer a {
  color: #fff !important;
}

body.gds-home .gds-footer .gds-footer-logo .gds-header-signature-svg image,
body.gds-page-contatti .gds-footer .gds-footer-logo .gds-header-signature-svg image {
  filter: brightness(0) invert(1) !important;
}

body.gds-home .gds-footer .gds-social-link svg,
body.gds-page-contatti .gds-footer .gds-social-link svg {
  color: #fff !important;
  stroke: currentColor;
}

/* Le pagine chiare conservano la propria palette anche dopo lo scroll. */
body.gds-page-configura .gds-header.is-scrolled,
body.gds-page-chi-sono .gds-header.is-scrolled {
  background: rgba(245, 241, 232, .96) !important;
  border-bottom-color: rgba(28, 27, 26, .15) !important;
  color: var(--ink) !important;
}

body.gds-page-configura .gds-header.is-scrolled .gds-nav>a,
body.gds-page-configura .gds-header.is-scrolled .lang,
body.gds-page-configura .gds-header.is-scrolled .gds-header-brand-words,
body.gds-page-chi-sono .gds-header.is-scrolled .gds-nav>a,
body.gds-page-chi-sono .gds-header.is-scrolled .lang,
body.gds-page-chi-sono .gds-header.is-scrolled .gds-header-brand-words {
  color: var(--ink) !important;
}

body.gds-page-configura .gds-header.is-scrolled .gds-header-signature-svg image,
body.gds-page-chi-sono .gds-header.is-scrolled .gds-header-signature-svg image {
  filter: none !important;
}

/* Contatti — focused fields: subtle burgundy wash only. */
.gds-page-contatti .contact-form-panel :is(input:not([type="hidden"]), textarea, select):focus {
  outline: none !important;
  box-shadow: none !important;
  background: rgba(116, 36, 57, .20) !important;
  border-color: #b67985 !important;
}

/* Custom dropdown avoids the OS-controlled blue native selection on macOS. */
.gds-page-contatti .gds-project-picker {
  position: relative;
  width: 100%;
}

.gds-page-contatti .gds-project-picker .gds-native-project-select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.gds-page-contatti .gds-project-trigger {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px !important;
  background: rgba(245, 241, 232, .07);
  border: 1px solid #b67985;
  border-radius: 16px;
  color: var(--paper);
  font: 13px 'DM Sans', sans-serif;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}

.gds-page-contatti .gds-project-trigger:focus {
  outline: none;
  box-shadow: none;
  background: rgba(116, 36, 57, .20);
}

.gds-page-contatti .gds-project-trigger .gds-project-chevron {
  display: block;
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  margin-right: 5px;
}

.gds-page-contatti .gds-project-picker.is-open .gds-project-chevron {
  transform: translateY(2px) rotate(225deg);
}

.gds-page-contatti .gds-project-options {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #242021;
  border: 1px solid #b67985;
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  max-height: 240px;
  overflow: auto;
}

.gds-page-contatti .gds-project-options[hidden] {
  display: none !important;
}

.gds-page-contatti .gds-project-option {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--paper);
  font: 13px 'DM Sans', sans-serif;
  text-align: left;
  cursor: pointer;
  margin: 5px 0px 0px 0px;
}

.gds-page-contatti .gds-project-option:hover,
.gds-page-contatti .gds-project-option:focus-visible,
.gds-page-contatti .gds-project-option[aria-selected="true"] {
  background: #73283e;
  color: #fff;
  outline: none;
}

/* Contatti: prevent Safari/Chrome autofill from painting fields white/yellow. */
.gds-page-contatti .contact-form-panel input:-webkit-autofill,
.gds-page-contatti .contact-form-panel input:-webkit-autofill:hover,
.gds-page-contatti .contact-form-panel input:-webkit-autofill:focus,
.gds-page-contatti .contact-form-panel textarea:-webkit-autofill,
.gds-page-contatti .contact-form-panel textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #f7f4ed !important;
  caret-color: #f7f4ed;
  -webkit-box-shadow: 0 0 0 1000px #39272d inset !important;
  box-shadow: 0 0 0 1000px #39272d inset !important;
  transition: background-color 99999s ease-out 0s;
}

/* GEIVI HOME — scroll-driven cinematic concept, isolated from other pages */
body.gds-home {
  background: #100f11;
  color: #f2eee8
}

body.gds-home .gds-home-experience {
  background: #100f11;
  color: #f2eee8;
  overflow: clip
}

.gv-story {
  height: 340vh;
  position: relative;
  background: radial-gradient(ellipse at 52% 42%, #292025 0%, #151216 45%, #100f11 76%)
}

.gv-story-sticky {
  height: 100svh;
  min-height: 580px;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden
}

.gv-story-copy {
  position: absolute;
  top: clamp(92px, 13vh, 150px);
  left: 7%;
  z-index: 4;
  pointer-events: none
}

.gv-story-kicker {
  font-size: 10px;
  letter-spacing: .26em;
  color: #cbb8b9;
  margin: 0 0 14px
}

.gv-story-headline {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(38px, 5.3vw, 90px);
  line-height: .96;
  letter-spacing: -.075em;
  font-weight: 500;
  margin: 0;
  max-width: 1000px;
  transition: opacity .25s
}

.gv-story-sub {
  font-size: clamp(12px, 1.2vw, 16px);
  color: #cbbfc0;
  margin: 18px 0 0
}

.gv-stage {
  position: absolute;
  top: 55%;
  left: 50%;
  width: min(67vw, 960px);
  aspect-ratio: 1.72;
  transform: translate(-50%, -36%) scale(.78);
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 2
}

.gv-desktop-device {
  position: absolute;
  inset: 0;
  border: 1px solid #6e6366;
  border-radius: 13px;
  overflow: hidden;
  background: #17171a;
  box-shadow: 0 36px 110px #0009, 0 0 0 9px #ffffff06
}

.gv-browser-top {
  height: 32px;
  background: #29282b;
  border-bottom: 1px solid #4b4448;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 10px;
  color: #a89fa1
}

.gv-browser-dots {
  display: flex;
  gap: 5px
}

.gv-browser-dots i {
  width: 7px;
  height: 7px;
  border: 1px solid #777078;
  border-radius: 50%
}

.gv-browser-url {
  letter-spacing: .12em
}

.gv-browser-plus {
  font-size: 16px
}

.gv-browser-screen {
  height: calc(100% - 32px);
  position: relative;
  overflow: hidden
}

.gv-wireframe,
.gv-design {
  position: absolute;
  inset: 0;
  transition: none
}

.gv-wireframe {
  background: #e9e1d6;
  padding: 4% 5%;
  color: #817980
}

.gv-wire-nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end
}

.gv-wire-nav span {
  height: 5px;
  width: 7%;
  background: #514a50
}

.gv-wire-content {
  position: absolute;
  top: 29%;
  left: 7%;
  width: 47%
}

.gv-wire-title {
  width: 90%;
  height: 27px;
  background: #665e65;
  margin-bottom: 19px
}

.gv-wire-line {
  height: 7px;
  background: #49454b;
  margin-bottom: 10px;
  width: 84%
}

.gv-wire-line.short {
  width: 61%
}

.gv-wire-button {
  width: 35%;
  height: 22px;
  border: 1px solid #625860;
  margin-top: 23px
}

.gv-wire-photo {
  position: absolute;
  right: 7%;
  top: 22%;
  height: 55%;
  width: 33%;
  border: 1px dashed #625960;
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: .18em
}

.gv-wire-bottom {
  position: absolute;
  bottom: 9%;
  left: 7%;
  right: 7%;
  display: flex;
  gap: 10px
}

.gv-wire-bottom i {
  height: 5px;
  flex: 1;
  background: #413d42
}

.gv-design {
  background: #e9e1d6;
  color: #1e1c20;
  opacity: 0;
  transform: scale(1.045)
}

.gv-design-nav {
  height: 16%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  font-size: 10px;
  letter-spacing: .13em
}

.gv-design-nav strong {
  font-family: 'Playfair Display', serif;
  font-size: clamp(14px, 2vw, 28px)
}

.gv-design-content {
  display: grid;
  grid-template-columns: 1fr 46%;
  height: 73%;
  padding: 0 6%;
  gap: 4%
}

.gv-design-text {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.gv-design-text small {
  font-size: clamp(6px, .75vw, 10px);
  letter-spacing: .2em
}

.gv-design-text h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(27px, 5.2vw, 77px);
  line-height: 1.02;
  margin: 5% 0
}

.gv-design-text h2 em {
  color: #8c394c
}

.gv-design-text p {
  font-size: clamp(8px, 1vw, 13px);
  color: #5b5355
}

.gv-design-cta {
  font-size: clamp(7px, .85vw, 12px);
  letter-spacing: .14em;
  margin-top: 6%;
  border-bottom: 1px solid #9d4758;
  align-self: flex-start;
  padding-bottom: 6px
}

.gv-design-art {
  position: relative;
  background: linear-gradient(135deg, #e0e0e0, #52484d 68%, #241d28);
  overflow: hidden;
}

.gv-design-art>span {
  position: absolute;
  bottom: 5%;
  right: 7%;
  font-size: 10px;
  color: #f4e9e6;
  letter-spacing: .1em
}

.gv-art-circle {
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  top: 18%;
  left: 19%;
  background: radial-gradient(circle at 34% 30%, #e4a5a0, #9a5066 55%, #4c293c);
  box-shadow: 20px 35px 55px #100a1855
}

.gv-art-orbit {
  width: 90%;
  aspect-ratio: 1;
  border: 1px solid #f3c6c188;
  border-radius: 50%;
  position: absolute;
  left: 6%;
  top: -2%;
  transform: rotateX(65deg) rotate(-25deg)
}

.gv-design-bottom {
  padding: 1% 6%;
  font-size: clamp(6px, .75vw, 10px);
  letter-spacing: .17em;
  display: flex;
  justify-content: space-between
}

.gv-phone {
  position: absolute;
  right: -7%;
  bottom: -10%;
  width: 23%;
  height: 76%;
  border: 6px solid #19181b;
  border-radius: 24px;
  background: #e9e1d6;
  box-shadow: 0 24px 60px #000a, 0 0 0 1px #6e6267;
  opacity: 0;
  transform: translate(50px, 45px) rotate(9deg) scale(.8);
  overflow: hidden;
  z-index: 4
}

.gv-phone-island {
  position: absolute;
  top: 6px;
  left: 36%;
  width: 28%;
  height: 10px;
  background: #17171a;
  border-radius: 20px;
  z-index: 3
}

.gv-phone-content {
  height: 100%;
  padding: 19% 11% 8%;
  color: #241b22
}

.gv-phone-content>span {
  font-family: 'Playfair Display', serif;
  font-size: clamp(10px, 1.3vw, 18px)
}

.gv-phone-art {
  height: 45%;
  margin: 16% 0 10%;
  background: radial-gradient(circle at 40% 40%, #d995a2, #893c55 60%, #3d2538)
}

.gv-phone-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(12px, 2vw, 29px);
  line-height: 1.1;
  margin: 0
}

.gv-phone-content h3 i {
  color: #923c54
}

.gv-phone-content small {
  font-size: clamp(5px, .6vw, 9px);
  letter-spacing: .1em
}

.gv-story-end {
  position: absolute;
  bottom: 7%;
  left: 7%;
  right: 7%;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: .17em;
  color: #c9b8bb
}

.gv-story-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #4b343c
}

.gv-story-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #a34e65
}

.gv-selected-work {
  padding-top: 130px;
  padding-bottom: 135px
}

.gv-selected-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 48px
}

.gv-selected-heading h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(55px, 8vw, 135px);
  font-weight: 500;
  line-height: .95;
  margin: 0
}

.gv-selected-heading h2 em {
  color: #a45467
}

.gv-selected-card {
  display: block;
  color: inherit;
  text-decoration: none
}

.gv-selected-visual {
  height: clamp(300px, 52vw, 710px);
  background: linear-gradient(135deg, #c6b9aa, #e5dbcc 45%, #b4a394);
  position: relative;
  overflow: hidden;
  color: #29242a
}

.gv-selected-monogram {
  position: absolute;
  top: 8%;
  left: 7%;
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 5vw, 80px)
}

.gv-selected-lines {
  position: absolute;
  bottom: 10%;
  left: 7%;
  display: flex;
  flex-direction: column;
  letter-spacing: .2em;
  font-size: clamp(10px, 1.2vw, 17px);
  line-height: 1.8
}

.gv-selected-figure {
  font-family: 'Playfair Display', serif;
  font-size: clamp(280px, 53vw, 790px);
  line-height: .9;
  position: absolute;
  right: 11%;
  bottom: -18%;
  font-style: italic;
  color: #705963;
  transform: rotate(-9deg);
  transition: transform .7s
}

.gv-selected-card:hover .gv-selected-figure {
  transform: rotate(-4deg) scale(1.05)
}

.gv-selected-caption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #5d4c52;
  font-size: 12px;
  letter-spacing: .13em
}

.gv-selected-caption small {
  display: block;
  font-size: 10px;
  color: #b5a9ab;
  margin-top: 7px
}

.gv-home-final {
  padding: 90px 0 170px;
  text-align: center;
  border-top: 1px solid #493a41
}

.gv-home-final h2 {
  font-size: clamp(45px, 8vw, 120px);
  letter-spacing: -.06em;
  line-height: 1.02;
  margin: 30px 0 50px;
  font-weight: 500
}

.gv-home-action {
  display: inline-block;
  padding: 18px 27px;
  border: 1px solid #a35266;
  color: #f3e8e8;
  text-decoration: none;
  letter-spacing: .13em;
  font-size: 12px;
  transition: background .3s
}

.gv-home-action:hover {
  background: #713247
}

@media(max-width:800px) {
  .gv-story {
    height: 300svh
  }

  .gv-story-sticky {
    min-height: 0;
    height: 80svh;
  }

  .gv-story-copy {
    top: 7%;
    left: 7%;
    right: 7%
  }

  .gv-story-headline {
    font-size: clamp(37px, 9vw, 68px)
  }

  .gv-story-sub {
    font-size: 12px
  }

  .gv-stage {
    top: 40%;
    width: 110vw;
    transform: translate(-50%, -25%) scale(.78)
  }

  .gv-browser-top {
    height: 24px;
    padding: 0 8px
  }

  .gv-browser-screen {
    height: calc(100% - 24px)
  }

  .gv-browser-url {
    font-size: 7px
  }

  .gv-design-nav {
    font-size: 6px
  }

  .gv-design-text h2 {
    font-size: clamp(24px, 6vw, 44px)
  }

  .gv-design-text p {
    font-size: 7px
  }

  .gv-design-cta {
    font-size: 6px
  }

  .gv-phone {
    border-width: 4px;
    border-radius: 14px
  }

  .gv-story-end {
    bottom: 10%;
    font-size: 8px
  }

  .gv-selected-work {
    padding-top: 75px;
    padding-bottom: 90px
  }

  .gv-selected-heading {
    display: block
  }

  .gv-selected-heading h2 {
    margin-top: 18px
  }

  .gv-selected-caption {
    font-size: 10px
  }

  .gv-home-final {
    padding: 75px 0 120px
  }
}

@media(prefers-reduced-motion:reduce) {
  .gv-story {
    height: 100svh
  }

  .gv-design {
    opacity: 1;
    transform: none
  }

  .gv-wireframe {
    opacity: 0
  }

  .gv-phone {
    opacity: 1;
    transform: none
  }

  .gv-stage {
    transform: translate(-50%, -25%) scale(.85)
  }

  .gv-story-progress span {
    width: 100%
  }
}

/* PROGETTI — sequenza SVG: lampadina > 4 raggi > browser > telefono > 3 punti.
   Override circoscritto alla scena, senza alterare il resto del sito. */
.gds-sketch.is-drawn .gds-sketch-freehand .gds-sketch-path:not(.gds-bulb-ray) {
  animation-delay: .4s;
  animation-duration: 1.7s;
}

.gds-sketch.is-drawn .gds-sketch-freehand .gds-bulb-ray {
  animation-delay: var(--ray-delay);
  animation-duration: .34s;
}

.gds-sketch.is-drawn .gds-sketch-browser .gds-sketch-path {
  animation-delay: calc(3.05s + var(--order) * .20s);
  animation-duration: 1.5s;
}

.gds-sketch.is-drawn .gds-sketch-browser .gds-sketch-detail {
  animation-delay: calc(3.35s + var(--order) * .20s);
}

.gds-sketch.is-drawn .gds-sketch-phone .gds-sketch-path {
  animation-delay: calc(5.75s + (var(--order) - 10) * .40s);
  animation-duration: 1.15s;
}

.gds-sketch.is-drawn .gds-sketch-phone .gds-sketch-detail {
  animation-delay: calc(7.25s + (var(--order) - 10) * .40s);
}

.gds-sketch.is-drawn .gds-sketch-spark {
  animation: none;
  opacity: 0;
}

.gds-sketch.is-drawn .gds-sketch-spark circle {
  opacity: 0;
  animation: gdsSketchAppear .4s ease forwards;
}

@media(prefers-reduced-motion:reduce) {
  .gds-sketch.is-drawn .gds-sketch-spark circle {
    opacity: 1;
    animation: none;
  }
}

/* FIX 4 RAGGI — comparsa indipendente e persistente, visibile anche su Safari.
   La lampadina termina prima che i raggi appaiano; il browser resta invariato. */
.gds-sketch .gds-sketch-freehand .gds-bulb-ray {
  opacity: 0;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}

.gds-sketch.is-drawn .gds-sketch-freehand .gds-bulb-ray {
  animation-name: gdsBulbRayReveal !important;
  animation-duration: .28s !important;
  animation-timing-function: ease-out !important;
  animation-fill-mode: forwards !important;
}

@keyframes gdsBulbRayReveal {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@media (prefers-reduced-motion: reduce) {
  .gds-sketch .gds-sketch-freehand .gds-bulb-ray {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* PROGETTI — i tre punti finali devono essere visibili dopo lo smartphone.
   Il contenitore non puo restare a opacity:0: i figli animati non lo superano. */
.gds-sketch.is-drawn .gds-sketch-spark {
  opacity: 1;
  animation: none;
}

.gds-sketch.is-drawn .gds-sketch-spark circle {
  opacity: 0;
  animation: gdsSketchAppear .4s ease forwards;
}

.gds-sketch.is-drawn .gds-sketch-spark circle:nth-child(1) {
  animation-delay: 9.05s;
}

.gds-sketch.is-drawn .gds-sketch-spark circle:nth-child(2) {
  animation-delay: 9.35s;
}

.gds-sketch.is-drawn .gds-sketch-spark circle:nth-child(3) {
  animation-delay: 9.65s;
}

@media(prefers-reduced-motion:reduce) {
  .gds-sketch.is-drawn .gds-sketch-spark circle {
    opacity: 1;
    animation: none;
  }
}

/* Progetti — iPhone/Safari: SVG white signature and consistent CTA arrows.
   The signature's mask and draw animation are unchanged. */
body.gds-page-progetti .gds-header .gds-header-signature-svg image,
body.gds-page-progetti .gds-footer .gds-header-signature-svg image {
  filter: none !important;
  /* White conversion happens inside the SVG for iOS Safari. */
}

body.gds-page-progetti .gds-project-cta-arrow {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 14px;
  overflow: visible;
  color: inherit;
}

/* Progetti / Safari iOS: prevent pre-animation mask leakage from round caps
   on short dot paths and the first pixel of the V. Keep draw timings intact. */
body.gds-page-progetti .gds-header-signature-svg .gds-pen-stroke {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1.025;
  stroke-linecap: butt;
}

/* Progetti: Safari iOS can rasterize the last pixels of masked paths even
   with dashoffset > pathLength. Hide each stroke until its own animation starts.
   Preserve the existing per-letter durations/delays and footer scroll trigger. */
body.gds-page-progetti .gds-header-signature-svg .gds-pen-stroke {
  opacity: 0;
  animation-name: gds-pen-write-progetti-no-leak;
}

@keyframes gds-pen-write-progetti-no-leak {
  0% {
    opacity: 1;
    stroke-dashoffset: 1.025;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.gds-page-progetti .gds-header-signature-svg .gds-pen-stroke {
    opacity: 1 !important;
  }
}

/* Home: cumulative scroll timeline — idea / design / experience */
.gv-story-phases {
  display: flex;
  align-items: center;
  gap: clamp(7px, 1.25vw, 18px);
  min-width: 0;
  max-width: 76%;
  white-space: nowrap;
}

.gv-story-phases .gv-story-phase {
  flex: none;
}

.gv-story-phase-line {
  height: 1px;
  width: clamp(22px, 4vw, 65px);
  flex: none;
  background: linear-gradient(to right, #c9b8bb var(--line-progress), transparent var(--line-progress));
}

.gv-story-phase-line-one {
  --line-progress: var(--phase-line-one, 0%);
}

.gv-story-phase-line-two {
  --line-progress: var(--phase-line-two, 0%);
}

.gv-story-phase-two,
.gv-story-phase-three {
  opacity: 0;
  transition: opacity .35s ease;
}

.gv-story-phases.show-two .gv-story-phase-two,
.gv-story-phases.show-three .gv-story-phase-three {
  opacity: 1;
}

@media(max-width:800px) {
  .gv-story-end {
    left: 5%;
    right: 5%;
    gap: 8px;
    align-items: flex-end
  }

  .gv-story-phases {
    gap: 5px;
    max-width: 82%;
    font-size: clamp(9px, 3.6vw, 12px);
    letter-spacing: .04em
  }

  .gv-story-phase-line {
    width: clamp(10px, 3vw, 25px)
  }

  .gv-story-scroll {
    font-size: 7px;
    max-width: 18%;
    text-align: right;
    line-height: 1.4
  }
}

@media(max-width:380px) {
  .gv-story-phases {
    font-size: 6px;
    gap: 3px
  }

  .gv-story-phase-line {
    width: 10px
  }
}

@media(prefers-reduced-motion:reduce) {

  .gv-story-phase-two,
  .gv-story-phase-three {
    opacity: 1
  }

  .gv-story-phase-line {
    background: #c9b8bb
  }
}

/* HOME — Cinematic Dive V2: separate continuous zoom and smooth vertical flight.
   Independent transforms prevent jerky speed changes at intermediate keyframes. */
.gv-browser-arrival {
  position: absolute;
  inset: 0;
  transform-origin: center;
  animation: gv-browser-flight 4.2s cubic-bezier(.45, 0, .2, 1) both;
  will-change: transform;
  backface-visibility: hidden;
}

.gv-browser-zoom {
  position: absolute;
  inset: 0;
  transform-origin: center;
  animation: gv-browser-zoom 4.2s cubic-bezier(.42, 0, .18, 1) both;
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes gv-browser-zoom {
  from {
    transform: translateZ(0) scale(.0025)
  }

  to {
    transform: translateZ(0) scale(1)
  }
}

@keyframes gv-browser-flight {
  0% {
    transform: translate3d(0, -12px, 0)
  }

  50% {
    transform: translate3d(0, 65px, 0)
  }

  100% {
    transform: translate3d(0, 0, 0)
  }
}

@media(max-width:800px) {
  @keyframes gv-browser-flight {
    0% {
      transform: translate3d(0, -6px, 0)
    }

    50% {
      transform: translate3d(0, 32px, 0)
    }

    100% {
      transform: translate3d(0, 0, 0)
    }
  }
}

@media(prefers-reduced-motion:reduce) {

  .gv-browser-arrival,
  .gv-browser-zoom {
    animation: none;
    transform: none;
  }
}

/* HOME — Cinematic Dive V3: subtle 3D pitch/yaw, independent from the
   continuous zoom and vertical flight. No intermediate keyframe jumps. */
.gv-browser-perspective {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: gv-browser-perspective-settle 4.2s cubic-bezier(.42, 0, .18, 1) both;
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes gv-browser-perspective-settle {
  from {
    transform: perspective(1000px) rotateX(25deg) rotateY(25deg);
  }

  to {
    transform: perspective(1400px) rotateX(0deg) rotateY(0deg);
  }
}

@media(prefers-reduced-motion:reduce) {
  .gv-browser-perspective {
    animation: none;
    transform: none;
  }
}


/* Home / Philosophy — scroll-controlled masked typography; isolated from hero choreography. */
.gv-philosophy {
  position: relative;
  height: 210svh;
  /*background: #21191e;*/
   background: #0f0f11;
  color: #f3e9e6;
}

.gv-philosophy-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.gv-philosophy-eyebrow {
  font-size: clamp(10px, .85vw, 12px);
  letter-spacing: .22em;
  color: #b8a6aa;
  margin: 0 0 clamp(30px, 5vh, 70px);
}

.gv-philosophy-main {
  max-width: 1200px;
}

.gv-philosophy-mask {
  overflow: hidden;
  padding-block: .09em;
  margin-block: -.09em;
}

.gv-philosophy-line {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(37px, 5.5vw, 96px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.22;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  will-change: transform, opacity;
}

.gv-philosophy-line-accent {
  color: #e2b9bd;
}

.gv-philosophy-statement {
  align-self: flex-start;
  margin-top: clamp(55px, 10vh, 125px);
  padding-left: clamp(0px, 6vw, 105px);
}

.gv-philosophy-small {
  margin: 0;
  font-size: clamp(20px, 2.35vw, 37px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -.025em;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  will-change: transform, opacity;
}

.gv-philosophy-emphasis {
  color: #e2b9bd;
  font-weight: 500;
}

@media(max-width:800px) {
  .gv-philosophy {
    height: 185svh
  }

  .gv-philosophy-sticky {
    padding: 95px 6% 75px;
    min-height: 30svh;
  }

  .gv-philosophy-eyebrow {
    margin-bottom: 45px
  }

  .gv-philosophy-line {
    font-size: clamp(34px, 8.4vw, 63px);
    line-height: 1.24
  }

  .gv-philosophy-statement {
    padding-left: 0;
    margin-top: 65px
  }

  .gv-philosophy-small {
    font-size: clamp(19px, 5vw, 28px)
  }
}

@media(prefers-reduced-motion:reduce) {
  .gv-philosophy {
    height: auto
  }

  .gv-philosophy-sticky {
    position: relative;
    min-height: 90svh
  }

  .gv-philosophy-line,
  .gv-philosophy-small {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto
  }
  .gv-philosophy-story {
    height: 90svh;
    position: relative;
  }
}

/* Home — Philosophy pillars, editorial layout (no numbering or cards). */
.gv-philosophy {
  height: auto;
}

.gv-philosophy-story {
  height: 210svh;
  position: relative;
}

.gv-philosophy-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 65px);
  padding-bottom: clamp(105px, 15vh, 200px);
}

.gv-philosophy-pillar {
  min-width: 0;
  border-top: 1px solid rgba(243, 233, 230, .32);
  padding-top: clamp(25px, 3vw, 45px);
  opacity: 0;
  transform: translate3d(0, 35px, 0);
  will-change: opacity, transform;
}

.gv-philosophy-pillar::before {
  content: "";
  display: block;
  height: 1px;
  background: #b27680;
  position: relative;
  top: calc(-1 * clamp(25px, 3vw, 45px) - 1px);
  width: var(--pillar-line, 0%);
  margin-bottom: -1px;
}

.gv-philosophy-pillar h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(27px, 2.7vw, 47px);
  font-weight: 500;
  letter-spacing: -.035em;
  margin: 0 0 25px;
}

.gv-philosophy-pillar h4 {
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 500;
  margin: 0 0 17px;
  line-height: 1.4;
}

.gv-philosophy-pillar p {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.75;
  color: #c7b9bc;
  max-width: 37ch;
  margin: 0;
}

@media(max-width:800px) {
  .gv-philosophy-story {
    height: 185svh
  }

  .gv-philosophy-pillars {
    grid-template-columns: 1fr;
    gap: 55px;
    padding-top: 40px;
    padding-bottom: 110px
  }

  .gv-philosophy-pillar h3 {
    margin-bottom: 18px
  }

  .gv-philosophy-pillar p {
    max-width: 46ch
  }
}

@media(prefers-reduced-motion:reduce) {
  .gv-philosophy-story {
    height: auto
  }

  .gv-philosophy-pillar {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto
  }

  .gv-philosophy-pillar::before {
    width: 100%
  }
}

/* Home final invitation — editorial CTA */
.gv-home-final {
  padding: clamp(100px, 12vw, 190px) 0 clamp(120px, 13vw, 200px);
  overflow: hidden;
}

.gv-home-final-title {
  margin: 32px auto 0;
  font-size: clamp(54px, 8.6vw, 132px);
  line-height: 1.04;
  letter-spacing: -.055em;
  font-weight: 400;
}

.gv-final-mask {
  display: block;
  overflow: hidden;
  padding: .07em 0 .09em;
}

.gv-final-line {
  display: block;
  transform: translate3d(0, 115%, 0);
  opacity: 0;
  transition: transform 1s cubic-bezier(.2, .75, .2, 1), opacity .75s ease;
}

.gv-final-mask:nth-child(2) .gv-final-line {
  transition-delay: .18s;
}

.gv-home-final.is-visible .gv-final-line {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.gv-final-line-accent {
  color: #e6c7cf;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.gv-home-final-description {
  max-width: 550px;
  margin: 27px auto 0;
  color: #c7b9bd;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
}

.gv-home-final-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(25px, 4vw, 62px);
  margin-top: 43px;
}

.gv-home-final-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 12px 0;
  border-bottom: 1px solid #b5687c;
  color: #d4c4c9;
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
  transition: color .3s, border-color .3s;
}

.gv-home-final-link-primary {
  color: #fff3f0;
  border-color: #b5687c;
}

.gv-home-final-link:hover {
  color: #fff;
  border-color: #f0d6dd;
}

.gv-home-final-link span:last-child {
  transition: transform .3s ease;
}

.gv-home-final-link:hover span:last-child {
  transform: translate(3px, -3px);
}

.gv-final-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .85s ease, transform .85s cubic-bezier(.2, .75, .2, 1);
}

.gv-home-final.is-visible .gv-final-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.gv-home-final.is-visible .gv-home-final-description {
  transition-delay: .35s;
}

.gv-home-final.is-visible .gv-home-final-actions {
  transition-delay: .5s;
}

@media(max-width:800px) {
  .gv-home-final {
    padding: 95px 0 125px;
  }

  .gv-home-final-title {
    font-size: clamp(47px, 10vw, 76px);
  }

  .gv-home-final-description {
    margin-top: 22px;
  }

  .gv-home-final-actions {
    gap: 20px 32px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .gv-final-line,
  .gv-final-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Home — services editorial section (replaces the single-project feature). */
.gv-services {
  padding-top: clamp(85px, 10vw, 150px);
  padding-bottom: clamp(85px, 10vw, 145px)
}

.gv-services-heading {
  margin-bottom: clamp(50px, 7vw, 100px)
}

.gv-services-heading .eyebrow {
  margin-bottom: 25px
}

.gv-services-heading h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(48px, 5.5vw, 118px);
  line-height: 1.03;
  letter-spacing: -.045em;
  margin: 0
}

.gv-services-heading h2 em {
  color: #a45467;
  font-weight: inherit
}

.gv-services-list {
  border-top: 1px solid #5d4c52
}

.gv-service {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 36px;
  align-items: center;
  padding: clamp(30px, 4.5vw, 65px) 0;
  border-bottom: 1px solid #5d4c52;
  transition: padding .45s ease
}

.gv-service-name {
  display: flex;
  align-items: center;
  gap: 24px
}

.gv-service-name h3 {
  font-size: clamp(22px, 3.1vw, 47px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0;
  transition: transform .45s ease, color .45s ease
}

.gv-service p {
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.65;
  color: #bdb1b6;
  margin: 0;
  max-width: 420px
}

@media(hover:hover) {
  .gv-service:hover .gv-service-name h3 {
    transform: translateX(12px);
    color: #e6c5cb
  }
}

.gv-services-project-link {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  margin-top: 44px;
  padding: 10px 0;
  border-bottom: 1px solid #a45467;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .12em;
  transition: gap .3s ease, color .3s ease
}

.gv-services-project-link:hover {
  gap: 38px;
  color: #e6c5cb
}

@media(max-width:700px) {
  .gv-services {
    padding-top: 78px;
    padding-bottom: 85px
  }

  .gv-services-heading {
    margin-bottom: 45px
  }

  .gv-services-heading h2 {
    font-size: clamp(40px, 10vw, 68px)
  }

  .gv-service {
    display: block;
    padding: 32px 0
  }

  .gv-service-name {
    gap: 14px
  }

  .gv-service-name h3 {
    font-size: clamp(22px, 6vw, 31px)
  }

  .gv-service p {
    margin-top: 15px;
    font-size: 14px
  }

  .gv-services-project-link {
    margin-top: 34px;
    font-size: 11px
  }
}

@media(prefers-reduced-motion:reduce) {

  .gv-service-name h3,
  .gv-services-project-link {
    transition: none
  }
}

/* Home: services and final invitation share one continuous section. */
.gv-services {
  padding-bottom: clamp(90px, 10vw, 150px);
}

.gv-services-invitation.gv-home-final {
  padding: clamp(78px, 8vw, 110px) 0 0;
  overflow: visible;
  text-align: left;
}

.gv-services-invitation .gv-home-final-description {
  margin: 24px 0 0;
  max-width: 720px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(27px, 3.2vw, 48px);
  line-height: 1.28;
  letter-spacing: -.025em;
  color: #eee3e1;
}

.gv-services-invitation .gv-home-final-actions {
  justify-content: flex-start;
  gap: clamp(24px, 3.2vw, 52px);
  margin-top: 42px;
}

.gv-services-invitation .gv-home-final-link-tertiary {
  color: #bcaeb3;
  border-color: #67535a;
}

.gv-services-invitation .gv-home-final-link-primary {
  color: #d4c4c9;
  border-color: #c17a8d;
}

@media (max-width: 700px) {
  .gv-services {
    padding-bottom: 95px;
  }

  .gv-services-invitation.gv-home-final {
    padding-top: 54px;
  }

  .gv-services-invitation .gv-home-final-description {
    font-size: clamp(26px, 7vw, 38px);
  }

  .gv-services-invitation .gv-home-final-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 32px;
  }
}
/* Home — editorial SVG: idea → experience → opportunity (no labels) */
.gv-services-heading{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);gap:clamp(20px,3.5vw,65px);align-items:center}
.gv-services-heading-copy{min-width:0}
.gv-services-heading h2{font-size:clamp(48px,5vw,104px)}
.gv-services-illustration{min-width:0;width:100%;opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.gv-services-illustration.gv-svg-visible{opacity:1;transform:translateY(0)}
.gv-services-illustration-svg{display:block;width:100%;height:auto;overflow:visible}
.gv-services-illustration .gv-svg-idea,.gv-services-illustration .gv-svg-browser,.gv-services-illustration .gv-svg-growth{opacity:0;transition:opacity .65s ease}
.gv-services-illustration .gv-svg-link{opacity:0;stroke-dasharray:5 10;transition:opacity .4s ease}
.gv-services-illustration.gv-svg-visible .gv-svg-idea{opacity:1;transition-delay:.35s}
.gv-services-illustration.gv-svg-visible .gv-svg-link-first{opacity:1;transition-delay:1.1s}
.gv-services-illustration.gv-svg-visible .gv-svg-browser{opacity:1;transition-delay:1.65s}
.gv-services-illustration.gv-svg-visible .gv-svg-link-second{opacity:1;transition-delay:2.5s}
.gv-services-illustration.gv-svg-visible .gv-svg-growth{opacity:1;transition-delay:3s}
.gv-services-illustration .gv-svg-idea path,.gv-services-illustration .gv-svg-browser path,.gv-services-illustration .gv-svg-browser rect,.gv-services-illustration .gv-svg-growth path{stroke-dasharray:1100;stroke-dashoffset:1100}
.gv-services-illustration.gv-svg-visible .gv-svg-idea path,.gv-services-illustration.gv-svg-visible .gv-svg-browser path,.gv-services-illustration.gv-svg-visible .gv-svg-browser rect,.gv-services-illustration.gv-svg-visible .gv-svg-growth path{animation:gv-svg-draw 1.5s ease forwards}
.gv-services-illustration.gv-svg-visible .gv-svg-browser path,.gv-services-illustration.gv-svg-visible .gv-svg-browser rect{animation-delay:1.65s}
.gv-services-illustration.gv-svg-visible .gv-svg-growth path{animation-delay:3s}
@keyframes gv-svg-draw{to{stroke-dashoffset:0}}
@media(max-width:800px){.gv-services-heading{grid-template-columns:1fr;gap:30px}.gv-services-heading h2{font-size:clamp(40px,10vw,68px)}.gv-services-illustration{max-width:520px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.gv-services-illustration,.gv-services-illustration .gv-svg-idea,.gv-services-illustration .gv-svg-browser,.gv-services-illustration .gv-svg-growth,.gv-services-illustration .gv-svg-link{opacity:1!important;transform:none!important;transition:none!important}.gv-services-illustration .gv-svg-idea path,.gv-services-illustration .gv-svg-browser path,.gv-services-illustration .gv-svg-browser rect,.gv-services-illustration .gv-svg-growth path{animation:none!important;stroke-dashoffset:0!important}}

/* V5 — slower hand-drawn idea, legible caption under illustration */
.gv-services-illustration .gv-svg-idea path{stroke-dasharray:var(--gv-path-length,350);stroke-dashoffset:var(--gv-path-length,350)}
.gv-services-illustration.gv-svg-visible .gv-svg-idea path{animation:gv-svg-draw 2.6s cubic-bezier(.35,.05,.3,1) forwards;animation-delay:.4s}
.gv-services-illustration.gv-svg-visible .gv-svg-link-first{transition-delay:3.05s}
.gv-services-illustration.gv-svg-visible .gv-svg-browser{transition-delay:3.55s}
.gv-services-illustration.gv-svg-visible .gv-svg-browser path,.gv-services-illustration.gv-svg-visible .gv-svg-browser rect{animation-delay:3.55s}
.gv-services-illustration.gv-svg-visible .gv-svg-link-second{transition-delay:5.05s}
.gv-services-illustration.gv-svg-visible .gv-svg-growth{transition-delay:5.55s}
.gv-services-illustration.gv-svg-visible .gv-svg-growth path{animation-delay:5.55s}
.gv-services-svg-caption{margin:20px 0 0;color:#e6d9c8;opacity:0;transform:translateY(9px);font-size:clamp(12px,1.1vw,15px);line-height:1.6;max-width:38ch;transition:opacity .8s ease,transform .8s ease}
.gv-services-illustration.gv-svg-visible .gv-services-svg-caption{opacity:1;transform:translateY(0);transition-delay:6.4s}
@media(max-width:800px){.gv-services-svg-caption{margin:18px auto 0;text-align:center}}
@media(prefers-reduced-motion:reduce){.gv-services-svg-caption{opacity:1!important;transform:none!important;transition:none!important}}

/* V6 — progressive dashed connectors; graph axes before fluid growth arrow */
.gv-services-illustration .gv-svg-link{opacity:1!important;transition:none!important}
.gv-services-illustration .gv-link-reveal{stroke-dasharray:var(--gv-path-length,140px);stroke-dashoffset:var(--gv-path-length,140px)}
.gv-services-illustration.gv-svg-visible .gv-link-reveal-first{animation:gv-svg-draw 1.5s steps(9,end) 3.05s forwards}
.gv-services-illustration.gv-svg-visible .gv-link-reveal-second{animation:gv-svg-draw 1.5s steps(9,end) 6.05s forwards}
.gv-services-illustration.gv-svg-visible .gv-svg-browser{opacity:1;transition-delay:4.55s}
.gv-services-illustration .gv-svg-browser path,.gv-services-illustration .gv-svg-browser rect{stroke-dasharray:var(--gv-path-length,1100px);stroke-dashoffset:var(--gv-path-length,1100px)}
.gv-services-illustration.gv-svg-visible .gv-svg-browser path,.gv-services-illustration.gv-svg-visible .gv-svg-browser rect{animation:gv-svg-draw 1.5s ease 4.55s forwards}
.gv-services-illustration.gv-svg-visible .gv-svg-growth{opacity:1;transition-delay:7.55s}
.gv-services-illustration .gv-svg-growth path{stroke-dasharray:var(--gv-path-length,300px);stroke-dashoffset:var(--gv-path-length,300px)}
.gv-services-illustration.gv-svg-visible .gv-graph-axes{animation:gv-svg-draw 1.05s ease 7.55s forwards}
.gv-services-illustration.gv-svg-visible .gv-graph-trend{animation:gv-svg-draw 1.8s cubic-bezier(.4,0,.2,1) 8.6s forwards}
.gv-services-illustration.gv-svg-visible .gv-graph-arrow{animation:gv-svg-draw .45s ease-out 10.35s forwards}
.gv-services-illustration .gv-svg-growth circle{opacity:0}
.gv-services-illustration.gv-svg-visible .gv-svg-growth circle{opacity:1;transition:opacity .45s ease 10.45s}
.gv-services-illustration.gv-svg-visible .gv-services-svg-caption{transition-delay:10.8s}
@media(prefers-reduced-motion:reduce){
.gv-services-illustration .gv-link-reveal,.gv-services-illustration .gv-svg-growth path,.gv-services-illustration .gv-svg-browser path,.gv-services-illustration .gv-svg-browser rect{animation:none!important;stroke-dashoffset:0!important}
.gv-services-illustration .gv-svg-growth circle,.gv-services-illustration .gv-services-svg-caption{opacity:1!important;transform:none!important;transition:none!important}
}

/* V7 — strict sequential SVG drawing and individually appearing route dashes */
.gv-services-illustration .gv-svg-dashes{opacity:1}
.gv-services-illustration .gv-svg-individual-dash{fill:none;stroke:#d7b4ac;stroke-width:2.4;stroke-linecap:round;opacity:0}
.gv-services-illustration.gv-svg-visible .gv-svg-dashes-first .gv-svg-individual-dash{animation:gv-dash-pop .16s ease-out forwards;animation-delay:calc(3.1s + var(--dash-index)*.16s)}
.gv-services-illustration.gv-svg-visible .gv-svg-dashes-second .gv-svg-individual-dash{animation:gv-dash-pop .16s ease-out forwards;animation-delay:calc(6.3s + var(--dash-index)*.16s)}
@keyframes gv-dash-pop{from{opacity:0}to{opacity:1}}
.gv-services-illustration.gv-svg-visible .gv-svg-browser{transition-delay:4.7s}
.gv-services-illustration.gv-svg-visible .gv-svg-browser path,.gv-services-illustration.gv-svg-visible .gv-svg-browser rect{animation-delay:4.7s}
.gv-services-illustration.gv-svg-visible .gv-svg-growth{transition-delay:7.9s}
.gv-services-illustration.gv-svg-visible .gv-graph-axes{animation-delay:7.9s}
.gv-services-illustration.gv-svg-visible .gv-graph-trend{animation-delay:8.95s}
.gv-services-illustration.gv-svg-visible .gv-graph-arrow{animation-delay:10.75s}
.gv-services-illustration.gv-svg-visible .gv-svg-growth circle{transition-delay:10.85s}
.gv-services-illustration.gv-svg-visible .gv-services-svg-caption{transition-delay:11.2s}
.gv-services-svg-caption{white-space:nowrap;max-width:none;width:max-content;line-height:1.5;font-size:clamp(11px,1.05vw,14px);margin-left:0;margin-right:0}
@media(max-width:800px){.gv-services-svg-caption{margin-left:auto;margin-right:auto;position:relative;left:50%;transform:translate(-50%,9px)!important}.gv-services-illustration.gv-svg-visible .gv-services-svg-caption{transform:translate(-50%,0)!important}}
@media(prefers-reduced-motion:reduce){.gv-services-illustration .gv-svg-individual-dash{opacity:1!important;animation:none!important}}

/* GeiVi AI: mobile input and send button occupy their own full-width row. */
@media (max-width: 767px) {
  .gds-ai-wrap .gds-ai-form {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  .gds-ai-wrap .gds-ai-form input {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
  }
  .gds-ai-wrap .gds-ai-form button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: 14px;
  }
}

/* Chi sono: reveal sequenziale dei testi statistiche, senza spostare il layout. */
.about .stats.stats-sequence-ready .stats-reveal-step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .52s ease, transform .52s cubic-bezier(.2,.75,.25,1);
}
.about .stats.stats-sequence-ready .stats-reveal-step.stats-step-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .about .stats.stats-sequence-ready .stats-reveal-step {
    opacity: 1; transform: none; transition: none;
  }
}

/* V13 — Chi sono: niente flash iniziale e reveal editoriale mascherato.
   La classe sull'HTML viene applicata in <head>, prima del primo paint. */
html.about-stats-animate .about .stats > div:first-child > span,
html.about-stats-animate .about .stats > div:nth-child(2) > strong,
html.about-stats-animate .about .stats > div:nth-child(2) > span,
html.about-stats-animate .about .stats > div:nth-child(3) > strong,
html.about-stats-animate .about .stats > div:nth-child(3) > span {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  clip-path: inset(0 0 100% 0);
  transition: opacity .82s cubic-bezier(.22,1,.36,1),
              transform .95s cubic-bezier(.16,1,.3,1),
              clip-path .95s cubic-bezier(.16,1,.3,1);
}
html.about-stats-animate .about .stats .stats-reveal-step.stats-step-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  html.about-stats-animate .about .stats > div > strong,
  html.about-stats-animate .about .stats > div > span {
    opacity: 1; transform: none; clip-path: none; transition: none;
  }
}

/* V14 — Home iOS: white signature source (no Safari SVG-image filter dependency).
   Scoped to header; footer and other pages remain untouched. */
body.gds-home .gds-header .gds-header-signature-svg image {
  filter: none !important;
  -webkit-filter: none !important;
}
/* One vector arrow on desktop, Chrome mobile and iOS Safari; no Unicode glyph fallback. */
body.gds-home .gv-browser-plus,
body.gds-home .gv-home-final-link .gv-final-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}
body.gds-home .gv-uniform-arrow {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  overflow: visible;
}

/* Freccia CTA Progetti: stesso SVG su desktop e Safari iOS. */
.gds-projects-cta-arrow { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; line-height:0; }
.gds-projects-cta-arrow .gv-uniform-arrow { display:block; width:15px; height:15px; flex:none; }

/* V16 — mobile configurator: independent option scrolling and persistent card gap. */
@media (max-width: 850px) {
  .pricing .gds-config-workspace {
    gap: 18px !important;
    align-items: stretch;
  }
  .pricing .gds-config-workspace .gds-render-quote-card {
    margin-bottom: 0 !important;
  }
  .pricing .gds-render-options-card {
    min-height: 0;
    overflow: hidden;
  }
  .pricing .gds-render-options-card .category-tabs {
    position: relative !important;
    top: auto !important;
    z-index: 2;
    flex-shrink: 0;
  }
  .pricing .gds-render-options-card .gds-options-panel {
    height: clamp(210px, calc(100dvh - var(--gds-live-header-height, 100px) - var(--gds-mobile-quote-height, 155px) - 118px), 540px) !important;
    max-height: 540px;
    min-height: 0;
    flex: 0 1 auto;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* V17 — Mobile: keep the entire category card anchored below the live quote.
   Only the option list scrolls until its end; then page scrolling resumes. */
@media (max-width: 850px) {
  .pricing .gds-config-workspace {
    --gds-card-gap: 18px;
    gap: var(--gds-card-gap) !important;
    padding-bottom: 0; /* V18: remove oversized empty scroll runway */
  }
  .pricing .gds-config-workspace .gds-render-options-card {
    position: sticky !important;
    top: calc(var(--gds-config-header-height, 100px) + var(--gds-mobile-quote-height, 155px) + 26px) !important;
    z-index: 19;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    max-height: calc(100svh - var(--gds-config-header-height, 100px) - var(--gds-mobile-quote-height, 155px) - 38px);
    min-height: 0;
    overflow: hidden;
  }
  .pricing .gds-render-options-card .category-tabs { flex: 0 0 auto; }
  .pricing .gds-render-options-card .gds-options-panel {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* V18 — Mobile: symmetric breathing room around the GeiVi AI divider.
   The options card ends 70px before the section boundary, matching
   the existing 70px from that boundary to the GeiVi AI card. */
@media (max-width: 850px) {
  .pricing { padding-bottom: 70px; }
  .pricing .gds-config-workspace { padding-bottom: 0; }
}

/* V19: allow scroll chaining from the options list to the page on mobile. */
@media (max-width: 850px) {
  .pricing .gds-render-options-card .gds-options-panel {
    overscroll-behavior-y: auto !important;
    touch-action: pan-y;
  }
}


/* V22 — single unified configurator on mobile, native nested scroll. */
@media (max-width: 850px) {
  .pricing .gds-config-workspace {
    display: block !important;
    padding-bottom: 0 !important;
  }
  .pricing .gds-config-workspace .gds-render-options-card {
    position: relative !important;
    top: auto !important;
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    max-height: none !important;
    min-height: 0;
    padding: 0 14px 14px;
    overflow: hidden;
  }
  .pricing .gds-render-options-card > .gds-render-quote-card {
    position: relative !important;
    top: auto !important;
    order: 0 !important;
    z-index: 2;
    width: auto;
    height: auto !important;
    margin: 0 -14px !important;
    padding: 16px 18px 12px;
    border: 0 !important;
    border-radius: 21px 21px 0 0 !important;
    box-shadow: none !important;
    background: transparent;
    flex: 0 0 auto;
  }
  .pricing .gds-render-options-card > .category-tabs {
    order: 1;
    position: relative !important;
    top: auto !important;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0 0 10px;
    padding-top: 12px;
    border: 1px solid #e1dcd2;
    box-shadow: none !important;
    background: transparent;
  }
  .pricing .gds-render-options-card > .gds-options-panel {
    order: 2;
    height: clamp(170px, calc(100svh - var(--gds-config-header-height, 100px) - var(--gds-mobile-quote-height, 170px) - 130px), 480px) !important;
    max-height: 480px !important;
    flex: 0 1 auto !important;
    min-height: 170px !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .pricing .gds-render-options-card .gds-category-pen-outline { z-index: 3; }
}

/* V31 — Quote request: invisible honeypot and GeiVi branded send states */
#leadForm input[name="_gotcha"] {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important;
  border:0 !important; opacity:0 !important; pointer-events:none !important;
}
#leadForm[hidden], #leadSuccess[hidden] { display:none !important; }
#leadForm { transition:opacity .24s ease,transform .24s ease; }
#leadForm.gds-lead-form-out { opacity:0; transform:translateY(8px); pointer-events:none; }
#leadStatus[data-state="error"] {
  grid-column:1/-1; color:#a33b3b; background:#fff0ed; border:1px solid #eac7c1;
  border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.5;
}
.modal-card { position:relative; }
.gds-lead-loading {
  position:absolute; inset:0; z-index:8; border-radius:inherit;
  display:flex; align-items:center; justify-content:center;
  background:rgba(249,248,245,.82); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease,visibility .24s ease;
}
.gds-lead-loading.active { opacity:1; visibility:visible; pointer-events:auto; }
.gds-lead-loading-inner { display:flex; flex-direction:column; align-items:center; gap:18px; padding:24px; text-align:center; }
.gds-lead-loading-logo { width:100px; max-height:90px; object-fit:contain; filter:brightness(0); animation:gds-lead-logo-pulse 1.65s ease-in-out infinite; }
.gds-lead-loading-text { font:12px 'DM Sans',sans-serif; letter-spacing:.07em; color:#343434; }
@keyframes gds-lead-logo-pulse { 0%,100% { opacity:.4; transform:scale(.95); } 50% { opacity:1; transform:scale(1.05); } }
.gds-lead-success { padding:36px 12px 20px; text-align:center; animation:gds-lead-success-in .45s ease both; }
.gds-lead-success-mark { margin:0 auto 22px; width:50px; height:50px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:24px; }
.gds-lead-success h3 { font:400 clamp(24px,4vw,32px) 'Playfair Display',serif; margin:0 0 14px; }
.gds-lead-success p { max-width:440px; margin:0 auto; line-height:1.7; font-size:14px; }
@keyframes gds-lead-success-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .gds-lead-loading-logo,.gds-lead-success { animation:none; } }

/* V33 — Branded form validation and accessible option-card interaction */
#leadForm .gds-field-error,#contactForm .gds-field-error {display:block;margin-top:7px;color:#873c48;font:400 12px/1.5 'DM Sans',sans-serif;letter-spacing:.01em;}
#leadForm [aria-invalid="true"],#contactForm [aria-invalid="true"] {border-color:#873c48!important;box-shadow:0 0 0 1px rgba(135,60,72,.16);}
.pricing .gds-render-options-card .option[data-feature] {cursor:pointer;}
.pricing .gds-render-options-card .option[data-feature]:focus-visible {outline:2px solid #9c6371;outline-offset:3px;}
/* V35 — Loading brand reuses the exact header SVG, mask, lettering and timings. */
.gds-lead-loading-brand.gds-header-brand {
  position:relative; display:block; width:112px; height:82px; flex:0 0 112px;
  align-self:center; line-height:normal; letter-spacing:normal; overflow:visible;
  color:#191919; pointer-events:none;
}
.gds-lead-loading-brand .gds-header-signature-svg {
  position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible;
}
.gds-lead-loading-brand .gds-header-signature-svg image {
  filter:brightness(0)!important; -webkit-filter:brightness(0)!important;
}
.gds-lead-loading-brand .gds-header-brand-words {
  position:absolute; top:70%!important; left:38%!important; width:52%!important;
  display:flex; flex-direction:column; align-items:center!important; text-align:center!important;
  gap:1px; font-family:'DM Sans',sans-serif; font-size:9px; font-weight:400;
  letter-spacing:1.95px; line-height:1.2; white-space:nowrap;
  color:#191919!important; opacity:0;
  animation:gds-header-subtitle .42s ease 3.17s forwards;
}
.gds-lead-loading-brand .gds-header-brand-words>span {display:block;}
.gds-lead-loading-brand .gds-pen-stroke {stroke:white;}
@media(max-width:600px) {
  .gds-lead-loading-brand.gds-header-brand {width:100px;height:76px;flex-basis:100px;}
  .gds-lead-loading-brand .gds-header-brand-words {
    left:39%!important;width:52%!important;font-size:5.4px;letter-spacing:1.1px;
  }
}
@media (hover:hover) and (pointer:fine) { .gds-gv-pointer {font-size:23px!important;} }
@media(prefers-reduced-motion:reduce){.gds-lead-loading-brand .gds-header-brand-words{animation:none;opacity:1;}}

/* V36 — Chi sono: keep the portrait below an opaque sticky header from the first scroll pixel.
   The generic header starts transparent and only becomes opaque with .is-scrolled,
   causing the portrait to show through during the initial 10–20px scroll. */
body.gds-page-chi-sono > .gds-header,
body.gds-page-chi-sono > .gds-header.is-scrolled {
  background: #f5f1e8 !important;
  z-index: 1200 !important;
}

/* V37 — Chi sono: framed editorial panel on the configurator's dark backdrop. */
body.gds-page-chi-sono { background: var(--ink); }
body.gds-page-chi-sono .gds-about-frame-outer {
  background: var(--ink);
  padding: clamp(20px, 3.5vw, 54px) clamp(14px, 4.5vw, 72px) clamp(34px, 5vw, 76px);
}
body.gds-page-chi-sono .gds-about-frame {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  max-width: 1600px;
  margin-inline: auto;
}
body.gds-page-chi-sono .gds-about-frame #about {
  background: var(--paper);
}
@media (max-width: 700px) {
  body.gds-page-chi-sono .gds-about-frame-outer {
    padding: 14px 12px 30px;
  }
  body.gds-page-chi-sono .gds-about-frame {
    border-radius: 12px;
  }
}

/* V38 — Chi sono: a distinct single light card, floating within the
   configurator-coloured page background (not a full-width framed page). */
body.gds-page-chi-sono .gds-about-frame-outer {
  background: var(--ink);
  padding: clamp(54px, 7vw, 112px) clamp(22px, 7vw, 112px) clamp(64px, 8vw, 128px);
}
body.gds-page-chi-sono .gds-about-frame {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid rgba(212,199,182,.62);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 64px rgba(0,0,0,.12);
}
body.gds-page-chi-sono .gds-about-frame #about {
  width: 100%;
  margin: 0;
  background: var(--paper);
}
@media (max-width: 700px) {
  body.gds-page-chi-sono .gds-about-frame-outer {
    padding: 30px 16px 48px;
  }
  body.gds-page-chi-sono .gds-about-frame {
    border-radius: 12px;
  }
}

/* V39 — About: two independent cards (portrait 40%, editorial copy 60%).
   Preserve existing portrait image, typography, content and stat animations. */
body.gds-page-chi-sono .gds-about-frame {
  max-width: 1320px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body.gds-page-chi-sono .gds-about-frame #about {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
  background: transparent;
}
body.gds-page-chi-sono #about > .portrait,
body.gds-page-chi-sono #about > .aboutcopy {
  min-width: 0;
  border: 1px solid rgba(212,199,182,.62);
  border-radius: 16px;
  background-color: var(--paper);
  box-shadow: 0 18px 64px rgba(0,0,0,.12);
}
body.gds-page-chi-sono #about > .portrait {
  overflow: hidden;
  min-height: 570px;
  /* Background image is inherited unchanged from the existing portrait rule. */
}
body.gds-page-chi-sono #about > .aboutcopy {
  padding: clamp(38px, 5vw, 76px) clamp(28px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.gds-page-chi-sono #about .stats {
  gap: clamp(14px, 2.3vw, 38px);
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  body.gds-page-chi-sono .gds-about-frame #about {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  body.gds-page-chi-sono #about > .portrait {
    min-height: clamp(340px, 95vw, 540px);
    border-radius: 12px;
  }
  body.gds-page-chi-sono #about > .aboutcopy {
    border-radius: 12px;
    padding: clamp(28px, 6vw, 44px) clamp(22px, 5vw, 36px);
  }
}


/* V40 — About Bento: photo + three independent editorial cards. */
body.gds-page-chi-sono .gds-about-frame #about {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
body.gds-page-chi-sono #about > .portrait {
  min-height: 680px;
}
body.gds-page-chi-sono #about > .aboutcopy {
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; display: grid; min-width: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 24px);
}
body.gds-page-chi-sono .about-title-card,
body.gds-page-chi-sono .about-description-card,
body.gds-page-chi-sono .about-stats-card {
  min-width: 0; background: var(--paper);
  border: 1px solid rgba(212,199,182,.62);
  border-radius: 16px; box-shadow: 0 18px 64px rgba(0,0,0,.12);
  padding: clamp(26px, 3.2vw, 46px) clamp(25px, 3.5vw, 54px);
}
body.gds-page-chi-sono .about-title-card { display:flex; flex-direction:column; justify-content:center; }
body.gds-page-chi-sono .about-description-card { display:flex; align-items:center; }
body.gds-page-chi-sono .about-description-card p { max-width: 720px; line-height: 1.7; margin: 0; }
body.gds-page-chi-sono .about-stats-card { display:flex; align-items:center; }
body.gds-page-chi-sono .about-stats-card .stats { margin-top: 0; width:100%; justify-content:space-between; }
@media (max-width:760px) {
  body.gds-page-chi-sono .gds-about-frame #about {
    grid-template-columns: minmax(0,1fr); gap:16px;
  }
  body.gds-page-chi-sono #about > .aboutcopy { display: contents; }
  body.gds-page-chi-sono .about-title-card { grid-row: 1; }
  body.gds-page-chi-sono #about > .portrait { grid-row: 2; min-height:clamp(340px,95vw,540px); }
  body.gds-page-chi-sono .about-description-card { grid-row: 3; }
  body.gds-page-chi-sono .about-stats-card { grid-row: 4; }
  body.gds-page-chi-sono .about-title-card,
  body.gds-page-chi-sono .about-description-card,
  body.gds-page-chi-sono .about-stats-card { border-radius:12px; padding:clamp(28px,6vw,44px) clamp(22px,5vw,36px); }
}


/* V41 — Magnetic Assembly: limited to About Bento cards. */
@media (prefers-reduced-motion: no-preference) {
  html.gds-assembly-ready body.gds-page-chi-sono #about > .portrait,
  html.gds-assembly-ready body.gds-page-chi-sono .about-title-card,
  html.gds-assembly-ready body.gds-page-chi-sono .about-description-card,
  html.gds-assembly-ready body.gds-page-chi-sono .about-stats-card {
    opacity: 0;
    transform: translate3d(var(--assembly-x, 0px), var(--assembly-y, 0px), 0) rotate(var(--assembly-r, 0deg));
    transition: opacity 650ms ease, transform 1050ms cubic-bezier(.18,.8,.2,1);
    will-change: transform, opacity;
  }
  html.gds-assembly-ready body.gds-page-chi-sono #about > .portrait { --assembly-x:-52px; --assembly-y:12px; --assembly-r:-1.4deg; transition-delay:120ms; }
  html.gds-assembly-ready body.gds-page-chi-sono .about-title-card { --assembly-x:30px; --assembly-y:-44px; --assembly-r:1.6deg; transition-delay:0ms; }
  html.gds-assembly-ready body.gds-page-chi-sono .about-description-card { --assembly-x:48px; --assembly-y:8px; --assembly-r:1deg; transition-delay:250ms; }
  html.gds-assembly-ready body.gds-page-chi-sono .about-stats-card { --assembly-x:0px; --assembly-y:50px; --assembly-r:-.8deg; transition-delay:380ms; }
  html.gds-assembly-ready body.gds-page-chi-sono .assembly-visible { opacity:1 !important; transform:translate3d(0,0,0) rotate(0) !important; }
  body.gds-page-chi-sono #about > .portrait,
  body.gds-page-chi-sono .about-title-card,
  body.gds-page-chi-sono .about-description-card,
  body.gds-page-chi-sono .about-stats-card { position:relative; isolation:isolate; }
  body.gds-page-chi-sono .assembly-glint::after,
  body.gds-page-chi-sono #about > .portrait.assembly-glint::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    border:1px solid transparent; background:linear-gradient(115deg,transparent 10%,rgba(238,230,215,.9) 47%,transparent 75%) border-box;
    -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; animation:gdsAssemblyGlint 750ms ease-out both;
  }
  @keyframes gdsAssemblyGlint { 0%{opacity:0} 25%{opacity:.85} 100%{opacity:0} }
  @media(max-width:760px){
    html.gds-assembly-ready body.gds-page-chi-sono #about > .portrait,
    html.gds-assembly-ready body.gds-page-chi-sono .about-title-card,
    html.gds-assembly-ready body.gds-page-chi-sono .about-description-card,
    html.gds-assembly-ready body.gds-page-chi-sono .about-stats-card {
      --assembly-x:0px; --assembly-y:30px; --assembly-r:0deg;
      transition-delay:0ms; transition-duration:800ms;
    }
  }
}

/* V42 — Magnetic Assembly on configurator: isolated to main containers.
   Does not animate option rows or interfere with scrolling/selection. */
@media (prefers-reduced-motion: no-preference) {
  html.gds-config-assembly-ready body .gds-config-intro,
  html.gds-config-assembly-ready body .gds-render-options-card,
  html.gds-config-assembly-ready body .gds-render-quote-card {
    opacity:0;
    transform:translate3d(var(--config-assembly-x,0px),var(--config-assembly-y,0px),0) rotate(var(--config-assembly-r,0deg));
    transition:opacity 650ms ease,transform 1050ms cubic-bezier(.18,.8,.2,1);
    will-change:opacity,transform;
  }
  html.gds-config-assembly-ready body .gds-config-intro {--config-assembly-x:18px;--config-assembly-y:-38px;--config-assembly-r:1deg;}
  html.gds-config-assembly-ready body .gds-render-options-card {--config-assembly-x:-36px;--config-assembly-y:35px;--config-assembly-r:-1deg;}
  html.gds-config-assembly-ready body .gds-render-quote-card {--config-assembly-x:38px;--config-assembly-y:28px;--config-assembly-r:1deg;}
  html.gds-config-assembly-ready body .gds-config-assembly-visible {opacity:1 !important;transform:translate3d(0,0,0) rotate(0deg) !important;}
  body .gds-config-intro,body .gds-render-options-card,body .gds-render-quote-card {position:relative;}
  body .gds-config-assembly-glint::after {
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
    border:1px solid transparent;
    background:linear-gradient(115deg,transparent 10%,rgba(238,230,215,.9) 47%,transparent 75%) border-box;
    -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;animation:gdsConfigAssemblyGlint 750ms ease-out both;
  }
  @keyframes gdsConfigAssemblyGlint {0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
  @media(max-width:760px) {
    html.gds-config-assembly-ready body .gds-config-intro,
    html.gds-config-assembly-ready body .gds-render-options-card,
    html.gds-config-assembly-ready body .gds-render-quote-card {
      --config-assembly-x:0px;--config-assembly-y:30px;--config-assembly-r:0deg;
      transition-duration:800ms;
    }
  }
}

/* V45 — authentic handwritten G and V, extracted from the existing GeiVi signature. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .gds-gv-pointer img { display:block; width:36px; height:auto; pointer-events:none; user-select:none; filter:none; }
}

/* V53 — mobile About stats: three columns, one row, without changing reveal animation. */
@media (max-width: 760px) {
  body.gds-page-chi-sono .about-stats-card .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(5px, 2vw, 12px);
    flex-wrap: nowrap;
    align-items: start;
  }
  body.gds-page-chi-sono .about-stats-card .stats > div {
    min-width: 0;
    align-items: center;
    text-align: center;
  }
  body.gds-page-chi-sono .about-stats-card .stats strong {
    font-size: clamp(22px, 6vw, 34px);
  }
  body.gds-page-chi-sono .about-stats-card .stats span {
    overflow-wrap: anywhere;
    font-size: clamp(9px, 2.45vw, 11px);
  }
}
/* V53 — the loading veil belongs to the entire quote card, not its scrollable content. */
#quoteModal .modal-card {
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0;
}
#quoteModal .gds-lead-card-scroll {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 38px;
}
#quoteModal .gds-lead-loading {
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 760px) {
  #quoteModal {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 16px;
  }
  #quoteModal .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 32px);
    margin: 0 auto;
    border-radius: 16px;
  }
  #quoteModal .gds-lead-card-scroll {
    max-height: calc(100dvh - 32px);
    padding: clamp(20px, 5vw, 30px);
  }
  #quoteModal #leadSuccess {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 28px 8px 20px;
    overflow-wrap: anywhere;
  }
}

/* V55: accessible page heading, visually hidden without altering layout */
.gds-seo-heading { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }