/* Garage Door Santa Clara — V3 architectural / industrial editorial.
   Homepage hero and first content section only. No new business information. */
.v3-home {
   --v3-ink: #142220;
   --v3-dark: #111d1b;
   --v3-cream: #f2eee6;
   --v3-orange: #e29560;
   --v3-orange-strong: #df8750;
   --v3-paper: #faf8f3
}

.v3-home .site-nav {
   background: var(--pine)
   
}

.v3-home .topline {
   background: #0d1716;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px)
}

.v3-home .nav-call {
   background: var(--v3-orange-strong)
}

.v3-home .nav-call:hover {
   background: #c86e39
}

.v3-home .site-nav .nav-link.active::after {
   background: var(--v3-orange)
}

/* Full-bleed architectural cover with no floating image, card, tilt or parallax. */
.v3-home .v3-hero {
   position: relative;
   isolation: isolate;
   background: var(--v3-dark);
   color: #fff;
   overflow: hidden;
   min-height: 730px;
   min-height: min(890px, calc(100svh - 128px));
   display: flex;
   flex-direction: column
}

.v3-hero-scene {
   position: absolute;
   inset: 0;
   z-index: -1;
   overflow: hidden;
   background: #303c39
}

.v3-hero-scene>img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 54%;
   max-width: none
}

.v3-scene-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(12, 24, 22, .96) 0%, rgba(12, 24, 22, .89) 26%, rgba(12, 24, 22, .61) 48%, rgba(12, 24, 22, .13) 78%, rgba(12, 24, 22, .12) 100%), linear-gradient(0deg, rgba(10, 21, 19, .59), transparent 22%, transparent 75%, rgba(10, 21, 19, .12));
   pointer-events: none
}

.v3-hero-grid {
   position: absolute;
   inset: 0;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   pointer-events: none;
   z-index: -1
}

.v3-hero-grid span {
   border-left: 1px solid rgba(255, 255, 255, .055)
}

.v3-hero-grid span:first-child {
   border: 0
}

.v3-hero-grid span:last-child {
   border-right: 1px solid rgba(255, 255, 255, .055)
}

.v3-hero-frame {
   flex: 1;
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
   z-index: 1
}

.v3-hero-main {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   position: relative;
   padding-top: 53px;
   padding-bottom: 62px;
   
}

.v3-hero-content {
   max-width: 790px;
   width: 100%
}

.v3-kicker {
   display: flex;
   align-items: center;
   gap: 16px;
   color: #f5e6d8;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .2em;
   text-transform: uppercase;
   margin-bottom: 30px;
   line-height: 1.5
}

.v3-kicker-rule {
   width: 33px;
   height: 2px;
   background: var(--v3-orange);
   flex: none
}

.v3-kicker-index {
   margin-left: 15px;
   color: rgba(255, 255, 255, .48)
}

.v3-hero h1 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
   margin: 0 0 25px;
   font-family: 'Manrope', sans-serif;
   font-size: clamp(73px, 8.3vw, 100px);
   font-weight: 800;
   line-height: .9;
   letter-spacing: -.085em;
   color: #fff
}

.v3-title-solid,
.v3-title-outline {
   display: block;
   white-space: nowrap;
   max-width: 100%
}

.v3-title-outline {
   color: transparent;
   -webkit-text-stroke: 1.6px rgba(255, 255, 255, .92);
   paint-order: stroke fill;
   letter-spacing: -.09em
}

.v3-title-period {
   color: var(--v3-orange);
   -webkit-text-stroke: 0
}

.v3-title-location {
   display: flex;
   align-items: center;
   gap: 17px;
   align-self: flex-start;
   margin-top: 28px;
   color: #f5f0e8;
   font-size: clamp(16px, 1.85vw, 25px);
   font-weight: 800;
   letter-spacing: .13em;
   line-height: 1.2;
   white-space: normal
}

.v3-title-location em {
   font-style: normal;
   background: var(--v3-orange);
   color: #142220;
   font-size: 12px;
   letter-spacing: .04em;
   padding: 10px 12px
}

.v3-hero-description {
   max-width: 520px;
   font-size: 14px;
   line-height: 1.85;
   color: #d6ded9;
   margin: 0 0 30px
}

.v3-hero-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 24px
}

.v3-primary-action {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px;
   background: var(--v3-orange);
   color: var(--v3-dark);
   min-height: 58px;
   padding: 0 0 0 24px;
   font-size: 35px;
   font-weight: 800;
   letter-spacing: .02em;
   transition: background .25s, color .25s
}

.v3-primary-action:hover {
   background: #f1b482;
   color: var(--v3-dark)
}

.v3-action-icon {
   display: grid;
   place-items: center;
   height: 58px;
   width: 58px;
   border-left: 1px solid rgba(20, 34, 32, .19)
}

.v3-primary-action svg {
   transform: rotate(-45deg)
}

.v3-secondary-action {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   border-bottom: 1px solid rgba(255, 255, 255, .55);
   padding: 15px 0;
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   white-space: nowrap;
   transition: border-color .25s, color .25s
}

.v3-secondary-action:hover {
   color: var(--v3-orange);
   border-color: var(--v3-orange)
}

.v3-secondary-action svg {
   width: 16px;
   height: 16px
}

.v3-hero-coordinates {
   align-self: flex-end;
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: flex-end;
   color: rgba(255, 255, 255, .72);
   font-size: 9px;
   font-weight: 800;
   letter-spacing: .19em;
   line-height: 1.5;
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   margin-bottom: 7px
}

.v3-hero-footer {
   position: relative;
   z-index: 2;
   border-top: 1px solid rgba(255, 255, 255, .2);
   background: rgba(12, 24, 22, .67);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px)
}

.v3-hero-footer-inner {
   display: flex;
   align-items: center;
   gap: 36px;
   min-height: 82px
}

.v3-hero-footer-label {
   font-size: 10px;
   line-height: 1.5;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: #b3c0ba;
   font-weight: 800;
   white-space: nowrap
}

.v3-hero-footer-links {
   display: flex;
   align-items: stretch;
   flex: 1;
   gap: 0
}

.v3-hero-footer-links>a {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 29px 26px;
   border-left: 1px solid rgba(255, 255, 255, .12);
   color: var(--cream);
   font-size: 16px;
   font-weight: 800;
   white-space: nowrap
}

.v3-hero-footer-links>a:hover {
   color: var(--v3-orange);
   background: rgba(255, 255, 255, .04)
}

.v3-hero-footer-links>a>span {
   font-size: 10px;
   color: var(--v3-orange);
   font-weight: 800
}

.v3-hero-footer-links svg {
   width: 14px;
   height: 14px;
   margin-left: 4px
}

.v3-hero-scroll {
   display: flex;
   align-items: center;
   gap: 17px;
   color: #dce4de;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .02em;
   white-space: nowrap
}

.v3-hero-scroll:hover {
   color: #fff
}

.v3-scroll-arrow {
   display: grid;
   place-items: center;
   width: 35px;
   height: 35px;
   border: 1px solid rgba(255, 255, 255, .3);
   border-radius: 50%;
   font-size: 17px
}

/* A door-panel-inspired reveal. It runs once, then all content remains static. */
.v3-shutter {
   position: absolute;
   inset: 0;
   display: grid;
   grid-template-rows: repeat(4, 1fr);
   pointer-events: none
}

.v3-shutter span {
   background: #142220;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
   transform-origin: top;
   animation: v3-shutter-open 1s cubic-bezier(.76, 0, .24, 1) both
}

.v3-shutter span:nth-child(2) {
   animation-delay: .08s
}

.v3-shutter span:nth-child(3) {
   animation-delay: .16s
}

.v3-shutter span:nth-child(4) {
   animation-delay: .24s
}

@keyframes v3-shutter-open {
   from {
      transform: scaleY(1)
   }

   to {
      transform: scaleY(0)
   }
}

.v3-hero-content>* {
   animation: v3-content-in .8s ease both
}

.v3-hero-content>h1 {
   animation-delay: .2s
}

.v3-hero-content>.v3-hero-description {
   animation-delay: .34s
}

.v3-hero-content>.v3-hero-actions {
   animation-delay: .46s
}

@keyframes v3-content-in {
   from {
      opacity: 0;
      transform: translateY(17px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

/* One coordinated editorial gallery rather than disconnected rows and statistics. */
.v3-home .v3-services {
   background: var(--v3-cream);
   padding: 99px 0 0;
   color: var(--v3-ink)
}

.v3-services-intro {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(280px, .66fr);
   gap: 9%;
   align-items: end;
   margin-bottom: 43px
}

.v3-section-eyebrow {
   display: flex;
   align-items: center;
   gap: 13px;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: #a35f36;
   margin-bottom: 25px;
   line-height: 1.5
}

.v3-section-square {
   height: 9px;
   width: 9px;
   background: var(--v3-orange-strong);
   transform: rotate(45deg);
   flex: none
}

.v3-services-heading h2 {
   font-size: clamp(37px, 4.1vw, 60px);
   line-height: 1.08;
   letter-spacing: -.06em;
   font-weight: 800;
   max-width: 850px;
   color: var(--v3-ink);
   margin: 0
}

.v3-services-summary {
   padding-bottom: 6px
}

.v3-section-index {
   display: block;
   font-size: 11px;
   letter-spacing: .1em;
   font-weight: 800;
   color: var(--v3-ink);
   margin-bottom: 25px
}

.v3-section-index span {
   color: #ba764c;
   margin: 0 10px
}

.v3-services-summary p {
   font-size: 14px;
   line-height: 1.9;
   color: #596762;
   margin: 0;
   max-width: 415px
}

.v3-summary-rule {
   display: block;
   width: 65px;
   height: 2px;
   background: var(--v3-orange-strong);
   margin-top: 28px
}

.v3-services-gallery {
   display: grid;
   grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
   grid-template-rows: repeat(2, minmax(290px, 1fr));
   gap: 15px;
   min-height: 700px
}

.v3-service-card {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 315px;
   color: #fff;
   background: #273a36;
   transition: color .25s
}

.v3-service-card-1 {
   grid-row: 1/3
}

.v3-service-card>img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .7s cubic-bezier(.2, .7, .2, 1);
   z-index: -2
}

.v3-service-card:hover>img {
   transform: scale(1.035)
}

.v3-service-card-1>img {
   object-position: center
}

.v3-service-card-2>img {
   object-position: center 42%
}

.v3-service-card-3>img {
   object-position: center 46%
}

.v3-service-image-shade {
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(0deg, rgba(10, 22, 20, .97) 0%, rgba(10, 22, 20, .75) 32%, rgba(10, 22, 20, .12) 76%, rgba(10, 22, 20, .28) 100%)
}

.v3-card-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 29px 31px
}

.v3-card-number {
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .02em;
   color: #fff
}

.v3-card-number>span {
   font-size: 10px;
   color: rgba(255, 255, 255, .55);
   margin-left: 5px
}

.v3-card-arrow {
   display: grid;
   place-items: center;
   height: 42px;
   width: 42px;
   border: 1px solid rgba(255, 255, 255, .48);
   color: #fff;
   transition: background .25s, color .25s, border-color .25s
}

.v3-card-arrow svg {
   width: 18px;
   height: 18px
}

.v3-service-card:hover .v3-card-arrow {
   background: var(--v3-orange);
   border-color: var(--v3-orange);
   color: var(--v3-dark)
}

.v3-card-content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 0 34px 32px
}

.v3-card-title {
   font-family: var(--heading);
   font-size: clamp(28px, 3.3vw, 47px);
   line-height: 1.1;
   letter-spacing: -.05em;
   font-weight: 800;
   color: #fff;
   margin-bottom: 14px
}

.v3-card-description {
   font-size: 13px;
   line-height: 1.8;
   color: #d8dfda;
   max-width: 440px
}

.v3-card-link {
   display: flex;
   align-items: center;
   gap: 21px;
   margin-top: 22px;
   font-size: 11px;
   font-weight: 800;
   color: #f1b58e;
   border-bottom: 1px solid rgba(241, 181, 142, .55);
   padding-bottom: 9px
}

.v3-card-link svg {
   width: 16px;
   height: 16px
}

.v3-service-card-1 .v3-card-content {
   padding: 0 44px 43px
}

.v3-service-card-1 .v3-card-title {
   font-size: clamp(44px, 5vw, 70px)
}

.v3-service-card-1 .v3-card-description {
   max-width: 410px;
   font-size: 14px
}

.v3-service-card-1 .v3-card-top {
   padding: 38px 43px
}

.v3-proof {
   display: grid;
   grid-template-columns: minmax(0, .85fr) minmax(0, 2fr);
   gap: 50px;
   align-items: center;
   border-top: 1px solid #d7d5cb;
   margin-top: 52px;
   min-height: 155px;
   padding: 30px 0
}

.v3-proof-heading {
   display: flex;
   align-items: center;
   gap: 16px;
   font-size: 11px;
   line-height: 1.65;
   font-weight: 800;
   color: var(--v3-ink);
   max-width: 220px
}

.v3-proof-mark {
   font-size: 37px;
   line-height: 1;
   color: var(--v3-orange-strong);
   font-weight: 400
}

.v3-proof-values {
   display: grid;
   grid-template-columns: repeat(3, 1fr)
}

.v3-proof-item {
   display: flex;
   flex-direction: column;
   gap: 9px;
   border-left: 1px solid #d7d5cb;
   padding: 4px 10px 4px 27px
}

.v3-proof-item strong {
   font-family: var(--heading);
   font-size: clamp(27px, 2.6vw, 38px);
   font-weight: 800;
   line-height: 1;
   letter-spacing: -.055em;
   color: var(--v3-ink)
}

.v3-proof-item>span {
   font-size: 11px;
   line-height: 1.5;
   color: #68736e;
   font-weight: 600
}

@media(min-width:1600px) {
   .v3-home .v3-hero {
      min-height: 790px
   }

   .v3-hero-main {
      padding-top: 70px;
      padding-bottom: 80px
   }

   .v3-hero-content {
      max-width: 890px
   }

   .v3-hero h1 {
      font-size: 135px
   }
}

@media(max-width:1399px) {
   .v3-hero h1 {
      font-size: clamp(69px, 8.2vw, 112px)
   }

   .v3-hero-main {
      padding-top: 45px;
      padding-bottom: 50px
   }

   .v3-hero-footer-inner {
      gap: 20px
   }

   .v3-hero-footer-links>a {
      padding-left: 18px;
      padding-right: 18px
   }

   .v3-hero-scroll {
      display: none
   }

   .v3-home .v3-hero {
      min-height: 710px
   }
}

@media(max-width:1199px) {
   .v3-hero-coordinates {
      display: none
   }

   .v3-hero-footer-label {
      display: none
   }

   .v3-hero-footer-links>a:first-child {
      border-left: 0
   }

   .v3-hero-footer-links {
      justify-content: space-between
   }

   .v3-services-intro {
      gap: 5%;
      grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr)
   }

   .v3-services-gallery {
      min-height: 660px
   }

   .v3-card-content {
      padding: 0 27px 27px
   }

   .v3-service-card-1 .v3-card-content {
      padding: 0 34px 34px
   }

   .v3-service-card-1 .v3-card-top {
      padding: 29px 31px
   }
}

@media(max-width:991px) {
   .v3-home .v3-hero {
      min-height: 700px
   }

   .v3-hero h1 {
      font-size: clamp(66px, 10.4vw, 99px)
   }

   .v3-hero-content {
      max-width: 700px
   }

   .v3-hero-main {
      padding-top: 75px;
      padding-bottom: 75px
   }

   .v3-scene-shade {
      background: linear-gradient(90deg, rgba(12, 24, 22, .96), rgba(12, 24, 22, .79) 52%, rgba(12, 24, 22, .3)), linear-gradient(0deg, rgba(12, 24, 22, .4), transparent 45%)
   }

   .v3-services-intro {
      grid-template-columns: 1fr;
      gap: 26px
   }

   .v3-services-summary {
      display: flex;
      gap: 35px;
      align-items: start
   }

   .v3-section-index {
      flex: none;
      margin: 4px 0 0
   }

   .v3-services-summary p {
      max-width: 650px
   }

   .v3-summary-rule {
      display: none
   }

   .v3-services-gallery {
      grid-template-rows: repeat(2, minmax(300px, 1fr));
      min-height: 620px
   }

   .v3-service-card-1 .v3-card-title {
      font-size: 45px
   }

   .v3-card-title {
      font-size: 30px
   }

   .v3-proof {
      grid-template-columns: 1fr;
      gap: 24px
   }

   .v3-proof-heading {
      max-width: none
   }

   .v3-proof-values {
      margin-left: -27px
   }
}

@media(max-width:767px) {
   .v3-home .v3-hero {
      min-height: 0;
      min-height: calc(100svh - 109px)
   }

   .v3-hero-scene>img {
      object-position: 57% center
   }

   .v3-scene-shade {
      background: linear-gradient(90deg, rgba(12, 24, 22, .9), rgba(12, 24, 22, .52)), linear-gradient(0deg, rgba(12, 24, 22, .93), rgba(12, 24, 22, .1) 65%, rgba(12, 24, 22, .18))
   }

   .v3-hero-grid {
      grid-template-columns: 1fr 1fr
   }

   .v3-hero-grid span:nth-child(2) {
      display: none
   }

   .v3-hero-main {
      padding-top: 62px;
      padding-bottom: 58px;
      align-items: flex-start
   }

   .v3-hero h1 {
      font-size: clamp(58px, 11vw, 80px);
      letter-spacing: -.085em;
      margin-bottom: 25px
   }

   .v3-title-location {
      font-size: clamp(13px, 3.8vw, 19px);
      gap: 11px;
      letter-spacing: .1em;
      margin-top: 24px
   }

   .v3-title-location em {
      font-size: 10px;
      padding: 8px 10px
   }

   .v3-kicker {
      margin-bottom: 28px;
      font-size: 9px;
      gap: 11px
   }

   .v3-kicker-rule {
      width: 25px
   }

   .v3-kicker-index {
      margin-left: 4px
   }

   .v3-hero-description {
      font-size: 13px;
      line-height: 1.85;
      max-width: 480px;
      margin-bottom: 26px
   }

   .v3-hero-actions {
      gap: 16px
   }

   .v3-primary-action {
      min-height: 54px;
      font-size: 12px;
      padding-left: 19px
   }

   .v3-action-icon {
      height: 54px;
      width: 54px
   }

   .v3-secondary-action {
      font-size: 11px;
      padding: 11px 0
   }

   .v3-hero-footer-inner {
      padding-left: 0;
      padding-right: 0;
      min-height: 0
   }

   .v3-hero-footer-links>a {
      flex: 1;
      justify-content: center;
      gap: 7px;
      padding: 19px 8px;
      font-size: 11px
   }

   .v3-hero-footer-links>a>span {
      font-size: 9px
   }

   .v3-hero-footer-links svg {
      display: none
   }

   .v3-home .v3-services {
      padding-top: 69px
   }

   .v3-section-eyebrow {
      font-size: 10px;
      margin-bottom: 20px
   }

   .v3-services-heading h2 {
      font-size: clamp(33px, 7.7vw, 47px);
      line-height: 1.12
   }

   .v3-services-summary {
      display: block
   }

   .v3-section-index {
      margin: 0 0 16px
   }

   .v3-services-summary p {
      font-size: 13px
   }

   .v3-services-intro {
      margin-bottom: 30px
   }

   .v3-services-gallery {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: 12px;
      min-height: 0
   }

   .v3-service-card,
   .v3-service-card-1 {
      grid-row: auto;
      min-height: 360px
   }

   .v3-service-card-1 {
      min-height: 440px
   }

   .v3-card-content,
   .v3-service-card-1 .v3-card-content {
      padding: 0 26px 28px
   }

   .v3-card-top,
   .v3-service-card-1 .v3-card-top {
      padding: 25px 26px
   }

   .v3-card-title,
   .v3-service-card-1 .v3-card-title {
      font-size: clamp(32px, 8vw, 45px)
   }

   .v3-card-description,
   .v3-service-card-1 .v3-card-description {
      font-size: 13px;
      line-height: 1.7
   }

   .v3-proof {
      margin-top: 39px;
      gap: 25px;
      min-height: 0;
      padding: 27px 0
   }

   .v3-proof-values {
      margin-left: 0
   }

   .v3-proof-item {
      padding-left: 14px;
      padding-right: 5px
   }

   .v3-proof-item:first-child {
      border-left: 0;
      padding-left: 0
   }

   .v3-proof-item strong {
      font-size: clamp(23px, 5.8vw, 32px)
   }

   .v3-proof-item>span {
      font-size: 10px
   }
}

@media(max-width:420px) {
   .v3-hero-main {
      padding-top: 48px;
      padding-bottom: 46px
   }

   .v3-hero h1 {
      font-size: clamp(52px, 12.6vw, 58px)
   }

   .v3-title-outline {
      -webkit-text-stroke: 1.2px rgba(255, 255, 255, .95)
   }

   .v3-hero-description {
      font-size: 12.5px
   }

   .v3-hero-actions {
      align-items: stretch;
      flex-direction: column;
      gap: 9px
   }

   .v3-primary-action {
      align-self: flex-start
   }

   .v3-secondary-action {
      align-self: flex-start
   }

   .v3-hero-footer-links>a {
      font-size: 10px;
      padding: 17px 5px
   }

   .v3-hero-footer-links>a>span {
      font-size: 8px
   }

   .v3-home .v3-hero {
      min-height: 0
   }

   .v3-service-card-1 {
      min-height: 410px
   }

   .v3-service-card {
      min-height: 335px
   }

   .v3-card-content,
   .v3-service-card-1 .v3-card-content {
      padding: 0 22px 25px
   }

   .v3-card-top,
   .v3-service-card-1 .v3-card-top {
      padding: 22px
   }

   .v3-proof-item {
      padding-left: 10px
   }

   .v3-proof-item strong {
      font-size: 25px
   }

   .v3-proof-item>span {
      font-size: 9px
   }
}

@media(prefers-reduced-motion:reduce) {
   .v3-shutter {
      display: none
   }

   .v3-hero-content>* {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important
   }

   .v3-service-card>img {
      transition: none
   }
}

/* Keep every image above the card background, including when reveal finishes. */
.v3-service-card>img {
   z-index: 0
}

.v3-service-image-shade {
   z-index: 1
}

.v3-card-top,
.v3-card-content {
   position: relative;
   z-index: 2
}