@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#102e40; --ink-soft:#234b5d; --deep:#10242f; --cream:#f8f6ef; --warm:#eee9dc; --gold:#cda851; --gold-light:#eed37f; --muted:#5b6c73; --line:rgba(16,46,64,.17); --body:'DM Sans',Arial,sans-serif; --display:'Playfair Display',Georgia,serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.55 var(--body); }
a { color:inherit; text-decoration:none; } img { display:block; width:100%; } button,input,textarea { font:inherit; } button { cursor:pointer; }
.skip-link { position:absolute; top:-50px; left:12px; z-index:99; padding:9px 12px; background:var(--deep); color:white; }.skip-link:focus { top:12px; }
.section-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }.site-header { min-height:82px; padding:12px max(24px,calc((100vw - 1300px)/2)); display:flex; align-items:center; gap:24px; background:#fff; position:sticky; top:0; z-index:20; box-shadow:0 1px 0 rgba(16,46,64,.12); }.brand { display:inline-flex; align-items:center; gap:10px; min-width:max-content; }.brand-mark { width:43px; height:43px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; position:relative; color:var(--ink); font:500 14px var(--display); }.brand-mark i { position:absolute; left:9px; right:9px; height:1px; background:var(--gold); transform:rotate(-35deg); }.brand-mark span { position:relative; z-index:1; }.brand-mark span:first-child { transform:translate(-3px,-5px); }.brand-mark span:last-child { transform:translate(3px,5px); }.brand-type { display:flex; flex-direction:column; gap:2px; line-height:1; }.brand-type strong { font:600 22px var(--display); letter-spacing:-1px; }.brand-type small { color:#4c5c65; font:500 8px var(--mono); text-transform:uppercase; letter-spacing:1.5px; }.logo-slot { width:161px; height:43px; flex:0 0 161px; }.header-actions { display:flex; align-items:center; gap:8px; margin-left:10px; }.schedule-top,.phone-mark { display:inline-grid; place-items:center; min-height:40px; text-transform:uppercase; font:700 10px var(--mono); letter-spacing:.7px; }.schedule-top { padding:0 15px; color:white; background:#ef7e2d; }.phone-mark { width:40px; border:1px solid var(--gold); border-radius:50%; color:#ef7e2d; font:600 18px var(--display); transform:rotate(40deg); }.site-nav { margin-left:auto; display:flex; align-items:center; gap:30px; font-size:12px; font-weight:700; }.site-nav a { position:relative; }.site-nav a::after { content:''; height:1px; background:var(--gold); position:absolute; left:0; right:0; bottom:-5px; transform:scaleX(0); transition:transform .2s ease; }.site-nav a:hover::after { transform:scaleX(1); }.menu-toggle { display:none; border:0; padding:8px 0 8px 10px; background:none; color:var(--ink); }.menu-toggle span { width:24px; height:1px; margin:4px 0 0 auto; display:block; background:currentColor; }.menu-toggle span:nth-child(2) { width:18px; }.menu-toggle em { display:block; margin-top:5px; font:500 8px var(--mono); text-transform:uppercase; letter-spacing:1px; font-style:normal; }
.hero { position:relative; min-height:620px; color:white; overflow:hidden; background:var(--deep); }.hero>img { height:620px; object-fit:cover; object-position:center 55%; filter:saturate(.85) contrast(1.06); }.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,19,28,.74),rgba(4,19,28,.35) 54%,rgba(4,19,28,.12)); }.hero-content { width:min(760px,calc(100% - 48px)); position:absolute; top:50%; left:50%; transform:translate(-50%,-49%); text-align:center; }.hero-eyebrow,.section-kicker { margin:0 0 18px; color:var(--gold); text-transform:uppercase; font:500 10px var(--mono); letter-spacing:1.8px; }.hero h1,.intro h2,.services h2,.guide h2,.brands h2,.work h2,.contact h2,.newsletter h2 { margin:0; font:600 clamp(43px,6.1vw,82px)/.96 var(--display); letter-spacing:-3.1px; }.hero h1 { color:white; }.hero h1 em,.intro h2 em,.services h2 em,.guide h2 em,.work h2 em,.contact h2 em,.newsletter h2 em { color:var(--gold-light); }.hero-content>p:not(.hero-eyebrow) { width:min(550px,100%); margin:23px auto 29px; color:rgba(255,255,255,.9); font-size:15px; }.hero-button,.dark-button,.outline-button { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; min-height:49px; padding:0 17px; border:1px solid transparent; text-transform:uppercase; font:700 10px var(--mono); letter-spacing:.8px; transition:transform .2s ease,background .2s ease; }.hero-button { color:white; background:#ef7e2d; }.hero-button:hover,.dark-button:hover { background:var(--gold); transform:translateY(-2px); }.hero-button span,.dark-button span,.outline-button span { font:500 17px var(--display); }.hero-stats { height:55px; padding:0 24px; position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:40px; color:white; background:rgba(3,17,25,.84); text-transform:uppercase; font:700 9px var(--mono); letter-spacing:.65px; }.hero-stats i { width:1px; height:21px; background:rgba(255,255,255,.28); }.hero-stats span:last-child { color:var(--gold-light); }
.intro { padding:115px 0; display:grid; grid-template-columns:.94fr 1.06fr; gap:9%; align-items:center; }.intro-copy h2 { font-size:clamp(40px,4.8vw,68px); }.intro-copy>p:not(.section-kicker) { max-width:530px; color:#4d626c; font-size:15px; line-height:1.75; }.dark-button { margin-top:22px; color:white; background:var(--ink); }.intro-image { min-height:430px; margin:0; position:relative; overflow:hidden; }.intro-image>img { height:430px; object-fit:cover; object-position:center; filter:saturate(.82); }.intro-image figcaption { width:141px; height:141px; position:absolute; right:21px; bottom:20px; padding:28px 16px; display:flex; flex-direction:column; justify-content:center; color:white; background:var(--ink); border-radius:50%; text-align:center; }.intro-image figcaption strong { color:var(--gold-light); font:600 31px/1 var(--display); }.intro-image figcaption span { margin-top:8px; font:500 8px/1.45 var(--mono); text-transform:uppercase; letter-spacing:.9px; }
.services { padding:107px 0 118px; background:var(--deep); color:white; }.section-kicker-light { color:var(--gold-light); }.services h2 { font-size:clamp(42px,5.3vw,73px); }.services h2 em { color:var(--gold-light); }.services-intro { max-width:515px; margin:24px 0 50px; color:rgba(255,255,255,.7); font-size:15px; }.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.service-card { min-height:417px; background:#173546; position:relative; overflow:hidden; display:flex; flex-direction:column; }.service-card>img { height:162px; object-fit:cover; filter:saturate(.7); transition:transform .4s ease; }.service-card:hover>img { transform:scale(1.05); }.service-card>div { padding:21px 20px 22px; display:flex; flex:1; flex-direction:column; }.service-card p { margin:0 0 8px; color:var(--gold-light); text-transform:uppercase; font:500 8px var(--mono); letter-spacing:1px; }.service-card h3 { margin:0; font:600 30px/1.03 var(--display); letter-spacing:-1.1px; }.service-card span { margin:13px 0 19px; color:rgba(255,255,255,.72); font-size:12px; line-height:1.55; }.service-card a { margin-top:auto; padding-top:9px; border-top:1px solid rgba(255,255,255,.22); color:var(--gold-light); font:700 9px var(--mono); text-transform:uppercase; letter-spacing:.7px; }.service-card b { float:right; font:500 16px var(--display); }.service-card-priority { background:#214d63; }.service-card-priority>img { filter:saturate(.78); }
.guide { padding:116px 0 112px; display:grid; grid-template-columns:1fr .8fr; column-gap:11%; }.guide h2 { font-size:clamp(40px,4.7vw,65px); }.guide h2 em { color:var(--ink-soft); }.guide-action { padding-top:39px; }.guide-action p { color:#4f626a; font-size:14px; line-height:1.75; }.outline-button { margin-top:15px; color:var(--ink); border-color:var(--ink); }.outline-button:hover { color:white; background:var(--ink); transform:translateY(-2px); }.details-list { grid-column:1/-1; margin-top:63px; border-top:1px solid var(--line); }.details-list details { border-bottom:1px solid var(--line); }.details-list summary { padding:20px 0; display:grid; grid-template-columns:55px 1fr 180px 26px; gap:13px; align-items:center; list-style:none; cursor:pointer; }.details-list summary::-webkit-details-marker { display:none; }.details-list summary span,.details-list summary em { color:#74838a; font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.85px; font-style:normal; }.details-list summary strong { font:600 25px var(--display); letter-spacing:-.8px; }.details-list summary b { justify-self:end; color:var(--gold); font:400 26px/1 var(--display); transition:transform .2s ease; }.details-list details[open] summary b { transform:rotate(45deg); }.detail-body { width:min(800px,100%); padding:0 0 29px 68px; color:#52636a; font-size:14px; }.detail-body p { margin:0 0 12px; }.detail-body ul { margin:0; padding-left:18px; }.detail-body li { margin:4px 0; }.parts-policy { grid-column:1/-1; margin-top:30px; padding:20px 0 0; display:flex; gap:26px; align-items:baseline; border-top:1px solid var(--line); }.parts-policy strong { font:600 18px var(--display); }.parts-policy strong em { color:#be4a2e; font-style:normal; }.parts-policy span { color:#68777e; font-size:13px; }
.brands { padding:95px 0; background:#e7ebe7; }.brands h2 { font-size:clamp(42px,5vw,67px); }.brands .section-shell>p:not(.section-kicker):not(.brand-note) { margin:12px 0 42px; color:#54666e; }.brand-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.brand-list span { min-height:135px; display:grid; place-items:center; border-right:1px solid var(--line); font-size:clamp(30px,4.1vw,52px); font-weight:700; letter-spacing:-3px; }.brand-list span:last-child { border:0; }.brand-yamaha { color:#233f92; }.brand-mercury { color:#232323; font-style:italic; }.brand-suzuki { color:#164a99; }.brand-note { margin:18px 0 0; color:#6e7d82; font-size:10px; }
.work { padding:115px 0 120px; }.work-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; }.work h2 { font-size:clamp(42px,5vw,67px); }.work h2 em { color:var(--ink-soft); }.work-heading .outline-button { margin:0; }.work-grid { margin-top:53px; display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.work-grid figure { min-height:330px; margin:0; position:relative; overflow:hidden; background:var(--deep); }.work-grid img { height:330px; object-fit:cover; transition:transform .5s ease; }.work-grid figure:hover img { transform:scale(1.05); }.work-grid::before { content:''; }.work-grid figcaption { position:absolute; bottom:0; left:0; right:0; padding:37px 15px 15px; color:white; background:linear-gradient(transparent,rgba(2,14,21,.75)); font-size:12px; font-weight:600; }.work-grid figcaption span { display:block; margin-bottom:5px; color:var(--gold-light); font:500 9px var(--mono); }
.contact { padding:105px 0; color:white; background:#132d3c; }.contact-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:10%; }.contact h2 { font-size:clamp(42px,5vw,69px); }.contact h2 em { color:var(--gold-light); }.contact-copy>p:not(.section-kicker):not(.hours) { max-width:420px; margin:23px 0 34px; color:rgba(255,255,255,.73); }.contact-links { display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.2); }.contact-links a { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.2); display:flex; flex-direction:column; }.contact-links small { color:var(--gold-light); text-transform:uppercase; letter-spacing:1px; font:500 8px var(--mono); }.contact-links strong { margin-top:2px; font-size:14px; font-weight:600; }.hours { display:flex; gap:16px; color:rgba(255,255,255,.8); font-size:13px; }.hours strong { color:var(--gold-light); }.contact-cta { margin-bottom:14px; width:100%; color:white; background:#ef7e2d; }.inquiry-form { padding:25px; color:var(--ink); background:var(--cream); }.form-heading { margin-bottom:20px; display:flex; justify-content:space-between; align-items:baseline; }.form-heading strong { font:600 25px var(--display); }.form-heading span,.file-note,.inquiry-form #form-note { color:#708087; font:500 8px var(--mono); text-transform:uppercase; letter-spacing:.7px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.inquiry-form label:not(.file-note) { margin:0 0 16px; display:flex; flex-direction:column; gap:5px; color:#53646c; text-transform:uppercase; font:500 8px var(--mono); letter-spacing:.8px; }.inquiry-form input,.inquiry-form textarea { width:100%; padding:8px 0; border:0; border-bottom:1px solid rgba(16,46,64,.24); border-radius:0; outline:none; background:transparent; color:var(--ink); font:14px var(--body); text-transform:none; letter-spacing:0; }.inquiry-form textarea { min-height:70px; resize:vertical; }.inquiry-form input:focus,.inquiry-form textarea:focus { border-color:#ef7e2d; }.file-note { display:block; margin:1px 0 16px; }.inquiry-form button,.signup-form button { width:100%; min-height:44px; border:0; color:white; background:var(--ink); text-transform:uppercase; font:700 9px var(--mono); letter-spacing:.8px; }.inquiry-form button span,.signup-form button span { margin-left:15px; font:500 17px var(--display); }.inquiry-form #form-note { margin:13px 0 0; text-transform:none; letter-spacing:0; font-family:var(--body); font-size:10px; }
.newsletter { padding:73px 0; background:#e8dbc1; }.newsletter-layout { display:flex; align-items:end; justify-content:space-between; gap:50px; }.newsletter h2 { font-size:clamp(36px,4.2vw,56px); }.newsletter h2 em { color:#9b6729; }.signup-form { width:min(420px,100%); display:flex; gap:10px; align-items:end; }.signup-form label { flex:1; color:#5d584d; text-transform:uppercase; letter-spacing:.8px; font:500 8px var(--mono); }.signup-form input { display:block; width:100%; margin-top:8px; padding:9px 0; border:0; border-bottom:1px solid #8d7d64; background:transparent; outline:none; }.signup-form button { width:auto; min-width:105px; background:#9b6729; }
.site-footer { min-height:145px; padding:31px max(24px,calc((100vw - 1300px)/2)); display:grid; grid-template-columns:1fr auto auto; gap:45px; align-items:center; background:white; position:relative; }.footer-schedule { color:#ef7e2d; text-transform:uppercase; font:700 9px var(--mono); letter-spacing:.75px; }.footer-links { display:flex; gap:18px; font-size:11px; font-weight:700; }.site-footer small { position:absolute; bottom:15px; left:max(24px,calc((100vw - 1300px)/2)); color:#8a969b; font:500 8px var(--mono); letter-spacing:.7px; }
@media (max-width:850px) { .site-header { gap:16px; }.site-nav { gap:17px; }.header-actions { margin-left:auto; }.service-grid { grid-template-columns:repeat(2,1fr); }.work-grid { grid-template-columns:repeat(2,1fr); }.guide { grid-template-columns:1fr; row-gap:10px; }.guide-action { padding-top:0; }.contact-layout { gap:6%; } }
@media (max-width:620px) { .section-shell { width:min(100% - 36px,1180px); }.site-header { min-height:73px; padding:12px 18px; }.brand-mark { width:38px; height:38px; }.brand-type strong { font-size:20px; }.brand-type small { font-size:7px; letter-spacing:1.15px; }.logo-slot { width:1px; height:38px; flex-basis:1px; }.header-actions { margin-left:auto; }.schedule-top,.phone-mark { display:none; }.menu-toggle { display:block; }.site-nav { display:none; position:fixed; top:73px; left:0; right:0; padding:19px 18px 24px; background:white; box-shadow:0 12px 20px rgba(16,46,64,.12); flex-direction:column; align-items:flex-start; gap:17px; font-size:14px; }.site-nav.open { display:flex; }.hero { min-height:595px; }.hero>img { height:595px; object-position:center; }.hero-content { top:46%; transform:translate(-50%,-46%); }.hero h1,.intro h2,.services h2,.guide h2,.brands h2,.work h2,.contact h2,.newsletter h2 { letter-spacing:-2.1px; }.hero h1 { font-size:49px; }.hero-content>p:not(.hero-eyebrow) { font-size:14px; }.hero-stats { height:70px; padding:0 17px; gap:13px; font-size:7px; text-align:center; }.hero-stats i { height:26px; }.intro { padding:75px 0; grid-template-columns:1fr; gap:39px; }.intro-image { min-height:345px; }.intro-image>img { height:345px; }.services { padding:76px 0; }.service-grid { grid-template-columns:1fr; gap:11px; }.service-card { min-height:0; display:grid; grid-template-columns:42% 58%; }.service-card>img { height:100%; min-height:230px; }.service-card>div { padding:19px 17px; }.service-card h3 { font-size:27px; }.service-card span { margin:10px 0 15px; }.guide { padding:76px 0; }.details-list { margin-top:44px; }.details-list summary { padding:18px 0; grid-template-columns:27px 1fr 22px; gap:9px; }.details-list summary em { display:none; }.details-list summary strong { font-size:23px; }.detail-body { padding:0 0 26px 36px; font-size:13px; }.parts-policy { flex-direction:column; gap:8px; }.brands { padding:72px 0; }.brand-list { grid-template-columns:1fr; }.brand-list span { min-height:85px; border-right:0; border-bottom:1px solid var(--line); font-size:43px; }.brand-list span:last-child { border-bottom:0; }.work { padding:76px 0; }.work-heading { display:block; }.work-heading .outline-button { margin-top:23px; }.work-grid { margin-top:39px; gap:9px; }.work-grid figure,.work-grid img { min-height:220px; height:220px; }.contact { padding:76px 0; }.contact-layout { grid-template-columns:1fr; gap:38px; }.form-row { grid-template-columns:1fr; gap:0; }.newsletter { padding:61px 0; }.newsletter-layout { display:block; }.signup-form { margin-top:30px; }.site-footer { min-height:173px; padding:26px 18px 42px; grid-template-columns:1fr auto; gap:20px; }.site-footer .logo-slot { display:none; }.footer-schedule { display:none; }.footer-links { align-self:start; flex-direction:column; gap:7px; font-size:10px; } .site-footer small { left:18px; bottom:15px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }