/* =========================================================
   COL RETREAT
   GLOBAL DESIGN SYSTEM
   colretreat.com
   ========================================================= */

/* =========================================================
   1. BRAND TOKENS
   ========================================================= */

:root {
  /* Brand colors */
  --cr-deep-navy: #051B2D;
  --cr-midnight-navy: #08263E;

  --cr-champagne-gold: #B89559;
  --cr-warm-gold: #D4B17C;

  --cr-warm-ivory: #F8F5EF;
  --cr-soft-sand: #EEE7DD;
  --cr-taupe: #D6D0C0;

  --cr-charcoal: #232333;
  --cr-white: #FFFFFF;

  /* Semantic colors */
  --cr-bg: var(--cr-warm-ivory);
  --cr-surface: var(--cr-white);
  --cr-surface-soft: var(--cr-soft-sand);

  --cr-text: var(--cr-charcoal);
  --cr-text-heading: var(--cr-deep-navy);
  --cr-text-muted: #6F6B65;

  --cr-text-on-dark: var(--cr-warm-ivory);
  --cr-text-muted-on-dark: rgba(248, 245, 239, 0.72);

  --cr-border: rgba(5, 27, 45, 0.13);
  --cr-border-dark: rgba(255, 255, 255, 0.13);
  --cr-border-gold: rgba(184, 149, 89, 0.55);

  /* Typography */
  --cr-font-display:
    "Playfair Display",
    Georgia,
    "Times New Roman",
    serif;

  --cr-font-body:
    "Inter",
    Arial,
    Helvetica,
    sans-serif;

  --cr-weight-light: 300;
  --cr-weight-regular: 400;
  --cr-weight-medium: 500;
  --cr-weight-semibold: 600;
  --cr-weight-bold: 700;

  /* Type scale */
  --cr-text-xs: 0.75rem;
  --cr-text-sm: 0.875rem;
  --cr-text-base: 1rem;
  --cr-text-lg: 1.125rem;
  --cr-text-xl: 1.375rem;
  --cr-text-2xl: 1.75rem;

  --cr-display:
    clamp(3.25rem, 6vw, 6.5rem);

  --cr-section-title:
    clamp(2.5rem, 4.5vw, 4.75rem);

  /* Layout */
  --cr-container: 1280px;
  --cr-container-wide: 1480px;

  --cr-gutter:
    clamp(1.25rem, 4vw, 4rem);

  /* Spacing */
  --cr-space-1: 0.25rem;
  --cr-space-2: 0.5rem;
  --cr-space-3: 0.75rem;
  --cr-space-4: 1rem;
  --cr-space-5: 1.5rem;
  --cr-space-6: 2rem;
  --cr-space-7: 3rem;
  --cr-space-8: 4rem;
  --cr-space-9: 6rem;
  --cr-space-10: 8rem;

  /* Radius */
  --cr-radius-sm: 4px;
  --cr-radius-md: 8px;
  --cr-radius-lg: 14px;
  --cr-radius-xl: 22px;
  --cr-radius-pill: 999px;

  /* Shadows */
  --cr-shadow-sm:
    0 8px 24px rgba(5, 27, 45, 0.07);

  --cr-shadow-md:
    0 18px 50px rgba(5, 27, 45, 0.12);

  --cr-shadow-lg:
    0 28px 80px rgba(5, 27, 45, 0.18);

  /* Motion */
  --cr-transition-fast: 180ms;
  --cr-transition: 320ms;

  --cr-ease:
    cubic-bezier(.2, .7, .2, 1);
}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    var(--cr-bg);

  color:
    var(--cr-text);

  font-family:
    var(--cr-font-body);

  font-size:
    var(--cr-text-base);

  line-height: 1.65;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
}

ul,
ol {
  margin-top: 0;
}

::selection {
  background:
    var(--cr-champagne-gold);

  color:
    var(--cr-deep-navy);
}


/* =========================================================
   3. ACCESSIBILITY
   ========================================================= */

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;

  padding:
    0.75rem 1rem;

  background:
    var(--cr-white);

  color:
    var(--cr-deep-navy);

  transform:
    translateY(-150%);
}

.skip-link:focus {
  transform:
    translateY(0);
}

:focus-visible {
  outline:
    2px solid
    var(--cr-champagne-gold);

  outline-offset:
    4px;
}


/* =========================================================
   4. GLOBAL CONTAINERS
   ========================================================= */

.cr-container {
  width:
    min(
      calc(
        100% - (var(--cr-gutter) * 2)
      ),
      var(--cr-container)
    );

  margin-inline:
    auto;
}

.cr-container-wide {
  width:
    min(
      calc(
        100% - (var(--cr-gutter) * 2)
      ),
      var(--cr-container-wide)
    );

  margin-inline:
    auto;
}


/* =========================================================
   5. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top:
    0;

  color:
    var(--cr-text-heading);

  font-family:
    var(--cr-font-display);

  font-weight:
    var(--cr-weight-regular);

  line-height:
    1.06;

  text-wrap:
    balance;
}

h1 {
  font-size:
    var(--cr-display);
}

h2 {
  font-size:
    var(--cr-section-title);
}

h3 {
  font-size:
    clamp(1.5rem, 2.3vw, 2.4rem);
}

p {
  margin-top:
    0;
}

.cr-eyebrow {
  margin-bottom:
    1rem;

  color:
    var(--cr-champagne-gold);

  font-size:
    0.74rem;

  font-weight:
    var(--cr-weight-semibold);

  letter-spacing:
    0.17em;

  text-transform:
    uppercase;
}

.cr-display-accent {
  color:
    var(--cr-champagne-gold);

  font-family:
    var(--cr-font-display);

  font-style:
    italic;

  font-weight:
    var(--cr-weight-regular);
}

.cr-muted {
  color:
    var(--cr-text-muted);
}

.cr-copy {
  max-width:
    68ch;
}

.cr-copy-narrow {
  max-width:
    52ch;
}


/* =========================================================
   6. GLOBAL SECTIONS
   ========================================================= */

.cr-section {
  padding-block:
    clamp(5rem, 8vw, 8rem);
}

.cr-section-tight {
  padding-block:
    clamp(3.5rem, 6vw, 5.5rem);
}

.cr-section-large {
  padding-block:
    clamp(6.5rem, 10vw, 10rem);
}

.cr-section-dark {
  background:
    var(--cr-deep-navy);

  color:
    var(--cr-text-on-dark);
}

.cr-section-dark h1,
.cr-section-dark h2,
.cr-section-dark h3,
.cr-section-dark h4 {
  color:
    var(--cr-white);
}

.cr-section-ivory {
  background:
    var(--cr-warm-ivory);
}

.cr-section-sand {
  background:
    var(--cr-soft-sand);
}

.cr-section-white {
  background:
    var(--cr-white);
}


/* =========================================================
   7. GOLD DIVIDER
   ========================================================= */

.cr-gold-line {
  width:
    58px;

  height:
    1px;

  margin-block:
    1.5rem;

  border:
    0;

  background:
    var(--cr-champagne-gold);
}


/* =========================================================
   8. BUTTONS
   ========================================================= */

.cr-btn {
  display:
    inline-flex;

  min-height:
    50px;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.6rem;

  padding:
    0 1.75rem;

  border:
    1px solid transparent;

  border-radius:
    var(--cr-radius-sm);

  font-family:
    var(--cr-font-body);

  font-size:
    0.75rem;

  font-weight:
    var(--cr-weight-semibold);

  letter-spacing:
    0.1em;

  line-height:
    1;

  text-transform:
    uppercase;

  transition:
    background
    var(--cr-transition-fast)
    var(--cr-ease),
    color
    var(--cr-transition-fast)
    var(--cr-ease),
    border-color
    var(--cr-transition-fast)
    var(--cr-ease),
    transform
    var(--cr-transition-fast)
    var(--cr-ease);
}

.cr-btn:hover {
  transform:
    translateY(-2px);
}

.cr-btn-primary {
  border-color:
    var(--cr-champagne-gold);

  background:
    var(--cr-champagne-gold);

  color:
    var(--cr-deep-navy);
}

.cr-btn-primary:hover {
  border-color:
    var(--cr-warm-gold);

  background:
    var(--cr-warm-gold);
}

.cr-btn-dark {
  border-color:
    var(--cr-deep-navy);

  background:
    var(--cr-deep-navy);

  color:
    var(--cr-white);
}

.cr-btn-outline {
  border-color:
    var(--cr-border-gold);

  background:
    transparent;

  color:
    var(--cr-deep-navy);
}

.cr-section-dark
.cr-btn-outline {
  color:
    var(--cr-white);
}

.cr-btn-outline:hover {
  border-color:
    var(--cr-champagne-gold);

  color:
    var(--cr-champagne-gold);
}


/* =========================================================
   9. GLOBAL CARDS
   ========================================================= */

.cr-card {
  overflow:
    hidden;

  border:
    1px solid
    var(--cr-border);

  border-radius:
    var(--cr-radius-md);

  background:
    var(--cr-white);

  box-shadow:
    var(--cr-shadow-sm);

  transition:
    transform
    var(--cr-transition)
    var(--cr-ease),
    box-shadow
    var(--cr-transition)
    var(--cr-ease);
}

.cr-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    var(--cr-shadow-md);
}

.cr-card-body {
  padding:
    clamp(1.5rem, 3vw, 2.25rem);
}


/* =========================================================
   10. IMAGES
   ========================================================= */

.cr-media {
  position:
    relative;

  overflow:
    hidden;

  background:
    var(--cr-soft-sand);
}

.cr-media img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.cr-media-landscape {
  aspect-ratio:
    16 / 10;
}

.cr-media-editorial {
  aspect-ratio:
    4 / 5;
}

.cr-media-square {
  aspect-ratio:
    1;
}


/* =========================================================
   11. HEADER
   ========================================================= */

.site-header {
  position:
    relative;

  z-index:
    100;

  width:
    100%;

  border-bottom:
    1px solid
    var(--cr-border-dark);

  background:
    var(--cr-deep-navy);

  color:
    var(--cr-white);
}

.site-header.is-overlay {
  position:
    absolute;

  top:
    0;

  left:
    0;

  background:
    transparent;
}

.site-header-inner {
  min-height:
    88px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    2rem;
}


/* =========================================================
   12. BRAND / LOGO
   ========================================================= */

.site-brand {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    0.9rem;

  flex-shrink:
    0;
}

.site-brand-mark {
  width:
    52px;

  height:
    52px;

  flex:
    0 0 52px;

  object-fit:
    contain;
}

.site-brand-copy {
  display:
    flex;

  flex-direction:
    column;

  line-height:
    1;
}

.site-brand-name {
  color:
    var(--cr-white);

  font-family:
    var(--cr-font-display);

  font-size:
    1.05rem;

  letter-spacing:
    0.14em;
}

.site-brand-tag {
  margin-top:
    0.45rem;

  color:
    var(--cr-champagne-gold);

  font-size:
    0.49rem;

  font-weight:
    var(--cr-weight-medium);

  letter-spacing:
    0.23em;

  text-transform:
    uppercase;
}


/* =========================================================
   13. DESKTOP NAVIGATION
   ========================================================= */

.site-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    clamp(1.25rem, 2vw, 2rem);
}

.site-nav a {
  position:
    relative;

  color:
    rgba(255, 255, 255, 0.88);

  font-size:
    0.68rem;

  font-weight:
    var(--cr-weight-medium);

  letter-spacing:
    0.095em;

  text-transform:
    uppercase;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color:
    var(--cr-champagne-gold);
}

.site-nav-language {
  margin-left:
    0.5rem;

  padding-left:
    1.25rem;

  border-left:
    1px solid
    rgba(255, 255, 255, 0.25);
}


/* =========================================================
   14. MOBILE MENU BUTTON
   ========================================================= */

.site-menu-toggle {
  display:
    none;

  width:
    44px;

  height:
    44px;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.22);

  border-radius:
    var(--cr-radius-sm);

  background:
    transparent;

  color:
    var(--cr-white);
}


/* =========================================================
   15. FORMS
   ========================================================= */

.cr-field {
  margin-bottom:
    1.25rem;
}

.cr-label {
  display:
    block;

  margin-bottom:
    0.5rem;

  color:
    var(--cr-deep-navy);

  font-size:
    0.72rem;

  font-weight:
    var(--cr-weight-semibold);

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}

.cr-input,
.cr-select,
.cr-textarea {
  width:
    100%;

  border:
    1px solid
    var(--cr-border);

  border-radius:
    var(--cr-radius-md);

  outline:
    none;

  background:
    var(--cr-white);

  color:
    var(--cr-charcoal);

  transition:
    border-color
    var(--cr-transition-fast)
    ease,
    box-shadow
    var(--cr-transition-fast)
    ease;
}

.cr-input,
.cr-select {
  min-height:
    52px;

  padding-inline:
    1rem;
}

.cr-textarea {
  min-height:
    150px;

  padding:
    1rem;

  resize:
    vertical;
}

.cr-input:focus,
.cr-select:focus,
.cr-textarea:focus {
  border-color:
    var(--cr-champagne-gold);

  box-shadow:
    0 0 0 3px
    rgba(184, 149, 89, 0.13);
}


/* =========================================================
   16. FOOTER
   ========================================================= */

.site-footer {
  padding:
    5rem 0 2rem;

  background:
    #031521;

  color:
    var(--cr-white);
}

.site-footer-grid {
  display:
    grid;

  grid-template-columns:
    1.4fr repeat(3, 1fr);

  gap:
    clamp(2.5rem, 5vw, 5rem);
}

.site-footer-brand {
  max-width:
    360px;
}

.site-footer-title {
  margin-bottom:
    1rem;

  color:
    var(--cr-white);

  font-family:
    var(--cr-font-display);

  font-size:
    1.75rem;

  font-weight:
    var(--cr-weight-regular);

  letter-spacing:
    0.08em;
}

.site-footer-copy {
  color:
    rgba(255, 255, 255, 0.58);

  font-size:
    0.85rem;
}

.site-footer-heading {
  margin-bottom:
    1.25rem;

  color:
    var(--cr-champagne-gold);

  font-size:
    0.7rem;

  font-weight:
    var(--cr-weight-semibold);

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}

.site-footer-links {
  display:
    grid;

  gap:
    0.7rem;
}

.site-footer-links a {
  color:
    rgba(255, 255, 255, 0.63);

  font-size:
    0.82rem;
}

.site-footer-links a:hover {
  color:
    var(--cr-champagne-gold);
}

.site-footer-bottom {
  margin-top:
    4.5rem;

  padding-top:
    1.5rem;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    1.5rem;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.1);

  color:
    rgba(255, 255, 255, 0.4);

  font-size:
    0.68rem;
}


/* =========================================================
   17. BREADCRUMBS
   ========================================================= */

.cr-breadcrumbs {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    0.5rem;

  margin-bottom:
    2rem;

  color:
    var(--cr-text-muted);

  font-size:
    0.75rem;
}

.cr-breadcrumbs a:hover {
  color:
    var(--cr-champagne-gold);
}


/* =========================================================
   18. RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .site-nav {
    display:
      none;
  }

  .site-menu-toggle {
    display:
      inline-flex;
  }

  .site-footer-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }
}


@media (max-width: 680px) {

  :root {
    --cr-gutter:
      1.25rem;
  }

  .site-header-inner {
    min-height:
      76px;
  }

  .site-brand-mark {
    width:
      44px;

    height:
      44px;

    flex-basis:
      44px;
  }

  .site-brand-name {
    font-size:
      0.92rem;
  }

  .site-brand-tag {
    font-size:
      0.42rem;
  }

  .site-footer-grid {
    grid-template-columns:
      1fr;
  }

  .site-footer-bottom {
    flex-direction:
      column;

    align-items:
      flex-start;
  }
}


/* =========================================================
   19. REDUCED MOTION
   ========================================================= */

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

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}