:root{--yellow:#edbc00;--dark:#1d1d1d;--dark2:#181818;--ink:#252525;--muted:#797979;--font:Arial,Helvetica,sans-serif;--container:calc(100% - 60px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:16px;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block}img{max-width:100%}
:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}
.skip-link{position:fixed;z-index:120;left:16px;top:-70px;background:var(--yellow);color:#111;padding:12px 18px}
.skip-link:focus{top:16px}
/* HERO */
.hero{height:min(67.5vw,900px);min-height:650px;position:relative;background:#171717;color:#fff;overflow:hidden}

/* HERO - Cinematic Zoom Effect */


/* ==========================================
   HERO - CONTINUOUS CINEMATIC ZOOM
========================================== */

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;

  transition: opacity 0.85s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

/* Continuous movement */

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  transform-origin: center center;

  animation: heroContinuousZoom 7.2s linear infinite alternate;

  will-change: transform;
}

/* Never-ending smooth zoom */

@keyframes heroContinuousZoom {

  0% {
    transform: scale(1.22);
  }

  100% {
    transform: scale(1);
  }

}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .hero-slide img {
    animation: none;
    transform: none;
  }
}

.hero-slide:first-child img{object-position:center top}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.31)}
.hero-content{position:relative;z-index:4;height:100%;max-width:1360px;margin:auto;display:flex;align-items:center;padding:110px 30px 0}
.hero-copy{position:relative;border-left:4px solid #fff;padding:6px 16px 14px 22px;max-width:490px;min-width:min(400px,90vw)}
.hero-category{font-size:12px;font-weight:bold;color:var(--yellow);letter-spacing:.32em;margin:0 0 15px;text-transform:uppercase}
.hero h1{font-size:clamp(29px,2.7vw,46px);font-weight:300;line-height:1.16;letter-spacing:.045em;margin:0;text-wrap:balance}
.hero-underline{height:2px;width:100%;max-width:430px;border-top:2px dashed var(--yellow);margin:10px 0 23px}
.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:0 35px;min-height:73px;border:2px solid #1d1d1d;color:#1b1b1b;background:transparent;font-size:13px;font-weight:700;letter-spacing:.045em;transition:background .3s,color .3s,border-color .3s,transform .3s;white-space:nowrap}
.outline-button:hover{color:#151515;background:var(--yellow);border-color:var(--yellow);transform:translateY(-2px)}
.outline-button-light{min-height:56px;border:1px solid rgba(255,255,255,.9);color:#fff;padding:0 23px;font-size:11px}
.outline-button-light:hover{color:#141414}
.button-arrow{font-size:18px;font-weight:400;opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .2s}
.outline-button:hover .button-arrow{opacity:1;transform:translateX(0)}
.hero-arrow{position:absolute;z-index:5;top:49%;width:32px;height:52px;display:grid;place-items:center;background:rgba(14,14,14,.08);border:0;color:#fff;transition:background .25s,color .25s}
.hero-arrow svg{height:28px;width:28px;fill:none;stroke:currentColor;stroke-width:1.7}
.hero-arrow:hover{background:rgba(0,0,0,.6);color:var(--yellow)}
.hero-arrow-prev{left:0}.hero-arrow-next{right:0}
/* Refined carousel pagination: four compact dots, soft gold active ring. */
.slide-controls{position:absolute;z-index:5;left:50%;transform:translateX(-50%);bottom:25px;display:flex;align-items:center;gap:9px}
.slide-dot{display:grid;place-items:center;width:32px;height:36px;padding:0;background:transparent;border:0;cursor:pointer}
.slide-dot span{display:block;position:relative;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.64);box-shadow:0 0 0 1px rgba(255,255,255,.18);transition:background .3s ease,box-shadow .3s ease,transform .3s ease}
.slide-dot:hover span{background:#fff;transform:scale(1.22)}
.slide-dot.selected span{width:9px;height:9px;background:var(--yellow);box-shadow:0 0 0 1px rgba(237,188,0,.24),0 0 13px rgba(237,188,0,.24)}
.slide-dot.selected span::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;border:1px solid rgba(237,188,0,.67);border-radius:50%;animation:dotRingIn .42s ease-out both}
@keyframes dotRingIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.hero-scroll-hint{position:absolute;bottom:29px;right:30px;z-index:5;font-size:10px;letter-spacing:.24em;color:#d9d9d9}
.hero-scroll-hint span{font-size:18px;padding-left:9px;color:var(--yellow)}
/* REUSABLE LAYOUT */
.content-container{width:var(--container);max-width:1380px;margin:0 auto;position:relative}
.section-title{font-size:36px;line-height:1.15;font-weight:300;letter-spacing:-.015em;margin:0}
.section-kicker{font-size:16px;color:#555;margin:53px 0 0;letter-spacing:.02em}
.reveal{opacity:0;transform:translateY(27px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
/* ABOUT */
.about-section{min-height:665px;background:#fff;display:flex;align-items:flex-start}
.about-container{padding-top:160px}
.about-content{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:44px 0 0 13px}
.about-content p{font-size:14px;line-height:1.35;max-width:925px;margin:0;letter-spacing:.01em}
.about-content b{font-weight:700}
.about-decor{width:297px;height:90px;object-fit:contain;flex:0 0 auto}
.about-button{display:flex;margin:23px auto 0}
/* SERVICES */
.services-section{min-height:957px;background:#1e1e1e;color:#f3f3f3;position:relative;overflow:hidden}
.services-edge{position:absolute;top:0;bottom:0;left:90.3%;right:0;background:#414141;border-left:4px solid var(--yellow)}
.services-container{z-index:2;padding-top:106px}
.services-grid{width:91%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 35px;margin-top:105px}
.service-card{text-align:center;max-width:400px;justify-self:center}
.service-icon{width:74px;height:74px;margin:0 auto 24px;color:var(--yellow);transition:transform .35s ease}
.service-card:hover .service-icon{transform:translateY(-8px)}
.service-card h3{font-size:24px;line-height:1.17;letter-spacing:.025em;color:var(--yellow);margin:0 0 18px;font-weight:700}
.service-card p{font-size:14px;line-height:1.27;margin:0;max-width:365px}
/* PROJECTS */
.projects-section{min-height:1033px;padding:108px 0 90px;background:#fff}
.projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;row-gap:67px;margin-top:58px}
.project-card{padding:0;border:0;background:transparent;text-align:left;display:block;color:#222;width:100%}
.project-image-wrap{display:block;aspect-ratio:1.63;overflow:hidden;position:relative;background:#ddd}
.project-image-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 50%);transition:background .3s}
.project-image-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.75,.3,1),filter .4s}
.project-card:hover img,.project-card:focus-visible img{transform:scale(1.065);filter:brightness(.82)}
.project-category{position:absolute;top:12px;left:12px;z-index:1;color:#fff;font-size:13px;letter-spacing:.04em;font-weight:600;text-shadow:0 1px 3px #333}
.project-hover-icon{position:absolute;z-index:2;right:20px;bottom:14px;color:var(--yellow);font-size:37px;transform:translate(-8px,8px);opacity:0;transition:opacity .3s,transform .3s}
.project-card:hover .project-hover-icon,.project-card:focus-visible .project-hover-icon{opacity:1;transform:translate(0,0)}
.project-title{font-size:15px;line-height:1.16;display:block;font-weight:700;margin-top:8px;min-height:18px;transition:color .2s}
.project-card:hover .project-title{color:#b18b00}
.all-projects-button{display:flex;margin:60px auto 0}
/* FOOTER */
.site-footer{background:#191919;color:#e5e5e5;min-height:578px;padding:38px 0 20px}
.footer-contact-columns{display:flex;flex-direction:column;gap:19px}
.footer-contact-group h3{font-size:19px;color:var(--yellow);font-weight:400;margin:0 0 15px;letter-spacing:0}
.footer-contact-group a,.footer-contact-group p{display:flex;align-items:center;gap:10px;margin:0 0 11px;color:#ddd;font-size:14px}
.footer-contact-group a:hover{color:var(--yellow)}
.footer-symbol{width:22px;color:#bbb;font-size:18px;display:inline-block;text-align:center}
.footer-logos{display:flex;align-items:center;justify-content:space-between;margin-top:24px}
.footer-brand .brand-symbol{height:87px;width:87px;flex-basis:87px}
.footer-brand .brand-symbol::after{width:47px;height:30px}
.footer-brand .brand-symbol::before{width:35px;top:43px}
.footer-brand .brand-words{padding-top:27px}
.footer-brand .brand-name{font-size:33px}
.footer-brand .brand-subtitle{font-size:10px}
.certification-image{width:332px;height:93px;object-fit:contain;border-radius:9px}
.footer-bottom{border-top:2px dashed var(--yellow);padding-top:27px;margin-top:18px;display:flex;align-items:center;justify-content:flex-end;gap:28px;flex-wrap:wrap;font-size:11px}
.footer-bottom p{margin:0}.footer-legal{display:flex;align-items:center;gap:15px}.footer-legal a:hover{color:var(--yellow)}
/* DIALOGS / CONTROLS */
.back-to-top{position:fixed;bottom:26px;right:24px;z-index:50;background:#222;color:var(--yellow);border:1px solid var(--yellow);width:46px;height:46px;font-size:24px;opacity:0;visibility:hidden;transform:translateY(15px);transition:all .3s}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{background:var(--yellow);color:#111}
.info-dialog{border:0;background:#fff;color:#222;padding:0;max-width:850px;width:calc(100% - 36px);max-height:calc(100dvh - 44px);box-shadow:0 25px 80px #0009;overflow:auto}
.info-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
.info-dialog[open]{animation:dialogEnter .25s ease-out}
@keyframes dialogEnter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.dialog-close{position:sticky;z-index:3;display:flex;align-items:center;justify-content:center;float:right;top:0;margin-bottom:-45px;background:var(--yellow);border:0;width:45px;height:45px;font-size:23px}
.dialog-image-box{height:min(43vw,375px);background:#262626}
.dialog-image-box img{width:100%;height:100%;object-fit:cover;display:block}
.dialog-image-box.hidden{display:none}
.dialog-body{padding:36px 40px 43px}
.dialog-category{color:#be9900;font-size:12px;font-weight:bold;letter-spacing:.2em;margin:0 0 15px}
.dialog-body h2{font-size:32px;line-height:1.2;margin:0 0 24px;font-weight:400}
.dialog-body>p:last-of-type{font-size:16px;line-height:1.75;color:#555}
.dialog-mail-link{display:inline-flex;margin-top:14px;font-size:13px;font-weight:bold;color:#111;border-bottom:2px solid var(--yellow);padding-bottom:7px}
.dialog-mail-link:hover{color:#b18b00}
@media(min-width:1500px){.hero{height:900px}.content-container{width:calc(100% - 100px)}.services-edge{left:93%}.services-grid{width:96%}}
@media(max-width:1100px){
  .hero{height:75vw;min-height:630px}.section-title{font-size:32px}
  .about-content p{max-width:70%}.about-decor{width:26%;height:auto}
  .service-card h3{font-size:20px}.service-card p{font-size:13px}.services-grid{gap:65px 28px}
  .project-title{font-size:14px}.footer-bottom{justify-content:space-between}
}
@media(max-width:750px){
  :root{--container:calc(100% - 38px)}
  .hero{height:740px;min-height:650px;max-height:94svh}.hero-slide:first-child img{object-position:52% center}
  .hero-content{padding:95px 19px 0}.hero-copy{max-width:min(390px,90vw);min-width:0;border-left-width:3px;padding:10px 10px 14px 17px}
  .hero-category{font-size:10px;margin-bottom:13px}.hero h1{font-size:clamp(26px,6.5vw,36px)}.hero-underline{max-width:340px;margin:12px 0 19px}.outline-button-light{font-size:10px;min-height:48px;padding:0 16px}
  .hero-arrow{width:26px}.hero-arrow svg{width:22px}.slide-controls{bottom:24px}.hero-scroll-hint{display:none}
  .about-section{min-height:0;padding-bottom:95px}.about-container{padding-top:94px}.section-title{font-size:28px}.section-kicker{margin-top:38px}
  .about-content{margin:35px 0 0;gap:25px;align-items:flex-start}.about-content p{font-size:14px;line-height:1.65;max-width:100%}.about-decor{width:100px;flex-shrink:0;align-self:flex-end}
  .about-button{margin:44px auto 0}.outline-button:not(.outline-button-light){font-size:11px;min-height:60px;padding:0 26px}
  .services-section{min-height:0;padding-bottom:95px}.services-container{padding-top:88px}.services-edge{left:auto;right:0;width:4%;border-left-width:2px}
  .services-grid{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 20px;margin-top:79px;padding-right:6%}
  .service-icon{width:62px;height:62px;margin-bottom:20px}.service-card h3{font-size:17px}.service-card p{font-size:12px;line-height:1.45}
  .projects-section{min-height:0;padding:84px 0 93px}.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:43px 18px;margin-top:42px}.project-category{font-size:9px;top:7px;left:8px}.project-title{font-size:12px;line-height:1.3;margin-top:8px}.all-projects-button{margin-top:60px}
  .site-footer{min-height:0;padding:49px 0 24px}.footer-contact-group h3{font-size:15px}.footer-contact-group a,.footer-contact-group p{font-size:12px}.footer-contact-columns{gap:17px}.footer-logos{margin-top:60px}.footer-brand .brand-symbol{width:55px;height:57px;flex-basis:55px}.footer-brand .brand-symbol::after{width:30px;height:20px}.footer-brand .brand-symbol::before{width:23px;top:28px}.footer-brand .brand-name{font-size:20px}.footer-brand .brand-subtitle{font-size:6px}.footer-brand .brand-words{padding-top:16px}
  .certification-image{width:155px;height:auto}.footer-bottom{font-size:10px;justify-content:center;gap:14px;text-align:center}
}
@media(max-width:480px){
  .hero{height:680px}.hero-slide:first-child img{object-position:52% center}
  .about-content{display:block}.about-decor{display:block;margin:20px 0 0 auto;width:154px;height:auto}.section-kicker{font-size:14px}
  .services-grid{grid-template-columns:1fr;gap:54px;width:100%;padding:0 18px 0 0;margin-top:66px}.services-edge{width:7px}.service-card{max-width:320px}.service-card h3{font-size:20px}.service-card p{font-size:13px}.service-icon{width:68px;height:68px}
  .projects-grid{grid-template-columns:1fr;gap:34px}.project-title{font-size:14px}.project-category{font-size:11px}
  .footer-logos{align-items:flex-start;flex-direction:column;gap:31px}.certification-image{width:255px;max-width:100%}.footer-bottom{flex-direction:column}
  .dialog-image-box{height:240px}.dialog-body{padding:28px 24px 32px}.dialog-body h2{font-size:25px}.dialog-body>p:last-of-type{font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.hero-slide{transform:none}}
.hero h1{white-space:pre-line}
.hero-copy.changing{animation:heroCopyEnter .65s ease both}
@keyframes heroCopyEnter{from{opacity:.45;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.dialog-gallery{display:flex;flex-direction:column;gap:0;margin-top:22px;border-top:1px solid #ddd}
.dialog-gallery-button{background:none;border:0;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;text-align:left;align-items:center;gap:20px;padding:17px 3px;width:100%;color:#252525;font-size:15px}
.dialog-gallery-button span:last-child{font-size:21px;color:#b28e00}
.dialog-gallery-button:hover{color:#b28e00}

@media(min-width:751px){.hero-content{padding-top:24px}}




/* FOOTER - TÜV Austria Certification */

.certification-image {
  width: 450px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  display: block;
}

/* Responsive for mobile */
@media (max-width: 750px) {
  .certification-image {
    width: 300px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .certification-image {
    width: 280px;
  }
}




/* ========================================
   CONTRACTOR FOOTER - GOOGLE MAP
======================================== */

/* Contact details left / map right */

.site-footer .footer-contact-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 450px);
  column-gap: 55px;
  row-gap: 19px;
  align-items: start;
}

.site-footer .footer-contact-group {
  grid-column: 1;
}

/* Map card */

.footer-map-card {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 100%;
  max-width: 450px;
  justify-self: end;
  overflow: hidden;
  background: #262626;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  transition: border-color .3s ease;
}

.footer-map-card:hover {
  border-color: rgba(237,188,0,.45);
}

/* Google map iframe */

.footer-map-frame {
  position: relative;
  width: 100%;
  height: 255px;
  overflow: hidden;
  background: #333;
}

.footer-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(65%);
  transition: filter .4s ease;
}

.footer-map-card:hover iframe {
  filter: grayscale(0%);
}

/* Information under map */

.footer-map-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 17px 19px;
}

.footer-map-label {
  display: block;
  color: #edbc00;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 7px;
}

.footer-map-details p {
  margin: 0;
  color: #ededed;
  font-size: 12px;
  line-height: 1.5;
}

.footer-map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #edbc00;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .25s ease;
}

.footer-map-link:hover {
  color: #ffffff;
}

.footer-map-link span:last-child {
  font-size: 19px;
  transition: transform .25s ease;
}

.footer-map-link:hover span:last-child {
  transform: translate(3px, -3px);
}

/* Tablet & mobile */

@media (max-width: 900px) {
  .site-footer .footer-contact-columns {
    grid-template-columns: 1fr;
  }

  .site-footer .footer-contact-group {
    grid-column: 1;
  }

  .footer-map-card {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    max-width: 550px;
    margin-top: 25px;
  }
}

@media (max-width: 480px) {
  .footer-map-frame {
    height: 230px;
  }

  .footer-map-info {
    padding: 16px;
  }

  .footer-map-card {
    max-width: 100%;
    border-radius: 12px;
  }
}



/* FOOTER - Website Creator Credit */

.footer-creator-link {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-creator-link:hover {
  color: #edbc00;
}

.footer-credit-separator {
  color: #777;
  margin: 0 12px;
}





/* ==========================================
   ABOUT SECTION - IMAGE SLIDE FROM RIGHT
========================================== */

/* Hide the image outside the section */
.about-section {
  overflow-x: clip;
}

/* Initial state - image outside screen */
.about-content .about-decor {
  opacity: 0;
  transform: translate3d(100vw, 0, 0);

  transition:
    transform 1.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.4s ease;

  transition-delay: 0.15s;
  will-change: transform, opacity;
}

/* Image slides into its normal position */
.about-content.reveal.visible .about-decor {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Accessibility - reduced motion */
@media (prefers-reduced-motion: reduce) {
  .about-content .about-decor {
    opacity: 1;
    transform: none;
    transition: none;
  }
}




/* ==========================================
   CONTRACTOR S.A. - PREMIUM GOLD BUTTONS
========================================== */

.outline-button {
  --glow-x: 50%;
  --glow-y: 50%;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  border-radius: 3px;
  background: transparent;

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    color .35s ease,
    border-color .35s ease,
    box-shadow .45s ease;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Keep button text above lighting effects */

.outline-button > span {
  position: relative;
  z-index: 2;
}

/* Moving golden light */

.outline-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: radial-gradient(
    circle 180px at var(--glow-x) var(--glow-y),
    #fff2bb 0%,
    #f9d759 35%,
    #edbc00 100%
  );

  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

/* Elegant light reflection */

.outline-button::after {
  content: "";
  position: absolute;
  z-index: 1;

  top: -100%;
  left: -50%;
  width: 40%;
  height: 300%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.65),
    transparent
  );

  transform: translateX(-200%) rotate(25deg);
  opacity: 0;
  pointer-events: none;
}

/* Main hover effect */

.outline-button:hover,
.outline-button:focus-visible {
  background: transparent;
  color: #171717;
  border-color: #edbc00;

  transform: translateY(-3px);

  box-shadow:
    0 8px 28px rgba(237,188,0,.27),
    0 0 28px rgba(237,188,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.25);
}

.outline-button:hover::before,
.outline-button:focus-visible::before {
  opacity: 1;
}

/* Light sweep animation */

.outline-button:hover::after,
.outline-button:focus-visible::after {
  animation: contractorShine .85s ease-out forwards;
}

@keyframes contractorShine {
  0% {
    transform: translateX(-200%) rotate(25deg);
    opacity: 0;
  }

  25% {
    opacity: .85;
  }

  100% {
    transform: translateX(600%) rotate(25deg);
    opacity: 0;
  }
}

/* Animated arrow */

.outline-button .button-arrow {
  opacity: .75;
  transform: translate(0, 0);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    opacity .3s ease;
}

.outline-button:hover .button-arrow,
.outline-button:focus-visible .button-arrow {
  opacity: 1;
  transform: translate(4px, -3px);
}

/* Hero button - white outline before hover */

.outline-button-light {
  color: #fff;
  border-color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.08);
}

.outline-button-light:hover,
.outline-button-light:focus-visible {
  color: #171717;
  background: transparent;
  border-color: #edbc00;
}

/* Smooth click feedback */

.outline-button:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 0 12px rgba(237,188,0,.2);
}

/* Mobile touch devices */

@media (hover: none) {
  .outline-button:active {
    background: #edbc00;
    color: #171717;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .outline-button,
  .outline-button::before,
  .outline-button::after,
  .outline-button .button-arrow {
    animation: none !important;
    transition: none !important;
  }
}




/* ==========================================
   ABOUT SECTION - IMAGE BACKGROUND
========================================== */

.about-section {
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.82),
      rgba(255, 255, 255, 0.82)
    ),
    url("assets/about.webp");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}


/* ABOUT SECTION - Yellow subtitle */

.about-section .section-kicker {
  color: #edbc00;
  font-weight: 600;
}


/* ABOUT DECOR - larger size */
.about-content .about-decor {
  width: min(380px, 32vw) !important;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}


/* ==========================================
   CONTRACTOR - PREMIUM SERVICES SHOWCASE
========================================== */

/* SECTION BACKGROUND */

.services-section {
  position: relative;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 15% 0%,
      rgba(237,188,0,.075),
      transparent 42%
    ),
    #171717;
}

/* Subtle architectural grid */

.services-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 55px 55px;
  opacity: .55;
}

/* Keep the characteristic yellow edge */

.services-edge {
  left: auto;
  right: 0;
  width: 12px;
  background: #353535;
  border-left: 2px solid #edbc00;
  z-index: 1;
}

/* Section heading */

.services-container {
  position: relative;
  z-index: 2;
  padding-top: 110px;
  padding-bottom: 115px;
}

.services-section .section-title {
  font-size: clamp(30px, 3vw, 43px);
  letter-spacing: .07em;
  font-weight: 300;
  color: #fff;
}

.services-section .section-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 2px;
  margin-top: 23px;

  background: #edbc00;
  box-shadow: 0 0 15px rgba(237,188,0,.45);
}

/* ==========================================
   ASYMMETRIC BENTO GRID
========================================== */

.services-grid {
  display: grid;

  grid-template-columns: repeat(12, minmax(0, 1fr));

  width: calc(100% - 30px);
  max-width: 1280px;

  gap: 20px;
  margin-top: 65px;
  padding: 0;
}

/* Large featured cards */

.services-grid .service-card:nth-child(1) {
  grid-column: span 7;
  min-height: 350px;
}

.services-grid .service-card:nth-child(2) {
  grid-column: span 5;
  min-height: 350px;
}

/* Three equal bottom cards */

.services-grid .service-card:nth-child(n+3) {
  grid-column: span 4;
  min-height: 315px;
}

/* ==========================================
   CARD DESIGN
========================================== */

.services-grid .service-card {
  --mx: 50%;
  --my: 50%;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  max-width: none;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;

  text-align: left;
  padding: 38px;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;

  background:
    linear-gradient(
      140deg,
      #292929 0%,
      #202020 65%,
      #1d1d1d 100%
    );

  box-shadow: 0 12px 35px rgba(0,0,0,.13);

  transition:
    opacity .8s ease,
    transform .65s cubic-bezier(.2,.8,.2,1),
    border-color .4s ease,
    box-shadow .5s ease;
}

/* Featured card has a warmer tone */

.services-grid .service-card:first-child {
  background:
    linear-gradient(
      135deg,
      #333025 0%,
      #262521 48%,
      #1d1d1d 100%
    );

  border-color: rgba(237,188,0,.21);
}

/* ==========================================
   MOUSE FOLLOWING GOLD SPOTLIGHT
========================================== */

.services-grid .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    radial-gradient(
      330px circle at var(--mx) var(--my),
      rgba(237,188,0,.22),
      rgba(237,188,0,.06) 45%,
      transparent 75%
    );

  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

/* Content stays above the glow */

.services-grid .service-card > * {
  position: relative;
  z-index: 1;
}

/* ==========================================
   CARD NUMBERS
========================================== */

.services-grid .service-card::after {
  position: absolute;
  top: 20px;
  right: 27px;
  z-index: 1;

  font-size: 64px;
  font-weight: 700;
  line-height: 1;

  color: rgba(237,188,0,.08);
  -webkit-text-stroke: 1px rgba(237,188,0,.22);

  pointer-events: none;
}

.services-grid .service-card:nth-child(1)::after {
  content: "01";
}

.services-grid .service-card:nth-child(2)::after {
  content: "02";
}

.services-grid .service-card:nth-child(3)::after {
  content: "03";
}

.services-grid .service-card:nth-child(4)::after {
  content: "04";
}

.services-grid .service-card:nth-child(5)::after {
  content: "05";
}

/* ==========================================
   SERVICE ICONS
========================================== */

.services-grid .service-icon {
  width: 70px;
  height: 70px;

  flex-shrink: 0;
  margin: 0 0 30px;

  color: #edbc00;

  filter: drop-shadow(0 0 0 transparent);

  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    filter .45s ease;
}

/* ==========================================
   HEADINGS
========================================== */

.services-grid .service-card h3 {
  position: relative;

  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.25;

  font-weight: 700;
  letter-spacing: .035em;

  color: #edbc00;

  margin: 0 0 17px;
  padding-top: 18px;

  transition:
    color .35s ease,
    text-shadow .35s ease;
}

/* Decorative gold line above heading */

.services-grid .service-card h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 35px;
  height: 2px;

  background: #edbc00;

  transition:
    width .45s ease,
    box-shadow .45s ease;
}

/* ==========================================
   SERVICE DESCRIPTION
========================================== */

.services-grid .service-card p {
  color: rgba(255,255,255,.73);

  font-size: 14px;
  line-height: 1.65;

  max-width: 470px;
  margin: 0;

  transition: color .35s ease;
}

/* ==========================================
   SCROLL ENTRANCE
========================================== */

.services-grid .service-card.reveal {
  opacity: 0;
  transform: translateY(45px) scale(.97);
}

.services-grid .service-card.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ==========================================
   HOVER ANIMATIONS
========================================== */

@media (hover: hover) and (pointer: fine) {

  .services-grid .service-card.reveal.visible:hover {
    transform: translateY(-10px) scale(1.015);
  }

  .services-grid .service-card:hover {
    border-color: rgba(237,188,0,.58);

    box-shadow:
      0 25px 65px rgba(0,0,0,.35),
      0 0 35px rgba(237,188,0,.09),
      inset 0 0 0 1px rgba(237,188,0,.08);
  }

  .services-grid .service-card:hover::before {
    opacity: 1;
  }

  .services-grid .service-card:hover .service-icon {
    transform: translateY(-8px) scale(1.13);

    filter:
      drop-shadow(0 0 13px rgba(237,188,0,.5));
  }

  .services-grid .service-card:hover h3 {
    color: #ffdb49;

    text-shadow:
      0 0 24px rgba(237,188,0,.25);
  }

  .services-grid .service-card:hover h3::before {
    width: 85px;

    box-shadow:
      0 0 14px rgba(237,188,0,.55);
  }

  .services-grid .service-card:hover p {
    color: #fff;
  }

}

/* ==========================================
   TABLET LAYOUT
========================================== */

@media (max-width: 1000px) {

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 20px);
    gap: 16px;
  }

  .services-grid .service-card:nth-child(1) {
    grid-column: span 2;
  }

  .services-grid .service-card:nth-child(n+2) {
    grid-column: span 1;
    min-height: 300px;
  }

  .services-grid .service-card {
    padding: 30px;
  }

  .services-grid .service-card h3 {
    font-size: 20px;
  }

}

/* ==========================================
   MOBILE LAYOUT
========================================== */

@media (max-width: 600px) {

  .services-container {
    padding-top: 85px;
    padding-bottom: 90px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    width: calc(100% - 12px);
    margin-top: 45px;
    gap: 15px;
  }

  .services-grid .service-card:nth-child(n) {
    grid-column: 1;
    min-height: 265px;
    padding: 28px;
  }

  .services-grid .service-card h3 {
    font-size: 21px;
  }

  .services-grid .service-card p {
    font-size: 13px;
  }

  .services-grid .service-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
  }

  .services-grid .service-card::after {
    font-size: 48px;
  }

}

/* ==========================================
   ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {

  .services-grid .service-card.reveal,
  .services-grid .service-card.reveal.visible {
    opacity: 1;
    transform: none;
  }

  .services-grid .service-card,
  .services-grid .service-icon,
  .services-grid .service-card h3,
  .services-grid .service-card h3::before {
    transition: none;
  }

}



/* ==========================================
   SERVICES SECTION - BACKGROUND IMAGE
========================================== */

.services-section {
  background-image:
    linear-gradient(
      rgba(23, 23, 23, 0.92),
      rgba(23, 23, 23, 0.92)
    ),
    url("assets/services.webp");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #171717;
}

/* =============================================
   HOMEPAGE PROJECT DOSSIER (shared projects.css)
   All archive styling stays scoped to this block.
============================================= */
.home-projects-archive.projects-page .pa-section {
  min-height: 0;
  padding-top: 100px;
  padding-bottom: 104px;
}
.home-projects-archive.projects-page .pa-intro h2 {
  margin: 0;
  font-size: clamp(52px, 6.8vw, 112px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.055em;
  color: #282724;
}
.home-projects-archive .all-projects-button {
  margin-top: 56px;
}
@media (max-width: 750px) {
  .home-projects-archive.projects-page .pa-section {
    padding-top: 80px;
    padding-bottom: 85px;
  }
  .home-projects-archive.projects-page .pa-intro h2 {
    font-size: clamp(46px, 9vw, 74px);
  }
}
/* Show project information on devices where hover is unavailable. */
@media (hover: none) {
  .home-projects-archive.projects-page .pa-photo-shade { opacity: 1; }
  .home-projects-archive.projects-page .pa-photo-details {
    opacity: 1;
    transform: none;
  }
}



/* ===============================================================
   CONTRACTOR S.A. / LIVING BLUEPRINT HOMEPAGE
   Scope: homepage only, no new JS/CSS dependencies.
   Fixed drawing + scroll-through dark glass architecture.
   =============================================================== */
body:not(.projects-page) { background:#080d12; }
.hb-workspace { position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 76% 47%,#182831 0%,#0b141b 47%,#070b10 100%); }
.hb-workspace-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(177,209,218,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(177,209,218,.035) 1px,transparent 1px);background-size:44px 44px; }
.hb-blueprint { position:absolute;inset:-4% -1%;width:102%;height:108%;transform-origin:60% 50%;animation:hbFloat 31s ease-in-out infinite alternate; }
.hb-plan-ghost { opacity:.105; }
.hb-trace { color:#d7ecf0;stroke:currentColor;stroke-linecap:square; }
.hb-trace path,.hb-trace circle { stroke-dasharray:1000;stroke-dashoffset:1000;opacity:0; }
.hb-trace-shell path {animation:hbShell 19s linear infinite;}
.hb-trace-walls path {animation:hbWalls 19s linear infinite;}
.hb-trace-openings path {animation:hbOpenings 19s linear infinite;}
.hb-trace-details path {animation:hbDetails 19s linear infinite;}
.hb-trace-furniture path,.hb-trace-furniture circle {animation:hbFurniture 19s linear infinite;}
.hb-trace-gold {color:#edbc00;filter:drop-shadow(0 0 5px rgba(237,188,0,.42));}
.hb-trace-gold path,.hb-trace-gold circle {animation:hbGold 19s linear infinite;}
.hb-annotations {opacity:.26;animation:hbAnnotations 19s ease-in-out infinite;}
@keyframes hbShell {0%{stroke-dashoffset:1000;opacity:0}4%{opacity:.8}30%,88%{stroke-dashoffset:0;opacity:.8}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbWalls {0%,11%{stroke-dashoffset:1000;opacity:0}15%{opacity:.88}48%,88%{stroke-dashoffset:0;opacity:.88}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbOpenings {0%,22%{stroke-dashoffset:1000;opacity:0}26%{opacity:.85}58%,88%{stroke-dashoffset:0;opacity:.85}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbDetails {0%,34%{stroke-dashoffset:1000;opacity:0}39%{opacity:.84}68%,88%{stroke-dashoffset:0;opacity:.84}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbFurniture {0%,44%{stroke-dashoffset:1000;opacity:0}49%{opacity:.6}75%,88%{stroke-dashoffset:0;opacity:.6}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbGold {0%,57%{stroke-dashoffset:1000;opacity:0}61%{opacity:1}79%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbAnnotations {0%,49%,100%{opacity:.1}73%,90%{opacity:.5}}
@keyframes hbFloat {from{transform:translate3d(-1%,.4%,0) scale(1.01)}to{transform:translate3d(1%,-.7%,0) scale(1.048)}}
.hb-plan-vignette {position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,14,.9) 0%,rgba(5,10,15,.68) 37%,rgba(5,10,15,.28) 73%,rgba(5,10,15,.12) 100%),linear-gradient(180deg,rgba(5,9,14,.3),transparent 30%,transparent 74%,rgba(5,9,14,.6));}
.hb-screen-grain {position:absolute;inset:0;opacity:.22;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.017) 4px,transparent 5px);}
.hb-screen-hud {position:fixed;inset:0;z-index:1;pointer-events:none;font:600 9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;color:rgba(183,202,210,.43);}
.hb-hud-left {position:absolute;bottom:18px;left:30px;display:flex;align-items:center;gap:10px;}
.hb-hud-left i {width:6px;height:6px;background:#edbc00;border-radius:50%;box-shadow:0 0 13px rgba(237,188,0,.6);animation:hbDot 2s ease-in-out infinite alternate;}
.hb-hud-right {position:absolute;bottom:18px;right:30px;}
@keyframes hbDot {to{opacity:.3}}
.hb-main {position:relative;z-index:2;}
.hb-main > section,.hb-main > .home-projects-archive {position:relative;isolation:isolate;}
.hb-gold {color:#edbc00;}
.hb-overline {font-size:11px;letter-spacing:.27em;font-weight:700;color:#edbc00;margin:0;}
.hb-opening {min-height:100svh;display:flex;align-items:center;padding:150px 0 110px;color:#fff;}
.hb-opening-inner {display:flex;align-items:flex-end;justify-content:space-between;gap:28px;}
.hb-opening-copy {max-width:950px;padding:22px 0;}
.hb-kicker {display:flex;align-items:center;gap:12px;margin:0 0 55px;color:#e2e9e9;font-size:11px;font-weight:700;letter-spacing:.19em;}
.hb-diamond {width:10px;height:10px;background:#edbc00;transform:rotate(45deg);box-shadow:0 0 15px rgba(237,188,0,.4);}
.hb-muted {color:#889ba3;}
.hb-opening-title {margin:17px 0 0;font-size:clamp(58px,7.9vw,132px);font-weight:400;line-height:1.04;letter-spacing:-.072em;text-wrap:balance;}
.hb-opening-title span {display:block;}
.hb-opening-description {max-width:630px;margin:31px 0 35px;font-size:clamp(16px,1.38vw,20px);line-height:1.68;color:#d1d9dc;}
.hb-opening-actions {display:flex;align-items:center;gap:17px;flex-wrap:wrap;}
.hb-main-action,.hb-minor-action {display:inline-flex;align-items:center;justify-content:space-between;gap:27px;min-height:61px;padding:0 24px;border:1px solid #edbc00;font-size:11px;font-weight:700;letter-spacing:.11em;transition:background .3s,transform .3s,color .3s;}
.hb-main-action {background:#edbc00;color:#121a1e;}
.hb-main-action:hover {background:#ffe077;color:#0e1519;transform:translateY(-3px);}
.hb-minor-action {border-color:rgba(204,227,232,.37);color:#edf1f2;background:rgba(10,18,23,.35);}
.hb-minor-action:hover {border-color:#edbc00;color:#edbc00;transform:translateY(-3px);}
.hb-opening-actions a span:last-child {font-size:20px;}
.hb-opening-counter {flex:0 0 auto;align-self:flex-end;color:rgba(237,188,0,.7);font-size:16px;letter-spacing:.13em;margin-bottom:52px;white-space:nowrap;}
.hb-opening-counter b {font-weight:400;color:#fff;}
.hb-opening-counter small {display:block;margin-top:14px;font:600 9px ui-monospace,monospace;color:#8f9da4;letter-spacing:.2em;}
.hb-scroll-cue {position:absolute;bottom:35px;left:max(30px,calc((100vw - 1380px)/2));display:flex;gap:13px;align-items:center;font-size:10px;letter-spacing:.22em;color:#c8d0d2;}
.hb-scroll-line {width:36px;height:1px;background:#edbc00;}
.hb-cue-arrow {color:#edbc00;font-size:20px;animation:hbArrow 1.6s ease-in-out infinite alternate;}
@keyframes hbArrow {to{transform:translateY(8px)}}
/* A framed photo showcase, not a full-bleed background. */
.hb-feature {min-height:100svh;padding:106px 0 116px;color:#fff;display:flex;flex-direction:column;justify-content:center;}
.hb-feature-head {padding-bottom:27px;}
.hb-feature-head h2 {max-width:950px;font-weight:400;font-size:clamp(30px,4vw,57px);letter-spacing:-.052em;margin:13px 0 12px;line-height:1.12;}
.hb-feature-head > p:last-child {font-size:14px;color:#acbbc2;line-height:1.6;max-width:630px;margin:0;}
.hb-feature .hero {width:min(1110px,calc(100% - 110px));height:clamp(490px,59svh,680px);min-height:490px;max-height:700px;margin:13px auto 0;position:relative;overflow:hidden;background:#121b24;border:1px solid rgba(213,231,235,.38);border-radius:2px;box-shadow:0 28px 85px rgba(0,0,0,.48),0 0 0 9px rgba(10,18,24,.35);}
.hb-feature .hero::after {content:"";position:absolute;inset:13px;border:1px solid rgba(255,255,255,.12);pointer-events:none;z-index:3;}
.hb-feature .hero-shade {background:linear-gradient(90deg,rgba(4,7,12,.77),rgba(4,7,12,.2) 78%),linear-gradient(0deg,rgba(4,7,12,.4),transparent 45%);}
.hb-feature .hero-content {padding:38px 64px 30px;max-width:none;align-items:center;}
.hb-feature .hero-copy {min-width:0;max-width:610px;border-left:3px solid #edbc00;padding:12px 24px 17px;}
.hb-feature .hero h1 {font-size:clamp(30px,3.8vw,57px);letter-spacing:-.04em;line-height:1.1;text-wrap:balance;}
.hb-feature .hero-underline {max-width:400px;}
.hb-feature .hero-slide:first-child img {object-position:center center;}
.hb-feature .hero-arrow {z-index:6;top:46%;width:40px;height:58px;background:rgba(8,11,16,.38);}
.hb-feature .slide-controls {bottom:20px;}
.hb-feature .hero-scroll-hint {display:none;}
.hb-feature-foot {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:25px;font:600 9px ui-monospace,monospace;letter-spacing:.17em;color:rgba(197,211,216,.58);}
/* Content lives on translucent CAD-reading plates. No photographic section backgrounds. */
.hb-main .about-section {min-height:90svh;padding:110px 0;display:flex;align-items:center;background:transparent;background-image:none;color:#fff;overflow:visible;}
.hb-main .about-container {padding:clamp(36px,6vw,76px)!important;max-width:1120px;width:calc(100% - 110px);background:linear-gradient(120deg,rgba(8,14,20,.91),rgba(13,22,28,.76));border:1px solid rgba(178,205,211,.24);border-left:2px solid #edbc00;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);box-shadow:0 25px 75px rgba(0,0,0,.25);}
.hb-main .about-section .section-title {font-size:clamp(36px,4vw,60px);color:#fff;letter-spacing:-.05em;}
.hb-main .about-section .section-kicker {margin-top:24px;color:#edbc00;}
.hb-main .about-content {margin:24px 0 0;display:flex;align-items:center;gap:35px;}
.hb-main .about-content p {font-size:clamp(16px,1.35vw,19px);line-height:1.82;color:#d6e0e2;max-width:780px;}
.hb-main .about-content b {color:#fff;}




/* ==========================================
   ABOUT SECTION LOGO MARK
   Exact geometric mark like reference image
========================================== */

.hb-about-mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  margin-left: auto;

  width: clamp(84px, 8vw, 118px);
  aspect-ratio: 1 / 1;

  background: #edbc00; /* contractor yellow */

  /* Horizontal cut from center to right edge */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 48%,
    50% 48%,
    50% 53%,
    100% 53%,
    100% 100%,
    0% 100%
  );
}

/* Remove previous pseudo-elements */
.hb-about-mark::before,
.hb-about-mark::after {
  content: none;
}





.hb-main .about-button {margin:32px 0 0;min-height:57px;color:#f2f2f2;border:1px solid rgba(237,188,0,.9);}
.hb-main .about-button:hover {color:#151515;}
.hb-main .services-section {min-height:0;background:transparent!important;background-image:none!important;padding:90px 0 100px;overflow:visible;color:#fff;}
.hb-main .services-section::before {opacity:.16;}
.hb-main .services-edge {display:none;}
.hb-main .services-container {padding:0;z-index:2;}
.hb-main .services-grid {width:100%;max-width:none;grid-template-columns:repeat(12,minmax(0,1fr));gap:17px;margin-top:55px;}
.hb-main .services-grid .service-card {background:linear-gradient(135deg,rgba(17,28,35,.91),rgba(7,13,19,.76));border:1px solid rgba(179,207,213,.22);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);}
.hb-main .services-grid .service-card:first-child {background:linear-gradient(135deg,rgba(41,37,25,.89),rgba(9,18,23,.84));border-color:rgba(237,188,0,.35);}
.hb-main .services-grid .service-card p {color:#b7c6ca;}
.hb-main .services-section .section-title {color:#fff;}
.hb-main .home-projects-archive.projects-page {background:transparent;}
.hb-main .home-projects-archive.projects-page .pa-section {min-height:0;padding:95px 0 115px;background:transparent;overflow:visible;}
.hb-main .home-projects-archive .pa-drawing-grid {display:none;}
.hb-main .home-projects-archive .pa-intro h2 {color:#fff;}
.hb-main .home-projects-archive .pa-eyebrow,.hb-main .home-projects-archive .pa-index-mark {color:#a6b8c0;}
.hb-main .home-projects-archive .pa-index-mark strong {color:#edbc00;}
.hb-main .home-projects-archive .pa-intro-aside p {color:#d4dfe1;}
.hb-main .home-projects-archive .pa-mobile-tabs-hint {color:#dfbf52;}
.hb-main .home-projects-archive .pa-folder-shell {background:linear-gradient(125deg,rgba(12,21,27,.91),rgba(18,29,35,.80));border-color:rgba(184,209,216,.29);border-top-color:#edbc00;box-shadow:0 34px 90px rgba(0,0,0,.32),inset 0 0 0 8px rgba(255,255,255,.024);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);}
.hb-main .home-projects-archive .pa-folder-shell::before {background:rgba(225,234,232,.14);}
.hb-main .home-projects-archive .pa-folder-toolbar {border-bottom-color:rgba(219,232,236,.2);}
.hb-main .home-projects-archive .pa-folder-identity,.hb-main .home-projects-archive .pa-result-count {color:#c1d0d3;}
.hb-main .home-projects-archive .pa-result-count strong {color:#edbc00;}
.hb-main .home-projects-archive .pa-folder-end {color:#8ba2a9;}
.hb-main .home-projects-archive .pa-project {border-color:rgba(250,246,236,.8);}
.hb-main .home-projects-archive .all-projects-button {color:#fff;border-color:#edbc00;}
.hb-main .home-projects-archive .all-projects-button:hover {color:#151515;}
#site-footer-root {position:relative;z-index:3;}
body .site-footer {background:#101719;}
body .back-to-top {z-index:55;}
/* Animate chapter entrances without ever hiding the content if JS is unavailable. */
body.hb-motion-ready .hb-enter:not(.hb-shown) {opacity:0;transform:translate3d(0,42px,0);}
body.hb-motion-ready .hb-enter.hb-shown {opacity:1;transform:none;}
.hb-enter {transition:opacity .85s ease, transform 1.1s cubic-bezier(.16,1,.3,1);}
.hb-opening-copy > * {animation:hbArrive .95s cubic-bezier(.16,1,.3,1) both;}
.hb-opening-copy > :nth-child(2) {animation-delay:.13s;}
.hb-opening-copy > :nth-child(3) {animation-delay:.23s;}
.hb-opening-copy > :nth-child(4) {animation-delay:.35s;}
.hb-opening-copy > :nth-child(5) {animation-delay:.48s;}
@keyframes hbArrive {from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
body.hb-paused .hb-blueprint,body.hb-paused .hb-trace path,body.hb-paused .hb-trace circle,body.hb-paused .hb-annotations {animation-play-state:paused!important;}
@media(min-width:1500px) {.hb-feature .hero {width:min(1210px,calc(100% - 150px));}}
@media(max-width:1100px) {
 .hb-opening-counter {display:none;}
 .hb-feature .hero {width:calc(100% - 74px);}
 .hb-main .about-container {width:calc(100% - 74px);}
 .hb-main .services-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .hb-main .services-grid .service-card:nth-child(n) {grid-column:auto;min-height:300px;}
 .hb-main .services-grid .service-card:first-child {grid-column:1/-1;}
}
@media(max-width:750px) {
 .hb-blueprint {width:158%;height:110%;left:-29%;top:-3%;opacity:.88;}
 .hb-plan-vignette {background:linear-gradient(90deg,rgba(4,9,14,.79),rgba(4,9,14,.46)),linear-gradient(180deg,rgba(5,9,14,.55),transparent 36%,rgba(5,9,14,.65));}
 .hb-hud-left {left:18px;bottom:12px;font-size:8px;}
 .hb-hud-right {display:none;}
 .hb-opening {padding:138px 0 105px;min-height:100svh;}
 .hb-opening-inner {width:calc(100% - 40px);}
 .hb-kicker {font-size:9px;letter-spacing:.12em;gap:9px;margin-bottom:43px;flex-wrap:wrap;}
 .hb-opening-title {font-size:clamp(45px,9vw,84px);}
 .hb-opening-description {font-size:15px;line-height:1.7;max-width:540px;}
 .hb-opening-actions {gap:10px;}
 .hb-main-action,.hb-minor-action {min-height:56px;padding:0 17px;font-size:10px;gap:12px;}
 .hb-scroll-cue {left:20px;bottom:26px;}
 .hb-feature {padding:92px 0 85px;min-height:90svh;}
 .hb-feature-head {width:calc(100% - 40px);}
 .hb-feature-head h2 {font-size:clamp(29px,6vw,46px);}
 .hb-feature .hero {width:calc(100% - 40px);height:clamp(440px,63svh,590px);min-height:440px;margin-top:11px;}
 .hb-feature .hero-content {padding:45px 30px 42px;}
 .hb-feature .hero-copy {max-width:490px;min-width:0;padding-left:16px;}
 .hb-feature .hero h1 {font-size:clamp(27px,5.5vw,40px);}
 .hb-feature .hero-arrow {width:31px;}
 .hb-feature-foot {width:calc(100% - 40px);font-size:8px;}
 .hb-main .about-section {min-height:0;padding:105px 0;}
 .hb-main .about-container {width:calc(100% - 40px);padding:32px 26px!important;}
 .hb-main .about-content {display:block;}
 .hb-about-mark {display:none;}
 .hb-main .about-content p {max-width:none;font-size:15px;}
 .hb-main .services-section {padding:75px 0 84px;}
 .hb-main .services-grid {grid-template-columns:1fr;gap:14px;margin-top:43px;}
 .hb-main .services-grid .service-card:nth-child(n) {grid-column:1;min-height:240px;padding:27px;}
 .hb-main .home-projects-archive.projects-page .pa-section {padding:70px 0 90px;}
}
@media(max-width:480px) {
 .hb-opening-title {font-size:clamp(42px,10.6vw,62px);}
 .hb-opening-actions {flex-direction:column;align-items:flex-start;}
 .hb-opening-actions a {min-width:min(315px,100%);}
 .hb-feature .hero {min-height:420px;height:60svh;}
 .hb-feature .hero-content {padding:28px 25px 56px;align-items:center;}
 .hb-feature .hero h1 {font-size:clamp(24px,7vw,34px);}
 .hb-feature .hero-copy {padding-left:14px;padding-right:8px;}
 .hb-feature .hero-shade {background:linear-gradient(90deg,rgba(5,9,12,.84),rgba(5,9,12,.27) 85%);}
 .hb-feature-foot span:last-child {display:none;}
}
@media(prefers-reduced-motion:reduce) {
 .hb-blueprint,.hb-annotations,.hb-hud-left i,.hb-cue-arrow,.hb-opening-copy>* {animation:none!important;}
 .hb-trace path,.hb-trace circle {animation:none!important;stroke-dasharray:none;stroke-dashoffset:0;opacity:.75;}
 .hb-trace-gold path,.hb-trace-gold circle {opacity:1;}
 .hb-enter,body.hb-motion-ready .hb-enter:not(.hb-shown) {opacity:1!important;transform:none!important;transition:none!important;}
}