/* ===== Design Tokens ===== */
:root{
  --brand:#4E1727;
  --bg:#ffffff;
  --surface:#F7F6F4;
  --text:#1A1A1A;
  --text-muted:rgba(26,26,26,0.7);
  --text-light:rgba(26,26,26,0.8);
  --white:#ffffff;
  --footer-bg:#121212;
  --nav-muted:rgba(255,255,255,0.59);
  --footer-muted:rgba(255,255,255,0.58);
  --border:rgba(78,23,39,0.1);
  --font-head:"Playfair Display",serif;
  --font-body:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --pad:clamp(20px,11.04vw,159px);
  --gap:clamp(16px,2.2vw,32px);
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scrollbar-width:thin;
  scrollbar-color:var(--brand) transparent;
}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brand);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#6b2038}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
.mobile-br{display:none}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ===== Container ===== */
.container{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

/* ===== Header ===== */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:81px;
  background:var(--brand);
  border-bottom:1px solid rgba(255,255,255,0.12);
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
}
.header .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header__brand{
  font-family:var(--font-head);
  font-size:clamp(18px,2vw,24px);
  font-weight:400;
  color:var(--white);
  white-space:nowrap;
}
.header__links{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.2vw,32px);
}
.header__link{
  font-size:16px;
  font-weight:400;
  color:var(--nav-muted);
  white-space:nowrap;
  transition:color .2s;
}
.header__link:hover{color:var(--white)}
.header__link--current{
  font-weight:500;
  color:var(--white);
}
.header__toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:32px;height:32px;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.header__toggle span{
  display:block;
  width:24px;height:2px;
  background:var(--white);
  border-radius:2px;
  transition:transform .3s,opacity .3s;
}

/* ===== Page heading (shared pattern) ===== */
.page-heading{
  padding:clamp(48px,6vw,96px) 0 clamp(40px,5vw,72px);
  background:var(--surface);
}
.page-heading__title{
  font-family:var(--font-head);
  font-size:clamp(32px,5vw,48px);
  font-weight:500;
  line-height:1;
  color:var(--brand);
}
.page-heading__sub{
  margin-top:16px;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.4;
  color:var(--text-muted);
  max-width:768px;
}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:clamp(500px,56vw,784px);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero__bg{
  position:absolute;
  inset:0;
  background:url("./assets/hero-bg-77fa32.png") center/cover no-repeat;
  z-index:0;
}
.hero__content{
  position:relative;
  z-index:2;
  max-width:700px;
}
.hero__h1{
  font-family:var(--font-head);
  font-size:clamp(32px,5vw,60px);
  font-weight:500;
  line-height:1.25;
  color:var(--white);
}
.hero__subtitle{
  margin-top:clamp(12px,2vw,24px);
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.6;
  color:var(--white);
}
.hero__actions{
  margin-top:clamp(24px,3vw,48px);
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.hero__photo{
  position:absolute;
  right:0;
  top:18%;
  width:45%;
  height:96%;
  background:url("./assets/hero-photo-2f8064.png") center/cover no-repeat;
  z-index:1;
}
.hero-detail{
  background:var(--brand);
  min-height:637px;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.hero-detail::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:clamp(320px,30vw,460px);
  aspect-ratio:500/501;
  background:url("./assets/hero-detail-h.svg") center/contain no-repeat;
  opacity:.5;
  pointer-events:none;
}
.hero-detail__copy{
  max-width:652px;
  margin:0 auto;
  color:var(--white);
  text-align:center;
  font-size:16px;
  line-height:1.625;
  position:relative;
  z-index:1;
}
.hero-detail__copy p+p{margin-top:20px}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:56px;
  padding:0 24px;
  font-weight:500;
  font-size:16px;
  white-space:nowrap;
  border:none;
  cursor:pointer;
  transition:transform .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(78,23,39,0.18)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn--primary{background:var(--white);color:var(--brand)}
.btn--outline{background:rgba(255,255,255,0.06);color:var(--white);border:2px solid var(--white)}
.btn--brand{background:var(--brand);color:var(--white)}
.btn--full{width:100%}
.btn img,.btn svg{width:20px;height:20px;flex-shrink:0}
.btn--brand img,.btn--outline img{filter:brightness(0) invert(1)}

/* ===== Section Spacing ===== */
.section{padding:clamp(48px,7vw,112px) 0}
.section--surface{background:var(--surface)}
.section--brand{background:var(--brand);color:var(--white)}
.section--dark{background:var(--footer-bg);color:var(--white)}

/* ===== Cards Grid ===== */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
  gap:var(--gap);
}
.card{
  padding:clamp(24px,2.5vw,32px);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:transform .18s,box-shadow .18s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(78,23,39,0.10)}
.card__icon{width:48px;height:48px}
.card__title{
  font-family:var(--font-head);
  font-size:clamp(20px,1.7vw,24px);
  font-weight:500;
  line-height:1.33;
  color:var(--brand);
}
.card__text{
  font-size:16px;
  line-height:1.625;
  color:var(--text-muted);
}

/* ===== Summary Grid (services page) ===== */
.summary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media(max-width:900px){.summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.summary-grid{grid-template-columns:1fr}}
.summary-card{
  padding:25px;
  background:var(--white);
  border:1px solid rgba(78,23,39,0.1);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.summary-card__title{
  font-family:var(--font-head);
  font-size:20px;
  font-weight:500;
  line-height:1.4;
  color:var(--brand);
}
.summary-card__text{
  font-size:16px;
  line-height:1.625;
  color:#6B6B6B;
}

/* ===== Section Header ===== */
.section-header{margin-bottom:clamp(32px,4vw,64px)}
.section-header__title{
  font-family:var(--font-head);
  font-size:clamp(28px,3.5vw,36px);
  font-weight:500;
  line-height:1.11;
  color:var(--brand);
}
.section-header__sub{
  margin-top:16px;
  max-width:782px;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.4;
  color:var(--text-muted);
}
.section-header--center{text-align:center}
.section-header--center .section-header__sub{margin-left:auto;margin-right:auto}
.section-header--white .section-header__title{color:var(--white)}
.section-header--white .section-header__sub{color:rgba(255,255,255,0.9)}

/* ===== Inline link ===== */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:clamp(24px,3vw,48px);
  font-weight:500;
  font-size:16px;
  color:var(--brand);
  transition:color .2s;
}
.link-arrow--center{
  width:100%;
  justify-content:center;
}
.link-arrow:hover{color:#2c0d16}
.link-arrow img{width:20px;height:20px}

/* ===== Why Section (split layout) ===== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,4.4vw,64px);
  align-items:center;
}
.split__img{
  width:100%;
  aspect-ratio:576/500;
  object-fit:cover;
  background:center/cover no-repeat;
  border-radius:0;
}
.split__list{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.split__item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  font-size:16px;
  line-height:1.625;
  color:var(--text-muted);
}
.split__item img{width:24px;height:24px;flex-shrink:0;margin-top:2px}
.split__dot{
  flex-shrink:0;
  width:8px;height:8px;
  background:var(--brand);
  margin-top:8px;
}

/* ===== CTA Banner ===== */
.cta-banner{
  padding:clamp(32px,4vw,64px) 0;
  text-align:center;
}
.cta-banner__title{
  font-family:var(--font-head);
  font-size:clamp(28px,3.5vw,36px);
  font-weight:500;
  line-height:1.11;
}
.cta-banner__text{
  margin:24px auto 0;
  max-width:752px;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.4;
  opacity:.9;
}
.cta-banner .btn{margin-top:48px}

/* ===== Footer ===== */
.footer{
  background:var(--footer-bg);
  color:var(--white);
  padding:48px 0 0;
}
.footer__top{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:clamp(24px,3vw,48px);
}
.footer__brand-name{
  font-family:var(--font-head);
  font-size:20px;
  font-weight:500;
  line-height:1.4;
}
.footer__brand-tag{
  margin-top:16px;
  font-size:16px;
  color:var(--footer-muted);
}
.footer__heading{
  font-family:var(--font-head);
  font-size:18px;
  font-weight:500;
  margin-bottom:16px;
}
.footer__list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer__list a{
  font-size:16px;
  color:var(--footer-muted);
  transition:color .2s,transform .2s;
  display:inline-block;
}
.footer__list a:hover{color:var(--white);transform:translateX(2px)}
.footer__text{
  font-size:16px;
  color:var(--footer-muted);
  margin-bottom:8px;
}
.footer__bottom{
  margin-top:48px;
  padding:24px 0;
  border-top:1px solid var(--border);
  text-align:center;
  font-size:14px;
  color:var(--footer-muted);
}

/* ===== About ===== */
.about-intro{
  display:grid;
  grid-template-columns:493fr 576fr;
  gap:clamp(40px,8.5vw,123px);
  align-items:start;
}
.about-photo{
  position:relative;
}
.about-photo__decor{
  position:absolute;
  top:34px;left:16px;
  width:104%;height:101%;
  background:var(--brand);
  z-index:0;
}
.about-photo__img{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:493/614;
  background:url("./assets/about/about-photo-4a8ac0.png") center/cover no-repeat;
}
.about-text{
  display:flex;
  flex-direction:column;
  gap:24px;
  font-size:17px;
  line-height:1.625;
  color:var(--text-light);
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  max-width:840px;
  margin:0 auto;
}
@media(max-width:600px){.trust-grid{grid-template-columns:1fr;gap:24px}}
.trust-item{
  width:100%;
  min-height:88px;
  padding:16px;
  background:var(--white);
  border:1px solid rgba(0,0,0,0.05);
  display:flex;
  align-items:center;
  gap:16px;
  font-size:18px;
  line-height:1.556;
  color:#1A1A1A;
  transition:transform .18s,box-shadow .18s;
}
.trust-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(78,23,39,0.10)}
.trust-item img{width:24px;height:24px;flex-shrink:0}

.approach{
  text-align:center;
  max-width:832px;
  margin:0 auto;
}
.approach__title{
  font-family:var(--font-head);
  font-size:clamp(28px,3.5vw,36px);
  font-weight:500;
  line-height:1.11;
  color:var(--brand);
}
.approach__text{
  margin-top:24px;
  font-size:16px;
  line-height:1.625;
  color:var(--text-muted);
}

/* ===== Services Page ===== */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,500px),1fr));
  gap:var(--gap);
}
.svc-card{
  padding:clamp(24px,3vw,40px);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:transform .18s,box-shadow .18s;
}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(78,23,39,0.10)}
.svc-card__icon{width:48px;height:48px}
.svc-card__title{
  font-family:var(--font-head);
  font-size:clamp(22px,2vw,30px);
  font-weight:500;
  line-height:1.2;
  color:var(--brand);
}
.svc-card__list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.svc-card__list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:16px;
  line-height:1.625;
  color:rgba(26,26,26,0.8);
}
.svc-card__list li .split__dot{margin-top:8px}
.svc-card__list li img{width:20px;height:20px;flex-shrink:0;margin-top:3px}
.online-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,4.4vw,64px);
  align-items:start;
}
.online-split__icon{
  width:64px;
  height:64px;
  margin-bottom:24px;
}
.online-split__title{
  font-family:var(--font-head);
  font-weight:500;
  font-size:clamp(28px,2.5vw,36px);
  line-height:1.111;
  color:var(--brand);
  margin-bottom:24px;
}
.online-split__text{
  font-size:18px;
  line-height:1.625;
  color:rgba(26,26,26,0.8);
  margin-bottom:32px;
}
.online-img{
  width:100%;
  aspect-ratio:576/500;
  background:url("./assets/services/services-side.png") center/cover no-repeat;
}
.online-split__benefits-title{
  font-family:var(--font-head);
  font-weight:500;
  font-size:20px;
  line-height:1.4;
  color:#1A1A1A;
  margin-bottom:16px;
}
.online-split .split__list{gap:12px}
.online-split .split__item{
  font-size:16px;
  line-height:1.5;
  color:rgba(26,26,26,0.8);
}
.section--brand .cta-banner .btn--brand{
  background:var(--white);
  color:var(--brand);
}
.cta-banner--light .cta-banner__title{color:var(--brand)}
.cta-banner--light .cta-banner__text{color:rgba(26,26,26,0.7);opacity:1}

/* ===== How Steps ===== */
.steps{
  display:flex;
  flex-direction:column;
  gap:clamp(40px,5.5vw,80px);
}
.step{
  display:flex;
  gap:40px;
  align-items:flex-start;
}
.step__num{
  flex-shrink:0;
  font-family:'Times New Roman',Times,serif;
  font-size:clamp(64px,6.6vw,96px);
  font-weight:400;
  line-height:1;
  color:rgba(78,23,39,0.2);
}
.step__title{
  font-family:var(--font-head);
  font-size:clamp(22px,2vw,30px);
  font-weight:500;
  line-height:1.2;
  color:var(--brand);
}
.step__text{
  margin-top:16px;
  font-size:18px;
  line-height:1.625;
  color:rgba(26,26,26,0.7);
}

/* ===== Blog Grid ===== */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
  gap:clamp(24px,3.8vw,56px) var(--gap);
}
.post-card{
  border:1px solid rgba(78,23,39,0.2);
  background:var(--white);
  display:flex;
  flex-direction:column;
  transition:transform .18s,box-shadow .18s;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(78,23,39,0.10)}
.post-card__img{
  width:100%;
  aspect-ratio:384/256;
  object-fit:cover;
  background:center/cover no-repeat;
  cursor:pointer;
}
.post-card__body{
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1;
}
.post-card__meta{font-size:14px;color:#6B6B6B}
.post-card__title{
  font-family:var(--font-head);
  font-size:20px;
  font-weight:500;
  line-height:1.4;
  color:var(--brand);
}
.post-card__excerpt{
  font-size:16px;
  line-height:1.625;
  color:var(--text-muted);
}
.post-card__link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:500;
  font-size:16px;
  color:var(--brand);
}
.post-card__link img{width:16px;height:16px}
.post-card__link:hover{text-decoration:underline}
.post-card__link--static{opacity:.75;pointer-events:none}

/* ===== Subscribe ===== */
.subscribe{text-align:center}
.subscribe__title{
  font-family:var(--font-head);
  font-size:clamp(28px,3.5vw,36px);
  font-weight:500;
  line-height:1.11;
  color:var(--brand);
}
.subscribe__sub{
  margin-top:16px;
  font-size:16px;
  line-height:1.625;
  color:rgba(26,26,26,0.7);
  text-align:center;
}
.subscribe__row{
  margin-top:24px;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.subscribe__input{
  flex:1;
  max-width:520px;
  min-width:200px;
  height:58px;
  border:1px solid rgba(78,23,39,0.2);
  background:var(--white);
  padding:0 16px;
  font-size:16px;
  color:var(--text-muted);
  display:flex;
  align-items:center;
}
.subscribe__btn{
  height:58px;
  padding:0 32px;
  background:var(--brand);
  color:var(--white);
  font-weight:500;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  transition:transform .18s,box-shadow .18s;
}
.subscribe__btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(78,23,39,0.18)}
.subscribe__btn:active{transform:translateY(0)}

/* ===== Article Hero ===== */
.article-hero{
  position:relative;
  min-height:clamp(360px,40vw,566px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.article-hero__img{
  position:absolute;
  inset:0;
  background:url("./assets/blog-article/article-hero.png") center/cover no-repeat;
}
.article-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(26,26,26,.8) 0%,rgba(26,26,26,.2) 100%);
}
.article-hero__content{
  position:relative;
  z-index:1;
  padding-bottom:clamp(32px,4vw,56px);
}
.article-hero__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.8);
  font-size:14px;
  margin-bottom:24px;
  transition:color .2s;
}
.article-hero__back:hover{color:var(--white)}
.article-hero__back img{width:16px;height:16px}
.article-hero__title{
  font-family:var(--font-head);
  font-size:clamp(28px,4.5vw,48px);
  font-weight:500;
  line-height:1.1;
  color:var(--white);
  max-width:740px;
}
.article-hero__meta{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  color:rgba(255,255,255,.7);
  font-size:14px;
}
.article-hero__meta span{display:flex;align-items:center;gap:6px}
.article-hero__meta img{width:16px;height:16px}

/* ===== Article Body ===== */
.article-body{
  max-width:900px;
}
.article-body h2{
  font-family:var(--font-head);
  font-size:clamp(22px,2.5vw,30px);
  font-weight:500;
  line-height:1.2;
  color:var(--brand);
  margin-bottom:24px;
}
.article-body p+h2{margin-top:48px}
.article-body p{
  font-size:18px;
  line-height:1.625;
  color:var(--text-muted);
  margin-bottom:24px;
}
.article-body ul{
  padding-left:24px;
  margin-bottom:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.article-body li{
  font-size:18px;
  line-height:1.625;
  color:var(--text-muted);
}

/* ===== Contact ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
}
.contact-grid>.contact-online{grid-column:1}
.contact-grid>.contact-form-card{grid-row:1/3;grid-column:2}
.contact-info{display:flex;flex-direction:column;gap:32px}
.contact-info__title{
  font-family:var(--font-head);
  font-size:clamp(28px,3.5vw,36px);
  font-weight:500;
  line-height:1.11;
  color:var(--brand);
}
.contact-items{display:flex;flex-direction:column;gap:24px}
.contact-item{display:flex;align-items:flex-start;gap:16px}
.contact-item__icon{flex-shrink:0;width:48px;height:48px}
.contact-item__icon img{width:48px;height:48px}
.contact-item__label{font-weight:600;font-size:16px;color:var(--brand);margin-bottom:4px}
.contact-item__value{font-size:16px;line-height:1.625;color:var(--text-muted)}
.contact-online{
  padding:clamp(24px,2.5vw,32px);
  background:var(--surface);
  align-self:start;
}
.contact-online h3{
  font-family:var(--font-head);
  font-size:24px;
  font-weight:500;
  color:var(--brand);
  margin-bottom:16px;
}
.contact-online p{font-size:16px;line-height:1.625;color:var(--text-muted)}
.contact-form-card{
  background:var(--surface);
  padding:clamp(24px,3vw,48px);
  display:flex;
  flex-direction:column;
  gap:24px;
}
.contact-form-card h2{
  font-family:var(--font-head);
  font-size:clamp(24px,2.2vw,30px);
  font-weight:500;
  color:var(--brand);
}
.contact-form-card>p{font-size:16px;line-height:1.625;color:var(--text-muted)}
.contact-form{display:flex;flex-direction:column;gap:16px}
.contact-form__field{
  width:100%;
  height:56px;
  border:1px solid rgba(78,23,39,0.2);
  background:var(--white);
  padding:0 16px;
  font-family:inherit;
  font-size:16px;
  color:var(--text);
}
.contact-form__group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contact-form__label{
  font-size:14px;
  font-weight:500;
  color:#1A1A1A;
}
.contact-form__field::placeholder{color:rgba(26,26,26,0.4)}
.contact-form__field:focus{outline:2px solid var(--brand);outline-offset:-2px}
.contact-form__field--textarea{
  height:120px;
  padding-top:16px;
  resize:vertical;
}
.contact-form__note{
  font-size:13px;
  color:rgba(26,26,26,0.5);
  margin-top:-8px;
}
.contact-form__info{
  margin-top:24px;
  padding:16px;
  border:1px solid rgba(78,23,39,0.1);
  font-size:14px;
  line-height:1.5;
  color:rgba(26,26,26,0.7);
}

/* ===== Animations ===== */
.footer__list a,.trust-item,.card,.svc-card,.post-card,.contact-online,.contact-form-card,.btn{
  transition:transform .18s ease,box-shadow .18s ease,color .18s ease;
}

/* ===== Spacer (top offset for fixed header) ===== */
.header-spacer{height:81px}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .split,.about-intro,.online-split,.contact-grid{
    grid-template-columns:1fr;
  }
  .hero__photo{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    margin-top:32px;
  }
  .hero{
    flex-direction:column;
    align-items:stretch;
    min-height:auto;
    padding-bottom:0;
  }
  .hero__content{max-width:100%}
  .footer__top{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .header__links{
    display:none;
    position:absolute;
    top:81px;left:0;right:0;
    flex-direction:column;
    background:var(--brand);
    padding:16px var(--pad);
    gap:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
  }
  .header__links.open{display:flex}
  .header__toggle{display:flex}
  .svc-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .step{flex-direction:column}
  .hero__photo{
    display:block;
    position:absolute;
    top:356px;
    left:52.45px;
    width:536.97px;
    height:576.7px;
    right:auto;
    background:url("./assets/hero-photo-2f8064.png") center/cover no-repeat;
    z-index:1;
  }
  .mobile-br{display:inline}
  .hero{
    min-height:801px;
    padding:122px 0 60px;
    align-items:flex-start;
  }
  .hero .container{padding-left:24px;padding-right:24px}
  .hero__content{
    position:relative;
    z-index:2;
    max-width:342px;
    margin:0 auto;
  }
  .hero__h1{
    font-size:36px;
    line-height:1.333;
    text-align:center;
  }
  .hero__subtitle{
    margin-top:40px;
    font-size:20px;
    line-height:1.5;
    text-align:center;
  }
  .hero__actions{
    flex-direction:column;
    align-items:stretch;
    gap:24px;
    margin-top:80px;
  }
  .hero__actions .btn{
    width:100%;
    height:56px;
    justify-content:center;
  }
  /* Figma 265:633 — section 390×725, H at (-133, 33.5), text Frame 37 at (24, 141.5) 342px wide */
  .hero-detail{
    min-height:725px;
    height:725px;
    display:block;
    padding:0 24px;
    position:relative;
    overflow:hidden;
  }
  .hero-detail::before{
    width:656px;
    height:658px;
    left:-133px;
    top:33.5px;
    transform:none;
    background:url("./assets/hero-detail-h-mobile.svg") center/contain no-repeat;
    opacity:.5;
  }
  .hero-detail__copy{
    position:absolute;
    top:141.5px;
    left:24px;
    right:24px;
    max-width:342px;
    margin:0 auto;
    text-align:center;
    font-size:16px;
    line-height:1.625;
    z-index:1;
  }
  .hero-detail__copy p+p{margin-top:40px}
  .about-text{margin-top:30px}
  .contact-grid>.contact-form-card{grid-row:auto;grid-column:auto;order:1}
  .contact-grid>.contact-online{grid-column:auto;order:2}
  .contact-grid>.contact-info{order:3}
}

.contact-form__success{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
  padding:48px 24px;
  min-height:300px;
}
.contact-form__success h3{
  font-family:var(--font-head);
  font-size:24px;
  font-weight:500;
  color:var(--brand);
}
.contact-form__success p{
  font-size:16px;
  line-height:1.625;
  color:var(--text-muted);
  max-width:360px;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}