/* KM Garage — photographic editorial layout, September 2026 */
:root { --ink:#102239; --navy:#071a31; --blue:#1763df; --blue-2:#62b5ff; --muted:#56667a; --ice:#f3f6fa; --radius:20px; --container:min(1200px,calc(100% - 64px)); }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:inherit; font-weight:750; letter-spacing:-.045em; text-transform:none; line-height:1.08; text-wrap:balance; }
h2 { font-size:clamp(2.1rem,4.2vw,3.65rem); }
h3 { font-size:1.28rem; letter-spacing:-.025em; line-height:1.24; }
.eyebrow { font-size:.75rem; letter-spacing:.13em; }
.lead { font-size:1.1rem; line-height:1.7; }
.section { padding:100px 0; scroll-margin-top:86px; }
.section-heading { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:90px; margin-bottom:48px; }
.section-heading > * { min-width:0; }
.section-heading p:last-child { margin-bottom:0; }
.section h2 + .lead, .split h2 + p { margin-top:24px; }
.button { border-radius:10px; font-size:.9rem; padding:14px 22px; min-height:52px; }
.brand-logo { width:190px; height:70px; }
.nav { min-height:86px; }
.topbar { font-size:.75rem; }
.text-link { font-size:.88rem; }
.hero-v2 h1 { font-size:clamp(3.2rem,6.5vw,6rem); line-height:1.04; letter-spacing:-.055em; }
.hero-v2 h1 span { margin-top:12px; font-size:.68em; line-height:1.12; }
.hero-v2__copy { width:min(780px,70%); }
.hero-v2__inner { min-height:710px; padding:100px 0; }
.hero-v2 { min-height:710px; }
.hero-v2__lead { font-size:1.15rem; max-width:530px; }
.hero-v2__proof { font-size:.72rem; }
.quick-info { box-shadow:none; }
.quick-info__grid > * { padding-block:24px; }
.services-section { background:#f3f6fa; }
.service-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.service-tile { min-width:0; display:flex; flex-direction:column; background:white; border:1px solid #e1e8f0; border-radius:18px; overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }
.service-tile:hover { transform:translateY(-5px); box-shadow:0 18px 32px #142d4812; }
.service-tile__art { display:grid; place-items:center; height:196px; margin:14px 14px 0; background:white; }
.service-tile__art img { width:190px; height:190px; object-fit:contain; }
.service-tile__body { padding:20px 24px 28px; display:flex; flex:1; flex-direction:column; }
.service-tile__index { margin-bottom:12px; color:#65758a; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; }
.service-tile h3 { font-size:1.2rem; min-height:2.5em; }
.service-tile p { margin:14px 0 22px; color:var(--muted); font-size:.92rem; line-height:1.65; }
.service-tile .text-link { margin-top:auto; color:var(--blue); font-size:.8rem; }
.work-grid { grid-template-columns:1fr 1fr 1fr; grid-auto-rows:410px; gap:24px; }
.work-card { box-shadow:none; border-radius:18px; }
.work-card figcaption strong { font-family:inherit; font-size:1.4rem; letter-spacing:-.03em; }
.work-card::after { inset:20% 0 0; background:linear-gradient(transparent,#071a31ee); }
.work-card figcaption { padding:28px; }
.story-layout { display:grid; grid-template-columns:1.05fr 1fr; gap:80px; align-items:center; }
.story-media { position:relative; min-width:0; height:620px; border-radius:20px; overflow:hidden; }
.story-media > img { width:100%; height:100%; object-fit:cover; object-position:60% center; }
.story-media::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#06182ce8); }
.story-caption { position:absolute; z-index:1; left:32px; right:32px; bottom:36px; color:white; }
.story-caption span { display:block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:#c5dbee; }
.story-caption strong { display:block; font-size:1.8rem; line-height:1.25; letter-spacing:-.035em; margin-top:8px; }
.story-copy .lead { margin:24px 0 20px; }
.story-copy > p:not(.eyebrow) { color:var(--muted); }
.story-values { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:30px 0 34px; padding-top:26px; border-top:1px solid var(--line); }
.story-values span { display:block; color:var(--blue); font-size:.75rem; font-weight:800; margin-bottom:10px; }
.story-values strong { display:block; line-height:1.4; font-size:.95rem; }
.story-values p { color:var(--muted); font-size:.87rem; margin-top:8px; }
.brand-showcase { min-height:450px; box-shadow:none; }
.brand-showcase img { height:450px; min-height:0; object-position:center; }
.brand-showcase__copy { padding:28px; width:460px; bottom:32px; right:32px; }
.brand-showcase__copy h2 { font-size:2rem!important; }
.brand-showcase__copy p { font-size:.9rem; }
.partners__intro { padding-top:44px; gap:60px; align-items:start; }
.partners__intro h2 { font-size:2rem!important; }
.partners__intro > p { max-width:380px; }
.partner-logo { background:#fff; border-color:#e5ebf2; }
.repair-process { background:#081c34; color:white; }
.process-layout { display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:stretch; }
.process-visual { position:relative; min-width:0; overflow:hidden; border-radius:18px; }
.process-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.process-visual::after { content:""; position:absolute; inset:30% 0 0; background:linear-gradient(transparent,#071a31ed); }
.process-visual__note { position:absolute; z-index:1; left:32px; bottom:34px; right:32px; }
.process-visual__note span { display:block; color:#d2e4f4; font-size:.8rem; }
.process-visual__note strong { display:block; margin-top:6px; font-size:2rem; line-height:1.15; letter-spacing:-.03em; }
.process-copy { padding:10px 0; }
.process-copy .eyebrow { color:#78beff; }
.process-copy > .lead { color:#b7c8da; margin:22px 0 28px; }
.process-list { list-style:none; padding:0; margin:0 0 30px; }
.process-list li { display:grid; grid-template-columns:40px minmax(0,1fr); gap:20px; padding:22px 0; border-top:1px solid #ffffff24; }
.process-number { color:#80c4ff; font-weight:700; font-size:.9rem; padding-top:3px; }
.process-list h3 { font-size:1.1rem; letter-spacing:-.02em; }
.process-list p { color:#b7c8da; font-size:.92rem; margin:9px 0 0; }
.page-hero--photo { position:relative; isolation:isolate; display:flex; align-items:center; min-height:560px; padding:76px 0 86px; overflow:hidden; background:var(--navy); }
.page-hero__media { position:absolute; inset:0; z-index:-2; }
.page-hero__media img { width:100%; height:100%; object-fit:cover; object-position:60% center; }
.page-hero--photo::before { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(90deg,#041428ed 0%,#041428c9 40%,#0414283d 100%); }
.page-hero--photo h1 { max-width:780px; font-size:clamp(2.8rem,5.9vw,5.5rem); line-height:1.04; }
.page-hero--photo p { max-width:550px; font-size:1.12rem; line-height:1.7; }
.page-hero--photo .eyebrow { font-size:.75rem; color:#85c6ff; margin:0 0 18px; }
.page-hero--photo .breadcrumbs { margin-bottom:38px; }
.page-hero--photo h1 + p { margin-bottom:0; }
.team-card { position:relative; padding:34px; background:#ffffff06; border-radius:16px; }
.team-card__initial { border-radius:12px; font-family:inherit; width:62px; height:62px; margin-bottom:32px; }
.team-card h3 { font-size:1.8rem; }
.team-card p strong { font-size:.94rem; color:white; font-weight:650; }
.media-frame { min-height:550px; box-shadow:none; }
.media-frame img { height:550px; min-height:0; object-fit:cover; }
.media-frame__label { font-size:.9rem; }
.service-detail { grid-template-columns:minmax(0,1fr) 340px; gap:76px; }
.service-detail__main h2 { font-size:clamp(1.8rem,3vw,2.6rem); margin:42px 0 20px; }
.service-detail__sidebar { position:sticky; top:116px; padding:30px; background:#f3f6fa; border:none; }
.service-detail__sidebar h3 { font-size:1.3rem; }
.service-detail__sidebar li { padding:12px 0; line-height:1.45; }
.contact-options { gap:24px; }
.contact-option { background:#f3f6fa; border:none; padding:32px; }
.contact-option h3 { margin-top:28px; }
.contact-option .text-link { overflow-wrap:anywhere; }
.contact-visit-photo { overflow:hidden; height:470px; border-radius:20px; }
.contact-visit-photo img { width:100%; height:100%; object-fit:cover; }
.hours { margin-top:28px; }
.faq { max-width:none; margin-top:0; }
.faq summary { font-family:inherit; font-size:1.1rem; font-weight:650; line-height:1.5; padding:26px 0; }
.faq details p { margin-bottom:0; }
.cta-band { padding:56px; border-radius:20px; grid-template-columns:minmax(0,1fr) auto; gap:44px; }
.cta-band h2 { font-size:clamp(2rem,3.4vw,3rem)!important; max-width:690px; }
.cta-band__actions { flex-direction:column; }
.visit-section { padding:76px 0; background:#eef3f8; border-top:1px solid #e1e8ef; }
.visit-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:60px; align-items:center; }
.visit-copy h2 { font-size:clamp(1.9rem,3vw,2.7rem); }
.visit-copy address { font-style:normal; margin:24px 0; color:var(--ink); font-size:1rem; }
.visit-copy p:not(.eyebrow) { font-size:.9rem; color:var(--muted); margin-bottom:24px; }
.map-frame { min-width:0; height:430px; overflow:hidden; border-radius:20px; background:#dae4ec; border:1px solid #d3dfe9; }
.map-frame iframe { display:block; width:100%; height:100%; border:0; }
.footer-grid { grid-template-columns:1.2fr .85fr 1.2fr .9fr; gap:32px; }
.footer-grid > div { min-width:0; }
.footer-grid a { overflow-wrap:anywhere; }
.site-footer .brand-logo { width:200px; height:90px; }
.legal h2 { font-size:1.6rem; }
.reveal { opacity:1; transform:none; }
@media(min-width:1600px) { .hero-v2__inner,.hero-v2 { min-height:760px; } }
@media(max-width:1100px) { .service-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .service-tile { display:grid; grid-template-columns:160px 1fr; } .service-tile__art { height:auto; margin:0; padding:18px; } .service-tile__art img { width:145px; height:145px; } .service-tile__body { padding:26px 22px 26px 0; } .service-tile h3 { min-height:0; } .story-layout,.process-layout { gap:40px; } .section-heading { gap:40px; } .story-media { height:610px; } }
@media(max-width:980px) { :root { --container:calc(100% - 40px); } .nav { min-height:74px; } .brand-logo { height:62px; width:168px; } .nav__links { top:74px; } .hero-v2__copy { width:82%; } .hero-v2,.hero-v2__inner { min-height:650px; } .page-hero--photo { min-height:520px; } .split,.split--wide { grid-template-columns:1fr; } .service-detail { grid-template-columns:1fr; gap:40px; } .service-detail__sidebar { position:static; max-width:none; } .work-grid { grid-template-columns:1fr 1fr; } .work-card:first-child { grid-column:1/-1; } .footer-grid { grid-template-columns:1fr 1fr; gap:40px; } .visit-layout { gap:30px; grid-template-columns:.8fr 1.2fr; } .cta-band { grid-template-columns:1fr; } .cta-band__actions { flex-direction:row; justify-content:flex-start; } }
@media(max-width:760px) { .story-layout,.process-layout { grid-template-columns:1fr; gap:36px; } .story-media { height:420px; } .process-visual { min-height:350px; } .process-visual img { position:absolute; } .section { padding:70px 0; } .section-heading { grid-template-columns:1fr; gap:18px; margin-bottom:32px; } .section-heading .lead { max-width:540px; } .service-tile { display:flex; } .service-tile__art { height:180px; padding:12px; } .service-tile__art img { width:160px; height:160px; } .service-tile__body { padding:10px 20px 24px; } .service-tile h3 { min-height:2.5em; } .visit-layout { grid-template-columns:1fr; gap:32px; } .map-frame { height:370px; } .partners__intro { display:block; } .partners__intro > p { margin-top:20px; max-width:520px; } .brand-showcase__copy { bottom:22px; right:22px; width:calc(100% - 44px); } .brand-showcase,.brand-showcase img { min-height:510px; height:510px; } }
@media(max-width:520px) { :root { --container:calc(100% - 36px); } h2 { font-size:2.2rem; letter-spacing:-.045em; } .hero-v2 h1 { font-size:clamp(2.8rem,11.8vw,3.6rem); } .hero-v2 h1 span { font-size:.7em; } .hero-v2__copy { width:100%; } .hero-v2__inner { padding:66px 0 50px; align-items:center; } .hero-v2__lead { font-size:1rem; } .hero-v2,.hero-v2__inner { min-height:640px; } .hero-v2__proof { letter-spacing:.02em; gap:10px 14px; } .hero__actions { gap:10px; } .hero__actions .button { font-size:.86rem; } .quick-info__grid { grid-template-columns:1fr 1fr; } .quick-info__grid > * { padding:16px 12px; } .quick-info__grid strong { font-size:.82rem; } .quick-info__grid span { font-size:.65rem; letter-spacing:.05em; } .service-gallery { grid-template-columns:1fr 1fr; gap:12px; } .service-tile__art { height:140px; } .service-tile__art img { width:130px; height:130px; } .service-tile__body { padding:8px 14px 20px; } .service-tile__index { font-size:.63rem; letter-spacing:.04em; } .service-tile h3 { font-size:1rem; line-height:1.3; min-height:2.6em; } .service-tile p { font-size:.84rem; line-height:1.6; margin:12px 0 18px; } .service-tile .text-link { font-size:.75rem; display:block; } .service-tile .text-link::after { margin-left:6px; } .work-grid { grid-template-columns:1fr; grid-auto-rows:360px; } .work-card:first-child { grid-column:auto; } .work-card figcaption { padding:24px; } .story-media { height:410px; } .story-caption { left:24px; right:24px; bottom:28px; } .story-caption strong { font-size:1.65rem; } .story-values { gap:18px; } .process-list li { gap:12px; grid-template-columns:30px 1fr; } .page-hero--photo { min-height:500px; padding:50px 0 58px; } .page-hero--photo h1 { font-size:clamp(2.55rem,11vw,3.5rem); } .page-hero--photo p { font-size:1rem; } .page-hero--photo::before { background:linear-gradient(90deg,#041428e6,#04142899); } .page-hero--photo .breadcrumbs { margin-bottom:36px; } .page-hero--photo .eyebrow { font-size:.7rem; } .contact-options { grid-template-columns:1fr; } .contact-option { padding:28px; } .contact-visit-photo { height:340px; } .cta-band { padding:32px 24px; gap:28px; } .footer-grid { grid-template-columns:1fr; } .visit-section { padding:60px 0; } .map-frame { height:340px; } .service-detail__sidebar { padding:26px; } .team-card { padding:28px; } }
@media(max-width:350px) { .service-gallery { grid-template-columns:1fr; } .service-tile { display:grid; grid-template-columns:100px 1fr; } .service-tile__art { height:auto; padding:6px; } .service-tile__art img { width:94px; height:110px; } .service-tile__body { padding:20px 12px 20px 0; } .service-tile h3 { min-height:0; } .hero-v2 h1 { font-size:2.6rem; } .quick-info__grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .service-tile:hover { transform:none; } }