:root {
  
  --ink: #171713;
  
  --ink-soft: #24231e;
  
  --paper: #f1eee7;
  
  --paper-deep: #e4dfd4;
  
  --sand: #c7bda9;
  
  --accent: #c8965c;
  
  --accent-light: #e3bd8f;
  
  --white: #fbfaf6;
  
  --muted: #78766e;
  
  --line: rgba(23, 23, 19, 0.15);
  
  --line-light: rgba(255, 255, 255, 0.15);
  
  --container: 1320px;
  
  --serif: "Playfair Display", Georgia, serif;
  
  --sans: "Manrope", "DM Sans", Arial, sans-serif;

}


* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  
  margin: 0;
  
  background: var(--paper);
  
  color: var(--ink);
  
  font-family: var(--sans);
  
  font-size: 16px;
  
  line-height: 1.65;
  
  overflow-x: hidden;

}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; }

img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--ink); }


.page-noise {
  
  position: fixed;
  
  inset: 0;
  
  opacity: .028;
  
  pointer-events: none;
  
  z-index: 999;
  
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");

}

.container { width: min(calc(100% - 64px), var(--container)); margin-inline: auto; }

.section-pad { padding: 130px 0; }

.section-kicker {
  
  display: inline-block;
  
  color: #777367;
  
  font-size: 11px;
  
  font-weight: 700;
  
  letter-spacing: .18em;
  
  text-transform: uppercase;

}

.section-kicker.light { color: rgba(255,255,255,.56); }

h1, h2, h3, p { margin-top: 0; }

h2 {
  
  font-family: var(--serif);
  
  font-size: clamp(44px, 5vw, 76px);
  
  line-height: 1.08;
  
  letter-spacing: -.035em;
  
  font-weight: 500;
  
  margin-bottom: 0;

}

h2 em, h1 em { font-weight: 500; color: var(--accent); }


/* Header */

.site-header {
  
  position: fixed;
  
  top: 0;
  
  left: 0;
  
  width: 100%;
  
  z-index: 100;
  
  border-bottom: 1px solid rgba(255,255,255,.14);
  
  transition: background .35s ease, border-color .35s ease, transform .35s ease;

}

.site-header.scrolled {
  
  background: rgba(23,23,19,.94);
  
  backdrop-filter: blur(16px);
  
  border-color: rgba(255,255,255,.08);

}

.nav-wrap { height: 90px; display: flex; align-items: center; justify-content: space-between; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); }

.brand-mark {
  
  width: 42px;
  
  height: 42px;
  
  display: grid;
  
  place-items: center;
  
  border: 1px solid rgba(255,255,255,.55);
  
  border-radius: 50%;
  
  font-family: var(--serif);
  
  font-size: 23px;
  
  font-style: italic;

}

.brand-text { display: flex; flex-direction: column; line-height: 1; }

.brand-text strong { font-size: 17px; letter-spacing: .16em; font-weight: 600; }

.brand-text small { font-size: 8px; letter-spacing: .33em; margin-top: 7px; opacity: .7; }

.desktop-nav { display: flex; align-items: center; gap: 34px; }

.desktop-nav a { color: rgba(255,255,255,.78); font-size: 12px; font-weight: 600; transition: color .25s ease; }

.desktop-nav a:hover { color: var(--accent-light); }

.nav-cta {
  
  color: var(--white);
  
  border-bottom: 1px solid rgba(255,255,255,.55);
  
  padding: 8px 0;
  
  font-size: 12px;
  
  font-weight: 700;
  
  letter-spacing: .02em;

}

.nav-cta span { margin-left: 9px; color: var(--accent-light); }

.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 8px; }

.menu-toggle span { display: block; height: 1px; background: #fff; margin: 8px 0; transition: transform .3s ease; }

.mobile-menu { display: none; }


/* Hero */

.hero {
  
  position: relative;
  
  min-height: 930px;
  
  height: 100vh;
  
  background: #1b1a16;
  
  color: var(--white);
  
  isolation: isolate;

}

.hero-media {
  
  position: absolute;
  
  inset: 0;
  
  z-index: -3;
  
  background-image: url("hero.webp?v=20260825-perf");
  background-image: image-set(
    url("hero.avif?v=20260825-perf") type("image/avif"),
    url("hero.webp?v=20260825-perf") type("image/webp")
  );
  
  background-size: cover;
  
  background-position: center 52%;
  
  transform: scale(1.01);

}

.hero-overlay {
  
  position: absolute;
  
  inset: 0;
  
  z-index: -2;
  
  background:
    
    linear-gradient(90deg, rgba(12,12,10,.78) 0%, rgba(12,12,10,.48) 43%, rgba(12,12,10,.17) 72%, rgba(12,12,10,.4) 100%),
    
    linear-gradient(0deg, rgba(11,11,9,.72) 0%, transparent 45%);

}

.hero-content { padding-top: 185px; }

.eyebrow { color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: .2em; font-weight: 700; }

.hero h1 {
  
  font-family: var(--serif);
  
  font-size: clamp(62px, 7.4vw, 114px);
  
  line-height: .97;
  
  letter-spacing: -.052em;
  
  font-weight: 500;
  
  margin: 34px 0 48px;
  
  max-width: 1000px;

}

.hero h1 em { font-style: italic; }

.hero-bottom { display: flex; align-items: flex-end; gap: 90px; padding-left: 44%; }

.hero-bottom p { max-width: 480px; color: rgba(255,255,255,.76); font-size: 15px; margin-bottom: 0; }

.circle-link {
  
  width: 132px;
  
  height: 132px;
  
  flex: 0 0 132px;
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  
  gap: 12px;
  
  border: 1px solid rgba(255,255,255,.42);
  
  border-radius: 50%;
  
  transition: background .35s ease, color .35s ease, transform .35s ease;

}

.circle-link span { font-size: 9px; line-height: 1.4; letter-spacing: .12em; font-weight: 700; }

.circle-link i { font-style: normal; color: var(--accent-light); font-size: 24px; }

.circle-link:hover { background: var(--accent); color: var(--ink); transform: translateY(-6px); border-color: var(--accent); }

.circle-link:hover i { color: var(--ink); }

.hero-stats {
  
  position: absolute;
  
  left: 0;
  
  bottom: 0;
  
  display: grid;
  
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  
  border-top: 1px solid rgba(255,255,255,.18);
  
  border-right: 1px solid rgba(255,255,255,.18);
  
  background: rgba(18,18,15,.42);
  
  backdrop-filter: blur(8px);

}

.hero-stats div { padding: 26px 50px 28px; border-right: 1px solid rgba(255,255,255,.15); }

.hero-stats div:last-child { border-right: 0; }

.hero-stats strong { display: block; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--accent-light); font-weight: 500; }

.hero-stats span { display: block; margin-top: 9px; color: rgba(255,255,255,.56); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }


/* Intro */

.intro { background: var(--paper); }

.intro-grid { display: grid; grid-template-columns: 1fr 3.3fr; gap: 70px; }

.intro-copy h2 { max-width: 1030px; }

.intro-copy h2 em { font-style: italic; color: #7e7566; }

.intro-details { margin-top: 65px; margin-left: 32%; display: grid; grid-template-columns: 1fr 1fr; gap: 55px; color: #5f5d56; font-size: 14px; }


/* Services */

.services { background: var(--paper-deep); border-top: 1px solid var(--line); }

.section-head { display: grid; grid-template-columns: 1.45fr .7fr; align-items: end; gap: 80px; margin-bottom: 75px; }

.section-head h2 { margin-top: 18px; }

.section-head > p { color: #66635b; font-size: 14px; max-width: 500px; margin-bottom: 5px; }

.service-list { border-top: 1px solid var(--line); }

.service-item {
  
  min-height: 180px;
  
  display: grid;
  
  grid-template-columns: 80px 115px 1fr 50px;
  
  align-items: center;
  
  gap: 25px;
  
  border-bottom: 1px solid var(--line);
  
  transition: background .35s ease, padding .35s ease;

}

.service-item:hover { background: rgba(255,255,255,.35); padding-inline: 22px; }

.service-num { color: #908b80; font-size: 10px; letter-spacing: .12em; }

.service-icon { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }

.service-icon svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 1.3; }

.service-copy { display: grid; grid-template-columns: 1fr 1.1fr; gap: 55px; align-items: center; }

.service-copy h3 { font-family: var(--serif); font-size: 28px; font-weight: 500; margin-bottom: 0; }

.service-copy p { margin-bottom: 0; color: #68655e; font-size: 13px; max-width: 520px; }

.service-arrow { justify-self: end; color: var(--accent); font-size: 24px; }


/* Projects */

.projects { background: var(--ink); color: var(--white); }

.projects-header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 65px; }

.projects-header h2 { margin-top: 18px; }

.text-link { border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 8px; font-size: 12px; }

.text-link span { color: var(--accent-light); margin-left: 8px; }

.project-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px 28px; }

.project-card { overflow: hidden; }

.project-large { grid-row: span 1; }

.project-wide { align-self: end; }

.project-image { height: 510px; background-size: cover; background-position: center; filter: saturate(.78); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; }

.project-card:hover .project-image { transform: scale(1.025); filter: saturate(1); }

.project-card:nth-child(2) .project-image { height: 400px; }

.project-card:nth-child(3) .project-image { height: 430px; }

.project-card:nth-child(4) .project-image { height: 560px; }

.image-kitchen { background-color: #211c15; }

.image-living { background-color: #211c15; }

.image-bathroom { background-color: #211c15; background-position: center 60%; }

.image-lounge { background-color: #211c15; }

.project-meta { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line-light); margin-top: 20px; }

.project-meta span { color: rgba(255,255,255,.45); font-size: 9px; letter-spacing: .16em; }

.project-meta h3 { font-family: var(--serif); font-size: 28px; font-weight: 500; margin: 5px 0 0; }

.project-meta p { color: rgba(255,255,255,.45); font-size: 11px; margin-bottom: 5px; }


/* Process */

.process { background: var(--paper); }

.process-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 120px; align-items: start; }

.process-sticky { position: sticky; top: 140px; }

.process-sticky h2 { font-size: clamp(42px, 4.5vw, 68px); margin: 22px 0 32px; }

.process-sticky h2 em { color: #7f7567; font-style: italic; }

.process-sticky > p { color: #65635c; max-width: 510px; font-size: 14px; }

.btn-primary { margin-top: 24px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--ink); color: var(--white); padding: 17px 22px; min-width: 260px; font-size: 12px; transition: background .3s ease, transform .3s ease; }

.btn-primary span { color: var(--accent-light); }

.btn-primary:hover { background: var(--accent); color: var(--ink); transform: translateY(-3px); }

.btn-primary:hover span { color: var(--ink); }

.steps { border-top: 1px solid var(--line); }

.step { display: grid; grid-template-columns: 70px 1fr; gap: 34px; padding: 45px 0 48px; border-bottom: 1px solid var(--line); }

.step > span { font-family: var(--serif); font-size: 28px; color: var(--accent); }

.step h3 { font-family: var(--serif); font-size: 30px; font-weight: 500; margin-bottom: 13px; }

.step p { color: #65625b; font-size: 13px; max-width: 590px; margin-bottom: 0; }


/* Banner */

.work-banner { position: relative; min-height: 720px; color: var(--white); display: flex; align-items: center; isolation: isolate; overflow: hidden; }

.work-banner-image {
  
  position: absolute;
  
  inset: 0;
  
  z-index: -2;
  
  background-image: none;
  
  background-size: cover;
  
  background-position: center;
  
  filter: saturate(.5);
  
  transform: scale(1.03);

}

.work-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,10,8,.9) 0%, rgba(10,10,8,.62) 53%, rgba(10,10,8,.28) 100%); }

.work-banner-content { padding-left: 8%; }

.work-banner-content > span { font-size: 10px; letter-spacing: .2em; color: var(--accent-light); font-weight: 700; }

.work-banner-content h2 { max-width: 820px; margin: 28px 0 32px; }

.work-banner-content h2 em { color: var(--accent-light); font-style: italic; }

.work-banner-content p { color: rgba(255,255,255,.62); max-width: 460px; font-size: 14px; }


/* Testimonials */

.testimonials { background: var(--paper-deep); }

.testimonial-top { display: flex; align-items: center; justify-content: space-between; }

.stars { color: var(--accent); letter-spacing: .16em; font-size: 13px; }

.stars small { color: #77736a; letter-spacing: normal; margin-left: 10px; }

.testimonial-wrap { display: grid; grid-template-columns: 70px 1fr 70px; gap: 30px; align-items: center; margin-top: 70px; }

.quote-nav { width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 20px; transition: .25s ease; }

.quote-nav:hover { background: var(--ink); color: var(--white); }

.quotes { position: relative; min-height: 300px; }

.quote { display: none; text-align: center; margin: 0 auto; max-width: 1000px; }

.quote.active { display: block; animation: quoteIn .55s ease both; }

.quote p { font-family: var(--serif); font-size: clamp(30px, 3.3vw, 50px); line-height: 1.28; letter-spacing: -.025em; margin-bottom: 42px; }

.quote footer strong { display: block; font-size: 12px; }

.quote footer span { display: block; color: #77736b; font-size: 10px; margin-top: 6px; letter-spacing: .08em; }

@keyframes quoteIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


/* FAQ */

.faq { background: var(--paper); }

.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 130px; }

.faq h2 { font-size: clamp(44px, 4.2vw, 64px); margin: 18px 0 25px; }

.faq-grid > div:first-child p { color: #6d6a62; max-width: 360px; font-size: 13px; }

.accordion { border-top: 1px solid var(--line); }

.accordion-item { border-bottom: 1px solid var(--line); }

.accordion-item button { width: 100%; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 28px 0; text-align: left; }

.accordion-item button span { font-family: var(--serif); font-size: 23px; }

.accordion-item button i { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-style: normal; transition: transform .3s ease; }

.accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }

.accordion-content p { min-height: 0; overflow: hidden; color: #6c6961; font-size: 13px; max-width: 670px; margin-bottom: 0; }

.accordion-item.active .accordion-content { grid-template-rows: 1fr; }

.accordion-item.active .accordion-content p { padding-bottom: 30px; }

.accordion-item.active button i { transform: rotate(45deg); }


/* Contact */

.contact { background: var(--ink); color: var(--white); }

.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 110px; }

.contact-copy h2 { font-size: clamp(48px, 5vw, 76px); margin: 24px 0 34px; }

.contact-copy h2 em { color: var(--accent-light); font-style: italic; }

.contact-copy > p { max-width: 520px; color: rgba(255,255,255,.55); font-size: 14px; }

.contact-info { display: grid; gap: 22px; margin-top: 58px; }

.contact-info a, .contact-info div { color: rgba(255,255,255,.82); font-size: 13px; }

.contact-info span { display: block; color: rgba(255,255,255,.36); font-size: 8px; letter-spacing: .18em; margin-bottom: 5px; }

.contact-form { border-top: 1px solid var(--line-light); padding-top: 25px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.contact-form label:not(.consent) { display: block; margin-bottom: 28px; }

.contact-form label > span:first-child { display: block; color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; }

.contact-form input, .contact-form textarea, .contact-form select {
  
  width: 100%;
  
  border: 0;
  
  border-bottom: 1px solid rgba(255,255,255,.2);
  
  border-radius: 0;
  
  background: transparent;
  
  color: var(--white);
  
  outline: 0;
  
  padding: 10px 0 13px;
  
  font-size: 13px;
  
  transition: border-color .25s ease;

}

.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--accent-light); }

.contact-form textarea { resize: vertical; min-height: 110px; }

.contact-form option { color: var(--ink); background: var(--white); }

.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.28); }

.contact-form .field-invalid { border-color: #df7a6a; }

.error { display: block; color: #e99687; font-size: 10px; min-height: 16px; margin-top: 4px; }

.consent { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.42); font-size: 10px; margin: 3px 0 26px; }

.consent input { width: 15px; height: 15px; flex: 0 0 15px; accent-color: var(--accent); }

.submit-btn { width: 100%; border: 0; background: var(--accent); color: var(--ink); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; transition: background .3s ease; }

.submit-btn:hover { background: var(--accent-light); }

.form-status { margin-top: 15px; min-height: 22px; font-size: 12px; color: var(--accent-light); }


/* Footer */

.footer { background: #11110f; color: var(--white); padding: 70px 0 28px; border-top: 1px solid rgba(255,255,255,.08); }

.footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 40px; padding-bottom: 60px; }

.footer-brand { justify-self: start; }

.footer-top > p { color: rgba(255,255,255,.46); font-size: 13px; margin-bottom: 0; }

.socials { display: flex; justify-content: flex-end; gap: 22px; }

.socials a { color: rgba(255,255,255,.6); font-size: 11px; }

.socials a:hover { color: var(--accent-light); }

.footer-bottom { padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.3); font-size: 9px; letter-spacing: .04em; }

.footer-bottom div { display: flex; gap: 20px; }

.footer-bottom a:hover { color: rgba(255,255,255,.8); }


/* Reveal */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.delay-1 { transition-delay: .12s; }

.delay-2 { transition-delay: .24s; }


@media (max-width: 1120px) {
  
  .desktop-nav { gap: 22px; }
  
  .hero-bottom { padding-left: 32%; }
  
  .intro-details { margin-left: 16%; }
  
  .process-grid, .contact-grid { gap: 70px; }
  
  .faq-grid { gap: 80px; }

}


@media (max-width: 900px) {
  
  .container { width: min(calc(100% - 40px), var(--container)); }
  
  .section-pad { padding: 95px 0; }
  
  .desktop-nav, .nav-cta { display: none; }
  
  .menu-toggle { display: block; }
  
  .mobile-menu {
    
    display: flex;
    
    position: fixed;
    
    inset: 90px 0 auto;
    
    height: calc(100vh - 90px);
    
    background: rgba(23,23,19,.985);
    
    padding: 48px 20px;
    
    flex-direction: column;
    
    gap: 6px;
    
    transform: translateX(100%);
    
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
  
  }
  
  .mobile-menu.open { transform: translateX(0); }
  
  .mobile-menu a { color: var(--white); font-family: var(--serif); font-size: 34px; padding: 8px 0; }
  
  .mobile-menu-cta { margin-top: 25px; font-family: var(--sans) !important; font-size: 13px !important; background: var(--accent); color: var(--ink) !important; padding: 16px 18px !important; text-align: center; }
  
  .menu-toggle.active span:first-child { transform: translateY(4.5px) rotate(45deg); }
  
  .menu-toggle.active span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

  
  .hero { min-height: 850px; height: auto; }
  
  .hero-content { padding-top: 160px; }
  
  .hero h1 { font-size: clamp(54px, 11vw, 84px); }
  
  .hero-bottom { padding-left: 0; justify-content: space-between; gap: 40px; }
  
  .hero-stats { position: absolute; width: 100%; grid-template-columns: repeat(3, 1fr); }
  
  .hero-stats div { padding: 22px 20px; }
  
  .intro-grid { grid-template-columns: 1fr; gap: 35px; }
  
  .intro-details { margin-left: 0; }
  
  .section-head { grid-template-columns: 1fr; gap: 30px; }
  
  .service-item { grid-template-columns: 45px 80px 1fr 25px; }
  
  .service-copy { grid-template-columns: 1fr; gap: 10px; }
  
  .project-grid { gap: 60px 22px; }
  
  .process-grid { grid-template-columns: 1fr; }
  
  .process-sticky { position: static; }
  
  .work-banner-content { padding-left: 0; }
  
  .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  
  .testimonial-wrap { grid-template-columns: 55px 1fr 55px; gap: 10px; }
  
  .footer-top { grid-template-columns: 1fr 1fr; }
  
  .socials { grid-column: 1 / -1; justify-content: flex-start; }

}


@media (max-width: 640px) {
  
  body { font-size: 15px; }
  
  .container { width: min(calc(100% - 30px), var(--container)); }
  
  .section-pad { padding: 78px 0; }
  
  .nav-wrap { height: 76px; }
  
  .brand-mark { width: 38px; height: 38px; }
  
  .brand-text strong { font-size: 15px; }
  
  .mobile-menu { inset: 76px 0 auto; height: calc(100vh - 76px); }
  
  .hero { min-height: 820px; }
  
  .hero-content { padding-top: 132px; }
  
  .hero h1 { margin: 26px 0 34px; line-height: 1.02; font-size: clamp(48px, 15vw, 68px); }
  
  .hero-bottom { align-items: flex-start; flex-direction: column; gap: 28px; }
  
  .hero-bottom p { max-width: 88%; }
  
  .circle-link { width: 100px; height: 100px; flex-basis: 100px; }
  
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  
  .hero-stats div { padding: 17px 10px; }
  
  .hero-stats strong { font-size: 26px; }
  
  .hero-stats span { font-size: 7px; line-height: 1.4; }
  
  h2 { font-size: 43px; }
  
  .intro-details { grid-template-columns: 1fr; gap: 15px; margin-top: 38px; }
  
  .service-item { grid-template-columns: 40px 1fr 25px; padding: 28px 0; gap: 15px; }
  
  .service-icon { grid-row: 1; grid-column: 2; width: 55px; height: 55px; margin-bottom: 8px; }
  
  .service-copy { grid-column: 2; }
  
  .service-copy h3 { font-size: 25px; }
  
  .service-arrow { grid-column: 3; grid-row: 1; }
  
  .project-grid { grid-template-columns: 1fr; gap: 55px; }
  
  .project-image, .project-card:nth-child(2) .project-image, .project-card:nth-child(3) .project-image, .project-card:nth-child(4) .project-image { height: 420px; }
  
  .projects-header { align-items: flex-start; flex-direction: column; gap: 28px; }
  
  .project-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  
  .project-meta h3 { font-size: 25px; }
  
  .step { grid-template-columns: 42px 1fr; gap: 15px; padding: 34px 0; }
  
  .step h3 { font-size: 26px; }
  
  .work-banner { min-height: 620px; }
  
  .work-banner-content h2 { font-size: 43px; }
  
  .testimonial-wrap { grid-template-columns: 1fr; }
  
  .quote-nav { position: absolute; z-index: 2; margin-top: 360px; }
  
  .quote-nav.next { right: 25px; }
  
  .quote-nav.prev { left: 25px; }
  
  .quotes { min-height: 440px; }
  
  .quote p { font-size: 30px; }
  
  .testimonial-top { align-items: flex-start; flex-direction: column; gap: 15px; }
  
  .faq-grid { gap: 50px; }
  
  .accordion-item button span { font-size: 20px; padding-right: 15px; }
  
  .contact-grid { gap: 65px; }
  
  .form-row { grid-template-columns: 1fr; gap: 0; }
  
  .footer-top { grid-template-columns: 1fr; }
  
  .socials { grid-column: auto; flex-wrap: wrap; }
  
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 18px; }

}


@media (prefers-reduced-motion: reduce) {
  
  html { scroll-behavior: auto; }
  
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  
  .reveal { opacity: 1; transform: none; }

}


/* -------------------------------------------------
   Responsive hero, desktop motion & premium burger
   ------------------------------------------------- */


.nav-wrap { position: relative; z-index: 4; }

.menu-toggle {
  
  position: relative;
  
  align-items: center;
  
  justify-content: center;
  
  border: 1px solid rgba(255,255,255,.32);
  
  border-radius: 50%;
  
  transition: border-color .25s ease, background .25s ease;

}

.menu-toggle span {
  
  position: absolute;
  
  left: 11px;
  
  width: 20px;
  
  margin: 0;
  
  transform-origin: center;

}

.menu-toggle span:first-child { transform: translateY(-4px); }

.menu-toggle span:last-child { transform: translateY(4px); }

.menu-toggle.active { background: var(--accent); border-color: var(--accent); }

.menu-toggle.active span { background: var(--ink); }

.menu-toggle.active span:first-child { transform: rotate(45deg); }

.menu-toggle.active span:last-child { transform: rotate(-45deg); }


@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  
  .hero { overflow: hidden; }
  
  .hero-media {
    
    transform: scale(1.035);
    
    will-change: transform;
    
    animation: heroCinematic 18s cubic-bezier(.2,.65,.25,1) infinite alternate;
  
  }
  
  .hero-overlay::after {
    
    content: "";
    
    position: absolute;
    
    inset: -20% -30%;
    
    background: linear-gradient(112deg, transparent 37%, rgba(255,255,255,.06) 49%, transparent 61%);
    
    transform: translateX(-38%);
    
    animation: heroLightSweep 9s ease-in-out infinite;
    
    pointer-events: none;
  
  }
  
  .hero h1 em {
    
    text-shadow: 0 0 28px rgba(200,150,92,.08);
  
  }
  
  .circle-link { position: relative; isolation: isolate; }
  
  .circle-link::before {
    
    content: "";
    
    position: absolute;
    
    inset: -7px;
    
    border: 1px solid rgba(227,189,143,.25);
    
    border-radius: inherit;
    
    border-left-color: transparent;
    
    border-bottom-color: transparent;
    
    animation: circleOrbit 8s linear infinite;
    
    z-index: -1;
  
  }
  
  .circle-link i { animation: arrowFloat 1.8s ease-in-out infinite; }
  
  .service-item:hover .service-icon { transform: rotate(-4deg) scale(1.05); border-color: rgba(200,150,92,.62); }
  
  .service-icon { transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s ease; }
  
  .project-card:hover .project-meta h3 { color: var(--accent-light); }
  
  .project-meta h3 { transition: color .3s ease; }

  
  @keyframes heroCinematic {
    
    0% { transform: scale(1.035) translate3d(0, 0, 0); }
    
    100% { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
  
  }
  
  @keyframes heroLightSweep {
    
    0%, 18% { transform: translateX(-42%); opacity: 0; }
    
    42% { opacity: 1; }
    
    68%, 100% { transform: translateX(42%); opacity: 0; }
  
  }
  
  @keyframes circleOrbit { to { transform: rotate(360deg); } }
  
  @keyframes arrowFloat {
    
    0%, 100% { transform: translateY(-2px); }
    
    50% { transform: translateY(5px); }
  
  }

}


@media (max-width: 900px) {
  
  .site-header,
  
  .site-header.scrolled,
  
  body.menu-open .site-header {
    
    background: rgba(23,23,19,.96);
    
    backdrop-filter: blur(16px);
    
    border-color: rgba(255,255,255,.09);
  
  }
  
  .nav-wrap { height: 82px; }
  
  .menu-toggle { display: flex; width: 46px; height: 46px; padding: 0; z-index: 5; }

  
  .mobile-menu {
    
    display: block;
    
    position: fixed;
    
    inset: 0;
    
    height: 100dvh;
    
    padding: 0;
    
    background:
      
      radial-gradient(circle at 90% 4%, rgba(200,150,92,.16), transparent 31%),
      
      linear-gradient(145deg, #1b1b17 0%, #11110f 100%);
    
    overflow-y: auto;
    
    visibility: hidden;
    
    opacity: 0;
    
    transform: none;
    
    clip-path: inset(0 0 0 100%);
    
    transition: clip-path .42s cubic-bezier(.77,0,.18,1), opacity .25s ease, visibility 0s linear .42s;
    
    z-index: 3;
  
  }
  
  .mobile-menu::before {
    
    content: "A";
    
    position: fixed;
    
    right: -22px;
    
    bottom: -118px;
    
    color: rgba(255,255,255,.025);
    
    font-family: var(--serif);
    
    font-size: 390px;
    
    font-style: italic;
    
    line-height: 1;
    
    pointer-events: none;
  
  }
  
  .mobile-menu.open {
    
    visibility: visible;
    
    opacity: 1;
    
    clip-path: inset(0 0 0 0);
    
    transition-delay: 0s;
  
  }
  
  .mobile-menu-inner {
    
    position: relative;
    
    min-height: 100%;
    
    width: min(calc(100% - 40px), 680px);
    
    margin-inline: auto;
    
    padding: 112px 0 34px;
    
    display: flex;
    
    flex-direction: column;
  
  }
  
  .mobile-menu-topline {
    
    display: flex;
    
    justify-content: space-between;
    
    padding-bottom: 16px;
    
    border-bottom: 1px solid rgba(255,255,255,.13);
    
    color: rgba(255,255,255,.38);
    
    font-size: 8px;
    
    font-weight: 700;
    
    letter-spacing: .18em;
  
  }
  
  .mobile-nav { display: grid; margin-top: 18px; }
  
  .mobile-menu .mobile-nav a {
    
    display: grid;
    
    grid-template-columns: 34px 1fr 24px;
    
    align-items: center;
    
    gap: 8px;
    
    padding: 15px 0;
    
    border-bottom: 1px solid rgba(255,255,255,.11);
    
    color: var(--white);
    
    font-family: var(--serif);
    
    font-size: clamp(29px, 8.4vw, 48px);
    
    line-height: 1.08;
    
    opacity: 0;
    
    transform: translateX(28px);
    
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), color .25s ease;
  
  }
  
  .mobile-menu.open .mobile-nav a { opacity: 1; transform: translateX(0); }
  
  .mobile-menu.open .mobile-nav a:nth-child(1) { transition-delay: .10s; }
  
  .mobile-menu.open .mobile-nav a:nth-child(2) { transition-delay: .15s; }
  
  .mobile-menu.open .mobile-nav a:nth-child(3) { transition-delay: .20s; }
  
  .mobile-menu.open .mobile-nav a:nth-child(4) { transition-delay: .25s; }
  
  .mobile-nav small {
    
    color: var(--accent-light);
    
    font-family: var(--sans);
    
    font-size: 8px;
    
    letter-spacing: .12em;
  
  }
  
  .mobile-nav i { justify-self: end; color: rgba(255,255,255,.34); font-family: var(--sans); font-size: 18px; font-style: normal; }
  
  .mobile-menu-footer {
    
    margin-top: auto;
    
    padding-top: 30px;
    
    display: grid;
    
    gap: 24px;
  
  }
  
  .mobile-menu-footer > div { display: grid; gap: 3px; }
  
  .mobile-menu-footer > div > span { color: rgba(255,255,255,.32); font-size: 8px; letter-spacing: .16em; margin-bottom: 5px; }
  
  .mobile-menu .mobile-menu-footer > div a {
    
    padding: 0;
    
    color: rgba(255,255,255,.66);
    
    font-family: var(--sans);
    
    font-size: 11px;
  
  }
  
  .mobile-menu .mobile-menu-cta {
    
    margin: 0;
    
    padding: 16px 18px !important;
    
    display: flex;
    
    align-items: center;
    
    justify-content: space-between;
    
    background: var(--accent);
    
    color: var(--ink) !important;
    
    font-family: var(--sans) !important;
    
    font-size: 11px !important;
    
    font-weight: 800;
    
    letter-spacing: .03em;
  
  }
  
  .mobile-menu-cta b { font-size: 17px; font-weight: 400; }

  
  /* Hero tablet/mobile */
  
  .hero {
    
    min-height: max(780px, 100svh);
    
    height: auto;
    
    padding-bottom: 108px;
    
    overflow: hidden;
  
  }
  
  .hero-media {
    
    background-position: 61% center;
    
    transform: none;
  
  }
  
  .hero-overlay {
    
    background:
      
      linear-gradient(90deg, rgba(12,12,10,.82) 0%, rgba(12,12,10,.52) 70%, rgba(12,12,10,.34) 100%),
      
      linear-gradient(0deg, rgba(11,11,9,.86) 0%, rgba(11,11,9,.08) 58%);
  
  }
  
  .hero-content {
    
    padding-top: 142px;
    
    padding-bottom: 70px;
  
  }
  
  .eyebrow { max-width: 88%; line-height: 1.55; }
  
  .hero h1 {
    
    max-width: 760px;
    
    margin: 30px 0 38px;
    
    font-size: clamp(52px, 10.5vw, 82px);
    
    line-height: .99;
    
    letter-spacing: -.048em;
  
  }
  
  .hero-bottom {
    
    padding-left: 0;
    
    align-items: center;
    
    justify-content: space-between;
    
    gap: 34px;
  
  }
  
  .hero-bottom p { max-width: 560px; font-size: 14px; }
  
  .circle-link { width: 112px; height: 112px; flex: 0 0 112px; }
  
  .hero-stats {
    
    width: 100%;
    
    min-height: 108px;
    
    grid-template-columns: repeat(3, minmax(0, 1fr));
    
    background: rgba(18,18,15,.72);
    
    backdrop-filter: blur(12px);
  
  }
  
  .hero-stats div { min-width: 0; padding: 20px 18px 19px; }
  
  .hero-stats strong { font-size: 29px; }
  
  .hero-stats span { font-size: 8px; line-height: 1.35; }

  
  /* No page motion effects on touch/mobile layouts. */
  
  .reveal,
  
  .reveal.is-visible {
    
    opacity: 1 !important;
    
    transform: none !important;
    
    transition: none !important;
  
  }
  
  .service-item,
  
  .service-icon,
  
  .project-image,
  
  .project-meta h3,
  
  .circle-link,
  
  .quote.active {
    
    animation: none !important;
    
    transition: none !important;
  
  }
  
  .service-item:hover { padding-inline: 0; background: transparent; }
  
  .project-card:hover .project-image { transform: none; filter: saturate(.78); }
  
  .circle-link:hover { transform: none; }

}


@media (max-width: 640px) {
  
  .nav-wrap { height: 74px; }
  
  .menu-toggle { width: 42px; height: 42px; }
  
  .menu-toggle span { left: 10px; width: 20px; }
  
  .mobile-menu-inner { width: calc(100% - 30px); padding-top: 98px; padding-bottom: 24px; }
  
  .mobile-menu .mobile-nav a { padding: 13px 0; font-size: clamp(28px, 9.2vw, 40px); }
  
  .mobile-menu-footer { padding-top: 24px; gap: 18px; }

  
  .hero {
    
    min-height: max(720px, 100svh);
    
    padding-bottom: 96px;
  
  }
  
  .hero-content {
    
    padding-top: 116px;
    
    padding-bottom: 42px;
  
  }
  
  .hero h1 {
    
    margin: 23px 0 29px;
    
    font-size: clamp(40px, 12vw, 57px);
    
    line-height: 1.01;
    
    letter-spacing: -.045em;
  
  }
  
  .eyebrow { max-width: 100%; font-size: 8px; letter-spacing: .15em; }
  
  .hero-bottom { align-items: flex-start; gap: 22px; }
  
  .hero-bottom p { max-width: 100%; font-size: 13px; line-height: 1.6; }
  
  .circle-link {
    
    width: auto;
    
    height: auto;
    
    flex: 0 0 auto;
    
    min-width: 0;
    
    padding: 13px 17px;
    
    border-radius: 999px;
  
  }
  
  .circle-link span { font-size: 8px; white-space: nowrap; }
  
  .circle-link span br { display: none; }
  
  .circle-link i { font-size: 18px; transform: rotate(-90deg); }
  
  .hero-stats { min-height: 96px; }
  
  .hero-stats div { padding: 17px 8px 15px; }
  
  .hero-stats strong { font-size: 24px; }
  
  .hero-stats span { margin-top: 7px; font-size: 6.8px; letter-spacing: .055em; }

}


@media (max-width: 390px) {
  
  .brand-text small { letter-spacing: .25em; }
  
  .hero-content { padding-top: 108px; }
  
  .hero h1 { font-size: clamp(38px, 11.7vw, 46px); }
  
  .hero-bottom p { font-size: 12.5px; }
  
  .hero-stats strong { font-size: 22px; }
  
  .mobile-menu .mobile-nav a { font-size: 29px; }

}


/* MG Technical brand overrides */
.brand.logo-brand {
  display: inline-flex;
  align-items: center;
  min-width: 155px;
}
.brand.logo-brand img {
  width: 136px;
  height: auto;
  object-fit: contain;
}
.footer .brand.logo-brand img {
  width: 148px;
}
.hero-stats strong {
  font-family: var(--serif);
  font-size: 28px;
}
.contact-info a:hover { color: var(--accent-light); }
.map-embed {
  background: var(--ink);
  padding: 0 0 100px;
  color: var(--white);
}
.map-frame {
  width: min(calc(100% - 64px), var(--container));
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  min-height: 420px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.map-frame iframe {
  width: 100%;
  height: 430px;
  display: block;
  border: 0;
  filter: grayscale(1) invert(.92) contrast(.9);
  opacity: .88;
}
.map-open {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: rgba(23,23,19,.92);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.2);
  padding: 12px 16px;
  font-size: 11px;
  letter-spacing: .04em;
}
.hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 900px) {
  .brand.logo-brand img { width: 112px; }
  .map-frame {
    width: min(calc(100% - 40px), var(--container));
    min-height: 340px;
  }
  .map-frame iframe { height: 360px; }
  .map-open { left: 14px; right: 14px; bottom: 14px; text-align: center; }
}
@media (max-width: 600px) {
  .hero-stats strong { font-size: 25px; }
}


/* =========================================================
   Bilingual EL / EN switch
   ========================================================= */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.54);
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.14em;
  white-space:nowrap;
}
.lang-switch button{
  border:0;
  background:transparent;
  color:inherit;
  padding:6px 2px;
  cursor:pointer;
  font:inherit;
  letter-spacing:inherit;
  transition:color .2s ease, opacity .2s ease;
}
.lang-switch button:hover,
.lang-switch button.active{
  color:var(--white);
}
.lang-switch button.active{
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--accent);
}
.desktop-lang{margin-left:auto}
.desktop-lang + .nav-cta{margin-left:4px}
.mobile-lang{
  color:rgba(255,255,255,.6);
  font-size:12px;
}
html[lang="en"] .hero h1{
  max-width:1100px;
}
html[lang="en"] .service-copy h3{
  letter-spacing:-.035em;
}
@media (max-width:900px){
  .desktop-lang{display:none}
}


/* =========================================================
   Final refinements — smaller titles & professional footer
   ========================================================= */

/* Slightly smaller typography for a calmer, more premium feel */
.hero h1{
  font-size:clamp(42px,5.7vw,82px) !important;
  line-height:.98 !important;
}
.intro-copy h2,
.section-head h2,
.projects-header h2,
.process-sticky h2,
.work-banner-content h2,
.faq-grid h2,
.contact-copy h2{
  font-size:clamp(34px,4vw,54px) !important;
  line-height:1.06 !important;
}
.service-copy h3{
  font-size:clamp(24px,2.2vw,31px) !important;
}
.project-meta h3{
  font-size:clamp(22px,2vw,29px) !important;
}
.step h3{
  font-size:clamp(22px,2vw,28px) !important;
}
.quote p{
  font-size:clamp(27px,3.4vw,46px) !important;
  line-height:1.14 !important;
}

/* Professional footer */
.footer{
  background:#11110e !important;
  color:var(--white);
  border-top:1px solid rgba(255,255,255,.09);
  padding:78px 0 24px !important;
}
.footer-main{
  display:grid;
  grid-template-columns:1.45fr .75fr .9fr 1fr;
  gap:56px;
  align-items:start;
}
.footer-identity{
  max-width:380px;
}
.footer .footer-brand{
  display:inline-flex;
  margin-bottom:24px;
}
.footer .footer-brand img{
  width:152px !important;
  height:auto;
}
.footer-identity>p{
  margin:0;
  color:rgba(255,255,255,.58);
  line-height:1.8;
  font-size:14px;
  max-width:350px;
}
.footer-names{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.09);
}
.footer-names span{
  color:rgba(255,255,255,.76);
  font-size:12px;
  letter-spacing:.04em;
}
.footer-column{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.footer-title{
  display:block;
  color:var(--accent-light);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.footer-column>a{
  color:rgba(255,255,255,.68);
  font-size:13px;
  line-height:1.65;
  transition:color .2s ease;
}
.footer-column>a:hover{
  color:#fff;
}
.footer-cta-column>p{
  color:rgba(255,255,255,.58);
  font-size:13px;
  line-height:1.7;
  margin:0 0 8px;
}
.footer-cta{
  display:inline-flex !important;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-width:190px;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.14);
  color:#fff !important;
  background:rgba(255,255,255,.035);
}
.footer-cta:hover{
  border-color:var(--accent);
  background:rgba(255,255,255,.06);
}
.footer-bottom{
  margin-top:58px !important;
  padding-top:20px !important;
  border-top:1px solid rgba(255,255,255,.09) !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  color:rgba(255,255,255,.38) !important;
  font-size:11px !important;
  letter-spacing:.02em;
}
.footer-bottom>span:nth-child(2){
  text-align:center;
}
.footer-bottom>a{
  text-align:right;
  color:rgba(255,255,255,.58);
}
.footer-bottom>a:hover{
  color:#fff;
}

@media (max-width:1000px){
  .footer-main{
    grid-template-columns:1.2fr 1fr 1fr;
    gap:38px;
  }
  .footer-cta-column{
    grid-column:2 / 4;
    padding-top:10px;
  }
}
@media (max-width:700px){
  .hero h1{
    font-size:clamp(38px,10.5vw,52px) !important;
  }
  .intro-copy h2,
  .section-head h2,
  .projects-header h2,
  .process-sticky h2,
  .work-banner-content h2,
  .faq-grid h2,
  .contact-copy h2{
    font-size:clamp(31px,8.5vw,42px) !important;
  }
  .footer{
    padding-top:58px !important;
  }
  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:34px 24px;
  }
  .footer-identity{
    grid-column:1 / -1;
    max-width:none;
    padding-bottom:6px;
  }
  .footer-cta-column{
    grid-column:1 / -1;
  }
  .footer-bottom{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }
  .footer-bottom>span:nth-child(2),
  .footer-bottom>a{
    text-align:left !important;
  }
}


/* =========================================================
   MOBILE FINAL FIX — responsive layout + rebuilt burger menu
   ========================================================= */

@media (max-width: 900px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .container {
    width: min(calc(100% - 32px), var(--container)) !important;
  }

  .section-pad {
    padding: 78px 0 !important;
  }

  /* Header */
  .site-header,
  .site-header.scrolled,
  body.menu-open .site-header {
    height: 76px;
    background: rgba(20,20,17,.96) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-color: rgba(255,255,255,.09) !important;
  }

  .nav-wrap {
    height: 76px !important;
    min-height: 76px !important;
  }

  .brand.logo-brand {
    min-width: 0 !important;
    position: relative;
    z-index: 6;
  }

  .brand.logo-brand img {
    width: 94px !important;
    max-height: 58px;
    object-fit: contain;
  }

  .desktop-nav,
  .desktop-lang,
  .nav-cta {
    display: none !important;
  }

  .menu-toggle {
    position: relative !important;
    z-index: 6 !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    padding: 0 !important;
    margin-left: auto;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 50%;
    background: rgba(255,255,255,.025) !important;
  }

  .menu-toggle span {
    position: absolute !important;
    left: 11px !important;
    width: 20px !important;
    height: 1px !important;
    margin: 0 !important;
    background: #fff;
    transform-origin: center;
  }

  .menu-toggle span:first-child {
    top: 17px !important;
    transform: none;
  }

  .menu-toggle span:last-child {
    top: 25px !important;
    transform: none;
  }

  .menu-toggle.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
  }

  .menu-toggle.active span {
    background: var(--ink) !important;
    top: 21px !important;
  }

  .menu-toggle.active span:first-child {
    transform: rotate(45deg) !important;
  }

  .menu-toggle.active span:last-child {
    transform: rotate(-45deg) !important;
  }

  /* Full-screen mobile menu */
  .mobile-menu {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100svh;
    padding: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 100% 0%, rgba(200,150,92,.12), transparent 34%),
      linear-gradient(145deg, #1a1a16 0%, #11110f 100%) !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 0 100%);
    transform: none !important;
    transition:
      clip-path .42s cubic-bezier(.77,0,.18,1),
      opacity .22s ease,
      visibility 0s linear .42s !important;
    z-index: 4 !important;
  }

  .mobile-menu.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0 0 0 0);
    transition-delay: 0s !important;
  }

  .mobile-menu::before {
    content: "MG";
    position: fixed;
    right: -30px;
    bottom: -25px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(150px, 45vw, 260px);
    line-height: .8;
    color: rgba(255,255,255,.022);
    pointer-events: none;
  }

  .mobile-menu-inner {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 32px), 620px) !important;
    min-height: 100dvh !important;
    margin-inline: auto;
    padding: 98px 0 24px !important;
    display: flex !important;
    flex-direction: column;
  }

  .mobile-menu-topline {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.38);
    font-family: var(--sans);
    font-size: 9px !important;
    font-weight: 700;
    letter-spacing: .17em;
  }

  .mobile-lang {
    display: inline-flex !important;
    color: rgba(255,255,255,.48) !important;
    font-size: 11px !important;
  }

  .mobile-nav {
    display: grid !important;
    margin: 12px 0 0 !important;
  }

  .mobile-menu .mobile-nav a {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 24px !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: var(--white);
    font-family: var(--serif) !important;
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.05 !important;
    opacity: 0;
    transform: translateX(20px);
    transition:
      opacity .3s ease,
      transform .38s cubic-bezier(.2,.7,.2,1),
      color .2s ease !important;
  }

  .mobile-menu.open .mobile-nav a {
    opacity: 1;
    transform: translateX(0);
  }

  .mobile-menu.open .mobile-nav a:nth-child(1) { transition-delay: .07s !important; }
  .mobile-menu.open .mobile-nav a:nth-child(2) { transition-delay: .11s !important; }
  .mobile-menu.open .mobile-nav a:nth-child(3) { transition-delay: .15s !important; }
  .mobile-menu.open .mobile-nav a:nth-child(4) { transition-delay: .19s !important; }
  .mobile-menu.open .mobile-nav a:nth-child(5) { transition-delay: .23s !important; }

  .mobile-nav small {
    font-family: var(--sans);
    font-size: 8px !important;
    color: var(--accent-light);
    letter-spacing: .12em;
  }

  .mobile-nav i {
    justify-self: end;
    font-family: var(--sans);
    font-style: normal;
    font-size: 16px !important;
    color: rgba(255,255,255,.38);
  }

  .mobile-menu-footer {
    margin-top: auto !important;
    padding-top: 26px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .mobile-menu-footer > div {
    display: grid;
    gap: 4px;
  }

  .mobile-menu-footer > div > span {
    margin-bottom: 5px;
    color: rgba(255,255,255,.30);
    font-size: 8px !important;
    letter-spacing: .16em;
  }

  .mobile-menu .mobile-menu-footer > div a {
    padding: 0 !important;
    color: rgba(255,255,255,.68) !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    line-height: 1.55;
    word-break: normal;
  }

  .mobile-menu .mobile-menu-cta {
    width: 100%;
    min-height: 52px;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: var(--accent);
    color: var(--ink) !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: .02em;
  }

  /* Hero */
  .hero {
    min-height: 760px !important;
    height: auto !important;
    padding: 0 0 94px !important;
  }

  .hero-media {
    background-position: 58% center !important;
    transform: none !important;
  }

  .hero-content {
    padding-top: 124px !important;
    padding-bottom: 48px !important;
  }

  .eyebrow {
    max-width: 95%;
    font-size: 8px !important;
    line-height: 1.5;
    letter-spacing: .13em !important;
  }

  .hero h1 {
    max-width: 670px !important;
    margin: 22px 0 26px !important;
    font-size: clamp(40px, 9.4vw, 58px) !important;
    line-height: 1.01 !important;
    letter-spacing: -.042em !important;
  }

  .hero-bottom {
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
  }

  .hero-bottom p {
    max-width: 560px !important;
    margin: 0;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .circle-link {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    gap: 10px !important;
  }

  .circle-link span {
    font-size: 8px !important;
    white-space: nowrap;
  }

  .circle-link span br { display: none !important; }
  .circle-link i {
    font-size: 17px !important;
    transform: rotate(-90deg);
  }

  .hero-stats {
    width: 100% !important;
    min-height: 88px;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    background: rgba(17,17,14,.78) !important;
  }

  .hero-stats div {
    min-width: 0;
    padding: 15px 8px !important;
  }

  .hero-stats strong {
    font-size: 22px !important;
  }

  .hero-stats span {
    margin-top: 6px !important;
    font-size: 6.5px !important;
    line-height: 1.35;
    letter-spacing: .04em !important;
    white-space: normal;
  }

  /* Main sections */
  .intro-grid,
  .section-head,
  .process-grid,
  .faq-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .intro-grid { gap: 28px !important; }
  .intro-details {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 28px 0 0 !important;
  }

  .section-head {
    gap: 24px !important;
    margin-bottom: 46px !important;
  }

  .service-item {
    min-height: 0 !important;
    grid-template-columns: 34px 54px minmax(0,1fr) 20px !important;
    gap: 11px !important;
    padding: 24px 0 !important;
  }

  .service-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .service-icon svg { width: 24px !important; }

  .service-copy {
    grid-column: auto !important;
    display: block !important;
  }

  .service-copy h3 {
    margin: 0 0 8px !important;
    font-size: 23px !important;
  }

  .service-copy p {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }

  .service-arrow {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: start;
    font-size: 18px !important;
  }

  .projects-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }

  .project-grid {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }

  .project-image,
  .project-card:nth-child(2) .project-image,
  .project-card:nth-child(3) .project-image,
  .project-card:nth-child(4) .project-image {
    height: clamp(290px, 82vw, 430px) !important;
  }

  .project-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    padding-top: 16px !important;
    margin-top: 14px !important;
  }

  .project-meta p {
    margin: 0 !important;
  }

  .process-grid { gap: 38px !important; }
  .process-sticky {
    position: static !important;
  }

  .btn-primary {
    width: 100%;
    min-width: 0 !important;
    justify-content: space-between;
  }

  .step {
    grid-template-columns: 40px minmax(0,1fr) !important;
    gap: 13px !important;
    padding: 28px 0 !important;
  }

  .step > span { font-size: 22px !important; }
  .step h3 { margin-bottom: 8px !important; }
  .step p {
    font-size: 12.5px !important;
    line-height: 1.7 !important;
  }

  .work-banner {
    min-height: 520px !important;
  }

  .work-banner-content {
    padding-left: 0 !important;
  }

  .work-banner-content p {
    max-width: 90% !important;
  }

  .testimonial-wrap {
    position: relative;
    display: block !important;
    margin-top: 46px !important;
  }

  .quotes {
    min-height: 330px !important;
    padding: 0 8px 70px;
  }

  .quote p {
    font-size: clamp(25px, 7vw, 34px) !important;
    line-height: 1.2 !important;
    margin-bottom: 28px !important;
  }

  .quote-nav {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    margin: 0 !important;
    width: 46px !important;
    height: 46px !important;
  }

  .quote-nav.prev { left: calc(50% - 54px) !important; }
  .quote-nav.next { right: calc(50% - 54px) !important; }

  .faq-grid { gap: 38px !important; }

  .accordion-item button {
    gap: 15px;
    padding: 22px 0 !important;
  }

  .accordion-item button span {
    font-size: 19px !important;
    line-height: 1.25;
  }

  .contact-grid {
    gap: 48px !important;
  }

  .contact-info {
    margin-top: 34px !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .contact-form label:not(.consent) {
    margin-bottom: 23px !important;
  }

  .submit-btn {
    min-height: 54px;
  }

  .map-frame {
    width: calc(100% - 32px) !important;
    min-height: 320px !important;
  }

  .map-frame iframe {
    height: 340px !important;
  }

  /* Footer */
  .footer {
    padding: 54px 0 22px !important;
  }

  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .footer-identity {
    grid-column: auto !important;
    max-width: none !important;
  }

  .footer-cta-column {
    grid-column: auto !important;
  }

  .footer-column {
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .footer-cta {
    width: 100%;
  }

  .footer-bottom {
    margin-top: 38px !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .footer-bottom > span:nth-child(2),
  .footer-bottom > a {
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  .container {
    width: calc(100% - 28px) !important;
  }

  .section-pad {
    padding: 66px 0 !important;
  }

  .brand.logo-brand img {
    width: 86px !important;
  }

  .mobile-menu-inner {
    width: calc(100% - 28px) !important;
    padding-top: 92px !important;
  }

  .mobile-menu .mobile-nav a {
    font-size: clamp(27px, 8.6vw, 36px) !important;
    padding: 12px 0 !important;
  }

  .hero {
    min-height: 720px !important;
    padding-bottom: 84px !important;
  }

  .hero-content {
    padding-top: 112px !important;
    padding-bottom: 38px !important;
  }

  .hero h1 {
    font-size: clamp(36px, 10.8vw, 48px) !important;
    margin-bottom: 22px !important;
  }

  .hero-bottom p {
    font-size: 12.5px !important;
  }

  .hero-stats strong {
    font-size: 20px !important;
  }

  .hero-stats span {
    font-size: 6px !important;
  }

  .service-item {
    grid-template-columns: 28px minmax(0,1fr) 18px !important;
    padding: 22px 0 !important;
  }

  .service-icon {
    display: none !important;
  }

  .service-copy {
    grid-column: 2 !important;
  }

  .service-arrow {
    grid-column: 3 !important;
  }

  .project-image,
  .project-card:nth-child(2) .project-image,
  .project-card:nth-child(3) .project-image,
  .project-card:nth-child(4) .project-image {
    height: clamp(270px, 84vw, 360px) !important;
  }

  .quote p {
    font-size: clamp(23px, 7.4vw, 30px) !important;
  }

  .accordion-item button span {
    font-size: 18px !important;
  }

  .map-frame {
    width: calc(100% - 28px) !important;
  }
}


/* =========================================================
   HERO CTA + MOBILE MENU CLOSE / STACKING FINAL FIX
   ========================================================= */

.hero-quote-cta{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  min-width:210px;
  min-height:56px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.065);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--white);
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  transition:
    background .22s ease,
    border-color .22s ease,
    transform .22s ease;
}
.hero-quote-cta:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
  transform:translateY(-2px);
}
.hero-quote-cta i{
  font-style:normal;
  font-size:18px;
  line-height:1;
}

/* One clear stacking system:
   page < header < opened mobile menu.
   The close button lives inside the menu, so it never fights the header. */
@media (max-width:900px){

  .site-header{
    z-index:100 !important;
  }

  .mobile-menu{
    z-index:110 !important;
  }

  /* Once the full menu is open, its own X is the close control.
     Hiding the header burger prevents duplicated controls and stacking glitches. */
  body.menu-open .menu-toggle{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .mobile-menu-inner{
    z-index:auto !important;
  }

  .mobile-menu-topline{
    position:relative;
    z-index:auto !important;
  }

  .mobile-menu-actions{
    display:flex;
    align-items:center;
    gap:13px;
    flex:0 0 auto;
  }

  .mobile-menu-close{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:0 0 40px;
    padding:0;
    margin:0;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:rgba(255,255,255,.035);
    color:#fff;
    cursor:pointer;
    transition:
      background .2s ease,
      color .2s ease,
      border-color .2s ease,
      transform .2s ease;
  }

  .mobile-menu-close:hover,
  .mobile-menu-close:active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--ink);
  }

  .mobile-menu-close:active{
    transform:scale(.96);
  }

  .mobile-menu-close span{
    display:block;
    font-family:Arial, sans-serif;
    font-size:29px;
    font-weight:300;
    line-height:.75;
    transform:translateY(-1px);
  }

  .hero-quote-cta{
    min-width:0;
    min-height:50px;
    padding:0 17px;
    gap:24px;
    background:var(--accent);
    border-color:var(--accent);
    color:var(--ink);
    font-size:10px;
  }

  .hero-quote-cta i{
    font-size:17px;
  }
}

@media (max-width:480px){
  .mobile-menu-close{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .mobile-menu-close span{
    font-size:27px;
  }

  .mobile-menu-actions{
    gap:10px;
  }
}


/* =========================================================
   FINAL TYPOGRAPHY + HERO CTA VISIBILITY
   ========================================================= */

/* Cleaner, sharper typography */
:root{
  --serif:"Manrope","Segoe UI",Arial,sans-serif !important;
  --sans:"DM Sans","Segoe UI",Arial,sans-serif !important;
}

html,
body{
  -webkit-font-smoothing:auto !important;
  -moz-osx-font-smoothing:auto !important;
  text-rendering:geometricPrecision !important;
}

body{
  font-family:var(--sans) !important;
  font-weight:400;
}

/* Titles stay premium but become much easier to read */
.hero h1,
.intro-copy h2,
.section-head h2,
.projects-header h2,
.process-sticky h2,
.work-banner-content h2,
.faq-grid h2,
.contact-copy h2,
.project-meta h3,
.service-copy h3,
.step h3{
  font-family:var(--serif) !important;
  font-style:normal !important;
  font-weight:600 !important;
  letter-spacing:-.032em !important;
}

.hero h1 em,
.intro-copy h2 em,
.process-sticky h2 em,
.work-banner-content h2 em,
.contact-copy h2 em{
  font-family:var(--serif) !important;
  font-style:normal !important;
  font-weight:500 !important;
  color:var(--accent-light) !important;
}

/* Body copy: slightly stronger contrast and weight */
.hero-bottom p,
.intro-details p,
.section-head p,
.service-copy p,
.step p,
.work-banner-content p,
.faq-grid p,
.accordion-content p,
.contact-copy p,
.contact-info,
.footer-identity>p,
.footer-column>a,
.footer-column>p{
  font-family:var(--sans) !important;
  font-weight:400 !important;
  color:rgba(255,255,255,.72);
}

/* Light sections should retain readable dark copy */
.intro,
.services,
.process,
.faq{
  color:var(--ink);
}

.intro .intro-details p,
.services .section-head p,
.services .service-copy p,
.process .process-sticky p,
.process .step p,
.faq .faq-grid>div>p,
.faq .accordion-content p{
  color:rgba(23,23,19,.68) !important;
}

/* Desktop: hero quote CTA is hidden because header already has the CTA */
.hero-quote-cta{
  display:none !important;
}

/* Mobile only: show hero quote CTA */
@media (max-width:900px){
  .hero-quote-cta{
    display:inline-flex !important;
  }

  .hero h1,
  .intro-copy h2,
  .section-head h2,
  .projects-header h2,
  .process-sticky h2,
  .work-banner-content h2,
  .faq-grid h2,
  .contact-copy h2{
    letter-spacing:-.025em !important;
  }

  .hero-bottom p,
  .service-copy p,
  .step p,
  .accordion-content p,
  .contact-copy p{
    font-size:13px !important;
    line-height:1.72 !important;
  }
}


/* =========================================================
   DESKTOP LOGO SIZE FIX
   ========================================================= */

/* Keep the logo comfortably inside the desktop header */
@media (min-width: 901px){
  .site-header .brand.logo-brand{
    min-width: 0 !important;
  }

  .site-header .brand.logo-brand img{
    width: 104px !important;
    max-height: 58px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .nav-wrap{
    min-height: 86px !important;
  }
}


/* =========================================================
   FINAL FONT + HERO COMPOSITION
   ========================================================= */

/* Bring back the elegant editorial feeling, but with stronger,
   cleaner weights so Greek characters remain crisp. */
:root{
  --serif:"Playfair Display", Georgia, "Times New Roman", serif !important;
  --sans:"Manrope","Segoe UI",Arial,sans-serif !important;
}

html,
body{
  -webkit-font-smoothing:auto !important;
  -moz-osx-font-smoothing:auto !important;
  text-rendering:optimizeLegibility !important;
}

body{
  font-family:var(--sans) !important;
  font-weight:400 !important;
}

.hero h1,
.intro-copy h2,
.section-head h2,
.projects-header h2,
.process-sticky h2,
.work-banner-content h2,
.faq-grid h2,
.contact-copy h2{
  font-family:var(--serif) !important;
  font-weight:600 !important;
  font-style:normal !important;
  letter-spacing:-.026em !important;
}

.hero h1 em,
.intro-copy h2 em,
.process-sticky h2 em,
.work-banner-content h2 em,
.contact-copy h2 em{
  font-family:var(--serif) !important;
  font-weight:600 !important;
  font-style:italic !important;
  letter-spacing:-.018em !important;
  color:var(--accent-light) !important;
}

.service-copy h3,
.project-meta h3,
.step h3,
.accordion-item button span{
  font-family:var(--sans) !important;
  font-weight:600 !important;
  letter-spacing:-.018em !important;
}

/* Make body copy slightly firmer and easier to read */
.hero-bottom p,
.intro-details p,
.section-head p,
.service-copy p,
.step p,
.work-banner-content p,
.faq-grid p,
.accordion-content p,
.contact-copy p{
  font-family:var(--sans) !important;
  font-weight:400 !important;
}

/* Desktop hero: balanced content instead of an empty right side */
@media (min-width:901px){

  .hero-content{
    padding-top:170px !important;
  }

  .hero h1{
    max-width:900px !important;
    font-size:clamp(52px,5.8vw,86px) !important;
    line-height:1.01 !important;
    margin:28px 0 42px !important;
  }

  .hero-bottom{
    padding-left:35% !important;
    display:grid !important;
    grid-template-columns:minmax(300px,1.05fr) minmax(250px,.75fr) !important;
    align-items:end !important;
    gap:70px !important;
  }

  .hero-bottom>p{
    max-width:520px !important;
    margin:0 !important;
    color:rgba(255,255,255,.82) !important;
    font-size:14px !important;
    line-height:1.82 !important;
  }

  .hero-side-note{
    display:block;
    padding:18px 0 2px 22px;
    border-left:1px solid rgba(255,255,255,.24);
    max-width:340px;
  }

  .hero-side-label{
    display:block;
    margin-bottom:11px;
    color:var(--accent-light);
    font-family:var(--sans);
    font-size:8px;
    font-weight:700;
    letter-spacing:.18em;
  }

  .hero-side-note strong{
    display:block;
    color:rgba(255,255,255,.90);
    font-family:var(--sans);
    font-size:13px;
    line-height:1.65;
    font-weight:500;
  }

  .hero-side-steps{
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-top:15px;
  }

  .hero-side-steps span{
    position:relative;
    color:rgba(255,255,255,.52);
    font-family:var(--sans);
    font-size:9px;
    letter-spacing:.05em;
  }

  .hero-side-steps span:not(:last-child)::after{
    content:"";
    position:absolute;
    width:3px;
    height:3px;
    right:-10px;
    top:50%;
    transform:translateY(-50%);
    border-radius:50%;
    background:var(--accent);
  }

  /* The header already carries the desktop CTA. */
  .hero-quote-cta{
    display:none !important;
  }
}

@media (max-width:900px){

  /* On mobile the side note disappears and the compact quote CTA remains. */
  .hero-side-note{
    display:none !important;
  }

  .hero h1{
    font-family:var(--serif) !important;
    font-weight:600 !important;
    font-size:clamp(38px,10.2vw,52px) !important;
    line-height:1.03 !important;
    letter-spacing:-.02em !important;
  }

  .hero h1 em{
    font-weight:600 !important;
  }

  .hero-bottom{
    padding-left:0 !important;
  }
}


/* =========================================================
   FAQ ICON + MOBILE INTRO TITLE REFINEMENT
   ========================================================= */

/* FAQ buttons: force clean colors so nothing turns blue on mobile */
.accordion-item button{
  color: var(--ink) !important;
  -webkit-tap-highlight-color: transparent;
}

.accordion-item button span{
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
}

.accordion-item button i.faq-icon{
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--ink) !important;
}

.accordion-item button i.faq-icon::before,
.accordion-item button i.faq-icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.6px;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}

.accordion-item button i.faq-icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-item.active button i.faq-icon::after{
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(.5);
}

/* Shorter "Προσέγγιση μας" title feel */
.intro-copy h2{
  max-width: 820px;
}

@media (max-width: 900px){
  .intro-copy h2{
    max-width: 520px !important;
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.018em !important;
  }

  .accordion-item button,
  .accordion-item button span,
  .accordion-item button i.faq-icon{
    color: var(--ink) !important;
    text-decoration: none !important;
  }

  .accordion-item button span{
    font-size: 17px !important;
    line-height: 1.28 !important;
  }

  .accordion-item button i.faq-icon{
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .accordion-item button i.faq-icon::before,
  .accordion-item button i.faq-icon::after{
    width: 12px;
    height: 1.5px;
  }
}

@media (max-width: 480px){
  .intro-copy h2{
    max-width: 100% !important;
    font-size: clamp(26px, 8vw, 32px) !important;
    line-height: 1.14 !important;
  }

  .accordion-item button span{
    font-size: 16px !important;
  }
}


/* =========================================================
   IOS-SAFE ARROWS — no Unicode / emoji rendering
   ========================================================= */

.arrow-icon{
  position:relative;
  display:inline-block;
  width:14px;
  height:14px;
  flex:0 0 14px;
  color:currentColor;
  vertical-align:middle;
}

/* North-east arrow */
.arrow-ne::before{
  content:"";
  position:absolute;
  left:2px;
  bottom:2px;
  width:10px;
  height:1.4px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:center;
  border-radius:999px;
}
.arrow-ne::after{
  content:"";
  position:absolute;
  right:1.5px;
  top:1.5px;
  width:6px;
  height:6px;
  border-top:1.4px solid currentColor;
  border-right:1.4px solid currentColor;
}

/* Right arrow */
.arrow-right::before{
  content:"";
  position:absolute;
  left:1px;
  top:50%;
  width:11px;
  height:1.4px;
  background:currentColor;
  transform:translateY(-50%);
  border-radius:999px;
}
.arrow-right::after{
  content:"";
  position:absolute;
  right:1px;
  top:50%;
  width:6px;
  height:6px;
  border-top:1.4px solid currentColor;
  border-right:1.4px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

/* Left arrow */
.arrow-left::before{
  content:"";
  position:absolute;
  right:1px;
  top:50%;
  width:11px;
  height:1.4px;
  background:currentColor;
  transform:translateY(-50%);
  border-radius:999px;
}
.arrow-left::after{
  content:"";
  position:absolute;
  left:1px;
  top:50%;
  width:6px;
  height:6px;
  border-left:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

/* Up arrow */
.arrow-up::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:1px;
  width:1.4px;
  height:11px;
  background:currentColor;
  transform:translateX(-50%);
  border-radius:999px;
}
.arrow-up::after{
  content:"";
  position:absolute;
  left:50%;
  top:1px;
  width:6px;
  height:6px;
  border-top:1.4px solid currentColor;
  border-left:1.4px solid currentColor;
  transform:translateX(-50%) rotate(45deg);
}

/* Keep icons aligned inside buttons/links */
.nav-cta,
.hero-quote-cta,
.mobile-menu-cta,
.text-link,
.btn-primary,
.submit-btn,
.map-open,
.footer-cta,
.footer-bottom a,
.mobile-nav a{
  align-items:center;
}

.quote-nav .arrow-icon{
  width:18px;
  height:18px;
  flex-basis:18px;
}

.mobile-nav .arrow-icon,
.mobile-menu-cta .arrow-icon{
  color:currentColor !important;
}

.service-arrow.arrow-icon{
  width:16px !important;
  height:16px !important;
  color:var(--accent) !important;
}

/* iOS text rendering safeguard */
.arrow-icon,
.arrow-icon::before,
.arrow-icon::after{
  font-family:Arial,sans-serif !important;
  font-style:normal !important;
  font-variant-emoji:text !important;
  text-rendering:geometricPrecision;
}

@media (max-width:900px){
  .arrow-icon{
    width:13px;
    height:13px;
    flex-basis:13px;
  }

  .quote-nav .arrow-icon{
    width:17px;
    height:17px;
    flex-basis:17px;
  }
}


/* =========================================================
   MOBILE OVERFLOW / RESPONSIVE SAFETY FIX
   Prevent horizontal scrolling and keep all text/content inside viewport
   ========================================================= */

*, *::before, *::after{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

img,
picture,
video,
canvas,
svg,
iframe{
  max-width:100%;
}

main,
section,
header,
footer,
.container,
.nav-wrap,
.hero-content,
.hero-bottom,
.intro-grid,
.intro-copy,
.intro-details,
.section-head,
.service-list,
.service-item,
.service-copy,
.projects-header,
.project-grid,
.project-card,
.project-meta,
.process-grid,
.process-sticky,
.steps,
.step,
.work-banner-content,
.testimonial-wrap,
.quotes,
.quote,
.faq-grid,
.accordion,
.accordion-item,
.contact-grid,
.contact-copy,
.contact-info,
.contact-form,
.form-row,
.map-frame,
.footer-main,
.footer-identity,
.footer-column,
.footer-bottom{
  min-width:0;
  max-width:100%;
}

p,
h1,h2,h3,h4,h5,h6,
span,
a,
button,
label,
strong,
small,
blockquote{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Avoid translated/long text pushing flex and grid layouts */
.service-item > *,
.step > *,
.project-meta > *,
.footer-main > *,
.footer-bottom > *,
.mobile-menu-topline > *,
.mobile-menu-actions > *,
.hero-bottom > *{
  min-width:0;
}

@media (max-width:900px){

  .container{
    width:calc(100% - 32px) !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Header */
  .nav-wrap{
    width:calc(100% - 32px) !important;
    max-width:100% !important;
  }

  /* Hero */
  .hero-content{
    width:calc(100% - 32px) !important;
    max-width:100% !important;
  }

  .hero h1,
  .hero-bottom p{
    width:100% !important;
    max-width:100% !important;
  }

  .hero h1 br{
    display:none;
  }

  .hero-stats{
    overflow:hidden;
  }

  .hero-stats div{
    min-width:0 !important;
  }

  .hero-stats span{
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:auto;
  }

  /* Sections */
  .intro-copy,
  .intro-details,
  .section-head > *,
  .process-sticky,
  .faq-grid > *,
  .contact-copy,
  .contact-form{
    width:100% !important;
    max-width:100% !important;
  }

  .intro-copy h2,
  .section-head h2,
  .projects-header h2,
  .process-sticky h2,
  .work-banner-content h2,
  .faq-grid h2,
  .contact-copy h2{
    width:100% !important;
    max-width:100% !important;
  }

  /* Services */
  .service-item{
    width:100%;
    overflow:hidden;
  }

  .service-copy{
    width:100%;
  }

  .service-copy h3,
  .service-copy p{
    max-width:100%;
  }

  /* Project cards */
  .project-grid,
  .project-card,
  .project-image{
    width:100% !important;
    max-width:100% !important;
  }

  .project-meta{
    width:100%;
  }

  .project-meta h3,
  .project-meta p{
    max-width:100%;
  }

  /* Process */
  .steps,
  .step{
    width:100%;
  }

  .step > div{
    min-width:0;
    width:100%;
  }

  /* Testimonials */
  .testimonial-wrap,
  .quotes,
  .quote{
    width:100%;
    max-width:100%;
  }

  .quote p{
    max-width:100%;
  }

  /* FAQ */
  .accordion,
  .accordion-item,
  .accordion-item button,
  .accordion-content{
    width:100%;
    max-width:100%;
  }

  .accordion-item button{
    grid-template-columns:minmax(0,1fr) 18px !important;
  }

  .accordion-item button span{
    min-width:0;
    max-width:100%;
    padding-right:6px;
  }

  /* Contact form */
  .contact-form{
    overflow:hidden;
  }

  .form-row{
    width:100%;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form button{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .consent{
    align-items:flex-start;
  }

  .consent input{
    width:auto !important;
    flex:0 0 auto;
  }

  .consent span{
    min-width:0;
  }

  /* Map */
  .map-frame{
    width:calc(100% - 32px) !important;
    max-width:100% !important;
    overflow:hidden;
  }

  .map-open{
    max-width:calc(100% - 28px);
    white-space:normal;
  }

  /* Footer */
  .footer-main,
  .footer-column,
  .footer-identity,
  .footer-bottom{
    width:100%;
    max-width:100%;
  }

  .footer-column a,
  .footer-column p,
  .footer-identity p,
  .footer-bottom span,
  .footer-bottom a{
    max-width:100%;
  }

  /* Mobile menu */
  .mobile-menu{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  .mobile-menu-inner{
    width:calc(100% - 32px) !important;
    max-width:100% !important;
  }

  .mobile-menu .mobile-nav a{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:30px minmax(0,1fr) 18px !important;
  }

  .mobile-menu .mobile-nav a > span{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .mobile-menu-footer,
  .mobile-menu-footer > div,
  .mobile-menu-footer a{
    max-width:100%;
  }

  /* Prevent long external/address links from creating horizontal scroll */
  a[href^="http"],
  a[href^="tel:"],
  .contact-info a,
  .footer-column a,
  .mobile-menu-footer a{
    overflow-wrap:anywhere;
  }
}

@media (max-width:480px){

  .container,
  .nav-wrap,
  .hero-content,
  .mobile-menu-inner,
  .map-frame{
    width:calc(100% - 28px) !important;
  }

  .hero h1{
    font-size:clamp(35px,10vw,46px) !important;
  }

  .intro-copy h2,
  .section-head h2,
  .projects-header h2,
  .process-sticky h2,
  .work-banner-content h2,
  .faq-grid h2,
  .contact-copy h2{
    font-size:clamp(27px,7.6vw,34px) !important;
  }

  .service-item{
    grid-template-columns:26px minmax(0,1fr) 16px !important;
    gap:8px !important;
  }

  .step{
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:10px !important;
  }

  .mobile-menu .mobile-nav a{
    grid-template-columns:27px minmax(0,1fr) 16px !important;
  }

  .mobile-menu .mobile-nav a{
    font-size:clamp(25px,8vw,33px) !important;
  }

  .footer-main{
    gap:26px !important;
  }
}

/* Extra-small devices (iPhone SE / compact Android) */
@media (max-width:375px){

  .container,
  .nav-wrap,
  .hero-content,
  .mobile-menu-inner,
  .map-frame{
    width:calc(100% - 24px) !important;
  }

  .hero h1{
    font-size:34px !important;
  }

  .hero-stats span{
    font-size:5.5px !important;
  }

  .mobile-menu .mobile-nav a{
    font-size:25px !important;
  }
}


/* =========================================================
   HERO MOBILE CTA — remove arrow icon
   ========================================================= */

.hero-quote-cta{
  justify-content:center !important;
  gap:0 !important;
}

.hero-quote-cta .arrow-icon,
.hero-quote-cta i,
.hero-quote-cta b,
.hero-quote-cta span + *{
  display:none !important;
}


/* =========================================================
   LEGAL FOOTER + FLOATING BACK-TO-TOP
   ========================================================= */

/* Five-column footer on wide desktop */
@media (min-width:1101px){
  .footer-main{
    grid-template-columns:1.35fr .66fr .9fr .82fr 1fr !important;
    gap:42px !important;
  }
}

/* Legal links match the rest of the footer */
.footer-column .footer-title + a{
  margin-top:0;
}

/* Floating back-to-top button */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(17,17,14,.90);
  color:#fff;
  box-shadow:0 12px 36px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease,
    background .2s ease,
    border-color .2s ease;
  z-index:60;
}

.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.back-to-top:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}

/* CSS-drawn arrow: no Unicode/emoji rendering on iOS */
.back-to-top-icon{
  position:relative;
  width:16px;
  height:16px;
  display:block;
}

.back-to-top-icon::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:1px;
  width:1.5px;
  height:12px;
  background:currentColor;
  border-radius:999px;
  transform:translateX(-50%);
}

.back-to-top-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:1px;
  width:7px;
  height:7px;
  border-top:1.5px solid currentColor;
  border-left:1.5px solid currentColor;
  transform:translateX(-50%) rotate(45deg);
}

/* Keep it out of the way while the mobile menu is open */
body.menu-open .back-to-top{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (max-width:1000px){
  .footer-main{
    grid-template-columns:1fr 1fr !important;
    gap:32px 28px !important;
  }

  .footer-identity{
    grid-column:1 / -1 !important;
  }

  .footer-cta-column{
    grid-column:1 / -1 !important;
  }
}

@media (max-width:700px){
  .footer-main{
    grid-template-columns:1fr !important;
  }

  .footer-identity,
  .footer-cta-column{
    grid-column:auto !important;
  }

  .back-to-top{
    right:16px;
    bottom:16px;
    width:46px;
    height:46px;
  }

  .footer-bottom{
    padding-right:58px !important;
  }
}


/* =========================================================
   MOBILE HERO TITLE WORD-SPACING FIX
   ========================================================= */

@media (max-width:900px){
  /* Keep the intended line breaks so words never join together
     (e.g. "μεποιότητα" on mobile). */
  .hero h1 br{
    display:block !important;
  }
}


/* =========================================================
   LAPTOP HERO RESPONSIVE FIX
   Keeps the complete hero composition inside shorter screens.
   ========================================================= */

@media (min-width:901px) and (max-height:900px){
  .hero{
    height:100svh !important;
    min-height:650px !important;
    max-height:900px;
  }

  .hero-content{
    padding-top:clamp(112px,15vh,142px) !important;
  }

  .hero h1{
    max-width:820px !important;
    font-size:clamp(48px,5.25vw,74px) !important;
    line-height:1 !important;
    margin:18px 0 28px !important;
  }

  .hero-bottom{
    padding-left:30% !important;
    grid-template-columns:minmax(280px,1fr) minmax(230px,.72fr) !important;
    gap:42px !important;
  }

  .hero-bottom>p{
    font-size:13px !important;
    line-height:1.65 !important;
  }

  .hero-side-note{
    padding-top:12px !important;
  }

  .hero-side-note strong{
    font-size:12px !important;
    line-height:1.5 !important;
  }

  .hero-side-steps{
    margin-top:10px !important;
  }

  .hero-stats div{
    padding:15px 34px 16px !important;
  }

  .hero-stats strong{
    font-size:27px !important;
  }

  .hero-stats span{
    margin-top:6px !important;
    font-size:8px !important;
  }
}

/* Common 13–15 inch laptop widths */
@media (min-width:901px) and (max-width:1440px) and (max-height:820px){
  .hero-content{
    padding-top:108px !important;
  }

  .eyebrow{
    font-size:8px !important;
    letter-spacing:.16em !important;
  }

  .hero h1{
    max-width:760px !important;
    font-size:clamp(46px,5vw,66px) !important;
    margin:16px 0 24px !important;
  }

  .hero-bottom{
    padding-left:27% !important;
    gap:34px !important;
  }

  .hero-side-note{
    max-width:300px !important;
  }
}

/* Very short laptop/browser windows */
@media (min-width:901px) and (max-height:700px){
  .hero{
    min-height:600px !important;
  }

  .hero-content{
    padding-top:94px !important;
  }

  .hero h1{
    font-size:clamp(42px,4.7vw,60px) !important;
    margin:12px 0 18px !important;
  }

  .hero-bottom>p{
    font-size:12px !important;
    line-height:1.55 !important;
  }

  .hero-side-note strong{
    font-size:11px !important;
  }

  .hero-stats div{
    padding:11px 28px 12px !important;
  }

  .hero-stats strong{
    font-size:23px !important;
  }

  .hero-stats span{
    font-size:7px !important;
  }
}


/* =========================================================
   LIVE HERO STABILITY FIX
   Prevent variable crop between reloads on production hosting.
   ========================================================= */

@media (min-width:901px){
  .hero{
    overflow:hidden !important;
  }

  .hero-media{
    animation:none !important;
    transform:none !important;
    will-change:auto !important;
    background-size:cover !important;
    background-position:center 52% !important;
  }

  /* Keep only the subtle light overlay animation; it does not move/crop the photo. */
  .hero-overlay{
    transform:none !important;
  }
}

/* Laptop-specific fixed framing */
@media (min-width:901px) and (max-width:1440px){
  .hero-media{
    background-position:center 50% !important;
  }
}

/* =========================================================
   MOBILE FULL-VIEWPORT HERO + PERFORMANCE PASS — 2026-08-25
   Keeps the first screen 100% hero on phones and removes
   expensive mobile-only paint effects for smoother scrolling.
   ========================================================= */
@media (max-width: 900px) {
  :root {
    --mobile-header-h: 76px;
    --mobile-hero-stats-h: 92px;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overscroll-behavior-x: none;
  }

  /* The SVG turbulence layer is one of the most expensive continuous paints on phones. */
  .page-noise {
    display: none !important;
  }

  /* Solid header = noticeably cheaper than live backdrop blur while scrolling. */
  .site-header,
  .site-header.scrolled,
  body.menu-open .site-header {
    height: var(--mobile-header-h) !important;
    background: rgba(20,20,17,.985) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-wrap {
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
  }

  a,
  button,
  input,
  textarea,
  select {
    -webkit-tap-highlight-color: transparent;
  }

  a,
  button {
    touch-action: manipulation;
  }

  /* Faster, GPU-friendly menu entrance. */
  .mobile-menu {
    clip-path: none !important;
    transform: translate3d(100%,0,0) !important;
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.22,.72,.22,1), visibility 0s linear .28s !important;
    will-change: transform;
  }

  .mobile-menu.open {
    transform: translate3d(0,0,0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }

  .mobile-menu::before {
    display: none !important;
  }

  /* Full first screen on every modern phone. The next section starts only after scrolling. */
  .hero {
    position: relative !important;
    height: 100vh !important;
    min-height: 100vh !important;
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .hero-media {
    background-image: url("hero-mobile.webp?v=20260825-perf") !important;
    background-image: image-set(
      url("hero-mobile.avif?v=20260825-perf") type("image/avif"),
      url("hero-mobile.webp?v=20260825-perf") type("image/webp")
    ) !important;
    background-size: cover !important;
    background-position: 58% center !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(12,12,10,.84) 0%, rgba(12,12,10,.54) 72%, rgba(12,12,10,.32) 100%),
      linear-gradient(0deg, rgba(11,11,9,.89) 0%, rgba(11,11,9,.18) 42%, rgba(11,11,9,.04) 68%) !important;
  }

  .hero-overlay::after {
    display: none !important;
  }

  .hero-content {
    width: calc(100% - 32px) !important;
    height: 100% !important;
    margin-inline: auto !important;
    padding: calc(var(--mobile-header-h) + 22px) 0 calc(var(--mobile-hero-stats-h) + 18px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .eyebrow {
    flex: 0 0 auto;
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(7px, 1.9vw, 8px) !important;
    line-height: 1.45 !important;
    letter-spacing: .13em !important;
  }

  .hero h1 {
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(16px, 2.6vh, 24px) 0 clamp(15px, 2.5vh, 24px) !important;
    font-size: clamp(36px, min(10.2vw, 6.4vh), 52px) !important;
    line-height: 1.01 !important;
    letter-spacing: -.025em !important;
  }

  .hero-bottom {
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(14px, 2.2vh, 20px) !important;
  }

  .hero-bottom p {
    width: min(100%, 560px) !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(11.5px, 3vw, 13px) !important;
    line-height: 1.58 !important;
    color: rgba(255,255,255,.80) !important;
  }

  .hero-quote-cta {
    min-height: 46px !important;
    padding: 0 15px !important;
    gap: 20px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--ink) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
  }

  .hero-stats {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: var(--mobile-hero-stats-h) !important;
    min-height: var(--mobile-hero-stats-h) !important;
    border-right: 0 !important;
    background: rgba(17,17,14,.88) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }

  .hero-stats div {
    min-width: 0 !important;
    padding: 14px 8px 12px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-stats strong {
    font-size: clamp(20px, 5.4vw, 24px) !important;
  }

  .hero-stats span {
    margin-top: 6px !important;
    font-size: clamp(5.8px, 1.55vw, 7px) !important;
    line-height: 1.28 !important;
    letter-spacing: .045em !important;
  }
}

/* Compact phones / short browser windows: shrink content instead of overflowing the hero. */
@media (max-width: 900px) and (max-height: 700px) {
  :root {
    --mobile-header-h: 68px;
    --mobile-hero-stats-h: 78px;
  }

  .brand.logo-brand img {
    width: 80px !important;
    max-height: 50px !important;
  }

  .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .hero-content {
    padding-top: calc(var(--mobile-header-h) + 10px) !important;
    padding-bottom: calc(var(--mobile-hero-stats-h) + 10px) !important;
  }

  .hero h1 {
    margin: 12px 0 12px !important;
    font-size: clamp(32px, min(9vw, 6.2vh), 42px) !important;
  }

  .hero-bottom {
    gap: 10px !important;
  }

  .hero-bottom p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  .hero-quote-cta {
    min-height: 40px !important;
    padding: 0 13px !important;
    font-size: 10px !important;
  }

  .hero-stats div {
    padding: 9px 7px !important;
  }

  .hero-stats strong {
    font-size: 19px !important;
  }

  .hero-stats span {
    margin-top: 4px !important;
    font-size: 5.6px !important;
  }
}

@media (max-width: 360px) {
  .hero-content {
    width: calc(100% - 28px) !important;
  }

  .hero h1 {
    font-size: clamp(34px, 10.4vw, 40px) !important;
  }
}

/* =========================================================
   PREMIUM WARM PALETTE — cohesive section colors
   Keeps the existing UI/layout intact and only harmonises
   surfaces, text, borders and accents with the hero.
   ========================================================= */
:root{
  --ink:#18150f;
  --ink-soft:#252018;
  --paper:#f5f0e7;
  --paper-deep:#ebe2d5;
  --sand:#c8b69e;
  --accent:#c79258;
  --accent-light:#e3bb84;
  --white:#fcfaf5;
  --muted:#756d61;
  --line:rgba(54,45,34,.14);
  --line-light:rgba(255,248,238,.14);
}

body{
  background:var(--paper);
  color:var(--ink);
}

/* Warm editorial rhythm between light sections */
.intro{
  background:linear-gradient(180deg,#f7f3ec 0%,var(--paper) 100%) !important;
}
.services{
  background:linear-gradient(180deg,#ece4d8 0%,#e8dfd1 100%) !important;
  border-color:rgba(68,54,39,.13) !important;
}
.process{
  background:linear-gradient(180deg,#f5f0e7 0%,#f2ece2 100%) !important;
}
.testimonials{
  background:linear-gradient(180deg,#e9dfd1 0%,#eee6da 100%) !important;
}
.faq{
  background:linear-gradient(180deg,#f5efe6 0%,#f8f4ed 100%) !important;
}

/* Dark areas now share the same warm black / espresso family */
.projects,
.contact,
.map-embed{
  background:#18150f !important;
}
.footer{
  background:#100e0a !important;
}

.site-header.scrolled{
  background:rgba(24,21,15,.95) !important;
}

/* Warm, more intentional supporting copy */
.section-kicker{
  color:#82725f !important;
}
.section-kicker.light{
  color:rgba(248,237,220,.58) !important;
}

.intro-copy h2 em,
.process-sticky h2 em{
  color:#9b7650 !important;
}

.intro .intro-details p,
.services .section-head p,
.services .service-copy p,
.process .process-sticky p,
.process .step p,
.faq .faq-grid>div>p,
.faq .accordion-content p{
  color:#625a4f !important;
}

.service-num,
.stars small,
.quote footer span{
  color:#81776b !important;
}

.service-icon,
.quote-nav,
.accordion,
.accordion-item,
.steps,
.service-list{
  border-color:rgba(67,53,38,.14) !important;
}

.service-item:hover{
  background:rgba(255,250,242,.48) !important;
}

/* Gold details: rich, not orange */
.service-arrow,
.step>span,
.stars,
.text-link span,
.hero-stats strong,
.hero-side-label,
.footer-title{
  color:var(--accent) !important;
}

.projects .section-kicker,
.contact .section-kicker{
  color:rgba(241,222,198,.56) !important;
}

.projects .project-meta{
  border-color:rgba(237,218,192,.14) !important;
}
.projects .project-meta span,
.projects .project-meta p{
  color:rgba(248,240,228,.50) !important;
}

/* Keep image-heavy areas in the same warm visual language */
.project-image{
  filter:saturate(.72) sepia(.06) brightness(.96) !important;
}
.project-card:hover .project-image{
  filter:saturate(.93) sepia(.025) brightness(1) !important;
}

.work-banner-image{
  filter:saturate(.58) sepia(.10) brightness(.92) !important;
}
.work-banner::after{
  background:linear-gradient(90deg,rgba(20,15,10,.90) 0%,rgba(24,18,12,.64) 52%,rgba(30,21,13,.28) 100%) !important;
}

/* Contact + footer: softer cream text instead of cold white */
.contact-copy>p,
.contact-info a,
.contact-info div,
.footer-identity>p,
.footer-column>a,
.footer-cta-column>p{
  color:rgba(250,242,230,.66) !important;
}
.contact-info span,
.footer-bottom{
  color:rgba(246,233,215,.38) !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  color:#fbf7ef !important;
  border-color:rgba(242,224,199,.18) !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color:var(--accent-light) !important;
}

.footer-column,
.footer-names,
.footer-bottom{
  border-color:rgba(241,222,197,.10) !important;
}
.footer-cta{
  border-color:rgba(241,222,197,.15) !important;
  background:rgba(255,247,234,.035) !important;
}
.footer-cta:hover{
  border-color:var(--accent) !important;
  background:rgba(255,247,234,.065) !important;
}

/* Map treatment follows the same espresso/champagne palette */
.map-frame{
  border-color:rgba(241,222,197,.12) !important;
}
.map-frame iframe{
  filter:grayscale(1) sepia(.20) invert(.91) contrast(.88) !important;
  opacity:.86 !important;
}
.map-open{
  background:rgba(24,21,15,.94) !important;
  border-color:rgba(241,222,197,.18) !important;
}

/* Mobile retains the same palette with no layout changes */
@media (max-width:900px){
  .site-header,
  .site-header.scrolled,
  body.menu-open .site-header{
    background:rgba(24,21,15,.965) !important;
    border-color:rgba(241,222,197,.09) !important;
  }

  .mobile-menu{
    background:
      radial-gradient(circle at 100% 0%,rgba(199,146,88,.13),transparent 35%),
      linear-gradient(145deg,#1b1711 0%,#100e0a 100%) !important;
  }

  .hero-stats{
    background:rgba(20,17,12,.82) !important;
  }
}


/* =========================================================
   MOBILE PERFORMANCE PASS 2 — 2026-08-25
   Network + paint optimizations only; visual layout stays the same.
   ========================================================= */
.lazy-bg {
  background-repeat: no-repeat;
}

@media (max-width:900px) {
  /* Static CSS filters are surprisingly expensive while a large image scrolls. */
  .project-image,
  .project-card:hover .project-image,
  .work-banner-image {
    filter: none !important;
  }

  /* The dark overlay keeps the same warm/premium look without filtering the bitmap. */
  .work-banner::after {
    background: linear-gradient(90deg,rgba(20,15,10,.92) 0%,rgba(24,18,12,.67) 52%,rgba(30,21,13,.32) 100%) !important;
  }

  /* Let the browser skip layout/paint work for sections that are far below the fold. */
  .services,
  .projects,
  .process,
  .work-banner,
  .testimonials,
  .faq,
  .contact,
  .map-embed,
  .footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
  }

  .projects { contain-intrinsic-size: auto 2100px; }
  .process { contain-intrinsic-size: auto 1650px; }
  .contact { contain-intrinsic-size: auto 1500px; }
  .footer { contain-intrinsic-size: auto 900px; }
}


/* =========================================================
   HERO QUALITY + ARROW CLEANUP + SMARTER SERVICES
   2026-08-25
   ========================================================= */

/* Use the higher-quality hero asset on mobile too. */
@media (max-width:900px){
  .hero-media {
    background-image: url("hero.webp?v=20260825-hqhero") !important;
    background-position: 58% center !important;
    background-size: cover !important;
  }
}

/* Remove the arrow visual language everywhere for a cleaner premium look. */
.arrow-icon,
.arrow-icon::before,
.arrow-icon::after,
.service-arrow {
  display: none !important;
  content: none !important;
}

.nav-cta,
.hero-quote-cta,
.mobile-menu-cta,
.btn-primary,
.text-link,
.mobile-nav a {
  gap: 0 !important;
}

.nav-cta span,
.text-link span,
.btn-primary span {
  margin-left: 0 !important;
}


/* Services section — aligned with the rest of the site's editorial language.
   No card UI, no floating panels, no exaggerated hover. */
.services { position: relative; }

.services .section-head {
  align-items: end !important;
  gap: 80px !important;
  margin-bottom: 58px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.services .section-head h2 {
  margin-top: 18px !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
  max-width: none !important;
}

.services .section-head > p {
  max-width: 500px !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #625a4f !important;
  line-height: 1.7 !important;
}

.service-list {
  display: block !important;
  border-top: 1px solid rgba(67,53,38,.14) !important;
}

.service-item {
  position: relative;
  min-height: 168px !important;
  display: grid !important;
  grid-template-columns: 72px 100px 1fr !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 22px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(67,53,38,.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: padding-left .3s ease, background .3s ease !important;
}

.service-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .28s ease;
}

.service-item:hover {
  padding: 22px 0 22px 14px !important;
  background: rgba(255,250,242,.34) !important;
  transform: none !important;
  box-shadow: none !important;
}
.service-item:hover::before { transform: scaleY(1); }

.service-num {
  align-self: center !important;
  padding: 0 !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  color: #8c806f !important;
}

.service-icon {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(67,53,38,.14) !important;
  background: transparent !important;
  color: var(--ink) !important;
  transition: border-color .28s ease, color .28s ease, transform .28s ease !important;
}
.service-icon svg { width: 31px !important; stroke-width: 1.3 !important; }

.service-copy {
  grid-template-columns: minmax(210px, .72fr) 1.28fr !important;
  gap: 48px !important;
  align-items: center !important;
}

.service-copy h3 {
  font-size: 28px !important;
  line-height: 1.05 !important;
  letter-spacing: -.015em !important;
  margin: 0 !important;
}

.services .service-copy p {
  max-width: 560px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.72 !important;
  color: #625a4f !important;
}

.service-item:hover .service-icon {
  transform: translateY(-2px) !important;
  color: var(--accent) !important;
  border-color: rgba(199,146,88,.36) !important;
  background: transparent !important;
}
.service-item:hover .service-copy h3 { color: var(--ink) !important; }
.service-item:hover .service-num { color: #8c806f !important; }

@media (max-width:900px) {
  .services .section-head {
    gap: 24px !important;
    margin-bottom: 36px !important;
    padding: 0 !important;
  }
  .services .section-head h2 { margin-top: 12px !important; max-width: none !important; }
  .services .section-head > p { border: 0 !important; padding: 0 !important; max-width: 100% !important; }

  .service-item {
    min-height: 0 !important;
    grid-template-columns: 48px 64px 1fr !important;
    align-items: start !important;
    gap: 14px !important;
    padding: 24px 0 !important;
  }
  .service-item:hover {
    padding: 24px 0 24px 8px !important;
    background: rgba(255,250,242,.28) !important;
  }
  .service-icon { width: 56px !important; height: 56px !important; }
  .service-icon svg { width: 26px !important; }
  .service-copy { grid-template-columns: 1fr !important; gap: 10px !important; }
  .service-copy h3 { font-size: 23px !important; }
  .services .service-copy p { font-size: 13px !important; line-height: 1.66 !important; }
}

@media (max-width:520px) {
  .service-item { grid-template-columns: 40px 1fr !important; gap: 12px 14px !important; }
  .service-icon { grid-column: 1; grid-row: 2; width: 48px !important; height: 48px !important; }
  .service-copy { grid-column: 2; grid-row: 1 / span 2; }
  .service-num { grid-column: 1; grid-row: 1; padding-top: 4px !important; }
}


/* =========================================================
   INTRO TEXT ALIGNMENT + RESPONSIVE TUNING — 2026-08-25
   Keeps the same design language, only fixes text placement.
   ========================================================= */
.intro-grid{
  grid-template-columns: minmax(160px, .9fr) minmax(0, 2.7fr) !important;
  gap: clamp(34px, 4.4vw, 78px) !important;
  align-items: start !important;
}

.intro-copy{
  display: grid !important;
  align-content: start !important;
  gap: clamp(30px, 4vw, 56px) !important;
}

.intro-copy h2{
  max-width: 980px !important;
  margin: 0 !important;
  line-height: .98 !important;
  letter-spacing: -.03em !important;
}

.intro-details{
  width: min(100%, 860px) !important;
  margin: 0 0 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(22px, 3vw, 52px) !important;
  align-items: start !important;
}

.intro-details p{
  margin: 0 !important;
  max-width: none !important;
  line-height: 1.72 !important;
}

@media (max-width: 1180px){
  .intro-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .intro-copy{
    gap: 28px !important;
  }

  .intro-copy h2{
    max-width: 880px !important;
  }

  .intro-details{
    width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 900px){
  .intro-grid{
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .intro-copy{
    gap: 24px !important;
  }

  .intro-copy h2{
    max-width: 100% !important;
  }

  .intro-details{
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px){
  .intro-grid{
    gap: 22px !important;
  }

  .intro-copy{
    gap: 20px !important;
  }

  .intro-details{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}


/* =========================================================
   iPHONE 15 / iOS HERO FULL-HEIGHT FIX — 2026-08-25
   Makes the hero reliably fill the first screen on Safari/iPhone
   while keeping the rest fully responsive.
   ========================================================= */
@media (max-width: 900px){
  html, body{
    min-height: 100%;
    min-height: -webkit-fill-available;
  }

  .hero{
    height: 100dvh !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    min-height: -webkit-fill-available !important;
  }

  .hero-media,
  .hero-overlay{
    inset: 0 !important;
  }

  .hero-content{
    min-height: 100% !important;
    justify-content: space-between !important;
    padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top) + 12px) !important;
    padding-bottom: calc(var(--mobile-hero-stats-h) + env(safe-area-inset-bottom) + 10px) !important;
  }

  .hero-stats{
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px){
    :root{
      --mobile-header-h: 72px;
      --mobile-hero-stats-h: 84px;
    }

    .hero{
      height: 100dvh !important;
      min-height: 100dvh !important;
    }

    .hero-content{
      width: calc(100% - 30px) !important;
      padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top) + 10px) !important;
      padding-bottom: calc(var(--mobile-hero-stats-h) + env(safe-area-inset-bottom) + 8px) !important;
      gap: 0 !important;
    }

    .eyebrow{
      font-size: clamp(7px, 1.8vw, 8px) !important;
    }

    .hero h1{
      margin: 14px 0 14px !important;
      font-size: clamp(34px, min(9.8vw, 5.3vh), 48px) !important;
      line-height: 1.01 !important;
    }

    .hero-bottom{
      gap: 12px !important;
    }

    .hero-bottom p{
      font-size: 12px !important;
      line-height: 1.5 !important;
    }

    .hero-side-note{
      padding-top: 0 !important;
    }

    .hero-side-note strong{
      font-size: 11px !important;
      line-height: 1.42 !important;
    }

    .hero-side-steps{
      margin-top: 8px !important;
    }

    .hero-quote-cta{
      min-height: 42px !important;
      font-size: 10.5px !important;
    }

    .hero-stats{
      height: calc(var(--mobile-hero-stats-h) + env(safe-area-inset-bottom)) !important;
      min-height: calc(var(--mobile-hero-stats-h) + env(safe-area-inset-bottom)) !important;
    }

    .hero-stats div{
      padding: 11px 8px 10px !important;
    }

    .hero-stats strong{
      font-size: 20px !important;
    }

    .hero-stats span{
      margin-top: 4px !important;
      font-size: 5.8px !important;
      line-height: 1.25 !important;
    }
  }
}


/* =========================================================
   DESKTOP HERO HQ + TYPOGRAPHY BALANCE — 2026-08-25
   Higher-quality desktop image and cleaner text placement.
   ========================================================= */
@media (min-width: 901px){
  .hero-media{
    background-image: url("hero-desktop-hq.webp?v=20260825-desktophq") !important;
    background-size: cover !important;
    background-position: center 52% !important;
  }

  .hero-content{
    width: min(calc(100% - 72px), var(--container)) !important;
    padding-top: clamp(110px, 14vh, 150px) !important;
    padding-bottom: 140px !important;
  }

  .eyebrow{
    max-width: 760px !important;
    font-size: 10px !important;
    letter-spacing: .22em !important;
    line-height: 1.45 !important;
  }

  .hero h1{
    max-width: 830px !important;
    margin: 20px 0 26px !important;
    font-size: clamp(58px, 5.8vw, 92px) !important;
    line-height: .94 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance;
  }

  .hero-bottom{
    width: min(100%, 980px) !important;
    padding-left: clamp(240px, 25vw, 400px) !important;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 360px) !important;
    gap: clamp(28px, 3.2vw, 56px) !important;
    align-items: start !important;
  }

  .hero-bottom > p{
    margin: 0 !important;
    max-width: 480px !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  .hero-side-note{
    padding-top: 4px !important;
    max-width: 360px !important;
  }

  .hero-side-label{
    font-size: 10px !important;
    letter-spacing: .22em !important;
  }

  .hero-side-note strong{
    display: block !important;
    font-size: 14px !important;
    line-height: 1.58 !important;
  }

  .hero-side-steps{
    margin-top: 12px !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .hero-side-steps span{
    font-size: 10px !important;
    letter-spacing: .1em !important;
  }
}

@media (min-width: 901px) and (max-width: 1366px){
  .hero-content{
    width: min(calc(100% - 56px), var(--container)) !important;
    padding-top: 112px !important;
    padding-bottom: 130px !important;
  }

  .hero h1{
    max-width: 760px !important;
    font-size: clamp(52px, 5.15vw, 76px) !important;
    margin: 18px 0 22px !important;
  }

  .hero-bottom{
    width: min(100%, 860px) !important;
    padding-left: clamp(180px, 21vw, 310px) !important;
    grid-template-columns: minmax(240px, 1fr) minmax(220px, 320px) !important;
    gap: 28px !important;
  }

  .hero-bottom > p{
    font-size: 13px !important;
    line-height: 1.66 !important;
  }

  .hero-side-note strong{
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}


/* =========================================================
   DESKTOP HERO ORIGINAL IMAGE + STACKED TEXT LAYOUT — 2026-08-25
   Restore the original PC hero image and place the supporting
   texts neatly below the title.
   ========================================================= */
@media (min-width: 901px){
  .hero-media{
    background-image: url("hero.webp?v=20260825-pcoriginal") !important;
    background-image: image-set(
      url("hero.avif?v=20260825-pcoriginal") type("image/avif"),
      url("hero.webp?v=20260825-pcoriginal") type("image/webp")
    ) !important;
    background-size: cover !important;
    background-position: center 52% !important;
  }

  .hero-content{
    width: min(calc(100% - 72px), var(--container)) !important;
    padding-top: clamp(108px, 13.5vh, 148px) !important;
    padding-bottom: 136px !important;
  }

  .hero h1{
    max-width: 880px !important;
    margin: 20px 0 24px !important;
    font-size: clamp(58px, 5.7vw, 90px) !important;
    line-height: .95 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance;
  }

  .hero-bottom{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: min(100%, 720px) !important;
    padding-left: 0 !important;
    gap: 16px !important;
  }

  .hero-bottom > p{
    max-width: 640px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 14px !important;
    line-height: 1.78 !important;
  }

  .hero-side-note{
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    padding: 14px 0 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
  }

  .hero-side-label{
    margin-bottom: 9px !important;
    font-size: 9px !important;
    letter-spacing: .19em !important;
  }

  .hero-side-note strong{
    max-width: 560px !important;
    font-size: 13px !important;
    line-height: 1.68 !important;
  }

  .hero-side-steps{
    margin-top: 11px !important;
    gap: 8px 16px !important;
  }

  .hero-side-steps span{
    font-size: 9px !important;
    color: rgba(255,255,255,.60) !important;
  }
}

@media (min-width: 901px) and (max-width: 1366px){
  .hero-content{
    width: min(calc(100% - 56px), var(--container)) !important;
    padding-top: 110px !important;
    padding-bottom: 128px !important;
  }

  .hero h1{
    max-width: 780px !important;
    font-size: clamp(52px, 5vw, 76px) !important;
    margin: 18px 0 20px !important;
  }

  .hero-bottom{
    width: min(100%, 640px) !important;
    gap: 14px !important;
  }

  .hero-bottom > p{
    font-size: 13px !important;
    line-height: 1.72 !important;
  }

  .hero-side-note strong{
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
}


/* =========================================================
   EXACT ORIGINAL HERO IMAGE — 2026-08-25
   Uses the untouched hero.webp from the very first ZIP.
   No AVIF / mobile compression variant can override it.
   ========================================================= */
.hero-media{
  background-image: url("hero.webp?v=20260825-exact-original") !important;
}

@media (min-width:901px){
  .hero-media{
    background-image: url("hero.webp?v=20260825-exact-original") !important;
    background-position: center 52% !important;
    background-size: cover !important;
  }
}

@media (max-width:900px){
  .hero-media{
    background-image: url("hero.webp?v=20260825-exact-original") !important;
    background-position: 58% center !important;
    background-size: cover !important;
  }
}


/* =========================================================
   MOBILE HERO TEXT REFINEMENT — 2026-08-25
   Makes the mobile hero copy look cleaner, tighter and more premium.
   ========================================================= */
@media (max-width: 900px){
  .hero-content{
    width: calc(100% - 34px) !important;
    padding-right: 0 !important;
  }

  .eyebrow{
    max-width: 88% !important;
    font-size: clamp(6.6px, 1.65vw, 7.6px) !important;
    line-height: 1.5 !important;
    letter-spacing: .14em !important;
    color: rgba(255,255,255,.66) !important;
  }

  .hero h1{
    max-width: 84% !important;
    margin: 12px 0 12px !important;
    font-size: clamp(31px, 8.9vw, 44px) !important;
    line-height: .97 !important;
    letter-spacing: -.032em !important;
    text-wrap: balance;
  }

  .hero-bottom{
    width: min(84%, 320px) !important;
    max-width: 320px !important;
    gap: 12px !important;
  }

  .hero-bottom p{
    width: 100% !important;
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.56 !important;
    color: rgba(255,255,255,.80) !important;
  }

  .hero-quote-cta{
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 10.5px !important;
    letter-spacing: .02em !important;
    margin-top: 2px !important;
  }
}

@media (max-width: 430px){
  .hero-content{
    width: calc(100% - 30px) !important;
  }

  .hero h1{
    max-width: 81% !important;
    font-size: clamp(30px, 8.8vw, 40px) !important;
  }

  .hero-bottom{
    width: min(82%, 300px) !important;
    max-width: 300px !important;
  }
}

@media (max-width: 360px){
  .hero h1{
    max-width: 84% !important;
    font-size: clamp(28px, 8.5vw, 36px) !important;
  }

  .hero-bottom{
    width: min(84%, 280px) !important;
  }

  .hero-bottom p{
    font-size: 11px !important;
  }
}


/* =========================================================
   MOBILE HERO BALANCED STACK — 2026-08-25
   Groups the eyebrow, title and supporting text together
   instead of spreading them top / middle / bottom.
   ========================================================= */
@media (max-width: 900px){
  .hero-content{
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top) + 26px) !important;
    padding-bottom: calc(var(--mobile-hero-stats-h) + env(safe-area-inset-bottom) + 18px) !important;
  }

  .eyebrow{
    max-width: 84% !important;
    margin: 0 !important;
  }

  .hero h1{
    max-width: 82% !important;
    margin: 18px 0 18px !important;
  }

  .hero-bottom{
    width: min(84%, 320px) !important;
    max-width: 320px !important;
    margin-top: 0 !important;
    gap: 14px !important;
    align-items: flex-start !important;
  }

  .hero-bottom p{
    margin: 0 !important;
  }

  .hero-quote-cta{
    margin-top: 2px !important;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px){
    .hero-content{
      justify-content: flex-start !important;
      padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top) + 22px) !important;
      padding-bottom: calc(var(--mobile-hero-stats-h) + env(safe-area-inset-bottom) + 18px) !important;
    }

    .eyebrow{
      max-width: 82% !important;
    }

    .hero h1{
      max-width: 80% !important;
      margin: 16px 0 16px !important;
    }

    .hero-bottom{
      width: min(82%, 300px) !important;
      max-width: 300px !important;
      gap: 12px !important;
    }
  }
}

@media (max-width: 430px){
  .hero-content{
    padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top) + 20px) !important;
  }

  .eyebrow{
    max-width: 80% !important;
  }

  .hero h1{
    max-width: 79% !important;
    margin: 14px 0 14px !important;
  }

  .hero-bottom{
    width: min(80%, 290px) !important;
    max-width: 290px !important;
  }
}

@media (max-width: 360px){
  .hero h1{
    max-width: 82% !important;
  }

  .hero-bottom{
    width: min(82%, 275px) !important;
  }
}


/* =========================================================
   MOBILE MENU SCROLL LOCK — 2026-08-25
   Prevents the page behind the burger menu from moving on iOS/Android.
   ========================================================= */
@media (max-width: 900px){
  html.menu-open,
  body.menu-open{
    overscroll-behavior: none !important;
  }

  .mobile-menu{
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* =========================================================
   NEXA FOOTER CREDIT — 2026-08-25
   ========================================================= */
.footer-credit{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:5px;
  text-decoration:none;
  color:rgba(250,242,230,.50) !important;
  transition:color .25s ease, opacity .25s ease;
  white-space:nowrap;
}

.footer-credit strong{
  font-weight:700;
  letter-spacing:.12em;
  color:var(--accent-light);
}

.footer-credit:hover{
  color:rgba(255,255,255,.92) !important;
}

.footer-credit:hover strong{
  color:#fff;
}

@media (max-width: 760px){
  .footer-bottom{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .footer-bottom>span:nth-child(2){
    text-align:left !important;
  }

  .footer-credit{
    justify-self:start;
    white-space:normal;
  }
}

/* =========================================================
   HERO SERVICE CARDS + LARGER HEADER LOGO — 2026-08-27
   Keeps the header height unchanged while giving the logo
   more visual presence and moves the 01/02/03 services into
   the hero copy flow below the location line.
   ========================================================= */

.hero-inline-services{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(100%,640px);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(17,17,14,.22);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.hero-inline-service{
  position:relative;
  min-width:0;
  padding:15px 18px 16px;
  color:var(--white);
  border-right:1px solid rgba(255,255,255,.14);
  transition:background .25s ease, transform .25s ease;
}

.hero-inline-service:last-child{
  border-right:0;
}

.hero-inline-service strong{
  display:block;
  margin-bottom:7px;
  color:var(--accent-light);
  font-family:var(--serif);
  font-size:20px;
  line-height:1;
  font-weight:500;
}

.hero-inline-service span{
  display:block;
  color:rgba(255,255,255,.72);
  font-family:var(--sans);
  font-size:8.5px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-inline-service:hover{
  background:rgba(255,255,255,.08);
}

@media (min-width:901px){
  /* Larger logo, same header footprint. */
  .site-header .nav-wrap{
    height:90px !important;
    min-height:90px !important;
  }

  .site-header .brand.logo-brand img{
    width:128px !important;
    max-height:72px !important;
    height:auto !important;
  }

  .hero-content{
    padding-bottom:54px !important;
  }

  .hero-bottom{
    width:min(100%,680px) !important;
    gap:12px !important;
  }

  .hero-bottom > p{
    max-width:640px !important;
  }

  .hero-side-note{
    width:min(100%,640px) !important;
    max-width:640px !important;
    padding:11px 0 0 !important;
    border-top:1px solid rgba(255,255,255,.18) !important;
  }

  .hero-side-label{
    margin:0 !important;
    color:var(--accent-light) !important;
  }

  .hero-inline-services{
    margin-top:2px;
  }
}

@media (min-width:901px) and (max-width:1366px){
  .site-header .brand.logo-brand img{
    width:120px !important;
    max-height:68px !important;
  }

  .hero-content{
    padding-bottom:44px !important;
  }

  .hero-bottom{
    width:min(100%,620px) !important;
    gap:10px !important;
  }

  .hero-inline-service{
    padding:12px 14px 13px;
  }

  .hero-inline-service strong{
    font-size:18px;
  }

  .hero-inline-service span{
    font-size:7.8px;
  }
}

@media (max-width:900px){
  :root{
    --mobile-hero-stats-h:0px;
  }

  .hero-content{
    padding-bottom:calc(env(safe-area-inset-bottom) + 18px) !important;
  }

  .hero-side-note{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:9px 0 0 !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.17) !important;
  }

  .hero-side-label{
    display:block !important;
    margin:0 !important;
    font-size:7.5px !important;
    line-height:1.3 !important;
    letter-spacing:.16em !important;
  }

  .hero-inline-services{
    width:100%;
    margin-top:0;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:rgba(17,17,14,.35);
  }

  .hero-inline-service{
    padding:9px 8px 10px;
  }

  .hero-inline-service strong{
    margin-bottom:4px;
    font-size:16px;
  }

  .hero-inline-service span{
    font-size:6.2px;
    line-height:1.3;
    letter-spacing:.045em;
  }
}

@media (max-width:900px) and (max-height:700px){
  .hero-content{
    padding-top:calc(var(--mobile-header-h) + 8px) !important;
    padding-bottom:10px !important;
  }

  .hero h1{
    margin:10px 0 !important;
  }

  .hero-bottom{
    gap:8px !important;
  }

  .hero-side-note{
    padding-top:6px !important;
  }

  .hero-inline-service{
    padding:7px 6px 8px;
  }

  .hero-inline-service strong{
    font-size:14px;
  }

  .hero-inline-service span{
    font-size:5.6px;
  }

  .hero-quote-cta{
    min-height:38px !important;
  }
}


/* =========================================================
   HERO SERVICE CARDS REFINEMENT — 2026-08-27 v2
   Cleaner premium cards (no glass effect), slightly larger
   desktop logo, same header height.
   ========================================================= */

.hero-inline-services{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  width:min(100%,700px) !important;
  border:0 !important;
  background:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.hero-inline-service{
  position:relative;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  min-width:0;
  min-height:92px;
  padding:18px 18px 16px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(22,19,17,.78) 0%, rgba(13,12,11,.90) 100%) !important;
  box-shadow:0 20px 44px rgba(0,0,0,.22);
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.hero-inline-service::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  width:40px;
  height:2px;
  background:var(--accent-light);
  opacity:.95;
}

.hero-inline-service:last-child{
  border-right:1px solid rgba(255,255,255,.12) !important;
}

.hero-inline-service strong{
  display:block;
  margin:0 !important;
  color:var(--accent-light);
  font-family:var(--sans);
  font-size:12px !important;
  line-height:1;
  font-weight:700;
  letter-spacing:.22em;
}

.hero-inline-service span{
  display:block;
  color:rgba(255,255,255,.96);
  font-family:var(--sans);
  font-size:14px !important;
  line-height:1.35;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none !important;
}

.hero-inline-service:hover{
  transform:translateY(-3px);
  border-color:rgba(227,194,138,.42) !important;
  background:linear-gradient(180deg, rgba(27,24,21,.86) 0%, rgba(15,13,12,.94) 100%) !important;
  box-shadow:0 24px 54px rgba(0,0,0,.28);
}

@media (min-width:901px){
  .site-header .nav-wrap{
    height:90px !important;
    min-height:90px !important;
  }

  .site-header .brand.logo-brand img{
    width:124px !important;
    max-height:70px !important;
    height:auto !important;
  }

  .hero-content{
    padding-bottom:56px !important;
  }

  .hero-bottom{
    width:min(100%,700px) !important;
    gap:14px !important;
  }

  .hero-bottom > p{
    max-width:660px !important;
  }

  .hero-side-note{
    width:min(100%,700px) !important;
    max-width:700px !important;
    margin-top:2px !important;
    padding:11px 0 0 !important;
    border-top:1px solid rgba(255,255,255,.16) !important;
  }

  .hero-side-label{
    margin:0 !important;
    color:var(--accent-light) !important;
    font-size:11px !important;
    letter-spacing:.18em !important;
  }

  .hero-inline-services{
    margin-top:2px !important;
  }
}

@media (min-width:901px) and (max-width:1366px){
  .site-header .brand.logo-brand img{
    width:118px !important;
    max-height:66px !important;
  }

  .hero-bottom{
    width:min(100%,650px) !important;
    gap:12px !important;
  }

  .hero-inline-service{
    min-height:84px;
    padding:16px 14px 14px !important;
  }

  .hero-inline-service span{
    font-size:13px !important;
  }
}

@media (max-width:900px){
  .hero-content{
    padding-bottom:calc(env(safe-area-inset-bottom) + 18px) !important;
  }

  .hero-side-note{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:9px 0 0 !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.15) !important;
  }

  .hero-side-label{
    display:block !important;
    margin:0 !important;
    font-size:8px !important;
    line-height:1.3 !important;
    letter-spacing:.16em !important;
  }

  .hero-inline-services{
    width:100% !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:2px !important;
  }

  .hero-inline-service{
    min-height:72px;
    padding:12px 10px 11px !important;
    border-radius:14px;
    box-shadow:0 14px 30px rgba(0,0,0,.16);
  }

  .hero-inline-service::before{
    left:10px;
    width:24px;
  }

  .hero-inline-service strong{
    font-size:9px !important;
    letter-spacing:.18em !important;
  }

  .hero-inline-service span{
    font-size:10px !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
  }
}

@media (max-width:560px){
  .hero-inline-services{
    grid-template-columns:1fr !important;
  }

  .hero-inline-service{
    min-height:auto;
    padding:13px 14px 12px !important;
  }

  .hero-inline-service::before{
    left:14px;
    width:28px;
  }

  .hero-inline-service strong{
    font-size:10px !important;
  }

  .hero-inline-service span{
    font-size:12px !important;
  }
}

@media (max-width:900px) and (max-height:700px){
  .hero-content{
    padding-top:calc(var(--mobile-header-h) + 8px) !important;
    padding-bottom:10px !important;
  }

  .hero h1{
    margin:10px 0 !important;
  }

  .hero-bottom{
    gap:8px !important;
  }

  .hero-side-note{
    padding-top:6px !important;
  }

  .hero-inline-service{
    min-height:64px;
    padding:10px 9px 9px !important;
  }

  .hero-inline-service span{
    font-size:9px !important;
  }

  .hero-quote-cta{
    min-height:38px !important;
  }
}

/* =========================================================
   LANGUAGE DROPDOWN — EL default + EN / BG — 2026-08-27
   Compact header control with a little breathing room before CTA.
   ========================================================= */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.language-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.language-select{
  width:108px;
  height:34px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  outline:0;
  background:rgba(12,12,10,.36);
  color:rgba(255,255,255,.90);
  padding:0 30px 0 11px;
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  line-height:34px;
  letter-spacing:.035em;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}

.language-select:hover,
.language-select:focus{
  border-color:rgba(227,194,138,.58);
  background:rgba(12,12,10,.54);
  color:#fff;
}

.language-select option{
  background:#171713;
  color:#fff;
}

.language-chevron{
  position:absolute;
  right:12px;
  top:50%;
  width:6px;
  height:6px;
  border-right:1px solid var(--accent-light);
  border-bottom:1px solid var(--accent-light);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}

.desktop-lang{
  margin-left:auto !important;
  margin-right:15px !important;
}

.desktop-lang + .nav-cta{
  margin-left:0 !important;
}

html[lang="bg"] .hero h1{
  max-width:1120px;
  font-size:clamp(40px,5.2vw,78px) !important;
}

html[lang="bg"] .service-copy h3{
  letter-spacing:-.025em;
}

@media (max-width:900px){
  .desktop-lang{
    display:none !important;
  }

  .mobile-lang{
    display:inline-flex !important;
    color:inherit !important;
  }

  .mobile-lang .language-select{
    width:112px;
    height:34px;
    font-size:10px;
    background:rgba(255,255,255,.035);
    border-color:rgba(255,255,255,.15);
  }

  html[lang="bg"] .hero h1{
    max-width:100%;
    font-size:clamp(39px,11.8vw,60px) !important;
    line-height:1.01 !important;
  }
}

/* =========================================================
   HERO SERVICES + CUSTOM LANGUAGE MENU — 2026-08-27 v4
   Editorial service links (no cards) and a fully custom,
   consistent language dropdown on desktop and mobile.
   ========================================================= */

/* 01 / 02 / 03: no cards, no glass, no rounded containers */
.hero-inline-services{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  width:min(100%,700px) !important;
  gap:0 !important;
  margin-top:4px !important;
  border-top:1px solid rgba(255,255,255,.18) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.hero-inline-service{
  position:relative;
  display:grid !important;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px !important;
  min-height:58px !important;
  padding:13px 18px 13px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  transition:color .2s ease, transform .2s ease, opacity .2s ease !important;
}

.hero-inline-service + .hero-inline-service{
  padding-left:18px !important;
  border-left:1px solid rgba(255,255,255,.12) !important;
}

.hero-inline-service::before{
  content:none !important;
}

.hero-inline-service::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px;
  background:var(--accent-light);
  transition:width .28s ease;
}

.hero-inline-service:hover{
  transform:translateY(-1px) !important;
  background:transparent !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}

.hero-inline-service:hover::after{ width:46%; }

.hero-inline-service strong{
  display:block;
  margin:0 !important;
  color:var(--accent-light) !important;
  font-family:var(--serif) !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}

.hero-inline-service span{
  display:block;
  color:rgba(255,255,255,.76) !important;
  font-family:var(--sans) !important;
  font-size:9.5px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  letter-spacing:.085em !important;
  text-transform:uppercase !important;
  transition:color .2s ease;
}

.hero-inline-service:hover span{ color:#fff !important; }

/* Custom language dropdown. Native select popup is intentionally not used. */
.language-dropdown{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  z-index:80;
}

.language-trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:72px;
  height:36px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:#191916;
  color:rgba(255,255,255,.88);
  font:700 10px/1 var(--sans);
  letter-spacing:.10em;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}

.language-trigger:hover,
.language-dropdown.open .language-trigger{
  border-color:rgba(227,194,138,.48);
  background:#20201c;
  color:#fff;
}

.language-globe{
  width:13px;
  height:13px;
  border:1px solid rgba(227,194,138,.82);
  border-radius:50%;
  position:relative;
  flex:0 0 auto;
}

.language-globe::before,
.language-globe::after{
  content:"";
  position:absolute;
  inset:2px 4px;
  border-left:1px solid rgba(227,194,138,.68);
  border-right:1px solid rgba(227,194,138,.68);
  border-radius:50%;
}

.language-globe::after{
  inset:5px 1px auto;
  height:1px;
  border:0;
  border-top:1px solid rgba(227,194,138,.68);
  border-radius:0;
}

.language-chevron{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:6px !important;
  height:6px !important;
  flex:0 0 auto;
  border-right:1px solid currentColor !important;
  border-bottom:1px solid currentColor !important;
  transform:translateY(-2px) rotate(45deg) !important;
  transition:transform .2s ease;
  opacity:.72;
}

.language-dropdown.open .language-chevron{
  transform:translateY(2px) rotate(225deg) !important;
}

.language-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:168px;
  padding:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:#171713;
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px) scale(.985);
  transform-origin:top right;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  pointer-events:none;
}

.language-dropdown.open .language-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.language-menu button{
  position:relative;
  width:100%;
  min-height:41px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 11px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:rgba(255,255,255,.72);
  font:600 11px/1.2 var(--sans);
  text-align:left;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
}

.language-menu button small{
  font-size:8px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.32);
}

.language-menu button:hover{
  background:rgba(255,255,255,.055);
  color:#fff;
}

.language-menu button.active{
  background:rgba(227,194,138,.08);
  color:var(--accent-light);
}

.language-menu button.active small{ color:var(--accent-light); }

.desktop-lang{
  margin-left:auto !important;
  margin-right:18px !important;
}
.desktop-lang + .nav-cta{ margin-left:0 !important; }

.footer-cookie-settings{
  width:max-content;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  opacity:.9;
}
.footer-cookie-settings:hover{ color:#fff; }

.consent a{
  color:var(--accent-light);
  text-decoration:underline;
  text-underline-offset:3px;
}

.map-frame{ position:relative; }
.map-consent-placeholder{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:28px;
  text-align:center;
  background:#1c1b17;
  color:#fff;
}
.map-consent-placeholder[hidden]{ display:none !important; }
.map-consent-kicker{
  color:var(--accent-light);
  font-size:8px;
  font-weight:700;
  letter-spacing:.18em;
}
.map-consent-placeholder strong{
  max-width:520px;
  font-family:var(--serif);
  font-size:clamp(22px,3vw,34px);
  font-weight:500;
}
.map-consent-placeholder p{
  max-width:530px;
  margin:0 0 8px;
  color:rgba(255,255,255,.58);
  font-size:11px;
}
.map-consent-placeholder button{
  min-height:40px;
  padding:0 18px;
  border:1px solid rgba(227,194,138,.45);
  border-radius:999px;
  background:transparent;
  color:var(--accent-light);
  font:700 9px/1 var(--sans);
  letter-spacing:.08em;
  cursor:pointer;
}

@media (max-width:900px){
  .mobile-lang{
    display:inline-flex !important;
    z-index:120;
  }
  .mobile-lang .language-trigger{
    min-width:68px;
    height:36px;
    background:#1a1a17;
  }
  .mobile-lang .language-menu{
    top:calc(100% + 8px);
    right:0;
    width:160px;
    z-index:150;
  }
  .mobile-menu-actions{ overflow:visible !important; }
  .mobile-menu-topline{ overflow:visible !important; }
}

@media (max-width:560px){
  .hero-inline-services{
    grid-template-columns:1fr !important;
    border-bottom:0 !important;
  }
  .hero-inline-service{
    grid-template-columns:34px 1fr !important;
    min-height:42px !important;
    padding:9px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
  }
  .hero-inline-service + .hero-inline-service{
    padding-left:0 !important;
    border-left:0 !important;
  }
  .hero-inline-service strong{ font-size:15px !important; }
  .hero-inline-service span{ font-size:9px !important; }
  .hero-inline-service:hover::after{ width:34%; }
  .map-consent-placeholder{ padding:20px 18px; }
  .map-consent-placeholder strong{ font-size:23px; }
}


/* =========================================================
   HERO SERVICES + LANGUAGE DROPDOWN — 2026-08-27 v5
   Minimal editorial services (zero cards) + polished menu.
   ========================================================= */
.hero-inline-services{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:0 28px !important;
  width:min(100%,760px) !important;
  margin:7px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.hero-inline-service{
  position:relative !important;
  display:inline-flex !important;
  align-items:baseline !important;
  gap:9px !important;
  min-height:0 !important;
  padding:7px 0 9px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  color:#fff !important;
  transition:opacity .2s ease, transform .2s ease !important;
}
.hero-inline-service + .hero-inline-service{
  padding-left:0 !important;
  border-left:0 !important;
}
.hero-inline-service::before{content:none !important}
.hero-inline-service::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  bottom:3px !important;
  width:18px !important;
  height:1px !important;
  background:var(--accent-light) !important;
  opacity:.7 !important;
  transition:width .22s ease, opacity .22s ease !important;
}
.hero-inline-service:hover{
  transform:translateY(-1px) !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-inline-service:hover::after{width:100% !important;opacity:1 !important}
.hero-inline-service strong{
  margin:0 !important;
  color:var(--accent-light) !important;
  font-family:var(--serif) !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
.hero-inline-service span{
  margin:0 !important;
  color:rgba(255,255,255,.76) !important;
  font-family:var(--sans) !important;
  font-size:9px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  letter-spacing:.095em !important;
  text-transform:uppercase !important;
  white-space:nowrap;
}
.hero-inline-service:hover span{color:#fff !important}

.language-dropdown{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  z-index:160 !important;
}
.language-trigger{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-width:74px !important;
  height:38px !important;
  padding:0 12px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:10px !important;
  background:rgba(16,16,14,.72) !important;
  color:rgba(255,255,255,.9) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.14) !important;
  font:700 10px/1 var(--sans) !important;
  letter-spacing:.105em !important;
  cursor:pointer !important;
  transition:border-color .18s ease, background .18s ease, transform .18s ease !important;
}
.language-trigger:hover,.language-dropdown.open .language-trigger{
  border-color:rgba(227,194,138,.55) !important;
  background:#1d1d19 !important;
  transform:translateY(-1px) !important;
}
.language-globe{width:14px !important;height:14px !important;border-color:rgba(227,194,138,.9) !important}
.language-menu{
  position:absolute !important;
  top:calc(100% + 9px) !important;
  right:0 !important;
  width:190px !important;
  padding:7px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:13px !important;
  background:#141411 !important;
  box-shadow:0 24px 65px rgba(0,0,0,.5) !important;
  overflow:hidden !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-6px) scale(.985) !important;
  transform-origin:top right !important;
  pointer-events:none !important;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease !important;
}
.language-dropdown.open .language-menu{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:auto !important;
}
.language-menu button{
  position:relative !important;
  width:100% !important;
  min-height:43px !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center !important;
  gap:12px !important;
  padding:0 12px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:rgba(255,255,255,.72) !important;
  font:600 11px/1.2 var(--sans) !important;
  text-align:left !important;
  cursor:pointer !important;
  transition:background .15s ease,color .15s ease,padding .15s ease !important;
}
.language-menu button:hover{background:rgba(255,255,255,.055) !important;color:#fff !important;padding-left:15px !important}
.language-menu button.active{background:rgba(227,194,138,.085) !important;color:var(--accent-light) !important}
.language-menu button.active::before{
  content:"";position:absolute;left:4px;top:50%;width:2px;height:18px;border-radius:2px;background:var(--accent-light);transform:translateY(-50%);
}
.language-menu button small{font-size:8px !important;letter-spacing:.14em !important;color:rgba(255,255,255,.34) !important}
.language-menu button.active small{color:var(--accent-light) !important}
.desktop-lang{margin-left:auto !important;margin-right:20px !important}
.desktop-lang + .nav-cta{margin-left:0 !important}

@media(max-width:900px){
  .hero-inline-services{gap:0 20px !important;width:100% !important}
  .hero-inline-service{padding:6px 0 8px !important}
  .hero-inline-service strong{font-size:15px !important}
  .hero-inline-service span{font-size:8px !important}
  .mobile-lang{display:inline-flex !important;z-index:260 !important}
  .mobile-lang .language-trigger{height:36px !important;min-width:72px !important;background:#191916 !important;border-radius:9px !important}
  .mobile-lang .language-menu{top:calc(100% + 8px) !important;right:0 !important;width:min(190px,calc(100vw - 34px)) !important;z-index:300 !important}
  .mobile-menu,.mobile-menu-inner,.mobile-menu-topline,.mobile-menu-actions{overflow:visible !important}
}
@media(max-width:560px){
  .hero-inline-services{display:grid !important;grid-template-columns:1fr 1fr !important;column-gap:18px !important;row-gap:0 !important}
  .hero-inline-service{display:flex !important;min-width:0 !important;padding:7px 0 9px !important;border:0 !important}
  .hero-inline-service + .hero-inline-service{padding-left:0 !important;border-left:0 !important}
  .hero-inline-service:last-child{grid-column:1/-1 !important}
  .hero-inline-service span{white-space:normal !important;font-size:8px !important}
  .language-menu button{min-height:46px !important;font-size:12px !important}
}


/* =========================================================
   LANGUAGE DROPDOWN REFINEMENT — 2026-08-27 v6
   More minimal dropdown, cleaner spacing before CTA,
   responsive inside the mobile menu.
   ========================================================= */
.language-trigger{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  gap:6px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:999px !important;
  background:rgba(18,18,15,.58) !important;
  color:rgba(255,255,255,.92) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
}
.language-trigger:hover,
.language-dropdown.open .language-trigger{
  transform:none !important;
  border-color:rgba(227,194,138,.42) !important;
  background:rgba(24,24,20,.92) !important;
}
.language-globe{
  display:none !important;
}
.language-chevron{
  width:5px !important;
  height:5px !important;
  opacity:.66 !important;
}
.language-menu{
  top:calc(100% + 6px) !important;
  width:158px !important;
  padding:5px !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:12px !important;
  background:#141411 !important;
  box-shadow:0 16px 34px rgba(0,0,0,.28) !important;
}
.language-menu button{
  min-height:38px !important;
  padding:0 10px !important;
  border-radius:8px !important;
  font-size:10px !important;
}
.language-menu button:hover{
  padding-left:10px !important;
}
.language-menu button.active::before{
  left:3px !important;
  width:2px !important;
  height:16px !important;
}
.language-menu button small{
  font-size:7px !important;
  letter-spacing:.12em !important;
}
.desktop-lang{
  margin-right:14px !important;
}
.desktop-lang + .nav-cta{
  margin-left:6px !important;
}
@media(max-width:900px){
  .mobile-lang{
    width:auto !important;
    z-index:300 !important;
  }
  .mobile-lang .language-trigger{
    min-width:62px !important;
    height:34px !important;
    padding:0 10px !important;
    background:#181815 !important;
  }
  .mobile-lang .language-menu{
    top:calc(100% + 6px) !important;
    right:0 !important;
    width:min(170px,calc(100vw - 34px)) !important;
    max-width:170px !important;
    z-index:310 !important;
  }
}
@media(max-width:560px){
  .mobile-lang .language-menu{
    width:min(180px,calc(100vw - 28px)) !important;
    max-width:none !important;
  }
  .language-menu button{
    min-height:40px !important;
    font-size:11px !important;
  }
}


/* =========================================================
   CRISP TYPOGRAPHY + PERFECT MOBILE CONTROLS — 2026-08-27 v7
   ========================================================= */

/* Remove the grain layer sitting above the whole page. It can make small
   type look soft, especially on Windows/Chrome and lower-DPI displays. */
.page-noise{
  display:none !important;
}

html{
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeLegibility !important;
  font-synthesis:none !important;
}

body,
button,
input,
textarea,
select{
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeLegibility !important;
  font-synthesis:none !important;
}

body{
  font-family:"Manrope","Segoe UI",Arial,sans-serif !important;
}

/* Keep the editorial serif character, but avoid ultra-thin rendering. */
.hero h1,
.intro-copy h2,
.section-head h2,
.projects-header h2,
.process-sticky h2,
.work-banner-content h2,
.faq-grid h2,
.contact-copy h2{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif !important;
  font-optical-sizing:auto;
  font-weight:600 !important;
  text-shadow:none !important;
}

/* Crisp small UI copy. */
.site-header,
.desktop-nav,
.nav-cta,
.language-dropdown,
.hero-bottom,
.hero-inline-services,
.section-kicker,
.service-copy,
.project-meta,
.step,
.accordion-item,
.contact-form,
.site-footer{
  text-shadow:none !important;
}

/* ---------------------------------------------------------
   Mobile burger: mathematically centered, independent of size
   --------------------------------------------------------- */
@media (max-width:900px){
  .menu-toggle{
    position:relative !important;
    display:block !important;
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    padding:0 !important;
  }

  .menu-toggle span{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:20px !important;
    height:1.5px !important;
    margin:0 !important;
    border-radius:2px !important;
    background:#fff !important;
    transform-origin:50% 50% !important;
  }

  .menu-toggle span:first-child{
    transform:translate(-50%,-5px) !important;
  }

  .menu-toggle span:last-child{
    transform:translate(-50%,4px) !important;
  }

  .menu-toggle.active span{
    left:50% !important;
    top:50% !important;
    background:var(--ink) !important;
  }

  .menu-toggle.active span:first-child{
    transform:translate(-50%,-50%) rotate(45deg) !important;
  }

  .menu-toggle.active span:last-child{
    transform:translate(-50%,-50%) rotate(-45deg) !important;
  }

  /* Menu close X: drawn with CSS bars instead of the × glyph so it stays
     perfectly centered on every device/font renderer. */
  .mobile-menu-close{
    position:relative !important;
    display:block !important;
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
    padding:0 !important;
  }

  .mobile-menu-close > span{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    font-size:0 !important;
    line-height:0 !important;
    transform:none !important;
  }

  .mobile-menu-close > span::before,
  .mobile-menu-close > span::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:18px;
    height:1.5px;
    border-radius:2px;
    background:currentColor;
    transform-origin:center;
  }

  .mobile-menu-close > span::before{
    transform:translate(-50%,-50%) rotate(45deg);
  }

  .mobile-menu-close > span::after{
    transform:translate(-50%,-50%) rotate(-45deg);
  }
}

@media (max-width:480px){
  .menu-toggle{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }

  .mobile-menu-close{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }
}


/* =========================================================
   HEADER / HERO POLISH — 2026-08-27 v8
   Slightly larger logo on desktop + mobile, same header height.
   Desktop eyebrow removed from above the main hero title.
   ========================================================= */
@media (min-width:901px){
  .site-header .brand.logo-brand img{
    width:138px !important;
    max-height:76px !important;
    height:auto !important;
  }

  /* Remove the service eyebrow only on desktop. */
  .hero-content > .eyebrow{
    display:none !important;
  }
}

@media (min-width:901px) and (max-width:1366px){
  .site-header .brand.logo-brand img{
    width:132px !important;
    max-height:73px !important;
  }
}

@media (max-width:900px){
  .site-header .brand.logo-brand{
    min-width:0 !important;
  }

  .site-header .brand.logo-brand img{
    width:124px !important;
    max-height:66px !important;
    height:auto !important;
  }
}

@media (max-width:480px){
  .site-header .brand.logo-brand img{
    width:120px !important;
    max-height:64px !important;
  }
}


/* =========================================================
   MOBILE LANGUAGE INSIDE BURGER — 2026-08-27 v10
   Language selector is removed from the mobile header and
   lives as a clean row inside the opened burger menu.
   ========================================================= */
@media (max-width:900px){
  .mobile-menu-topline{
    align-items:center !important;
  }

  .mobile-menu-actions{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
  }

  .mobile-menu-language-row{
    position:relative;
    z-index:280;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    width:100%;
    margin:10px 0 0;
    padding:14px 0 15px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }

  .mobile-menu-language-label{
    color:rgba(255,255,255,.38);
    font-family:var(--sans);
    font-size:8px;
    line-height:1;
    font-weight:700;
    letter-spacing:.18em;
  }

  .mobile-menu-language-row .mobile-lang{
    position:relative !important;
    display:inline-flex !important;
    margin:0 !important;
  }

  .mobile-menu-language-row .language-trigger{
    min-width:66px !important;
    height:34px !important;
    padding:0 11px !important;
    background:rgba(255,255,255,.035) !important;
    border-color:rgba(255,255,255,.13) !important;
  }

  .mobile-menu-language-row .language-menu{
    top:calc(100% + 7px) !important;
    right:0 !important;
    left:auto !important;
    width:min(168px,calc(100vw - 34px)) !important;
    z-index:340 !important;
  }
}

@media (max-width:480px){
  .mobile-menu-language-row{
    padding:12px 0 13px;
  }
  .mobile-menu-language-row .language-menu{
    width:min(174px,calc(100vw - 28px)) !important;
  }
}


/* =========================================================
   MOBILE HEADER + iPHONE 15 HERO FIT — 2026-08-27 v11
   - Force language selector out of the closed mobile header.
   - Keep it only inside the opened burger menu.
   - Use the iOS small viewport so the first screen is 100% hero
     below Safari's visible browser chrome; next section starts on scroll.
   ========================================================= */
@media (max-width:900px){
  /* Later generic .language-dropdown rules use !important, so the mobile
     header selector must be explicitly overridden here as well. */
  .nav-wrap > .desktop-lang{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .mobile-menu .mobile-menu-language-row{
    display:flex !important;
  }

  /* Stable first viewport on iOS/Safari. 100svh represents the viewport
     while the Safari bars are visible, so no part of the next section peeks in. */
  .hero{
    height:100vh !important;
    min-height:100vh !important;
    max-height:none !important;
  }

  @supports (height:100svh){
    .hero{
      height:100svh !important;
      min-height:100svh !important;
      max-height:100svh !important;
    }
  }

  .hero-content{
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }
}

/* iPhone 15 / 15 Pro-sized portrait viewports and nearby modern iPhones. */
@media (max-width:430px) and (min-height:760px){
  :root{
    --mobile-header-h:72px;
  }

  .site-header,
  .site-header.scrolled,
  body.menu-open .site-header,
  .nav-wrap{
    height:var(--mobile-header-h) !important;
    min-height:var(--mobile-header-h) !important;
  }

  .site-header .brand.logo-brand img{
    width:126px !important;
    max-height:66px !important;
  }

  .hero-content{
    width:calc(100% - 30px) !important;
    padding-top:calc(var(--mobile-header-h) + 12px) !important;
    padding-bottom:calc(env(safe-area-inset-bottom) + 18px) !important;
    justify-content:center !important;
    gap:0 !important;
  }

  .eyebrow{
    font-size:7.4px !important;
    line-height:1.42 !important;
    letter-spacing:.12em !important;
  }

  .hero h1{
    margin:15px 0 16px !important;
    font-size:clamp(38px,10.8vw,45px) !important;
    line-height:1.01 !important;
  }

  .hero-bottom{
    gap:12px !important;
  }

  .hero-bottom p{
    font-size:11.7px !important;
    line-height:1.48 !important;
  }

  .hero-side-note{
    padding-top:0 !important;
  }

  .hero-inline-services{
    margin-top:1px !important;
  }

  .hero-inline-service{
    padding:6px 0 8px !important;
  }

  .hero-quote-cta{
    min-height:42px !important;
  }

  /* Avoid old reserved stats-space on the current hero, which no longer
     contains a .hero-stats block. */
  .hero:not(:has(.hero-stats)) .hero-content{
    padding-bottom:calc(env(safe-area-inset-bottom) + 18px) !important;
  }
}

/* Safari fallback for engines without :has(). The current homepage has no
   stats strip, so keep the same compact bottom spacing on iOS. */
@supports (-webkit-touch-callout:none){
  @media (max-width:430px) and (min-height:760px){
    .hero-content{
      padding-bottom:calc(env(safe-area-inset-bottom) + 18px) !important;
    }
    .hero{
      height:100svh !important;
      min-height:100svh !important;
      max-height:100svh !important;
    }
  }
}

/* =========================================================
   HERO VERTICAL POSITION — 2026-08-27 v12
   Moves the complete hero copy stack slightly lower on both
   desktop and mobile without changing the hero viewport height.
   ========================================================= */
@media (min-width:901px){
  .hero-content{
    transform:translateY(38px) !important;
  }
}

@media (min-width:901px) and (max-height:820px){
  .hero-content{
    transform:translateY(24px) !important;
  }
}

@media (max-width:900px){
  .hero-content{
    transform:translateY(24px) !important;
  }
}

/* iPhone 15 / modern tall iPhone portrait: a little more breathing
   space above the copy while still keeping the next section below fold. */
@media (max-width:430px) and (min-height:760px){
  .hero-content{
    transform:translateY(28px) !important;
  }
}

@media (max-width:430px) and (max-height:759px){
  .hero-content{
    transform:translateY(16px) !important;
  }
}


/* =========================================================
   MOBILE SCROLL STABILITY — 2026-08-27 v15
   Keeps the hero/header stable in Safari, Chrome and iOS in-app browsers
   when their top/bottom toolbars expand or collapse while scrolling.
   ========================================================= */
@media (max-width:900px){
  :root{
    --mobile-header-h:72px;
    --mobile-hero-stats-h:0px;
  }

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    min-height:100%;
    -webkit-overflow-scrolling:touch;
  }

  .site-header,
  .site-header.scrolled,
  body.menu-open .site-header,
  .nav-wrap{
    height:var(--mobile-header-h) !important;
    min-height:var(--mobile-header-h) !important;
  }

  .site-header{
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  .site-header .brand.logo-brand img{
    width:124px !important;
    max-height:66px !important;
    height:auto !important;
  }

  .menu-toggle{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }

  /* JS writes --stable-mobile-vh once the visible viewport has settled.
     Unlike 100dvh/svh in some in-app browsers, this value does not mutate
     every time the browser toolbar shows or hides during a scroll. */
  .hero{
    height:var(--stable-mobile-vh,100svh) !important;
    min-height:var(--stable-mobile-vh,100svh) !important;
    max-height:var(--stable-mobile-vh,100svh) !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .hero-content{
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    transform:translateY(24px) !important;
  }

  .hero h1{
    margin:14px 0 14px !important;
  }

  .hero-bottom{
    gap:12px !important;
  }

  .hero-bottom p{
    font-size:11.5px !important;
    line-height:1.5 !important;
  }

  .hero-side-note{
    padding-top:0 !important;
  }

  .hero-inline-service{
    padding:6px 0 8px !important;
  }

  .hero-quote-cta{
    min-height:40px !important;
  }

  /* Menu also gets a stable minimum canvas. Page scroll is locked while open,
     so it won't snap when an in-app browser changes its chrome. */
  .mobile-menu{
    height:var(--stable-mobile-vh,100dvh) !important;
    min-height:var(--stable-mobile-vh,100svh) !important;
    max-height:none !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
  }

  .mobile-menu-inner{
    min-height:var(--stable-mobile-vh,100svh) !important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

/* Modern iPhone portrait widths: one consistent layout. We intentionally avoid
   min-height:760px / max-height:759px breakpoints because browser chrome can
   cross those thresholds while scrolling and make the page visibly reflow. */
@media (min-width:381px) and (max-width:430px) and (orientation:portrait){
  .site-header .brand.logo-brand img{
    width:126px !important;
    max-height:66px !important;
  }

  .hero-content{
    width:calc(100% - 30px) !important;
    padding-top:calc(var(--mobile-header-h) + env(safe-area-inset-top) + 12px) !important;
    padding-bottom:calc(env(safe-area-inset-bottom) + 18px) !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:0 !important;
    transform:translateY(26px) !important;
  }

  .eyebrow{
    font-size:7.4px !important;
    line-height:1.42 !important;
    letter-spacing:.12em !important;
  }

  .hero h1{
    max-width:81% !important;
    margin:15px 0 16px !important;
    font-size:clamp(38px,10.8vw,45px) !important;
    line-height:1.01 !important;
  }

  .hero-bottom{
    width:min(82%,300px) !important;
    max-width:300px !important;
    gap:12px !important;
  }

  .hero-bottom p{
    font-size:11.7px !important;
    line-height:1.48 !important;
  }

  .hero-quote-cta{
    min-height:42px !important;
  }
}

/* Compact portrait phones get a width-based compact layout instead of a
   toolbar-sensitive viewport-height breakpoint. */
@media (max-width:380px) and (orientation:portrait){
  :root{ --mobile-header-h:68px; }

  .site-header .brand.logo-brand img{
    width:116px !important;
    max-height:62px !important;
  }

  .menu-toggle{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }

  .hero-content{
    width:calc(100% - 28px) !important;
    padding-top:calc(var(--mobile-header-h) + env(safe-area-inset-top) + 10px) !important;
    padding-bottom:calc(env(safe-area-inset-bottom) + 12px) !important;
    justify-content:center !important;
    transform:translateY(14px) !important;
  }

  .hero h1{
    max-width:84% !important;
    margin:11px 0 11px !important;
    font-size:clamp(31px,9.5vw,38px) !important;
  }

  .hero-bottom{
    width:min(84%,280px) !important;
    max-width:280px !important;
    gap:9px !important;
  }

  .hero-bottom p{
    font-size:10.8px !important;
    line-height:1.42 !important;
  }

  .hero-inline-service{
    padding:5px 0 6px !important;
  }

  .hero-quote-cta{
    min-height:38px !important;
  }
}

/* Mobile landscape stays compact based on orientation, not changing toolbar
   height, so rotating/scrolling does not flip between two layouts. */
@media (max-width:900px) and (orientation:landscape){
  :root{ --mobile-header-h:62px; }

  .site-header .brand.logo-brand img{
    width:108px !important;
    max-height:56px !important;
  }

  .hero-content{
    padding-top:calc(var(--mobile-header-h) + 8px) !important;
    padding-bottom:10px !important;
    justify-content:center !important;
    transform:translateY(8px) !important;
  }

  .hero h1{
    margin:8px 0 9px !important;
    font-size:clamp(30px,6vw,42px) !important;
  }

  .hero-bottom{
    gap:7px !important;
  }

  .hero-bottom p{
    font-size:10.5px !important;
    line-height:1.4 !important;
  }

  .hero-inline-service{
    padding:4px 0 5px !important;
  }

  .hero-quote-cta{
    min-height:36px !important;
  }
}