@font-face { font-family: Prompt; src: url('/assets/fonts/Prompt-Regular.42c650e2f7.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Prompt; src: url('/assets/fonts/Prompt-Medium.973487356c.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Prompt; src: url('/assets/fonts/Prompt-SemiBold.5d267aa6b9.woff2') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; } :root { color-scheme: light; --navy: #102b40; --navy-dark: #08253b; --teal: #087f8c; --teal-dark: #086c78; --copper: #c76e3c; --sky: #d9ecf4; --mist: #f5f8fa; --paper: #ffffff; --ink-soft: #496277; --ink-muted: #698093; --line: #cddce3; --line-blue: #a3c8d8; --shadow: 0 16px 50px rgba(11, 45, 62, .08); --wrap: 1376px; --side: clamp(22px, 4vw, 62px); --section-space: clamp(88px, 10vw, 154px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; background: var(--mist); color: var(--navy); font-family: Prompt, system-ui, sans-serif; font-size: 16px; line-height: 1.65; } body.no-scroll { overflow: hidden; } img, svg { display: block; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; } ::selection { background: var(--teal); color: white; } [hidden] { display: none !important; } .wrap { width: min(calc(100% - var(--side) * 2), var(--wrap)); margin-inline: auto; } .icon { flex: none; } .skip-link { position: absolute; z-index: 1000; top: -100px; left: 12px; background: var(--navy); color: white; padding: 10px 16px; } .skip-link:focus { top: 12px; } .kicker { margin: 0 0 14px; color: var(--teal); font-size: 13px; font-weight: 600; letter-spacing: .04em; } h1, h2, h3, p { overflow-wrap: break-word; } h1, h2, h3 { line-height: 1.18; } h2 { font-size: clamp(40px, 5vw, 78px); font-weight: 600; letter-spacing: -.04em; margin: 0; } h2 em, h1 em { color: var(--teal); font-style: normal; } .section { padding-block: var(--section-space); position: relative; } .section-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); align-items: end; gap: clamp(30px, 5vw, 100px); margin-bottom: clamp(36px, 4.5vw, 70px); } .section-heading > p { color: var(--ink-soft); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.85; max-width: 480px; margin: 0 0 8px auto; } .section-eyebrow { display: flex; align-items: center; gap: 16px; color: var(--teal); margin-bottom: clamp(26px, 3vw, 50px); white-space: nowrap; } .section-eyebrow__number { font-size: 23px; font-weight: 600; line-height: 1; } .section-eyebrow__line { width: clamp(68px, 10vw, 170px); height: 1px; background: var(--line-blue); } .section-eyebrow__text { font-size: 10px; letter-spacing: .28em; color: var(--navy); } .button { min-height: 64px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 25px; border: 1px solid transparent; font-size: 16px; font-weight: 600; line-height: 1.3; transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; } .button:hover { transform: translateY(-2px); } .button .icon { width: 25px; height: 25px; transition: transform .22s ease; } .button:hover .icon { transform: translateX(4px); } .button--primary { background: var(--teal); color: white; border-color: var(--teal); } .button--primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); } .button--outline { background: transparent; color: var(--navy); border-color: var(--navy); } .button--outline:hover { background: var(--navy); color: white; } .button--text { min-height: 45px; padding: 0; color: var(--teal); border-bottom: 1px solid var(--teal); } .button--light { background: white; color: var(--navy); } .button--outline-light { background: transparent; color: white; border-color: rgba(255,255,255,.7); } .button--outline-light:hover { background: white; color: var(--navy); } .blueprint { background-color: var(--mist); background-image: linear-gradient(to right, rgba(75,151,181,.052) 1px, transparent 1px), linear-gradient(to bottom, rgba(75,151,181,.052) 1px, transparent 1px); background-size: 96px 96px; } .technical-frame { position: relative; } .technical-frame::before, .technical-frame::after { content: ''; position: absolute; z-index: 2; width: 28px; height: 28px; pointer-events: none; } .technical-frame::before { top: -11px; left: -11px; border-left: 1px solid #9ecfe2; border-top: 1px solid #9ecfe2; } .technical-frame::after { right: -11px; bottom: -11px; border-right: 1px solid #9ecfe2; border-bottom: 1px solid #9ecfe2; } .site-header { position: relative; z-index: 40; background: rgba(250,252,253,.96); border-bottom: 1px solid #dce6eb; } .site-header__inner { min-height: 92px; display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); } .brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; } .desktop-nav { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 33px); margin-left: auto; white-space: nowrap; } .desktop-nav a { font-size: 13px; font-weight: 500; padding: 12px 0; transition: color .2s ease; } .desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--teal); } .header-call { display: flex; align-items: center; gap: 9px; min-height: 47px; padding: 0 15px; background: var(--navy); color: white; white-space: nowrap; font-size: 12px; } .header-call .icon { width: 16px; height: 16px; color: #82d0d7; } .header-call strong { font-size: 13px; font-weight: 600; } .menu-toggle { display: none; border: 1px solid var(--line); background: white; width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer; } .mobile-menu { position: absolute; top: 100%; left: 0; right: 0; background: white; box-shadow: var(--shadow); padding: 14px var(--side) 25px; } .mobile-menu a { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line); font-weight: 500; } .mobile-menu a .icon { width: 17px; } .mobile-menu__call { color: var(--teal); } .hero { overflow: hidden; } .hero__grid { display: grid; grid-template-columns: minmax(0, .47fr) minmax(0, .53fr); gap: clamp(28px, 3.4vw, 56px); padding-top: clamp(52px, 6vw, 92px); padding-bottom: 44px; } .hero__copy { display: flex; flex-direction: column; min-width: 0; } .hero__intro { display: flex; align-items: center; gap: 17px; color: var(--teal); font-size: 12px; font-weight: 600; letter-spacing: .13em; } .hero__intro-line { height: 1px; background: #a3c8d8; flex: 1; } .hero__pretitle { margin: 7px 0 clamp(30px, 4vw, 57px); color: var(--ink-soft); font-size: 17px; } .hero h1 { font-size: clamp(55px, 5.8vw, 91px); letter-spacing: -.068em; font-weight: 600; line-height: 1.05; margin: 0; white-space: nowrap; } .hero h1 > span { display: block; } .hero__highlight { color: var(--teal); } .hero__dot { color: var(--copper); } .hero__signature { margin: 17px 0 0; font-size: clamp(27px, 2.7vw, 42px); font-weight: 600; letter-spacing: -.05em; } .hero__description { color: var(--ink-soft); font-size: clamp(16px, 1.36vw, 21px); line-height: 1.75; max-width: 580px; margin: 8px 0 0; } .hero__actions { display: flex; align-items: stretch; gap: 14px; margin-top: clamp(30px, 3.3vw, 52px); } .hero__actions .button:first-child { min-width: 245px; } .hero__actions .button:nth-child(2) { min-width: 190px; } .hero__micro { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 45px; color: var(--navy); font-size: 10px; letter-spacing: .26em; white-space: nowrap; } .hero__micro i { height: 1px; width: 75px; background: var(--navy); } .hero__media { min-width: 0; } .hero__media-heading { display: flex; align-items: center; gap: 15px; height: 27px; margin-bottom: 11px; } .hero__media-heading strong { color: var(--teal); font-size: 24px; line-height: 1; } .hero__media-heading span { width: 95px; height: 1px; background: var(--line-blue); } .hero__media-heading small { margin-left: auto; letter-spacing: .22em; font-size: 8px; } .hero__image-frame { height: clamp(550px, 56vw, 790px); border: 1px solid #a5d1e4; padding: 7px; } .hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; } .hero__image-caption { position: absolute; bottom: 7px; right: 7px; z-index: 2; background: rgba(255,255,255,.94); color: var(--navy); font-size: 9px; letter-spacing: .22em; padding: 12px 19px; } .hero__service-band { background: #e7f1f5; border-top: 1px solid #d4e6ee; } .hero__service-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .hero__service-grid a { min-height: 130px; display: flex; align-items: center; gap: 20px; padding: 20px clamp(10px, 2vw, 28px); } .hero__service-grid a + a { border-left: 1px solid #bdd9e5; } .hero__service-grid .icon { width: 42px; height: 42px; color: var(--teal); stroke-width: 1.5; } .hero__service-grid strong, .hero__service-grid small { display: block; } .hero__service-grid strong { font-size: 19px; line-height: 1.3; } .hero__service-grid small { font-size: 13px; color: var(--ink-soft); margin-top: 3px; } .services-section { background: #f8fbfc; } .services-section__heading { margin-bottom: 54px; } .service-cards { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, .84fr) minmax(0, .84fr); gap: 18px; min-height: 680px; } .service-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: white; min-width: 0; border: 1px solid #e1e9ee; transition: transform .24s ease, box-shadow .24s ease; } .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .service-card__top { z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 28px 0; } .service-card__top small { color: var(--teal); font-size: 10px; letter-spacing: .12em; } .service-card__top strong { font-size: 19px; } .service-card__bottom { z-index: 2; display: flex; flex-direction: column; padding: 24px 28px 27px; margin-top: auto; } .service-card__bottom > strong { font-size: clamp(24px, 2.5vw, 37px); line-height: 1.24; font-weight: 600; letter-spacing: -.04em; } .service-card__bottom > small { display: block; color: var(--ink-soft); line-height: 1.7; font-size: 14px; margin-top: 12px; } .service-card__link { display: flex; align-items: center; justify-content: space-between; color: var(--teal); border-top: 1px solid var(--line); margin-top: 25px; padding-top: 16px; font-weight: 600; font-size: 14px; } .service-card__link .icon { width: 21px; } .service-card--featured { color: white; border: 0; } .service-card--featured > .service-card__image { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } .service-card__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,38,56,.95) 0%, rgba(7,44,61,.77) 42%, rgba(5,38,56,.12) 100%); } .service-card--featured .service-card__top { padding: 34px 38px 0; } .service-card--featured .service-card__top small, .service-card--featured .service-card__link { color: white; } .service-card--featured .service-card__bottom { padding: 0 38px 38px; max-width: 430px; margin-top: auto; } .service-card--featured .service-card__bottom > strong { font-size: clamp(38px, 4vw, 61px); } .service-card--featured .service-card__bottom > small { color: #e4eef2; font-size: 16px; } .service-card--featured .service-card__link { margin-top: 40px; background: var(--teal); border: 0; padding: 16px 20px; } .service-card__small-photo { margin-top: auto; height: 49%; overflow: hidden; } .service-card__small-photo img { width: 100%; height: 100%; object-fit: cover; } .service-card--minor .service-card__bottom { margin-top: 0; min-height: 225px; } .process-section { background: #eff5f7; } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #bed3dd; border-bottom: 1px solid #bed3dd; } .process-step { padding: 28px 28px 36px; min-height: 294px; } .process-step + .process-step { border-left: 1px solid #bed3dd; } .process-step__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .process-step__top span { font-size: clamp(58px, 6vw, 94px); line-height: 1; font-weight: 600; letter-spacing: -.08em; color: var(--teal); } .process-step:nth-child(even) .process-step__top span { color: var(--copper); } .process-step__top .icon { width: 39px; height: 39px; color: var(--teal); } .process-step h3 { font-size: clamp(20px, 1.9vw, 27px); margin: 0 0 8px; } .process-step p { color: var(--ink-soft); margin: 0; font-size: 14px; } .process-photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; position: relative; } .process-photo-strip > div { height: 240px; overflow: hidden; } .process-photo-strip img { width: 100%; height: 100%; object-fit: cover; } .process-photo-strip > span { position: absolute; bottom: 0; right: 0; padding: 11px 16px; background: rgba(255,255,255,.93); letter-spacing: .12em; font-size: 10px; } .work-section { background: #f8fbfc; } .filter { display: flex; align-items: center; gap: 6px; overflow-x: auto; max-width: 100%; padding-bottom: 8px; scrollbar-width: thin; margin-bottom: 26px; } .filter__button { appearance: none; flex: none; background: transparent; border: 1px solid #b9d0da; color: var(--ink-soft); padding: 12px 25px; min-height: 47px; cursor: pointer; font-size: 13px; font-weight: 500; } .filter__button:hover { color: var(--navy); border-color: var(--navy); } .filter__button.is-active { background: var(--navy); border-color: var(--navy); color: white; } .work-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(2, 285px); gap: 16px; } .gallery-tile { appearance: none; padding: 0; border: 0; color: white; background: var(--navy); text-align: left; cursor: zoom-in; position: relative; overflow: hidden; min-width: 0; width: 100%; } .gallery-tile[hidden] { display: none; } .gallery-tile--feature { grid-row: span 2; } .gallery-tile__image { position: absolute; inset: 0; } .gallery-tile__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .gallery-tile:hover .gallery-tile__image img { transform: scale(1.045); } .gallery-tile__caption { position: absolute; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 16px; padding: 19px 24px; background: rgba(11,42,59,.93); } .gallery-tile__caption small { grid-column: 1; font-size: 9px; color: #a6cbd7; letter-spacing: .17em; } .gallery-tile__caption strong { grid-column: 1; font-size: 21px; font-weight: 600; line-height: 1.3; } .gallery-tile__caption .icon { grid-column: 2; grid-row: 1 / 3; color: #a7d3dc; } .section-end { display: flex; align-items: center; justify-content: space-between; margin-top: 29px; gap: 20px; } .section-end > span { font-size: 10px; letter-spacing: .2em; color: var(--ink-muted); } .specs-section { background: #eaf2f5; } .specs-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); gap: clamp(40px, 6vw, 93px); align-items: center; } .specs-section__left h2 { font-size: clamp(40px, 4.5vw, 69px); } .specs-section__intro { max-width: 640px; color: var(--ink-soft); font-size: 18px; line-height: 1.8; margin: 22px 0 34px; } .spec-table-wrap { overflow-x: auto; background: white; border: 1px solid #cbdae0; } .spec-table { width: 100%; min-width: 530px; border-collapse: collapse; text-align: left; font-size: 14px; } .spec-table thead { background: var(--teal); color: white; } .spec-table th, .spec-table td { padding: 18px 20px; border-bottom: 1px solid #dce7eb; font-weight: 400; } .spec-table tbody th { font-weight: 600; color: var(--navy); } .spec-table tbody tr:nth-child(even) { background: #f4f8fa; } .specs-section__note { color: var(--ink-muted); font-size: 12px; margin: 13px 0 25px; max-width: 600px; } .specs-section__visual { height: 630px; border: 1px solid var(--line-blue); padding: 7px; } .specs-section__visual img { width: 100%; height: 100%; object-fit: cover; } .specs-section__visual > span { position: absolute; bottom: 7px; right: 7px; background: white; font-size: 9px; letter-spacing: .18em; padding: 11px 16px; } .guides-section { background: #f9fbfc; } .article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .article-card { min-width: 0; background: white; border: 1px solid #d8e5ea; display: flex; flex-direction: column; } .article-card__image { display: block; height: 260px; overflow: hidden; } .article-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .article-card:hover .article-card__image img { transform: scale(1.04); } .article-card__body { padding: 29px 28px 25px; display: flex; flex: 1; flex-direction: column; } .article-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .article-card__meta span { background: #e3f2f5; color: var(--teal); padding: 6px 10px; font-size: 11px; font-weight: 600; } .article-card__meta small { color: var(--ink-muted); font-size: 9px; letter-spacing: .14em; } .article-card h3 { font-size: clamp(21px, 2vw, 30px); line-height: 1.36; letter-spacing: -.025em; margin: 24px 0 11px; } .article-card p { color: var(--ink-soft); font-size: 14px; margin: 0 0 30px; } .article-card__link { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; margin-top: auto; color: var(--teal); font-weight: 600; font-size: 14px; } .article-card__link .icon { width: 20px; } .faq-section { background: #edf4f6; } .faq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(46px, 7vw, 110px); align-items: start; } .faq-section__left h2 { font-size: clamp(55px, 6vw, 89px); } .faq-section__left > p:not(.kicker) { color: var(--ink-soft); max-width: 460px; font-size: 17px; } .faq-section__image { height: 350px; margin: 40px 18px 0 0; border: 1px solid var(--line-blue); padding: 7px; } .faq-section__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; } .faq-section__image > span { position: absolute; bottom: 7px; right: 7px; background: rgba(255,255,255,.95); font-size: 9px; letter-spacing: .14em; padding: 9px 13px; } .faq-list { border-top: 1px solid #afc8d3; margin-top: clamp(57px, 8vw, 123px); } .faq-item { border-bottom: 1px solid #afc8d3; } .faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px 1fr 26px; align-items: center; gap: 18px; min-height: 102px; padding: 20px 4px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item__number { color: var(--teal); font-size: 15px; } .faq-item__toggle { width: 18px; height: 18px; position: relative; } .faq-item__toggle::before, .faq-item__toggle::after { content: ''; position: absolute; top: 8px; left: 2px; width: 15px; height: 2px; background: var(--teal); } .faq-item__toggle::after { transform: rotate(90deg); transition: transform .2s ease; } .faq-item[open] .faq-item__toggle::after { transform: rotate(0); } .faq-item__answer { padding: 0 45px 23px 66px; color: var(--ink-soft); font-size: 15px; } .faq-item__answer p { margin: 0; } .contact-section { background: #f8fbfc; } .contact-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .75fr) minmax(0, .93fr); gap: 22px; align-items: stretch; } .contact-section__intro { padding: 10px 16px 0 0; } .contact-section__intro h2 { font-size: clamp(47px, 5.3vw, 81px); } .contact-section__intro > p:not(.kicker) { color: var(--ink-soft); font-size: 16px; max-width: 430px; margin: 22px 0 33px; } .contact-card { display: flex; align-items: center; gap: 15px; min-height: 88px; border: 1px solid #cfdee5; background: white; padding: 13px 18px; margin-top: 11px; transition: border-color .2s ease, transform .2s ease; } .contact-card:hover { border-color: var(--teal); transform: translateX(3px); } .contact-card > .icon:first-child { color: var(--teal); width: 25px; height: 25px; } .contact-card > .icon:last-child { width: 18px; margin-left: auto; } .contact-card small, .contact-card strong { display: block; } .contact-card small { font-size: 11px; color: var(--ink-muted); } .contact-card strong { font-size: 17px; line-height: 1.3; } .contact-section__photo { min-height: 590px; border: 1px solid var(--line-blue); padding: 7px; } .contact-section__photo img { width: 100%; height: 100%; object-fit: cover; } .contact-section__photo > span { position: absolute; bottom: 7px; left: 7px; right: 7px; background: rgba(255,255,255,.93); text-align: center; padding: 10px; font-size: 9px; letter-spacing: .18em; } .contact-panel { background: white; border: 1px solid #d4e2e8; padding: clamp(27px, 3vw, 45px); display: flex; flex-direction: column; } .contact-panel__number { color: var(--teal); font-size: 10px; letter-spacing: .2em; } .contact-panel h3 { font-size: clamp(26px, 2.65vw, 40px); line-height: 1.25; margin: 24px 0 8px; } .contact-panel > p { color: var(--ink-soft); font-size: 14px; margin: 0 0 24px; } .contact-panel ol { padding: 0; margin: 0 0 25px; list-style: none; } .contact-panel li { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); } .contact-panel li > span { color: var(--teal); font-size: 17px; font-weight: 600; } .contact-panel li strong, .contact-panel li small { display: block; } .contact-panel li strong { font-size: 14px; } .contact-panel li small { color: var(--ink-soft); font-size: 12px; } .contact-panel .button { margin-top: auto; font-size: 14px; padding-inline: 17px; } .site-footer { background: var(--navy-dark); color: white; padding-top: 82px; } .site-footer__grid { display: grid; grid-template-columns: 1.6fr .8fr .8fr 1fr; gap: clamp(30px, 5vw, 80px); padding-bottom: 83px; } .site-footer__about p { color: #afc6d1; font-size: 14px; line-height: 1.85; margin: 24px 0 0; } .site-footer h2 { font-size: 16px; letter-spacing: 0; margin: 7px 0 22px; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li + li { margin-top: 10px; } .site-footer li a, .site-footer__grid > div > a:not(.brand) { font-size: 13px; color: #c4d6dd; } .site-footer a:hover { color: #7bd6db !important; } .site-footer__phone { display: block; font-size: 23px !important; font-weight: 600; color: white !important; margin-bottom: 15px; } .site-footer__note { font-size: 12px; color: #9cb6c3; margin-top: 21px; } .site-footer__bottom { display: flex; align-items: center; gap: 25px; border-top: 1px solid #345061; min-height: 63px; color: #8fafbd; font-size: 11px; } .site-footer__bottom a { margin-left: auto; } .lightbox { position: fixed; z-index: 100; inset: 0; background: rgba(1,16,26,.94); display: grid; place-items: center; padding: 36px; } .lightbox figure { max-width: min(90vw, 1300px); max-height: 90vh; margin: 0; display: flex; align-items: center; flex-direction: column; } .lightbox img { max-height: calc(90vh - 55px); max-width: 100%; object-fit: contain; } .lightbox figcaption { text-align: center; color: white; padding-top: 13px; font-size: 13px; } .lightbox__close { position: absolute; top: 17px; right: 21px; background: white; color: var(--navy); width: 44px; height: 44px; display: grid; place-items: center; border: 0; cursor: pointer; } .inner-hero { overflow: hidden; padding-block: clamp(63px, 7vw, 109px); } .inner-hero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(43px, 7vw, 110px); align-items: center; } .inner-hero__copy h1 { font-size: clamp(55px, 5.5vw, 86px); letter-spacing: -.055em; font-weight: 600; margin: 0; } .inner-hero__copy > p:not(.kicker) { max-width: 600px; color: var(--ink-soft); font-size: 17px; line-height: 1.8; margin: 25px 0 0; } .inner-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 33px; } .inner-hero__image { height: clamp(460px, 43vw, 630px); padding: 7px; border: 1px solid var(--line-blue); } .inner-hero__image img { width: 100%; height: 100%; object-fit: cover; } .inner-hero__image > span { position: absolute; bottom: 7px; right: 7px; padding: 10px 14px; background: rgba(255,255,255,.94); font-size: 9px; letter-spacing: .15em; } .detail-section { background: #fff; } .detail-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(45px, 10vw, 170px); } .detail-section__intro h2 { font-size: clamp(40px, 4.5vw, 69px); } .detail-section__intro > p:last-child { font-size: 17px; color: var(--ink-soft); line-height: 1.85; } .detail-list { border-top: 1px solid var(--line-blue); margin-top: 60px; } .detail-list > div { display: flex; gap: 20px; align-items: center; border-bottom: 1px solid var(--line-blue); padding: 20px 10px; } .detail-list span { color: var(--teal); font-size: 26px; font-weight: 600; } .detail-list p { font-size: 18px; margin: 0; } .prep-section { background: #eaf2f5; } .prep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(45px, 7vw, 110px); align-items: center; } .prep-section__photo { height: 620px; padding: 7px; border: 1px solid var(--line-blue); } .prep-section__photo img { width: 100%; height: 100%; object-fit: cover; } .prep-section__photo > span { position: absolute; right: 7px; bottom: 7px; background: white; padding: 9px 13px; font-size: 9px; letter-spacing: .13em; } .prep-section__copy h2 { font-size: clamp(40px, 4.5vw, 66px); } .prep-section__copy > p { color: var(--ink-soft); font-size: 17px; max-width: 550px; } .check-list { margin: 28px 0 34px; padding: 0; list-style: none; border-top: 1px solid var(--line-blue); } .check-list li { display: flex; align-items: center; gap: 14px; min-height: 62px; border-bottom: 1px solid var(--line-blue); } .check-list .icon { color: var(--teal); width: 22px; } .related-section { background: white; } .related-section h2, .related-articles h2 { font-size: clamp(40px, 4vw, 62px); margin-bottom: 34px; } .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .related-grid a { position: relative; height: 380px; overflow: hidden; color: white; } .related-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .related-grid a:hover img { transform: scale(1.045); } .related-grid a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 15%, rgba(5,30,45,.82)); } .related-grid a > span { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: 27px; display: flex; flex-direction: column; } .related-grid small { font-size: 10px; letter-spacing: .14em; } .related-grid strong { font-size: 31px; line-height: 1.2; margin-top: 7px; } .related-grid .icon { align-self: flex-end; } .cta-panel { background: var(--navy); color: white; padding-block: clamp(50px, 6vw, 87px); } .cta-panel__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; } .cta-panel .kicker { color: #78cbd5; } .cta-panel h2 { font-size: clamp(39px, 4.4vw, 67px); } .cta-panel p:not(.kicker) { color: #c5d7e0; max-width: 620px; margin-bottom: 0; } .cta-panel__inner > div:last-child { display: flex; gap: 12px; flex-wrap: wrap; } .work-page, .guides-page { background: white; } .work-page__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 350px; gap: 16px; } .work-page__grid .gallery-tile:first-child { grid-column: span 2; grid-row: span 2; } .work-page__grid .gallery-tile:nth-child(6) { grid-column: span 2; } .article-page__header { padding-block: 70px 90px; } .article-page__header-inner { max-width: 1060px; } .back-link { display: inline-block; font-size: 13px; color: var(--teal); margin-bottom: 45px; } .article-page__header h1 { font-size: clamp(47px, 5.6vw, 84px); letter-spacing: -.055em; max-width: 950px; margin: 0; } .article-page__header p:last-child { color: var(--ink-soft); max-width: 750px; font-size: 19px; } .article-page__body { padding-bottom: var(--section-space); } .article-page__lead-image { height: clamp(390px, 45vw, 690px); padding: 7px; border: 1px solid var(--line-blue); margin: -1px 0 0; } .article-page__lead-image img { width: 100%; height: 100%; object-fit: cover; } .article-page__lead-image figcaption { position: absolute; bottom: 7px; right: 7px; background: white; padding: 9px 13px; font-size: 10px; } .article-page__content { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: clamp(40px, 8vw, 120px); padding-top: 75px; } .article-page__prose { max-width: 790px; } .article-page__prose p { font-size: 18px; line-height: 2.1; margin: 0 0 25px; color: #314f64; } .article-page__prose .article-page__disclaimer { color: var(--ink-muted); font-size: 14px; padding: 18px 20px; border-left: 3px solid var(--teal); background: white; margin-top: 36px; } .article-page__aside { align-self: start; background: white; padding: 28px; border: 1px solid var(--line); } .article-page__aside > span { color: var(--teal); letter-spacing: .12em; font-size: 10px; } .article-page__aside h2 { font-size: 25px; letter-spacing: 0; margin: 12px 0 22px; } .article-page__aside ul { padding: 0; margin: 0 0 28px; list-style: none; } .article-page__aside li { display: flex; align-items: flex-start; gap: 11px; border-top: 1px solid var(--line); padding: 13px 0; font-size: 13px; } .article-page__aside li .icon { width: 18px; height: 18px; color: var(--teal); } .article-page__aside .button { width: 100%; font-size: 13px; min-height: 54px; padding: 0 15px; } .related-articles { background: #eaf2f5; } .article-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-extra { background: white; } .contact-extra__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); } .contact-extra h2 { font-size: clamp(40px, 4vw, 63px); } .contact-extra p { color: var(--ink-soft); max-width: 520px; } .contact-extra ol { margin: 45px 0 0; padding: 0; list-style: none; } .contact-extra li { border-top: 1px solid var(--line); padding: 15px 0; display: flex; flex-direction: column; gap: 5px; } .contact-extra li strong { color: var(--teal); } .contact-extra li span { color: var(--ink-soft); font-size: 14px; } @media (max-width: 1280px) { .desktop-nav { gap: 16px; } .desktop-nav a { font-size: 12px; } .header-call span { display: none; } .hero h1 { font-size: clamp(50px, 5.8vw, 75px); } .hero__actions { flex-wrap: wrap; } .hero__actions .button { min-width: 0 !important; } .hero__service-grid strong { font-size: 16px; } .service-cards { min-height: 600px; } } @media (max-width: 1100px) { .desktop-nav, .header-call { display: none; } .menu-toggle { display: flex; margin-left: auto; } .site-header__inner { min-height: 76px; } .hero__grid { grid-template-columns: .49fr .51fr; gap: 27px; } .hero h1 { font-size: clamp(45px, 5.5vw, 60px); } .hero__image-frame { height: 650px; } .hero__description { font-size: 16px; } .hero__actions .button { min-height: 55px; font-size: 13px; padding-inline: 15px; } .service-cards { grid-template-columns: 1.2fr 1fr; min-height: 0; } .service-card--featured { grid-row: span 2; } .service-card--minor { min-height: 350px; } .service-card__small-photo { height: 43%; } .service-card--minor .service-card__bottom { min-height: 0; } .process-step { padding-inline: 17px; } .process-step p { font-size: 13px; } .contact-grid { grid-template-columns: 1fr 1fr; } .contact-section__intro { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; align-items: end; } .contact-section__intro .kicker, .contact-section__intro h2, .contact-section__intro > p { grid-column: 1; } .contact-section__intro .contact-card { grid-column: 2; } .contact-section__intro .contact-card:first-of-type { grid-row: 2; } .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } .site-footer__grid > div:last-child { grid-column: 1 / -1; } } @media (max-width: 820px) { :root { --section-space: 80px; --side: 25px; } .section-heading { grid-template-columns: 1fr; gap: 15px; } .section-heading > p { margin: 0; } .hero__grid, .inner-hero__grid, .specs-grid, .faq-grid, .detail-grid, .prep-grid, .contact-extra__grid { grid-template-columns: 1fr; } .hero__grid { padding-top: 58px; } .hero__pretitle { margin-bottom: 25px; } .hero h1 { font-size: clamp(54px, 9vw, 77px); } .hero__image-frame { height: 600px; } .hero__micro { padding-top: 33px; } .hero__service-grid { grid-template-columns: 1fr; } .hero__service-grid a { min-height: 91px; } .hero__service-grid a + a { border-left: 0; border-top: 1px solid #bdd9e5; } .service-cards { grid-template-columns: 1fr 1fr; } .service-card--featured { grid-column: span 2; grid-row: auto; min-height: 560px; } .service-card--minor { min-height: 430px; } .process-steps { grid-template-columns: repeat(2, 1fr); } .process-step:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); } .process-step:nth-child(4) { border-top: 1px solid var(--line); } .process-photo-strip > div { height: 180px; } .specs-section__visual { height: 540px; max-width: 620px; } .article-grid { grid-template-columns: repeat(2, 1fr); } .article-card:last-child { grid-column: span 2; } .faq-list { margin-top: 0; } .faq-section__image { max-width: 550px; } .inner-hero__image { height: 540px; } .detail-list { margin-top: 0; } .prep-section__photo { height: 540px; } .work-page__grid { grid-template-columns: repeat(2, 1fr); } .work-page__grid .gallery-tile:first-child { grid-column: span 2; grid-row: auto; } .work-page__grid .gallery-tile:nth-child(6) { grid-column: auto; } .article-page__content { grid-template-columns: 1fr; } .article-page__aside { max-width: 580px; } } @media (max-width: 620px) { :root { --side: 19px; --section-space: 68px; } html { scroll-padding-top: 68px; } body { font-size: 14px; } h2 { font-size: clamp(37px, 9.6vw, 55px); } .site-header__inner { min-height: 69px; } .menu-toggle { width: 43px; height: 43px; } .section-eyebrow { margin-bottom: 28px; } .section-eyebrow__number { font-size: 19px; } .section-eyebrow__text { font-size: 9px; letter-spacing: .18em; } .button { min-height: 55px; padding: 0 17px; font-size: 13px; } .button .icon { width: 20px; } .section-heading { margin-bottom: 30px; } .section-heading > p { font-size: 14px; } .hero__grid { gap: 34px; padding-top: 42px; padding-bottom: 25px; } .hero__pretitle { font-size: 14px; margin-bottom: 28px; } .hero h1 { font-size: clamp(43px, 10.1vw, 62px); } .hero__signature { font-size: 27px; margin-top: 13px; } .hero__description { font-size: 14px; margin-top: 8px; } .hero__actions { gap: 9px; margin-top: 27px; } .hero__actions .button { min-width: 0; flex: 1 1 135px; } .hero__micro { font-size: 8px; letter-spacing: .15em; padding-top: 35px; } .hero__micro i { width: 34px; } .hero__media-heading small { font-size: 7px; letter-spacing: .1em; } .hero__image-frame { height: min(118vw, 530px); } .hero__image-caption { font-size: 7px; letter-spacing: .1em; padding: 8px; } .hero__service-grid .icon { width: 33px; height: 33px; } .hero__service-grid a { gap: 16px; min-height: 83px; padding-inline: 4px; } .hero__service-grid strong { font-size: 15px; } .hero__service-grid small { font-size: 11px; } .service-cards, .process-steps, .article-grid, .contact-grid, .related-grid, .work-page__grid { grid-template-columns: 1fr; } .service-cards { gap: 12px; } .service-card--featured { grid-column: auto; min-height: 540px; } .service-card--featured .service-card__bottom { padding: 0 24px 24px; } .service-card--featured .service-card__top { padding: 24px 24px 0; } .service-card--featured .service-card__bottom > strong { font-size: 42px; } .service-card--minor { min-height: 490px; } .service-card__small-photo { height: 47%; } .service-card--minor .service-card__bottom { padding-top: 18px; } .process-step { border-left: 0 !important; border-top: 1px solid var(--line) !important; min-height: 0; padding: 20px 8px 25px; } .process-step:first-child { border-top: 0 !important; } .process-step__top { margin-bottom: 8px; } .process-step__top span { font-size: 68px; } .process-step__top .icon { width: 35px; } .process-step h3 { font-size: 21px; } .process-photo-strip { gap: 5px; } .process-photo-strip > div { height: 110px; } .process-photo-strip > span { font-size: 7px; padding: 5px; } .filter__button { padding: 10px 16px; min-height: 43px; font-size: 12px; } .work-grid { grid-template-columns: 1fr; grid-template-rows: auto; } .gallery-tile { height: 260px; } .gallery-tile--feature { grid-row: auto; height: 430px; } .gallery-tile__caption { padding: 14px 17px; } .gallery-tile__caption strong { font-size: 18px; } .section-end { align-items: flex-start; flex-direction: column; } .specs-section__intro { font-size: 14px; } .specs-section__visual { height: 510px; } .spec-table { min-width: 490px; font-size: 12px; } .spec-table th, .spec-table td { padding: 13px 14px; } .article-grid, .article-grid--two { gap: 13px; } .article-card:last-child { grid-column: auto; } .article-card__image { height: 230px; } .article-card__body { padding: 22px; } .article-card h3 { font-size: 23px; } .faq-section__left h2 { font-size: 62px; } .faq-section__image { height: 290px; margin-top: 26px; } .faq-item summary { grid-template-columns: 31px 1fr 18px; gap: 8px; min-height: 80px; font-size: 15px; } .faq-item__number { font-size: 12px; } .faq-item__answer { padding: 0 20px 18px 39px; font-size: 13px; } .contact-section__intro { display: block; grid-column: auto; } .contact-section__intro h2 { font-size: 51px; } .contact-card { min-height: 75px; } .contact-section__photo { min-height: 470px; } .contact-panel { min-height: 490px; } .site-footer { padding-top: 59px; } .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; padding-bottom: 55px; } .site-footer__about, .site-footer__grid > div:last-child { grid-column: span 2; } .site-footer h2 { font-size: 14px; margin-bottom: 11px; } .site-footer__bottom { flex-wrap: wrap; padding-block: 18px; gap: 3px 12px; } .site-footer__bottom span:nth-child(2) { display: none; } .site-footer__bottom a { margin-left: auto; } .inner-hero { padding-block: 55px; } .inner-hero__copy h1 { font-size: clamp(43px, 10vw, 60px); } .inner-hero__copy > p:not(.kicker) { font-size: 14px; } .inner-hero__actions { gap: 9px; } .inner-hero__actions .button { flex: 1 1 155px; } .inner-hero__image { height: 440px; } .detail-section__intro h2, .prep-section__copy h2 { font-size: 44px; } .detail-list p { font-size: 15px; } .prep-section__photo { height: 420px; } .related-grid a { height: 300px; } .cta-panel__inner { display: block; } .cta-panel__inner > div:last-child { margin-top: 28px; } .cta-panel__inner .button { flex: 1 1 170px; } .work-page__grid { grid-auto-rows: auto; } .work-page__grid .gallery-tile { height: 290px; } .work-page__grid .gallery-tile:first-child, .work-page__grid .gallery-tile:nth-child(6) { grid-column: auto; grid-row: auto; } .work-page__grid .gallery-tile:first-child { height: 420px; } .article-page__header { padding-block: 50px 67px; } .article-page__header h1 { font-size: 41px; } .article-page__header p:last-child { font-size: 15px; } .article-page__lead-image { height: 360px; } .article-page__content { padding-top: 45px; } .article-page__prose p { font-size: 15px; } .contact-extra ol { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } .field-guide-section { background: #f6fafb; } .field-guide-section h2 { font-size: clamp(40px, 4.8vw, 69px); } .field-guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-blue); border-bottom: 1px solid var(--line-blue); } .field-guide-grid article { padding: 25px 25px 31px; } .field-guide-grid article + article { border-left: 1px solid var(--line-blue); } .field-guide-grid article > span { font-size: 60px; font-weight: 600; line-height: 1; color: var(--teal); letter-spacing: -.06em; } .field-guide-grid article:nth-child(even) > span { color: var(--copper); } .field-guide-grid h3 { margin: 19px 0 7px; font-size: 21px; } .field-guide-grid p { color: var(--ink-soft); font-size: 14px; margin: 0; } .field-guide-faq { display: grid; grid-template-columns: .65fr 1.35fr; gap: 60px; margin-top: 75px; } .field-guide-faq h3 { font-size: clamp(34px, 3.4vw, 49px); margin: 0; } .field-guide-faq > div:last-child { border-top: 1px solid var(--line-blue); } .field-guide-faq details { border-bottom: 1px solid var(--line-blue); } .field-guide-faq summary { display: flex; justify-content: space-between; gap: 18px; align-items: center; min-height: 66px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; } .field-guide-faq summary::-webkit-details-marker { display: none; } .field-guide-faq summary span { color: var(--teal); font-size: 27px; font-weight: 400; line-height: 1; } .field-guide-faq details[open] summary span { transform: rotate(45deg); } .field-guide-faq details p { color: var(--ink-soft); margin: 0 25px 19px 0; font-size: 14px; } @media (max-width: 820px) { .field-guide-grid { grid-template-columns: repeat(2, 1fr); } .field-guide-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-blue); } .field-guide-grid article:nth-child(4) { border-top: 1px solid var(--line-blue); } .field-guide-faq { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 620px) { .field-guide-grid { grid-template-columns: 1fr; } .field-guide-grid article { border-left: 0 !important; border-top: 1px solid var(--line-blue); padding: 21px 5px; } .field-guide-grid article:first-child { border-top: 0; } .field-guide-grid article > span { font-size: 51px; } .field-guide-faq { margin-top: 50px; } .field-guide-faq summary { font-size: 14px; } } .specs-section__left { min-width: 0; } .spec-table-wrap { max-width: 100%; } @media (max-width: 820px) { .specs-grid { grid-template-columns: minmax(0, 1fr); } } .work-grid--filtered { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 285px; } .work-grid--filtered .gallery-tile--feature { grid-row: auto; } @media (max-width: 620px) { .work-grid--filtered { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; } } @media (min-width: 1101px) { .contact-card { min-height: 105px; } .contact-card strong { font-size: clamp(19px, 1.65vw, 25px); } .contact-card > .icon:first-child { width: 31px; height: 31px; } } :root { --wrap: 1450px; --side: clamp(22px, 3.2vw, 52px); } html { scroll-padding-top: 0; } .brand--text { display: inline-block; color: var(--navy); font-size: clamp(25px, 2.2vw, 34px); font-weight: 600; letter-spacing: -.05em; line-height: 1.1; white-space: nowrap; } .brand--footer { color: white; } .copper-dot { color: var(--copper); } .section-lede { margin: 8px 0 0; color: var(--ink-soft); font-size: clamp(17px, 1.6vw, 24px); } .section-blueprint { display: block; width: min(100%, 420px); height: 180px; object-fit: contain; object-position: right center; opacity: .8; justify-self: end; } .service-card__features { display: flex; flex-direction: column; gap: 13px; } .service-card__features > span { display: flex; align-items: center; gap: 12px; } .service-card__features .icon { width: 29px; height: 29px; } .service-card__footer { display: flex; align-items: center; justify-content: space-between; color: var(--teal); font-size: 13px; font-weight: 600; border-top: 1px solid var(--line); padding: 12px 24px; min-height: 52px; } .spec-table__thumb { width: 45px; height: 62px; object-fit: contain; } .specs-benefits { display: flex; align-items: center; justify-content: center; gap: clamp(25px, 6vw, 90px); } .specs-benefits a { display: flex; align-items: center; gap: 13px; padding: 8px; } .specs-benefits .icon { width: 29px; height: 29px; color: var(--teal); } .specs-benefits strong, .specs-benefits small { display: block; line-height: 1.35; } .specs-benefits strong { font-size: 16px; } .specs-benefits small { color: var(--ink-soft); font-size: 11px; } .contact-section__right { min-width: 0; display: flex; flex-direction: column; } .contact-section__mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 235px; overflow: hidden; } .contact-section__mosaic img { width: 100%; height: 100%; object-fit: cover; } .contact-section__micro { display: block; color: var(--ink-muted); font-size: 9px; letter-spacing: .22em; margin-top: 26px; } @media (min-width: 1101px) { .site-header__inner { min-height: 76px; } .desktop-nav a { font-size: 14px; } .header-call { background: var(--copper); border-color: var(--copper); } .header-call .icon { color: white; } .hero__grid { padding-top: 38px; padding-bottom: 28px; } .hero__image-frame { height: min(50vw, 750px); } .hero__pretitle { margin-bottom: clamp(22px, 2.6vw, 37px); } .hero__actions { margin-top: 28px; } .hero__service-grid a { min-height: 111px; } .services-section, .process-section, .work-section, .specs-section, .guides-section, .faq-section, .contact-section { min-height: 960px; padding-block: 34px 42px; overflow: hidden; } .services-section .section-eyebrow, .process-section .section-eyebrow, .work-section .section-eyebrow, .guides-section .section-eyebrow, .faq-section .section-eyebrow, .contact-section .section-eyebrow { margin-bottom: 14px; } .services-section .kicker, .process-section .kicker, .work-section .kicker, .guides-section .kicker, .faq-section .kicker, .contact-section .kicker { margin-bottom: 7px; } .services-section__heading { grid-template-columns: minmax(0, 1fr) 390px; align-items: center; gap: 25px; min-height: 157px; margin-bottom: 20px; } .services-section__heading h2 { font-size: clamp(69px, 6.15vw, 95px); white-space: nowrap; } .service-cards { grid-template-columns: 2fr 1fr 1fr; height: 690px; min-height: 0; gap: 12px; } .service-card--featured .service-card__top { padding: 28px 34px 0; } .service-card--featured .service-card__bottom { flex: 1; max-width: 420px; margin-top: 31px; padding: 0 34px 33px; } .service-card--featured .service-card__bottom > strong { font-size: clamp(48px, 5.05vw, 77px); line-height: 1.11; } .service-card--featured .service-card__bottom > strong span { font-size: .61em; } .service-card--featured .service-card__bottom > small { font-size: 17px; line-height: 1.58; } .service-card__features { margin-top: 26px; font-size: 14px; } .service-card--featured .service-card__link { margin-top: auto; padding: 16px 19px; } .service-card--minor .service-card__top { padding: 28px 24px 0; } .service-card--minor .service-card__bottom { margin-top: 17px; padding: 0 24px 13px; min-height: 0; } .service-card--minor .service-card__bottom > strong { font-size: clamp(26px, 2.6vw, 40px); } .service-card--minor .service-card__bottom > small { font-size: 14px; } .service-card--minor .service-card__small-photo { margin-top: auto; height: 314px; } .service-card--minor .service-card__footer { min-height: 58px; } .process-section { background-image: url('/assets/images/cabinet-blueprint.e53c07bf09.svg'); background-position: right 12px top 24px; background-size: 360px auto; background-repeat: no-repeat; } .process-section__heading { grid-template-columns: 1.6fr .4fr; min-height: 204px; margin-bottom: 20px; } .process-section__heading h2 { font-size: clamp(70px, 6.3vw, 97px); } .process-section__heading > p { font-size: 17px; max-width: 330px; } .process-steps { min-height: 302px; } .process-step { position: relative; min-height: 302px; padding: 22px 22px 28px; } .process-step::after { content: ''; position: absolute; bottom: 15px; left: 22px; right: 22px; height: 4px; background: var(--teal); } .process-step:nth-child(even)::after { background: var(--copper); } .process-step__top { margin-bottom: 21px; } .process-step__top span { font-size: clamp(80px, 7.4vw, 113px); } .process-step__top .icon { width: 53px; height: 53px; } .process-step h3 { font-size: clamp(25px, 2.15vw, 33px); } .process-step p { font-size: 15px; } .process-photo-strip { margin-top: 16px; gap: 8px; } .process-photo-strip > div { height: 328px; } .process-photo-strip > div:first-child { clip-path: polygon(0 0,100% 0,93% 100%,0 100%); } .process-photo-strip > div:nth-child(2) { clip-path: polygon(7% 0,100% 0,93% 100%,0 100%); } .process-photo-strip > div:nth-child(3) { clip-path: polygon(7% 0,100% 0,100% 100%,0 100%); } .work-section__heading { grid-template-columns: 1.75fr .25fr; min-height: 200px; margin-bottom: 12px; } .work-section__heading h2 { font-size: clamp(68px, 6.15vw, 95px); } .work-section__heading > p { max-width: 350px; font-size: 15px; } .work-section .filter { margin-bottom: 15px; } .work-section .filter__button { min-width: 130px; } .work-grid { grid-template-columns: 1.42fr 1fr; grid-template-rows: repeat(2, 289px); gap: 12px; } .work-section .section-end { margin-top: 14px; } .specs-section { padding-block: 29px 25px; background: #f6fafb; } .specs-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; gap: 30px; } .specs-section .section-eyebrow { margin-bottom: 21px; } .specs-section__left h2 { font-size: clamp(65px, 5.7vw, 87px); } .specs-section__intro { margin: 14px 0 22px; font-size: 17px; max-width: 650px; } .specs-section__visual { height: 805px; } .spec-table { min-width: 0; font-size: 15px; } .spec-table th, .spec-table td { padding: 11px 15px; } .spec-table tbody tr { height: 86px; } .spec-table__thumb { width: 54px; height: 67px; } .specs-section__note { font-size: 11px; margin: 10px 0 14px; } .specs-section__left .button { min-height: 52px; font-size: 14px; } .specs-benefits { margin-top: 13px; } .guides-section__heading { grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); min-height: 175px; margin-bottom: 17px; } .guides-section__heading h2 { font-size: clamp(58px, 5.45vw, 82px); white-space: nowrap; } .guides-section__heading > p { font-size: 16px; } .guides-section .article-grid { gap: 14px; } .guides-section .article-card__image { height: 315px; } .guides-section .article-card__body { min-height: 274px; padding: 20px 23px 19px; } .guides-section .article-card h3 { font-size: clamp(22px, 2.1vw, 31px); margin-top: 15px; } .guides-section .section-end { margin-top: 14px; } .faq-section { background-image: url('/assets/images/cabinet-blueprint.e53c07bf09.svg'); background-position: right -62px bottom -40px; background-size: 510px auto; background-repeat: no-repeat; } .faq-grid { grid-template-columns: 1.02fr .98fr; gap: 45px; } .faq-section__left h2 { font-size: clamp(70px, 6.4vw, 98px); } .faq-section__left > p:not(.kicker) { margin: 11px 0 0; font-size: 16px; max-width: 500px; } .faq-section__image { height: 457px; max-width: none; margin-top: 27px; } .faq-list { margin-top: 49px; } .faq-item summary { min-height: 130px; font-size: clamp(18px, 1.7vw, 25px); } .faq-item__answer { font-size: 15px; } .contact-section { background-image: url('/assets/images/cabinet-blueprint.e53c07bf09.svg'); background-position: left -125px bottom -120px; background-size: 450px auto; background-repeat: no-repeat; } .contact-section .section-eyebrow { margin-bottom: 20px; } .contact-grid { grid-template-columns: minmax(0, .95fr) minmax(0, .68fr) minmax(0, 1.08fr); gap: 15px; min-height: 815px; } .contact-section__intro { padding-top: 55px; } .contact-section__intro h2 { font-size: clamp(75px, 6.6vw, 101px); } .contact-section__intro > p:not(.kicker) { max-width: 480px; font-size: 20px; margin: 21px 0 42px; } .contact-card { min-height: 119px; margin-top: 13px; } .contact-card strong { font-size: clamp(22px, 2.15vw, 33px); } .contact-section__photo { min-height: 815px; } .contact-section__mosaic { height: 310px; flex: none; } .contact-panel { flex: 1; padding: 27px 32px; } .contact-panel h3 { font-size: clamp(31px, 2.55vw, 39px); margin: 12px 0 3px; } .contact-panel > p { margin-bottom: 14px; } .contact-panel li { padding: 10px 0; } .contact-panel .button { min-height: 57px; } } @media (max-width: 1100px) { .section-blueprint { max-width: 260px; height: 130px; } .service-card--minor .service-card__bottom { margin-top: 0; } .service-card--featured .service-card__bottom > strong span { font-size: .75em; } .service-card__features { display: none; } .service-card--minor .service-card__footer { min-height: 52px; } .specs-benefits { justify-content: space-between; flex-wrap: wrap; margin-top: 25px; } .contact-section__mosaic { height: 220px; min-height: 0; } .contact-section__right { min-width: 0; } } @media (max-width: 820px) { .services-section__heading { grid-template-columns: 1fr auto; } .services-section__heading .section-blueprint { width: 190px; } .services-section__heading h2 { font-size: 56px; } .work-section__heading h2 { font-size: 55px; } .specs-section__left h2 { font-size: 55px; } .guides-section__heading h2 { font-size: 55px; } .contact-section__right { min-height: 0; } } @media (max-width: 620px) { :root { --side: 19px; } .brand--text { font-size: 25px; } .section-blueprint { display: none; } .services-section__heading { display: block; } .services-section__heading h2, .process-section__heading h2, .work-section__heading h2, .specs-section__left h2, .guides-section__heading h2, .faq-section__left h2, .contact-section__intro h2 { font-size: clamp(41px, 10.4vw, 57px); white-space: normal; } .section-lede { font-size: 14px; } .service-card--featured .service-card__bottom > strong { font-size: 45px; } .service-card--featured .service-card__bottom > strong span { font-size: .7em; } .service-card--minor .service-card__bottom { padding: 22px 24px 15px; } .service-card--minor .service-card__bottom > strong { font-size: 30px; } .service-card--minor .service-card__small-photo { height: 235px; } .service-card__footer { min-height: 50px; } .specs-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .specs-benefits a { flex-direction: column; align-items: flex-start; } .specs-benefits .icon { width: 23px; height: 23px; } .specs-benefits strong { font-size: 12px; } .specs-benefits small { display: none; } .contact-section__mosaic { height: 185px; } .contact-panel { min-height: 465px; } .contact-section__micro { font-size: 7px; } } .mobile-bottom-nav, .mobile-action-dock, .mobile-service-list, .mobile-process-list, .mobile-spec-prompts { display: none; } .mobile-spec-photo, .button--mobile-photo { display: none; } @media (max-width: 620px) { :root { --mobile-ice: #f5f8fa; --mobile-navy: #102b40; --mobile-teal: #087f8c; --mobile-copper: #c76e3c; --mobile-radius: 18px; --side: 16px; --section-space: 43px; } html { scroll-padding-top: 86px; } body { background: var(--mobile-ice); padding-bottom: calc(132px + env(safe-area-inset-bottom)); } main { min-width: 0; } main > * { min-width: 0; } .wrap { width: auto; max-width: none; margin-inline: var(--side); } .section { padding-block: 44px; } .section-eyebrow { margin-bottom: 14px; } .section-heading { margin-bottom: 19px; } .section-heading h2, .services-section__heading h2, .process-section__heading h2, .work-section__heading h2, .specs-section__left h2, .guides-section__heading h2, .faq-section__left h2, .contact-section__intro h2 { font-size: clamp(31px, 8vw, 40px); line-height: 1.15; letter-spacing: -.055em; } .section-heading > p, .section-lede { font-size: 13px; line-height: 1.55; } .site-header { position: sticky; top: 0; z-index: 60; background: rgba(250,252,253,.97); backdrop-filter: blur(14px); } .site-header__inner { min-height: 62px; } .brand--text { font-size: 23px; letter-spacing: -.045em; } .menu-toggle { width: 44px; height: 44px; border: 0; background: transparent; } .menu-toggle .icon { width: 27px; height: 27px; } .mobile-menu { z-index: 61; max-height: calc(100dvh - 62px - 132px); overflow-y: auto; border-radius: 0 0 17px 17px; padding-bottom: 16px; } .mobile-menu a { min-height: 48px; } .mobile-bottom-nav, .mobile-action-dock { display: grid; position: fixed; left: 0; right: 0; z-index: 70; } .mobile-bottom-nav { bottom: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: calc(64px + env(safe-area-inset-bottom)); padding: 3px 6px env(safe-area-inset-bottom); background: #fff; border-top: 1px solid #d9e5ea; box-shadow: 0 -5px 22px rgba(16,43,64,.07); } .mobile-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 56px; color: #536575; font-size: 11px; font-weight: 500; } .mobile-bottom-nav a[aria-current="page"] { color: var(--mobile-teal); font-weight: 600; } .mobile-bottom-nav .icon { width: 23px; height: 23px; stroke-width: 1.9; } .mobile-action-dock { bottom: calc(64px + env(safe-area-inset-bottom)); grid-template-columns: 1fr 1fr; gap: 5px; padding: 6px var(--side) 7px; background: rgba(245,248,250,.97); border-top: 1px solid #d9e5ea; backdrop-filter: blur(12px); } .mobile-action-dock a { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 49px; border-radius: 10px; background: var(--mobile-teal); color: white; font-size: clamp(11px, 3.2vw, 13px); font-weight: 600; white-space: nowrap; } .mobile-action-dock a + a { background: var(--mobile-navy); } .mobile-action-dock .icon { flex: none; width: 17px; height: 17px; } .site-footer { padding-top: 30px; } .site-footer__grid { gap: 23px 15px; padding-bottom: 24px; } .site-footer__about p { font-size: 12px; } .site-footer__grid > div:nth-child(2), .site-footer__grid > div:nth-child(3) { display: none; } .site-footer__grid > div:last-child { grid-column: 1 / -1; } .hero { background: var(--mobile-ice); } .hero__grid { display: flex; flex-direction: column; gap: 0; padding-top: 0; padding-bottom: 0; } .hero__copy { position: relative; isolation: isolate; min-height: 390px; padding: 30px 16px 20px; margin: 0 calc(-1 * var(--side)); } .hero__copy::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(248,251,253,.98) 0%, rgba(248,251,253,.95) 56%, rgba(248,251,253,.2) 100%), url('/assets/images/Aircool1.78e4f3e2e1.jpg') right center / cover no-repeat; } .hero__intro { font-size: 10px; gap: 8px; letter-spacing: .08em; } .hero__pretitle { margin: 10px 0 14px; font-size: 12px; } .hero h1 { font-size: clamp(36px, 10vw, 48px); line-height: 1.07; white-space: normal; max-width: 340px; } .hero__signature { margin-top: 7px; font-size: 21px; } .hero__description { max-width: 275px; margin-top: 5px; font-size: 12px; line-height: 1.52; } .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; } .hero__actions .button { min-width: 0 !important; min-height: 50px; justify-content: center; gap: 4px; padding: 6px 8px; border-radius: 10px; font-size: 11px; text-align: center; } .hero__actions .button:nth-child(2) { background: var(--mobile-copper); border-color: var(--mobile-copper); color: #fff; } .hero__actions .button:nth-child(2) { display: none; } .hero__actions .button--mobile-photo { display: inline-flex; background: var(--mobile-copper); border-color: var(--mobile-copper); color: #fff; } .hero__actions .button .icon { width: 14px; height: 14px; } .hero__micro, .hero__media { display: none; } .hero__service-band { margin: 0 var(--side) 13px; background: #fff; border: 1px solid #e1eaf0; border-radius: var(--mobile-radius); box-shadow: 0 8px 22px rgba(16,43,64,.06); } .hero__service-band .wrap { margin: 0; } .hero__service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero__service-grid a { min-height: 85px; flex-direction: column; justify-content: center; gap: 5px; padding: 8px 4px; text-align: center; } .hero__service-grid a + a { border-top: 0; border-left: 1px solid #e1eaf0; } .hero__service-grid .icon { width: 27px; height: 27px; } .hero__service-grid strong { font-size: 12px; } .hero__service-grid small { display: none; } .services-section, .process-section { background: var(--mobile-navy); color: #fff; } .services-section .section-eyebrow__text, .process-section .section-eyebrow__text, .services-section .kicker, .process-section .kicker { color: #9ed5df; } .services-section .section-lede, .process-section__heading > p { color: #cedde5; } .services-section__heading { margin-bottom: 17px; } .services-section .service-cards, .process-section .process-steps, .process-photo-strip { display: none; } .mobile-service-list, .mobile-process-list { display: grid; gap: 9px; } .mobile-service, .mobile-process { border: 1px solid #38556a; border-radius: 16px; background: #173246; overflow: hidden; } .mobile-service[open], .mobile-process[open] { border-color: #32a8b8; box-shadow: 0 0 0 1px #32a8b8 inset; } .mobile-service summary, .mobile-process summary { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 12px 14px; cursor: pointer; list-style: none; } .mobile-service summary::-webkit-details-marker, .mobile-process summary::-webkit-details-marker { display: none; } .mobile-service__number, .mobile-process summary > span { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #3f5d70; font-size: 17px; font-weight: 600; } .mobile-service[open] .mobile-service__number, .mobile-process[open] summary > span { background: var(--mobile-teal); } .mobile-service__label { min-width: 0; flex: 1; } .mobile-service__label strong, .mobile-service__label small { display: block; } .mobile-service__label strong, .mobile-process summary strong { font-size: 17px; line-height: 1.3; } .mobile-service__label small { color: #aac0cb; font-size: 11px; } .mobile-service summary > .icon, .mobile-process summary > .icon { width: 18px; height: 18px; transform: rotate(0); transition: transform .2s; } .mobile-service[open] summary > .icon, .mobile-process[open] summary > .icon { transform: rotate(180deg); } .mobile-service__body, .mobile-process__body { padding: 0 14px 15px; } .mobile-service__image { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; } .mobile-service__body p, .mobile-process__body p { color: #d6e3e9; font-size: 13px; line-height: 1.55; } .mobile-service__body a { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 0 13px; border-radius: 9px; background: var(--mobile-teal); color: #fff; font-weight: 600; } .mobile-service__body a .icon { width: 17px; height: 17px; } .mobile-process__body img { width: 100%; height: 125px; object-fit: cover; border-radius: 10px; } .process-section__heading { margin-bottom: 16px; } .work-section { background: var(--mobile-ice); color: var(--mobile-navy); } .work-section .kicker, .work-section .section-eyebrow__text { color: var(--mobile-teal); } .work-section__heading > p { color: #536575; } .work-section .filter { margin-bottom: 12px; } .work-section .filter__button { min-height: 44px; border-color: #cfdae0; background: var(--mobile-navy); color: #fff; border-radius: 9px; } .work-section .filter__button.is-active { background: var(--mobile-teal); border-color: var(--mobile-teal); } .work-section .work-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 225px 102px; gap: 8px; } .work-section .work-grid .gallery-tile { height: auto; border-radius: 12px; } .work-section .work-grid .gallery-tile:first-child { grid-column: 1 / -1; grid-row: 1; } .work-section .work-grid .gallery-tile:nth-child(2) { grid-column: 1; grid-row: 2; } .work-section .work-grid .gallery-tile:nth-child(3) { grid-column: 2; grid-row: 2; } .work-section .gallery-tile__caption { padding: 9px 10px; } .work-section .gallery-tile__caption small { display: none; } .work-section .gallery-tile__caption strong { font-size: 11px; } .work-section .gallery-tile:first-child .gallery-tile__caption strong { font-size: 15px; } .work-section .section-end { margin-top: 10px; } .work-section .section-end > span { display: none; } .work-section .section-end .button { color: var(--mobile-teal); border-color: var(--mobile-teal); } .work-section .work-grid--filtered { display: flex; flex-wrap: wrap; } .work-section .work-grid--filtered .gallery-tile:not([hidden]) { flex: 1 1 46%; min-height: 150px; } .specs-section, .guides-section, .faq-section { background: #f5f7f5; } .specs-section__intro { margin: 8px 0 14px; } .mobile-spec-prompts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 14px; padding: 12px; border-radius: 15px; background: #faecdc; } .mobile-spec-prompts button { display: grid; place-items: center; min-height: 68px; padding: 9px 5px; border: 1px solid #eadbc9; border-radius: 12px; background: #fff; color: var(--mobile-navy); font: inherit; font-size: 11px; font-weight: 600; text-align: center; cursor: pointer; } .mobile-spec-prompts button[aria-pressed="true"] { border-color: var(--mobile-teal); background: #e4f2f1; color: var(--mobile-teal); box-shadow: 0 0 0 1px var(--mobile-teal) inset; } .mobile-spec-photo { display: block; height: 210px; margin-bottom: 12px; border-radius: 13px; overflow: hidden; } .mobile-spec-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; } .specs-section__visual { display: none; } .spec-table-wrap { border-radius: 12px; } .spec-table { min-width: 450px; } .specs-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } .specs-benefits a { min-width: 0; } .guides-section .article-grid, .guides-page .article-grid, .related-articles .article-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(235px, 80%); grid-template-columns: none; gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; } .guides-section .article-card, .guides-page .article-card, .related-articles .article-card { scroll-snap-align: start; border-radius: 15px; overflow: hidden; } .guides-section .article-card__image, .guides-page .article-card__image { height: 165px; } .guides-section .article-card__body, .guides-page .article-card__body { padding: 15px; } .guides-section .article-card h3, .guides-page .article-card h3 { margin: 12px 0 6px; font-size: 17px; } .guides-section .article-card p, .guides-page .article-card p { margin-bottom: 10px; font-size: 12px; } .guides-section .section-end { margin-top: 7px; } .guides-section .article-card { position: relative; min-height: 355px; background: var(--mobile-navy); border: 0; color: #fff; } .guides-section .article-card__image { position: absolute; inset: 0; height: 100%; } .guides-section .article-card__image img { height: 100%; } .guides-section .article-card__body { position: relative; z-index: 1; margin-top: auto; flex: none; padding: 45px 15px 15px; background: linear-gradient(transparent, rgba(10,30,43,.94) 40%); } .guides-section .article-card__meta span { background: #d8e9ec; color: var(--mobile-navy); } .guides-section .article-card__meta small { color: #d5e3e8; } .guides-section .article-card p { color: #e7eff2; } .guides-section .article-card__link { color: #fff; border-color: rgba(255,255,255,.45); } .faq-section__image { display: none; } .faq-section__left > p:not(.kicker) { font-size: 13px; } .faq-list { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: 9px; margin-top: 16px; padding-bottom: 10px; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; } .faq-item { min-height: 215px; border: 1px solid #d9e3e0; border-radius: 12px; background: #fff; overflow: hidden; scroll-snap-align: start; } .faq-item[open] { border-color: #edcda9; background: #fbf0e2; } .faq-item summary { min-height: 60px; padding: 11px 13px; grid-template-columns: 25px 1fr 18px; font-size: 13px; } .faq-item__answer { padding: 0 13px 13px 46px; font-size: 12px; line-height: 1.55; } .contact-section { background: var(--mobile-ice); } .contact-grid { display: flex; flex-direction: column; gap: 10px; min-height: 0; } .contact-section__intro { padding: 0; } .contact-section__intro > p:not(.kicker) { margin: 8px 0 17px; font-size: 13px; } .contact-card { min-height: 64px; margin-top: 8px; border-radius: 11px; } .contact-card:first-of-type { background: var(--mobile-teal); color: white; border-color: var(--mobile-teal); } .contact-card:nth-of-type(2) { background: var(--mobile-navy); color: white; border-color: var(--mobile-navy); } .contact-card:first-of-type .icon, .contact-card:nth-of-type(2) .icon, .contact-card:first-of-type small, .contact-card:nth-of-type(2) small { color: white; } .contact-card strong { font-size: 17px; } .contact-section__photo { order: 2; min-height: 175px; height: 175px; border-radius: 12px; overflow: hidden; } .contact-section__right { order: 1; } .contact-section__mosaic { display: none; } .contact-panel { min-height: 0; padding: 16px; border-radius: 14px; } .contact-panel h3 { margin: 7px 0 3px; font-size: 20px; } .contact-panel p { font-size: 12px; } .contact-panel li { padding: 7px 0; } .contact-panel .button { min-height: 45px; } .inner-hero { padding-block: 29px 23px; } .inner-hero__grid { gap: 17px; } .inner-hero__copy h1 { font-size: clamp(35px, 9vw, 46px); } .inner-hero__copy > p:not(.kicker) { font-size: 13px; } .inner-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); } .inner-hero__actions .button { min-width: 0; min-height: 49px; padding: 8px; font-size: 11px; } .inner-hero__image { height: 220px; border-radius: 13px; overflow: hidden; } .detail-section__intro h2, .prep-section__copy h2 { font-size: 32px; } .detail-list > div { padding-block: 12px; } .prep-section__photo { height: 200px; border-radius: 13px; overflow: hidden; } .field-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-guide-grid article { padding: 13px 8px; } .field-guide-grid article:nth-child(2) { border-left: 1px solid var(--line-blue) !important; } .field-guide-grid article > span { font-size: 35px; } .field-guide-grid h3 { margin-top: 7px; font-size: 15px; } .field-guide-grid p { font-size: 11px; } .field-guide-faq { margin-top: 25px; } .related-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; gap: 9px; overflow-x: auto; scroll-snap-type: x mandatory; } .related-grid a { height: 205px; border-radius: 13px; overflow: hidden; scroll-snap-align: start; } .work-page__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .work-page__grid .gallery-tile, .work-page__grid .gallery-tile:first-child, .work-page__grid .gallery-tile:nth-child(6) { grid-column: auto; grid-row: auto; height: 170px; border-radius: 10px; } .work-page__grid .gallery-tile:first-child { grid-column: 1 / -1; height: 245px; } .article-page__header { padding-block: 27px 35px; } .article-page__header h1 { font-size: 33px; } .article-page__lead-image { height: 230px; border-radius: 12px; overflow: hidden; } .article-page__content { padding-top: 27px; } .article-page__prose p { font-size: 14px; } .cta-panel__inner { padding-block: 28px; } .cta-panel__inner > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .cta-panel__inner .button { min-width: 0; min-height: 47px; padding: 8px; font-size: 10px; } .contact-extra ol { margin-top: 10px; } :is(a,button,summary):focus-visible { outline: 3px solid #ee9b62; outline-offset: 3px; } } @media (max-width: 360px) { :root { --side: 12px; } .hero h1 { font-size: 33px; } .hero__copy { min-height: 370px; } .hero__actions .button { font-size: 10px; } .mobile-action-dock a { font-size: 10px; } .mobile-bottom-nav a { font-size: 10px; } .contact-card strong { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .mobile-service summary > .icon, .mobile-process summary > .icon { transition: none; } } :root { --campaign-blue: #064bb0; --campaign-deep: #06245d; --campaign-ink: #071d45; --campaign-cyan: #37d4ff; --campaign-orange: #f47b2a; --campaign-pale: #eaf7ff; --teal: #007dbe; --teal-dark: #055d91; --copper: var(--campaign-orange); --navy: var(--campaign-ink); } body { background: #ecf5fb; } .site-header { background: #fff; border-bottom: 3px solid var(--campaign-blue); box-shadow: 0 7px 24px rgba(4,32,88,.09); } .brand--text { color: var(--campaign-deep); } .header-call { background: var(--campaign-orange); border-radius: 5px; font-weight: 600; } .header-call .icon { color: #fff; } .desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--campaign-blue); } .button--primary { background: var(--campaign-orange); border-color: var(--campaign-orange); color: #fff; } .button--primary:hover { background: #d95e13; border-color: #d95e13; } .button--outline { border-color: currentColor; } .section { isolation: isolate; overflow: clip; } .section-eyebrow__number, .section-eyebrow__text { font-weight: 700; } .section-eyebrow__line { background: currentColor; opacity: .38; } .kicker { letter-spacing: .12em; text-transform: uppercase; } .technical-frame::before, .technical-frame::after { border-color: var(--campaign-cyan); } .hero--campaign { position: relative; isolation: isolate; color: #fff; background: var(--campaign-deep); } .hero__campaign-art { position: absolute; z-index: -1; inset: 0 0 116px; overflow: hidden; } .hero__campaign-art picture { display: block; width: 100%; height: 100%; } .optimized-graphic { display: block; width: 100%; height: 100%; } .hero__campaign-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__campaign-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(1,20,67,.5), transparent 66%); } .hero--campaign .hero__grid { display: block; min-height: min(65vw, 760px); padding-block: clamp(52px,6vw,92px) 28px; } .hero--campaign .hero__copy { width: min(53%, 680px); min-height: 610px; position: relative; z-index: 1; } .hero--campaign .hero__intro, .hero--campaign .hero__pretitle, .hero--campaign .hero__description { color: #e8f6ff; } .hero--campaign .hero__intro { color: var(--campaign-cyan); } .hero--campaign .hero__intro-line { background: var(--campaign-cyan); } .hero--campaign .hero__pretitle { margin-bottom: clamp(24px,3vw,44px); } .hero--campaign h1 { font-size: clamp(53px,5.75vw,88px); color: #fff; text-shadow: 0 3px 22px rgba(0,25,78,.2); } .hero--campaign .hero__highlight { color: var(--campaign-cyan); } .hero--campaign .hero__signature { color: #fff; } .hero--campaign .hero__description { max-width: 520px; } .hero--campaign .hero__actions { flex-wrap: wrap; } .hero--campaign .button--outline { color: white; border-color: rgba(255,255,255,.85); background: rgba(3,43,105,.25); } .hero--campaign .button--outline:hover { background: white; color: var(--campaign-deep); } .hero--campaign .hero__micro { color: #bceeff; } .hero--campaign .hero__micro i { background: #bceeff; } .hero--campaign .hero__media { display: none; } .hero__art-note { position: relative; padding-bottom: 13px; color: #b6ddf5; font-size: 11px; } .hero--campaign .hero__service-band { position: relative; z-index: 1; background: #052f79; border-top: 3px solid #29caff; border-bottom: 6px solid var(--campaign-orange); } .hero--campaign .hero__service-grid a { min-height: 110px; color: white; } .hero--campaign .hero__service-grid a + a { border-color: rgba(183,231,255,.29); } .hero--campaign .hero__service-grid .icon { color: var(--campaign-cyan); } .hero--campaign .hero__service-grid small { color: #bfdeef; } .services-section { background: #073980; color: #fff; } .services-section::before { content: ''; position: absolute; inset: 0 0 auto; height: 190px; background: linear-gradient(125deg,#0f80d8 0%,#074aab 57%,#082a72 58%); z-index: -1; } .services-section .section-eyebrow, .services-section .section-eyebrow__text, .services-section .kicker { color: #9cefff; } .services-section .section-lede { color: #e4f5ff; } .services-section__heading { margin-bottom: 30px; } .services-section .section-blueprint { opacity: .28; filter: invert(1); } .service-cards { gap: 12px; } .service-card { border: 2px solid rgba(154,231,255,.28); border-radius: 15px; box-shadow: 0 16px 40px rgba(0,15,59,.18); } .service-card--featured { background: #082d73; } .service-card--featured > .service-card__image { object-position: center; } .service-card__shade { background: linear-gradient(90deg,rgba(1,20,65,.97),rgba(1,29,82,.78) 46%,rgba(1,33,95,.1)); } .service-card--featured::after { content: ''; position: absolute; right: 0; bottom: 0; width: 18%; height: 46%; pointer-events: none; background: var(--campaign-orange); clip-path: polygon(100% 0,100% 100%,0 100%); opacity: .75; } .service-card--featured .service-card__top small, .service-card--featured .service-card__top strong { color: #d8f7ff; } .service-card--featured .service-card__link { background: var(--campaign-orange); border-radius: 4px; } .service-card--featured .service-card__features .icon { color: var(--campaign-cyan); } .service-card--minor { color: white; background: #0953ab; } .service-card--minor:nth-child(3) { background: #084487; } .service-card--minor .service-card__top small, .service-card--minor .service-card__bottom > small { color: #daf2ff; } .service-card--minor .service-card__small-photo { border-top: 3px solid var(--campaign-cyan); } .service-card--minor .service-card__footer { color: white; border-color: rgba(255,255,255,.36); } .service-card--minor .service-card__footer .icon { color: var(--campaign-cyan); } .process-section { color: white; background: #064aaf; background-image: none; } .process-section .section-eyebrow, .process-section .section-eyebrow__text, .process-section .kicker { color: #9aebff; } .process-section h2 em { color: var(--campaign-cyan); } .process-section__heading > p { color: #d8eefe; } .process-campaign { display: grid; grid-template-columns: .85fr 1.15fr; height: 390px; min-height: 0; margin-bottom: 14px; overflow: hidden; border-radius: 14px; background: #052964; box-shadow: 0 20px 42px rgba(0,25,70,.16); } .process-campaign__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px,4vw,64px); background: linear-gradient(135deg,#063776,#0a60bd); } .process-campaign__copy > span { color: #9deeff; font-size: 12px; letter-spacing: .2em; font-weight: 700; } .process-campaign__copy > strong { margin-top: 13px; font-size: clamp(38px,3.8vw,59px); line-height: 1.13; letter-spacing: -.05em; } .process-campaign__copy > p { max-width: 440px; color: #e0f1ff; } .process-campaign__photo { position: relative; min-height: 0; overflow: hidden; } .process-campaign__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; } .process-campaign__photo::before { content: ''; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 12%; background: var(--campaign-cyan); clip-path: polygon(0 0,100% 0,0 100%); opacity: .82; } .process-campaign__photo span { position: absolute; right: 15px; bottom: 15px; padding: 7px 12px; background: #fff; color: var(--campaign-deep); font-size: 11px; font-weight: 600; } .process-steps { gap: 10px; border: 0; } .process-step { min-height: 268px; padding: 22px; background: #eff8ff; color: var(--campaign-ink); border-radius: 12px; border: 2px solid #b2e9ff; } .process-step + .process-step { border-left: 2px solid #b2e9ff; } .process-step:nth-child(even) { background: #dff4ff; } .process-step::after { background: var(--campaign-orange) !important; } .process-step__top span, .process-step:nth-child(even) .process-step__top span, .process-step__top .icon { color: var(--campaign-blue); } .process-step p { color: #3f5e7c; } .process-photo-strip { display: none; } .work-section { background: #052e73; color: white; } .work-section .section-eyebrow, .work-section .section-eyebrow__text, .work-section .kicker { color: #a5efff; } .work-section h2 em { color: var(--campaign-cyan); } .work-section__heading > p { color: #e0f0ff; } .work-section__proof-label { margin: 0 0 12px; color: #c3e8f9; font-size: 12px; } .work-section .filter__button { color: white; background: #0b4fa1; border-color: #7dc8f2; border-radius: 7px; } .work-section .filter__button.is-active { background: var(--campaign-orange); border-color: var(--campaign-orange); } .work-grid { grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(2,260px); gap: 12px; } .work-grid .gallery-tile { border: 3px solid #66c9fa; border-radius: 12px; } .work-grid .gallery-tile:first-child { border-color: var(--campaign-orange); } .work-section .gallery-tile__caption { background: rgba(1,28,83,.92); } .work-section .section-end > span { color: #bfeaff; } .work-section .button--text { color: #fff; border-color: var(--campaign-cyan); } .specs-section { background: #0860b9; color: white; } .specs-section .section-eyebrow, .specs-section .section-eyebrow__text, .specs-section .kicker { color: #a7edff; } .specs-section h2 em { color: #fff; } .specs-section__intro, .specs-section__note { color: #e0f1fc; } .specs-campaign-head { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; gap: 28px; } .equipment-contexts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 14px 0 24px; } .equipment-contexts span { display: flex; flex-direction: column; min-height: 72px; padding: 10px; color: var(--campaign-deep); background: #e0f7ff; border-top: 4px solid var(--campaign-orange); font-size: 12px; font-weight: 700; } .equipment-contexts strong { margin-top: 3px; font-size: 14px; line-height: 1.3; } .specs-section__visual { height: auto; min-height: 0; margin: 0; padding: 0; border: 3px solid #75d9ff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,28,91,.19); } .specs-section__visual img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; } .specs-section__visual figcaption { padding: 11px 18px; background: #052e73; color: #def5ff; font-size: 11px; } .specs-data { display: grid; grid-template-columns: minmax(0,.36fr) minmax(0,.64fr); grid-template-rows: auto auto auto; gap: 9px 25px; margin-top: 20px; padding: 21px; background: #03428f; border: 2px solid #69cfff; border-radius: 13px; } .specs-data__intro { grid-column: 1; grid-row: 1; } .specs-data__intro > span { color: #a9edff; font-size: 10px; font-weight: 700; letter-spacing: .2em; } .specs-data__intro h3 { margin: 5px 0; font-size: clamp(27px,2.5vw,37px); } .specs-data__intro p { margin: 0; color: #d5edfd; font-size: 13px; } .specs-data .spec-table-wrap { grid-column: 2; grid-row: 1 / 4; align-self: stretch; } .specs-data .specs-section__note { grid-column: 1; grid-row: 2; align-self: end; margin: 0; } .specs-data > .button { grid-column: 1; grid-row: 3; justify-self: start; } .spec-table-wrap { background: #fff; color: var(--campaign-ink); border-radius: 9px; } .specs-section .button--outline { color: white; border-color: #fff; } .specs-section .button--outline:hover { background: white; color: var(--campaign-blue); } .specs-benefits { margin-top: 28px; padding-block: 12px; border-top: 1px solid rgba(255,255,255,.4); } .specs-benefits a { color: white; } .specs-benefits .icon { color: var(--campaign-cyan); } .specs-benefits small { color: #d9efff; } .guides-section { background: #f2f9ff; } .guides-section .section-eyebrow, .guides-section .section-eyebrow__text { color: var(--campaign-blue); } .guides-section h2 em { color: var(--campaign-blue); } .guides-section .article-grid { grid-template-columns: 1.55fr 1fr 1fr; } .guides-section .article-card { border: 2px solid #c0e3f6; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,45,116,.08); } .guides-section .article-card--feature { background: #073b8f; color: #fff; border-color: #48c9f7; } .guides-section .article-card--feature .article-card__image { height: 330px; } .guides-section .article-card--feature .article-card__image img { object-position: 42% center; } .guides-section .article-card--feature .article-card__body { background: #073b8f; } .guides-section .article-card--feature h3 { color: white; } .guides-section .article-card--feature p, .guides-section .article-card--feature .article-card__meta small { color: #ddf2ff; } .guides-section .article-card--feature .article-card__link { color: #fff; border-color: rgba(255,255,255,.45); } .article-card__art-note { display: block; margin-top: 13px; color: #bce7fb; font-size: 10px; } .guides-section .article-card__meta span { background: var(--campaign-orange); color: #fff; } .faq-section { color: #fff; background: #064cb0; background-image: none; } .faq-section .section-eyebrow, .faq-section .section-eyebrow__text, .faq-section .kicker { color: #b0f0ff; } .faq-section h2 em { color: var(--campaign-cyan); } .faq-section__left > p:not(.kicker) { color: #e1f0ff; } .faq-section__image { margin-top: 26px; padding: 0; border: 3px solid #74d3f8; border-radius: 14px; overflow: hidden; } .faq-section__image > span { right: 0; bottom: 0; background: #053579; color: white; letter-spacing: .04em; } .faq-list { display: grid; gap: 10px; margin-top: 22px; } .faq-item { min-width: 0; border: 2px solid #8bdfff; border-radius: 11px; background: #fff; color: var(--campaign-ink); overflow: hidden; } .faq-item[open] { border-color: var(--campaign-orange); background: #f1faff; } .faq-item summary { min-height: 91px; padding: 16px 22px; } .faq-item__number { color: var(--campaign-blue); font-size: 20px; font-weight: 700; } .faq-item__toggle::before, .faq-item__toggle::after { background: var(--campaign-blue); } .faq-item__answer { color: #3a5576; } .contact-section { color: #fff; background: #042f79; background-image: none; } .contact-section .section-eyebrow, .contact-section .section-eyebrow__text, .contact-section .kicker { color: #abefff; } .contact-section h2 em { color: var(--campaign-cyan); } .contact-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 18px; min-height: 0; } .contact-section__photo { grid-column: 1; grid-row: 1; min-height: 610px; border: 3px solid #6fd8ff; border-radius: 15px; padding: 0; overflow: hidden; } .contact-section__photo img { object-position: center; } .contact-section__photo > span { left: 0; right: 0; bottom: 0; color: #fff; background: rgba(3,37,100,.9); letter-spacing: .05em; } .contact-section__intro { grid-column: 2; grid-row: 1; padding: 35px clamp(22px,3vw,48px); background: #0855a7; border: 2px solid #78d4f9; border-radius: 15px; } .contact-section__intro > p:not(.kicker) { color: #e1f2ff; } .contact-section__intro h2 { font-size: clamp(55px,5.3vw,80px); } .contact-card { color: var(--campaign-ink); border: 0; border-radius: 9px; box-shadow: 0 8px 20px rgba(0,22,69,.14); } .contact-card:first-of-type { background: var(--campaign-orange); color: white; } .contact-card:first-of-type small, .contact-card:first-of-type .icon { color: white; } .contact-section__micro { color: #bde8fb; } .contact-section__right { grid-column: 1/-1; grid-row: 2; display: grid; grid-template-columns: .7fr 1.3fr; gap: 18px; } .contact-section__mosaic { height: 320px; } .contact-section__mosaic img { border-radius: 10px; } .contact-panel { min-height: 0; color: var(--campaign-ink); border-radius: 12px; border-top: 6px solid var(--campaign-orange); } .contact-panel__number, .contact-panel li > span { color: var(--campaign-blue); } .site-footer { background: #041a44; } .inner-hero { color: white; background-color: #063b91; background-image: linear-gradient(135deg,rgba(0,192,255,.12) 0%,transparent 35%),linear-gradient(120deg,#073a8c,#052866); background-size: cover; background-repeat: no-repeat; } .inner-hero .section-eyebrow, .inner-hero .section-eyebrow__text, .inner-hero .kicker { color: #b3edff; } .inner-hero h1 em { color: var(--campaign-cyan); } .inner-hero__copy > p:not(.kicker) { color: #e3f3ff; } .inner-hero__image { padding: 0; border: 3px solid #74d7ff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,16,62,.24); } .inner-hero__image > span { right: 0; bottom: 0; color: #fff; background: rgba(2,35,88,.88); } .inner-hero .button--outline { color: white; border-color: white; } .inner-hero .button--outline:hover { color: var(--campaign-deep); background: white; } .detail-section, .related-section, .work-page, .guides-page { background: #f0f8ff; } .detail-section .section-eyebrow, .related-section .section-eyebrow, .work-page .section-eyebrow, .guides-page .section-eyebrow { color: var(--campaign-blue); } .detail-list > div, .field-guide-grid article { border-color: #9ed8f2; } .prep-section { background: #dcefff; } .prep-section__photo { padding: 0; border: 3px solid #60cbf7; border-radius: 13px; overflow: hidden; } .field-guide-section { background: #e6f5ff; } .field-guide-grid article { background: #fff; } .field-guide-grid article:nth-child(even) { background: #dff4ff; } .field-guide-grid article:nth-child(even) > span { color: var(--campaign-orange); } .field-guide-faq details { border-color: #9ed8f2; } .related-grid a, .work-page__grid .gallery-tile { border: 2px solid #80d5fa; border-radius: 11px; overflow: hidden; } .work-page .filter__button { border-radius: 7px; } .work-page .filter__button.is-active { background: var(--campaign-orange); border-color: var(--campaign-orange); } .guides-page .article-card { border: 2px solid #9edcf7; border-radius: 12px; overflow: hidden; } .guides-page .article-card__meta span { color: white; background: var(--campaign-orange); } .article-page__header { color: white; background-color: #063b91; background-image: linear-gradient(120deg,#073a8c,#052866); } .article-page__header p:last-child { color: #e0f2ff; } .article-page__header .kicker, .article-page__header .section-eyebrow { color: #a8edff; } .article-page__aside { border: 2px solid #9edcf7; border-top: 5px solid var(--campaign-orange); border-radius: 10px; } .cta-panel { background: #053e95; border-top: 5px solid var(--campaign-cyan); } .cta-panel .kicker { color: #a6eaff; } .cta-panel p:not(.kicker) { color: #e1f0ff; } .contact-extra { background: #f0f8ff; } @media (max-width: 900px) and (min-width: 621px) { .hero--campaign .hero__copy { width: 62%; min-height: 530px; } .hero--campaign h1 { font-size: clamp(44px,5.7vw,64px); } .hero__campaign-art { inset-bottom: 100px; } .service-cards { min-height: 550px; } .contact-grid { grid-template-columns: 1fr 1fr; } .contact-section__photo { min-height: 540px; } } @media (max-width: 620px) { :root { --mobile-teal: var(--campaign-blue); --mobile-navy: var(--campaign-deep); --mobile-copper: var(--campaign-orange); } body { background: #eaf5ff; } .site-header { background: #fff; border-bottom-width: 2px; } .site-header__inner { min-height: 61px; } .mobile-bottom-nav { border-top: 2px solid #8ddcff; } .mobile-bottom-nav a[aria-current="page"] { color: var(--campaign-blue); } .mobile-action-dock { background: #eaf5ff; } .mobile-action-dock a:first-child { background: var(--campaign-orange); } .mobile-action-dock a + a { background: var(--campaign-blue); } .section { padding-block: 37px; } .section-eyebrow__text { letter-spacing: .13em; } .hero--campaign { background: #052a73; } .hero__campaign-art { inset: 0 0 103px; } .hero__campaign-art img { object-position: 68% center; } .hero__campaign-art::after { background: linear-gradient(90deg,rgba(0,23,74,.95),rgba(1,32,83,.75) 58%,rgba(2,46,104,.18)); } .hero--campaign .hero__grid { min-height: 500px; padding: 0; } .hero--campaign .hero__copy { width: auto; min-height: 490px; padding: 26px 16px 17px; margin: 0 calc(-1 * var(--side)); } .hero--campaign .hero__copy::before { display: none; } .hero--campaign .hero__intro { color: #a7eeff; } .hero--campaign .hero__pretitle { margin: 10px 0 22px; color: #e9f6ff; } .hero--campaign h1 { max-width: 350px; font-size: clamp(37px,9.6vw,48px); } .hero--campaign .hero__signature { margin-top: 11px; font-size: 23px; } .hero--campaign .hero__description { max-width: 295px; margin-top: 10px; color: #e4f5ff; font-size: 12px; } .hero--campaign .hero__actions { margin-top: 22px; } .hero--campaign .hero__actions .button:first-child { background: var(--campaign-orange); border-color: var(--campaign-orange); } .hero--campaign .hero__actions .button--mobile-photo { background: #fff; border-color: #fff; color: var(--campaign-deep); } .hero__art-note { margin-top: -6px; padding-bottom: 11px; font-size: 9px; line-height: 1.45; } .hero--campaign .hero__service-band { margin: 0 var(--side) 14px; border: 1px solid #55cafa; border-bottom: 4px solid var(--campaign-orange); background: #0752a8; box-shadow: 0 10px 24px rgba(0,28,91,.22); } .hero--campaign .hero__service-grid a { min-height: 81px; } .hero--campaign .hero__service-grid a + a { border-color: rgba(255,255,255,.27); } .hero--campaign .hero__service-grid strong { color: white; } .services-section, .process-section { background: #05357f; } .services-section::before { height: 140px; } .services-section .section-lede, .process-section__heading > p { color: #d9efff; } .mobile-service, .mobile-process { border-color: #5394ce; background: #074b9a; } .mobile-service[open], .mobile-process[open] { border-color: var(--campaign-cyan); box-shadow: 0 0 0 1px var(--campaign-cyan) inset; } .mobile-service__number, .mobile-process summary > span { background: #0b69bb; } .mobile-service[open] .mobile-service__number, .mobile-process[open] summary > span { background: var(--campaign-orange); } .mobile-service__label small { color: #c5e7fb; } .mobile-service__body p, .mobile-process__body p { color: #ecf8ff; } .mobile-service__body a { background: var(--campaign-orange); } .process-campaign { grid-template-columns: 1fr 1fr; height: 154px; min-height: 0; margin-bottom: 10px; border-radius: 11px; } .process-campaign__copy { padding: 12px; } .process-campaign__copy > span { font-size: 8px; } .process-campaign__copy > strong { margin-top: 7px; font-size: 19px; } .process-campaign__copy > p { display: none; } .process-campaign__photo span { right: 4px; bottom: 4px; padding: 2px 4px; font-size: 8px; } .work-section { color: white; background: #052e73; } .work-section__heading > p { color: #def0ff; } .work-section .filter__button { background: #0a4b9e; border-color: #72bce9; } .work-section .filter__button.is-active { background: var(--campaign-orange); border-color: var(--campaign-orange); } .work-section__proof-label { font-size: 10px; } .work-section .work-grid { grid-template-rows: 210px 95px; } .work-section .work-grid .gallery-tile { border: 2px solid #69cfff; } .work-section .work-grid .gallery-tile:first-child { border-color: var(--campaign-orange); } .specs-section { background: #0752aa; } .specs-campaign-head { display: flex; flex-direction: column; gap: 15px; } .specs-section__left { width: 100%; min-width: 0; } .specs-section__left h2 { color: #fff; } .specs-section__intro, .specs-section__note { color: #e2f4ff; font-size: 13px; } .equipment-contexts { margin: 12px 0; gap: 5px; } .equipment-contexts span { min-height: 60px; padding: 7px; font-size: 9px; } .equipment-contexts strong { font-size: 11px; } .mobile-spec-prompts { background: #e2f4ff; } .mobile-spec-prompts button { border-color: #a8def6; } .mobile-spec-prompts button[aria-pressed="true"] { background: #e8f7ff; border-color: var(--campaign-orange); color: var(--campaign-blue); box-shadow: 0 0 0 1px var(--campaign-orange) inset; } .specs-section__visual { display: block; width: 100%; } .specs-section__visual img { aspect-ratio: 16/9; } .specs-section__visual figcaption { padding: 5px 9px; font-size: 9px; } .specs-data { display: flex; flex-direction: column; gap: 11px; padding: 12px; } .specs-data__intro h3 { font-size: 22px; } .specs-data__intro p { font-size: 11px; } .specs-data .mobile-spec-prompts { margin: 0; } .specs-data .specs-section__note { margin: 0; } .specs-data > .button { align-self: start; } .spec-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; } .specs-benefits { margin-top: 16px; } .guides-section { background: #edf8ff; } .guides-section .article-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px,84%); grid-template-columns: none; gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory; } .guides-section .article-card { min-width: 0; scroll-snap-align: start; } .guides-section .article-card { border: 2px solid #8bd5f7; } .guides-section .article-card--feature { background: #063b87; } .guides-section .article-card--feature .article-card__image { height: 100%; } .guides-section .article-card--feature .article-card__body { background: linear-gradient(transparent,rgba(3,34,91,.97) 40%); } .article-card__art-note { color: #c6eaff; } .faq-section { background: #064cb0; } .faq-section__left > p:not(.kicker) { color: #e5f5ff; } .faq-list { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: 9px; margin-top: 15px; overflow-x: auto; } .faq-item, .faq-item[open] { background: #fff; border-color: #8bdfff; } .faq-item[open] { border-color: var(--campaign-orange); } .contact-section { background: #043a86; } .contact-grid { display: flex; flex-direction: column; gap: 11px; } .contact-section__intro { order: 0; padding: 0; background: transparent; border: 0; } .contact-section__intro > p:not(.kicker) { color: #e7f6ff; } .contact-section__intro h2 { font-size: clamp(40px,10vw,54px); } .contact-card:first-of-type { background: var(--campaign-orange); border-color: var(--campaign-orange); } .contact-card:nth-of-type(2) { background: #fff; color: var(--campaign-ink); border-color: #fff; } .contact-card:nth-of-type(2) small, .contact-card:nth-of-type(2) .icon { color: var(--campaign-ink); } .contact-section__photo { order: 1; min-height: 185px; height: 185px; } .contact-section__right { order: 2; display: block; } .contact-section__mosaic { display: none; } .contact-panel { background: #fff; border-top: 5px solid var(--campaign-orange); } .inner-hero { padding-block: 30px; } .inner-hero__image { height: 220px; } .work-page__grid .gallery-tile { border-width: 2px; } .article-page__header { padding-block: 28px 36px; } } @media (max-width: 360px) { .hero--campaign h1 { font-size: 34px; } .hero--campaign .hero__copy { min-height: 475px; } .hero--campaign .hero__description { max-width: 270px; } .equipment-contexts strong { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .service-card, .gallery-tile__image img, .article-card__image img, .button, .button .icon { transition: none; } } :root { --campaign-action: #b94d06; --motion-fast: 180ms; --motion-ui: 280ms; --motion-scene: 760ms; --motion-ease: cubic-bezier(.22, 1, .36, 1); } .header-call, .button--primary, .service-card--featured .service-card__link, .work-section .filter__button.is-active, .work-page .filter__button.is-active, .guides-section .article-card__meta span, .guides-page .article-card__meta span, .contact-card:first-of-type, .mobile-action-dock a:first-child, .mobile-service[open] .mobile-service__number, .mobile-process[open] summary > span, .mobile-service__body a, .hero--campaign .hero__actions .button:first-child { background: var(--campaign-action); border-color: var(--campaign-action); color: #fff; } .button--primary:hover { background: #923900; border-color: #923900; } html { scroll-padding-top: 24px; } body { font-synthesis: none; } h1, h2, h3 { letter-spacing: 0; overflow: visible; } h1 { line-height: 1.19; } h2 { line-height: 1.28; } h3 { line-height: 1.34; } .hero--campaign h1 { line-height: 1.16; } .section[id], .hero[id] { scroll-margin-top: 24px; } .chapter-rail { position: fixed; z-index: 36; top: 50%; right: 12px; width: 52px; transform: translateY(-50%); padding: 15px 3px; color: #eaf8ff; background: rgba(3, 29, 76, .94); border: 1px solid rgba(118, 216, 255, .54); border-radius: 30px; box-shadow: 0 16px 42px rgba(2, 26, 72, .29); } .chapter-rail::before { content: ''; position: absolute; top: 18px; bottom: 18px; left: 25px; width: 1px; background: linear-gradient(to bottom, #44d4ff var(--rail-progress, 0%), rgba(255,255,255,.2) var(--rail-progress, 0%)); pointer-events: none; } .chapter-rail__links { position: relative; display: grid; gap: 2px; } .chapter-rail__links a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #c4e9f8; transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast); } .chapter-rail__links a .icon { width: 18px; height: 18px; transition: transform var(--motion-ui) var(--motion-ease); } .chapter-rail__links a[aria-current="location"] { color: #052766; background: #6de1ff; } .chapter-rail__links a:hover, .chapter-rail__links a:focus-visible { color: #fff; background: var(--campaign-action); transform: translateX(-2px); } .chapter-rail__links a:hover .icon, .chapter-rail__links a:focus-visible .icon { transform: scale(1.15) rotate(-6deg); } .chapter-rail__links a span { position: absolute; top: 50%; right: calc(100% + 10px); width: max-content; max-width: 170px; padding: 8px 12px; border-radius: 5px; color: #fff; background: #073478; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transform: translate(6px, -50%); transition: opacity var(--motion-fast), transform var(--motion-fast); } .chapter-rail__links a:hover span, .chapter-rail__links a:focus-visible span { opacity: 1; transform: translate(0, -50%); } .chapter-rail__mobile { display: none; } .hero--campaign .hero__campaign-art { overflow: hidden; } .hero--campaign .hero__campaign-art img { will-change: transform; } .hero--campaign .hero__campaign-art::before { content: ''; position: absolute; z-index: 1; inset: -45% auto -45% 28%; width: 22%; transform: rotate(19deg) translateX(-120%); background: linear-gradient(90deg, transparent, rgba(79, 210, 255, .13), transparent); mix-blend-mode: screen; pointer-events: none; animation: airflow-sweep 9s ease-in-out infinite; } @keyframes airflow-sweep { 0%, 16% { transform: rotate(19deg) translateX(-120%); opacity: 0; } 20% { opacity: .6; } 54% { opacity: .22; } 65%, 100% { transform: rotate(19deg) translateX(360%); opacity: 0; } } html.is-tab-hidden .hero--campaign .hero__campaign-art::before { animation-play-state: paused; } .hero--campaign .hero__art-note { letter-spacing: .01em; } .hero--campaign .hero__service-band { box-shadow: 0 16px 40px rgba(1, 20, 61, .2); } .services-section::after, .work-section::after, .faq-section::after { content: ''; position: absolute; right: 0; bottom: 0; width: min(26vw, 390px); height: 7px; background: var(--campaign-orange); } .process-section::after, .specs-section::after, .contact-section::after { content: ''; position: absolute; left: 0; bottom: 0; width: min(26vw, 390px); height: 7px; background: var(--campaign-cyan); } .service-card, .article-card, .gallery-tile, .related-grid a, .contact-card, .filter__button, .mobile-bottom-nav a, .chapter-rail__mobile a { transition: transform var(--motion-ui) var(--motion-ease), box-shadow var(--motion-ui) var(--motion-ease), border-color var(--motion-ui), background var(--motion-ui), color var(--motion-ui); } @media (hover: hover) and (pointer: fine) { .service-card:hover, .article-card:hover, .related-grid a:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(2, 24, 75, .25); } .gallery-tile:hover { transform: translateY(-3px); } .contact-card:hover { transform: translateX(4px); box-shadow: 0 14px 26px rgba(2, 24, 75, .18); } .service-card:hover .icon, .contact-card:hover .icon, .related-grid a:hover .icon { transform: translateX(4px); } } .service-card:active, .article-card:active, .gallery-tile:active, .contact-card:active, .button:active { transform: scale(.985); } .filter__button:focus-visible, .chapter-rail a:focus-visible { outline: 3px solid #ffaf5f; outline-offset: 3px; } @media (min-width: 821px) { .process-step { position: relative; } .process-step:not(:last-child)::before { content: ''; position: absolute; z-index: 3; top: 32px; right: -16px; width: 18px; height: 18px; border: 5px solid #064aaf; border-radius: 50%; background: #f47b2a; pointer-events: none; } .process-step__top .icon { transition: transform var(--motion-ui) var(--motion-ease); } .process-step:hover .process-step__top .icon { transform: translateX(3px) rotate(8deg); } } .cta-panel--cinematic { position: relative; isolation: isolate; overflow: hidden; background: #031d4a url('/assets/images/cinematic-vent-atmosphere-v1.a8daa63442.jpg') right center / cover no-repeat; background-image: image-set(url('/assets/images/cinematic-vent-atmosphere-v1.359ac2cc2a.webp') type('image/webp'), url('/assets/images/cinematic-vent-atmosphere-v1.a8daa63442.jpg') type('image/jpeg')); } .cta-panel--cinematic::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(2, 21, 59, .96), rgba(3, 29, 76, .83) 52%, rgba(2, 31, 70, .24)); } .cta-panel--cinematic .cta-panel__inner { position: relative; } .cta-panel__art-note { display: block; margin-top: 24px; color: #c6e5f4; font-size: 11px; } @media (max-width: 1100px) { .chapter-rail { position: relative; z-index: 25; top: auto; right: auto; width: auto; transform: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #072d74; } .chapter-rail::before, .chapter-rail__links { display: none; } .chapter-rail__mobile { display: block; } .chapter-rail__mobile summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px var(--side); color: #e9f8ff; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; } .chapter-rail__mobile summary::-webkit-details-marker { display: none; } .chapter-rail__mobile summary .icon { width: 17px; height: 17px; transition: transform var(--motion-ui); } .chapter-rail__mobile[open] summary .icon { transform: rotate(180deg); } .chapter-rail__mobile > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 0 var(--side) 10px; } .chapter-rail__mobile a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 7px; border: 1px solid rgba(118, 216, 255, .45); border-radius: 7px; color: #e9f8ff; font-size: 11px; line-height: 1.3; text-align: center; } .chapter-rail__mobile a .icon { display: none; } .chapter-rail__mobile a[aria-current="location"] { color: #082a65; background: #8be5ff; } .chapter-rail__mobile a:focus-visible { outline: 3px solid #ffaf5f; outline-offset: 2px; } } @media (max-width: 620px) { html { scroll-padding-top: 72px; } .section[id], .hero[id] { scroll-margin-top: 72px; } h1, h2, h3 { letter-spacing: 0; } .hero--campaign h1 { line-height: 1.23; } .hero--campaign .hero__copy { min-height: 520px; } .hero--campaign .hero__campaign-art::before { display: none; } .chapter-rail__mobile > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chapter-rail__mobile a { justify-content: flex-start; padding-left: 13px; font-size: 12px; } .chapter-rail__mobile a .icon { display: block; width: 15px; height: 15px; } .cta-panel--cinematic { background-image: image-set(url('/assets/images/cinematic-mobile-atmosphere-v1.c155ff4abb.webp') type('image/webp'), url('/assets/images/cinematic-mobile-atmosphere-v1.3c736ab755.jpg') type('image/jpeg')); background-position: right 48%; } .cta-panel--cinematic::before { background: linear-gradient(90deg, rgba(2,21,59,.94), rgba(2,21,59,.7)); } .cta-panel__art-note { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .hero--campaign .hero__campaign-art::before { animation: none; } .service-card, .article-card, .gallery-tile, .related-grid a, .contact-card, .filter__button, .mobile-bottom-nav a, .chapter-rail a, .chapter-rail .icon, .button { transition: none !important; } .service-card:hover, .article-card:hover, .gallery-tile:hover, .contact-card:hover, .button:hover { transform: none !important; } } .site-header { border-bottom: 0; box-shadow: none; } .site-header__inner { min-height: 86px; } .header-call > span { display: none; } .brand--text { letter-spacing: -.035em; font-size: clamp(32px,3.4vw,49px); } .hero--campaign { overflow: hidden; } .hero--campaign .hero__campaign-art { inset: 0; } .hero--campaign .hero__campaign-art::before, .hero--campaign .hero__campaign-art::after { display: none; } .hero--campaign .hero__grid { display: flex; align-items: center; min-height: 53vw; max-height: 850px; padding-block: 80px; } .hero--campaign .hero__copy { width: 64%; min-height: 0; padding: 0; } .hero--campaign h1 { max-width: none; margin: 0; font-size: clamp(38px,5.9vw,88px); font-weight: 600; line-height: 1.27; letter-spacing: -.035em; } .hero--campaign h1 > span { display: block; white-space: nowrap; } .hero--campaign .hero__description { max-width: none; margin: 30px 0 0; font-size: clamp(16px,1.85vw,27px); line-height: 1.8; } .hero--campaign .hero__actions { display: flex; gap: 18px; margin-top: 34px; } .hero--campaign .hero__actions .button { min-height: 80px; padding-inline: 40px; font-size: 25px; border-radius: 3px; transition: border-radius 180ms ease; } @media (hover: hover) { .hero--campaign .hero__actions .button:hover { border-radius: 9px; } } .hero--campaign .hero__art-note { position: absolute; right: 24px; bottom: 14px; margin: 0; padding: 5px 8px; color: #fff; background: #06245dbf; font-size: 11px; } .mobile-break { display: none; } .field-proof { background: #06245d; color: #fff; padding-block: 36px 56px; } .field-proof__grid { display: grid; grid-template-columns: .68fr 1fr; gap: 46px; align-items: center; } .field-proof__copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .field-proof h2 { margin: 0 0 clamp(24px,3vw,36px); font-size: clamp(27px,3.7vw,54px); font-weight: 600; letter-spacing: -.035em; line-height: 1.35; } .field-proof h2 span { color: #37d4ff; } .field-proof__copy p { margin: 0; font-size: clamp(16px,1.85vw,27px); line-height: 1.9; color: #e6f3ff; } .field-proof .button--text { color: #fff; margin-top: clamp(30px,4vw,46px); padding-inline: 14px; border-color: #37d4ff; } .field-proof__carousel { position: relative; } .field-proof__slides { position: relative; height: 28vw; max-height: 440px; overflow: hidden; border-radius: 12px; background: #0b3473; } .field-proof__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 480ms ease; } .field-proof__slide.is-active { z-index: 1; opacity: 1; pointer-events: auto; } .field-proof__slide[hidden] { display: none; } .field-proof__photo-link { display: block; width: 100%; height: 100%; overflow: hidden; } .field-proof__photo-link:focus-visible { outline: 3px solid #37d4ff; outline-offset: -4px; } .field-proof__photo-link img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(1.015); transition: transform 6500ms linear; } .field-proof__slide.is-active img { transform: scale(1.03); } .field-proof__slide--work-09 .field-proof__photo-link img { object-position: center top; } .field-proof__dots { display: flex; justify-content: center; align-items: center; margin-top: 8px; } .field-proof__dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .field-proof__dot span { width: 7px; height: 7px; border-radius: 50%; background: #88a7c7; transition: width 220ms ease, background-color 220ms ease, border-radius 220ms ease; } .field-proof__dot[aria-pressed="true"] span { width: 20px; border-radius: 8px; background: #37d4ff; } .field-proof__dot:focus-visible, .field-proof__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .field-proof__toggle { position: absolute; z-index: 2; top: 12px; right: 12px; min-height: 36px; padding: 0 11px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 3px; background: rgb(6 36 93 / 85%); color: #fff; font: inherit; font-size: 12px; cursor: pointer; } .field-proof__services { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; } .field-proof__services a { border-left: 4px solid #37d4ff; padding-left: 20px; } .field-proof__services strong { display: block; font-size: clamp(17px,1.9vw,28px); } .field-proof__services span { display: block; margin-top: 8px; color: #e2f2ff; font-size: 14px; line-height: 1.7; } .section { padding-block: clamp(56px,6vw,96px); } .section-eyebrow, .section-blueprint, .contact-section__micro, .service-card__top, .article-card__meta small { display: none; } .kicker { letter-spacing: 0; font-size: 14px; font-weight: 500; } h2 { font-weight: 600; } .section-heading h2 { font-size: clamp(32px,3.6vw,52px); line-height: 1.4; letter-spacing: -.025em; } .section-heading { margin-bottom: 36px; } .section-lede, .section-heading > p { font-size: 17px; line-height: 1.9; } .services-section { background: #f0f7fc; color: #06245d; } .services-section::before, .section::after { display: none; } .services-section .kicker { color: #055d91; } .services-section .section-lede { color: #405b79; } .service-card { border: 0; box-shadow: none; border-radius: 10px; } .service-card--featured .service-card__bottom { padding-top: 34px; } .service-card--featured::after { display: none; } .process-section { background: #fff; color: #06245d; } .process-section .kicker, .process-section h2 em { color: #055d91; } .process-section__heading > p { color: #405b79; } .process-campaign { height: 360px; box-shadow: none; } .process-campaign__copy { background: #06245d; color: #fff; } .process-campaign__copy > span { display: none; } .process-step { border: 1px solid #c8dce9; background: #f2f8fc; border-radius: 8px; } .process-step + .process-step { border-left: 1px solid #c8dce9; } .process-step:nth-child(even) { background: #f2f8fc; } .process-step::before, .process-step::after { display: none !important; } .work-grid .gallery-tile { border: 0; } .work-grid .gallery-tile:first-child { border: 0; } .work-section__proof-label { margin-bottom: 20px; } .gallery-tile__caption small { font-size: 12px; letter-spacing: 0; } .specs-section { background: #f0f7fc; color: #06245d; } .specs-section .kicker, .specs-section h2 em { color: #055d91; } .specs-section__intro { color: #405b79; font-size: 17px; } .specs-section__visual { border-color: #c6dce9; } .equipment-contexts { display: none; } .equipment-brief { margin-top: 34px; padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 46px; background: #06245d; color: #fff; border-radius: 12px; } .equipment-brief h3 { font-size: 27px; margin: 0 0 14px; } .equipment-brief p { color: #d8eafb; line-height: 1.8; } .equipment-brief ol { margin: 0; padding-left: 23px; display: grid; gap: 20px; } .equipment-brief li { padding-left: 9px; } .equipment-brief li::marker { color: #37d4ff; } .equipment-brief strong, .equipment-brief span { display: block; } .equipment-brief span { margin-top: 5px; color: #d8eafb; font-size: 14px; } .specs-benefits { display: none; } .guides-section .kicker, .guides-section .section-end, .guides-section .section-end .button { color: #06245d; } .site-footer .brand--footer { color: #fff; } .inner-hero { padding-block: 68px; } .inner-hero h1 { font-size: clamp(36px,4.5vw,64px); line-height: 1.4; letter-spacing: -.02em; } .brief-page { background: #f0f7fc; padding-block: 68px 84px; } .brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .brief-intro .kicker { color: #055d91; } .brief-intro h1 { margin: 0 0 22px; color: #06245d; font-size: clamp(36px,3.6vw,52px); line-height: 1.4; letter-spacing: -.025em; } .brief-intro h1 em { color: #055d91; font-style: normal; } .brief-intro > p:not(.kicker) { color: #405b79; font-size: 17px; line-height: 1.9; } .brief-intro .contact-card { border-radius: 8px; margin-top: 14px; } .brief-intro .contact-card:nth-of-type(2) { background: #fff; color: #06245d; border-color: #c6dce9; } .brief-intro .contact-card:nth-of-type(2) small { color: #405b79; } .brief-photo { margin: 28px 0 0; } .brief-photo img { width: 100%; height: 280px; object-fit: cover; object-position: center 40%; border-radius: 10px; } .brief-photo figcaption { font-size: 12px; color: #405b79; margin-top: 9px; } .project-brief { padding: 32px; background: #fff; border: 1px solid #d6e5ee; border-radius: 12px; box-shadow: 0 16px 48px #06245d0b; } .project-brief h2 { color: #06245d; font-size: 27px; margin: 0 0 12px; } .project-brief > p { color: #405b79; font-size: 15px; line-height: 1.8; } .project-brief label { display: block; margin: 22px 0 9px; font-size: 15px; font-weight: 500; color: #06245d; } .project-brief label span { color: #52677b; font-weight: 400; } .project-brief input, .project-brief select, .project-brief textarea { display: block; width: 100%; min-height: 50px; padding: 13px 14px; font: inherit; font-size: 15px; color: #06245d; background: #f7fafc; border: 1px solid #a9bfce; border-radius: 6px; } .project-brief textarea { resize: vertical; line-height: 1.8; } .project-brief input::placeholder, .project-brief textarea::placeholder { color: #607184; } .project-brief input:focus, .project-brief select:focus, .project-brief textarea:focus { outline: 3px solid #37d4ff; outline-offset: 2px; } .project-brief > .button { margin-top: 24px; } .brief-result { padding-top: 12px; margin-top: 24px; border-top: 1px solid #d6e5ee; } .brief-result__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .brief-result__actions .button { min-height: 48px; padding-inline: 15px; font-size: 14px; } .brief-status { color: #055d91 !important; } .brief-note { display: block; margin-top: 18px; color: #52677b; font-size: 12px; line-height: 1.8; } @media (min-width: 1600px) { .hero--campaign .hero__grid { min-height: 850px; } } @media (max-width: 1000px) { .hero--campaign .hero__grid { min-height: 59vw; padding-block: 60px; } .hero--campaign .hero__copy { width: 70%; } .hero--campaign h1 { font-size: 5.4vw; } .hero--campaign .hero__actions .button { min-height: 54px; font-size: 16px; padding-inline: 20px; } .field-proof__grid { gap: 28px; grid-template-columns: .8fr 1fr; } .field-proof__services { gap: 15px; } .field-proof__services a { padding-left: 12px; } .brief-grid { gap: 28px; } .project-brief { padding: 24px; } } @media (max-width: 620px) { .site-header__inner { min-height: 68px; } .hero--campaign .hero__campaign-art { inset: 0; } .hero--campaign .hero__campaign-art img { object-position: center; } .hero--campaign .hero__grid { min-height: 610px; max-height: none; align-items: flex-start; padding-block: 38px; } .hero--campaign .hero__copy { width: 100%; min-height: 0; padding: 0; margin: 0; } .hero--campaign h1 { font-size: clamp(28px,7.9vw,47px); line-height: 1.4; letter-spacing: -.035em; max-width: none; } .hero--campaign .hero__description { max-width: none; margin-top: 16px; font-size: 15px; line-height: 1.8; } .mobile-break { display: block; } .hero--campaign .hero__actions { margin-top: 22px; gap: 10px; flex-wrap: nowrap; } .hero--campaign .hero__actions .button { min-height: 50px; padding-inline: 15px; font-size: 14px; } .hero--campaign .hero__actions .button .icon { width: 18px; } .hero--campaign .hero__art-note { right: 12px; bottom: 10px; font-size: 9px; } .field-proof { padding-block: 32px 38px; } .field-proof__grid { grid-template-columns: 1fr; gap: 24px; } .field-proof h2 { font-size: clamp(27px,7.4vw,39px); margin-bottom: 15px; } .field-proof__copy p { font-size: 16px; line-height: 1.8; } .field-proof__copy .button { display: none; } .field-proof__slides { height: 240px; } .field-proof__services { margin-top: 12px; gap: 13px; } .field-proof__services strong { font-size: 16px; } .field-proof__services span { font-size: 12px; } .field-proof__services a { border-left-width: 3px; padding-left: 11px; } .section { padding-block: 44px; } .section-heading h2 { font-size: 31px; line-height: 1.4; } .section-heading { margin-bottom: 24px; } .section-lede, .section-heading > p { font-size: 15px; } .services-section .mobile-service { color: #06245d; background: #fff; border-color: #c7dce9; } .process-section .mobile-process { background: #f0f7fc; border-color: #c7dce9; color: #06245d; } .process-section .mobile-process__body p { color: #405b79; } .faq-list { display: block; overflow: visible; } .faq-item { margin-bottom: 10px; } .equipment-brief { grid-template-columns: 1fr; padding: 24px; gap: 24px; } .equipment-brief h3 { font-size: 23px; } .specs-section__intro { font-size: 15px; } .brief-page { padding-block: 32px 44px; } .brief-grid { grid-template-columns: 1fr; gap: 32px; } .brief-intro h1 { font-size: 34px; } .brief-intro > p:not(.kicker) { font-size: 15px; } .brief-photo img { height: 230px; } .project-brief { padding: 22px 18px; } .project-brief h2 { font-size: 25px; } .inner-hero h1 { font-size: 36px; } } @media (max-width: 360px) { .hero--campaign h1 { font-size: 7.8vw; } .hero--campaign .hero__grid { min-height: 575px; } .hero--campaign .hero__actions .button { padding-inline: 12px; font-size: 13px; gap: 8px; } .field-proof__services { grid-template-columns: 1fr; gap: 20px; } } @media (prefers-reduced-motion: reduce) { .field-proof__slide, .field-proof__dot span, .field-proof__photo-link img { transition: none; } .field-proof__photo-link img, .field-proof__slide.is-active img { transform: none; } } @media (max-width: 620px) { .site-header .brand--text { font-size: 25px; } .hero--campaign .hero__campaign-art { inset: 275px 0 0; } .hero--campaign .hero__campaign-art img { object-position: center 46%; } .hero--campaign .hero__grid { min-height: 640px; padding-top: 30px; } .hero--campaign .hero__copy { background: #06245d; padding-bottom: 30px; } .hero--campaign .hero__actions .button { display: inline-flex; width: auto; flex: 0 1 auto; } .hero--campaign .hero__actions .button:first-child { width: auto; } .hero--campaign .hero__actions .button--outline { display: inline-flex; } } @media (max-width: 360px) { .hero--campaign .hero__grid { min-height: 630px; } } @media (max-width: 620px) { .hero--campaign { background: #06245d; } .hero--campaign .hero__actions .button--outline { background: transparent; border-color: #d8eeff; color: #fff; } } @media (min-width: 1101px) { .desktop-nav a { font-size: 17px; } .header-call { font-size: 19px; padding: 15px 20px; } } .guides-section .section-end > span { color: #405b79; } @media (max-width: 620px) { .services-section .mobile-service__label small, .services-section .mobile-service__body p { color: #405b79; } .work-section .section-end .button, .work-section .section-end .button span { color: #fff; } .specs-section h2 { color: #06245d; } } .has-chapter-rail { padding-left: 104px; background: #fff; } .has-chapter-rail .chapter-rail { display: block; position: fixed; z-index: 65; top: 86px; bottom: 0; left: 0; right: auto; width: 104px; padding: 16px 8px; transform: none; border: 0; border-right: 1px solid #dce5ed; border-radius: 0; background: #fff; color: #06245d; box-shadow: none; } .has-chapter-rail .chapter-rail::before { top: 50px; bottom: 50px; left: 51px; width: 2px; background: linear-gradient(to bottom,#37d4ff var(--rail-progress,0%),#c7d3df var(--rail-progress,0%)); } .has-chapter-rail .chapter-rail__links { height: 100%; display: grid; grid-template-rows: repeat(8,minmax(48px,1fr)); gap: 0; } .has-chapter-rail .chapter-rail__links a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 88px; height: 100%; min-height: 48px; gap: 4px; border-radius: 0; background: transparent; color: #06245d; transform: none; } .has-chapter-rail .chapter-rail__links a::after { content: ''; position: absolute; bottom: -4px; left: 40px; width: 8px; height: 8px; border-radius: 50%; background: #c7d3df; } .has-chapter-rail .chapter-rail__links a:last-child::after { display: none; } .has-chapter-rail .chapter-rail__links a[aria-current]::after { background: #37d4ff; } .has-chapter-rail .chapter-rail__links a span { position: static; width: auto; max-width: none; padding: 0; border-radius: 0; color: inherit; background: #fff; opacity: 1; transform: none; pointer-events: auto; } .chapter-rail__symbol { display: grid; place-items: center; width: 64px !important; height: clamp(40px,6.45vh,64px); border-radius: 12px !important; transition: background-color 200ms ease; } .chapter-rail__symbol img { display: block; width: 34px; height: 34px; transition: transform 250ms ease; } .chapter-rail__label { font-size: 14px !important; line-height: 1.5; font-weight: 500 !important; } .has-chapter-rail .chapter-rail a[aria-current="location"] .chapter-rail__symbol { background: #37d4ff; } .has-chapter-rail .chapter-rail a:hover .chapter-rail__symbol, .has-chapter-rail .chapter-rail a:focus-visible .chapter-rail__symbol { background: #d6f6ff; } .has-chapter-rail .chapter-rail a:hover .chapter-rail__symbol img { transform: translateY(-2px) rotate(-5deg); } .has-chapter-rail .chapter-rail a[aria-current="location"]:hover .chapter-rail__symbol { background: #37d4ff; } .has-chapter-rail .chapter-rail a:focus-visible { outline: 2px solid #055d91; outline-offset: -2px; } .has-chapter-rail .chapter-rail__quick { display: none; } @media (max-width: 1100px) and (min-width: 621px) { .has-chapter-rail { padding-left: 72px; } .has-chapter-rail .chapter-rail { width: 72px; padding-inline: 4px; top: 86px; } .has-chapter-rail .chapter-rail::before { left: 35px; } .has-chapter-rail .chapter-rail__links a { width: 64px; } .has-chapter-rail .chapter-rail__links a::after { left: 28px; } .chapter-rail__symbol img { width: 26px; height: 26px; } .chapter-rail__label { font-size: 11px !important; } } @media (max-height: 620px) and (min-width: 621px) { .has-chapter-rail .chapter-rail { overflow-y: auto; } .has-chapter-rail .chapter-rail__links { min-height: 432px; } .chapter-rail__symbol { height: 34px; } .chapter-rail__symbol img { width: 24px; height: 24px; } } @media (max-width: 620px) { .has-chapter-rail { padding-left: 0; } .has-chapter-rail .mobile-bottom-nav { display: none; } .has-chapter-rail .chapter-rail { top: auto; left: 0; bottom: 0; width: 100%; padding: 3px 6px env(safe-area-inset-bottom); min-height: calc(64px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid #dce5ed; z-index: 75; } .has-chapter-rail .chapter-rail::before, .has-chapter-rail .chapter-rail__links { display: none; } .has-chapter-rail .chapter-rail__quick { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: center; } .has-chapter-rail .chapter-rail__quick > a, .has-chapter-rail .chapter-rail__mobile summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 0; font-size: 11px; color: #06245d; background: #fff; border: 0; cursor: pointer; } .has-chapter-rail .chapter-rail__mobile { display: block; position: static; } .has-chapter-rail .chapter-rail__mobile summary::-webkit-details-marker { display: none; } .has-chapter-rail .chapter-rail__mobile summary img { width: 25px; height: 25px; } .has-chapter-rail .chapter-rail__quick .chapter-rail__symbol { width: 42px !important; height: 30px; border-radius: 8px !important; } .has-chapter-rail .chapter-rail__symbol img { width: 23px; height: 23px; } .has-chapter-rail .chapter-rail__label { font-size: 11px !important; } .has-chapter-rail .chapter-rail__mobile .chapter-rail__panel { position: absolute; left: 12px; right: 12px; bottom: calc(136px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 16px; background: #fff; border: 1px solid #c7d3df; border-radius: 14px; box-shadow: 0 8px 28px #06245d26; } .has-chapter-rail .chapter-rail__mobile:not([open]) .chapter-rail__panel { display: none; } .has-chapter-rail .chapter-rail__panel a { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 48px; padding: 4px 8px; color: #06245d; background: #f0f7fc; border-radius: 8px; } .has-chapter-rail .chapter-rail__panel a[aria-current] { background: #d6f6ff; } } @media (prefers-reduced-motion: reduce) { .chapter-rail__symbol, .chapter-rail__symbol img { transition: none; } .has-chapter-rail .chapter-rail a:hover .chapter-rail__symbol img { transform: none; } } .has-chapter-rail .chapter-rail__links a .chapter-rail__tooltip { position: absolute; left: calc(100% + 12px); right: auto; top: 50%; width: max-content; padding: 8px 14px; border-radius: 6px; background: #06245d; color: #fff; font-size: 13px; opacity: 0; transform: translate(-4px,-50%); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .has-chapter-rail .chapter-rail__links a:hover .chapter-rail__tooltip, .has-chapter-rail .chapter-rail__links a:focus-visible .chapter-rail__tooltip { opacity: 1; transform: translate(0,-50%); } .chapter-rail__quick .chapter-rail__tooltip { display: none; } @media (max-width: 620px) { .has-chapter-rail .chapter-rail__mobile summary[data-current] { background: #d6f6ff; border-radius: 8px; } } .contact-card.contact-card--line { border-color: #06a34b; background: #f1fff6; color: #06245d; } .contact-card.contact-card--line > .icon:first-child { color: #07853e; } .contact-card.contact-card--line small { color: #315c45; } .line-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 16px 0; padding: 12px; background: #fff; border: 1px solid #cfdee5; border-radius: 8px; color: #06245d; } .line-qr img { display: block; width: 184px; max-width: 100%; height: auto; } .line-qr span { max-width: 220px; text-align: center; font-size: 13px; line-height: 1.7; } .contact-section__intro .line-qr { grid-column: 2; } @media (max-width: 620px) { .mobile-action-dock { grid-template-columns: 1.45fr 1fr 1fr; } .mobile-action-dock a.mobile-action-dock__line { background: #087c3b; color: #fff; } } .site-footer a[href*="line.me"] { display: block; margin-block: 12px; } .catalog-hero { position:relative; isolation:isolate; min-height:400px; overflow:hidden; background:#bfcdd7; } .catalog-hero__art { position:absolute; inset:0 0 0 42%; z-index:-3; display:block; } .catalog-hero__art img { width:100%; height:100%; object-fit:cover; object-position:64% 48%; } .catalog-hero__edge,.catalog-hero__panel { position:absolute; z-index:-2; inset:0 auto 0 0; width:57%; clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%); } .catalog-hero__edge { background:#32d2f5; } .catalog-hero__panel { z-index:-1; width:56.3%; background:linear-gradient(125deg,#07489f 0%,#06255f 65%,#061c4a 100%); } .catalog-hero__panel::before { content:''; position:absolute; inset:0; background:linear-gradient(38deg,transparent 36%,#0c56b222 36%,#0c56b222 48%,transparent 48%),linear-gradient(145deg,transparent 58%,#126bdc18 58%,#126bdc18 70%,transparent 70%); } .catalog-hero__panel::after { content:''; position:absolute; right:20%; bottom:0; width:20px; height:63px; transform:skewX(-26deg); background:#f47b2a; } .catalog-hero__inner { display:flex; align-items:center; min-height:400px; padding-block:38px; } .catalog-hero__copy { width:57%; min-width:0; padding-right:34px; } .catalog-hero__eyebrow { margin:0 0 12px; color:#37d4ff; font-size:13px; font-weight:600; letter-spacing:.07em; } .catalog-hero h1 { margin:0 0 12px; font-size:clamp(38px,4.2vw,64px); font-weight:600; line-height:1.35; color:#fff; letter-spacing:0; } .catalog-hero__description { margin:0; max-width:620px; color:#d8e8f7; font-size:clamp(16px,1.4vw,20px); line-height:1.8; } .catalog-hero__mobile-break { display:none; } .catalog-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; } .catalog-hero__actions .button { min-height:48px; padding:11px 18px; gap:12px; font-size:15px; border-radius:4px; } .catalog-hero__actions .icon { flex:none; width:18px; height:18px; aspect-ratio:1; } .catalog-hero__primary { background:#b94d06; border:1px solid #d86b20; color:#fff; } .catalog-hero__secondary { background:transparent; border:1px solid #bacfe1; color:#fff; } .catalog-hero__actions .button:focus-visible { outline-color:#37d4ff; } .catalog-hero__note { position:absolute; right:18px; bottom:10px; margin:0; padding:4px 7px; color:#fff; background:#06245dc9; font-size:10px; line-height:1.7; } .catalog-browser { scroll-margin-top:96px; --catalog-ink:#06245d; --catalog-blue:#087ca8; --catalog-border:#c8dce9; --catalog-ease:cubic-bezier(.2,.7,.2,1); color:var(--catalog-ink); background:#f6f9fc; padding-block:18px 34px; } .catalog-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .catalog-heading { margin-bottom:16px; } .catalog-breadcrumb { display:inline-flex; min-height:22px; align-items:center; font-size:12px; color:#405b79; } .catalog-heading__path { color:#6b8199; font-size:12px; } .catalog-heading__row { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:0; } .catalog-heading h2 { margin:0 0 7px; font-size:clamp(23px,2.1vw,28px); line-height:1.4; color:#06245d; font-weight:600; } .catalog-heading__row p { margin:0; font-size:14px; color:#405b79; line-height:1.8; } .catalog-heading__contact { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; color:#087c3b; font-size:14px; white-space:nowrap; } .catalog-heading__contact .icon { width:20px; height:20px; } .catalog-tools { display:flex; align-items:center; justify-content:space-between; gap:20px; } .catalog-filters { display:flex; flex-wrap:wrap; gap:8px; } .catalog-filters button { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:9px 13px; border:1px solid transparent; border-bottom:2px solid transparent; border-radius:0; color:#183b60; background:transparent; font:inherit; font-size:13px; cursor:pointer; transition:background .18s,color .18s,border-color .18s,border-radius .22s; } .catalog-filters button[aria-pressed="true"] { color:#06245d; background:transparent; border-bottom-color:#087ca8; } .catalog-filters button span { font-size:11px; opacity:.8; } .catalog-search { flex:0 1 280px; min-width:180px; } .catalog-search input { width:100%; min-width:0; min-height:44px; padding:11px 14px; border:1px solid #b7cedf; border-radius:5px; font:inherit; font-size:14px; color:#06245d; background:#fff; transition:border-color .18s,box-shadow .18s; } .catalog-search input:focus-visible { outline:2px solid #087ca8; outline-offset:3px; } .catalog-count { font-size:12px; color:#405b79; margin:10px 0 8px; } .catalog-group { margin-top:14px; } .catalog-group__heading { display:flex; align-items:baseline; gap:12px; margin-bottom:10px; } .catalog-group__heading h2 { color:#06245d; font-size:22px; line-height:1.5; margin:0; } .catalog-group__heading > span { font-size:12px; color:#405b79; } .catalog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch; } .catalog-card { min-width:0; align-self:stretch; display:flex; flex-direction:column; border:1px solid #c8dce9; border-radius:6px; background:#fff; overflow:hidden; scroll-margin-top:110px; transition:border-color .22s,box-shadow .25s,border-radius .28s; } .catalog-card:target { outline:2px solid #087ca8; outline-offset:3px; } .catalog-card__visual { position:relative; display:block; flex:none; width:100%; height:190px; margin:0; padding:0; border:0; border-bottom:1px solid #d7e5ef; border-radius:0; overflow:hidden; background:#f3f7fa; cursor:pointer; transition:border-radius .3s var(--catalog-ease); } .catalog-photo-stack { display:block; position:relative; width:100%; height:100%; transition:transform .32s var(--catalog-ease); } .catalog-photo-original { display:block; width:100%; height:100%; padding:8px; object-fit:contain; } .catalog-cover-layer { position:absolute; inset:0; display:block; background:#f3f7fa; opacity:0; pointer-events:none; transition:opacity .2s; } .catalog-cover-layer img { display:block; width:100%; height:100%; object-fit:contain; } .catalog-photo-stack.is-cover-ready .catalog-cover-layer { opacity:1; } .catalog-original-label { position:absolute; top:8px; left:8px; padding:3px 7px; border:1px solid #d1e0e9; border-radius:4px; background:#fff; color:#405b79; font-size:10px; opacity:0; pointer-events:none; transition:opacity .2s; } .catalog-card__visual:focus-visible .catalog-cover-layer { opacity:0; } .catalog-card__visual:focus-visible .catalog-original-label { opacity:1; } .catalog-card .icon { flex-shrink:0; aspect-ratio:1; overflow:visible; } .catalog-image-hint { position:absolute; display:flex; align-items:center; justify-content:center; gap:5px; right:9px; bottom:9px; padding:5px 8px; border:1px solid #c8dce9; border-radius:5px; background:#fff; color:#06245d; font-size:11px; opacity:0; transform:translateY(5px); transition:opacity .2s,transform .22s; pointer-events:none; } .catalog-image-hint .icon { width:14px; height:14px; } .catalog-card__body { display:flex; flex:1; flex-direction:column; padding:14px; } .catalog-card h3 { margin:0 0 6px; min-height:32px; font-size:21px; line-height:1.5; color:#06245d; } .catalog-model { display:flex; align-items:center; gap:6px; width:100%; min-height:44px; padding:0; border:0; background:transparent; color:inherit; text-align:left; font:inherit; font-weight:600; cursor:pointer; } .catalog-model > span { min-width:0; overflow-wrap:anywhere; text-decoration-thickness:1px; text-underline-offset:5px; } .catalog-model .icon { flex:none; width:16px; height:16px; opacity:0; transform:translateX(-4px); transition:opacity .2s,transform .22s; } .catalog-card__highlight { display:flex; align-items:start; gap:6px; margin:0 0 12px; min-height:25px; font-size:13px; line-height:1.7; color:#096b94; } .catalog-card__highlight > span { min-width:0; overflow-wrap:anywhere; } .catalog-card__highlight .icon { flex:none; width:16px; height:16px; margin-top:3px; } .catalog-card__actions { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:auto; } .catalog-spec-link { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:44px; padding:4px 0; border:0; background:transparent; color:#066c9f; font:inherit; font-size:13px; cursor:pointer; } .catalog-spec-link .icon { flex:none; width:15px; height:15px; transition:transform .22s; } .catalog-line { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 12px; border:1px solid #087c3b; border-radius:4px; background:#087c3b; color:#fff; font:inherit; font-size:13px; font-weight:500; text-decoration:none; cursor:pointer; transition:background .18s,border-color .18s,border-radius .25s,box-shadow .25s; } .catalog-line .icon { flex:none; width:17px; height:17px; } .intent-text { display:inline-grid; align-items:center; line-height:1.8; } .intent-text > span { grid-area:1 / 1; transition:opacity .18s,transform .22s; } .intent-text__hover { opacity:0; transform:translateY(6px); pointer-events:none; } :is(a,button):focus-visible .intent-text__base { opacity:0; transform:translateY(-6px); } :is(a,button):focus-visible .intent-text__hover { opacity:1; transform:translateY(0); } .catalog-card:focus-within { border-color:#087ca8; box-shadow:0 5px 18px #06245d12; } .catalog-model:focus-visible > span { text-decoration:underline; } .catalog-model:focus-visible .icon { opacity:1; transform:translateX(0); } .catalog-card__visual:focus-visible { outline-offset:-4px; } .catalog-card__visual:focus-visible .catalog-image-hint { opacity:1; transform:translateY(0); } .catalog-dialog-open { overflow:hidden; scrollbar-gutter:stable; } .catalog-dialog { width:min(880px,calc(100vw - 40px)); max-height:calc(100dvh - 48px); margin:auto; padding:0; border:1px solid #c8dce9; border-radius:14px; overflow:auto; overscroll-behavior:contain; color:#06245d; background:#fff; box-shadow:0 24px 90px #00153342; } .catalog-dialog:not([open]) { display:none; } .catalog-dialog[open] { animation:catalog-dialog-in .2s var(--catalog-ease); } .catalog-dialog::backdrop { background:#061d45b8; } .catalog-dialog__header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:7px 18px 7px 24px; border-bottom:1px solid #d7e5ef; background:#fff; font-size:13px; color:#405b79; } .catalog-dialog__close { display:grid; place-items:center; flex:none; width:44px; height:44px; border:1px solid #c8dce9; border-radius:6px; color:#06245d; background:#f4f8fb; cursor:pointer; } .catalog-dialog__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; padding:28px; } .catalog-dialog__photo { height:300px; border:1px solid #d7e5ef; border-radius:6px; overflow:hidden; background:#e7f3fb; } .catalog-dialog__photo img { width:100%; height:100%; object-fit:contain; } .catalog-dialog__intro { min-width:0; } .catalog-dialog .kicker { margin:0 0 5px; color:#1478a0; font-size:12px; } .catalog-dialog h2 { margin:0 0 10px; font-size:30px; line-height:1.5; overflow-wrap:anywhere; } .catalog-dialog__highlight { margin:0 0 14px; color:#087ca8; font-size:17px; font-weight:500; } .catalog-dialog__intro > p:not(.kicker):not(.catalog-dialog__highlight):not(.catalog-dialog__copy-status) { margin:0 0 18px; color:#405b79; font-size:14px; line-height:1.9; } .catalog-dialog__intro .catalog-line { width:100%; min-height:48px; padding:10px 14px; font-size:14px; } .catalog-copy { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:10px; padding:8px; border:1px solid #c8dce9; border-radius:5px; background:#fff; color:#06245d; font:inherit; font-size:13px; cursor:pointer; } .catalog-copy .icon { width:17px; height:17px; } .catalog-dialog__copy-status { margin:10px 0 0; font-size:12px; color:#087c3b; line-height:1.8; } .catalog-dialog__copy-status:empty { display:none; } .catalog-copy-fallback { width:100%; min-height:130px; margin-top:10px; padding:10px; border:1px solid #b7cedf; border-radius:4px; font:inherit; font-size:13px; color:#06245d; } .catalog-dialog__specs { padding:0 28px 28px; } .catalog-dialog__specs h3 { font-size:19px; margin:16px 0 12px; } .catalog-dialog__specs dl { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin:0; } .catalog-dialog__specs dl > div { min-width:0; padding:12px 0; border-top:1px solid #d7e5ef; } .catalog-dialog__specs dt { font-size:12px; color:#405b79; } .catalog-dialog__specs dd { margin:4px 0 0; font-size:14px; font-weight:500; color:#06245d; overflow-wrap:anywhere; } .catalog-dialog__specs ul { padding-left:20px; color:#405b79; font-size:14px; line-height:1.9; } .catalog-source { margin:18px 0 0; padding:14px; background:#f0f6fa; color:#405b79; font-size:12px; line-height:1.9; } .catalog-reference { display:flex; align-items:start; gap:10px; margin-top:28px; padding:14px 16px; border:1px solid #d0e0eb; border-radius:5px; background:#fff; color:#405b79; } .catalog-reference .icon { flex:none; width:19px; height:19px; margin-top:2px; } .catalog-reference p { margin:0; font-size:12px; line-height:1.8; } .catalog-empty { padding:38px 20px; text-align:center; background:#fff; border:1px solid #c8dce9; border-radius:6px; } .catalog-empty h2 { font-size:22px; margin:0 0 12px; } .catalog-empty p { color:#405b79; line-height:1.8; font-size:14px; } .catalog-browser [hidden] { display:none !important; } .catalog-assistance { padding:26px 0; border-top:1px solid #d7e5ef; background:#fff; } .catalog-assistance > div { display:flex; align-items:center; justify-content:space-between; gap:20px; } .catalog-assistance strong { color:#06245d; font-size:18px; } .catalog-assistance p { margin:5px 0 0; font-size:13px; color:#405b79; line-height:1.8; } .catalog-assistance > div > div:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:20px; } .catalog-assistance a:not(.catalog-line) { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:#066c9f; font-size:14px; } .catalog-assistance a:not(.catalog-line) .icon { width:17px; height:17px; } .product-preview { background:#edf5fb; } .product-preview__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .product-preview__card { border:1px solid #cbdce9; background:#fff; border-radius:8px; overflow:hidden; color:#06245d; transition:border-color .22s,border-radius .28s,box-shadow .25s; } .product-preview__image { position:relative; height:260px; background:#168dc4; overflow:hidden; transition:border-radius .28s; } .product-preview__image img { width:100%; height:100%; object-fit:contain; transition:transform .32s; } .product-preview__image > span { position:absolute; left:14px; bottom:14px; color:#06245d; background:#fff; font-size:9px; padding:6px 9px; } .product-preview__copy { padding:24px; } .product-preview__copy small { color:#405b79; font-size:12px; } .product-preview__copy h3 { font-size:28px; margin:4px 0 8px; } .product-preview__copy p { color:#0e668b; font-size:14px; margin:0; } .product-preview__link { display:flex; justify-content:space-between; border-top:1px solid #d7e5ed; padding-top:17px; margin-top:18px; font-size:14px; } .product-preview__link .icon { transition:transform .22s; } @keyframes catalog-dialog-in { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } } @media (hover:hover) and (pointer:fine) { :is(a,button):hover .intent-text__base { opacity:0; transform:translateY(-6px); } :is(a,button):hover .intent-text__hover { opacity:1; transform:translateY(0); } .catalog-card:hover { border-color:#087ca8; border-radius:15px; box-shadow:0 5px 18px #06245d14; } .catalog-card__visual:hover { border-radius:13px; } .catalog-card__visual:hover .catalog-photo-stack { transform:scale(1.035); } .catalog-card__visual:hover .catalog-cover-layer { opacity:0; } .catalog-card__visual:hover .catalog-original-label { opacity:1; } .catalog-card__visual:hover .catalog-image-hint { opacity:1; transform:translateY(0); } .catalog-model:hover > span { text-decoration:underline; } .catalog-model:hover .icon { opacity:1; transform:translateX(0); } .catalog-spec-link:hover .icon { transform:translateX(3px); } .catalog-line:hover { background:#05672f; border-color:#05672f; border-radius:10px; box-shadow:0 3px 10px #087c3b20; } .catalog-filters button:hover { border-color:#087ca8; border-radius:10px; } .catalog-filters button:not([aria-pressed="true"]):hover { background:#dceefa; } .catalog-hero__primary:hover { background:#a64004; } .catalog-hero__secondary:hover { background:#ffffff12; border-color:#37d4ff; } .catalog-copy:hover { border-color:#087ca8; background:#f4f9fc; } .product-preview__card:hover { border-color:#1179a3; border-radius:17px; box-shadow:0 5px 18px #06245d14; } .product-preview__card:hover .product-preview__image { border-radius:14px; } .product-preview__card:hover .product-preview__image img { transform:scale(1.035); } .product-preview__card:hover .product-preview__link .icon { transform:translateX(4px); } } @media (min-width:621px) and (max-width:900px) { .catalog-hero__copy { width:62%; padding-right:20px; } .catalog-hero__edge { width:64%; } .catalog-hero__panel { width:63.2%; } .catalog-hero__art { left:40%; } .catalog-hero__actions { gap:8px; } .catalog-hero__actions .button { padding:10px; gap:6px; font-size:13px; } } @media (max-width:1200px) { .desktop-nav { gap:18px; } .catalog-tools { align-items:stretch; gap:12px; } .catalog-filters { gap:6px; } .catalog-filters button { font-size:12px; padding-inline:10px; } .catalog-search { flex-basis:240px; } .catalog-card__body { padding:12px; } .catalog-card__actions { gap:4px; } .catalog-line { padding-inline:8px; } } @media (min-width:621px) and (max-width:1000px) { .catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .catalog-tools { flex-direction:column; } .catalog-search { flex-basis:auto; width:100%; } .catalog-card__actions { flex-direction:column; align-items:stretch; } .catalog-spec-link { min-height:44px; } } @media (max-width:620px) { .catalog-hero { display:flex; flex-direction:column; min-height:0; } .catalog-hero__inner { order:0; min-height:0; padding-block:27px 38px; } .catalog-hero__copy { width:100%; padding:0; } .catalog-hero__edge,.catalog-hero__panel { bottom:210px; width:100%; clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),50% 100%,0 calc(100% - 16px)); } .catalog-hero__panel { bottom:216px; } .catalog-hero__panel::after { right:8%; width:13px; height:34px; } .catalog-hero__art { position:relative; inset:auto; order:1; height:210px; } .catalog-hero__art img { object-position:center 48%; } .catalog-hero__eyebrow { font-size:11px; margin-bottom:7px; } .catalog-hero h1 { font-size:clamp(29px,7.8vw,40px); margin-bottom:8px; } .catalog-hero__description { font-size:14px; line-height:1.8; } .catalog-hero__mobile-break { display:block; } .catalog-hero__actions { gap:8px; margin-top:18px; } .catalog-hero__actions .button { flex:1 1 0; min-width:0; min-height:44px; padding:9px 7px; gap:5px; font-size:12px; } .catalog-hero__actions .icon { width:15px; height:15px; } .catalog-hero__note { right:9px; bottom:7px; font-size:9px; } .catalog-original-label { display:none; } .mobile-bottom-nav { grid-template-columns:repeat(5,minmax(0,1fr)); } .catalog-browser { padding-block:18px 28px; } .catalog-heading { margin-bottom:17px; } .catalog-heading__path,.catalog-breadcrumb { font-size:11px; } .catalog-heading__row { display:block; margin-top:8px; } .catalog-heading h2 { font-size:28px; } .catalog-heading__row p { font-size:12px; } .catalog-heading__contact { display:none; } .catalog-tools { display:grid; gap:12px; } .catalog-filters { display:grid; grid-template-columns:1fr 1fr; gap:7px; } .catalog-filters button { justify-content:space-between; min-width:0; font-size:12px; padding:9px 10px; } .catalog-filters button span { font-size:10px; } .catalog-search { min-width:0; width:100%; } .catalog-search input { font-size:16px; } .catalog-count { margin:12px 0 16px; } .catalog-group { margin-top:20px; } .catalog-group__heading { gap:8px; margin-bottom:11px; } .catalog-group__heading h2 { font-size:20px; } .catalog-group__heading > span { font-size:11px; } .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .catalog-card { scroll-margin-top:90px; } .catalog-card__visual { height:150px; } .catalog-card__body { padding:11px; } .catalog-card h3 { min-height:30px; font-size:18px; } .catalog-model { min-height:44px; } .catalog-model .icon { display:none; } .catalog-card__highlight { gap:4px; font-size:12px; min-height:34px; margin-bottom:5px; } .catalog-card__highlight .icon { width:13px; height:13px; margin-top:4px; } .catalog-card__actions { flex-direction:column; align-items:stretch; gap:3px; } .catalog-spec-link { font-size:12px; min-height:44px; } .catalog-line { min-height:44px; padding-inline:7px; font-size:12px; gap:5px; } .catalog-line .icon { width:15px; height:15px; } .catalog-image-hint { display:none; } .catalog-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 24px); border-radius:12px; } .catalog-dialog__header { padding-inline:16px 10px; min-height:56px; font-size:12px; } .catalog-dialog__grid { grid-template-columns:1fr; gap:18px; padding:18px; } .catalog-dialog__photo { height:210px; } .catalog-dialog h2 { font-size:25px; } .catalog-dialog__specs { padding:0 18px 22px; } .catalog-dialog__specs dl { grid-template-columns:1fr; } .catalog-dialog__specs h3 { font-size:18px; } .catalog-dialog__intro .catalog-line { font-size:13px; } .catalog-copy { font-size:12px; } .catalog-reference { margin-top:22px; padding:12px; } .catalog-reference p { font-size:11px; } .catalog-assistance > div { display:block; } .catalog-assistance strong { font-size:17px; } .catalog-assistance > div > div:last-child { margin-top:12px; gap:14px; } .product-preview__grid { grid-template-columns:1fr; gap:18px; } .product-preview__card { display:grid; grid-template-columns:.85fr 1fr; align-items:center; } .product-preview__image { height:100%; min-height:205px; } .product-preview__image > span { display:none; } .product-preview__copy { padding:18px; } .product-preview__copy h3 { font-size:24px; } .product-preview__copy p { font-size:12px; } .product-preview__link { font-size:12px; padding-top:12px; margin-top:13px; } } @media (prefers-reduced-motion:reduce) { .catalog-hero *, .catalog-hero *::before, .catalog-hero *::after, .catalog-browser *, .catalog-browser *::before, .catalog-browser *::after, .catalog-assistance *, .product-preview * { transition:none !important; animation:none !important; } .catalog-photo-stack, .catalog-model .icon, .catalog-spec-link .icon, .product-preview__image img, .product-preview__link .icon { transform:none !important; } .intent-text > span { transform:none !important; } }