/* ============================================================
   EVOLVE — Movement Dept.  |  Brand Guide Vol. One
   Colours, type, and components built to the studio standard.
   ============================================================ */

:root{
  --sunlight:#F0E2BC;
  --mist:#F8F0DE;
  --moss:#57694F;
  --moss-deep:#42513B;
  --ink:#25242A;
  --ink-80:rgba(37,36,42,.80);
  --ink-55:rgba(37,36,42,.55);
  --bone:#F5F2EC;
  --oak:#B99B7B;
  --slate:#9C9AA3;

  --serif:'Italiana', Georgia, 'Times New Roman', serif;
  --label:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'Barlow', system-ui, -apple-system, sans-serif;

  --maxw:1200px;
  --gutter:clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--label);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:13px;
  font-weight:500;
  color:var(--moss);
  margin:0 0 18px;
  display:block;
}
.eyebrow.light{color:var(--sunlight);}
.eyebrow.slate{color:var(--slate);}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.005em;line-height:1.08;margin:0;}
h1{font-size:clamp(2.6rem, 6.4vw, 5rem);}
h2{font-size:clamp(2rem, 4.2vw, 3.2rem);}
h3{font-size:clamp(1.4rem, 2.4vw, 1.9rem);line-height:1.15;}

p{margin:0 0 1.15em;max-width:64ch;}
.lead{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.65;font-weight:300;}
.muted{color:var(--ink-55);}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.section{padding:clamp(64px,9vw,130px) 0;}
.section.tight{padding:clamp(48px,6vw,84px) 0;}
.bg-ink{background:var(--ink);color:var(--bone);}
.bg-ink .muted{color:rgba(245,242,236,.6);}
.bg-moss{background:var(--moss);color:var(--bone);}
.bg-moss .eyebrow{color:var(--sunlight);}
.bg-sun{background:var(--sunlight);color:var(--ink);}
.bg-mist{background:var(--mist);color:var(--ink);}

.grid{display:grid;gap:clamp(28px,4vw,60px);}
.two{grid-template-columns:1fr 1fr;align-items:center;}
.three{grid-template-columns:repeat(3,1fr);}
.center{text-align:center;}
.center p{margin-inline:auto;}
.narrow{max-width:760px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;
  font-size:14px;font-weight:500;
  padding:16px 30px;border:1px solid var(--ink);
  background:var(--ink);color:var(--bone);
  cursor:pointer;transition:.25s ease;
}
.btn:hover{background:transparent;color:var(--ink);}
.btn.moss{background:var(--moss);border-color:var(--moss);color:var(--bone);}
.btn.moss:hover{background:transparent;color:var(--moss);}
.btn.light{background:var(--sunlight);border-color:var(--sunlight);color:var(--ink);}
.btn.light:hover{background:transparent;color:var(--sunlight);}
.btn.ghost{background:transparent;color:var(--bone);border-color:rgba(245,242,236,.5);}
.btn.ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);}
.btn .arw{transition:transform .25s ease;}
.btn:hover .arw{transform:translateX(4px);}

/* ---------- Logo mark ---------- */
.logo{display:flex;align-items:center;}
.logo .word{
  font-family:var(--serif);font-size:1.7rem;letter-spacing:.1em;
  line-height:1;display:inline-flex;align-items:center;
}
.mark-o{height:.9em;width:auto;margin:0 .015em;transform:translateY(1px);}
.mark-lg{width:52px;height:auto;}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  background:rgba(37,36,42,0);
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid rgba(245,242,236,0);
}
.nav, .nav a{color:var(--bone);}
.nav.solid{
  background:var(--ink-80);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(245,242,236,.10);
  padding-block:14px;
}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;
  font-size:13px;font-weight:500;position:relative;padding:4px 0;
  opacity:.85;transition:opacity .2s;
}
.nav-links a:hover,.nav-links a.active{opacity:1;}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--sunlight);
}
.nav-links .btn{padding:11px 22px;color:var(--ink);}
.nav-links .btn.light:hover{color:var(--sunlight);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--bone);margin:5px 0;transition:.3s;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:var(--bone);overflow:hidden;}
.hero.short{min-height:64vh;}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(37,36,42,.55) 0%, rgba(37,36,42,.15) 35%, rgba(37,36,42,.30) 60%, rgba(37,36,42,.88) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(50px,8vw,96px);padding-top:120px;}
.hero h1{max-width:15ch;}
.hero .lead{color:rgba(245,242,236,.9);max-width:52ch;margin-top:22px;}
.hero-cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- Media figure ---------- */
.figure{position:relative;overflow:hidden;background:var(--ink);}
.figure img{width:100%;height:100%;object-fit:cover;}
.figure.tall{aspect-ratio:4/5;}
.figure.portrait{aspect-ratio:3/4;}
.figure.wide{aspect-ratio:3/2;}
.figure.square{aspect-ratio:1/1;}
.figure .cap{
  position:absolute;left:16px;bottom:14px;z-index:2;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.26em;
  font-size:11px;color:var(--sunlight);
}
.figure.captioned::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(37,36,42,.6),transparent 45%);}

/* ---------- Cards ---------- */
.card{background:#fff;padding:34px 30px;border-top:2px solid var(--moss);height:100%;}
.card.oak{border-top-color:var(--oak);}
.card.slate{border-top-color:var(--slate);}
.card h3{margin-bottom:12px;}
.card p{margin-bottom:0;font-size:.96rem;}
.card .num{font-family:var(--label);letter-spacing:.24em;font-size:12px;color:var(--slate);display:block;margin-bottom:16px;}

/* ---------- Pillar / feature rows ---------- */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.feature-row.flip .feature-media{order:2;}
.feature-media .figure{aspect-ratio:4/5;}

/* ---------- Service block ---------- */
.svc{border-top:1px solid rgba(37,36,42,.15);padding:44px 0;display:grid;grid-template-columns:.9fr 1.4fr .9fr;gap:40px;align-items:start;}
.svc:last-child{border-bottom:1px solid rgba(37,36,42,.15);}
.svc h3{font-size:clamp(1.6rem,2.6vw,2.1rem);}
.svc .price{font-family:var(--serif);font-size:1.5rem;}
.svc .price small{font-family:var(--label);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);display:block;margin-top:4px;}
.svc ul{list-style:none;margin:14px 0 0;padding:0;}
.svc ul li{position:relative;padding-left:22px;margin-bottom:8px;font-size:.95rem;}
.svc ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--moss);border-radius:50%;}

/* Generic branded list */
.blist{list-style:none;margin:22px 0 0;padding:0;}
.blist li{position:relative;padding-left:26px;margin-bottom:15px;font-size:1rem;line-height:1.55;}
.blist li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--moss);border-radius:50%;}
.bg-ink .blist li::before,.bg-moss .blist li::before{background:var(--sunlight);}
/* Light panel sitting inside a dark section */
.inbody-box, .inbody-box li, .inbody-box p, .inbody-box h3{color:var(--ink);}
.inbody-box .blist li::before{background:var(--moss);}

/* Abstract hero (brand-guide style) */
.hero-abstract{position:relative;background:var(--ink);color:var(--bone);min-height:96vh;display:flex;align-items:center;overflow:hidden;}
.hero-abstract .art{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero-abstract .glow{position:absolute;z-index:0;width:70vw;height:70vw;max-width:900px;max-height:900px;right:-12vw;top:-14vw;
  background:radial-gradient(circle, rgba(240,226,188,.16) 0%, rgba(240,226,188,0) 62%);pointer-events:none;}
.hero-abstract .hero-inner{position:relative;z-index:2;padding:150px 0 90px;}

/* Photo-backed hero (oak slat wall) */
.hero-wood .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;}
.hero-wood::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(37,36,42,.92) 0%, rgba(37,36,42,.78) 42%, rgba(37,36,42,.42) 72%, rgba(37,36,42,.30) 100%),
             linear-gradient(180deg, rgba(37,36,42,.55) 0%, rgba(37,36,42,0) 30%, rgba(37,36,42,.45) 100%);
}
@media(max-width:900px){
  .hero-wood::after{background:linear-gradient(180deg, rgba(37,36,42,.72) 0%, rgba(37,36,42,.62) 50%, rgba(37,36,42,.86) 100%);}
}
.hero-abstract .markline{display:flex;align-items:center;gap:16px;margin-bottom:30px;}
.hero-abstract .markline .mk{width:34px;height:auto;}
.hero-abstract h1{max-width:16ch;}
.hero-abstract .lead{color:rgba(245,242,236,.82);max-width:50ch;margin-top:24px;}

/* Steps (redesigned) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:12px;}
.step{position:relative;padding:36px 26px 32px;background:var(--moss);color:var(--bone);border-left:1px solid rgba(245,242,236,.16);}
.step:first-child{border-left:0;}
.step:nth-child(2){background:var(--moss-deep);}
.step:nth-child(3){background:var(--moss);}
.step:nth-child(4){background:var(--moss-deep);}
.step .sn{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--sunlight);display:block;margin-bottom:18px;}
.step h3{font-size:1.5rem;margin-bottom:10px;}
.step p{font-size:.92rem;margin:0;color:rgba(245,242,236,.85);}

/* ---------- Stat / promise strip ---------- */
.promise{font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.2;max-width:20ch;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.stat .n{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:var(--sunlight);}
.stat .l{font-family:var(--label);text-transform:uppercase;letter-spacing:.24em;font-size:12px;margin-top:10px;color:rgba(245,242,236,.7);}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;}
.gallery .g{overflow:hidden;background:var(--ink);}
.gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.gallery .g:hover img{transform:scale(1.04);}
.g.a{grid-column:span 7;aspect-ratio:3/2;}
.g.b{grid-column:span 5;aspect-ratio:3/2;}
.g.c{grid-column:span 4;aspect-ratio:3/4;}
.g.d{grid-column:span 4;aspect-ratio:3/4;}
.g.e{grid-column:span 4;aspect-ratio:3/4;}
.g.full{grid-column:span 12;aspect-ratio:21/9;}
.g.half{grid-column:span 6;aspect-ratio:3/2;}

/* ---------- Quote ---------- */
.quote{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.25;max-width:22ch;margin:0 auto;text-align:center;}
.quote .by{display:block;font-family:var(--label);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--moss);margin-top:26px;}
.bg-ink .quote .by,.bg-moss .quote .by{color:var(--sunlight);}

/* ---------- Form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
label{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--moss);}
input,textarea,select{
  font-family:var(--body);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid rgba(37,36,42,.2);
  padding:14px 16px;border-radius:0;transition:border-color .2s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--moss);}
textarea{resize:vertical;min-height:130px;}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--bone);padding:70px 0 40px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(245,242,236,.12);}
.footer .word{color:var(--bone);}
.footer h4{font-family:var(--label);text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--slate);margin:0 0 16px;font-weight:500;}
.footer a{display:block;opacity:.8;margin-bottom:8px;font-size:.95rem;transition:opacity .2s;}
.footer a:hover{opacity:1;color:var(--sunlight);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-family:var(--label);letter-spacing:.18em;text-transform:uppercase;font-size:11px;color:rgba(245,242,236,.5);flex-wrap:wrap;gap:10px;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .two,.feature-row,.three,.form-grid{grid-template-columns:1fr;}
  .feature-row.flip .feature-media{order:0;}
  .svc{grid-template-columns:1fr;gap:14px;padding:34px 0;}
  .stats{grid-template-columns:1fr 1fr;gap:24px;}
  .steps{grid-template-columns:1fr 1fr;}
  .step:nth-child(3){border-left:0;}
  .gallery{grid-template-columns:repeat(6,1fr);}
  .g.a,.g.b{grid-column:span 6;}
  .g.c,.g.d,.g.e{grid-column:span 2;aspect-ratio:2/3;}
  .g.full{aspect-ratio:16/9;}
  .g.half{grid-column:span 6;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
    background:var(--ink);flex-direction:column;justify-content:center;
    align-items:flex-start;padding:40px;gap:26px;
    transform:translateX(100%);transition:transform .35s ease;
    box-shadow:-20px 0 60px rgba(0,0,0,.4);
  }
  .nav-links.open{transform:none;}
  .nav-links a{font-size:16px;}
  .nav-toggle{display:block;z-index:60;}
  .nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.menu-open .nav-toggle span:nth-child(2){opacity:0;}
  .nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .step{border-left:0;border-top:1px solid rgba(245,242,236,.16);}
  .hero{min-height:88vh;}
  .footer-top{grid-template-columns:1fr;}
}