/*
  Concept 03 scale refinement
  ---------------------------
  This file intentionally sits after the concept and hero styles. It makes the
  full experience quieter and more breathable without changing its structure,
  imagery or motion. Remove this one stylesheet link to return to the previous
  scale exactly.
*/

:root {
  --compact-section-heading: clamp(3rem, 4.45vw, 5.25rem);
  --compact-section-space: clamp(7rem, 10vw, 10.5rem);
  --public-hero-heading: clamp(3.4rem, 5.2vw, 6rem);
  --public-hero-copy: clamp(0.92rem, 1.05vw, 1.05rem);
  --secondary-section-heading: clamp(2.5rem, 3.35vw, 3.5rem);
  --secondary-component-heading: clamp(1.75rem, 2.2vw, 2rem);
  --secondary-editorial-heading: clamp(1.875rem, 2.35vw, 2.125rem);
}

/* Glass navigation — less height, width and visual weight. */
.site-header {
  top: 1rem;
  width: calc(100% - 2rem);
  max-width: 1260px;
  min-height: 58px;
  padding: 0.48rem 0.55rem 0.48rem 1rem;
  grid-template-columns: minmax(185px, 1fr) auto minmax(185px, 1fr);
  gap: 1.35rem;
}

.site-header.is-scrolled {
  width: min(calc(100% - 1.4rem), 1080px);
}

.site-header .brand-symbol {
  width: 88px;
}

.desktop-nav {
  gap: clamp(1rem, 1.8vw, 1.8rem);
  font-size: 0.76rem;
}

.desktop-nav a {
  padding-block: 0.4rem;
}

.header-actions {
  gap: 0.8rem;
}

.phone-link {
  font-size: 0.72rem;
}

.nav-cta {
  min-height: 39px;
  padding: 0.3rem 0.95rem;
  font-size: 0.74rem;
}

/* Hero — still cinematic, now comfortably inside the first viewport. */
.hero-content {
  padding: clamp(7.5rem, 13vh, 9.25rem) var(--gutter) 6.5rem;
}

.hero h1 {
  max-width: 15ch;
  margin-top: 1.1rem;
  font-size: clamp(3.4rem, 5.2vw, 6rem);
  letter-spacing: -0.066em;
  line-height: 0.9;
}

.hero h1 em {
  font-size: 0.9em;
}

/* Keep the italic hero line optically consistent across every page family. */
body .countries-hero__content h1 em,
body .spain-hero__copy h1 em,
body .calculator-hero h1 em,
body .privacy-hero h1 em {
  font-size: 0.9em;
}

.hero-intro {
  width: min(100%, 680px);
  margin-top: clamp(1.65rem, 3.5vh, 2.5rem);
  padding-top: 1rem;
}

.hero-intro > p {
  max-width: 27rem;
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
}

.hero-cta {
  min-width: 206px;
  min-height: 50px;
  padding: 0.5rem 0.55rem 0.5rem 1.1rem;
  font-size: 0.84rem;
}

.hero-cta svg {
  width: 34px;
  height: 34px;
  padding: 0.6rem;
}

.hero-proof {
  bottom: 1.8rem;
  gap: clamp(1.4rem, 3vw, 3.2rem);
}

.hero-proof div {
  min-width: 112px;
}

.hero-proof strong {
  font-size: 1.08rem;
}

.hero-proof span {
  max-width: 116px;
  font-size: 0.62rem;
}

.scroll-hint {
  bottom: 1.8rem;
  font-size: 0.6rem;
}

/* Shared editorial headings. */
.services-heading h2,
.route-heading h2,
.lab-heading h2,
.finale-copy h2 {
  margin-top: 1.3rem;
  font-size: var(--compact-section-heading);
  line-height: 0.92;
}

/* Services journey — smaller canvas and tighter, more elegant panels. */
.services {
  height: 560svh;
}

.services-heading {
  top: clamp(6.5rem, 12vh, 8.5rem);
  width: min(24rem, 29vw);
}

.services-heading > p:last-child {
  width: min(19rem, 100%);
  margin-top: 1.8rem;
  font-size: 0.84rem;
}

.services-viewport {
  top: 14svh;
  bottom: 13svh;
  left: min(34vw, 29rem);
  overflow: hidden;
}

.services-track {
  gap: 1rem;
}

.service-panel {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  flex-basis: min(64vw, 58rem);
  opacity: 1;
  transform: scale(0.975);
}

.service-panel.is-active {
  opacity: 1;
}

.service-panel::after {
  display: none;
}

.service-panel figure {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.service-panel figure img {
  width: 100%;
}

.service-panel__copy {
  position: relative;
  inset: auto;
  display: flex;
  width: auto;
  height: 100%;
  padding: clamp(2rem, 3.4vw, 3.5rem);
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  background: #0c2a21;
  border-left: 1px solid rgba(255, 253, 248, 0.12);
}

.service-panel--pale .service-panel__copy {
  background: #e9e2d4;
  border-left-color: rgba(9, 37, 29, 0.14);
}

.service-panel__copy h3 {
  margin: 0.8rem 0 1.25rem;
  font-size: clamp(2rem, 2.6vw, 3rem);
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.service-panel__copy > span {
  max-width: 30ch;
  font-size: clamp(0.88rem, 0.92vw, 0.96rem);
  line-height: 1.55;
  opacity: 0.84;
}

.service-panel__copy a {
  margin-top: 1.7rem;
  font-size: 0.57rem;
}

/* Process — a shorter section and genuinely compact ticket stack. */
.route {
  padding: var(--compact-section-space) 4vw clamp(8rem, 11vw, 11.5rem);
}

.route-heading {
  grid-template-columns: 1fr minmax(22rem, 1.2fr) minmax(11rem, 0.48fr);
  margin-bottom: clamp(4.5rem, 6.5vw, 6.5rem);
}

.route-heading > p:last-child {
  font-size: 0.84rem;
}

.route-tickets {
  width: min(82vw, 820px);
  min-height: 39rem;
}

.route-ticket {
  width: min(80vw, 38rem);
  min-height: 16.2rem;
  padding: 1.85rem 2.2rem;
}

.route-ticket:nth-child(2) { top: 6.7rem; }
.route-ticket:nth-child(3) { top: 13.4rem; }
.route-ticket:nth-child(4) { top: 20.1rem; }

.route-ticket > span {
  padding-right: 1.5rem;
  font-size: 2.55rem;
}

.route-ticket h3 {
  padding-top: 1.25rem;
  font-size: clamp(1.8rem, 2.55vw, 3rem);
}

.route-ticket p {
  max-width: 18rem;
  padding-top: 1.3rem;
  font-size: 0.88rem;
}

/* Calculator — preserve the tactile object while reducing its occupation. */
.lab {
  padding: var(--compact-section-space) 4vw;
}

.lab-heading {
  grid-template-columns: minmax(11rem, 0.7fr) minmax(25rem, 1.3fr) minmax(10rem, 0.4fr);
  margin-bottom: clamp(4.5rem, 6.5vw, 6.5rem);
}

.lab-heading > p:last-child {
  font-size: 0.84rem;
}

.lab-bezel {
  width: min(90%, 980px);
  padding: clamp(0.5rem, 0.8vw, 0.7rem);
  border-radius: 1.5rem;
}

.lab-core {
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  border-radius: 1rem;
}

.lab-result,
.lab-controls {
  min-height: 31.5rem;
  padding: clamp(1.75rem, 2.4vw, 2.5rem);
}

.lab-payment {
  margin-top: clamp(2.6rem, 5vh, 3.5rem);
  font-size: clamp(3.25rem, 4.8vw, 5rem);
}

.lab-dial {
  right: clamp(1.4rem, 2.5vw, 2.5rem);
  bottom: 3.5rem;
  width: clamp(6.75rem, 9vw, 8.5rem);
}

.lab-dial > i {
  border-width: 1.1rem;
}

.lab-controls {
  gap: 1.55rem;
}

.lab-control output {
  font-size: 1.16rem;
}

.lab-action {
  min-height: 3.6rem;
}

/* Client story and transition — editorial, not oversized. */
.story,
.story-image {
  min-height: 39rem;
}

.story blockquote {
  padding: clamp(3.8rem, 6.5vw, 6.5rem);
}

.story blockquote > span {
  font-size: 5rem;
}

.story blockquote > p {
  margin-top: 1.5rem;
  font-size: clamp(1.8rem, 2.8vw, 3.35rem);
}

.story blockquote footer {
  margin-top: 2.7rem;
  font-size: 0.61rem;
}

.transition-rail {
  min-height: clamp(4.75rem, 5.3vw, 6rem);
}

/* Finale and footer — still decisive, with much calmer proportions. */
.finale {
  padding: 8rem 7vw 7rem;
}

.finale-copy {
  max-width: 48rem;
}

.finale-copy h2 {
  max-width: 9ch;
  font-size: clamp(3.4rem, 5.35vw, 6rem);
}

.finale-copy > p:last-of-type {
  margin: 1.8rem 0 2.4rem;
  font-size: 0.94rem;
}

.finale-copy button {
  min-height: 3.65rem;
}

.site-footer {
  padding: 5rem 4vw 2.2rem;
}

.footer-brand {
  width: 7.5rem;
}

/* Tablet: retain the scale reduction before the mobile layout takes over. */
@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: 1fr auto;
    max-width: calc(100% - 2rem);
  }

  .site-header .brand-symbol {
    width: 82px;
  }

  .services-heading {
    width: 29vw;
  }

  .services-viewport {
    left: 34vw;
  }

  .service-panel {
    flex-basis: 100%;
  }

  .lab-result,
  .lab-controls {
    min-height: 30rem;
  }
}

/* Mobile: each section becomes a concise chapter rather than a long poster. */
@media (max-width: 780px) {
  :root {
    --compact-section-heading: clamp(2.6rem, 10.5vw, 3.65rem);
    --compact-section-space: 5.8rem;
    --public-hero-heading: clamp(2.9rem, 11.5vw, 4.1rem);
    --secondary-section-heading: clamp(2.25rem, 9.25vw, 2.65rem);
    --secondary-component-heading: clamp(1.625rem, 7.5vw, 2rem);
    --secondary-editorial-heading: clamp(1.5625rem, 6.8vw, 2rem);
  }

  .site-header,
  .site-header.is-scrolled {
    top: 0.5rem;
    width: calc(100% - 1rem);
    max-width: none;
    min-height: 52px;
    padding: 0.35rem 0.4rem 0.35rem 0.75rem;
  }

  .site-header .brand-symbol {
    width: 72px;
  }

  .menu-button {
    width: 38px;
    height: 38px;
    padding: 0 9px;
  }

  .mobile-menu {
    padding: 0.85rem 1rem 1rem;
  }

  .mobile-menu a {
    padding: 0.7rem 0;
    font-size: 0.9rem;
  }

  .mobile-menu button {
    min-height: 44px;
    margin-top: 0.8rem;
  }

  .hero-iris-scene {
    height: 155svh;
  }

  .hero-content {
    padding: 6.5rem var(--gutter) 4.75rem;
    justify-content: center;
  }

  .hero h1 {
    max-width: 10ch;
    margin-top: 0.9rem;
    font-size: clamp(2.9rem, 11.5vw, 4.1rem);
    line-height: 0.92;
  }

  .hero-intro {
    margin-top: 1.3rem;
    gap: 1rem;
  }

  .hero-intro > p {
    max-width: 25rem;
    font-size: 0.88rem;
  }

  .hero-cta {
    min-height: 48px;
  }

  .services {
    height: auto;
    padding: 5.8rem 0.8rem 5.5rem;
  }

  .services-heading {
    width: auto;
    margin-bottom: 3rem;
  }

  .services-heading h2,
  .route-heading h2,
  .lab-heading h2,
  .finale-copy h2 {
    font-size: var(--compact-section-heading);
  }

  .services-heading > p:last-child {
    margin-top: 1.4rem;
    font-size: 0.82rem;
  }

  .services-track {
    gap: 0.8rem;
  }

  .services-viewport {
    inset: auto;
    overflow: visible;
  }

  .service-panel,
  .service-panel.is-active {
    display: block;
    min-height: 31rem;
  }

  .service-panel::after,
  .service-panel--pale::after {
    display: block;
  }

  .service-panel figure {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }

  .service-panel__copy,
  .service-panel--pale .service-panel__copy {
    position: absolute;
    top: auto;
    right: 1.1rem;
    bottom: 1.25rem;
    left: 1.1rem;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border-left: 0;
  }

  .service-panel__copy h3 {
    margin: 0.55rem 0 0.9rem;
    font-size: clamp(2.55rem, 11vw, 3.5rem);
  }

  .service-panel__copy > span {
    max-width: 21rem;
    font-size: 0.86rem;
  }

  .service-panel__copy a {
    margin-top: 1.15rem;
  }

  .route {
    padding: var(--compact-section-space) 0.8rem 6.5rem;
  }

  .route-heading,
  .lab-heading {
    margin-bottom: 3.2rem;
  }

  .route-heading > p:last-child,
  .lab-heading > p:last-child {
    margin-top: 1.4rem;
    font-size: 0.84rem;
  }

  .route-tickets {
    gap: 0.8rem;
  }

  .route-ticket,
  .route-ticket:nth-child(n) {
    min-height: 14.5rem;
    padding: 1.4rem;
  }

  .route-ticket > span {
    padding-right: 1rem;
    font-size: 2.1rem;
  }

  .route-ticket h3 {
    padding-top: 0.9rem;
    font-size: 1.85rem;
  }

  .route-ticket p {
    padding-top: 0.9rem;
    font-size: 0.8rem;
  }

  .lab {
    padding: var(--compact-section-space) 0.8rem;
  }

  .lab-bezel {
    width: 100%;
    border-radius: 1.25rem;
  }

  .lab-core {
    grid-template-columns: 1fr;
    border-radius: 0.85rem;
  }

  .lab-result,
  .lab-controls {
    min-height: auto;
    padding: 1.25rem;
  }

  .lab-result {
    min-height: 28.5rem;
  }

  .lab-payment {
    margin-top: 2.8rem;
    font-size: clamp(3.1rem, 14vw, 4.5rem);
  }

  .lab-dial {
    right: 1.25rem;
    bottom: 2.4rem;
    width: 7.25rem;
  }

  .lab-totals {
    width: calc(100% - 8.5rem);
    margin-top: 3rem;
  }

  .lab-controls {
    gap: 1.8rem;
    padding-top: 2.4rem;
    padding-bottom: 2.2rem;
  }

  .story,
  .story-image {
    min-height: 0;
  }

  .story-image {
    height: 21rem;
  }

  .story blockquote {
    min-height: 27rem;
    padding: 4.5rem 1.25rem;
  }

  .story blockquote > span {
    font-size: 4rem;
  }

  .story blockquote > p {
    font-size: clamp(1.7rem, 7.8vw, 2.5rem);
  }

  .transition-rail {
    min-height: 4.5rem;
  }

  .finale {
    min-height: 44rem;
    padding: 7rem 1rem 7.5rem;
  }

  .finale-copy h2 {
    margin-top: 1rem;
    font-size: clamp(2.9rem, 12vw, 4.15rem);
  }

  .finale-copy > p:last-of-type {
    margin: 1.4rem 0 2rem;
    font-size: 0.88rem;
  }

  .finale-proof {
    right: 1rem;
    bottom: 1.2rem;
    left: 1rem;
  }

  .site-footer {
    padding: 4rem 1rem 2rem;
  }

  .footer-brand {
    width: 6.75rem;
  }
}

@media (max-height: 760px) and (min-width: 781px) {
  :root {
    --public-hero-heading: clamp(3rem, 4.65vw, 5.15rem);
  }

  .hero-content {
    padding-top: 6.8rem;
    padding-bottom: 5.2rem;
  }

  .hero h1,
  body .about-hero h1,
  body .services-hero h1,
  body .countries-hero__content h1,
  body .spain-hero__copy h1,
  body .calculator-hero h1,
  body .privacy-hero h1 {
    font-size: clamp(3rem, 4.65vw, 5.15rem);
  }

  .hero-intro {
    margin-top: 1.4rem;
  }

  .services-heading {
    top: 6.4rem;
  }

  .services-viewport {
    top: 15svh;
    bottom: 12svh;
  }
}

/* Phones in landscape use the readable stacked journey instead of a shallow sticky scene. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 600px) {
  .services {
    height: auto;
    padding: 5.8rem 0.8rem 5.5rem;
  }

  .services-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .services-heading {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin-bottom: 3rem;
  }

  .services-heading h2 {
    font-size: clamp(2.6rem, 8vw, 3.65rem);
  }

  .services-heading > p:last-child {
    width: min(22rem, 100%);
    margin-top: 1.4rem;
    font-size: 0.82rem;
  }

  .services-viewport {
    position: relative;
    inset: auto;
    overflow: visible;
  }

  .services-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    height: auto;
    padding: 0;
    transform: none !important;
  }

  .service-panel,
  .service-panel.is-active {
    display: block;
    min-height: 31rem;
    transform: none;
    opacity: 1;
  }

  .service-panel::after,
  .service-panel--pale::after {
    display: block;
    background: linear-gradient(0deg, rgba(5, 25, 20, 0.96) 0, rgba(5, 25, 20, 0.08) 72%);
  }

  .service-panel--pale {
    color: var(--white);
  }

  .service-panel figure {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }

  .service-panel__copy,
  .service-panel--pale .service-panel__copy {
    position: absolute;
    top: auto;
    right: 1.1rem;
    bottom: 1.25rem;
    left: 1.1rem;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border-left: 0;
  }

  .service-panel__copy h3 {
    margin: 0.55rem 0 0.9rem;
    font-size: clamp(2.55rem, 7vw, 3.5rem);
  }

  .service-panel__copy > span {
    max-width: 24rem;
    font-size: 0.86rem;
  }

  .service-panel__copy a {
    margin-top: 1.15rem;
  }

  .services-meter {
    display: none;
  }
}

/* Reduced motion keeps every service visible without the 560svh scroll scene. */
@media (prefers-reduced-motion: reduce) {
  .services {
    height: auto;
    padding: clamp(7rem, 10vw, 10rem) 4vw;
  }

  .services-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .services-heading {
    position: relative;
    top: auto;
    left: auto;
    width: min(28rem, 100%);
    margin-bottom: 4rem;
  }

  .services-heading > p:last-child {
    width: min(20rem, 100%);
  }

  .services-viewport {
    position: relative;
    inset: auto;
    overflow: visible;
  }

  .services-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    height: auto;
    padding: 0;
    transform: none !important;
  }

  .service-panel,
  .service-panel.is-active {
    min-height: 34rem;
    transform: none;
    opacity: 1;
  }

  .service-panel__copy {
    padding: clamp(1.6rem, 3vw, 2.4rem);
  }

  .services-meter {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 780px) {
  .services {
    padding: 5.8rem 0.8rem 6.5rem;
  }

  .services-track {
    grid-template-columns: 1fr;
  }

  .service-panel,
  .service-panel.is-active {
    min-height: 31rem;
  }
}