/*
===============================================================================
 INPLACE — EASY VISUAL SETTINGS
===============================================================================

This is the main file to edit when you want to change sizes or spacing.

HOW TO USE
1. Change only the value after the colon.
2. Keep the semicolon at the end of the line.
3. Save this file and refresh the webpage.

QUICK EXAMPLES
  --main-title-letter-spacing: 0em;       normal letter spacing
  --main-title-letter-spacing: 0.02em;    wider letters
  --main-title-letter-spacing: -0.03em;   tighter letters

  --homepage-content-width: 1340px;       wider homepage
  --homepage-content-width: 1180px;       narrower homepage

The detailed theme files remain untouched underneath this control layer.
===============================================================================
*/

:root {
  /* -------------------------------------------------------------------------
     1. TOP MENU / HEADER
     ------------------------------------------------------------------------- */
  --header-height: 80px;
  --header-content-width: 1360px;
  --header-side-padding: 32px;
  --header-logo-width: 250px;
  --header-logo-height: 120px;
  --header-menu-gap: 32px;
  --header-menu-letter-spacing: 0.02em;
  --language-switch-gap: 6px;

  /* -------------------------------------------------------------------------
     2. HOMEPAGE LAYOUT
     ------------------------------------------------------------------------- */
  --homepage-content-width: 1340px;
  --homepage-side-margin: 40px;
  --homepage-column-gap: 110px;
  --homepage-top-space: 120px;
  --homepage-bottom-space: 130px;
  --homepage-logo-width: 520px;
  --homepage-logo-bottom-gap: 36px;
  --homepage-image-height: 540px;

  /* -------------------------------------------------------------------------
     3. MAIN TITLES
     Applies to the homepage title and the large title in every section.
     ------------------------------------------------------------------------- */
  --main-title-letter-spacing: -0.04em;
  --main-title-line-height: 0.98;
  --homepage-title-size: 6.15rem;
  --section-title-size: 5.2rem;

  /* -------------------------------------------------------------------------
     4. BODY TEXT
     ------------------------------------------------------------------------- */
  --body-text-letter-spacing: 0em;
  --body-text-line-height: 1.7;
  --homepage-description-width: 585px;

  /* -------------------------------------------------------------------------
     5. BUTTONS
     ------------------------------------------------------------------------- */
  --button-width: 184px;
  --button-height: 34px;
  --button-letter-spacing: 0.035em;
  --button-glow: 0 0 22px rgba(200, 168, 106, 0.30);

  /* -------------------------------------------------------------------------
     6. TRUST / PRESENCE / ACCESS / CLARITY ROW
     ------------------------------------------------------------------------- */
  --trust-row-content-width: 1160px;
  --trust-row-top-space: 32px;
  --trust-row-bottom-space: 32px;
  --trust-item-gap: 16px;

  /* -------------------------------------------------------------------------
     7. STANDARD SECTION SPACING
     ------------------------------------------------------------------------- */
  --section-top-space: 112px;
  --section-bottom-space: 112px;
  --section-content-width: 1360px;
}

/* HEADER */
.layout-cinematic-motion .container.nav {
  width: min(var(--header-content-width), 100%);
  max-width: var(--header-content-width);
  min-height: var(--header-height);
  padding-inline: var(--header-side-padding);
}
.layout-cinematic-motion .nav nav {
  gap: var(--header-menu-gap);
  letter-spacing: var(--header-menu-letter-spacing);
}
.layout-cinematic-motion .language-switcher {
  display:flex;
  align-items:center;
  gap:var(--language-switch-gap);
  margin-left:clamp(12px,2vw,28px);
  color:rgba(255,255,255,.42);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
}
.layout-cinematic-motion .language-switcher button {
  appearance:none;
  border:0;
  padding:.35rem .25rem;
  background:transparent;
  color:rgba(255,255,255,.58);
  font:inherit;
  cursor:pointer;
  transition:color .25s ease,text-shadow .25s ease;
}
.layout-cinematic-motion .language-switcher button:hover,
.layout-cinematic-motion .language-switcher button:focus-visible,
.layout-cinematic-motion .language-switcher button.is-active {
  color:#ead69c;
  text-shadow:0 0 12px rgba(200,168,106,.32);
}
.layout-cinematic-motion .language-switcher button:focus-visible {
  outline:1px solid #c8a86a;
  outline-offset:3px;
}
.layout-cinematic-motion .nav-actions {
  display:flex;
  align-items:center;
  gap:clamp(.75rem,1.25vw,1.15rem);
}
.layout-cinematic-motion:not(.logo-hover-enabled) .brand .brand-name img {
  max-width: var(--header-logo-width) !important;
  max-height: var(--header-logo-height) !important;
}

/* Keeps the menu centred and the language immediately left of the CTA. */
@media (min-width: 1081px) {
  .layout-cinematic-motion .container.nav {
    position:relative;
    display:flex;
    align-items:center;
  }
  .layout-cinematic-motion .brand {
    flex:0 0 auto;
  }
  .layout-cinematic-motion .nav nav {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin:0 !important;
    white-space:nowrap;
  }
  .layout-cinematic-motion .nav-actions {
    margin-left:auto;
    flex:0 0 auto;
  }
  .layout-cinematic-motion .language-switcher {
    margin-left:0;
  }
  .layout-cinematic-motion .nav-cta {
    margin-left:0 !important;
  }
}

/* Clear persistent contact shortcut. */
.layout-cinematic-motion .floating-contact {
  width:auto;
  min-width:96px;
  height:44px;
  padding:0 1.05rem;
  border-radius:999px;
  color:#071421;
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  line-height:1;
  transform:none;
}
.layout-cinematic-motion .floating-contact:hover,
.layout-cinematic-motion .floating-contact:focus-visible {
  transform:none;
  box-shadow:var(--button-glow);
}
.layout-cinematic-motion .floating-contact:focus-visible {
  outline:2px solid #ead69c;
  outline-offset:3px;
}

/* HOMEPAGE */
.layout-cinematic-motion .hero-grid {
  width: min(
    var(--homepage-content-width),
    calc(100% - (var(--homepage-side-margin) * 2))
  );
  gap: var(--homepage-column-gap);
  padding-top: var(--homepage-top-space);
  padding-bottom: var(--homepage-bottom-space);
}
.layout-cinematic-motion .hero-brand-lockup {
  margin-bottom: var(--homepage-logo-bottom-gap);
}
.layout-cinematic-motion .hero-brand-lockup img {
  width: min(var(--homepage-logo-width), 100%);
}
.layout-cinematic-motion .hero-visual {
  min-height: var(--homepage-image-height);
}

/* TITLES */
.layout-cinematic-motion .hero h1 {
  font-size: clamp(3.7rem, 5.55vw, var(--homepage-title-size));
  letter-spacing: var(--main-title-letter-spacing);
  line-height: var(--main-title-line-height);
}
.layout-cinematic-motion section h2 {
  font-size: clamp(2.8rem, 5vw, var(--section-title-size));
  letter-spacing: var(--main-title-letter-spacing);
  line-height: var(--main-title-line-height);
}

/* TEXT */
.layout-cinematic-motion body {
  letter-spacing: var(--body-text-letter-spacing);
}
.layout-cinematic-motion .hero-lede {
  max-width: var(--homepage-description-width);
  line-height: var(--body-text-line-height);
}

/* BUTTONS */
.layout-cinematic-motion .hero-actions {
  grid-template-columns: repeat(2, var(--button-width));
}
.layout-cinematic-motion .hero-actions .button {
  width: var(--button-width) !important;
  min-width: var(--button-width) !important;
  max-width: var(--button-width) !important;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  letter-spacing: var(--button-letter-spacing);
}
.layout-cinematic-motion .button.gold:hover,
.layout-cinematic-motion .button.gold:focus-visible,
.layout-cinematic-motion .nav-cta:hover,
.layout-cinematic-motion .nav-cta:focus-visible {
  box-shadow: var(--button-glow) !important;
}

/* TRUST ROW */
.layout-cinematic-motion .trust-strip {
  padding-top: var(--trust-row-top-space) !important;
  padding-bottom: var(--trust-row-bottom-space) !important;
}
.layout-cinematic-motion .trust-grid {
  width: min(var(--trust-row-content-width), calc(100% - 48px));
}
.layout-cinematic-motion .trust-item,
.layout-cinematic-motion .trust-item:last-child {
  gap: var(--trust-item-gap);
}

/* STANDARD SECTIONS */
.layout-cinematic-motion main > section:not(.hero):not(.trust-strip) {
  padding-top: var(--section-top-space);
  padding-bottom: var(--section-bottom-space);
}
.layout-cinematic-motion main > section > .container {
  max-width: var(--section-content-width);
}

/* TABLET */
@media (max-width: 980px) {
  :root {
    --homepage-side-margin: 24px;
    --homepage-column-gap: 80px;
    --homepage-top-space: 128px;
    --homepage-bottom-space: 96px;
    --homepage-title-size: 5.4rem;
    --section-title-size: 4.5rem;
  }
  .layout-cinematic-motion .nav-actions {
    margin-left:0;
  }
  .layout-cinematic-motion .language-switcher {
    margin-left:0;
  }

  /* Mobile/tablet header: keep every control inside the viewport. */
  .layout-cinematic-motion .container.nav {
    display:flex;
    align-items:center;
    width:100%;
    max-width:none;
    gap:.75rem;
    overflow:visible;
  }
  .layout-cinematic-motion .brand {
    order:1;
    flex:0 0 auto;
  }
  .layout-cinematic-motion .nav-actions {
    order:2;
    flex:0 0 auto;
    margin-left:auto !important;
  }
  .layout-cinematic-motion .language-switcher {
    margin:0 !important;
    white-space:nowrap;
  }
  .layout-cinematic-motion .menu-button {
    order:3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    margin:0;
    white-space:nowrap;
  }
  .layout-cinematic-motion .nav nav {
    position:absolute !important;
    order:4;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:calc(100vh - var(--header-height));
    margin:0 !important;
    padding:1rem var(--header-side-padding) 1.25rem !important;
    transform:none !important;
    overflow-y:auto;
    box-sizing:border-box;
    background:rgba(6,17,29,.98);
    border-top:1px solid rgba(200,168,106,.16);
    box-shadow:0 18px 35px rgba(0,0,0,.28);
  }
  .layout-cinematic-motion .nav nav.open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
  }
  .layout-cinematic-motion .nav nav a {
    width:100% !important;
    height:auto !important;
    min-height:42px !important;
    padding:.25rem .8rem !important;
    line-height:42px !important;
    text-align:left;
  }
}

/* MOBILE */
@media (max-width: 650px) {
  :root {
    --header-height: 76px;
    --header-side-padding: 16px;
    --header-logo-width: 165px;
    --homepage-side-margin: 16px;
    --homepage-column-gap: 56px;
    --homepage-top-space: 104px;
    --homepage-bottom-space: 72px;
    --homepage-logo-width: 430px;
    --homepage-logo-bottom-gap: 28px;
    --homepage-image-height: 390px;
    --homepage-title-size: 4.65rem;
    --section-title-size: 3.8rem;
    --section-top-space: 72px;
    --section-bottom-space: 72px;
  }

  .layout-cinematic-motion .hero-actions {
    grid-template-columns: 1fr;
  }
  .layout-cinematic-motion .hero-actions .button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .layout-cinematic-motion .floating-contact {
    right:1rem;
    bottom:1rem;
    min-width:88px;
    height:44px;
    padding-inline:.9rem;
  }

  /* Keep every homepage trust point on one consistent mobile alignment. */
  .layout-cinematic-motion .trust-grid {
    width:min(320px,calc(100% - 2rem));
    margin-inline:auto;
  }
  .layout-cinematic-motion .trust-item,
  .layout-cinematic-motion .trust-item:last-child {
    width:100%;
    max-width:none;
    min-height:0;
    margin:0 !important;
    padding:.55rem 0 !important;
    grid-template-columns:52px minmax(0,1fr);
    justify-content:stretch;
    transform:none !important;
  }
  .layout-cinematic-motion .trust-item > div {
    width:auto;
    max-width:none;
    text-align:left;
  }

  /* Compact Why InPlace cards while preserving all of their information. */
  .layout-cinematic-motion .difference {
    padding-top:var(--section-top-space) !important;
    padding-bottom:var(--section-bottom-space) !important;
  }
  .layout-cinematic-motion .difference-grid {
    gap:2rem;
  }
  .layout-cinematic-motion .difference .benefits {
    grid-template-columns:1fr;
    gap:0;
    margin-top:2rem;
  }
  .layout-cinematic-motion .difference .benefit {
    min-height:0 !important;
    padding:1.05rem 1rem !important;
  }
  .layout-cinematic-motion .difference .benefit h3 {
    margin:0 0 .35rem;
  }
  .layout-cinematic-motion .difference .benefit p {
    margin:0;
    line-height:1.45;
  }
  .layout-cinematic-motion .difference .outcome-strip {
    grid-template-columns:1fr;
    margin-top:2rem;
  }
  .layout-cinematic-motion .difference .outcome-strip article {
    min-height:0 !important;
    padding:1rem !important;
    display:grid;
    grid-template-columns:2rem minmax(0,1fr);
    column-gap:.75rem;
    align-items:start;
  }
  .layout-cinematic-motion .difference .outcome-strip b {
    grid-column:1;
    grid-row:1 / span 2;
  }
  .layout-cinematic-motion .difference .outcome-strip h3 {
    grid-column:2;
    grid-row:1;
    margin:0 0 .3rem !important;
  }
  .layout-cinematic-motion .difference .outcome-strip p {
    grid-column:2;
    grid-row:2;
    margin:0;
  }
}