/* LOUCEL's Customs mockup · MN Design · direction: one-motif (taste-skill, drawn 2026-11-09), hero redrawn from the tabbed folder stack into a stack of paint chips. Motif: the paint chip with a tab. Palette: dealt slate/sage/blush with USMC olive as the accent; chip colors are 1959 Chevrolet factory paints */
:root{
  --edge:rgba(0,0,0,.25);
  --dark:#1f2421; --bg:#a6b3bc; --surface:#b2bdc5; --ink:#1c1c1c; --muted:#38424a; --accent:#2c3620; --accent-ink:#e3e2da;
  --sage:#b7c8be; --blush:#d6c4b8;
  --white:#ecebe4; --red:#a3262a; --frost:#a9c6d3; --gold:#c9a85b; --aspen:#8fa88a;
  --m:5vw;
  --t-small:.875rem; --t-body:clamp(1.0625rem,1rem + .25vw,1.1875rem); --t-lead:clamp(1.15rem,1.05rem + .5vw,1.375rem);
  --t-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --tab:polygon(10% 0,90% 0,100% 100%,0 100%);

  --c1:#3b4a2b;
  --c2:rgba(0,0,0,.06);
  --c3:#d9d8d0;
  --c4:rgba(255,255,255,.45);
  --c5:rgba(255,255,255,.75);
  --c6:rgba(0,0,0,.25);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.55 "Bricolage Grotesque",system-ui,sans-serif;font-optical-sizing:auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;line-height:.95;letter-spacing:-.02em;font-variation-settings:"wdth" 80}
h2{font-size:var(--t-head);text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.hero :focus-visible{outline-color:var(--gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:-80px;background:var(--accent);color:var(--accent-ink);padding:12px 16px;z-index:10;font-weight:600}
.skip:focus{top:12px}
.tap{display:inline-flex;align-items:center;min-height:44px}
/* the tab shape returns as the button's top corners */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;border-radius:14px 14px 0 0;transition:transform .15s ease,background-color .15s ease}
.btn:hover{background:var(--c1)}.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.ghost:hover{background:var(--c2)}

/* hero: dark ground, name, stack of paint chips with tabs */
.hero{background:var(--dark);color:var(--white);min-height:100svh;display:flex;flex-direction:column;align-items:center;overflow:hidden;position:relative}
.top{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px var(--m) 0;font-size:.95rem}
.mark{text-decoration:none;font-weight:600}
.toplink{justify-self:end;text-decoration:none}
.toplink:hover{text-decoration:underline;text-underline-offset:4px}
h1{margin-top:clamp(48px,8vh,90px);font-size:clamp(5rem,12vw,11rem);text-transform:uppercase;font-variation-settings:"wdth" 75;letter-spacing:-.01em;line-height:1;text-align:center}
.lede{margin-top:22px;max-width:46ch;text-align:center;font-size:var(--t-lead);color:var(--c3);padding:0 20px}
.chips{position:relative;width:86vw;flex:1;min-height:340px;margin-top:clamp(36px,6vh,64px)}
.chip{position:absolute;left:0;right:0;height:100%;text-decoration:none;color:var(--ink);border-radius:0 0 0 0}
.chip .tab{position:absolute;top:-40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0 34px;font-size:1.0625rem;font-weight:700;clip-path:var(--tab);background:inherit;min-width:180px}
.c1{top:0;background:var(--frost)}.c1 .tab{left:2%}
.c2{top:64px;background:var(--gold)}.c2 .tab{left:24%}
.c3{top:128px;background:var(--red);color:var(--white)}.c3 .tab{left:46%}
.c4{top:192px;background:var(--aspen)}.c4 .tab{left:68%;}
.c5{top:256px;background:var(--white);padding:32px}.c5 .tab{right:2%}
.c5-note{margin-top:16px;color:var(--muted);font-weight:500}
a.chip:hover .tab{text-decoration:underline;text-underline-offset:4px}
.chip{transition:transform .25s cubic-bezier(.2,.7,.1,1)}
a.chip:hover,a.chip:focus-visible{transform:translateY(-8px)}

/* the work */
.work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:clamp(90px,10vw,150px) var(--m);align-items:start}
.work-head{grid-column:1/3}
.work-head p{margin:20px 0 12px;font-weight:600}
.jobs{margin:0;padding-left:1.1em;max-width:46ch}
.jobs li{margin-bottom:10px}
.work figure{margin:0}
.work img{width:100%;object-fit:cover;border-radius:0 0 28px 0}
.w1{grid-column:3/5}.w1 img{aspect-ratio:3/2}
.w2{grid-column:1/2}.w2 img{aspect-ratio:4/5}
.w3{grid-column:2/3}.w3 img{aspect-ratio:4/5}
.w4{grid-column:3/5}.w4 img{aspect-ratio:8/5}
figcaption{font-size:var(--t-small);color:var(--muted);margin-top:8px}

/* on the record */
.record{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 var(--m) clamp(56px,6vw,96px)}
.tile{background:var(--surface);aspect-ratio:3/2;padding:24px;display:flex;flex-direction:column;gap:8px}
.tile.lead{grid-column:span 2;background:var(--accent);color:var(--accent-ink);aspect-ratio:auto}
.tile.lead h2{font-size:clamp(2rem,3.4vw,3.4rem)}
.t-big{font-size:clamp(1.5rem,2vw,2rem);font-weight:800;line-height:1.05;font-variation-settings:"wdth" 80}
.record .tile:nth-child(3){grid-column:span 2;aspect-ratio:auto;background:var(--blush)}
.record .tile:nth-child(4){background:var(--sage)}

/* two-tone */
.twotone{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);padding:clamp(64px,7vw,110px) var(--m);background:var(--sage);align-items:center}
.tt-text>p{margin:20px 0 26px;max-width:46ch}
fieldset{border:0;margin:0 0 18px;padding:0}
legend{font-weight:700;margin-bottom:10px;padding:0}
.sw{display:flex;flex-wrap:wrap;gap:8px}
.sw button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px 6px 8px;font:500 .9375rem/1.1 "Bricolage Grotesque",sans-serif;border:0;background:var(--c4);color:var(--ink);border-radius:12px 12px 0 0;cursor:pointer;transition:background-color .15s ease}
.sw button:hover{background:var(--c5)}
.sw button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.sw i{width:26px;height:26px;border-radius:8px 8px 0 0;background:var(--c);border:1px solid var(--edge)} /* taste-skill-ignore: edge keeps the white swatch visible */
.small{font-size:var(--t-small);color:var(--muted)}
.tt-chip{aspect-ratio:4/5;max-height:640px;width:100%;display:grid;grid-template-rows:38fr 62fr;border-radius:28px 28px 0 0;overflow:hidden}
.tt-top,.tt-body{display:flex;align-items:flex-end;padding:22px 26px;font-weight:800;font-size:clamp(1.3rem,2.2vw,2rem);font-variation-settings:"wdth" 80;transition:background-color .4s ease,color .4s ease}

/* services */
.services{padding:clamp(90px,10vw,150px) var(--m)}
.services h2{margin-bottom:48px}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 64px}
.svc li{display:flex;gap:20px;align-items:flex-start}
.svc img{width:72px;height:72px;object-fit:cover;flex:none;border-radius:14px 14px 0 0}
.svc b{display:block;font-size:1.25rem;font-weight:700}
.svc span{display:block;color:var(--muted);max-width:38ch}

/* call coupon */
.call{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,3vw,48px);padding:0 var(--m) clamp(90px,10vw,150px);align-items:center}
.coupon{background:var(--blush);display:grid;grid-template-columns:46fr 54fr;min-height:320px; /* taste-skill-ignore: mask for scalloped/notched paper edge, not a fill */
  -webkit-mask:radial-gradient(circle 14px at 46% 0,transparent 98%,black) top/100% 51% no-repeat,radial-gradient(circle 14px at 46% 100%,transparent 98%,black) bottom/100% 51% no-repeat; /* taste-skill-ignore: mask edge */
  mask:radial-gradient(circle 14px at 46% 0,transparent 98%,black) top/100% 51% no-repeat,radial-gradient(circle 14px at 46% 100%,transparent 98%,black) bottom/100% 51% no-repeat} /* taste-skill-ignore: mask edge */
.c-left{padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;border-right:5px dotted var(--bg)}
.c-left h2{font-size:clamp(1.9rem,3vw,2.75rem);text-transform:uppercase}
.c-right{padding:48px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.c-right .btn{width:100%}
.map{margin:0}
.map img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 40%}

.foot{background:var(--dark);color:var(--c3);padding:40px var(--m) 48px}
.foot p{max-width:72ch;margin-bottom:12px;font-size:.9375rem}
.foot a{color:var(--white)}
.foot .credits{font-size:var(--t-small)}

@media (max-width:900px){
  :root{--m:16px}
  .top{grid-template-columns:1fr auto}.top .spacer{display:none}
  h1{font-size:clamp(4rem,22vw,7rem);margin-top:56px}
  .lede{font-size:1.125rem}
  .chips{width:100%;min-height:300px;margin-top:64px}
  .chip .tab{height:32px;top:-32px;font-size:.9375rem;min-width:0;padding:0 22px}
  .c1 .tab{left:2%}.c2 .tab{left:34%}.c3 .tab{left:auto;right:2%}.c4 .tab{left:2%}.c5 .tab{left:auto;right:2%}
  .c2{top:52px}.c3{top:104px}.c4{top:156px}.c5{top:208px;padding:24px 16px}
  .c5 .btn{width:100%}
  .work,.record{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .work-head,.w1,.w4{grid-column:1/-1}.w2{grid-column:1}.w3{grid-column:2}.w4{margin-top:0!important}
  .tile.lead,.record .tile:nth-child(3){grid-column:1/-1}
  .tile{aspect-ratio:auto;min-height:150px;padding:18px}
  .twotone,.call{grid-template-columns:minmax(0,1fr)}
  .tt-chip{aspect-ratio:1}
  .svc{grid-template-columns:minmax(0,1fr)}
  .coupon{grid-template-columns:minmax(0,1fr);-webkit-mask:none;mask:none}
  .c-left{border-right:0;border-bottom:5px dotted var(--bg);padding:28px 20px}
  .c-right{padding:28px 20px}
}
@media (pointer:coarse),(max-width:820px){
  html,body{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
.foot .credits{line-height:2}.foot .credits a,.foot p a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;line-height:1.4}
/* one load move: the chips deal in, back to front */
@keyframes deal{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
.chip{animation:deal .7s cubic-bezier(.2,.7,.1,1) both}
.c2{animation-delay:.07s}.c3{animation-delay:.14s}.c4{animation-delay:.21s}.c5{animation-delay:.28s}
@media (prefers-reduced-motion:reduce){.chip{animation:none}}