:root {
  --bg: #f6f2eb;
  --bg-2: #fbf8f4;
  --surface: rgba(255,255,255,.74);
  --surface-strong: #ffffff;
  --line: rgba(104, 76, 53, .12);
  --line-strong: rgba(104, 76, 53, .22);
  --text: #2f241c;
  --muted: #746457;
  --accent: #c78657;
  --accent-deep: #a96842;
  --accent-soft: #ecd8c2;
  --shadow: 0 24px 70px rgba(112, 84, 58, .12);
  --shadow-soft: 0 14px 36px rgba(112, 84, 58, .08);
  --radius-xl: 2rem;
  --radius-lg: 1.5rem;
  --radius-md: 1.1rem;
  --radius-sm: .9rem;
  --container: 1280px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.95), transparent 22%),
    radial-gradient(circle at 92% 18%, rgba(236,216,194,.65), transparent 20%),
    linear-gradient(180deg, #fcfaf7 0%, #f7f2eb 48%, #f6f2eb 100%);
  overflow-x:hidden;
}
img{display:block;width:100%}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.04;
  background-image: radial-gradient(rgba(91,68,49,.22) .6px, transparent .6px);
  background-size: 12px 12px;
}
.ambient{position:fixed; border-radius:999px; filter:blur(90px); pointer-events:none; z-index:0}
.ambient--one{width:26rem; height:26rem; left:-5rem; top:6rem; background:rgba(255,230,208,.65)}
.ambient--two{width:22rem; height:22rem; right:-4rem; top:28rem; background:rgba(235,214,190,.55)}

.container{width:min(var(--container), calc(100% - 2rem)); margin:0 auto; position:relative; z-index:1}

.header{
  position:sticky; top:0; z-index:20;
  background:rgba(251,248,244,.7); backdrop-filter:blur(18px);
  border-bottom:1px solid transparent; transition:.3s var(--ease);
}
.header.is-scrolled{border-color:var(--line); box-shadow:0 12px 30px rgba(80,56,37,.04)}
.header__inner{min-height:5.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.logo{display:flex; align-items:center; gap:.9rem}
.logo__mark{width:3rem; height:3rem; border-radius:1rem; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); box-shadow:0 14px 24px rgba(199,134,87,.25)}
.logo__text{display:flex; flex-direction:column; gap:.15rem}
.logo__text strong{font-size:1rem}
.logo__text small{font-size:.72rem; color:var(--muted)}
.nav{display:flex; gap:1.5rem; align-items:center}
.nav a{font-size:.95rem; color:var(--muted); transition:.25s ease}
.nav a:hover{color:var(--text)}
.burger{display:none; width:2.8rem; height:2.8rem; border-radius:1rem; border:1px solid var(--line); background:rgba(255,255,255,.7)}
.burger span{display:block; width:1.1rem; height:2px; margin:.22rem auto; background:var(--text)}
.mobile-nav{display:none; padding:0 1rem 1rem; flex-direction:column; gap:.7rem}
.mobile-nav a{padding:.9rem 1rem; border-radius:1rem; background:rgba(255,255,255,.75); border:1px solid var(--line)}
.mobile-nav.is-open{display:flex}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:3.25rem; padding:0 1.35rem; border-radius:999px; border:1px solid transparent; font-weight:600; transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent-deep)); color:#fff; box-shadow:0 18px 34px rgba(199,134,87,.22)}
.btn--ghost,.btn--small{background:rgba(255,255,255,.72); border-color:var(--line)}
.btn--small{min-height:2.8rem; padding:0 1.05rem}

.eyebrow{display:inline-flex; padding:.55rem .9rem; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid rgba(199,134,87,.18); color:var(--accent); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase}

.hero{padding:3rem 0 0}
.hero__layout{display:grid; grid-template-columns:1.02fr .98fr; gap:2rem; min-height:calc(100vh - 8rem); align-items:center}
.hero__content h1{margin:1.1rem 0 1rem; font-size:clamp(2.7rem, 6vw, 5.4rem); line-height:.96; letter-spacing:-.05em}
.hero__content h1 span{display:block; margin-top:.45rem; color:var(--accent-deep)}
.hero__content p{max-width:42rem; color:var(--muted); font-size:1.04rem; line-height:1.85}
.hero__actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem}
.hero__facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem}
.fact-card{padding:1.25rem; border-radius:1.4rem; background:rgba(255,255,255,.7); border:1px solid var(--line); box-shadow:var(--shadow-soft)}
.fact-card strong{display:block; font-size:clamp(1.7rem,3vw,2.5rem); margin-bottom:.25rem}
.fact-card span{font-size:.92rem; color:var(--muted); line-height:1.45}

.hero__visual{display:grid; gap:1rem}
.hero-main-card,.hero-side-card,.service,.info-card,.team-card,.price-card,.contact-panel,.pricing-box,.signup-box{background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62)); border:1px solid var(--line); box-shadow:var(--shadow-soft)}
.hero-main-card{position:relative; overflow:hidden; border-radius:2rem; min-height:32rem}
.hero-main-card img{height:32rem; object-fit:cover}
.hero-main-card__panel{position:absolute; left:1rem; right:1rem; bottom:1rem; padding:1.1rem 1.2rem; border-radius:1.35rem; background:rgba(255,255,255,.68); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.7)}
.hero-main-card__panel span{font-size:.78rem; color:var(--accent-deep); text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.hero-main-card__panel h2{margin:.5rem 0 0; font-size:1.35rem; line-height:1.3}
.hero-side-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.hero-side-card{overflow:hidden; border-radius:1.6rem; min-height:13rem}
.hero-side-card img{height:13rem; object-fit:cover}

.ticker{margin-top:2rem; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.35)}
.ticker__track{display:flex; gap:2rem; white-space:nowrap; padding:1rem 0; animation:marquee 24s linear infinite}
.ticker__track span{color:var(--muted); position:relative}
.ticker__track span::after{content:'✦'; margin-left:2rem; color:var(--accent)}

.section{padding:6.8rem 0; position:relative; z-index:1}
.section-copy{max-width:47rem; margin-bottom:2rem}
.section-copy--center{text-align:center; margin-left:auto; margin-right:auto}
.section-copy h2,.space__head h2,.signup-box__text h2,.contact-panel h2{margin:.8rem 0 1rem; font-size:clamp(2rem,4.4vw,4rem); line-height:1.02; letter-spacing:-.045em}
.section-copy h2 span,.space__head h2 span,.signup-box__text h2 span,.contact-panel h2 span{color:var(--accent-deep)}
.section-copy p,.space__head p,.signup-box__text p,.contact-panel p{color:var(--muted); line-height:1.8}

.about__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:1.2rem; align-items:start}
.about__cards{display:grid; gap:1rem}
.info-card{padding:1.5rem; border-radius:1.6rem}
.info-card__num{display:inline-flex; margin-bottom:1.4rem; color:var(--accent); font-weight:800}
.info-card h3{margin:0 0 .7rem; font-size:1.35rem}
.info-card p{margin:0; color:var(--muted); line-height:1.75}

.directions-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1rem}
.service{padding:1.5rem; border-radius:1.6rem}
.service--large{grid-row:span 2; overflow:hidden; padding:0}
.service--large img{height:100%; min-height:30rem; object-fit:cover}
.service__body{padding:1.3rem 1.4rem}
.service h3{margin:0 0 .65rem; font-size:1.45rem}
.service p{margin:0; color:var(--muted); line-height:1.75}

.space__head{max-width:52rem; margin-bottom:2rem}
.space-grid{width:min(1400px, calc(100% - 2rem)); margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr; grid-auto-rows:16rem; gap:1rem; position:relative; z-index:1}
.space-grid__item{overflow:hidden; border-radius:1.8rem; box-shadow:var(--shadow); border:1px solid var(--line)}
.space-grid__item img{height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.space-grid__item:hover img{transform:scale(1.05)}
.space-grid__item--large{grid-row:span 2}

.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.team-card{padding:1rem; border-radius:1.5rem}
.team-card img{aspect-ratio:1 / 1.15; object-fit:cover; border-radius:1.2rem; margin-bottom:1rem}
.team-card h3{margin:0 0 .45rem; font-size:1.05rem; line-height:1.35}
.team-card p{margin:0; color:var(--muted); line-height:1.65; font-size:.93rem}

.pricing-box{padding:2rem; border-radius:2rem}
.pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.price-card{padding:1.5rem; border-radius:1.5rem}
.price-card h3{margin:0 0 1rem; font-size:1.5rem}
.price-card ul{list-style:none; margin:0; padding:0}
.price-card li{display:flex; justify-content:space-between; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--line)}
.price-card li:last-child{border-bottom:0}
.price-card li span{color:var(--muted)}
.price-card li strong{white-space:nowrap}

.signup-box{padding:2rem; border-radius:2rem; display:grid; grid-template-columns:1fr .95fr; gap:2rem; align-items:center}
.signup-tags{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem}
.signup-tags span{padding:.7rem .95rem; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid var(--line); color:var(--muted); font-size:.88rem}
.signup-form{display:grid; gap:.85rem; padding:1.2rem; border-radius:1.5rem; background:rgba(255,255,255,.62); border:1px solid var(--line)}
.input{width:100%; min-height:3.45rem; padding:0 1rem; border-radius:1rem; border:1px solid rgba(104,76,53,.13); background:rgba(255,255,255,.82); outline:none; transition:border-color .2s ease, box-shadow .2s ease}
.input:focus{border-color:rgba(199,134,87,.55); box-shadow:0 0 0 4px rgba(199,134,87,.12)}
.input--area{min-height:8rem; padding-top:1rem; resize:vertical}

.contacts-grid{display:grid; grid-template-columns:1fr .95fr; gap:1rem}
.contact-panel{padding:1.6rem; border-radius:1.7rem}
.contact-panel h3{margin:0 0 1rem; font-size:1.35rem}
.contact-panel ul{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:1rem}
.contact-panel li{display:grid; gap:.3rem}
.contact-panel li span{color:var(--muted); font-size:.9rem}
.socials{display:flex; flex-wrap:wrap; gap:.8rem; margin:1rem 0 1.2rem}
.socials a{padding:.85rem 1rem; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid var(--line); transition:.25s ease}
.socials a:hover{transform:translateY(-2px); border-color:var(--line-strong)}

.footer{padding:2rem 0 3rem; border-top:1px solid var(--line)}
.footer__inner{display:flex; justify-content:space-between; gap:1rem; color:var(--muted)}
.footer__inner p{margin:.35rem 0 0}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-visible{opacity:1; transform:translateY(0)}
.reveal--delay-1{transition-delay:.08s}
.reveal--delay-2{transition-delay:.16s}
.reveal--delay-3{transition-delay:.24s}
.reveal--delay-4{transition-delay:.32s}
.reveal--delay-5{transition-delay:.40s}
.reveal--delay-6{transition-delay:.48s}
.tilt-card,.float-card{transform-style:preserve-3d; transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.tilt-card:hover,.float-card:hover{box-shadow:0 28px 60px rgba(112,84,58,.15)}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto !important}}

@media (max-width:1100px){
  .hero__layout,.about__grid,.signup-box,.contacts-grid,.pricing-grid{grid-template-columns:1fr}
  .directions-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .space-grid{grid-template-columns:1fr 1fr; grid-auto-rows:15rem}
}
@media (max-width:820px){
  .nav,.btn--small{display:none}
  .burger{display:block}
  .hero__facts,.team-grid,.directions-grid,.pricing-grid,.space-grid,.hero-side-grid{grid-template-columns:1fr}
  .space-grid__item--large{grid-row:auto}
  .footer__inner{flex-direction:column}
}