@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root{
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "DM Sans", Arial, sans-serif;
  color-scheme:dark;
  --ink:#080808;
  --panel:#151515;
  --paper:#fafafa;
  --soft:#bababa;
  --metal:#deb95c;
  --line:#353535;
  --gutter:clamp(22px,5.8vw,116px);
  font:16px/1.55 var(--sans)
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper)
}
h1,h2,h3,p,figure{
  margin:0
}
a,button{
  color:inherit
}
a{
  text-decoration:none
}
button{
  font:inherit;
  cursor:pointer
}
a:focus-visible,button:focus-visible{
  outline:3px solid #f2ce91;
  outline-offset:4px
}
img{
  display:block;
  width:100%;
  object-fit:cover
}
svg:not(.defs){
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
.defs,[hidden]{
  display:none!important
}
.skip{
  position:absolute;
  left:10px;
  top:-100px;
  z-index:9;
  background:#fff;
  color:#000;
  padding:10px
}
.skip:focus{
  top:10px
}
header{
  background:#080808;
  border-bottom:1px solid #333333;
  position:relative;
  z-index:3
}
.bar{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:0 var(--gutter);
  max-width:2000px;
  margin:auto
}
.brand{
  display:flex;
  align-items:center;
  gap:11px
}
.brand img{
  width:44px
}
.brand span{
  font:italic 500 27px/1 var(--display);
  letter-spacing:1.6px
}
.brand small{
  display:block;
  text-align:center;
  font:9px/1.7 var(--sans);
  letter-spacing:5px;
  margin-left:4px;
  color:var(--metal)
}
nav{
  display:flex;
  gap:clamp(20px,3vw,57px)
}
nav a,.outline,.eyebrow,.location,.contact-link small,.viewer span,figcaption{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:600
}
nav a{
  padding:14px 0;
  letter-spacing:1.65px;
  font-size:11px;
  color:#eeeeee
}
nav a:hover,.text-link:hover,.contact-link:hover,footer a:hover{
  color:var(--metal)
}
.outline{
  padding:12px 19px;
  border:1px solid #675d4b;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:1px;
  font-size:12px
}
.call svg{
  color:var(--metal)
}
.outline:hover{
  background:#242424
}
.menu{
  background:transparent;
  border:1px solid var(--line);
  height:44px;
  width:44px
}
.menu i{
  display:block;
  width:19px;
  height:1px;
  background:var(--paper);
  margin:5px auto
}
.hero{
  isolation:isolate;
  position:relative;
  min-height:clamp(565px,45vw,820px);
  display:flex;
  align-items:center;
  background:#090909;
  overflow:hidden
}
.scene{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden
}
.hero-photo{
  width:100%;
  height:100%;
  object-position:50% 54%;
  transition:opacity .28s
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(8,8,8,.96) 0%,rgba(8,8,8,.87) 21%,rgba(8,8,8,.33) 49%,transparent 77%),linear-gradient(0deg,rgba(8,8,8,.8),transparent 28%)
}
.hero-copy{
  padding:58px var(--gutter) 109px;
  animation:rise .7s ease-out
}
.lead{
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--metal);
  letter-spacing:2.55px
}
.lead span{
  width:32px;
  height:1px;
  background:var(--metal)
}
h1,h2,h3{
  font-family:var(--display);
  font-style:italic;
  font-weight:500
}
h1{
  font-size:clamp(77px,7.7vw,144px);
  letter-spacing:-.015em;
  line-height:.94;
  margin:25px 0 21px
}
em{
  font-weight:inherit;
  color:var(--metal)
}
.hero-copy p,.section-head p,.service-list p,.craft p,.contact p{
  color:#cccccc;
  font-size:15px;
  line-height:1.65
}
.actions{
  display:flex;
  gap:28px;
  align-items:center;
  margin-top:26px
}
.button,.text-link{
  display:inline-flex;
  align-items:center;
  gap:13px;
  font-weight:600;
  font-size:13px
}
.button{
  background:#e2bc61;
  color:#101010;
  padding:14px 21px;
  transition:background .18s
}
.button:hover{
  background:#f4d58b
}
.text-link{
  border-bottom:1px solid #76776d;
  padding:7px 0
}
.text-link b{
  color:var(--metal);
  font-size:18px;
  line-height:1;
  font-weight:400
}
.hero-foot{
  position:absolute;
  bottom:19px;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #ffffff38;
  padding-top:13px
}
.location{
  display:flex;
  align-items:center;
  gap:9px;
  letter-spacing:1.8px
}
.location svg{
  color:var(--metal)
}
.viewer{
  display:flex;
  align-items:center;
  gap:6px
}
.viewer span{
  margin-right:13px;
  font-variant-numeric:tabular-nums
}
.viewer i{
  color:#b7b8af;
  font-style:normal
}
.viewer button{
  border:1px solid #ffffff57;
  background:#16181596;
  border-radius:50%;
  width:36px;
  height:36px;
  font-size:17px
}
.viewer button:hover{
  border-color:var(--metal);
  color:var(--metal)
}
.wrap{
  padding-left:var(--gutter);
  padding-right:var(--gutter)
}
section[id]{
  scroll-margin-top:20px
}
.services,.gallery{
  padding-top:clamp(54px,5vw,95px);
  padding-bottom:clamp(60px,6vw,105px)
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:35px;
  margin-bottom:34px
}
h2{
  font-size:clamp(44px,4.6vw,87px);
  line-height:1.1;
  letter-spacing:-.012em;
  margin-top:15px
}
.section-head p{
  max-width:295px;
  font-size:14px
}
.service-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}
.service-list article{
  position:relative;
  isolation:isolate;
  background:var(--panel);
  min-height:350px;
  display:flex;
  align-items:flex-end;
  overflow:hidden
}
.service-list img{
  position:absolute;
  inset:0;
  height:100%;
  z-index:-2;
  transition:transform .65s
}
.service-list article:hover img{
  transform:scale(1.028)
}
.service-list article:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#090909f5,rgba(9,9,9,.73) 34%,transparent 90%);
  z-index:-1
}
.service-list article>div{
  padding:30px;
  max-width:440px
}
.eyebrow{
  color:var(--metal)
}
h3{
  font-size:34px;
  line-height:1.16;
  letter-spacing:-.04em
}
.service-list h3{
  margin:5px 0
}
.service-list .text-link{
  margin-top:10px
}
.craft{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:radial-gradient(ellipse at 48% 52%,#202020 0%,var(--ink) 72%);
  color:var(--paper)
}
.craft-image{
  min-height:410px;
  position:relative
}
.craft-image img{
  position:absolute;
  height:100%
}
.craft-copy{
  align-self:center;
  padding:clamp(38px,5vw,97px)
}
.craft-copy em,.craft-copy .eyebrow{
  color:var(--metal)
}
.craft-copy .lead span{
  background:var(--metal)
}
.craft-copy p{
  color:var(--soft);
  margin:13px 0 0;
  max-width:560px
}
.craft-copy h3{
  font:600 14px/1.4 var(--sans);
  letter-spacing:.02em;
  margin:23px 0 -9px
}
.plates{
  display:grid;
  grid-template-columns:1.3fr .85fr 1fr;
  gap:17px
}
.plates img{
  height:clamp(230px,23vw,410px);
  background:var(--panel)
}
figcaption{
  margin-top:12px;
  color:var(--soft)
}
.contact{
  background:linear-gradient(var(--ink),#191919 60%,var(--ink));

  padding-block:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.contact p{
  margin-top:12px
}
.contact-link{
  font:600 clamp(24px,2.6vw,46px) var(--sans);
  border-bottom:1px solid var(--metal);
  padding-bottom:10px
}
.contact-link small{
  display:block;
  color:var(--metal);
  margin-bottom:10px;
  font-family:var(--sans)
}
footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:25px;
  font-size:12px;
  color:var(--soft)
}
@keyframes rise{
  from{
    opacity:0;
    transform:translateY(10px)
  }
}
@media(max-width:800px){
  .bar{
    min-height:70px;
    gap:13px
  }
  .bar>.call{
    margin-left:auto
  }
  .menu:not([hidden]){
    display:block
  }
  .js nav{
    display:none
  }
  .js nav.open{
    display:flex;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#181818;
    padding:15px var(--gutter);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    gap:0
  }
  .js nav.open a{
    border-bottom:1px solid var(--line)
  }
  .bar:has(.menu[hidden]){
    flex-wrap:wrap;
    padding-block:12px
  }
  .bar:has(.menu[hidden]) nav{
    order:3;
    width:100%;
    justify-content:space-between
  }
  .hero{
    min-height:570px
  }
  .section-head p{
    max-width:245px
  }
  .service-list{
    gap:14px
  }
  .service-list article>div{
    padding:22px
  }
  .craft{
    grid-template-columns:.85fr 1fr
  }
  .plates{
    gap:10px
  }
}
@media(min-width:801px){
  .menu{
    display:none
  }
}
@media(max-width:600px){
  .bar{
    min-height:65px
  }
  .brand{
    gap:8px
  }
  .brand img{
    width:35px;
    height:39px
  }
  .brand span{
    font-size:19px
  }
  .brand small{
    font-size:8px;
    letter-spacing:3.5px
  }
  .bar>.call{
    border:0;
    padding:10px 0;
    font-size:11px;
    letter-spacing:.3px;
    gap:5px
  }
  .bar>.call svg{
    width:13px
  }
  .menu{
    width:38px;
    height:38px
  }
  .hero{
    min-height:630px;
    align-items:flex-start
  }
  .hero-copy{
    padding:37px var(--gutter) 0
  }
  .hero-photo{
    height:62%;
    position:absolute;
    bottom:0;
    object-position:62% 50%
  }
  .hero:after{
    background:linear-gradient(180deg,#090909 0%,#090909 36%,rgba(9,9,9,.75) 46%,transparent 63%,transparent 79%,#090909 100%)
  }
  h1{
    font-size:clamp(65px,16vw,95px);
    margin:18px 0 14px
  }
  .eyebrow,.location{
    font-size:9px
  }
  .hero-copy p{
    font-size:14px
  }
  .actions{
    gap:20px;
    margin-top:17px
  }
  .button{
    padding:12px 14px
  }
  .hero-foot{
    bottom:12px;
    padding-top:10px
  }
  .viewer span{
    margin-right:3px
  }
  .viewer button{
    width:32px;
    height:32px
  }
  .section-head,.contact{
    display:block
  }
  .section-head p{
    margin-top:12px;
    max-width:340px
  }
  .service-list,.craft{
    grid-template-columns:1fr
  }
  .service-list article{
    min-height:305px
  }
  .craft-image{
    min-height:255px
  }
  .craft-copy{
    padding:36px var(--gutter) 44px
  }
  .plates{
    grid-template-columns:1fr 1fr;
    gap:20px 10px
  }
  .plates figure:first-child{
    grid-column:1/-1
  }
  .plates img{
    height:175px
  }
  .plates figure:first-child img{
    height:240px
  }
  .contact-link{
    display:inline-block;
    margin-top:24px
  }
  footer{
    flex-wrap:wrap;
    justify-content:flex-start
  }
  footer span:nth-child(2){
    order:3;
    width:100%
  }
  footer a{
    margin-left:auto
  }
}
@media(max-width:355px){
  .bar{
    gap:8px
  }
  .brand img{
    width:29px
  }
  .location{
    letter-spacing:.65px
  }
  .viewer{
    gap:3px
  }
  .actions{
    gap:14px
  }
  .contact-link{
    font-size:26px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
}
@media(min-width:601px){
  .scene{
    left:20%;
    mask-image:linear-gradient(90deg,transparent,#000 24%);
  }
  .hero-photo{object-position:55% 48%}
}
@media(max-width:600px){
  .hero-photo{height:68%}
  .hero:after{
    background:linear-gradient(180deg,#090909 0%,#090909 34%,rgba(9,9,9,.87) 42%,rgba(9,9,9,.12) 62%,transparent 76%,#090909 100%);
  }
}

/* Let the photographic edges dissolve into the surrounding page. */
.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(transparent, var(--ink));
  pointer-events: none;
}
.craft-image img {
  mask-image: linear-gradient(180deg, transparent, black 16%, black 81%, transparent),
              linear-gradient(90deg, black 69%, transparent);
  mask-composite: intersect;
}
.scene .outgoing {
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
@media (max-width: 600px) {
  .craft-image img {
    mask-image: linear-gradient(180deg, transparent, black 15%, black 77%, transparent);
  }
}
@keyframes settle {
  from { opacity: .68; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head, .craft-copy, .plates figure, .contact > div {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

.bar > .call { white-space: nowrap; flex-shrink: 0; }
.service-action, .return {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #76776d;
  min-height: 44px;
}
.service-dialog {
  width: min(530px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--paper);
  overscroll-behavior: contain;
}
.service-dialog::backdrop { background: rgb(7 10 8 / 83%); }
body:has(.service-dialog[open]) { overflow: hidden; }
.service-dialog img { height: clamp(100px, 18vh, 180px); }
.service-body { padding: clamp(20px, 4vw, 34px); }
.service-body h2 { font-size: clamp(36px, 5vw, 52px); margin: 8px 0 16px; }
.service-body p { color: var(--soft); margin-bottom: 16px; }
.service-body form { display: inline-block; margin: 6px 0 0; }
.service-body .button { margin-right: 12px; }
.return { font-size: 13px; color: var(--paper); padding: 6px 0; }
.return:hover { color: var(--metal); }
@media (max-width: 800px) {
  .bar > .call { min-height: 44px; }
  .menu, .viewer button { min-width: 44px; min-height: 44px; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 355px) {
  .bar { padding-inline: 14px; }
}

/* Image-specific framing for the photography review. */
.hero-photo[src$="rear.webp"] { object-position: 51% 62%; }
.hero-photo[src$="front.webp"] { object-position: 50% 52%; }
.service-list img[src$="wash.jpg"], #wash img { object-position: 50% 58%; }
#detailing img { object-position: 50% 43%; }
.plates img[src$="aero.webp"] { object-position: 50% 40%; }
@media (max-width:600px) {
  .hero-photo[src$="rear.webp"] { height: 60%; object-position: 53% 67%; }
}

/* Feather photo edges while retaining contrast through the subject. */
.service-dialog > img {
  mask-image: linear-gradient(to bottom, black 64%, rgba(0,0,0,.88) 76%, rgba(0,0,0,.38) 90%, transparent);
}
.plates img {
  mask-image: linear-gradient(to bottom, black 79%, rgba(0,0,0,.94) 85%, rgba(0,0,0,.59) 94%, transparent);
}
@media (max-width: 600px) {
  .hero-photo {
    mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.32) 8%, rgba(0,0,0,.85) 19%, black 29%);
    transform-origin: 50% 75%;
  }
}

/* Monochrome photographs keep gold reserved for type, controls and selection. */
main img, .service-dialog img { filter: grayscale(1); }
.photo-viewer { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr); gap: clamp(24px, 4vw, 80px); align-items: center; }
.photo-stage { margin: 0; aspect-ratio: 3 / 2; background: #0c0c0c; position: relative; overflow: hidden; }
.photo-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.view-options { border-top: 1px solid var(--line); }
.view-options button { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 16px; padding: 14px 6px; width: 100%; background: transparent; color: var(--soft); border: 0; border-bottom: 1px solid var(--line); text-align: left; font: inherit; cursor: pointer; transition: color .24s, border-color .24s; }
.view-options img { width: 72px; height: 48px; object-fit: cover; }
.view-options b { font-weight: 400; opacity: 0; }
.view-options button[aria-pressed="true"] { color: var(--metal); border-bottom-color: var(--metal); }
.view-options button[aria-pressed="true"] b { opacity: 1; }
.view-options button:hover { color: white; }
@media(max-width:800px) {
  .photo-viewer { grid-template-columns: 1fr; gap: 10px; }
  .view-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; border: 0; }
  .view-options button { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 2px 0 9px; font-size: 12px; }
  .view-options img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .view-options b { display: none; }
}

/* Accentuate the display italic while keeping labels and body copy upright. */
.brand span, h1, h2, .service-list h3 {
  transform: skewX(-6deg);
  transform-origin: left center;
}
.brand small { transform: skewX(6deg); }
.arrow-icon { vertical-align: middle; flex-shrink: 0; }
.arrow-left { transform: rotate(180deg); }
.arrow-up { transform: rotate(-90deg); }
.arrow-down { transform: rotate(90deg); }
.arrow-diagonal { transform: rotate(-45deg); }
.viewer button { display: inline-grid; place-items: center; padding: 0; }