/* Event Signs — shared stylesheet */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

:root{
  --bg:#FBFAF8; --surface:#FFFFFF; --ink:#1F1D1B; --muted:#6F6A64; --line:#E8E4DD;
  --img:#F1EEE9; --btn:#1F1D1B; --btnText:#FFFFFF;
  --accent:#B26A4A; --tint:#F6F1EA; --tintLine:#EAE3D8;
  --barBg:#1F1D1B; --barInk:#E9E5DE;
  --rad:20px; --radSm:14px;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:"Instrument Serif","Times New Roman",Times,serif;
  --wrap:1312px;
}
body[data-theme="birthday"]{--accent:#B4623F;--tint:#FCF2ED;--tintLine:#F2E1D8}
body[data-theme="wedding"]{--accent:#93794F;--tint:#FAF6EE;--tintLine:#EEE6D6}
body[data-theme="stylist"]{--accent:#4F6B60;--tint:#F0F3F1;--tintLine:#DFE6E2}
body[data-theme="brand"]{--accent:#556274;--tint:#EFF1F4;--tintLine:#DFE3E9}

body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,h4,h5{font-weight:800;letter-spacing:-.028em;line-height:1.12}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}

/* trust bar */
.tbar{background:var(--barBg);color:var(--barInk);display:flex;align-items:center;justify-content:center;gap:26px;min-height:40px;font-size:12.5px;font-weight:500;padding:9px 20px;text-align:center;flex-wrap:wrap}
.tbar i{font-style:normal;opacity:.4}

/* nav */
.bar{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;height:76px;max-width:var(--wrap);margin:0 auto;padding:0 40px}
.bar .lg{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.bar .lg i{width:26px;height:26px;border-radius:8px;background:var(--accent);display:block;position:relative;flex:none}
.bar .lg i::before{content:"";position:absolute;left:6px;right:6px;top:8px;height:2px;background:var(--surface);border-radius:2px;box-shadow:0 4px 0 var(--surface)}
.bar-r{display:flex;align-items:center;gap:26px}
.navlinks{display:flex;gap:26px}
.navlinks a{font-size:15px;font-weight:500;color:var(--muted)}
.navlinks a:hover{color:var(--ink)}
.navlinks a.on{color:var(--accent);font-weight:700}
.nav-tog{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px 4px}
.nav-tog span{width:21px;height:2px;background:var(--ink);border-radius:2px;display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:15px;font-weight:600;padding:15px 26px;border-radius:100px;background:var(--btn);color:var(--btnText);border:1.5px solid var(--btn);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(31,29,27,.16)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.line:hover{border-color:var(--ink)}
.btn.lg{padding:17px 32px;font-size:16px}

.lab{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}

/* home hero */
.welcome{padding:70px 0 0}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.eyebrow{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.eyebrow span{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.eyebrow span:not(:last-child)::after{content:"·";margin-left:14px;color:var(--muted);opacity:.5}
.welcome h1{font-size:clamp(36px,4.6vw,62px);line-height:1.05;margin-bottom:22px}
.welcome h1 em{font-style:normal;color:var(--accent)}
.welcome .brief{font-size:17.5px;line-height:1.65;color:var(--muted);max-width:48ch;margin-bottom:30px}
.welcome .brief b{color:var(--ink);font-weight:600}
.nums{display:flex;gap:34px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;margin-bottom:30px}
.nums .n{font-size:29px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.nums .n em{font-style:normal}
.nums .n span{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:3px;letter-spacing:0}
.welcome-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.scrollcue{font-size:13.5px;color:var(--muted)}
.welcome-visual{display:grid;gap:14px}
.hero-frame{aspect-ratio:16/11;border-radius:var(--radSm);overflow:hidden;background:var(--img);position:relative}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-frame .badge{display:none}
.preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.preview a{aspect-ratio:1/1;border-radius:var(--radSm);overflow:hidden;background:var(--img);position:relative;display:block}
.preview a img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.preview a:hover img{transform:scale(1.05)}
.preview a span{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.94);color:var(--ink);font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:100px}

/* chooser */
.chooser{padding:96px 0 0}
.chooser-head{text-align:center;max-width:60ch;margin:0 auto 40px}
.chooser-head h2{font-size:clamp(28px,3.2vw,42px);margin-bottom:14px}
.chooser-head p{color:var(--muted);font-size:17px}
.panels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.panel{display:flex;flex-direction:column;border-radius:var(--rad);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease}
.panel:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(31,29,27,.1)}
.panel .pimg{aspect-ratio:4/3;background:var(--img);overflow:hidden}
.panel .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.panel:hover .pimg img{transform:scale(1.05)}
.panel .pnum{display:none}
.panel .pframe{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--paneltag,var(--accent));margin-bottom:10px}
.panel h3.ptitle,.panel .ptitle{font-size:21px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-bottom:10px}
.panel .pdesc{font-size:14.5px;line-height:1.6;color:var(--muted);margin-bottom:20px;flex:1}
.panel .choose{font-size:14.5px;font-weight:700;color:var(--ink);display:inline-flex;gap:7px}
.panel > :not(.pimg){padding-left:24px;padding-right:24px}
.panel .pframe{padding-top:24px}
.panel .choose{padding-bottom:26px}
.p-birthday{background:#FCF2ED;border-color:#F2E1D8;--paneltag:#B4623F}
.p-wedding{background:#FAF6EE;border-color:#EEE6D6;--paneltag:#93794F}
.p-stylist{background:#F0F3F1;border-color:#DFE6E2;--paneltag:#4F6B60}
.p-brand{background:#EFF1F4;border-color:#DFE3E9;--paneltag:#556274}
.notsure{text-align:center;margin-top:32px}
.notsure a{font-size:15px;font-weight:600;color:var(--accent);border-bottom:1.5px solid var(--accent);padding-bottom:3px}

/* lane hero */
.hero{background:var(--tint);border-bottom:1px solid var(--tintLine);padding:64px 0}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero .lab{margin-bottom:18px}
.hero h1{font-size:clamp(32px,4.2vw,56px);line-height:1.06;margin-bottom:20px}
.hero h1 em{font-style:italic;font-family:var(--serif);font-weight:400;color:var(--accent)}
.hero .sub{font-size:17.5px;line-height:1.65;color:var(--muted);max-width:48ch;margin-bottom:30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-img{aspect-ratio:4/5;border-radius:var(--radSm);overflow:hidden;background:var(--img)}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-copy{min-width:0}

/* offer grids */
.offer{padding:84px 0 0}
.offer-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:32px;flex-wrap:wrap}
.offer-head h2{font-size:clamp(26px,3vw,40px)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(31,29,27,.1)}
.card .cimg{aspect-ratio:4/3;background:var(--img);overflow:hidden}
.card .cimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .cimg img{transform:scale(1.05)}
.card .cph{aspect-ratio:4/3;background:var(--img);border-bottom:1px dashed #CFC7BC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#96907F;text-align:center;padding:16px}
.card .cph b{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.card .cph span{font-size:12px;line-height:1.5}
.card .ico{font-size:22px;color:var(--accent);padding:24px 24px 0}
.card h3{font-size:19px;font-weight:700;padding:22px 24px 0}
.card .ico + h3{padding-top:12px}
.card p{font-size:14.5px;line-height:1.6;color:var(--muted);padding:8px 24px 0;flex:1}
.card .more{font-size:14.5px;font-weight:700;color:var(--accent);padding:18px 24px 26px}
.grid-more{margin-top:24px;color:var(--muted);font-size:15px}
.grid-more a{color:var(--accent);font-weight:600;border-bottom:1.5px solid var(--accent)}

/* strip */
.strip{padding:84px 0 0}
.strip-box{background:var(--tint);border:1px solid var(--tintLine);border-radius:24px;padding:48px}
.strip-box h2{font-size:clamp(24px,2.6vw,34px);margin:14px 0 26px;max-width:24ch}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.quote blockquote{font-family:var(--serif);font-size:26px;line-height:1.35;margin-bottom:16px}
.quote .by{font-size:14.5px;font-weight:700}
.quote .by span{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.step .sn{width:34px;height:34px;border-radius:100px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-bottom:14px}
.step .step-h{font-size:18px;font-weight:700;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.6}
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px}
.logos div{background:var(--surface);border:1px solid var(--tintLine);border-radius:12px;height:74px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--muted)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:28px 24px}
.stat .v{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-bottom:10px}
.stat .v em{font-style:normal;color:var(--accent)}
.stat p{font-size:14px;line-height:1.55;color:var(--muted)}

/* cta */
.cta{padding:88px 0}
.cta .wrap{background:var(--tint);border:1px solid var(--tintLine);border-radius:24px;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap;max-width:var(--wrap)}
.cta h2{font-size:clamp(26px,3vw,38px);margin:12px 0 10px}
.cta p{color:var(--muted);max-width:50ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* prose (product + city pages) */
.prose{padding:40px 0 0}
.prose .wrap{max-width:1120px}
.breadcrumb{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.prose h1{font-size:clamp(30px,3.8vw,50px);line-height:1.08;margin:14px 0 20px;max-width:20ch}
.prose .lead{font-size:20px;line-height:1.6;color:var(--ink);margin-bottom:24px;max-width:60ch}
.anchor{background:var(--tint);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:20px 22px;font-size:15.5px;line-height:1.7;margin-bottom:34px;max-width:70ch}
.prose h2{font-size:clamp(22px,2.2vw,29px);margin:42px 0 14px;max-width:26ch}
.prose p{font-size:16.5px;line-height:1.78;color:var(--muted);margin-bottom:14px;max-width:68ch}
.prose p a{color:var(--accent);font-weight:600;border-bottom:1.5px solid var(--accent)}
.prose ul{list-style:none;display:grid;gap:12px;margin:6px 0 14px;max-width:68ch}
.prose li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.7;color:var(--muted)}
.prose li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:100px;background:var(--accent)}
.prose li b{color:var(--ink);font-weight:700}
.prose-img{border-radius:var(--radSm);overflow:hidden;background:var(--img);margin:8px 0 34px;aspect-ratio:16/10;max-width:1120px}
.prose-img img{width:100%;height:100%;object-fit:cover}
.related{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 8px}
.related a{display:inline-block;font-size:14px;font-weight:600;padding:10px 18px;border-radius:100px;border:1.5px solid var(--line);background:var(--surface);transition:border-color .2s,color .2s}
.related a:hover{border-color:var(--accent);color:var(--accent)}

/* faq */
.faq{padding:64px 0 0}
.faq .wrap{max-width:1120px}
.faq h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:22px}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:17.5px;font-weight:700;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:28px;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s ease}
.qa details[open] summary::after{transform:rotate(-135deg)}
.qa .a{padding:0 44px 24px 0;font-size:16px;line-height:1.75;color:var(--muted);max-width:76ch}

/* forms */
.formsec{padding:84px 0}
.formsec .wrap{max-width:900px}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:48px 44px}
.form-card h2{font-size:clamp(24px,2.6vw,36px);margin:12px 0 12px}
.form-card .intro{color:var(--muted);margin-bottom:32px}
.field{margin-bottom:24px}
.flab{display:block;font-size:14px;font-weight:700;margin-bottom:9px}
.opt{font-weight:500;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:inherit;font-size:14px;font-weight:600;padding:11px 18px;border-radius:100px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.seg{display:flex;gap:5px;background:var(--img);border-radius:13px;padding:5px;flex-wrap:wrap}
.segbtn{flex:1 1 130px;font-family:inherit;font-size:14px;font-weight:600;padding:13px 14px;border-radius:10px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:background .18s,color .18s}
.segbtn.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.inp{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px}
.inp:focus{outline:none;border-color:var(--accent)}
textarea.inp{min-height:110px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.reveal{display:none;margin-top:10px}
.upload{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--line);border-radius:14px;padding:22px;color:var(--muted);font-size:15px;cursor:pointer}
.upload:hover{border-color:var(--accent)}
.upload input{display:none}
.uname{color:var(--accent);font-weight:600}
.form-done{display:none;margin-top:20px;background:var(--tint);border:1px solid var(--tintLine);border-radius:14px;padding:20px 22px;font-size:15.5px;line-height:1.65}

/* materials */
.mat-hero{padding:56px 0 0}
.mat-hero .wrap{max-width:1120px}
.mat-hero h1{font-size:clamp(30px,3.8vw,50px);margin-bottom:18px}
.mat-hero p{font-size:19px;line-height:1.6;color:var(--muted);max-width:62ch}
.mat-cats{padding:56px 0 0}
.matgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.matcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:32px}
.matcard .mn{font-size:13px;font-weight:800;color:var(--accent);margin-bottom:12px}
.matcard h2{font-size:22px;margin-bottom:10px}
.matcard p{font-size:15px;line-height:1.65;color:var(--muted);margin-bottom:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:100px;background:var(--tint);border:1px solid var(--tintLine)}

/* footer */
footer{margin-top:84px;border-top:1px solid var(--line);background:var(--surface);padding:52px 0 44px}
.foot-big{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-bottom:26px}
.foot-cols{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:34px}
.foot-cols p{font-size:14.5px;line-height:1.65;color:var(--muted);max-width:40ch}
.foot-cols .foot-h{font-size:13px;font-weight:700;margin-bottom:14px}
.foot-cols a{display:block;font-size:14.5px;line-height:2.05;color:var(--muted)}
.foot-cols a:hover{color:var(--accent)}
.foot-end{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* scroll reveal — only ever hides content when JS is actually running */
.has-js [data-r]{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0) * 70ms)}
.has-js [data-r].in{opacity:1;transform:none}

/* responsive */
@media(max-width:1080px){
  .panels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid,.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .bar-in{height:64px;padding:0 20px}
  .navlinks{display:none;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--surface);padding:18px 20px 24px;border-bottom:1px solid var(--line);gap:4px;box-shadow:0 14px 30px rgba(31,29,27,.1)}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0;font-size:16px}
  .nav-tog{display:flex;padding:11px 6px;margin-right:-6px}
  .wrap{padding:0 20px}
  .welcome{padding:36px 0 0}
  .welcome-grid{grid-template-columns:1fr;gap:32px}
  .hero-frame{aspect-ratio:4/3}
  .preview{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .preview a span{left:6px;bottom:6px;font-size:10.5px;padding:5px 8px}
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .hero{padding:38px 0}
  .hero-img{aspect-ratio:4/3}
  .chooser{padding:64px 0 0}
  .panels{grid-template-columns:1fr;gap:16px}
  .panel .pimg{aspect-ratio:16/10}
  .offer,.strip{padding:56px 0 0}
  .grid,.grid.g3,.stats,.qrow,.steps,.matgrid,.logos{grid-template-columns:1fr}
  .logos{grid-template-columns:1fr 1fr}
  .strip-box,.form-card,.matcard{padding:28px 22px}
  .cta{padding:56px 0}
  .cta .wrap{padding:34px 24px;flex-direction:column;align-items:flex-start;gap:24px}
  .row2{grid-template-columns:1fr;gap:16px}
  .foot-cols{grid-template-columns:1fr;gap:28px}
  .btn{width:100%;min-height:54px}
  .hero-cta .btn,.welcome-cta .btn,.cta-row .btn{flex:1 1 100%}
  .prose-img{aspect-ratio:4/3}
  footer{margin-top:56px}
}
@media(max-width:420px){
  body{font-size:16px}
  .tbar{font-size:11.5px;gap:14px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .has-js [data-r]{opacity:1;transform:none}
}

/* contact details */
.barphone{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.barphone:hover{color:var(--accent)}
.foot-addr{display:block;font-size:14.5px;line-height:1.65;color:var(--muted);margin-top:12px}
@media(max-width:900px){.barphone{display:none}}

/* work gallery */
.workgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:8px 0 12px}
.workgrid figure{margin:0;border-radius:var(--radSm);overflow:hidden;background:var(--img);position:relative}
.workgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.workgrid figure:hover img{transform:scale(1.04)}
.workgrid figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);color:var(--ink);font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:100px}
@media(max-width:900px){.workgrid{grid-template-columns:1fr 1fr;gap:12px}}

/* nav dropdown */
.navdrop{position:relative;display:inline-flex}
.navdrop > a{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:500;color:var(--muted)}
.navdrop > a:hover,.navdrop > a.on{color:var(--accent)}
.navdrop > a.on{font-weight:700}
.navdrop-m{display:none;position:absolute;top:100%;left:-14px;padding-top:10px;flex-direction:column;min-width:232px;z-index:120}
.navdrop:hover .navdrop-m,.navdrop:focus-within .navdrop-m{display:flex}
.navdrop-m::before{content:"";position:absolute;top:10px;left:0;right:0;bottom:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 38px rgba(31,29,27,.14)}
.navdrop-m a{position:relative;padding:10px 14px;margin:0 8px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.navdrop-m a:first-of-type{margin-top:8px}
.navdrop-m a:last-of-type{margin-bottom:8px}
.navdrop-m a:hover{background:var(--tint);color:var(--accent)}
@media(max-width:900px){
  .navdrop{display:block;width:100%}
  .navdrop > a{padding:12px 0;font-size:16px}
  .navdrop > a svg{display:none}
  .navdrop-m{display:flex;position:static;padding:0 0 6px 14px;min-width:0;border-left:2px solid var(--line);margin-left:2px}
  .navdrop-m::before{display:none}
  .navdrop-m a{margin:0;padding:9px 0;font-size:15px}
}

/* mobile tap targets: 44px minimum on every link people are meant to hit */
@media(max-width:900px){
  .foot-cols a{padding:8px 0;line-height:1.9}
  .navdrop-m a{padding:11px 0}
  .related a{padding:12px 20px}
  .foot-end{gap:10px}
}

/* tablet-to-small-desktop: 7 nav items need breathing room before the hamburger kicks in */
@media(min-width:901px) and (max-width:1200px){
  .navlinks{gap:17px}
  .navlinks a,.navdrop > a{font-size:14px}
  .bar-r{gap:18px}
  .barphone{display:none}
  .bar-in{padding:0 24px}
}

/* form failure state — must look different from success, not like a variant of it */
.form-fail{display:none;margin-top:20px;background:#FBECEC;border:1px solid #EFCFCF;border-left:3px solid #A31D22;border-radius:0 14px 14px 0;padding:20px 22px;font-size:15.5px;line-height:1.65;color:#5A1B1E}
.form-fail a{color:#A31D22;font-weight:700;border-bottom:1.5px solid #A31D22}

/* upload states */
.uname.warn{color:#A31D22;font-weight:600}
.upload{transition:border-color .18s,background .18s}
.upload:focus-within{border-color:var(--accent)}
.btn[data-sending="1"]{opacity:.65;pointer-events:none}

/* per-item size + quantity rows */
.itemrows{display:none;gap:10px;margin-top:14px}
.itemrow{display:grid;grid-template-columns:1fr 1.5fr 92px;gap:10px;align-items:center;background:var(--tint);border:1px solid var(--tintLine);border-radius:14px;padding:12px 14px}
.itemrow .iname{font-size:14.5px;font-weight:700;line-height:1.3}
.itemrow .inp{padding:11px 13px;font-size:14.5px;background:var(--surface)}
.itemrow select.isize{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236F6A64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.itemrow .icustom{grid-column:1 / -1}
@media(max-width:640px){
  .itemrow{grid-template-columns:1fr 84px;row-gap:8px}
  .itemrow .iname{grid-column:1 / -1;font-size:14px}
}
.itemrow.custom-only{grid-template-columns:1fr 1.5fr 92px}
@media(max-width:640px){.itemrow.custom-only{grid-template-columns:1fr 84px}}

/* material selector + the opt-in explainer */
.itemrow.has-stock{grid-template-columns:1fr 1.3fr 1.15fr 84px}
.itemrow .istock{font-size:14px}
.stockhelp{grid-column:1 / -1;margin-top:2px}
.stockbtn{background:none;border:none;padding:6px 0;font-family:inherit;font-size:14px;font-weight:600;color:var(--accent);cursor:pointer;text-align:left;border-bottom:1.5px solid transparent}
.stockbtn:hover{border-bottom-color:var(--accent)}
.stockpanel{display:none;margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.stockpanel > div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.stockpanel > div:last-of-type{border-bottom:none}
.stockpanel b{font-size:14.5px;font-weight:700}
.stockpanel span{font-size:14.5px;line-height:1.6;color:var(--muted)}
.stockpanel p{margin:12px 0 0;font-size:14px;color:var(--muted);font-style:italic}
@media(max-width:640px){
  .itemrow.has-stock{grid-template-columns:1fr 84px}
  .itemrow.has-stock .isize,.itemrow.has-stock .istock{grid-column:1 / -1}
  .stockpanel > div{grid-template-columns:1fr;gap:3px}
}

/* required fields + validation */
.reqmark{font-style:normal;color:var(--accent);margin-left:3px;font-weight:700}
.ferr{display:none;font-size:13.5px;font-weight:600;color:#A31D22;margin-top:7px}
.field.err .ferr{display:block}
.field.err .inp{border-color:#A31D22;background:#FDF7F7}
.field.err .inp:focus{border-color:#A31D22;outline:2px solid rgba(163,29,34,.25);outline-offset:1px}