@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');
:root{--black:#080908;--gold:#c99542;--gold-light:#efc879;--white:#eeeae3;--muted:#c1bdb4;--line:rgba(201,149,66,.65);--page:min(100% - 48px,1240px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;background:var(--black);color:var(--white);font-family:"DM Sans",Arial,sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}
.site-header{height:68px;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1240px)/2));background:rgba(5,6,5,.97);border-bottom:1px solid rgba(201,149,66,.32);backdrop-filter:blur(10px)}
.brand{width:150px;height:58px;display:block;flex-shrink:0;overflow:hidden}.brand img,.footer-logo img{width:100%;height:100%;object-fit:contain}
.site-header nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,27px);font-size:9px;text-transform:uppercase;letter-spacing:.035em}.site-header nav>a{white-space:nowrap;color:#e3ded3;transition:color .18s}.site-header nav>a:hover,.site-header nav>a.active{color:var(--gold-light)}.site-header nav>a.active:after{content:"";display:block;height:2px;background:var(--gold);margin-top:7px}.site-header nav .nav-contact{padding:8px 15px;border:1px solid var(--gold);color:var(--gold-light)}.nav-contact span{padding-left:12px;font-size:16px}.menu-toggle{display:none}
.hero{height:clamp(480px,56vw,620px);min-height:470px;position:relative;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:#0d0e0b}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,5,.98) 0%,rgba(5,6,5,.91) 27%,rgba(5,6,5,.52) 45%,rgba(5,6,5,.03) 75%),linear-gradient(0deg,rgba(0,0,0,.24),transparent 30%)}.hero-copy{position:relative;z-index:2;width:var(--page);margin:0 auto;padding:0 16px}.hero h1{font-family:"Playfair Display",Georgia,serif;font-size:clamp(44px,5.1vw,68px);line-height:1.06;font-weight:400;text-transform:uppercase;letter-spacing:.015em;margin:0 0 9px}.hero h1 em{font-style:normal;color:var(--gold-light)}.tagline{font-size:11px;letter-spacing:.18em;font-weight:700;margin:0 0 10px}.gold-line{display:block;width:32px;height:2px;background:var(--gold);margin:13px 0}.hero-description{font-size:12px;line-height:1.7;color:#ddd8cf;margin:0 0 17px}.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.button{min-height:35px;display:inline-flex;align-items:center;justify-content:space-between;gap:23px;padding:9px 14px;border:1px solid transparent;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.025em;transition:background .18s,border-color .18s}.button span{font-size:17px;line-height:10px;font-weight:400}.button-gold{background:linear-gradient(105deg,#c58e3c,#e5bd6b);color:#171208}.button-gold:hover{background:linear-gradient(105deg,#d6a550,#f1d38c)}.button-outline{border-color:#b68a43;background:rgba(0,0,0,.3);color:#f1e8d8}.button-outline:hover{background:rgba(201,149,66,.12)}.scroll-cue{position:absolute;bottom:20px;left:max(40px,calc((100vw - 1240px)/2 + 16px));display:flex;align-items:center;gap:10px;font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:#cfc5b2}.scroll-symbol{width:24px;height:28px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold-light);font-size:14px}
.section{padding:34px max(24px,calc((100vw - 1240px)/2)) 40px}.services,.benefits,.impressions{background:linear-gradient(180deg,#0c0e0d,#080908)}.section-heading{text-align:center;margin:0 auto 23px}.section-heading h2,.about h2,.contact h2{font-family:"Playfair Display",Georgia,serif;font-size:clamp(29px,3.4vw,39px);line-height:1.12;font-weight:400;text-transform:uppercase;letter-spacing:.035em;margin:0}.section-heading .gold-line{margin:12px auto 9px;width:30px}.eyebrow{font-size:8px;font-weight:700;letter-spacing:.19em;color:var(--gold-light);text-transform:uppercase;margin:0}.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;max-width:1240px;margin:auto}.service-card{border:1px solid rgba(255,255,255,.14);background:#090a09;min-width:0;overflow:hidden}.service-card>img{display:block;width:100%;height:clamp(115px,14vw,170px);object-fit:cover}.service-content{padding:10px 12px 13px}.icon{display:block;color:var(--gold);font-size:23px;line-height:1;margin-bottom:7px}.service-content h3{font-size:10px;line-height:1.35;text-transform:uppercase;min-height:27px;margin:0 0 7px}.service-content p{font-size:9px;line-height:1.6;color:#c4bfb6;margin:0}.about{display:grid;grid-template-columns:1fr 1fr;min-height:265px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0b0a}.about>img{width:100%;height:100%;min-height:265px;max-height:360px;object-fit:cover;object-position:center 35%}.about-copy{align-self:center;padding:30px clamp(24px,5vw,70px) 30px 34px;max-width:650px}.about-copy .eyebrow{margin-bottom:7px}.about h2{font-size:clamp(27px,3vw,36px)}.about-copy .gold-line{margin:12px 0}.about-copy>p:not(.eyebrow){font-size:10px;line-height:1.75;color:#c4bfb6;margin:0 0 15px}.benefits{border-bottom:1px solid var(--line)}.benefits .section-heading{margin-bottom:17px}.benefit-grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.benefit-grid article{text-align:center;padding:10px 14px;border-right:1px solid rgba(255,255,255,.14)}.benefit-grid article:last-child{border:0}.benefit-grid article>span{display:block;color:var(--gold);font-size:28px;line-height:1.2;margin-bottom:7px}.benefit-grid h3{font-size:9px;text-transform:uppercase;margin:0 0 6px}.benefit-grid p{font-size:9px;line-height:1.5;color:#c1bcb3;max-width:140px;margin:0 auto}.workflow{background:linear-gradient(180deg,#10110f,#080908);border-bottom:1px solid var(--line)}.workflow .section-heading{margin-bottom:20px}.steps{max-width:1240px;margin:auto;display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr;align-items:center;gap:8px}.steps article{text-align:center;padding:4px}.number{display:grid;place-items:center;width:27px;height:27px;border:1px solid var(--gold);border-radius:50%;color:var(--gold-light);font-size:9px;margin:0 auto 7px}.step-icon{display:block;color:var(--gold);font-size:23px;line-height:1.3;margin-bottom:4px}.steps h3{font-size:9px;text-transform:uppercase;margin:0 0 4px}.steps p{font-size:8px;line-height:1.5;color:#c1bcb3;max-width:150px;margin:0 auto}.arrow{color:var(--gold);font-size:22px;text-align:center}.impressions{border-bottom:1px solid var(--line)}.impressions .section-heading{margin-bottom:17px}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:1240px;margin:auto}.gallery img{width:100%;height:clamp(78px,10vw,130px);object-fit:cover;display:block;border:1px solid rgba(255,255,255,.13)}.contact{display:grid;grid-template-columns:.75fr 1.25fr;gap:5%;background:linear-gradient(115deg,#0e0f0d,#080908);border-bottom:1px solid var(--line);padding-top:38px;padding-bottom:38px}.contact-copy .eyebrow{margin-bottom:7px}.contact h2{font-size:33px;margin-bottom:10px}.contact-copy>p:not(.eyebrow){font-size:10px;line-height:1.75;color:#c1bcb3;max-width:265px;margin:0 0 17px}.contact-detail{display:flex;align-items:center;gap:13px;margin:11px 0;font-size:10px;color:#ded9cf}.contact-detail>span:first-child{color:var(--gold);font-size:19px;width:20px;text-align:center;flex-shrink:0}.contact-form{padding:15px;background:#0b0c0b;border:1px solid rgba(255,255,255,.09)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.form-grid label{display:flex;align-items:center;min-width:0;border:1px solid #33322c;background:#0b0c0b;padding:0 8px}.form-grid label>span{color:var(--gold);font-size:12px;margin-right:7px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;min-width:0;padding:9px 0;background:transparent;border:0;outline:0;color:#e8e3da;font-size:9px}.form-grid input::placeholder,.form-grid textarea::placeholder{color:#c2bdb4}.form-grid select{color:#c2bdb4}.form-grid select option{background:#10110f}.form-grid .message{grid-column:1/-1;align-items:stretch;padding:8px}.form-grid textarea{resize:vertical;min-height:68px}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.privacy{display:flex;align-items:flex-start;gap:7px;margin:10px 0;color:#c1bcb3;font-size:8px;line-height:1.5}.privacy input{margin:2px 0 0;accent-color:var(--gold);flex-shrink:0}.privacy a{color:var(--gold-light);text-decoration:underline}.send{width:100%}.footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px max(24px,calc((100vw - 1240px)/2));background:#060706}.footer-logo{width:125px;height:44px;display:block;flex-shrink:0}.footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;font-size:7px;text-transform:uppercase;color:#c8c3b8}.footer nav a:hover,.footer-legal a:hover{color:var(--gold-light)}.footer-legal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;font-size:8px;color:#bcb7ad;text-align:right;max-width:220px}.footer-legal small{width:100%;font-size:7px;line-height:1.4;color:#8d897f}
@media(max-width:900px){.site-header{padding:0 20px}.brand{width:125px}.site-header nav{gap:10px;font-size:8px}.site-header nav .nav-contact{padding:7px 10px}.hero-image{object-position:58% center}.service-content{padding:10px}.about-copy{padding-right:24px}.footer{flex-wrap:wrap}.footer-legal{max-width:180px}}
@media(max-width:680px){html{scroll-padding-top:66px}.site-header{height:66px;padding:0 17px}.brand{width:125px;height:55px}.menu-toggle{display:flex;width:38px;height:36px;position:relative;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line)}.menu-toggle span{position:absolute;width:17px;height:1px;background:var(--gold-light);transition:transform .2s}.menu-toggle span:first-child{transform:translateY(-4px)}.menu-toggle span:last-child{transform:translateY(4px)}.menu-toggle[aria-expanded=true] span:first-child{transform:rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:rotate(-45deg)}.site-header nav{display:none;position:absolute;top:65px;left:0;right:0;padding:8px 18px 17px;background:rgba(6,7,6,.99);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}.site-header nav.open{display:flex}.site-header nav>a{padding:11px 3px;border-bottom:1px solid rgba(255,255,255,.07);font-size:10px}.site-header nav>a.active:after{display:none}.site-header nav .nav-contact{margin-top:9px;text-align:center;padding:11px}.hero{height:680px;min-height:610px;max-height:760px;align-items:flex-end}.hero-image{object-position:61% center}.hero-shade{background:linear-gradient(0deg,rgba(7,8,7,.98) 0%,rgba(7,8,7,.86) 30%,rgba(7,8,7,.23) 72%,rgba(7,8,7,.05) 100%),linear-gradient(90deg,rgba(7,8,7,.2),transparent)}.hero-copy{width:100%;padding:0 22px 90px}.hero h1{font-size:clamp(43px,11vw,58px)}.tagline{font-size:9px;letter-spacing:.14em}.hero-description{font-size:11px}.desktop-break{display:none}.hero-actions{gap:7px}.hero-actions .button{width:190px}.scroll-cue{left:22px;bottom:21px}.section{padding:33px 17px 36px}.section-heading{margin-bottom:20px}.section-heading h2,.about h2{font-size:29px}.eyebrow{font-size:7px;letter-spacing:.15em}.service-grid{grid-template-columns:1fr;gap:10px;max-width:480px}.service-card{display:grid;grid-template-columns:36% 1fr;min-height:145px}.service-card>img{height:100%;min-height:145px}.service-content{padding:12px;display:flex;flex-direction:column;justify-content:center}.icon{font-size:20px;margin-bottom:6px}.service-content h3{font-size:10px;min-height:0;margin-bottom:5px}.service-content p{font-size:9px}.about{grid-template-columns:1fr}.about>img{height:300px;min-height:300px;max-height:340px;object-position:center 34%}.about-copy{padding:22px 22px 32px}.about-copy>p:not(.eyebrow){font-size:10px}.benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.benefit-grid article{padding:15px 10px;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}.benefit-grid article:nth-child(2n){border-right:0}.benefit-grid article:last-child{grid-column:1/-1;border-bottom:0}.benefit-grid article>span{font-size:25px}.benefit-grid h3{font-size:9px}.benefit-grid p{font-size:8px}.steps{grid-template-columns:1fr 18px 1fr;gap:7px}.steps article{padding:7px 2px}.steps article:nth-of-type(3){grid-column:1;grid-row:2}.steps .arrow:nth-of-type(2){grid-column:2;grid-row:1}.steps .arrow:nth-of-type(3){display:none}.steps article:nth-of-type(4){grid-column:3;grid-row:2}.steps h3{font-size:9px}.steps p{font-size:8px}.number{width:26px;height:26px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.gallery img{height:100px}.contact{grid-template-columns:1fr;gap:22px;padding-top:31px;padding-bottom:30px}.contact h2{font-size:31px}.contact-form{padding:12px}.form-grid{gap:6px}.form-grid label{padding:0 7px}.form-grid input,.form-grid select,.form-grid textarea{font-size:10px}.form-grid .message{grid-column:1/-1}.privacy{font-size:8px}.footer{padding:18px 17px;justify-content:center;gap:11px}.footer-logo{width:115px;height:42px}.footer nav{order:3;width:100%;gap:10px 15px;font-size:7px}.footer-legal{max-width:none;justify-content:center;text-align:center;font-size:8px}.footer-legal small{font-size:7px}}
@media(max-width:370px){.hero-copy{padding-left:18px;padding-right:18px}.hero h1{font-size:41px}.hero-actions .button{width:180px}.service-card{grid-template-columns:33% 1fr}.service-content{padding:10px}.service-content h3{font-size:9px}.service-content p{font-size:8px}.gallery img{height:85px}.form-grid{grid-template-columns:1fr}.form-grid .message{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


/* === Reference-checked header and hero layout === */
html { scroll-padding-top: 0; }
.site-header {
  position: absolute;
  top: 7.7vh;
  left: 0;
  right: 0;
  height: clamp(76px, 8.9vh, 98px);
  padding: 0 clamp(24px, 5.1vw, 100px) 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: rgba(3, 5, 4, .82);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(201,149,66,.40);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: 50;
}
.site-header .brand {
  position: absolute;
  z-index: 56;
  left: clamp(24px, 4.2vw, 84px);
  top: calc(-1 * 7.7vh);
  width: clamp(270px, 25vw, 500px);
  height: auto;
  aspect-ratio: 1514 / 990;
  display: block;
  margin: 0;
  overflow: visible;
  flex: 0 0 auto;
}
.site-header .brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.50));
}
.site-header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.8vw, 35px);
  font-size: clamp(10px, .68vw, 13px);
  font-weight: 600;
  letter-spacing: .025em;
}
.site-header nav > a {
  white-space: nowrap;
  color: #f0ece4;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  padding-top: 2px;
}
.site-header nav > a:hover,
.site-header nav > a.active { color: #f0c978; }
.site-header nav > a.active:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 7px;
  background: #d9ad50;
}
.site-header nav .nav-contact {
  min-width: clamp(120px, 7.4vw, 150px);
  padding: 13px 17px;
  border: 1px solid #d8aa4a;
  color: #f0c978;
  background: rgba(0,0,0,.12);
  text-align: center;
}
.site-header .nav-contact span {
  padding-left: 13px;
  font-size: 18px;
}
.hero {
  position: relative;
  height: 100vh;
  min-height: 760px;
  max-height: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 0;
  border-bottom: 1px solid var(--line);
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,6,5,.96) 0%, rgba(5,6,5,.83) 24%, rgba(5,6,5,.48) 42%, rgba(5,6,5,.08) 66%, rgba(5,6,5,.02) 100%),
    linear-gradient(0deg, rgba(0,0,0,.20), transparent 28%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: min(88%, 1760px);
  margin: 0 auto;
  padding: clamp(52px, 7.5vh, 88px) 0 0;
}
.hero h1 {
  font-size: clamp(48px, 5.2vw, 82px);
  line-height: 1.06;
  margin-bottom: 10px;
}
.tagline {
  font-size: clamp(10px, .78vw, 15px);
  letter-spacing: .19em;
  margin-bottom: 10px;
}
.hero-description {
  font-size: clamp(13px, .95vw, 18px);
  line-height: 1.65;
  margin-bottom: 19px;
}
.hero-actions { gap: 10px; }
.hero-actions .button {
  width: clamp(235px, 18.5vw, 305px);
  min-height: 52px;
  padding: 14px 17px;
  font-size: 11px;
}
.scroll-cue {
  left: clamp(24px, 5.3vw, 104px);
  bottom: 24px;
  font-size: 10px;
}
.scroll-symbol { width: 34px; height: 42px; }

/* Mid-size screens: keep the logo distinct from the navigation */
@media (max-width: 1200px) {
  .site-header {
    top: 6.5vh;
    height: 76px;
    padding-right: 24px;
  }
  .site-header .brand {
    left: 22px;
    top: calc(-1 * 6.5vh);
    width: clamp(230px, 26vw, 330px);
  }
  .site-header nav {
    gap: clamp(9px, 1.15vw, 14px);
    font-size: 9px;
  }
  .site-header nav .nav-contact {
    min-width: 100px;
    padding: 10px 11px;
  }
  .hero-copy { width: 90%; padding-top: 55px; }
  .hero h1 { font-size: clamp(44px, 5.3vw, 64px); }
}

/* Mobile: compact logo in the bar, with no giant overlap or clipped menu */
@media (max-width: 680px) {
  html { scroll-padding-top: 0; }
  .site-header {
    top: 10px;
    height: 62px;
    padding: 0 15px;
    justify-content: space-between;
  }
  .site-header .brand {
    position: relative;
    left: auto;
    top: auto;
    width: 142px;
    height: 92px;
    aspect-ratio: 1514 / 990;
    margin: -15px 0 0;
    overflow: visible;
  }
  .site-header .brand img { object-position: left center; }
  .site-header .menu-toggle {
    display: flex;
    width: 38px;
    height: 36px;
    margin-left: auto;
    position: relative;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(201,149,66,.45);
    z-index: 58;
  }
  .site-header nav {
    display: none;
    position: absolute;
    top: 61px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px 18px 17px;
    background: rgba(4,6,5,.97);
    border-bottom: 1px solid rgba(201,149,66,.4);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 11px;
  }
  .site-header nav.open { display: flex; }
  .site-header nav > a {
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .site-header nav > a.active:after { display: none; }
  .site-header nav .nav-contact {
    min-width: 0;
    margin-top: 9px;
    padding: 12px;
    text-align: center;
  }
  .hero {
    height: 780px;
    min-height: 700px;
    max-height: 860px;
    align-items: flex-end;
  }
  .hero-image { object-position: 66% center; }
  .hero-shade {
    background:
      linear-gradient(0deg, rgba(5,6,5,.98) 0%, rgba(5,6,5,.88) 32%, rgba(5,6,5,.22) 73%, rgba(5,6,5,.08) 100%),
      linear-gradient(90deg, rgba(5,6,5,.25), transparent);
  }
  .hero-copy {
    width: 100%;
    padding: 0 22px 96px;
    margin: 0;
  }
  .hero h1 { font-size: clamp(40px, 10.5vw, 56px); }
  .tagline { font-size: 9px; letter-spacing: .14em; }
  .hero-description { font-size: 12px; }
  .desktop-break { display: none; }
  .hero-actions .button { width: 230px; min-height: 44px; }
  .scroll-cue { left: 22px; bottom: 20px; }
}
@media (max-width: 370px) {
  .site-header .brand { width: 126px; }
  .hero-copy { padding-left: 18px; padding-right: 18px; }
  .hero h1 { font-size: 39px; }
  .hero-actions .button { width: 210px; }
}


/* Approved Renault Clio hero image: use the supplied image without further design changes */
.hero-image {
  object-fit: cover !important;
  object-position: center center !important;
}
@media (max-width: 1200px) {
  .hero-image { object-position: 61% center !important; }
}
@media (max-width: 680px) {
  .hero-image { object-position: 65% center !important; }
}


/* Clean hero photo: image contains no homepage text or logo */
.hero-image {
  content: url("assets/hero-renault-clio-clean.webp");
  object-fit: cover !important;
  object-position: center center !important;
}
@media (max-width: 1200px) {
  .hero-image { object-position: 61% center !important; }
}
@media (max-width: 680px) {
  .hero-image { object-position: 65% center !important; }
}