/*
Theme Name: Samana
Description: Cinematic, calm, editorial theme for the Samana wellness and movement brand.
Author: Social 101
Version: 1.0
Text Domain: samana
*/

:root{
  --stone:#F7E9D0;
  --stone-deep:#E4D2B4;
  --mist:#EADFC8;
  --ink:#2E1A10;
  --moss:#4A2419;
  --sage:#8F653C;
  --sage-light:#B59B7F;
  --clay:#6A3724;
  --paper:#FCF3E2;
  --display: 'Cormorant Garamond', 'Petersburg', Georgia, serif;
  --body: 'Jost', 'Open Sans', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--stone);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.7;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
img{display:block; max-width:100%;}
a{color:inherit;}

.eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--sage);
  font-weight:400;
}
h1,h2,h3{font-family:var(--display); font-weight:500; color:var(--ink); letter-spacing:.005em;}
.plate{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>"),
    radial-gradient(120% 140% at 15% 0%, rgba(252,243,226,.35), transparent 55%),
    linear-gradient(155deg,var(--sage-light),var(--sage) 55%,var(--moss));
  color:var(--paper); display:flex; align-items:flex-end; justify-content:flex-start;
  position:relative; overflow:hidden;
}
.plate video, .plate img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.plate .cap{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:10px 14px;
  background:rgba(46,26,16,.55); backdrop-filter:blur(2px); position:relative; z-index:1;
}
.btn{
  display:inline-block; font-family:var(--body); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; padding:14px 30px; border:1px solid var(--ink);
  text-decoration:none; color:var(--ink); transition:.25s;
}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn.on-dark{border-color:rgba(252,243,226,.55); color:var(--paper);}
.btn.on-dark:hover{background:var(--paper); color:var(--ink);}
section{padding:110px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- SITE HEADER ---------- */
.site-header{
  background:var(--paper); position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--stone-deep);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:22px; padding-bottom:22px;
}
.logo{
  font-family:var(--display); font-style:italic; font-weight:500; font-size:26px;
  letter-spacing:.01em; color:var(--ink); text-decoration:none; display:inline-block;
}
.logo-img{height:28px; width:auto; display:block;}
.footer-brand .logo-img{height:34px;}
.logo span{color:var(--clay);}
.site-nav ul{display:flex; align-items:center; gap:34px; list-style:none;}
.site-nav a{
  font-family:var(--body); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); opacity:.75; padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{opacity:1; border-color:var(--clay);}
.site-nav .current-menu-item a{opacity:1; border-color:var(--clay);}
.header-cta{
  font-family:var(--body); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:11px 22px; border:1px solid var(--ink); text-decoration:none; color:var(--ink);
}
.header-cta:hover{background:var(--ink); color:var(--paper);}

/* ---------- HERO ---------- */
.hero{
  height:92vh; min-height:600px; position:relative;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/></svg>"),
    radial-gradient(90% 80% at 20% 10%, rgba(181,155,127,.4), transparent 60%),
    linear-gradient(180deg, rgba(46,26,16,.15), rgba(46,26,16,.6)), var(--moss);
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero-inner{position:relative; z-index:2; padding-bottom:80px; color:var(--paper); max-width:760px;}
.hero .eyebrow{color:var(--sage-light);}
.hero h1{font-size:64px; line-height:1.08; margin:18px 0 26px; font-style:italic; font-weight:400;}
.hero p{font-size:18px; font-weight:300; color:rgba(252,243,226,.85); max-width:480px;}
.scroll-cue{
  position:absolute; right:40px; bottom:36px; z-index:2; writing-mode:vertical-rl;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:rgba(252,243,226,.6);
}

/* ---------- POETIC INTRO ---------- */
.intro{background:var(--paper);}
.intro .wrap{max-width:760px; text-align:center;}
.intro p.lede{
  font-family:var(--display); font-style:italic; font-size:30px; line-height:1.55;
  color:var(--moss); font-weight:400;
}

/* ---------- BREATHING WORD CYCLE (signature) ---------- */
.breathe{background:var(--moss); color:var(--paper); text-align:center; position:relative;}
.breathe .ring{
  width:220px; height:220px; border-radius:50%; border:1px solid rgba(252,243,226,.25);
  margin:0 auto 36px; display:flex; align-items:center; justify-content:center;
  animation:pulse 4.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(.94); border-color:rgba(252,243,226,.18);}
  50%{transform:scale(1.04); border-color:rgba(252,243,226,.4);}
}
.breathe h2{font-size:16px; letter-spacing:.2em; text-transform:uppercase; font-family:var(--body); color:rgba(252,243,226,.55); font-weight:400; margin-bottom:6px;}
.word-cycle{font-family:var(--display); font-style:italic; font-size:44px; font-weight:400; height:56px; position:relative;}
.word-cycle span{position:absolute; left:50%; top:0; transform:translateX(-50%); opacity:0; animation:cycle 12s infinite;}
.word-cycle span:nth-child(1){animation-delay:0s;}
.word-cycle span:nth-child(2){animation-delay:3s;}
.word-cycle span:nth-child(3){animation-delay:6s;}
.word-cycle span:nth-child(4){animation-delay:9s;}
@keyframes cycle{0%{opacity:0;} 4%{opacity:1;} 22%{opacity:1;} 27%{opacity:0;} 100%{opacity:0;}}
.breathe .note{margin-top:32px; font-size:12px; letter-spacing:.08em; color:rgba(252,243,226,.4); text-transform:uppercase;}

/* ---------- PILLARS ---------- */
.pillars{background:var(--paper);}
.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--stone-deep);}
.pillar{background:var(--paper); padding:48px 40px;}
.pillar .plate{height:200px; margin-bottom:26px;}
.pillar h3{font-size:24px; margin-bottom:10px; font-style:italic; font-weight:500;}
.pillar p{font-size:14.5px; color:var(--sage); margin-bottom:18px;}
.pillar a{font-size:12px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--clay); padding-bottom:2px; color:var(--clay); text-decoration:none;}

/* ---------- FREEBIE ---------- */
.freebie{background:var(--stone-deep);}
.freebie .wrap{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.freebie .eyebrow{color:var(--clay);}
.freebie h2{font-size:38px; margin:16px 0 20px; font-style:italic; font-weight:500;}
.freebie p{font-size:15.5px; max-width:420px; margin-bottom:30px; color:var(--ink); opacity:.8;}
.freebie .plate{height:340px;}

/* ---------- TESTIMONIALS ---------- */
.testimonials{background:var(--paper); text-align:center;}
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:50px; margin-top:20px;}
.t-card q{font-family:var(--display); font-style:italic; font-size:19px; line-height:1.5; color:var(--moss); display:block; margin-bottom:18px;}
.t-card .who{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage);}

/* ---------- CLOSING CTA ---------- */
.closing{background:var(--moss); color:var(--paper); text-align:center;}
.closing h2{color:var(--paper); font-size:38px; font-style:italic; font-weight:500; margin-bottom:26px;}

/* ---------- ABOUT: founder hero ---------- */
.about-hero{background:var(--paper); padding-top:150px; padding-bottom:70px; text-align:center;}
.about-hero .eyebrow{justify-content:center; display:flex;}
.about-hero h1{font-size:56px; font-style:italic; font-weight:400; margin:16px 0;}
.about-hero p{max-width:520px; margin:0 auto; color:var(--sage); font-size:15px;}

.founder{background:var(--paper);}
.founder .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center;}
.founder .plate{height:560px;}
.founder blockquote{
  font-family:var(--display); font-style:italic; font-size:26px; line-height:1.5; color:var(--moss);
  margin:26px 0; padding-left:24px; border-left:2px solid var(--clay);
}
.founder p{font-size:15.5px; margin-bottom:16px; opacity:.85;}
.founder .sign{font-family:var(--display); font-style:italic; font-size:22px; margin-top:24px; color:var(--ink);}

.philosophy{background:var(--stone-deep);}
.philosophy .wrap{max-width:760px; text-align:center;}
.philosophy p.lede{font-family:var(--display); font-style:italic; font-size:26px; line-height:1.55; color:var(--moss); margin-bottom:50px;}
.approach-row{display:grid; grid-template-columns:repeat(3,1fr); gap:50px; text-align:left; margin-top:10px;}
.approach-row .div{width:28px; height:1px; background:var(--clay); margin-bottom:16px;}
.approach-row h3{font-size:19px; font-style:italic; font-weight:500; margin-bottom:10px;}
.approach-row p{font-size:14px; color:var(--ink); opacity:.75;}

.faces{background:var(--paper);}
.faces .section-head{margin-bottom:36px;}
.face-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.face-strip .plate{height:220px;}

/* ---------- SITE FOOTER ---------- */
.site-footer{background:var(--moss); color:var(--paper);}
.site-footer .wrap{padding:90px 40px 40px;}
.footer-top{display:grid; grid-template-columns:1.3fr .8fr .8fr .8fr; gap:50px; padding-bottom:60px;}
.footer-brand p{font-size:14px; color:rgba(252,243,226,.65); max-width:280px; margin-top:16px;}
.footer-col h4{
  font-family:var(--body); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(252,243,226,.5); font-weight:400; margin-bottom:18px;
}
.footer-col ul{list-style:none;}
.footer-col a{
  display:block; font-family:var(--body); font-size:14.5px; color:var(--paper);
  text-decoration:none; opacity:.85; margin-bottom:12px;
}
.footer-col a:hover{opacity:1; text-decoration:underline;}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(252,243,226,.18); padding-top:26px;
  font-size:12px; letter-spacing:.04em; color:rgba(252,243,226,.5);
}
.footer-social{display:flex; gap:18px; list-style:none;}
.footer-social a{color:rgba(252,243,226,.7); text-decoration:none; font-size:12px; letter-spacing:.06em; text-transform:uppercase;}
.footer-social a:hover{color:var(--paper);}

@media(max-width:900px){
  .hero h1{font-size:40px;}
  .pillar-grid,.approach-row,.t-grid,.face-strip{grid-template-columns:1fr;}
  .freebie .wrap,.founder .wrap{grid-template-columns:1fr; gap:36px;}
  section{padding:70px 0;}
  .wrap{padding:0 22px;}
  .site-nav{display:none;}
  .footer-top{grid-template-columns:1fr 1fr; gap:36px;}
  .footer-bottom{flex-direction:column; gap:14px; align-items:flex-start;}
}