/* ==========================================================================
   M & M Windows Co. Inc. — "The Vault"
   Static site stylesheet. No frameworks, no build step, no dependencies.
   Derived from mockup-B-dark-vault.html.
   ========================================================================== */

:root{
  /* ------------------------------------------------------------------
     SAGE & LINEN — Gentek's headline 2026 exterior colour trend.
     Marco chose this on 22 Aug 2026 from seven samples. Every value below
     is either sampled from Gentek's own published swatches or derived from
     one, then checked for 4.5:1 contrast against the ground it sits on.

        Linen  #EEEAE1     Sage  #A5AA9C     Juniper Grove  #979C81

     The accent is Juniper Grove taken down to #535B41 so that white text on
     a button clears 7:1 and the same green clears 6.3:1 as a link on linen.
     Gentek's own Sage is too pale to carry text and is used as a surface.

     The previous black-and-gold palette is kept in site.css.dark-vault.bak.
     ------------------------------------------------------------------ */
  --bg:#f2f1eb;          /* Linen — the page ground */
  --bg-2:#ffffff;        /* raised cards, strips */
  --bg-3:#e8e8df;        /* sunken bands, footer, hover fills */
  --ink:#23261f;
  --ink-2:#3c4136;
  --mute:#575d4e;
  --line:#dcdcd1;        /* hairlines */
  --line-2:#c2c4b5;      /* borders that need presence — outline buttons */
  --brass:#535b41;       /* accent (Juniper Grove, darkened) */
  --brass-2:#414833;     /* accent, hover */
  --on-brass:#ffffff;    /* text on the accent */
  --plaque:#ffffff;      /* masthead */
  --sage:#a5aa9c;        /* Gentek Sage, used as a surface not as text */

  /* channel values, for the translucent layers */
  --bg-rgb:242,241,235;
  --brass-rgb:83,91,65;
  --shadow-rgb:38,42,32;
  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  /* Base size lifted from the browser default of 16px, and every size in this file
     scaled to match, so the whole page reads a step larger. Marco's customers skew
     older and he asked for it plainly: "making all font a little larger for the
     older generation audience". Anything inherited rather than explicitly sized —
     plain paragraphs, list items — picks this up. */
  font-size:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,
              "PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.zh{font-size:.95em;color:var(--ink-2);line-height:1.9}
.skip{position:absolute;left:-9999px;top:0;background:var(--brass);color:var(--on-brass);
  padding:10px 16px;z-index:200;font-weight:700}
.skip:focus{left:0}

/* ---------- MASTHEAD ---------- */
.masthead{background:var(--plaque);text-align:center;padding:22px 0 18px;
  border-bottom:3px solid var(--brass)}
.tagline{font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  margin-bottom:14px}
.masthead .logo{display:inline-block;max-width:760px;width:100%}
.masthead .logo img{width:100%;height:auto;mix-blend-mode:multiply}

/* ---------- NAV ---------- */
.navbar{position:sticky;top:0;background:rgba(var(--bg-rgb),.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);z-index:60}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.navtoggle{display:none;background:none;border:1.5px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:15.5px;font-weight:600;padding:9px 14px;border-radius:3px;
  cursor:pointer;margin:10px 0}
.navtoggle:hover{border-color:var(--brass);color:var(--brass)}
nav{flex:1}
nav ul{list-style:none;display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  justify-content:center;padding:12px 0;margin:0}
nav a{text-decoration:none;font-size:15.5px;font-weight:500;color:var(--ink-2);
  padding:6px 0;border-bottom:2px solid transparent;display:inline-block}
nav a:hover,nav a.on{color:var(--brass);border-color:var(--brass)}
.cta{background:var(--brass);color:var(--on-brass)!important;padding:9px 18px;border-radius:3px;
  font-size:15.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  border-bottom:none!important}
.cta:hover{background:var(--brass-2)}

/* dropdown */
.has-sub{position:relative}
.has-sub>a:after{content:" ▾";font-size:12.5px;opacity:.7}

/* This menu is .navsub, NOT .sub. It used to be .sub — the same class name the section
   sub-headings use — and `.sub{margin-top:14px}` from that unrelated rule pushed the
   panel 14px below the link. That 14px was dead space belonging to neither element, so
   the menu closed the moment the pointer left the link and could never be reached.
   Do not name anything in the nav `.sub` again. */
.navsub{display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;
  margin-top:0;background:var(--bg-2);border:1px solid var(--line);
  border-top:2px solid var(--brass);border-radius:0 0 4px 4px;min-width:270px;
  padding:8px 0;box-shadow:0 18px 40px rgba(var(--shadow-rgb),.16)}
/* A transparent bridge over the top edge, so a pointer that drifts a few pixels while
   travelling from the link into the menu is still inside .has-sub and the menu holds. */
.navsub:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.has-sub:hover .navsub,.has-sub:focus-within .navsub,.has-sub.open .navsub{display:block}
.navsub li{width:100%}
.navsub a{display:block;padding:11px 18px;border:none;font-size:15px;white-space:nowrap}
.navsub a:hover{background:var(--bg-3);color:var(--brass);border:none}
.navsub .grp{padding:10px 18px 5px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);font-weight:700}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:600px;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}
/* On the old dark palette the photograph was pushed down to brightness(.5) and a
   near-black gradient laid over it, so that white text could sit on top. Light text
   on a dark veil and dark text on a light veil are the same problem mirrored — but
   the veil has to be tuned, not just inverted. A straight inversion measured 13:1
   and erased the photograph. These values measure ~7:1 under the headline, which is
   still AAA for text this size, and the picture survives. Re-measure if you touch
   them: screenshot the h1's box and compare its colour against the pixels behind it. */
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.88)}
.hero-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 3%,rgba(var(--bg-rgb),.70) 44%,rgba(var(--bg-rgb),.42))}
.hero-in{position:relative;padding:0 0 68px;max-width:820px}
.eyebrow{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  font-weight:700;margin-bottom:18px}
/* "← All projects" is the only way back out of a gallery. At 12px it was a 14px-tall
   tap target; padding gives it the 24px minimum without moving anything visually. */
.eyebrow a{display:inline-block;padding:5px 0;min-height:24px}
h1{font-size:clamp(36px,5vw,65px);line-height:1.08;letter-spacing:-.025em;font-weight:700;
  margin-bottom:10px}
.h1-zh{font-size:clamp(21.5px,2.4vw,31.5px);color:var(--ink-2);font-weight:600;margin-bottom:22px;
  line-height:1.5}
.lede{font-size:19px;color:var(--ink-2);max-width:56ch;margin-bottom:10px}
.btnrow{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{padding:14px 26px;border-radius:3px;font-weight:600;font-size:17px;text-decoration:none;
  display:inline-block;border:none;font-family:inherit;cursor:pointer}
.btn-p{background:var(--brass);color:var(--on-brass)}
.btn-p:hover{background:var(--brass-2)}
.btn-s{border:1.5px solid var(--line-2);color:var(--ink)}
.btn-s:hover{border-color:var(--brass);color:var(--brass)}

/* page banner (non-home) */
.banner{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.banner .banner-bg{position:absolute;inset:0}
/* Banners carry a heavier veil than the hero: the page banners use whatever the
   category's cover photograph happens to be, and some of those are dark brick or
   night shots. This is set for the worst of them, not the best. */
.banner .banner-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1.04) saturate(.8)}
.banner .banner-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 4%,rgba(var(--bg-rgb),.74))}
.banner-in{position:relative;padding:74px 0 56px;max-width:860px}
.banner h1{font-size:clamp(33.5px,4.2vw,54px)}

/* ---------- STRIP ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;
  background:var(--bg-2)}
.strip-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;text-align:center}
.stat{flex:1 1 160px}
.stat b{display:block;font-size:33.5px;font-weight:700;letter-spacing:-.02em;color:var(--brass)}
.stat span{font-size:13.5px;color:var(--mute);letter-spacing:.04em}

/* ---------- SECTIONS ---------- */
section{padding:84px 0}
.sec-head{margin-bottom:40px;max-width:820px}
h2{font-size:clamp(29px,3.2vw,45px);line-height:1.15;letter-spacing:-.022em;font-weight:700}
.h2-zh{font-size:22.5px;color:var(--ink-2);font-weight:600;margin-top:6px}
.sub{color:var(--mute);margin-top:14px;font-size:18.5px}
.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- CATEGORY CARDS ---------- */
.grouphead{display:flex;align-items:baseline;gap:14px;margin:56px 0 20px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.grouphead:first-of-type{margin-top:0}
.grouphead h2{font-size:15.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.grouphead span{font-size:15px;color:var(--mute)}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cat{position:relative;display:block;text-decoration:none;border-radius:4px;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);transition:transform .22s,border-color .22s}
.cat:hover{transform:translateY(-3px);border-color:var(--brass)}
.cat .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--bg-3)}
.cat .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat:hover .thumb img{transform:scale(1.05)}
.cat .meta{padding:16px 18px 18px}
.cat .meta b{display:block;font-size:19px;font-weight:700;margin-bottom:1px}
.cat .meta .cz{font-size:15.5px;color:var(--ink-2);font-weight:600}
.cat .meta p{font-size:15px;color:var(--mute);margin-top:8px;line-height:1.55}
.cat .count{position:absolute;top:12px;right:12px;background:rgba(var(--bg-rgb),.86);
  color:var(--brass);font-size:13.5px;font-weight:700;letter-spacing:.06em;padding:5px 11px;
  border-radius:100px;border:1px solid var(--brass)}

/* ---------- GALLERY GRID ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tile{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--bg-2);
  cursor:zoom-in;border:none;padding:0;display:block;width:100%}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover img{transform:scale(1.06)}
.tile:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- LIGHTBOX ----------
   Deliberately still dark, on a light site. A photograph viewed full screen wants
   a dark surround — it stops the page glowing around the picture. Because of that
   this block does NOT use the page tokens for its text: --ink is now near-black and
   would vanish on the dark chrome. These four values are local on purpose. */
.lb{position:fixed;inset:0;background:rgba(12,13,11,.96);z-index:200;display:none;
  align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:3px}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(46,50,41,.92);
  border:1px solid rgba(255,255,255,.22);color:#f2f1eb;font-size:24.5px;line-height:1;
  width:50px;height:50px;border-radius:50%;cursor:pointer;font-family:inherit}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--brass);color:var(--on-brass);
  border-color:var(--brass)}
.lb-close{top:18px;right:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-size:14.5px;color:#c4c7ba;letter-spacing:.08em}

/* ---------- SECURITY ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;
  margin-top:38px}
.sec-card{background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:4px;padding:28px}
.sec-card .num{font-size:13.5px;color:var(--brass);font-weight:700;letter-spacing:.12em;
  margin-bottom:12px}
.sec-card h3{font-size:21.5px;margin-bottom:4px}
.sec-card .zh-h{font-size:17px;color:var(--ink-2);font-weight:600;margin-bottom:14px}
.sec-card p{font-size:16px;color:var(--mute);margin-bottom:10px}
.sec-card .zh{color:var(--mute);font-size:15.5px}

.mech{background:var(--bg-3);border:1px solid var(--line);border-radius:4px;padding:30px;
  margin-top:22px}
.mech-head{margin-bottom:22px}
.mech-head h3{font-size:23.5px}
.mech-head .zh-h{font-size:18px;color:var(--ink-2);font-weight:600;margin-top:2px}
.mech-head p{font-size:17px;color:var(--mute);margin-top:12px;max-width:70ch}
.mech-stage{display:flex;gap:44px;flex-wrap:wrap;justify-content:center;padding:14px 0 6px}
.mech-lbl{text-align:center;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-top:14px;font-weight:700}
.mech-lbl.ours{color:var(--brass)}
.key{list-style:none;margin-top:22px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 22px}
.key li{font-size:15.5px;color:var(--ink-2);padding-left:30px;position:relative}
.key li b{position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  background:var(--brass);color:var(--on-brass);font-size:13.5px;font-weight:700;text-align:center;
  line-height:21px}

/* --- CSS mechanism drawings ---
   These were drawn for a black page: a dark door with pale metal on it. On linen
   that inverted — the bolts on the multi-point door went dark-olive on dark-navy
   and effectively vanished, which destroys the whole point of the figure (one bolt
   versus three). Redrawn light: a pale door leaf, mid-grey jamb, and bolts in the
   accent so the three of them are the first thing you see. */
.door{position:relative;width:150px;height:250px;background:#dcddd4;border:2px solid #a9ac9e;
  border-radius:3px}
.door.ours{border-color:var(--brass)}
.jamb{position:absolute;top:-2px;bottom:-2px;right:-26px;width:24px;background:#c3c5b8;
  border:2px solid #a9ac9e;border-radius:2px}
.door.ours .jamb{border-color:var(--brass)}
.bolt{position:absolute;right:-2px;height:13px;width:15px;background:#7c8073;border-radius:2px;
  animation:boltmove 6s infinite}
.door.ours .bolt{background:var(--brass)}
.bolt.b1{top:44px}.bolt.b2{top:118px}.bolt.b3{top:192px}
.lever{position:absolute;right:14px;top:112px;width:52px;height:9px;background:#6e7264;
  border-radius:5px;transform-origin:right center;animation:levermove 6s infinite}
.door.ours .lever{background:var(--brass)}
.lever:after{content:"";position:absolute;right:-7px;top:-4px;width:17px;height:17px;
  border-radius:50%;background:inherit}
/* The lever's pivot is at its RIGHT end and the bar extends left, so a POSITIVE rotation
   swings the free end upward. The real hardware turns down to retract. Hence -45deg. */
@keyframes levermove{
  0%,32%{transform:rotate(0deg)} 42%,58%{transform:rotate(-45deg)}
  68%,100%{transform:rotate(0deg)}
}
@keyframes boltmove{
  0%,32%{transform:translateX(24px)} 42%,58%{transform:translateX(0)}
  68%,100%{transform:translateX(24px)}
}
@media(prefers-reduced-motion:reduce){
  .bolt,.lever{animation:none}
  .bolt{transform:translateX(24px)}
}

.glass{display:flex;align-items:stretch;height:230px;gap:0;position:relative;padding-left:14px;
  margin-top:46px}
.pane{width:26px;background:linear-gradient(120deg,#7fa8b8,#b9d6e0);border:1px solid #5d7b88;
  position:relative}
.pane.vinyl{width:12px;background:#e8dcc0;border-color:#b6a97f}
/* The argon gap is drawn as hatching. On black it was dark-on-dark; on linen it has
   to be light-on-light or it reads as a solid black bar between two panes of glass. */
.pane.air{width:52px;background:repeating-linear-gradient(45deg,#e4e5dc,#e4e5dc 6px,#cfd1c5 6px,#cfd1c5 12px);
  border-color:#a9ac9e}
.pane .cnum{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:21px;height:21px;
  border-radius:50%;background:var(--brass);color:var(--on-brass);font-size:13.5px;font-weight:700;
  text-align:center;line-height:21px}
/* stagger alternate callouts so the numbers never collide on the thin layers */
.pane:nth-child(2) .cnum,.pane:nth-child(4) .cnum{top:-40px}
.pane:nth-child(2) .cnum:after,.pane:nth-child(4) .cnum:after{content:"";position:absolute;
  left:50%;top:21px;width:1px;height:20px;background:var(--brass)}
.brace{position:absolute;top:calc(100% + 12px);left:14px;width:66px;height:12px;
  border:2px solid var(--brass);border-top:none}
.brace span{position:absolute;top:18px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:13px;color:var(--brass);font-weight:700;letter-spacing:.06em}

.plate-fig{display:flex;flex-direction:column;align-items:center}
.jambwall{position:relative;width:190px;height:250px;display:flex}
/* Wall section: trim, then studs drawn as hatching, with the strike plate laid over
   both. All three were dark-on-black; redrawn light so the plate still reads as metal
   sitting proud of the timber. */
.trim{width:34px;background:#c8cabd;border:1px solid #a9ac9e}
.framing{flex:1;background:repeating-linear-gradient(90deg,#e0e1d8,#e0e1d8 9px,#cbcdc0 9px,#cbcdc0 18px);
  border:1px solid #a9ac9e;border-left:none}
.plate{position:absolute;left:6px;width:22px;background:#8b8f80;border-radius:2px;
  border:1px solid #6e7264}
.plate.short{top:98px;height:56px}
.plate.long{top:22px;height:206px;background:var(--brass);border-color:var(--brass-2)}
.screw{position:absolute;left:26px;height:3px;background:#f2f1eb;border-radius:2px}
.plate.short .screw{width:28px}
.plate.long .screw{width:96px;background:var(--brass-2)}
.screw:after{content:"";position:absolute;right:-4px;top:-2px;border-left:5px solid;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  border-left-color:inherit}

/* ---------- PITCH / ABOUT ---------- */
.pitch-in{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:center}
.pitch-in img{border-radius:4px;aspect-ratio:4/3;object-fit:cover;width:100%}
.tick{list-style:none;margin:24px 0 0}
.tick li{padding-left:28px;position:relative;margin-bottom:12px;font-size:18px;color:var(--ink-2)}
.tick li:before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
  border-left:2.5px solid var(--brass);border-bottom:2.5px solid var(--brass);
  transform:rotate(-45deg)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.about-grid h3{font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.about-grid p{margin-bottom:15px;font-size:18px;color:var(--ink-2)}

.timeline{list-style:none;margin-top:40px;border-left:2px solid var(--line);padding-left:28px}
.timeline li{position:relative;margin-bottom:30px}
.timeline li:before{content:"";position:absolute;left:-35px;top:7px;width:12px;height:12px;
  border-radius:50%;background:var(--brass)}
.timeline b{display:block;color:var(--brass);font-size:14.5px;letter-spacing:.12em;
  margin-bottom:5px}
.timeline p{color:var(--ink-2);font-size:18px}
.timeline .zh{margin-top:5px}

/* ---------- PARTNERS ---------- */
.partners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
  margin-top:34px}
.p-card{background:var(--bg-3);border:1px solid var(--line);border-top:3px solid var(--brass);
  border-radius:4px;padding:24px;text-decoration:none;display:block;
  transition:transform .2s,border-color .2s}
.p-card:hover{transform:translateY(-3px);border-color:var(--brass)}
.p-card .p-since{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);
  font-weight:700;margin-bottom:10px}
.p-card h3{font-size:19.5px;margin-bottom:2px;line-height:1.25;color:var(--ink)}
.p-card .p-zh{font-size:15.5px;color:var(--ink-2);font-weight:600;margin-bottom:11px}
.p-card p{font-size:16px;color:var(--mute);margin-bottom:7px}
.p-card .p-link{font-size:14.5px;font-weight:700;color:var(--brass);letter-spacing:.03em;
  margin-top:12px;display:block}

/* ---------- FORM ---------- */
.form-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
form.inq{background:var(--bg-3);border:1px solid var(--line);border-top:3px solid var(--brass);
  border-radius:4px;padding:30px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.field label .req{color:var(--brass)}
.field input,.field select,.field textarea{width:100%;background:var(--bg);color:var(--ink);
  border:1.5px solid var(--line);border-radius:3px;padding:12px 13px;font-size:17.5px;
  font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:14px;color:var(--mute);margin-top:6px}
.hp{position:absolute;left:-9999px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.infocard{background:var(--bg-3);border:1px solid var(--line);border-radius:4px;padding:26px;
  margin-bottom:16px}
.infocard h3,.infocard h2{font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  margin-bottom:14px}
.infocard p,.infocard li{font-size:17.5px;color:var(--ink-2);margin-bottom:7px;list-style:none}
/* The phone number and email on the quote page are the two things a customer on a
   phone is most likely to tap. They were 17px tall; give them a real hit area. */
.infocard a{color:var(--brass);text-decoration:none;display:inline-block;
  padding:3px 0;min-height:24px}
.infocard a:hover{text-decoration:underline}
.mapwrap{border:1px solid var(--line);border-radius:4px;overflow:hidden;line-height:0}
.mapwrap iframe{width:100%;height:300px;border:0;filter:grayscale(.35) contrast(1.05)}

/* ---------- FOOTER ---------- */
footer{background:var(--bg-3);color:var(--mute);padding:58px 0 28px;font-size:16px;
  border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px;
  margin-bottom:36px}
footer h3{color:var(--ink);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:14px}
footer a{color:var(--mute);text-decoration:none}
footer a:hover{color:var(--brass)}
footer ul{list-style:none}
footer li{margin-bottom:8px}
/* Footer links were 16px tall — under WCAG 2.2's 24px minimum target and genuinely
   fiddly to hit with a thumb. inline-block + padding gives them a real hit area
   without changing how the column looks. */
footer li a{display:inline-block;padding:4px 0;min-height:24px}
.f-bot{border-top:1px solid var(--line);padding-top:22px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:15px}
.updated{color:var(--brass);font-weight:700}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .form-grid{grid-template-columns:minmax(0,1fr);gap:34px}
}
@media(max-width:900px){
  /* minmax(0,1fr), not a bare 1fr. A 1fr track carries an automatic minimum equal to
     the item's min-content width, and these grids hold <img width="600">, so the track
     refused to shrink below 600px and pushed the page 262px wider than an iPhone. */
  .about-grid,.pitch-in{grid-template-columns:minmax(0,1fr);gap:34px}
  section{padding:58px 0}
  .hero{min-height:470px}
  .navtoggle{display:block}
  nav{flex:0 0 100%;display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 0 14px}
  nav ul>li{border-bottom:1px solid var(--line)}
  nav ul>li>a{display:block;padding:13px 2px;border-bottom:none}
  .has-sub>a:after{content:""}
  .navsub{display:block;position:static;transform:none;border:none;box-shadow:none;
    background:var(--bg-2);min-width:0;padding:4px 0 8px;border-radius:0}
  .navsub a{padding:11px 18px;font-size:14.5px}
  .navsub:before{display:none}
  .cta{display:inline-block;margin:14px 0 4px}
  .navbar .wrap{flex-wrap:wrap}
}
@media(max-width:620px){
  .two{grid-template-columns:1fr}
  .mech{padding:20px 16px}
  .mech-stage{gap:26px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .lb-prev{left:8px}.lb-next{right:8px}
}

/* ==========================================================================
   MOTION
   Everything below is additive. Reveal styles are gated behind .js on <html>,
   set by a tiny inline script in the head, so if JavaScript never runs the
   content is simply visible — nothing is ever hidden by CSS alone.
   ========================================================================== */

:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- SCROLL REVEALS ---------- */
.js [data-rv]{
  opacity:0;
  transition:opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.js [data-rv="up"]     {transform:translate3d(0,26px,0)}
.js [data-rv="fade"]   {transform:none}
.js [data-rv="left"]   {transform:translate3d(-28px,0,0)}
.js [data-rv="right"]  {transform:translate3d(28px,0,0)}
.js [data-rv="scale"]  {transform:scale(.965)}
.js [data-rv="mask"]   {transform:translate3d(0,30px,0);clip-path:inset(0 0 100% 0)}
.js [data-rv].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* On a phone the sideways reveals slide in from 28px outside the wrap's 24px padding,
   which is 4px past the viewport edge — enough to give the whole page a horizontal
   scrollbar before anything has animated. Narrow screens get the vertical reveal
   instead; it reads the same and cannot overflow. */
@media(max-width:640px){
  .js [data-rv="left"],.js [data-rv="right"]{transform:translate3d(0,26px,0)}
}

/* the hero writes itself in on load rather than on scroll */
.js .hero-in>*{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .hero-in.in>*{opacity:1;transform:none}
.js .hero-in.in>*:nth-child(1){transition-delay:.05s}
.js .hero-in.in>*:nth-child(2){transition-delay:.14s}
.js .hero-in.in>*:nth-child(3){transition-delay:.22s}
.js .hero-in.in>*:nth-child(4){transition-delay:.30s}
.js .hero-in.in>*:nth-child(5){transition-delay:.38s}
.js .hero-in.in>*:nth-child(6){transition-delay:.46s}
.js .hero-bg img{transform:scale(1.07);transition:transform 1.8s var(--ease-out)}
.js .hero-bg.in img{transform:scale(1)}

/* ---------- STICKY HEADER SHRINK ---------- */
/* The masthead used to shrink once you scrolled past 90px. It looked fine in isolation
   but it is NOT sticky — only the nav bar is — so collapsing it removed ~125px of page
   height underneath the reader, jolting the content upward mid-scroll and landing every
   #anchor jump in the wrong place. Removed; the nav shadow alone marks the scrolled state. */
.navbar{transition:box-shadow .3s var(--ease)}
body.scrolled .navbar{box-shadow:0 10px 30px rgba(var(--shadow-rgb),.14)}

/* thin brass progress bar across the top of the nav */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--brass);
  transition:width .12s linear;z-index:2}

/* ---------- TEXT & LINK HOVERS ---------- */
/* nav: underline sweeps out from the middle instead of just appearing */
/* underline lives on ::before so the dropdown caret (::after) survives */
nav a{position:relative;border-bottom:none!important}
nav ul>li>a:before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:center;
  transition:transform .32s var(--ease)}
nav ul>li>a:hover:before,nav ul>li>a.on:before{transform:scaleX(1)}
nav ul>li>a{transition:color .25s var(--ease)}
.cta:before{display:none}

/* dropdown items slide a touch and gain a brass rule */
.sub a{position:relative;transition:background .2s var(--ease),color .2s var(--ease),
  padding-left .25s var(--ease)}
.sub a:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--brass);transform:scaleY(0);transition:transform .25s var(--ease)}
.sub a:hover{padding-left:24px}
.sub a:hover:before{transform:scaleY(1)}

/* footer links: brass wipes in from the left under the text */
footer a{position:relative;transition:color .25s var(--ease)}
footer li a:after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
footer li a:hover:after{transform:scaleX(1)}

/* inline brass links in body copy */
.infocard a,.lede a{background-image:linear-gradient(var(--brass),var(--brass));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease);text-decoration:none}
.infocard a:hover,.lede a:hover{background-size:100% 1px}

/* ---------- BUTTONS ---------- */
.btn{position:relative;overflow:hidden;transition:transform .22s var(--ease),
  box-shadow .28s var(--ease),background .25s var(--ease),color .25s var(--ease),
  border-color .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-p:hover{box-shadow:0 10px 24px rgba(var(--brass-rgb),.28)}
.btn-s:hover{box-shadow:0 10px 24px rgba(var(--shadow-rgb),.11)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
/* light sheen sweeps across on hover */
.btn:before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease)}
.btn:hover:before{left:150%}
.cta{transition:background .25s var(--ease),transform .2s var(--ease),
  box-shadow .25s var(--ease)}
.cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(var(--brass-rgb),.3)}
.navtoggle{transition:border-color .25s var(--ease),color .25s var(--ease),
  background .25s var(--ease)}

/* ---------- CARDS ---------- */
.cat,.p-card,.sec-card{transition:transform .3s var(--ease),border-color .3s var(--ease),
  box-shadow .3s var(--ease),background .3s var(--ease)}
.cat:hover,.p-card:hover{box-shadow:0 16px 38px rgba(var(--shadow-rgb),.13)}
.cat .meta b{transition:color .25s var(--ease)}
.cat:hover .meta b{color:var(--brass)}
.cat .count{transition:transform .3s var(--ease),background .3s var(--ease),
  color .3s var(--ease)}
.cat:hover .count{transform:scale(1.06);background:var(--brass);color:var(--on-brass)}
.cat .thumb img{transition:transform .8s var(--ease-out)}
.sec-card{border-left-width:3px}
.sec-card:hover{transform:translateY(-3px);border-color:var(--line);
  border-left-color:var(--brass-2);background:var(--bg-2);
  box-shadow:0 14px 32px rgba(var(--shadow-rgb),.12)}
.sec-card .num{transition:letter-spacing .3s var(--ease)}
.sec-card:hover .num{letter-spacing:.2em}
.p-card .p-link{transition:transform .28s var(--ease);display:inline-block}
.p-card:hover .p-link{transform:translateX(5px)}

/* ticked list items nudge across */
.tick li{transition:transform .25s var(--ease),color .25s var(--ease)}
.tick li:hover{transform:translateX(4px);color:var(--ink)}
.tick li:before{transition:border-color .25s var(--ease),transform .25s var(--ease)}
.tick li:hover:before{border-color:var(--brass-2);transform:rotate(-45deg) scale(1.15)}

/* timeline dots pulse into place */
.timeline li{transition:transform .3s var(--ease)}
.timeline li:hover{transform:translateX(4px)}
.timeline li:before{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.timeline li:hover:before{transform:scale(1.35);box-shadow:0 0 0 5px rgba(var(--brass-rgb),.16)}

/* stat counters */
.stat b{font-variant-numeric:tabular-nums}
.stat{transition:transform .3s var(--ease)}
.stat:hover{transform:translateY(-3px)}

/* form fields */
.field input,.field select,.field textarea{transition:border-color .25s var(--ease),
  box-shadow .25s var(--ease),background .25s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 3px rgba(var(--brass-rgb),.16)}
.field label{transition:color .25s var(--ease)}
.field:focus-within label{color:var(--brass)}

/* gallery tiles */
.tile{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.tile:after{content:"";position:absolute;inset:0;background:rgba(var(--brass-rgb),0);
  transition:background .3s var(--ease);pointer-events:none}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(var(--shadow-rgb),.14)}
.tile:hover:after{background:rgba(var(--brass-rgb),.08)}

/* ---------- CAROUSEL (category pages) ---------- */
.car-wrap{position:relative;margin-top:6px}
.car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 0 16px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.car::-webkit-scrollbar{height:6px}
.car::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.car::-webkit-scrollbar-thumb:hover{background:var(--brass)}
.car-item{flex:0 0 clamp(240px,30vw,400px);scroll-snap-align:start;aspect-ratio:4/3;
  position:relative;overflow:hidden;border-radius:4px;background:var(--bg-2);
  border:none;padding:0;cursor:zoom-in;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.car-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.car-item:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(var(--shadow-rgb),.14)}
.car-item:hover img{transform:scale(1.06)}
.car-item:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.car-btn{position:absolute;top:calc(50% - 10px);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;background:rgba(var(--bg-rgb),.92);
  border:1px solid var(--line);color:var(--ink);font-size:22.5px;line-height:1;cursor:pointer;
  font-family:inherit;transition:background .25s var(--ease),color .25s var(--ease),
  border-color .25s var(--ease),transform .25s var(--ease),opacity .25s var(--ease)}
.car-btn:hover{background:var(--brass);color:var(--on-brass);border-color:var(--brass);
  transform:translateY(-50%) scale(1.08)}
.car-btn[disabled]{opacity:.25;cursor:default}
.car-btn.prev{left:-6px}
.car-btn.next{right:-6px}
.car-hint{font-size:14px;color:var(--mute);letter-spacing:.06em;margin-top:2px}

/* ---------- CATEGORY ROWS (projects hub) ----------
   Four photographs visible per category, the rest a swipe or an arrow away.
   `.four` overrides the category-page item width; everything else is shared. */
.catrow{margin:0 0 40px}
.catrow-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:10px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.catrow-name{text-decoration:none;color:inherit;display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap}
.catrow-name b{font-family:var(--display);font-size:24.5px;font-weight:600;
  letter-spacing:-.01em;transition:color .25s var(--ease)}
.catrow-name .cz{font-size:17px;color:var(--mute)}
.catrow-name:hover b{color:var(--brass)}
.catrow-all{font-size:15.5px;color:var(--mute);text-decoration:none;white-space:nowrap;
  letter-spacing:.04em;padding:6px 0;min-height:24px;transition:color .25s var(--ease)}
.catrow-all:hover{color:var(--brass)}
.car-wrap.four .car-item{flex:0 0 calc((100% - 36px) / 4)}
@media(max-width:1000px){.car-wrap.four .car-item{flex:0 0 calc((100% - 24px) / 3)}}
@media(max-width:760px){.car-wrap.four .car-item{flex:0 0 calc((100% - 12px) / 2)}}
@media(max-width:480px){.car-wrap.four .car-item{flex:0 0 78%}}

/* ---------- MARQUEE (homepage drifting strip) ---------- */
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;gap:12px;width:max-content;animation:drift 70s linear infinite}
.marquee:hover .mq-track,.marquee:focus-within .mq-track,
.marquee.paused .mq-track{animation-play-state:paused}
.marquee.rev .mq-track{animation-direction:reverse;animation-duration:84s}
.mq-item{flex:0 0 280px;aspect-ratio:4/3;overflow:hidden;border-radius:4px;
  background:var(--bg-2);border:none;padding:0;cursor:zoom-in;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.mq-item img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out),filter .4s var(--ease)}
.mq-item:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(var(--shadow-rgb),.16);z-index:2}
.mq-item:hover img{transform:scale(1.07)}
.mq-item:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- MECHANISM FIGURES: animate in ---------- */
.js .mech [data-rv]{}
.mech{transition:border-color .3s var(--ease)}
.mech:hover{border-color:var(--brass)}

/* ---------- REDUCED MOTION ----------
   One switch that turns the whole lot off for anyone whose device asks for less. */
@media(prefers-reduced-motion:reduce){
  .js [data-rv],.js .hero-in>*{opacity:1!important;transform:none!important;
    clip-path:none!important;transition:none!important}
  .js .hero-bg img{transform:none!important;transition:none!important}
  .mq-track{animation:none!important}
  .marquee{overflow-x:auto}
  .car{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
  .btn:hover,.cat:hover,.p-card:hover,.sec-card:hover,.tile:hover,.car-item:hover,
  .mq-item:hover,.stat:hover,.tick li:hover,.timeline li:hover{transform:none!important}
}

@media(max-width:620px){
  .mq-item{flex:0 0 210px}
  .car-btn{display:none}
  .car-item{flex:0 0 76vw}
}

/* two drifting strips stacked, sitting between sections */
.mq-block{display:flex;flex-direction:column;gap:12px;padding:6px 0 10px}

/* ---------- PULL QUOTE (homepage history lead) ---------- */
.pullquote{max-width:900px;margin:0 auto;text-align:center;padding:8px 0 4px;position:relative}
.pullquote:before{content:"";display:block;width:56px;height:3px;background:var(--brass);
  margin:0 auto 30px}
.pullquote p{font-size:clamp(27px,3.4vw,45px);line-height:1.25;font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
.pullquote p.zh{font-size:clamp(20px,2.2vw,29px);font-weight:600;color:var(--ink-2);
  margin-top:12px;line-height:1.5}
.pullquote cite{display:block;font-style:normal;margin-top:22px;font-size:17.5px;
  color:var(--mute);letter-spacing:.01em}
@media(max-width:620px){
  .pullquote:before{margin-bottom:22px}
}

/* Sticky nav is ~62px tall; keep anchored sections clear of it when jumped to */
section[id],[id]:target{scroll-margin-top:96px}

/* ---------- SUPPLIER LOGO PLATES ---------- */
.plogo{display:flex;align-items:center;justify-content:center;height:82px;border-radius:3px;
  margin:-4px 0 18px;padding:12px 16px;border:1px solid var(--line);overflow:hidden}
.plogo.lt{background:#ffffff}
.plogo.dk{background:#0f1114}
.plogo img{max-height:52px;width:auto;height:auto;object-fit:contain;
  transition:transform .35s var(--ease)}
.p-card:hover .plogo img{transform:scale(1.04)}

/* ---------- QUOTE PROCESS STEPS ---------- */
.steps{list-style:none;counter-reset:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.steps li{background:var(--bg-3);border:1px solid var(--line);border-top:3px solid var(--brass);
  border-radius:4px;padding:24px 22px 22px;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.steps li:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(var(--shadow-rgb),.12)}
.steps li>b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--brass);color:var(--on-brass);font-size:17px;font-weight:700;
  margin-bottom:14px}
.steps li h3{font-size:19px;margin-bottom:2px;line-height:1.3}
.steps li .szh{font-size:15.5px;color:var(--ink-2);font-weight:600;margin-bottom:12px}
.steps li p{font-size:16px;color:var(--mute);margin-bottom:8px}
.steps li p.zh{font-size:15.5px}
.alt .steps li{background:var(--bg-3)}

/* ---------- FORM EXTRAS ---------- */
.fsec{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  font-weight:700;margin:26px 0 16px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.fsec:first-of-type{margin-top:0}
.filerow,.filecol{display:grid;gap:8px}
.filerow input[type=file],.filecol input[type=file]{width:100%;background:var(--bg);color:var(--ink-2);
  border:1.5px dashed var(--line);border-radius:3px;padding:10px 12px;font-size:15.5px;
  font-family:inherit;cursor:pointer;transition:border-color .25s var(--ease),
  background .25s var(--ease),color .25s var(--ease)}
.filerow input[type=file]:hover,.filecol input[type=file]:hover{border-color:var(--brass);color:var(--ink)}
.filerow input[type=file]:focus,.filecol input[type=file]:focus{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(var(--brass-rgb),.16)}
.filerow input[type=file]::file-selector-button,
.filecol input[type=file]::file-selector-button{background:var(--bg-3);color:var(--ink);
  border:1px solid var(--line);border-radius:3px;padding:6px 12px;margin-right:12px;
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.filerow input[type=file]::file-selector-button:hover,
.filecol input[type=file]::file-selector-button:hover{background:var(--brass);color:var(--on-brass);
  border-color:var(--brass)}
.field[hidden]{display:none}
.formstatus{margin-top:16px;font-size:16px;color:var(--ink-2);min-height:1.4em}
.formstatus.err{color:#9d3434}
.formstatus.ok{color:var(--brass);font-weight:600}
#quotesubmit[disabled]{opacity:.55;cursor:default;transform:none}
.fieldlabel{display:block;font-size:14.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.filelab{display:block}
.filelab[hidden]{display:none}
.filelab>span{display:block;font-size:13.5px;color:var(--mute);margin-bottom:4px;
  letter-spacing:.04em}

/* ---------- quote form: repeatable rows ---------- */
.winrow{padding:14px 0 0;border-top:1px solid var(--line);margin-top:14px}
.winrow:first-child{border-top:none;margin-top:0;padding-top:0}
.winrow[hidden]{display:none}
.winno{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  font-weight:700;margin-bottom:10px}
[data-job][hidden]{display:none}

/* the "add another" control sits bottom-right of its block, the way most forms put it */
.addrow{display:flex;justify-content:flex-end;margin-top:2px}
.addrow[hidden],.btn-add[hidden]{display:none}
.btn-add{background:none;border:1.5px solid var(--line);color:var(--ink-2);
  font-family:inherit;font-size:14.5px;font-weight:600;padding:9px 15px;border-radius:3px;
  cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease),
  background .25s var(--ease);min-height:24px}
.btn-add:hover{border-color:var(--brass);color:var(--brass);background:var(--bg-3)}
.btn-add:focus-visible{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(var(--brass-rgb),.16)}

/* ---------- quote form: address suggestions ---------- */
.ac{position:relative}
.aclist{list-style:none;position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;
  background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--brass);
  border-radius:0 0 4px 4px;box-shadow:0 18px 40px rgba(var(--shadow-rgb),.16);
  max-height:270px;overflow-y:auto}
.aclist[hidden]{display:none}
.acitem{padding:10px 14px;font-size:15.5px;color:var(--ink-2);cursor:pointer;
  border-bottom:1px solid var(--line)}
.acitem:last-child{border-bottom:none}
.acitem:hover,.acitem[aria-selected="true"]{background:var(--bg-3);color:var(--brass)}

/* the quote page opens on the form now, so it needs a plain header rather than a banner */
.quotetop{padding-bottom:0}
.quotetop h1{font-size:clamp(33.5px,4.2vw,54px)}

/* Projects dropdown is five short items, so it needs less width and no group labels */
.navsub{min-width:246px}
.grouphead[id]{scroll-margin-top:104px}
/* Wordmark plate for a supplier whose logo file we don't have yet. Swap in a real
   image by adding the file to PARTNERS and it takes over automatically. */
.plogo.wordmark>span{font-size:22.5px;font-weight:700;letter-spacing:.04em;
  text-align:center;line-height:1.2}
/* brass on the white plate is only 2.42:1 — too weak even for large text, so the light
   plate uses near-black. The dark plate keeps brass-2 at 10.06:1. */
.plogo.lt.wordmark>span{color:var(--on-brass)}
.plogo.dk.wordmark>span{color:var(--brass-2)}
/* rule above the last dropdown item, which is a page rather than a photo group */
.sub li.divider{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}

/* ---------- accreditation badge (Gentek Premium Renovator) ---------- */
.credential{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px;
  align-items:center}
.credential-badge{background:#fff;border-radius:4px;padding:14px;
  border:1px solid var(--line)}
.credential-badge img{width:100%;height:auto}
@media(max-width:700px){
  .credential{grid-template-columns:minmax(0,1fr);gap:22px;justify-items:start}
  .credential-badge{max-width:170px}
}