/* ================================================================
   WTV LIMITED — STYLESHEET
   Theme: Organic Luxury · Forest Green · Terracotta · Cream · Gold
   Fonts: Cormorant Garamond (display) · Plus Jakarta Sans (body)
   ================================================================

   TABLE OF CONTENTS
   1.  Custom Properties
   2.  Reset & Base
   3.  Layout Utilities
   4.  Typography
   5.  Buttons
   6.  Reveal Animations
   7.  Header
   8.  Hero
   9.  Strip (numbers bar)
  10.  About
  11.  Services
  12.  Gallery + Lightbox
  13.  Results
  14.  Advantages
  15.  Contact
  16.  Footer
  17.  Responsive — 1100px
  18.  Responsive — 900px
  19.  Responsive — 600px
================================================================ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. CUSTOM PROPERTIES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* — Brand colours — */
  --g0:   #0D1F15;   /* darkest green */
  --g1:   #1B3A2D;   /* primary green */
  --g2:   #2D5C45;   /* mid green */
  --g3:   #4A8C68;   /* light green */
  --g4:   #E8F2EC;   /* pale green tint */
  --t1:   #C4622D;   /* terracotta */
  --t2:   #D97B47;   /* terracotta light */
  --au:   #C9963A;   /* gold (aurum) */
  --al:   #E3B55A;   /* gold light */
  --cr:   #F5EFE4;   /* cream */
  --crl:  #FAF6F0;   /* cream light */
  --wh:   #FFFFFF;
  --tx:   #1E2D22;   /* body text */
  --txm:  #4A6052;   /* mid text */
  --txl:  #7A9285;   /* muted text */
  --br:   rgba(27,58,45,.12);  /* border */

  /* — Shadows — */
  --sh0:  0 2px  8px  rgba(13,31,21,.06);
  --sh1:  0 6px  20px rgba(13,31,21,.10);
  --sh2:  0 14px 44px rgba(13,31,21,.14);
  --sh3:  0 32px 80px rgba(13,31,21,.18);

  /* — Radii — */
  --r1: 10px;
  --r2: 18px;
  --r3: 28px;
  --r4: 40px;

  /* — Transitions — */
  --ease: cubic-bezier(.4,0,.2,1);
  --tf:   .2s var(--ease);
  --tb:   .3s var(--ease);
  --ts:   .65s var(--ease);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. RESET & BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  scroll-behavior: smooth;
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.78;
  color: var(--tx);
  background: var(--wh);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width:100%;
  height:auto;
  display:block;
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
a   { text-decoration:none; color:inherit; }
ul  { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--au);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. LAYOUT UTILITIES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wrap { width: min(1220px,92%); margin-inline: auto; }
.sec  { padding-block: 96px; }

.sh { text-align:center; max-width:660px; margin-inline:auto; margin-bottom:52px; }
.sh__sub { margin-top:12px; font-size:1.05rem; color:var(--txm); line-height:1.7; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
h1,h2,h3,h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--g0);
  line-height: 1.1;
  letter-spacing: -.022em;
}

h1 {
  font-size: clamp(3.3rem, 6.5vw, 6rem);
  font-weight: 700;
  letter-spacing: -.03em;
}
h1 em { font-style:italic; color:var(--al); }

h2 {
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  font-weight: 600;
  margin-bottom: 18px;
}

h3 { font-size:1.6rem; font-weight:600; margin-bottom:14px; }

h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
}

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }

/* Label / eyebrow */
.lbl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g1);
  margin-bottom: 14px;
}
.lbl::before {
  content:'';
  flex-shrink: 0;
  width: 28px; height: 2.5px;
  border-radius: 99px;
  background: var(--t1);
}
.lbl--lite             { color: rgba(255,255,255,.7); }
.lbl--lite::before     { background: var(--al); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 38px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  border: 2px solid transparent;
  transition: all var(--tb);
  white-space: nowrap;
  cursor: pointer;
}

.btn--fill {
  background: var(--t1);
  color: var(--wh);
  box-shadow: 0 6px 20px rgba(196,98,45,.35);
}
.btn--fill:hover {
  background: var(--t2);
  box-shadow: 0 10px 28px rgba(196,98,45,.45);
  transform: translateY(-2px);
}

.btn--rim {
  background: transparent;
  color: var(--wh);
  border-color: rgba(255,255,255,.5);
}
.btn--rim:hover {
  border-color: var(--wh);
  background: rgba(255,255,255,.1);
  transform: translateY(-2px);
}

.btn--rim-lite {
  background: transparent;
  color: var(--wh);
  border-color: rgba(255,255,255,.35);
  font-size: .82rem;
  padding: 10px 22px;
  margin-top: 20px;
}
.btn--rim-lite:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--wh);
  transform: translateY(-1px);
}

.btn--full { width:100%; justify-content:center; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. REVEAL ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.rv.on       { opacity:1; transform:translateY(0); }
.rv--late    { transition-delay:.18s; }

/* Hero entrance */
.au-up {
  opacity: 0;
  transform: translateY(30px);
  animation: auUp .95s var(--ease) .15s forwards;
}
.au-up-d {
  opacity: 0;
  transform: translateY(30px);
  animation: auUp .95s var(--ease) .45s forwards;
}
@keyframes auUp { to { opacity:1; transform:translateY(0); } }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hdr {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 200;
  transition: background var(--ts), box-shadow var(--ts), padding var(--ts);
}
.hdr.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 24px rgba(13,31,21,.1);
}

.hdr__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  transition: padding var(--tb);
}
.hdr.scrolled .hdr__inner { padding-block: 13px; }

/* Brand */
.brand { display:flex; align-items:center; gap:12px; }

.brand__logo { height:44px; width:auto; border-radius:10px; object-fit:contain; }

.brand__name {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight:700;
  color: var(--wh);
  line-height: 1.2;
  transition: color var(--tb);
}
.brand__sub {
  display: block;
  font-size: .63rem; font-weight:500;
  color: rgba(255,255,255,.6);
  letter-spacing: .05em;
  transition: color var(--tb);
}
.hdr.scrolled .brand__name { color: var(--g0); }
.hdr.scrolled .brand__sub  { color: var(--txl); }

/* Nav */
.nav { display:flex; align-items:center; gap:30px; }

.nav__a {
  font-size: 1rem; font-weight:700;
  color: rgba(255,255,255,.95);
  transition: color var(--tf);
  position: relative;
  padding: 8px 6px;
}
.nav__a:hover { color: var(--wh); }

.nav__a::after {
  content:''; position:absolute;
  inset-inline:0; bottom:-3px;
  height:2px; background:var(--al);
  border-radius:99px;
  transform:scaleX(0);
  transition: transform var(--tf);
}
.nav__a:hover::after { transform:scaleX(1); }

.hdr.scrolled .nav__a       { color: var(--txm); }
.hdr.scrolled .nav__a:hover { color: var(--g1); }

/* CTA button in nav */
.nav__cta {
  background: var(--t1) !important;
  color: var(--wh) !important;
  padding: 12px 28px;
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(196,98,45,.35);
}
.nav__cta::after { display:none; }
.nav__cta:hover  { background: var(--t2) !important; box-shadow: 0 6px 20px rgba(196,98,45,.4); transform:translateY(-1px); }

/* Hamburger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--wh);
  border-radius: 2px;
  transition: transform var(--tb), opacity var(--tb);
}
.hdr.scrolled .burger { background: var(--cr); border-color: var(--br); }
.hdr.scrolled .burger span { background: var(--g0); }

.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity:0; transform:scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background layers */
.hero__bg { position:absolute; inset:0; z-index:0; }

.hero__photo {
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 35%;  /* frame the wall, not the sky */
  filter: saturate(1.1) contrast(1.05);
}

/* Semi-transparent dark green gradient veil */
.hero__veil {
  position: absolute; inset:0;
  background: linear-gradient(
    135deg,
    rgba(13,31,21,.92)  0%,
    rgba(27,58,45,.78) 45%,
    rgba(45,92,69,.55) 100%
  );
}

/* Subtle brick-pattern SVG overlay (repeating, low opacity) */
.hero__pattern {
  position: absolute; inset:0;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Crect x='1' y='1' width='37' height='17' rx='1' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Crect x='41' y='1' width='37' height='17' rx='1' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Crect x='21' y='21' width='37' height='17' rx='1' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Crect x='1' y='21' width='17' height='17' rx='1' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Crect x='61' y='21' width='17' height='17' rx='1' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Content */
.hero__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 64px;
  align-items: center;
  padding-block: 150px 90px;
}

.hero__copy { color: var(--wh); }

.hero__lead {
  font-size: 1.32rem;
  color: rgba(255,255,255,.9);
  max-width: 620px;
  line-height: 1.9;
  margin-top: 20px;
}

.hero__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* Panel card (right side) */
.hero__panel {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--r3);
  padding: 34px 30px;
  color: var(--wh);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.hero__stat strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.3rem; font-weight:700;
  color: var(--al);
  line-height: 1;
}
.hero__stat span {
  font-size: .84rem; font-weight:600;
  color: rgba(255,255,255,.76);
  margin-top: 6px;
  display: block;
}

.hero__rule { border:none; border-top:1px solid rgba(255,255,255,.14); margin-bottom:16px; }

.hero__checks { display:flex; flex-direction:column; gap:8px; }
.hero__checks li {
  font-size: .82rem; font-weight:500;
  color: rgba(255,255,255,.72);
  padding-left: 20px;
  position: relative;
}
.hero__checks li::before {
  content: '✓';
  position: absolute; left:0;
  color: var(--al); font-weight:700;
}

/* Scroll indicator */
.hero__scroll {
  position: absolute; bottom:28px; left:50%;
  transform: translateX(-50%);
  display: flex; flex-direction:column; align-items:center; gap:8px;
  z-index: 1;
}
.hero__scroll span {
  font-size: .62rem; font-weight:700;
  letter-spacing: .16em; text-transform:uppercase;
  color: rgba(255,255,255,.4);
}
.hero__line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.35} 50%{opacity:1} }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. STRIP (key numbers bar)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.strip { background: var(--g1); }

.strip__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  visibility: var(--br);
}

.strip__item {
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,.1);
  text-align: center;
}
.strip__item:last-child { border-right:none; }

.strip__item strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem; font-weight:700;
  color: var(--al);
  line-height: 1;
}
.strip__item span {
  font-size: .8rem; font-weight:500;
  color: rgba(255,255,255,.65);
  margin-top: 4px;
  display: block;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  10. ABOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about { background: var(--crl); }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}

/* Image stack */
.about__frame { position:relative; padding:0 36px 36px 0; }

.about__main {
  border-radius: var(--r3);
  box-shadow: var(--sh3);
  aspect-ratio: 3/4;
  object-fit: cover; width:100%;
}

.about__accent-wrap {
  position: absolute;
  bottom:0; right:0;
  width: 52%;
}
.about__accent {
  aspect-ratio:1; object-fit:cover;
  border-radius: var(--r2);
  border: 4px solid var(--wh);
  box-shadow: var(--sh2);
  width:100%;
}

.about__tag {
  position: absolute; top:26px; left:-14px;
  display: flex; flex-direction:column; align-items:center; gap:2px;
  background: var(--t1);
  color: var(--wh);
  border-radius: var(--r2);
  padding: 16px 20px;
  box-shadow: var(--sh2);
  font-size: .7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.about__tag strong {
  font-family:'Cormorant Garamond',serif;
  font-size: 2.2rem; font-weight:700;
  color: var(--al); line-height:1;
}

/* Copy */
.about__lead { font-size:1.28rem; font-weight:500; line-height:1.8; margin-bottom:20px; }

.pillars { display:flex; flex-direction:column; gap:26px; margin:34px 0; }

.pillar { display:flex; align-items:flex-start; gap:20px; }

.pillar__ico {
  flex-shrink:0;
  width:46px; height:46px;
  background: var(--g1);
  border-radius:12px;
  display:grid; place-items:center;
  font-size:1.25rem;
}

.pillar strong { display:block; font-size:1rem; font-weight:700; color:var(--g0); margin-bottom:4px; }
.pillar p      { font-size:.95rem; color:var(--txm); margin:0; line-height:1.7; }

.creds { display:flex; gap:24px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--br); }

.cred { display:flex; flex-direction:column; gap:2px; }
.cred span   { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--txl); }
.cred strong { font-size:.82rem; font-weight:700; color:var(--g0); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  11. SERVICES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.svc { background: var(--wh); }

.svc__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

.card {
  background: var(--crl);
  border: 1px solid var(--br);
  border-radius: var(--r3);
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  transition: transform var(--tb), box-shadow var(--tb);
}
/* Coloured top accent line — per card using --accent */
.card::after {
  content:'';
  position:absolute; inset-inline:0; top:0;
  height:3px;
  background: var(--accent, var(--g1));
  opacity:0;
  transition: opacity var(--tb);
}
.card:hover { transform:translateY(-6px); box-shadow:var(--sh3); }
.card:hover::after { opacity:1; }

.card__num {
  font-family:'Cormorant Garamond',serif;
  font-size:3.6rem; font-weight:700;
  color:var(--br); line-height:1;
  margin-bottom:4px; letter-spacing:-.06em;
}
.card__ico {
  width:52px; height:52px;
  background: var(--g1);
  border-radius:13px;
  display:grid; place-items:center;
  font-size:1.4rem; margin-bottom:16px;
}

.card h3 { color:var(--g0); font-size:1.35rem; }
.card > p { font-size:.95rem; color:var(--txm); line-height:1.75; }

.card__list { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.card__list li {
  font-size:.92rem; font-weight:600;
  color:var(--txm);
  padding-left:18px; position:relative;
}
.card__list li::before { content:'→'; position:absolute; left:0; color:var(--t1); font-size:.74rem; top:1px; }

/* CTA dark card */
.card--dark {
  background: linear-gradient(150deg, var(--g1) 0%, var(--g2) 100%);
  border-color: transparent;
}
.card--dark::after { display:none; }
.card--dark:hover  { box-shadow:var(--sh3); }
.card--dark h3     { color:var(--wh); font-size:1.32rem; margin-top:8px; }

.card__clients { margin:14px 0; display:flex; flex-direction:column; gap:9px; }
.card__clients li {
  font-size:.83rem; color:rgba(255,255,255,.72);
  padding-left:18px; position:relative;
}
.card__clients li::before { content:'✓'; position:absolute; left:0; color:var(--al); font-weight:700; font-size:.74rem; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  12. GALLERY + LIGHTBOX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gal { background:var(--g0); padding-bottom:0; }

.gal .sh h2, .gal .lbl { color:var(--wh); }
.gal .sh__sub { color:rgba(255,255,255,.52); }

.gal__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 260px;
  gap: 6px;
  margin-top: 34px;
}

.gi {
  position:relative; overflow:hidden;
  cursor: zoom-in; border-radius:6px;
}
.gi img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease), filter .35s var(--ease); }
.gi:hover img { transform:scale(1.09); }
.gi.gi--best {
  outline: 2px solid rgba(227,181,90,.95);
  outline-offset: -2px;
}

.gi__hover {
  position:absolute; inset:0;
  background: rgba(27,58,45,.65);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:14px;
  opacity:0; transition:opacity var(--tb);
}
.gi:hover .gi__hover { opacity:1; }
.gi__hover span {
  font-size:.76rem; font-weight:700; color:var(--wh);
  letter-spacing:.04em;
  background:rgba(0,0,0,.3); padding:4px 10px;
  border-radius:999px;
  touch-action: manipulation;
}

.gi--wide { grid-column:span 2; }
.gi--tall { grid-row:span 2; }

/* Lightbox */
.lbox {
  display:none; position:fixed; inset:0;
  z-index:999;
  background:rgba(0,0,0,.95);
  align-items:center; justify-content:center;
}
.lbox.open { display:flex; }

.lbox__stage {
  max-width: min(88vw,1100px);
  max-height: 88vh;
  display:flex; align-items:center; justify-content:center;
}
.lbox__stage img { max-width:100%; max-height:88vh; object-fit:contain; border-radius:6px; }

.lbox__x {
  position:absolute; top:18px; right:22px;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:var(--wh); font-size:1.5rem;
  transition:background var(--tf);
}
.lbox__x:hover { background:rgba(255,255,255,.22); }

.lbox__arr {
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:var(--wh); font-size:2.2rem;
  transition:background var(--tf);
}
.lbox__arr:hover { background:rgba(255,255,255,.22); }
.lbox__prev { left:16px; }
.lbox__next { right:16px; }

.lbox__count {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-size:.76rem; color:rgba(255,255,255,.45); font-weight:600; letter-spacing:.06em;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  13. RESULTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.res {
  background: linear-gradient(148deg, var(--g1) 0%, var(--g0) 100%);
  color:var(--wh);
}
.res h2  { color:var(--wh); }
.res p   { color:rgba(255,255,255,.72); }

.res__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
  margin-bottom: 56px;
}

.fw-block { margin-top:26px; }
.fw-lbl   { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:12px; }

.fw-pills { display:flex; flex-wrap:wrap; gap:8px; }
.fw-pills span {
  padding:6px 14px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:.74rem; font-weight:600;
  color:rgba(255,255,255,.82);
}

.res__stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.sbox {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r2); padding:22px 20px;
  transition:transform var(--tb), background var(--tb);
}
.sbox:hover { transform:translateY(-4px); background:rgba(255,255,255,.11); }

.snum {
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:2.9rem; font-weight:700;
  color:var(--al); line-height:1; margin-bottom:8px;
}
.sbox > span { font-size:.79rem; color:rgba(255,255,255,.58); line-height:1.45; }

/* Revenue bars */
.rev {
  margin-bottom:52px; padding:34px 38px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r3);
}
.rev__hd { font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:22px; }

.rev__rows { display:flex; flex-direction:column; gap:14px; }
.rev__row  { display:grid; grid-template-columns:170px 1fr; align-items:center; gap:16px; }
.rev__lbl  { font-size:.82rem; color:rgba(255,255,255,.62); font-weight:500; }

.rev__track { background:rgba(255,255,255,.1); border-radius:999px; height:36px; overflow:hidden; }
.rev__bar   {
  height:100%; width:var(--w);
  background: linear-gradient(90deg, var(--g3), var(--t1));
  border-radius:999px;
  display:flex; align-items:center; padding-inline:14px;
  min-width:44px;
}
.rev__bar span { font-size:.76rem; font-weight:800; color:var(--wh); }

/* Timeline */
.tl { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(255,255,255,.1); border-radius:var(--r3); overflow:hidden; }

.tl__item { padding:34px 28px; background:rgba(255,255,255,.04); border-right:1px solid rgba(255,255,255,.08); }
.tl__item:last-child { border-right:none; }

.tl__yr {
  font-family:'Cormorant Garamond',serif;
  font-size:3rem; font-weight:700; color:var(--al); line-height:1; margin-bottom:12px;
}
.tl__body h4 { color:var(--wh); font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; margin-bottom:8px; }
.tl__body p  { font-size:.83rem; color:rgba(255,255,255,.58); line-height:1.65; margin:0; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  14. ADVANTAGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.adv { background: var(--cr); }

.adv__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.adv__card {
  background: var(--wh);
  border: 1px solid var(--br);
  border-radius: var(--r3);
  padding: 30px 24px;
  transition: transform var(--tb), box-shadow var(--tb);
}
.adv__card:hover { transform:translateY(-5px); box-shadow:var(--sh2); }

.adv__ico { font-size:2rem; display:block; margin-bottom:16px; }
.adv__card h4  { color:var(--g0); margin-bottom:8px; }
.adv__card p   { font-size:1rem; color:var(--txm); line-height:1.75; margin:0; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  15. CONTACT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ctc { background: var(--wh); }

.ctc__grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }

.ctc__info h2 { margin-bottom:14px; }
.ctc__info > p { font-size:1.12rem; color:var(--txm); line-height:1.85; margin-bottom:30px; }

.ctc__dets { display:flex; flex-direction:column; gap:16px; margin-bottom:26px; }
.ctc__dets li { display:flex; align-items:flex-start; gap:14px; }

.ctc__ico {
  flex-shrink:0; width:44px; height:44px;
  background:var(--cr); border:1px solid var(--br);
  border-radius:11px; display:grid; place-items:center; font-size:1.1rem;
}

.ctc__dets strong { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--txl); margin-bottom:3px; }
.ctc__dets span,
.ctc__dets a      { font-size:.88rem; font-weight:500; color:var(--tx); line-height:1.5; }
.ctc__dets a:hover { color:var(--t1); }

.dists__lbl  { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--txl); margin-bottom:9px; }
.dists__tags { display:flex; flex-wrap:wrap; gap:7px; }
.dists__tags span {
  background:var(--cr); border:1px solid var(--br);
  color:var(--txm); padding:5px 13px;
  border-radius:999px; font-size:.76rem; font-weight:600;
}

/* Form */
.ctc__form-wrap {
  background:var(--crl);
  border:1px solid var(--br);
  border-radius:var(--r4);
  padding:40px 36px;
  box-shadow:var(--sh0);
}

.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fg     { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }

.fg label { font-size:.76rem; font-weight:700; color:var(--g0); letter-spacing:.02em; }
.fg label span { color:var(--t1); }

.fg input,
.fg textarea,
.fg select {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--br);
  border-radius:var(--r1);
  font-family:inherit; font-size:.88rem;
  color:var(--tx); background:var(--wh);
  transition:border-color var(--tf), box-shadow var(--tf);
  -webkit-appearance:none; appearance:none;
}
.fg input:focus,
.fg textarea:focus,
.fg select:focus {
  outline:none;
  border-color:var(--g1);
  box-shadow:0 0 0 3px rgba(27,58,45,.1);
}
.fg input::placeholder,
.fg textarea::placeholder { color:var(--txl); }
.fg textarea { resize:vertical; min-height:115px; }

/* Custom select arrow */
.fg select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A6052' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
  cursor:pointer;
}

.fg-note { text-align:center; font-size:.76rem; color:var(--txl); margin-top:12px; }
.fg-note a { color:var(--t1); font-weight:600; }
.fg-note a:hover { text-decoration:underline; }

.fg-ok {
  display:none; margin-top:12px;
  padding:12px 16px; border-radius:var(--r1);
  font-size:.84rem; font-weight:600; text-align:center;
  background:var(--g4); color:var(--g1);
  border:1px solid rgba(27,58,45,.2);
}
.fg-ok.show { display:block; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  16. FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ftr { background:var(--g0); color:rgba(255,255,255,.65); }

.ftr__main {
  display:grid; grid-template-columns:280px 1fr; gap:56px;
  align-items:start; padding-block:60px 50px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.ftr__brand { display:flex; align-items:flex-start; gap:14px; }
.ftr__logo  { height:54px; width:auto; border-radius:10px; object-fit:contain; }
.ftr__name  { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:700; color:var(--wh); margin-bottom:5px; }
.ftr__sub   { font-size:.76rem; color:rgba(255,255,255,.42); line-height:1.55; margin:0; }

.ftr__cols { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }

.ftr__col { display:flex; flex-direction:column; gap:10px; }
.ftr__ch  { font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:4px; }
.ftr__col a,
.ftr__col span { font-size:1rem; color:rgba(255,255,255,.85); transition:color var(--tf); line-height:1.6; }
.ftr__col a:hover { color:var(--wh); }

.ftr__bot { padding-block:18px; }
.ftr__bot-in { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ftr__bot p { font-size:.74rem; color:rgba(255,255,255,.28); margin:0; }
.ftr__btt   { font-size:.74rem; font-weight:700; color:rgba(255,255,255,.42); transition:color var(--tf); white-space:nowrap; }
.ftr__btt:hover { color:var(--wh); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  17. RESPONSIVE — 1100px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width:1100px) {
  .svc__grid   { grid-template-columns:repeat(2,1fr); }
  .adv__grid   { grid-template-columns:repeat(2,1fr); }
  .gal__grid   { grid-template-columns:repeat(3,1fr); }
  .strip__grid { grid-template-columns:repeat(2,1fr); }
  .ftr__main   { grid-template-columns:1fr; gap:32px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  18. RESPONSIVE — 900px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width:900px) {

  .burger { display:flex; }

  .nav {
    display:none; position:absolute; inset-inline:4%; top:calc(100% + 10px);
    background:var(--wh); border:1px solid var(--br);
    border-radius:var(--r2); box-shadow:var(--sh3);
    flex-direction:column; align-items:stretch; gap:0; padding:18px;
  }
  .nav.open { display:flex; }

  .nav__a {
    color:var(--txm); padding:16px 12px; font-size:1.05rem;
    border-bottom:1px solid var(--br);
    min-height: 54px;
  }
  .nav__a:last-child { border-bottom:none; }
  .nav__a::after { display:none; }
  .nav__a:hover  { color:var(--g1); }

  .nav__cta { text-align:center; border-radius:var(--r1) !important; margin-top:8px; padding:12px !important; }

  .hero__body  { grid-template-columns:1fr; padding-block:128px 72px; }
  .hero__panel { display:none; }

  .about__grid { grid-template-columns:1fr; gap:40px; }
  .about__frame { padding:0 28px 28px 0; }

  .svc__grid  { grid-template-columns:1fr; }

  .gal__grid  { grid-template-columns:repeat(2,1fr); }
  .gi--wide, .gi--tall { grid-column:auto; grid-row:auto; }

  .res__top   { grid-template-columns:1fr; gap:40px; }
  .res__stats { grid-template-columns:repeat(2,1fr); }
  .tl         { grid-template-columns:1fr; }
  .tl__item   { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .tl__item:last-child { border-bottom:none; }

  .rev__row   { grid-template-columns:1fr; gap:6px; }

  .ctc__grid { grid-template-columns:1fr; gap:40px; }
  .ctc__form-wrap { padding:26px 22px; }

  .ftr__cols { grid-template-columns:repeat(2,1fr); }
  .ftr__bot-in { flex-direction:column; align-items:flex-start; gap:6px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  19. RESPONSIVE — 600px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width:600px) {
  :root { font-size:16px; }
  .sec { padding-block:60px; }

  h1 { font-size: clamp(2.8rem, 8vw, 4.4rem); }
  h2 { font-size: clamp(2.1rem, 6vw, 3rem); }
  h3 { font-size: 1.55rem; }
  h4 { font-size: 1.25rem; }

  .hero__lead { font-size: 1.4rem; line-height: 1.95; }
  .sh__sub { font-size: 1rem; }
  .about__lead { font-size: 1.25rem; }

  .card h3 { font-size: 1.45rem; }
  .card > p { font-size: 1rem; }
  .card__list li { font-size: 1rem; }

  .btn { font-size: 1.08rem; padding: 18px 32px; }

  .pillar strong { font-size: 1.05rem; }
  .pillar p { font-size: 1rem; }

  .ctc__info > p { font-size: 1.18rem; }
  .ftr__col a,
  .ftr__col span { font-size: 1rem; }

  .rev__lbl { font-size: .9rem; }
  .tl__body h4 { font-size: 1rem; }
  .tl__body p { font-size: .95rem; }

  .hero__btns { flex-direction:column; align-items:flex-start; }

  .fg-row { grid-template-columns:1fr; }

  .gal__grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }

  .gi__hover {
    opacity: 1;
    background: rgba(27,58,45,.8);
  }
  .gi__hover span {
    font-size: .92rem;
    padding: 8px 16px;
  }

  .adv__grid  { grid-template-columns:1fr; }
  .ftr__cols  { grid-template-columns:1fr; }
  .res__stats { grid-template-columns:1fr; }
  .strip__grid { grid-template-columns:repeat(2,1fr); }

  .lbox__arr { display:none; }
}