:root { --ink:#182019; --paper:#f4f1ea; --white:#fffdf8; --red:#df1e28; --red-dark:#b4141d; --gold:#dcae44; --green:#24573d; --line:#d5d2c9; --muted:#6d7169; --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; --serif:"Playfair Display", serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } button,input,select { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,82px); background:var(--white); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; line-height:1; letter-spacing:0; }.brand-mark { display:grid; place-items:center; height:35px; width:35px; border-radius:50%; background:var(--red); color:white; font-family:var(--serif); font-size:24px; font-style:italic; }.brand strong { font-size:14px; letter-spacing:1.5px; }.brand small { display:block; margin-top:4px; color:var(--muted); font:8px var(--mono); letter-spacing:1.1px; }.site-nav { display:flex; gap:30px; font-size:12px; font-weight:700; }.site-nav a:hover { color:var(--red); }.login-trigger { border:0; padding:12px 17px; background:var(--ink); color:white; font-size:12px; font-weight:700; }.login-trigger span { color:var(--gold); margin-left:6px; }
.hero { display:grid; min-height:calc(100vh - 84px); grid-template-columns:1.05fr .95fr; background:var(--white); overflow:hidden; }.hero-copy { padding:clamp(70px,12vw,160px) clamp(22px,7vw,110px); align-self:center; }.eyebrow,.section-label { color:var(--red); font:500 10px var(--mono); letter-spacing:1.5px; }.hero h1,.intro-band h2,.model-section h2 { margin:17px 0 24px; font:800 clamp(42px,5vw,78px)/1.08 var(--serif); letter-spacing:0; }.hero h1 em,.intro-band em,.model-section em { color:var(--red); font-weight:700; }.hero-text { max-width:470px; color:var(--muted); font-size:15px; line-height:1.75; }.hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:47px; padding:0 20px; border:1px solid transparent; font-size:12px; font-weight:800; }.button-primary { background:var(--red); color:white; }.button-primary:hover { background:var(--red-dark); }.button-primary span { color:#f7c765; font-size:18px; }.button-quiet { border-color:var(--ink); }.button-quiet:hover { background:var(--ink); color:white; }
.hero-visual { position:relative; min-height:540px; overflow:hidden; background:#e8dbc5; }.sun-disc { position:absolute; top:14%; left:15%; width:min(33vw,390px); aspect-ratio:1; border-radius:50%; background:var(--gold); }.road-line { position:absolute; width:120%; height:1px; background:rgba(24,32,25,.25); transform:rotate(-24deg); }.road-line-one { top:70%; left:-20%; }.road-line-two { top:80%; left:-9%; }.car { position:absolute; z-index:2; top:43%; left:11%; width:78%; height:30%; filter:drop-shadow(20px 22px 10px rgba(26,23,16,.2)); }.car-body { position:absolute; bottom:11%; width:100%; height:53%; border-radius:38% 52% 16% 12% / 74% 77% 16% 16%; background:var(--red); border-bottom:8px solid #991923; }.car-roof { position:absolute; bottom:55%; left:29%; width:43%; height:44%; border-radius:60% 55% 0 0; background:#b71e25; transform:skewX(-11deg); }.car-roof:after { content:""; position:absolute; top:13%; left:13%; width:73%; height:68%; border-radius:52% 46% 0 0; background:#7e9ca4; }.car-light { position:absolute; right:4%; bottom:38%; width:8%; height:10%; border-radius:55% 60% 50% 10%; background:#fff5cd; }.wheel { position:absolute; z-index:2; bottom:0; width:18%; aspect-ratio:1; border:9px solid #1a211c; border-radius:50%; background:#c9c5b9; box-shadow:inset 0 0 0 6px #424940; }.wheel-left { left:14%; }.wheel-right { right:14%; }.hero-note { position:absolute; right:7%; bottom:9%; color:var(--ink); font:500 10px/1.5 var(--mono); letter-spacing:1.5px; text-align:right; }
.intro-band { display:grid; grid-template-columns:.65fr 1.1fr 1fr; gap:35px; padding:clamp(70px,11vw,145px) clamp(22px,9vw,150px); background:var(--ink); color:var(--white); }.intro-band h2 { margin:0; font-size:clamp(31px,3.3vw,54px); }.intro-band p:last-child { align-self:end; color:#c7c8c1; font-size:14px; line-height:1.8; }.service-section { padding:100px clamp(22px,9vw,150px); background:var(--paper); }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:50px; border-top:1px solid var(--ink); }.service-grid article { min-height:255px; padding:26px 34px 20px 0; border-right:1px solid var(--line); }.service-grid article+article { padding-left:34px; }.service-grid article:last-child { border:0; }.service-grid span,.model-list span { color:var(--red); font:10px var(--mono); }.service-grid h3 { margin:58px 0 9px; font:800 24px var(--serif); }.service-grid p { max-width:245px; color:var(--muted); font-size:13px; line-height:1.7; }.model-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; padding:110px clamp(22px,9vw,150px); background:#e4ece4; }.model-section h2 { font-size:clamp(35px,4vw,60px); }.model-list { align-self:end; }.model-list article { display:grid; grid-template-columns:45px 1fr auto; align-items:center; min-height:88px; border-top:1px solid var(--ink); }.model-list article:last-child { border-bottom:1px solid var(--ink); }.model-list h3 { margin:0; font:800 24px var(--serif); }.model-list p { grid-column:2; margin:3px 0 0; color:var(--muted); font-size:11px; }.model-list button { grid-column:3; grid-row:1/3; height:38px; width:38px; border:1px solid var(--ink); border-radius:50%; background:transparent; font-size:20px; }.model-list button:hover { border-color:var(--red); background:var(--red); color:white; }.contact-band { display:flex; align-items:center; justify-content:space-between; padding:44px clamp(22px,9vw,150px); background:var(--red); color:white; }.contact-band p { font:500 10px var(--mono); letter-spacing:1.5px; }.contact-band a { border-bottom:1px solid white; padding-bottom:5px; font:700 19px var(--serif); }.contact-band span { margin-left:20px; } footer { display:flex; justify-content:space-between; padding:25px max(22px,5vw); background:var(--white); color:var(--muted); font:9px var(--mono); letter-spacing:.4px; }
.modal { width:min(94vw,475px); border:0; padding:40px; background:var(--white); color:var(--ink); box-shadow:0 20px 50px rgba(0,0,0,.22); }.modal::backdrop { background:rgba(24,32,25,.7); }.modal h2 { margin:10px 0; font:800 34px var(--serif); }.modal-copy { color:var(--muted); font-size:13px; line-height:1.6; }.modal-close { position:absolute; top:17px; right:17px; width:32px; height:32px; border:0; background:var(--paper); font-size:21px; }.role-options { display:grid; gap:9px; margin-top:25px; }.role-options button { display:flex; flex-direction:column; align-items:start; gap:4px; padding:14px; border:1px solid var(--line); background:transparent; text-align:left; }.role-options button:hover { border-color:var(--red); background:#fff5f3; }.role-options strong { font-size:13px; }.role-options span { color:var(--muted); font-size:11px; } #lead-form { display:grid; gap:13px; margin-top:25px; } #lead-form label { display:grid; gap:6px; font-size:11px; font-weight:700; } #lead-form input,#lead-form select { min-height:43px; border:1px solid var(--line); padding:0 12px; background:var(--paper); }.toast { position:fixed; z-index:5; right:20px; bottom:20px; padding:13px 17px; background:var(--ink); color:white; font-size:12px; opacity:0; transform:translateY(12px); transition:.2s; pointer-events:none; }.toast.visible { opacity:1; transform:translateY(0); }
/* CRM */ .dashboard-view { min-height:100vh; background:#f5f6f1; }.dash-shell { display:grid; min-height:100vh; grid-template-columns:250px 1fr; }.sidebar { display:flex; flex-direction:column; padding:26px 16px; background:var(--ink); color:white; }.sidebar .brand { padding:0 8px 34px; }.sidebar .brand small { color:#adb6ac; }.sidebar-nav { display:grid; gap:5px; }.sidebar-nav button { display:flex; align-items:center; gap:13px; border:0; padding:12px; background:transparent; color:#c7cec7; text-align:left; font-size:12px; }.sidebar-nav button.active,.sidebar-nav button:hover { background:#304436; color:white; }.nav-icon { display:grid; place-items:center; width:20px; color:#eabd53; font-size:15px; }.sidebar-bottom { margin-top:auto; padding:16px 8px 0; border-top:1px solid #3e4c40; }.profile { display:flex; gap:10px; align-items:center; }.avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--gold); color:var(--ink); font-size:11px; font-weight:800; }.profile strong,.profile span { display:block; font-size:10px; }.profile span { margin-top:3px; color:#aeb6ae; }.signout { width:100%; margin-top:17px; border:0; background:transparent; color:#c7cec7; text-align:left; font-size:11px; }.dash-main { padding:32px clamp(20px,3vw,52px); overflow:hidden; }.dash-top { display:flex; align-items:start; justify-content:space-between; gap:20px; }.dash-top p { margin:0; color:var(--muted); font-size:11px; }.dash-top h1 { margin:5px 0 0; font:800 29px var(--serif); }.top-actions { display:flex; gap:10px; }.icon-button { display:grid; place-items:center; height:38px; width:38px; border:1px solid var(--line); background:var(--white); font-size:17px; }.icon-button:hover { border-color:var(--red); color:var(--red); }.dash-button { min-height:38px; padding:0 14px; border:0; background:var(--red); color:white; font-size:11px; font-weight:800; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin:30px 0; }.metric { padding:18px; background:var(--white); border:1px solid #e5e4de; }.metric-label { color:var(--muted); font:10px var(--mono); }.metric-value { display:block; margin:13px 0 5px; font:800 30px var(--serif); }.metric-note { font-size:10px; color:var(--green); }.metric-note.alert { color:var(--red); }.content-grid { display:grid; grid-template-columns:1.5fr .9fr; gap:18px; }.panel { border:1px solid #e2e1da; background:var(--white); }.panel-heading { display:flex; align-items:center; justify-content:space-between; padding:17px 19px; border-bottom:1px solid #e8e6e0; }.panel-heading h2 { margin:0; font:800 17px var(--serif); }.panel-heading button,.text-button { border:0; background:transparent; color:var(--red); font-size:10px; font-weight:800; }.lead-tools { display:flex; gap:8px; padding:12px 19px; border-bottom:1px solid #e8e6e0; }.lead-tools input { flex:1; min-width:0; padding:8px 10px; border:1px solid var(--line); background:#faf9f5; font-size:11px; }.lead-tools select { border:1px solid var(--line); background:#faf9f5; padding:0 7px; font-size:10px; }.lead-table { width:100%; border-collapse:collapse; font-size:11px; }.lead-table th { padding:11px 19px; color:var(--muted); border-bottom:1px solid #e8e6e0; text-align:left; font:10px var(--mono); }.lead-table td { padding:13px 19px; border-bottom:1px solid #eeece7; }.lead-table tr:last-child td { border:0; }.customer-name { display:block; font-weight:800; }.customer-source { display:block; margin-top:3px; color:var(--muted); font-size:9px; }.badge { display:inline-block; padding:4px 7px; font-size:9px; font-weight:800; }.badge.new { background:#fff0d4; color:#8e5a08; }.badge.followup { background:#e3f0e9; color:#286045; }.badge.test { background:#e3eef5; color:#245b80; }.badge.negotiation { background:#f4e4f0; color:#88355f; }.badge.deal { background:#d6eadb; color:#1d5a34; }.activity-list { padding:4px 19px; }.activity { display:grid; grid-template-columns:30px 1fr; gap:10px; padding:15px 0; border-bottom:1px solid #eeece7; }.activity:last-child { border:0; }.activity-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#e5eee5; color:var(--green); font-size:13px; }.activity strong { display:block; font-size:11px; }.activity p { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }.pipeline { margin-top:18px; padding:19px; }.pipeline-stages { display:flex; margin-top:17px; }.pipeline-stage { flex:1; min-width:0; }.pipeline-stage:not(:last-child):after { content:""; display:block; height:3px; margin:0 3px; background:#e3e5de; }.pipeline-stage.active:after { background:var(--red); }.pipeline-stage span { display:block; width:9px; height:9px; margin-bottom:8px; border-radius:50%; background:#bec5bd; }.pipeline-stage.active span { background:var(--red); }.pipeline-stage b { display:block; font:800 17px var(--serif); }.pipeline-stage small { display:block; margin-top:4px; color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:820px) { .site-nav { display:none; }.hero,.intro-band,.model-section,.content-grid { grid-template-columns:1fr; }.hero-copy { padding-top:80px; padding-bottom:60px; }.hero-visual { min-height:390px; }.sun-disc { width:280px; }.intro-band { gap:25px; }.service-section,.model-section { padding-top:70px; padding-bottom:70px; }.service-grid { grid-template-columns:1fr; }.service-grid article,.service-grid article+article { min-height:auto; padding:24px 0; border-right:0; border-bottom:1px solid var(--line); }.service-grid h3 { margin-top:25px; }.contact-band { align-items:start; gap:20px; flex-direction:column; }.dash-shell { grid-template-columns:1fr; }.sidebar { padding:15px; }.sidebar .brand { padding-bottom:15px; }.sidebar-nav { grid-template-columns:repeat(5,1fr); }.sidebar-nav button { justify-content:center; padding:9px 3px; }.sidebar-nav button span:last-child { display:none; }.sidebar-bottom { display:none; }.dash-main { padding:23px 16px; }.metrics { grid-template-columns:repeat(2,1fr); }.lead-table th:nth-child(3),.lead-table td:nth-child(3) { display:none; } }
@media (max-width:470px) { .site-header { height:70px; }.login-trigger { padding:10px; font-size:10px; }.hero { min-height:calc(100vh - 70px); }.hero h1 { font-size:43px; }.hero-visual { min-height:300px; }.car { top:39%; }.model-list h3 { font-size:20px; }.lead-tools { flex-wrap:wrap; }.lead-tools input { flex-basis:100%; }.metrics { gap:8px; }.metric { padding:13px; }.metric-value { font-size:25px; }.dash-top h1 { font-size:25px; }.dash-button { padding:0 9px; }.modal { padding:30px 22px; }.modal h2 { font-size:29px; } }

/* Honda motorcycle campaign direction */
:root { --sans:"Manrope",sans-serif; --display:"Archivo Narrow",sans-serif; --ink:#151515; --paper:#f3f3f1; --white:#fbfbfa; --red:#e60012; --red-dark:#bd0010; --gold:#e60012; --green:#25754d; --line:#d6d6d3; --muted:#6e6e6b; }
.brand-mark { border-radius:0; transform:skewX(-12deg); font-family:var(--display); font-style:italic; font-weight:900; }.brand strong { font-family:var(--display); font-size:18px; font-style:italic; font-weight:900; letter-spacing:.3px; }.account-trigger { display:flex; align-items:center; gap:8px; border:0; padding:8px; background:transparent; color:var(--ink); font:800 11px var(--display); letter-spacing:.5px; }.account-icon { position:relative; display:block; width:28px; height:28px; border:2px solid var(--red); border-radius:50%; }.account-icon:before { content:""; position:absolute; top:4px; left:8px; width:8px; height:8px; border:2px solid var(--red); border-radius:50%; }.account-icon:after { content:""; position:absolute; bottom:4px; left:4px; width:16px; height:8px; border:2px solid var(--red); border-radius:10px 10px 0 0; border-bottom:0; }.hero h1,.intro-band h2,.model-section h2,.service-grid h3,.model-list h3,.modal h2,.dash-top h1,.panel-heading h2,.metric-value { font-family:var(--display); font-style:italic; font-weight:900; letter-spacing:.2px; }.hero h1 { font-size:clamp(55px,7vw,103px); text-transform:uppercase; line-height:.84; }.hero h1 em { color:var(--red); }.hero-visual { background:#ededeb; }.hero-visual:before { content:""; position:absolute; top:0; right:0; width:64%; height:78%; background:var(--red); clip-path:polygon(45% 0,100% 0,100% 100%,0 100%); }.sun-disc { top:20%; left:7%; width:min(22vw,275px); background:#1c1c1c; }.motorcycle { position:absolute; z-index:2; top:38%; left:8%; width:82%; height:40%; filter:drop-shadow(18px 21px 11px rgba(0,0,0,.22)); }.bike-wheel { position:absolute; z-index:2; bottom:0; width:24%; aspect-ratio:1; border:8px solid #161616; border-radius:50%; background:radial-gradient(circle,#888 0 13%,#333 14% 20%,#c7c7c7 21% 24%,#333 25% 28%,#eee 29% 31%,#252525 32%); }.bike-wheel-left { left:8%; }.bike-wheel-right { right:6%; }.bike-frame { position:absolute; bottom:19%; left:25%; width:46%; height:11%; background:#222; transform:skewX(-23deg); }.bike-tank { position:absolute; z-index:1; bottom:32%; left:37%; width:27%; height:24%; border-radius:52% 36% 43% 25%; background:linear-gradient(130deg,#f43a44 0 58%,#a5000e 59%); transform:skewX(-16deg); }.bike-seat { position:absolute; z-index:1; bottom:41%; left:24%; width:23%; height:10%; border-radius:70% 12% 20% 70%; background:#202020; transform:skewX(15deg); }.bike-fork { position:absolute; bottom:21%; right:23%; width:3%; height:45%; background:#b6b6b4; transform:rotate(22deg); transform-origin:bottom; }.bike-handle { position:absolute; bottom:61%; right:18%; width:17%; height:3%; background:#202020; transform:rotate(-10deg); }.bike-handle:after { content:""; position:absolute; right:-2px; top:-9px; width:3px; height:13px; background:#202020; }.road-line { background:rgba(0,0,0,.16); }.hero-note { color:white; font-weight:500; }.intro-band { background:var(--red); }.intro-band .section-label { color:#fff; }.intro-band h2 em { color:var(--ink); }.service-section { background:var(--white); }.service-grid h3 { font-size:30px; text-transform:uppercase; }.model-section { background:#e8e8e6; }.model-list h3 { font-size:31px; text-transform:uppercase; }.contact-band { background:var(--ink); }.contact-band a { color:var(--red); border-color:var(--red); }.register-link { display:block; margin:20px auto 0; border:0; border-bottom:1px solid var(--red); background:transparent; color:var(--red); padding:0 0 3px; font-size:11px; font-weight:800; }.sidebar { background:#202020; }.sidebar-nav button.active,.sidebar-nav button:hover { background:var(--red); }.nav-icon { color:var(--red); }.sidebar-nav button.active .nav-icon,.sidebar-nav button:hover .nav-icon { color:white; }.dash-top h1 { font-size:38px; }.dash-button { background:var(--red); }.panel-heading h2 { font-size:21px; }.metric-value { font-size:38px; }.admin-user-button { margin-right:8px; min-height:38px; padding:0 12px; border:1px solid var(--ink); background:transparent; color:var(--ink); font-size:10px; font-weight:800; }
@media (max-width:820px) { .hero h1 { font-size:64px; }.hero-visual:before { width:75%; }.account-label { display:none; }.motorcycle { top:33%; } }

/* Honda identity and interactive CRM modules */
.site-header { position:sticky; z-index:20; top:0; }
.honda-brand { gap:9px; }.honda-brand strong { color:var(--red); font-family:Georgia,serif; font-size:20px; font-style:normal; letter-spacing:1px; }.honda-wing { display:grid; gap:2px; width:39px; transform:skewY(-24deg) rotate(-7deg); }.honda-wing i { display:block; height:6px; border-radius:0 10px 10px 0; background:var(--red); }.honda-wing i:nth-child(2) { width:32px; }.honda-wing i:nth-child(3) { width:25px; } footer { gap:22px; align-items:center; } footer span:nth-child(2) { max-width:540px; text-align:center; }
.dash-view { display:grid; gap:18px; }.dash-view-head { display:flex; justify-content:space-between; align-items:center; gap:15px; }.dash-view-head h2 { margin:0; font:900 26px var(--display); font-style:italic; text-transform:uppercase; }.dash-view-head p { margin:5px 0 0; color:var(--muted); font-size:11px; }.workspace-panel { padding:20px; }.empty-state { padding:46px 20px; text-align:center; color:var(--muted); font-size:12px; }.data-table { width:100%; border-collapse:collapse; font-size:11px; }.data-table th { padding:11px 8px; color:var(--muted); border-bottom:1px solid var(--line); text-align:left; font:10px var(--mono); }.data-table td { padding:12px 8px; border-bottom:1px solid #eeece7; }.table-action { padding:5px 7px; border:1px solid var(--line); background:var(--white); color:var(--red); font-size:10px; font-weight:800; }.table-action:hover { background:var(--red); color:white; }.two-column { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.service-card { padding:22px; border-left:4px solid var(--red); background:#fff; }.service-card h3 { margin:0 0 7px; font:900 24px var(--display); font-style:italic; }.service-card p { margin:4px 0; color:var(--muted); font-size:12px; }.service-date { display:inline-block; margin-top:14px; padding:6px 9px; background:#fbe3e4; color:var(--red); font-size:10px; font-weight:800; }.upload-box { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px; border:1px dashed #a4aaa3; background:#fafaf8; }.upload-box p { margin:0; font-size:11px; color:var(--muted); }.upload-box input { max-width:210px; font-size:10px; }.document-list { display:grid; gap:8px; margin-top:14px; }.document-item { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:11px; }.chat-shell { display:grid; grid-template-rows:1fr auto; min-height:390px; }.chat-log { display:grid; align-content:start; gap:10px; max-height:375px; overflow:auto; padding:18px; background:#f7f7f5; }.chat-message { max-width:86%; padding:10px 12px; font-size:12px; line-height:1.55; }.chat-message.bot { background:white; border-left:3px solid var(--red); }.chat-message.user { justify-self:end; background:#242424; color:white; }.chat-form { display:flex; gap:8px; padding:14px; border-top:1px solid var(--line); }.chat-form input { flex:1; min-width:0; border:1px solid var(--line); padding:10px; }.chat-form button { border:0; padding:0 14px; background:var(--red); color:white; font-weight:800; }.access-note { padding:12px 14px; border-left:3px solid var(--red); background:#fce8e8; color:#7d1d27; font-size:11px; }.dash-honda-brand strong { color:white; }.dash-honda-brand .honda-wing i { background:var(--red); }
@media (max-width:820px) { footer { align-items:flex-start; flex-direction:column; } footer span:nth-child(2) { text-align:left; }.two-column { grid-template-columns:1fr; }.dash-view-head { align-items:flex-start; flex-direction:column; }.data-table { min-width:560px; }.table-wrap { overflow-x:auto; }.upload-box { align-items:flex-start; flex-direction:column; } }

/* Honda wing identity, dealer hero, and location map */
.honda-brand { gap:9px; }.honda-logo { display:block; width:126px; height:54px; object-fit:contain; object-position:left center; }.honda-brand small { margin:0; white-space:nowrap; }.hero-dealer-photo { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; object-position:56% center; filter:contrast(1.06) saturate(.86); }.hero-photo-shade { position:absolute; z-index:2; inset:0; background:linear-gradient(90deg,rgba(20,20,20,.07),rgba(230,0,18,.2)); }.hero-visual:before,.sun-disc,.road-line,.motorcycle { display:none; }.hero-note { z-index:3; color:white; text-shadow:0 1px 5px rgba(0,0,0,.5); } footer { display:grid; grid-template-columns:.9fr 1.15fr 1.2fr; gap:34px; align-items:center; padding:32px max(22px,5vw); }.footer-details { display:grid; gap:9px; color:var(--muted); font:9px var(--mono); }.footer-logo { width:126px; height:54px; object-fit:contain; object-position:left; }.footer-address { display:grid; gap:8px; color:var(--muted); font-size:11px; line-height:1.6; }.footer-address strong { color:var(--ink); font:900 17px var(--display); font-style:italic; text-transform:uppercase; }.footer-address address { font-style:normal; }.dealer-map { width:100%; height:140px; border:0; filter:grayscale(.85) contrast(1.05); }
@media (max-width:820px) { footer { display:grid; grid-template-columns:1fr; align-items:flex-start; }.dealer-map { height:220px; }.hero-dealer-photo { object-position:55% center; } }

/* Public quick-service rail */
.quick-services { position:fixed; z-index:25; right:0; top:50%; display:grid; width:108px; overflow:visible; transform:translateY(-50%); border:1px solid #d4d4d1; border-right:0; border-radius:18px 0 0 18px; background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.08); }.quick-services button { display:grid; place-items:center; gap:5px; min-height:88px; border:0; border-bottom:1px solid #d4d4d1; background:#fff; color:#535353; font-size:10px; line-height:1.25; text-align:center; }.quick-services button:last-of-type { border-bottom:0; border-radius:0 0 0 18px; }.quick-services button:hover { background:#fff2f3; color:var(--red); }.quick-icon { color:#161616; font-size:26px; line-height:1; font-weight:700; }.quick-tab { position:absolute; top:0; right:0; display:grid; place-items:center; width:24px; height:100%; transform:translateX(24px); background:var(--red); color:white; font:800 11px var(--sans); letter-spacing:.4px; writing-mode:vertical-rl; }.quick-overlay { position:fixed; z-index:29; inset:0; background:rgba(0,0,0,.4); }.quick-panel { position:fixed; z-index:30; top:0; bottom:0; left:0; width:min(94vw,465px); padding:72px 35px 34px; overflow-y:auto; border:0; background:#fff; box-shadow:12px 0 35px rgba(0,0,0,.18); transform:translateX(-105%); transition:transform .28s ease; }.quick-panel.is-open { transform:translateX(0); }.quick-close { position:absolute; top:20px; right:20px; width:36px; height:36px; border:1px solid #222; background:#fff; font-size:25px; }.quick-panel h2 { margin:10px 0 8px; font:900 36px/1 var(--display); font-style:italic; text-transform:uppercase; }.quick-panel .quick-description { margin:0 0 26px; color:var(--muted); font-size:13px; line-height:1.65; }.quick-form { display:grid; gap:14px; }.quick-form label { display:grid; gap:6px; color:#333; font-size:11px; font-weight:800; }.quick-form input,.quick-form select { min-height:45px; border:1px solid var(--line); padding:0 12px; background:#fafaf8; }.quick-result { margin-top:20px; padding:17px; border-left:4px solid var(--red); background:#f8f8f5; }.quick-result strong { display:block; font:900 26px var(--display); font-style:italic; }.quick-result span { color:var(--muted); font-size:11px; }.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.motor-release { display:grid; gap:3px; padding:15px 0; border-bottom:1px solid var(--line); }.motor-release strong { font:900 25px var(--display); font-style:italic; }.motor-release span { color:var(--muted); font-size:11px; }.public-view[hidden] ~ .quick-services,.public-view[hidden] ~ .quick-overlay,.public-view[hidden] ~ .quick-panel { display:none; }
@media (max-width:640px) { .quick-services { top:auto; bottom:18px; transform:none; grid-template-columns:repeat(5,1fr); width:calc(100% - 34px); border-radius:10px; right:17px; }.quick-services button { min-height:58px; font-size:8px; }.quick-services button:last-of-type { border-radius:0 10px 10px 0; }.quick-icon { font-size:18px; }.quick-tab { display:none; }.quick-panel { width:100%; padding:67px 22px 28px; }.quick-panel h2 { font-size:32px; } }

/* Honda Care chat interaction */
.chat-message strong { font-size:10px; letter-spacing:.4px; }.chat-suggestions { display:flex; flex-wrap:wrap; gap:7px; padding:2px 0 8px; }.chat-suggestions button { border:1px solid #d7d7d2; border-radius:16px; padding:7px 10px; background:#fff; color:#3d3d3a; font-size:10px; }.chat-suggestions button:hover { border-color:var(--red); color:var(--red); }.chat-typing { color:var(--muted); font-style:italic; }.chat-typing span { display:inline-block; animation:chat-dot 1.1s infinite; }.chat-typing span:nth-child(2) { animation-delay:.15s; }.chat-typing span:nth-child(3) { animation-delay:.3s; } @keyframes chat-dot { 0%,100% { opacity:.2; transform:translateY(0); } 50% { opacity:1; transform:translateY(-2px); } }