/* =========================================================
   ONEETSAKO — PAGES DESIGN SYSTEM
   ---------------------------------------------------------
   Fully fluid
   Phone-first
   Responsive across all screen sizes
   Centered page content
   Theme-aware
   Hero/footer text protected
   ========================================================= */


/* =========================================================
   01. ROOT — DESIGN SYSTEM
   ========================================================= */

:root {

  /* -------------------------------------------------------
     PRIMARY FONT
     ------------------------------------------------------- */

  --font-main:
    "Tempus Sans ITC",
    sans-serif;


  /* -------------------------------------------------------
     BRAND COLORS
     ------------------------------------------------------- */

  --accent:
    #2c4c3b;

  --accent-light:
    #aadf8e;

  --accent-hover:
    #c7f5ac;


  /* -------------------------------------------------------
     LIGHT THEME COLORS
     ------------------------------------------------------- */

  --bg-color:
    #ece5d7;

  --bg-secondary:
    #e3dbc9;

  --text-main:
    #24201b;

  --text-muted:
    #4f453a;

  --border-color:
    rgba(
      44,
      76,
      59,
      0.12
    );


  /* -------------------------------------------------------
     GENERAL TRANSITION
     ------------------------------------------------------- */

  --transition-speed:
    0.35s;


  /* =======================================================
     FLUID PAGE WIDTH
     -------------------------------------------------------
     Controls horizontal breathing room.

     Small phones:
       smaller spacing

     Large screens:
       larger spacing
     ======================================================= */

  --page-space:
    clamp(
      1rem,
      4vw,
      3.5rem
    );


  /* =======================================================
     FLUID SPACING SYSTEM
     ======================================================= */

  --space-xs:
    clamp(
      0.75rem,
      1.5vw,
      1.25rem
    );

  --space-small:
    clamp(
      1.5rem,
      3vw,
      3rem
    );

  --space-medium:
    clamp(
      2.5rem,
      6vw,
      6rem
    );

  --space-large:
    clamp(
      4rem,
      9vw,
      9rem
    );

  --space-massive:
    clamp(
      6rem,
      14vw,
      14rem
    );


  /* =======================================================
     FLUID BODY TYPOGRAPHY
     ======================================================= */

  --body-size:
    clamp(
      1rem,
      1.35vw,
      1.18rem
    );

  --body-large:
    clamp(
      1.08rem,
      1.5vw,
      1.35rem
    );


  /* =======================================================
     FLUID HEADING TYPOGRAPHY
     ======================================================= */

  --heading-h1:
    clamp(
      1.35rem,
      2.4vw,
      2.5rem
    );

  --heading-h2:
    clamp(
      1.5rem,
      2.7vw,
      2.6rem
    );

  --heading-h3:
    clamp(
      1.2rem,
      1.8vw,
      1.7rem
    );


  /* =======================================================
     FLUID NAVIGATION DIMENSIONS
     ======================================================= */

  --nav-top:
    clamp(
      0.75rem,
      2vw,
      2rem
    );

  --nav-side:
    clamp(
      1rem,
      3vw,
      2.5rem
    );

  --nav-height:
    clamp(
      3.4rem,
      6vw,
      5rem
    );


  /* =======================================================
     FLUID HERO HEIGHT
     ======================================================= */

  --hero-height:
    clamp(
      420px,
      60vh,
      760px
    );
}


/* =========================================================
   02. GLOBAL RESET
   ---------------------------------------------------------
   Creates predictable sizing across browsers.
   ========================================================= */

*,
*::before,
*::after {

  box-sizing:
    border-box;
}


/* =========================================================
   03. HTML BASE
   ========================================================= */

html {

  width:
    100%;

  min-height:
    100%;

  margin:
    0;

  padding:
    0;

  overflow-x:
    hidden;

  scroll-behavior:
    smooth;

  -webkit-text-size-adjust:
    100%;
}


/* =========================================================
   04. BODY BASE
   ========================================================= */

body {

  width:
    100%;

  min-height:
    100vh;

  margin:
    0;

  padding:
    0;

  overflow-x:
    hidden;

  font-family:
    var(--font-main);

  font-size:
    var(--body-size);

  font-weight:
    400;

  line-height:
    1.85;

  background:
    var(--bg-color);

  color:
    var(--text-main);

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;

  text-rendering:
    optimizeLegibility;

  transition:
    background-color
    var(--transition-speed)
    ease,

    color
    var(--transition-speed)
    ease;
}


/* =========================================================
   05. GLOBAL TEXT SAFETY
   ---------------------------------------------------------
   Prevents long words and URLs from breaking mobile
   layouts.
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a {

  max-width:
    100%;

  overflow-wrap:
    anywhere;

  word-break:
    normal;
}


/* =========================================================
   06. GLOBAL MEDIA SAFETY
   ========================================================= */

img,
svg,
video {

  display:
    block;

  max-width:
    100%;

  height:
    auto;
}


/* =========================================================
   07. THEME BREATH ANIMATION
   ========================================================= */

@keyframes themeBreath {

  0%,
  100% {

    transform:
      translateY(0)
      scale(1);

    opacity:
      0.85;
  }


  50% {

    transform:
      translateY(-4px)
      scale(1.12);

    opacity:
      1;
  }
}


/* =========================================================
   08. DARK MODE — COLOR VARIABLES
   ========================================================= */

body.dark {

  --bg-color:
    #111111;

  --bg-secondary:
    #1a1a1a;

  --text-main:
    #f5f5f5;

  --text-muted:
    #b0b0b0;

  --border-color:
    rgba(
      255,
      255,
      255,
      0.08
    );
}


/* ---------------------------------------------------------
   DARK MODE LOGO
   --------------------------------------------------------- */

body.dark .logo {

  color:
    #ffffff;
}


/* =========================================================
   09. HERO — MAIN STRUCTURE
   ---------------------------------------------------------
   The hero remains independently centered.

   Hero paragraph and links are deliberately protected
   from the main theme paragraph system.
   ========================================================= */

.hero {

  position:
    relative;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  min-height:
    var(--hero-height);

  height:
    clamp(
      420px,
      60vh,
      760px
    );

  padding:
    clamp(
      7rem,
      15vw,
      12rem
    )
    var(--page-space)
    clamp(
      4rem,
      9vw,
      8rem
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  text-align:
    center;

  color:
    #ffffff;

  background:
    linear-gradient(
      rgba(
        0,
        0,
        0,
        0.5
      ),
      rgba(
        0,
        0,
        0,
        0.5
      )
    ),
    var(--hero-image)
    no-repeat
    center center /
    cover;

  overflow:
    hidden;
}


/* =========================================================
   10. HERO CONTENT WRAPPER
   ========================================================= */

.hero-content {

  width:
    min(
      100%,
      900px
    );

  max-width:
    900px;

  min-width:
    0;

  margin:
    0 auto;

  animation:
    fadeInDown
    1s
    ease-out;

  transition:
    transform
    0.6s
    ease;
}


/* =========================================================
   11. HERO TITLE
   ========================================================= */

.hero h1 {

  display:
    inline-block;

  width:
    100%;

  margin:
    0
    0
    clamp(
      1.5rem,
      3vw,
      2rem
    );

  padding:
    0;

  font-family:
    var(--font-main);

  font-size:
    var(--heading-h1);

  line-height:
    1.15;

  font-weight:
    400;

  letter-spacing:
    clamp(
      0.02em,
      0.12vw,
      0.08em
    );

  color:
    #ffffff;

  cursor:
    default;

  position:
    relative;

  text-align:
    center;

  animation:
    heroEntrance
    4s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    )
    forwards;

  opacity:
    0;
}


/* =========================================================
   12. HERO ENTRANCE ANIMATION
   ========================================================= */

@keyframes heroEntrance {

  from {

    opacity:
      0;

    transform:
      translateY(30px);

    filter:
      blur(4px);
  }


  to {

    opacity:
      1;

    transform:
      translateY(0);

    filter:
      blur(0);
  }
}


/* =========================================================
   13. HERO TITLE HOVER
   ========================================================= */

.hero-content:hover h1 {

  color:
    var(--accent-light);

  transform:
    translateY(
      clamp(
        -10px,
        -0.7vw,
        -4px
      )
    )
    scale(
      clamp(
        1.01,
        1.025,
        1.06
      )
    );

  text-shadow:
    1px 1px 0 #2a2a2a,
    -1px -1px 0 #4a4a4a,
    0 0 12px
      rgba(
        170,
        223,
        142,
        0.55
      ),
    0 8px 25px
      rgba(
        0,
        0,
        0,
        0.45
      );
}


/* =========================================================
   14. HERO DESCRIPTION
   ---------------------------------------------------------
   ALWAYS WHITE.
   ========================================================= */

.hero p {

  width:
    min(
      100%,
      720px
    );

  max-width:
    720px;

  margin:
    0 auto;

  font-size:
    clamp(
      1.02rem,
      1.45vw,
      1.3rem
    );

  line-height:
    1.8;

  font-weight:
    400;

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

  letter-spacing:
    clamp(
      0.01em,
      0.025vw,
      0.025em
    );

  text-align:
    center;

  transition:
    transform
    0.8s
    cubic-bezier(
      0.19,
      1,
      0.22,
      1
    ),

    color
    0.5s
    ease,

    letter-spacing
    0.5s
    ease;
}


/* =========================================================
   15. HERO PARAGRAPH HOVER
   ========================================================= */

.hero:hover p {

  color:
    #f2ffe8;

  transform:
    translateY(-2px);

  letter-spacing:
    0.025em;

  text-shadow:
    0 0 6px
    rgba(
      220,
      255,
      200,
      0.18
    );
}


/* =========================================================
   16. MAIN PAGE CONTENT
   ---------------------------------------------------------
   TRUE CENTERED FLUID CONTENT COLUMN.

   The hero is full-width.

   Everything underneath lives inside this centered
   readable column.
   ========================================================= */

main {

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  margin:
    0 auto;

  padding:
    0;
}


/* =========================================================
   17. MAIN CONTENT CONTAINER
   ---------------------------------------------------------
   PHONE-FIRST + FLUID + CENTERED.

   Uses the existing clamp() system rather than fixed
   breakpoints.
   ========================================================= */

.content-container {

  width:
    min(
      calc(
        100% -
        (
          var(--page-space) * 2
        )
      ),
      1100px
    );

  max-width:
    1100px;

  min-width:
    0;

  margin:
    var(--space-medium)
    auto
    var(--space-large);

  padding:
    0;

  display:
    block;

  box-sizing:
    border-box;
}


/* =========================================================
   18. DIRECT CONTENT CHILDREN
   ---------------------------------------------------------
   Makes sure every major content block shares the same
   centered alignment.
   ========================================================= */

.content-container > * {

  max-width:
    100%;

  min-width:
    0;

  margin-left:
    auto;

  margin-right:
    auto;
}


/* =========================================================
   19. CULTURE SECTION
   ---------------------------------------------------------
   Each section fills the centered content column.
   ========================================================= */

.culture-section {

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  margin:
    0
    auto
    var(--space-large);

  padding:
    var(--space-small)
    0
    var(--space-medium);

  border-bottom:
    1px solid
    var(--border-color);

  will-change:
    transform,
    opacity;

  opacity:
    1 !important;

  transform:
    none !important;

  overflow:
    visible;

  transition:
    opacity
    0.9s
    cubic-bezier(
      0.215,
      0.61,
      0.355,
      1
    ),

    transform
    0.9s
    cubic-bezier(
      0.215,
      0.61,
      0.355,
      1
    );
}


/* =========================================================
   20. JAVASCRIPT-READY CULTURE STATE
   ========================================================= */

body.js-ready
.culture-section {

  opacity:
    1 !important;

  transform:
    none !important;
}


/* =========================================================
   21. LAST CULTURE SECTION
   ========================================================= */

.culture-section:last-of-type {

  border-bottom:
    none;

  margin-bottom:
    var(--space-medium);
}


/* =========================================================
   22. VISIBLE CULTURE SECTION
   ========================================================= */

.culture-section.is-visible {

  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   23. CULTURE HEADINGS
   ========================================================= */

.culture-section h2 {

  width:
    100%;

  margin:
    0
    0
    clamp(
      1.75rem,
      3vw,
      2.5rem
    );

  font-family:
    var(--font-main);

  font-size:
    var(--heading-h2);

  line-height:
    1.2;

  text-align:
    left;

  position:
    relative;

  display:
    inline-block;

  cursor:
    pointer;

  color:
    var(--accent-light);

  font-weight:
    400;

  text-shadow:
    1px 1px 0 #2a2a2a,
    -1px -1px 0 #4a4a4a,
    0 1px 1px
      rgba(
        255,
        255,
        255,
        0.25
      ),
    2px 2px 4px
      rgba(
        0,
        0,
        0,
        0.55
      ),
    0 0 6px
      rgba(
        170,
        223,
        142,
        0.35
      );

  transition:
    color
    var(--transition-speed)
    ease,

    text-shadow
    0.3s
    ease;
}


/* =========================================================
   24. DARK MODE CULTURE HEADINGS
   ========================================================= */

body.dark
.culture-section h2 {

  color:
    var(--accent-light);

  text-shadow:
    1px 1px 0 #111,
    -1px -1px 0 #222,
    0 1px 1px
      rgba(
        255,
        255,
        255,
        0.15
      ),
    2px 2px 5px
      rgba(
        0,
        0,
        0,
        0.75
      ),
    0 0 7px
      rgba(
        170,
        223,
        142,
        0.45
      );
}


/* =========================================================
   25. CULTURE HEADING UNDERLINE
   ========================================================= */

.culture-section h2::after {

  content:
    "";

  position:
    absolute;

  width:
    100%;

  height:
    2px;

  bottom:
    -6px;

  left:
    0;

  background:
    var(--accent);

  transform:
    scaleX(0);

  transform-origin:
    bottom right;

  transition:
    transform
    0.4s
    cubic-bezier(
      0.86,
      0,
      0.07,
      1
    );
}


/* =========================================================
   26. DARK MODE HEADING UNDERLINE
   ========================================================= */

body.dark
.culture-section h2::after {

  background:
    var(--accent-light);
}


/* =========================================================
   27. CULTURE HEADING HOVER
   ========================================================= */

.culture-section h2:hover {

  color:
    var(--accent);

  text-shadow:
    1px 1px 0 #2a2a2a,
    -1px -1px 0 #4a4a4a,
    0 1px 1px
      rgba(
        255,
        255,
        255,
        0.3
      ),
    2px 2px 5px
      rgba(
        0,
        0,
        0,
        0.6
      ),
    0 0 8px
      rgba(
        44,
        76,
        59,
        0.45
      );
}


/* =========================================================
   28. CULTURE PARAGRAPHS
   ---------------------------------------------------------
   Base paragraph system.

   Final theme system below determines black/white.
   ========================================================= */

.culture-section p {

  width:
    100%;

  max-width:
    100%;

  margin:
    0
    0
    clamp(
      1.75rem,
      3vw,
      2.5rem
    );

  font-size:
    var(--body-large);

  line-height:
    1.9;

  color:
    #433a31;

  font-weight:
    400;

  text-align:
    left;

  letter-spacing:
    clamp(
      0.005em,
      0.012vw,
      0.02em
    );

  opacity:
    1 !important;

  transform:
    none !important;

  overflow-wrap:
    anywhere;

  transition:
    opacity
    0.9s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),

    transform
    0.9s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}


/* =========================================================
   29. PARAGRAPH REVEAL
   ========================================================= */

.culture-section.is-visible p {

  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   30. PARAGRAPH STAGGERING
   ========================================================= */

.culture-section.is-visible
p:nth-of-type(1) {

  transition-delay:
    0.1s;
}


.culture-section.is-visible
p:nth-of-type(2) {

  transition-delay:
    0.2s;
}


.culture-section.is-visible
p:nth-of-type(3) {

  transition-delay:
    0.3s;
}


.culture-section.is-visible
p:nth-of-type(4) {

  transition-delay:
    0.4s;
}


/* =========================================================
   31. IMAGE CONTAINER
   ---------------------------------------------------------
   Main cultural image frame.
   ========================================================= */

.image-container {

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  margin:
    0
    auto
    clamp(
      2rem,
      4vw,
      3rem
    );

  padding:
    0;

  border-radius:
    clamp(
      10px,
      1.5vw,
      20px
    );

  overflow:
    hidden;

  box-shadow:
    0 12px 28px
    rgba(
      0,
      0,
      0,
      0.06
    );

  background:
    rgba(
      0,
      0,
      0,
      0.03
    );
}


/* =========================================================
   32. CULTURE IMAGES
   ---------------------------------------------------------
   MORE OF THE ORIGINAL IMAGE IS VISIBLE.

   Instead of forcing a very tall fixed crop, the image
   uses a balanced 16:9 fluid frame.

   The width remains completely responsive.
   ========================================================= */

.culture-section img {

  width:
    100%;

  max-width:
    100%;

  height:
    auto;

  aspect-ratio:
    16 / 9;

  object-fit:
    cover;

  object-position:
    center center;

  display:
    block;

  margin:
    0 auto;

  transform:
    scale(1.025);

  transition:
    transform
    1.2s
    ease;
}


/* =========================================================
   33. IMAGE SETTLE ANIMATION
   ========================================================= */

.culture-section.is-visible
.image-container img {

  transform:
    scale(1);
}


/* =========================================================
   34. GALLERY GRID
   ---------------------------------------------------------
   Fully fluid gallery.

   auto-fit automatically determines the number of columns.
   No desktop/tablet/mobile breakpoint is required.
   ========================================================= */

.gallery-grid {

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  margin:
    0 auto;

  padding:
    var(--space-small)
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(
          100%,
          260px
        ),
        1fr
      )
    );

  gap:
    clamp(
      0.9rem,
      2vw,
      1.5rem
    );

  justify-content:
    center;

  align-items:
    stretch;
}


/* =========================================================
   35. GALLERY IMAGES
   ========================================================= */

.gallery-grid img {

  width:
    100%;

  max-width:
    100%;

  height:
    clamp(
      190px,
      24vw,
      320px
    );

  object-fit:
    cover;

  object-position:
    center center;

  display:
    block;

  margin:
    0 auto;

  border-radius:
    clamp(
      10px,
      1.2vw,
      16px
    );

  cursor:
    pointer;

  transition:
    transform
    0.4s
    ease,

    box-shadow
    0.4s
    ease;
}


/* =========================================================
   36. GALLERY HOVER
   ========================================================= */

.gallery-grid img:hover {

  transform:
    scale(1.04);

  box-shadow:
    0 12px 28px
    rgba(
      0,
      0,
      0,
      0.2
    );
}


/* =========================================================
   37. GALLERY AUTO SLIDER
   ========================================================= */

.gallery-slider {

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  border-radius:
    clamp(
      10px,
      1.5vw,
      16px
    );

  margin:
    var(--space-small)
    auto;
}


/* =========================================================
   38. SLIDER TRACK
   ========================================================= */

.gallery-track {

  display:
    flex;

  gap:
    clamp(
      0.75rem,
      1.5vw,
      1rem
    );

  width:
    max-content;

  animation:
    scrollGallery
    60s
    linear
    infinite;
}


/* =========================================================
   39. SLIDER IMAGES
   ========================================================= */

.gallery-track img {

  width:
    clamp(
      260px,
      28vw,
      340px
    );

  height:
    clamp(
      190px,
      20vw,
      240px
    );

  object-fit:
    cover;

  border-radius:
    clamp(
      10px,
      1.2vw,
      14px
    );

  flex:
    0 0 auto;

  transition:
    transform
    0.4s
    ease;
}


/* =========================================================
   40. SLIDER IMAGE HOVER
   ========================================================= */

.gallery-track img:hover {

  transform:
    scale(1.03);
}


/* =========================================================
   41. SLIDER ANIMATION
   ========================================================= */

@keyframes scrollGallery {

  from {

    transform:
      translateX(0);
  }


  to {

    transform:
      translateX(-50%);
  }
}


/* =========================================================
   42. PAUSE SLIDER ON HOVER
   ========================================================= */

.gallery-slider:hover
.gallery-track {

  animation-play-state:
    paused;
}


/* =========================================================
   43. NAVIGATION — MAIN POSITIONING
   ---------------------------------------------------------
   nav.js controls creation and placement.
   ========================================================= */

.navbar.oneetsako-nav {

  position:
    fixed;

  top:
    clamp(
      18px,
      2.5vw,
      32px
    );

  left:
    clamp(
      18px,
      2.5vw,
      32px
    );

  right:
    clamp(
      18px,
      2.5vw,
      32px
    );

  width:
    auto;

  min-height:
    40px;

  margin:
    0;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  transform:
    none;

  z-index:
    9999;
}


/* =========================================================
   44. NAVIGATION LOGO
   ========================================================= */

.navbar.oneetsako-nav .logo {

  position:
    relative;

  left:
    auto;

  right:
    auto;

  top:
    auto;

  margin:
    0;

  width:
    140px;

  height:
    40px;

  flex:
    0 0 auto;
}


/* =========================================================
   45. GENERAL FLUID LOGO
   ========================================================= */

.logo {

  font-size:
    clamp(
      0.95rem,
      1.5vw,
      1.5rem
    );

  white-space:
    nowrap;
}


/* =========================================================
   46. THEME TOGGLE — NATURAL NAV POSITION
   ========================================================= */

.navbar.oneetsako-nav
.theme-toggle {

  position:
    relative;

  top:
    auto;

  right:
    auto;

  bottom:
    auto;

  left:
    auto;

  margin:
    0;

  padding:
    6px;

  width:
    40px;

  height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  background:
    transparent;

  border:
    0;
}


/* =========================================================
   47. FLUID THEME TOGGLE BASE
   ========================================================= */

.theme-toggle {

  padding:
    clamp(
      0.5rem,
      1vw,
      0.75rem
    )
    clamp(
      0.7rem,
      1.5vw,
      1.25rem
    );

  font-size:
    clamp(
      0.8rem,
      1vw,
      1rem
    );
}


/* =========================================================
   48. THEME BUTTON — FORCE VISIBILITY
   ---------------------------------------------------------
   Keeps the moon/sun icon visible and prevents generic
   button rules from moving it.
   ========================================================= */

nav.oneetsako-nav {

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;
}


nav.oneetsako-nav
> .theme-toggle {

  display:
    inline-flex !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  position:
    relative !important;

  width:
    42px !important;

  height:
    42px !important;

  min-width:
    42px !important;

  min-height:
    42px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  background:
    transparent !important;

  border:
    0 !important;

  color:
    #ffffff !important;

  font-size:
    22px !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;

  z-index:
    999999 !important;

  transform:
    none;
}


/* =========================================================
   49. THEME BUTTON HOVER
   ========================================================= */

nav.oneetsako-nav
> .theme-toggle:hover {

  opacity:
    1 !important;
}


/* =========================================================
   50. FOOTER — MAIN STRUCTURE
   ---------------------------------------------------------
   Full-width footer.

   Footer paragraphs remain WHITE regardless of theme.
   ========================================================= */

footer {

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  min-height:
    clamp(
      420px,
      75vh,
      760px
    );

  padding:
    clamp(
      4rem,
      9vw,
      7rem
    )
    var(--page-space);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  border-top:
    1px solid
    var(--border-color);

  position:
    relative;

  z-index:
    2;
}


/* =========================================================
   51. FOOTER INNER CONTENT
   ========================================================= */

.footer-inner {

  width:
    min(
      100%,
      900px
    );

  max-width:
    900px;

  min-width:
    0;

  margin:
    0 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    clamp(
      1.5rem,
      3vw,
      2.5rem
    );
}


/* =========================================================
   52. FOOTER PARAGRAPH
   ---------------------------------------------------------
   Base footer styling.

   Final protection below forces white.
   ========================================================= */

.footer-inner p {

  width:
    100%;

  max-width:
    100%;

  margin:
    0;

  color:
    var(--text-muted);

  font-size:
    clamp(
      0.95rem,
      1.2vw,
      1.1rem
    );

  line-height:
    1.8;

  font-weight:
    400;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   53. FOOTER LINKS
   ========================================================= */

.footer-inner a {

  font-size:
    clamp(
      0.9rem,
      1.1vw,
      1rem
    );

  line-height:
    1.6;

  color:
    var(--accent);

  text-decoration:
    none;

  transition:
    color
    0.3s
    ease,

    transform
    0.3s
    ease;
}


/* =========================================================
   54. FOOTER LINK HOVER
   ========================================================= */

.footer-inner a:hover {

  color:
    var(--accent-hover);

  transform:
    translateY(-2px);
}


/* =========================================================
   55. FINAL WIDTH / OVERFLOW SAFETY
   ---------------------------------------------------------
   Major page components are never allowed to exceed the
   viewport.
   ========================================================= */

.hero,
.hero-content,
.content-container,
.culture-section,
.image-container,
.gallery-grid,
.gallery-slider,
.footer-inner,
footer {

  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   56. GLOBAL FLUID PHONE-FIRST SAFETY
   ---------------------------------------------------------
   No fixed desktop/tablet/mobile breakpoints.

   The page responds continuously using:
   - clamp()
   - min()
   - max()
   - percentages
   - auto-fit
   - intrinsic sizing
   ========================================================= */

main,
section,
article,
.content-container,
.culture-section,
.image-container,
.gallery-grid,
.gallery-slider,
.footer-inner {

  min-width:
    0;

  box-sizing:
    border-box;
}


/* =========================================================
   57. CONTENT CENTERING SAFETY
   ========================================================= */

.content-container,
.culture-section,
.image-container,
.gallery-grid,
.gallery-slider {

  margin-left:
    auto;

  margin-right:
    auto;
}


/* =========================================================
   58. FLUID CONTENT TEXT
   ========================================================= */

.content-container p,
.culture-section p {

  width:
    100%;

  max-width:
    100%;

  margin-left:
    auto;

  margin-right:
    auto;
}


/* =========================================================
   59. FLUID IMAGE SAFETY
   ========================================================= */

.content-container img,
.culture-section img,
.gallery-grid img,
.gallery-track img {

  max-width:
    100%;
}


/* =========================================================
   60. THEME TEXT CONTRAST SYSTEM
   ---------------------------------------------------------
   MAIN CONTENT:
       LIGHT = SUPER BLACK
       DARK  = SUPER WHITE

   HERO:
       ALWAYS WHITE

   FOOTER:
       ALWAYS WHITE

   This section is intentionally near the bottom so these
   rules have final authority over the paragraph colors.
   ========================================================= */


/* =========================================================
   61. LIGHT MODE — MAIN CONTENT PARAGRAPHS
   ---------------------------------------------------------
   SUPER BLACK.
   ========================================================= */

body:not(.dark) main p,
body:not(.dark) .content-container p,
body:not(.dark) .culture-section p {

  color:
    #000000 !important;
}


/* =========================================================
   62. DARK MODE — MAIN CONTENT PARAGRAPHS
   ---------------------------------------------------------
   SUPER WHITE.
   ========================================================= */

body.dark main p,
body.dark .content-container p,
body.dark .culture-section p {

  color:
    #ffffff !important;
}


/* =========================================================
   63. HERO TEXT PROTECTION
   ---------------------------------------------------------
   Hero paragraphs are excluded from the theme system.

   ALWAYS WHITE.
   ========================================================= */

.hero p,
.hero-content p {

  color:
    #ffffff !important;
}


/* =========================================================
   64. FOOTER TEXT PROTECTION
   ---------------------------------------------------------
   Footer paragraphs are excluded from the theme system.

   ALWAYS WHITE.
   ========================================================= */

footer p,
.footer-inner p {

  color:
    #ffffff !important;
}


/* =========================================================
   65. HERO + FOOTER LINK PROTECTION
   ---------------------------------------------------------
   Hero and footer links remain white regardless of theme.
   ========================================================= */

.hero a,
.hero-content a,
footer a,
.footer-inner a {

  color:
    #ffffff !important;
}


/* =========================================================
   66. FINAL IMAGE POSITIONING
   ---------------------------------------------------------
   Keeps the main content images visually centered and
   exposes the center of the photograph.
   ========================================================= */

.culture-section
.image-container {

  margin-left:
    auto;

  margin-right:
    auto;
}


.culture-section
.image-container img {

  margin-left:
    auto;

  margin-right:
    auto;

  object-position:
    center center;
}


/* =========================================================
   END OF ONEETSAKO — PAGES.CSS
   ---------------------------------------------------------
   Fully fluid
   Phone-first
   Centered content
   Responsive images
   Theme-safe paragraphs
   Protected hero/footer
   Navigation preserved
   Gallery preserved
   ========================================================= */