/* Cultures Connect: shared stylesheet for every page.
   Palette lives in :root below. Change a colour once, it updates everywhere. */

:root{
  --cream:#FFF8F0; --cream-2:#F4E9D9; --ink:#3A2E28; --muted:#6B5D53;
  --terra:#C75C3C; --ochre:#E3A72F; --teal:#2E7D6F; --line:#EFE4D8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{ background:var(--cream); color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body{ background:radial-gradient(120% 75% at 50% 0%,#FFFBF4 0%,#FBF1E1 58%,#F3E6D0 100%); min-height:100vh; }
a{ color:var(--teal); }
.grain{ position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* NAV */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px; transition:background .4s,box-shadow .4s,padding .4s; }
.nav.scrolled{ background:rgba(255,251,244,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); padding:14px 40px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; font-size:12px; color:var(--ink); text-decoration:none; }
.nav-links{ list-style:none; display:flex; gap:26px; }
.nav-links a{ color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; position:relative; transition:color .25s; }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); }
.nav-links a.active{ color:var(--teal); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1.5px; background:currentColor; border-radius:2px; transition:width .35s cubic-bezier(.7,0,.2,1); }
.nav-links a:hover::after{ width:100%; }
/* BUTTONS */
.btn{ display:inline-flex; align-items:center; gap:10px; background:linear-gradient(180deg,#D06746,#B94D2E); color:#fff; border:none; text-decoration:none;
  padding:13px 26px; border-radius:999px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  box-shadow:0 14px 24px -10px rgba(199,92,60,.55),inset 0 1px 0 rgba(255,255,255,.2); transition:transform .35s cubic-bezier(.6,0,.2,1); }
.btn:hover{ transform:translateY(-2px); }
.btn .ar{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; transition:transform .35s cubic-bezier(.6,0,.2,1); }
.btn:hover .ar{ transform:rotate(45deg); }
/* HERO TEXT (home) */
.hero{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; text-align:center; padding:140px 24px 8px; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:20px; }
.eyebrow::before{
  content:"";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terra);
  animation: puls-dot 1.5s ease-out infinite;
}
@keyframes puls-dot{
  0%   { box-shadow: 0 0 0 0 rgba(199,92,60,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(199,92,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(199,92,60,0); }
}
.idiom{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(28px,4.6vw,52px); line-height:1.14; letter-spacing:-.01em; color:var(--ink); max-width:18ch; margin:0 auto 16px; }
.idiom .w{ display:inline-block; overflow:hidden; vertical-align:top; } .idiom .w>span{ display:inline-block; }
body.is-animating .idiom .w>span{ transform:translateY(110%); }
.sub{ color:var(--muted); font-size:15px; max-width:48ch; margin:0 auto; line-height:1.55; }
/* ================= CAROUSEL (sizes/transforms kept from template) ================= */
.carousel-section{ position:relative; z-index:5; padding:34px 16px 20px; display:flex; flex-direction:column; align-items:center; }
.carousel-title{ position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:0; pointer-events:none; user-select:none;
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:600; font-size:clamp(58px,10vw,140px); line-height:1; white-space:nowrap; text-transform:lowercase;
  color:transparent; background:linear-gradient(to bottom, rgba(199,92,60,.20) 56%, rgba(199,92,60,0) 90%); -webkit-background-clip:text; background-clip:text; }
.carousel-slide{ display:flex; flex-direction:column; align-items:center; width:100%; }
.carousel-container{ width:80%; max-width:700px; height:280px; position:relative; perspective:400px; margin:6px auto 0; }
.carousel-track{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; position:relative; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.25,.46,.45,.94);
  pointer-events:none; /* the track sits at z=0 and would otherwise swallow clicks aimed at the cards pushed back in 3D */ }
.card{ pointer-events:auto; position:absolute; width:180px; height:180px; background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 24px 46px -12px rgba(120,60,25,.34), 0 10px 20px -8px rgba(120,60,20,.2); transition:all .8s cubic-bezier(.25,.46,.45,.94); cursor:pointer; }
.card img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:all .8s cubic-bezier(.25,.46,.45,.94); }
.card.center{ z-index:10; transform:scale(1.1) translateZ(0); }
.card.center img{ filter:none; }
.card.left-2{ z-index:1; transform:translateX(-400px) scale(.8) translateZ(-300px); opacity:.62; }
.card.left-2 img{ filter:grayscale(100%); }
.card.left-1{ z-index:5; transform:translateX(-200px) scale(.9) translateZ(-100px); opacity:.85; }
.card.left-1 img{ filter:grayscale(100%); }
.card.right-1{ z-index:5; transform:translateX(200px) scale(.9) translateZ(-100px); opacity:.85; }
.card.right-1 img{ filter:grayscale(100%); }
.card.right-2{ z-index:1; transform:translateX(400px) scale(.8) translateZ(-300px); opacity:.62; }
.card.right-2 img{ filter:grayscale(100%); }
.card.hidden{ opacity:0; pointer-events:none; }
.card:focus-visible{ outline:3px solid rgba(46,125,111,.6); outline-offset:4px; }
/* ---- 7th card: the invitation. Sizes inherit from .card so carousel geometry is untouched ---- */
.card.card-add{
  background:#FDF6EE;
  border:2px dashed #DFCBB8;
  box-shadow:0 14px 28px -14px rgba(120,60,25,.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-align:center; padding:14px;
}
.card.card-add .add-plus{ font-size:26px; line-height:1; color:var(--terra); font-weight:300; }
.card.card-add .add-title{ font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1.2; }
.card.card-add .add-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.card.card-add.center{ border-color:var(--terra); background:#FDF1E8; }
@media(hover:hover){ .card.card-add:hover{ border-color:var(--terra); background:#FDF1E8; } }
/* its dot, hollow so it reads as different from the six languages */
.cdot.cdot-add{ background:transparent; border:2px solid rgba(199,92,60,.4); }
.cdot.cdot-add.active{ background:var(--terra); border-color:var(--terra); }
.cdot.cdot-locked{ display:none; }

.nav-arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(46,125,111,.62); color:#fff; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:20; transition:all .3s ease; font-size:1.5rem; border:none; outline:none; padding-bottom:4px; }
.nav-arrow:hover{ background:var(--terra); transform:translateY(-50%) scale(1.1); }
.nav-arrow.left{ left:20px; padding-right:3px; } .nav-arrow.right{ right:20px; padding-left:3px; }
.nav-arrow:focus-visible{ outline:3px solid rgba(46,125,111,.6); outline-offset:3px; }
/* member-info -> language + saying + meaning */
.member-info{ position:relative; z-index:2; text-align:center; margin-top:30px; transition:opacity .45s ease-out; max-width:640px; }
.mi-lang{ display:inline-block; position:relative; color:var(--teal); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; margin-bottom:16px; }
.mi-lang::before,.mi-lang::after{ content:""; position:absolute; top:50%; width:44px; height:1.5px; background:var(--teal); opacity:.5; }
.mi-lang::before{ left:-58px; } .mi-lang::after{ right:-58px; }
.mi-saying{ font-family:"Fraunces",Georgia,serif; color:var(--ink); font-size:clamp(22px,2.6vw,30px); font-weight:600; line-height:1.28; letter-spacing:-.01em; }
.mi-meaning{ color:var(--muted); font-size:16px; line-height:1.5; margin-top:12px; }
.mi-roman{ color:#A99A8C; font-size:12.5px; font-style:italic; margin-top:8px; }
.dots{ display:flex; justify-content:center; gap:10px; margin-top:34px; }
.cdot{ width:11px; height:11px; border-radius:50%; background:rgba(46,125,111,.22); cursor:pointer; transition:all .3s ease; }
.cdot.active{ background:var(--teal); transform:scale(1.25); }
.cdot:focus-visible{ outline:2px solid rgba(46,125,111,.6); outline-offset:3px; }
.verify{ position:relative; z-index:2; margin-top:30px; font-size:13.5px; color:var(--muted); text-align:center; }
.verify a{ text-decoration:none; border-bottom:1px solid rgba(46,125,111,.35); }
.verify a:hover{ border-bottom-color:var(--teal); }
/* DARK BAND */
.band{ padding:56px 40px 90px; position:relative; z-index:5; }
.band-inner{ max-width:1080px; margin:0 auto; position:relative; overflow:hidden; background:var(--ink); color:var(--cream); border-radius:32px; padding:74px 60px; text-align:center;
  box-shadow:0 40px 80px -34px rgba(40,20,8,.5),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -3px 8px rgba(0,0,0,.4); }
.band-inner::before{ content:""; position:absolute; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle,rgba(199,92,60,.4),transparent 65%); top:-200px; right:-120px; filter:blur(30px); }
.band-inner::after{ content:""; position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(227,167,47,.22),transparent 65%); bottom:-160px; left:-60px; filter:blur(34px); }
.band h2{ position:relative; z-index:1; font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(27px,3.4vw,44px); line-height:1.1; letter-spacing:-.01em; margin-bottom:18px; }
.band p{ position:relative; z-index:1; color:rgba(255,248,240,.72); font-size:15.5px; line-height:1.6; max-width:52ch; margin:0 auto 30px; }
.band .btn{ position:relative; z-index:1; }
/* INTERIOR PAGES */
.page{ position:relative; z-index:5; max-width:820px; margin:0 auto; padding:150px 24px 24px; text-align:center; }
.page-title{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(30px,4.5vw,50px); line-height:1.12; letter-spacing:-.01em; margin:0 auto 16px; max-width:18ch; }
.page-intro{ color:var(--muted); font-size:17px; line-height:1.6; max-width:54ch; margin:0 auto; }
.badge{ display:inline-block; background:#FBEDE7; color:var(--terra); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:6px 16px; border-radius:999px; margin-bottom:20px; }
.form-wrap{ max-width:600px; margin:0 auto; padding:14px 24px 30px; text-align:left; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px; color:var(--ink); }
.field .opt{ color:var(--muted); font-weight:400; }
.field .fhint{ display:block; font-size:13px; color:var(--muted); font-weight:400; margin-top:3px; }
.field input,.field select,.field textarea{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:15px; font-family:inherit; color:var(--ink); background:#fff; }
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(46,125,111,.15); }
.form-actions{ text-align:center; margin-top:26px; }
.about{ max-width:720px; margin:0 auto; padding:14px 24px 30px; text-align:left; }
.about-block{ margin-bottom:30px; }
.about-block h2{ font-family:"Fraunces",Georgia,serif; font-size:23px; font-weight:600; margin-bottom:10px; color:var(--ink); }
.about-block p{ font-size:15.5px; color:var(--muted); line-height:1.72; margin-bottom:12px; }
.center-cta{ text-align:center; padding:6px 24px 20px; }
/* FOOTER */
.foot{ max-width:760px; margin:40px auto 0; padding:24px 24px 50px; border-top:1px solid var(--line); text-align:center; }
.foot p{ font-size:13px; color:var(--muted); margin-bottom:5px; }
.foot a{ text-decoration:none; }
/* RESPONSIVE */
@media(max-width:640px){
  .nav{ padding:16px 18px; } .nav.scrolled{ padding:12px 18px; }
  .nav-links{ gap:15px; } .nav-links a{ font-size:13px; }
  .hero{ padding:118px 18px 4px; }
  .carousel-title{ font-size:clamp(46px,15vw,80px); }
  .carousel-container{ width:100%; height:150px; position:relative; perspective:280px; margin-top:6px; }
  .card{ width:120px; height:120px; }
  .card.left-2{ transform:translateX(-250px) scale(.8) translateZ(-300px); }
  .card.left-1{ transform:translateX(-120px) scale(.9) translateZ(-100px); }
  .card.right-1{ transform:translateX(120px) scale(.9) translateZ(-100px); }
  .card.right-2{ transform:translateX(250px) scale(.8) translateZ(-300px); }
  .card.card-add{ padding:8px; gap:0; }
  .card.card-add .add-plus{ font-size:20px; }
  .card.card-add .add-title{ font-size:12px; }
  .card.card-add .add-sub{ font-size:9.5px; }
  .nav-arrow{ width:30px; height:30px; border-radius:50%;}
  .nav-arrow.left{ left:1px; padding-right:1px; } .nav-arrow.right{ right:1px; padding-left:1px; }
  .mi-saying{ font-size:22px; }
  .mi-lang::before{ left:-40px; width:30px; } .mi-lang::after{ right:-40px; width:30px; }
  .band{ padding:36px 18px 70px; } .band-inner{ padding:52px 26px; border-radius:26px; }
  .page{ padding:126px 20px 18px; }
}
@media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }
.brand-mark{
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.brand-mark img{
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.brand-mark::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: puls 1.5s ease-out infinite;
}
@keyframes puls{
  0%   { box-shadow: 0 0 0 0 rgba(46,125,111,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(46,125,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,125,111,0); }
}

/* Welcome note on the home page */
.welcome{ position:relative; z-index:5; max-width:640px; margin:0 auto; padding:14px 24px 46px; text-align:center; }
.welcome p{ color:var(--muted); font-size:16px; line-height:1.7; }
.welcome .sig{ display:block; margin-top:14px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--terra); font-weight:600; }

/* Intro popup on the home page */
.modal-overlay{
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(40, 28, 22, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .35s ease;
}
.modal-overlay.show{ opacity: 1; }
.modal-overlay[hidden]{ display: none; }
.modal-card{
  position: relative; max-width: 460px; width: 100%;
  background: var(--cream); border-radius: 18px;
  padding: 40px 32px 32px;
  box-shadow: 0 24px 60px -12px rgba(60, 30, 10, 0.5);
  transform: translateY(14px) scale(.98); transition: transform .35s ease;
  text-align: center;
}
.modal-overlay.show .modal-card{ transform: translateY(0) scale(1); }
.modal-scene{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px; line-height: 1.5; color: var(--ink); margin-bottom: 18px;
}
.modal-point{ font-size: 15px; line-height: 1.7; color: var(--muted); margin-bottom: 26px; }
.modal-enter{
  background: var(--terra); color: #fff; border: none; border-radius: 10px;
  padding: 11px 30px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.modal-enter:hover{ background: #B14A2C; }
.modal-close{
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px;
  background: none; border: none; font-size: 26px; line-height: 1; color: var(--muted);
  cursor: pointer; border-radius: 8px;
}
.modal-close:hover{ background: rgba(0,0,0,0.06); color: var(--ink); }
.foot-link{ color: var(--terra); text-decoration: underline; cursor: pointer; }

/* Five C's tab switcher */
.c-tabs{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:680px;margin:0 auto 4px;padding:0 16px;position:relative;z-index:5; }
.c-tab{ display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;font-family:inherit;border:1px solid transparent;cursor:pointer;line-height:1;transition:transform .15s ease, background .2s ease; }
.c-tab.is-open{ background:#fff;border-color:#E4D8CB;color:#3A2E28; }
.c-tab.is-open:hover{ transform:translateY(-1px); }
.c-tab.is-now{ background:#C75C3C;color:#fff; }
.c-tab.is-lock{ background:#F0E8DC;color:#A89C8C; }
.c-tab.is-lock:hover{ background:#EAE0D2; }
.c-tab.is-viewing{ box-shadow:0 0 0 2px #2E7D6F; }
.c-tab .ti{ font-size:14px; }
.c-tabhint{ text-align:center;font-size:12px;color:#A89C8C;margin:2px 0 34px;position:relative;z-index:5; }
.c-tip{ position:fixed;z-index:60;background:#3A2E28;color:#FFF8F0;font-size:13px;line-height:1.45;padding:9px 13px;border-radius:10px;max-width:230px;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s ease;box-shadow:0 10px 26px rgba(60,30,10,.4); }
.c-tip.show{ opacity:1; }
.c-tip::after{ content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#3A2E28; }

/* ===== Five C's vertical reel (replaces the pill tabs on the home hero) ===== */
.c-reel-block{ display:flex; flex-direction:column; align-items:center; margin:0 auto 30px; position:relative; z-index:5; }
.c-reel-label{ display:inline-flex; align-items:center; gap:10px; }
.c-reel-label .lead{ display:inline-flex; align-items:center; gap:10px; }
.c-reel-pulse{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--terra); animation:puls-dot 1.5s ease-out infinite; }
.c-reel-prefix{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600; white-space:nowrap; }
.pickrow{ display:inline-flex; align-items:center; gap:10px; }
/* white pill, sized to the longest word by JS so it never resizes */
.c-reel{ position:relative; height:32px; padding:3px 16px; overflow:hidden; background:#fff; border-radius:12px; box-shadow:inset 0 1px 3px rgba(0,0,0,.2); }
.c-reel-track{ display:flex; flex-direction:column; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.c-reel-item{ height:26px; line-height:26px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--terra); white-space:nowrap; text-align:center; opacity:.25; cursor:pointer; transition:opacity .4s ease; }
.c-reel-item.is-active{ opacity:1; }
.c-reel-item.locked{ color:#A89C8C; }   /* locked C's read grey instead of a lock icon */
/* red shake when someone tries to roll onto a locked C */
.c-reel.shake{ animation:cReelShake .45s ease; box-shadow:inset 0 1px 3px rgba(0,0,0,.2), 0 0 0 2px rgba(199,92,60,.95); }
@keyframes cReelShake{
  0%,100%{ transform:translateX(0); }
  15%{ transform:translateX(-6px); }
  30%{ transform:translateX(5px); }
  45%{ transform:translateX(-4px); }
  60%{ transform:translateX(4px); }
  75%{ transform:translateX(-2px); }
}
/* split-circle up/down control */
.c-halfnav{ display:inline-flex; flex-direction:column; gap:2px; flex:none; }
.c-half{ width:30px; height:14px; border:1px solid var(--line); background:#fff; color:var(--terra); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1; transition:background .18s, transform .08s; }
.c-half.up{ border-radius:14px 14px 3px 3px; align-items:flex-end; padding-bottom:1px; }
.c-half.down{ border-radius:3px 3px 14px 14px; align-items:flex-start; padding-top:1px; }
.c-half:hover{ background:var(--cream-2); }
.c-half:active{ transform:scale(.94); }
.c-half:focus-visible{ outline:2px solid rgba(46,125,111,.6); outline-offset:2px; }
/* current-state notice, its own reserved line so the row above never shifts */
.c-reel-notice-line{ margin-top:16px; min-height:15px; text-align:center; }
.c-reel-notice{ font-size:11px; letter-spacing:.02em; color:var(--muted); }
.c-reel-notice.locked{ color:#A89C8C; }
.c-reel-guide{ margin-top:10px; font-size:12px; color:#A89C8C; text-align:center; }
/* mobile: prefix on its own line, pill + arrows together beneath, both centred */
@media(max-width:560px){
  .c-reel-label{ flex-direction:column; gap:12px; }
  .pickrow{ justify-content:center; }
}