/* ============================================================
   UNDERSTORY — recreation of coopers-fantastic-project.webflow.io
   Design tokens extracted from the live site (computed values).
   ============================================================ */
:root{
  /* CURRENT live palette — from the Webflow :root variables */
  --paper:#d9d7d2;         /* page background (--wide-bg) */
  --section-light:#e2e1dd; /* content sections (--bg) */
  --card:#ced4cd;          /* light cards (--bg-blue) */
  --bg-3:#ddd7c6;
  --dark:#0a171c;          /* dark sections + hero panel (--bg-2) */
  --teal:#618179;          /* type + headings (--font) */
  --coral:#d6746c;         /* accent (--link) */
  --cream:#f2eada;
  --white:#ffffff;
  /* aliases so existing rules keep working */
  --ink:#618179;           /* type = teal */
  --pine:#0a171c;
  --pine-deep:#0a171c;
  --brick:#618179;         /* eyebrows = teal */
  --olive:#618179;

  --f-grotesk:"Playfair Display",serif;
  --f-heebo:"Heebo",sans-serif;
  --f-inter:"Inter",sans-serif;
  --f-playfair:"Playfair Display",serif;

  --container:1285px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-heebo);font-size:17px;line-height:1.3;letter-spacing:-.4px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--brick);color:var(--cream)}

/* ---------- NAV ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:50;height:85px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,3.5vw,50px)}
.nav-left,.nav-right{display:flex;align-items:center;gap:22px;flex:1}
.nav-right{justify-content:flex-end}
.nav-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav-logo img{width:34px;height:34px}
.social{width:18px;height:18px;color:var(--ink);opacity:.85;transition:opacity .25s,color .25s}
.social:hover{opacity:1;color:var(--brick)}
.social svg{width:100%;height:100%;display:block}
.navlink{font-family:var(--f-heebo);font-size:15px;font-weight:500;letter-spacing:-.8px;text-transform:uppercase;color:var(--ink);
  height:85px;display:flex;align-items:center;transition:color .25s}
.navlink:hover{color:var(--coral)}
.btn-outline{font-family:var(--f-inter);font-size:12px;font-weight:600;letter-spacing:-.8px;text-transform:uppercase;color:var(--olive);
  border:1px solid var(--olive);border-radius:25px;padding:14px 22px;transition:background .2s,color .2s}
.btn-outline:hover{background:var(--olive);color:var(--cream)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;margin-left:6px}
.burger span{width:26px;height:2px;background:var(--ink);transition:.3s}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--pine-deep);color:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:40px;transform:translateY(-100%);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.mobile-menu.open{transform:none}
.mobile-menu a{font-family:var(--f-grotesk);font-size:clamp(2rem,9vw,3.4rem);text-transform:uppercase;letter-spacing:-1px}

/* ---------- HERO ---------- */
.hero-section{position:relative;max-width:var(--container);min-height:720px;margin:0 auto;overflow:hidden;font-family:var(--f-heebo);color:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:0;background:url("assets/understory-hero-studio.jpg") 50% 50%/cover no-repeat}
.hero-column{position:relative;z-index:1;width:40%;max-width:550px;min-height:720px;margin-left:64px;
  padding:120px 51px 40px 64px;background:rgba(10,23,28,.92);display:flex;flex-direction:column}
.real-title{font-family:var(--f-inter);font-size:13px;font-weight:600;letter-spacing:-1px;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.hero-text{font-family:var(--f-playfair);font-size:60px;font-weight:400;line-height:60px;letter-spacing:-2.5px;text-transform:uppercase;color:var(--teal);margin:0}
.hero-column .paragraph{font-family:var(--f-heebo);font-size:17px;font-weight:400;line-height:1.3;letter-spacing:-.4px;color:var(--teal);margin:28px 0 0;max-width:33ch}
.hero-column .button-outline{align-self:flex-start;margin-top:auto;font-family:var(--f-inter);font-size:12px;font-weight:600;letter-spacing:-.8px;
  text-transform:uppercase;color:var(--teal);border:1px solid var(--teal);border-radius:25px;padding:15px 20px;min-width:130px;text-align:center;transition:background .2s,color .2s,border-color .2s}
.hero-column .button-outline:hover{background:var(--coral);border-color:var(--coral);color:var(--white)}

/* reveal (used by later sections) */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ================= SUBPAGE HERO ================= */
.sub-hero{background:var(--dark);color:var(--teal);min-height:60vh;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--container);margin:0 auto;padding:140px clamp(20px,4vw,64px) 90px}
.sub-hero .eyebrow{color:var(--teal);margin-bottom:20px}
.sub-hero h1{font-family:var(--f-playfair);font-weight:400;font-size:clamp(48px,8vw,110px);line-height:.98;letter-spacing:-2px;text-transform:uppercase;color:var(--teal);max-width:16ch}
.sub-hero .sub-lead{font-family:var(--f-heebo);font-size:18px;line-height:1.5;color:var(--teal);max-width:52ch;margin-top:26px;opacity:.85}

/* ================= SECTIONS ================= */
.sec{padding:clamp(70px,10vh,120px) 0}
.sec-light{background:var(--section-light);color:var(--teal)}
.sec-dark{background:var(--dark);color:var(--teal)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,50px)}
.wrap.center{text-align:center}
.eyebrow{font-family:var(--f-inter);font-size:13px;font-weight:600;letter-spacing:-1px;text-transform:uppercase;color:var(--teal)}
.body{font-family:var(--f-heebo);font-size:17px;line-height:1.5;letter-spacing:-.4px;color:var(--teal)}
.body.big{font-size:20px}
/* heading ramp — all Playfair Display, teal */
.h-big,.h-word,.h-med,.h-large,.h-large-serif,.h-big-serif{font-family:var(--f-playfair);font-weight:400;color:var(--teal);margin:0;letter-spacing:-.5px}
.h-big{font-size:clamp(30px,4vw,42px);line-height:1.15}
.h-word{font-size:clamp(56px,9vw,100px);line-height:1}
.h-med{font-size:clamp(24px,2.4vw,32px);line-height:1.2}
.h-large{font-size:clamp(34px,4.4vw,58px);line-height:1.05;text-transform:uppercase}
.h-large-serif{font-size:clamp(26px,3vw,30px);line-height:1.2}
.h-big-serif{font-size:clamp(30px,3.4vw,40px);line-height:1.15}

/* buttons / links */
.btn-line{display:inline-block;font-family:var(--f-inter);font-size:12px;font-weight:600;letter-spacing:-.8px;text-transform:uppercase;
  color:var(--teal);border:1px solid var(--teal);border-radius:25px;padding:14px 24px;transition:background .25s,color .25s}
.btn-line:hover{background:var(--coral);border-color:var(--coral);color:var(--white)}
.btn-line.full{display:block;text-align:center;width:100%}
.link-arrow{font-family:var(--f-inter);font-size:13px;font-weight:600;letter-spacing:-.4px;text-transform:uppercase;color:var(--coral);transition:opacity .25s}
.link-arrow:hover{opacity:.7}
.caption{display:block;font-family:var(--f-inter);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-top:12px}

/* placeholders for imagery */
.ph{background:var(--card);border-radius:2px;width:100%}
.ph.dark{background:#132a33}
.ph-4-3{aspect-ratio:4/3}.ph-3-4{aspect-ratio:3/4}.ph-1-1{aspect-ratio:1/1}.ph-16-9{aspect-ratio:16/9}
img.ph{width:100%;height:auto;object-fit:cover;display:block}
img.tu-icon{width:48px;height:48px;object-fit:contain;margin-bottom:20px;display:block}
img.feat-ico{width:42px;height:42px;object-fit:contain;margin-bottom:18px;display:block}

/* welcome + three-up */
.welcome-head{max-width:640px;margin-bottom:60px}
.welcome-head .h-big{margin:16px 0 20px}
.threeup{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.tu-card .tu-icon{width:46px;height:46px;border-radius:50%;background:var(--card);margin-bottom:20px}
.tu-card .h-med{margin-bottom:12px}
.tu-card .body{margin-bottom:16px}

/* belief */
.belief{text-align:center}
.belief-lead{font-family:var(--f-playfair);font-size:clamp(26px,3.6vw,44px);line-height:1.25;color:var(--teal);max-width:24ch;margin:0 auto}

/* work */
.work-head{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-bottom:50px}
.work-copy .body{margin:14px 0}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

/* features */
.feat-head{margin-bottom:56px}
.feat-head .h-big{margin-top:14px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px}
.feat-ico{width:40px;height:40px;border-radius:8px;background:var(--card);margin-bottom:18px}
.feat .h-med{margin-bottom:10px}
.feat .body{margin-bottom:14px}

/* philosophy */
.philo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.philo-text .h-large-serif{margin:14px 0 18px}
.philo-text .body{margin-bottom:22px;max-width:40ch}

/* team */
.team-head{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.team-side .body{margin-bottom:18px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.team-m .h-med{margin:16px 0 4px}
.role{font-family:var(--f-inter);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.65}

/* office */
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.office-text .body{margin:14px 0}
.office-text .btn-line{margin-top:12px}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.price{border:1px solid rgba(97,129,121,.35);border-radius:14px;padding:34px 30px;text-align:center;background:var(--bg-3)}
.price.featured{background:var(--dark);color:var(--white)}
.price.featured .h-med,.price.featured .price-amt{color:var(--white)}
.price.featured .body,.price.featured .price-sub,.price.featured .price-per{color:rgba(255,255,255,.7)}
.price-sub{display:block;font-family:var(--f-inter);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin:8px 0 14px}
.price .body{margin-bottom:22px}
.price-amt{font-family:var(--f-playfair);font-size:48px;line-height:1;margin-bottom:6px}
.price-per{display:block;font-size:12px;opacity:.6;margin-bottom:22px}
.price-note{text-align:center;font-family:var(--f-inter);font-size:13px;opacity:.6;margin:26px 0 0}
.faq{margin-top:80px}
.faq-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.faq-item{border-top:1px solid rgba(97,129,121,.3)}
.faq-q{display:flex;align-items:center;gap:20px;padding:22px 4px;width:100%;background:none;border:0;color:inherit;text-align:left;cursor:pointer}
.faq-q .cat{font-family:var(--f-inter);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;width:80px}
.faq-q .q{font-family:var(--f-playfair);font-size:clamp(18px,2vw,24px);flex:1}
.faq-q .plus{font-size:22px;opacity:.6;transition:transform .3s}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
.faq-item.open .faq-a{max-height:220px}
.faq-a .body{padding:0 4px 24px;max-width:62ch;opacity:.85}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.testi blockquote{border:0;margin:0}
.testi blockquote p{font-family:var(--f-playfair);font-size:clamp(18px,1.8vw,22px);line-height:1.4;color:var(--teal);margin-bottom:20px}
.testi cite{font-family:var(--f-inter);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-style:normal;opacity:.7}

/* blog */
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.post-meta{display:flex;gap:16px;margin:18px 0 10px;font-family:var(--f-inter);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.post .h-med{margin-bottom:14px;transition:color .25s}
.post:hover .h-med{color:var(--coral)}

/* newsletter */
.news .h-big-serif{max-width:20ch;margin:16px auto 30px}
.news-form{display:flex;max-width:460px;margin:0 auto;border-bottom:1px solid rgba(97,129,121,.5)}
.news-form input{flex:1;background:none;border:0;padding:14px 4px;color:var(--teal);font-family:var(--f-heebo);font-size:16px;outline:none}
.news-form input::placeholder{color:rgba(97,129,121,.6)}
.news-form button{background:none;border:0;color:var(--coral);font-family:var(--f-inter);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:0 8px}

/* instagram */
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}

/* footer */
.footer{background:var(--dark);color:var(--teal);padding:80px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-logo{width:40px;height:40px;margin-bottom:18px}
.foot-brand .body{max-width:32ch;opacity:.8}
.foot-col h5{font-family:var(--f-inter);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:16px;font-weight:600}
.foot-col a{display:block;font-family:var(--f-heebo);font-size:15px;margin-bottom:10px;opacity:.85;transition:color .25s}
.foot-col a:hover{color:var(--coral)}
.foot-bottom{border-top:1px solid rgba(97,129,121,.25);margin-top:56px;padding-top:24px;font-family:var(--f-inter);font-size:12px;letter-spacing:.06em;opacity:.55}

/* subpage extras */
.team-grid-4{grid-template-columns:repeat(4,1fr)}
.contact-cta{background:var(--card)}
.contact-form{max-width:720px;margin:44px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-form .field{display:flex;flex-direction:column;gap:8px}
.contact-form .field.wide{grid-column:1/-1}
.contact-form label{font-family:var(--f-inter);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.contact-form input,.contact-form textarea{background:none;border:0;border-bottom:1px solid rgba(97,129,121,.5);padding:12px 2px;font-family:var(--f-heebo);font-size:16px;color:var(--teal);outline:none}
.contact-form textarea{min-height:90px;resize:vertical}
.contact-form .btn-line{grid-column:1/-1;justify-self:start;margin-top:8px}
.contact-info{display:flex;gap:56px;flex-wrap:wrap;margin-top:50px;justify-content:center}
.contact-info .ci h5{font-family:var(--f-inter);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.contact-info .ci p{font-family:var(--f-playfair);font-size:22px}

/* wordmark, hero rotor, journal excerpts */
.nav-logo{font-family:var(--f-playfair);font-size:23px;letter-spacing:-.6px;color:var(--ink);white-space:nowrap}
.foot-wordmark{display:inline-block;font-family:var(--f-playfair);font-size:24px;letter-spacing:-.5px;margin-bottom:18px}
.rotor{display:inline-block;transition:opacity .45s,transform .45s}
.rotor.swap{opacity:0;transform:translateY(14px)}
.post .excerpt{margin-bottom:14px;opacity:.85;max-width:52ch}

/* section responsive */
@media(max-width:860px){
  .threeup,.work-grid,.feat-grid,.team-grid,.price-grid,.testi-grid,.blog-grid{grid-template-columns:1fr;gap:30px}
  .team-grid-4{grid-template-columns:1fr 1fr}
  .work-head,.team-head,.philo-grid,.office-grid{grid-template-columns:1fr;gap:28px}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .contact-form{grid-template-columns:1fr}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:991px){
  .navlink,.btn-outline,.nav-left{display:none}
  .nav{justify-content:space-between}
  .nav-right{flex:0}
  .burger{display:flex}
  .hero-section{min-height:auto}
  .hero-bg{position:relative;height:46vw;min-height:280px}
  .hero-column{width:auto;max-width:none;margin-left:0;min-height:auto;padding:56px 28px 40px}
  .hero-text{font-size:clamp(38px,10vw,60px);line-height:1}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}