/* Luton Cleaning
   World: "specular" — reflective surfaces, hard highlights on dark metal.
   Archetype: sidebar-fixed. Ground #1A1412. Marcellus + Karla.
   Gate 1 passed 13 Sep 2026: archetype, world, ground and both fonts all new.
   NOT dark-luxe: no high-contrast serif body, no letterspaced eyebrow on every
   block, no thin inset frames, no botanical ornament. The photographs carry it. */

:root{
  --ground:#1A1412;
  --ground-2:#221A16;
  --ink:#0E0A09;
  --gold:#E8BA6D;
  --gold-mid:#B68542;
  --bronze:#7F5625;
  --rose:#E9AD9C;
  --stone:#CAB8AE;
  --white:#FFFFFF;
  --display:"Marcellus",Georgia,serif;
  --display-2:"Prata",Georgia,serif;
  --body:"Karla",-apple-system,"Segoe UI",Roboto,sans-serif;
  --bar:300px;
  --gold-line:linear-gradient(90deg,var(--bronze),var(--gold),var(--rose),var(--gold-mid));
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--stone);
  font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* height:auto here, once, as a safety net. Markup carries width/height attributes
   for layout stability, and without this the browser uses the height literally the
   moment CSS sets a width. It did exactly that to the logo, the gallery and the
   portrait in this build. The two rules that really want height:100% are more
   specific and come later, so they are unaffected. */
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
[hidden]{display:none !important}

/* Measured off reganit.uk/restaurant-demo, which Adam named as the register he
   wants: big letterspaced caps for the h1, generous sizes, small letterspaced
   caps for card titles. Marcellus is a roman-capitals face so it carries the
   uppercase treatment without needing a light weight. */
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--white);margin:0}
h1{font-size:clamp(2.5rem,6.4vw,5.6rem);line-height:1.02;
   letter-spacing:.085em;text-transform:uppercase}
/* Marcellus is a roman-capitals face. Its lowercase goes thin and wide at display
   size, which is why the sentence-case headings read as the wrong typeface next to
   the caps. Prata carries the lowercase; Marcellus keeps the uppercase work. */
h2{font-family:var(--display-2);font-size:clamp(1.95rem,3.5vw,3.1rem);
   line-height:1.14;letter-spacing:0;text-wrap:balance}
h3{font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.3;
   letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
p{margin:0 0 1em}

.gold{color:var(--gold)}
.rule{height:2px;background:var(--gold-line);border:0;margin:0}

/* ---------- the preview bar ---------- */
.pv{background:var(--gold);color:var(--ink);font-size:.8rem;font-weight:700;
  padding:9px 18px;text-align:center;position:relative;z-index:60}
.pv b{font-weight:800}

/* ---------- fixed sidebar, the archetype ---------- */
.bar{position:fixed;left:0;top:0;bottom:0;width:var(--bar);background:var(--ink);
  border-right:1px solid rgba(232,186,109,.26);padding:26px 24px 22px;
  display:flex;flex-direction:column;gap:22px;z-index:50;overflow-y:auto}
/* The logo is the link home, so the anchor carries the sizing and the layout
   placement. The image just fills it. */
.bar__home{display:block;width:172px;margin:0 auto 2px;transition:opacity .2s}
.bar__home:hover{opacity:.82}
.bar__home:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.bar__logo{display:block;width:100%;height:auto;margin:0}
.bar__nav{display:grid;gap:2px;margin-top:4px}
.bar__nav a{font-family:var(--display);font-size:1.02rem;color:var(--stone);
  text-decoration:none;padding:9px 12px;border-left:2px solid transparent;transition:.18s}
.bar__nav a:hover,.bar__nav a:focus-visible{color:var(--white);
  border-left-color:var(--gold);background:rgba(232,186,109,.07);padding-left:18px}
.bar__spacer{flex:1}
.bar__call{display:block;margin-bottom:16px;font-family:var(--display);font-size:1.36rem;color:var(--gold);
  text-decoration:none;letter-spacing:.02em}
.bar__call:hover{color:var(--white)}
.bar__wa{display:inline-block;margin-top:14px;background:var(--gold);color:var(--ink);
  text-decoration:none;font-weight:700;font-size:.9rem;padding:11px 18px;
  transition:transform .16s,background .16s}
.bar__wa:hover{background:var(--rose);transform:translateY(-2px)}
.bar__mail{font-size:.78rem;word-break:break-all;color:rgba(202,184,174,.8);
  text-decoration:none;display:block;margin-top:14px}
.bar__mail:hover{color:var(--gold)}

.wrap{margin-left:var(--bar)}

/* ---------- the client's own credential strip, vectorised ------------------
   These six marks are traced from their banner artwork, not stand-in icons, and
   they sit under the hero exactly as they do on the banner. The service section
   keeps its photographs.

   It starts fully transparent, so the top of the strip IS the hero's closing
   tone, deepens to ink through the middle and dissolves back out at the bottom.

   The strip travels left to right, against the reviews marquee below it, which
   drifts the other way. It does not pause on hover: it is a rhythm, not a thing
   to be read, and stopping it every time the pointer crosses it made the whole
   band twitch. */
.creds{position:relative;border:0;
  background:linear-gradient(180deg,
    rgba(26,20,18,0)   0%,
    rgba(14,10,9,.5)  15%,
    var(--ink)        40%,
    var(--ink)        62%,
    rgba(14,10,9,.55) 86%,
    rgba(26,20,18,0) 100%)}
/* a soft bloom bridging the seam with the hero. It deliberately overhangs the
   top of the section, so the clipping lives on .creds__win and never here. */
.creds::before{content:"";position:absolute;left:6%;right:6%;top:-54px;height:130px;
  pointer-events:none;filter:blur(26px);z-index:1;
  background:radial-gradient(62% 100% at 50% 100%,rgba(232,186,109,.11),transparent 72%)}
.creds__win{position:relative;z-index:2;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.creds__track{display:flex;width:max-content;will-change:transform}

.creds__i{position:relative;flex:0 0 auto;width:clamp(168px,14vw,224px);
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:clamp(34px,3.8vw,54px) 10px;text-decoration:none;text-align:center;
  transition:background .35s ease}
/* every item keeps its divider now, including the first: the track is a loop,
   so the join between the last copy and the next has to look like the others */
.creds__i::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(232,186,109,.3) 26%,
    rgba(232,186,109,.3) 74%,transparent)}
.creds__i img{height:clamp(38px,3.4vw,52px);width:auto;
  filter:drop-shadow(0 0 16px rgba(232,186,109,.16));
  transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .5s ease}
.creds__i span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);line-height:1.7}
.creds__i:hover{background:rgba(232,186,109,.05)}
.creds__i:hover img{transform:translateY(-4px) scale(1.06);
  filter:drop-shadow(0 0 22px rgba(232,186,109,.42))}
.creds__i:hover span{color:var(--white)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid rgba(232,186,109,.2)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform}
.hero::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(102deg,rgba(14,10,9,.72) 0%,rgba(14,10,9,.34) 46%,rgba(14,10,9,.10) 78%),
    linear-gradient(180deg,rgba(14,10,9,.58) 0%,rgba(14,10,9,.26) 38%,rgba(26,20,18,.92) 88%,rgb(26,20,18) 100%)}
.hero__in{position:relative;z-index:2;padding:0 clamp(24px,4vw,66px) clamp(40px,5vw,72px);max-width:1100px}
.hero__eyebrow{font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--gold)}

/* ---------- the traced wordmark, written on at load -------------------------
   Both halves are traced from the client's own banner artwork and share one
   coordinate space, so stacking them registers exactly. The reveal is a wipe
   from the left, white first and gold a beat behind, which reads as the line
   being written rather than faded in.
   animation-fill-mode is "both", never a hidden state in the rule itself: if
   animation never runs, the mark is simply visible. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mark{margin:0}
.mark__stack{position:relative;display:block;width:clamp(280px,84vw,900px);max-width:100%}
.mark__stack svg{display:block;width:100%;height:auto;overflow:visible}
.mark__b{position:absolute;left:0;top:0}
@keyframes markWrite{
  0%  {clip-path:inset(-14% 100% -14% 0)}
  100%{clip-path:inset(-14% -3% -14% 0)}}
@keyframes markGlow{
  0%  {filter:drop-shadow(0 0 0 rgba(232,186,109,0))}
  40% {filter:drop-shadow(0 0 26px rgba(232,186,109,.55))}
  100%{filter:drop-shadow(0 0 12px rgba(232,186,109,.16))}}
.mark__a{animation:markWrite 1.15s cubic-bezier(.24,.72,.24,1) .45s both}
.mark__b{animation:markWrite 1.05s cubic-bezier(.24,.72,.24,1) 1.3s both}
.mark__stack{animation:markGlow 1.6s ease-out 1.5s both}
@media (prefers-reduced-motion:reduce){
  .mark__a,.mark__b,.mark__stack{animation:none}}
.hero__lead{max-width:52ch;font-size:clamp(1rem,1.5vw,1.22rem);color:var(--stone);margin:20px 0 0}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.95rem;
  padding:15px 28px;transition:transform .16s,box-shadow .16s,background .16s}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--rose);transform:translateY(-3px);box-shadow:0 10px 26px rgba(232,186,109,.22)}
.btn--ghost{border:1px solid rgba(232,186,109,.5);color:var(--gold)}
.btn--ghost:hover{border-color:var(--gold);background:rgba(232,186,109,.09);transform:translateY(-3px)}

/* ---------- generic band ---------- */
.band{padding:clamp(76px,9vw,132px) clamp(24px,4.4vw,72px)}
.band--alt{background:var(--ground-2)}
.band__head{max-width:64ch;margin-bottom:46px}
.band__head p{margin-top:16px}
.eyebrow{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-mid);display:block;margin-bottom:14px}

/* ---------- services, photographic tiles not icons ---------- */
/* Two per row, centred, and the odd one out runs full width. Adam rejected the
   uneven version for the same reason he rejected it on the reganit.uk work grid:
   an offset card sitting alone with a hole beside it reads as a mistake, not as
   rhythm. The variety now comes from the images, not from ragged geometry. */
/* The heading used to sit on the band padding while the card grid was centred in
   1180px, so the two never shared a left edge and the mismatch widened with the
   viewport. Head and grid are one container now, centred together, closed with the
   fading gold hairline and lit centre point the client uses on their business card. */
.svc__head{max-width:1180px;margin:0 auto clamp(38px,4.4vw,62px);text-align:center}
.svc__head h2{margin:0 auto;max-width:22ch}
.svc__head p{margin:20px auto 0;max-width:58ch;color:var(--stone)}
.flourish{display:block;position:relative;width:min(340px,68%);height:1px;
  margin:clamp(26px,3vw,38px) auto 0;
  background:linear-gradient(90deg,transparent,rgba(232,186,109,.55) 50%,transparent)}
.flourish::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--gold);
  box-shadow:0 0 14px rgba(232,186,109,.85)}

.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  max-width:1180px;margin:0 auto}
.svc__card{grid-column:span 1;min-height:360px;transform:none}
.svc__card--wide,.svc__card--tall{grid-column:span 1;min-height:360px}
/* a lone final card fills the row rather than leaving a gap */
.svc__card:last-child:nth-child(odd){grid-column:1 / -1;min-height:420px}
@media (max-width:720px){
  .svc{grid-template-columns:1fr}
  .svc__card:last-child:nth-child(odd){grid-column:auto;min-height:360px}
}
.svc__card{position:relative;overflow:hidden;min-height:330px;display:flex;
  align-items:flex-end;text-decoration:none;border:1px solid rgba(232,186,109,.18)}
.svc__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);filter:saturate(.92)}
.svc__card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,10,9,.12),rgba(14,10,9,.9))}
.svc__card:hover img,.svc__card:focus-visible img{transform:scale(1.07)}
.svc__body{position:relative;z-index:2;padding:28px 28px 30px}
.svc__body p{margin:11px 0 0;font-size:.95rem;color:var(--stone);max-width:34ch}
.svc__card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold-line);transform:scaleX(0);transform-origin:left;
  transition:transform .5s ease;z-index:3}
.svc__card:hover::before,.svc__card:focus-visible::before{transform:scaleX(1)}

/* ---------- full-bleed atmosphere. The reference carries a picture ratio of
   1.209 against this build's 0.658, and this is most of that difference. ------ */
.atmos{position:relative;height:clamp(320px,46vw,560px);overflow:hidden;
  border-top:1px solid rgba(232,186,109,.2);border-bottom:1px solid rgba(232,186,109,.2)}
.atmos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.atmos::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(26,20,18,.93) 0%,rgba(26,20,18,.42) 52%,rgba(26,20,18,.72) 100%)}
.atmos__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 clamp(24px,4.4vw,72px);max-width:44ch}
.atmos__in p{margin:16px 0 0;color:var(--stone)}
/* A hard-edged strip of marble reads as a static band. Masking the top and bottom
   lets it emerge from the ground and sink back into it. The border has to go with
   it, since a hairline across a faded edge is exactly what gives the trick away. */
.atmos--thin{height:clamp(210px,26vw,340px);border-top:0;border-bottom:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%)}
.atmos--thin::after{background:linear-gradient(180deg,rgba(26,20,18,.42),rgba(26,20,18,.62))}

/* ---------- results gallery ---------- */
/* These are evidence photographs, so they get equal billing: one ratio, one size,
   one baseline. The first tile used to run a row taller, which left a hole under
   the other three and made the left picture look bigger than the rest. */
.results__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(22px,4vw,72px);align-items:end;margin-bottom:clamp(36px,4.2vw,62px)}
.results__head h2{margin:0;max-width:16ch}
.results__head p{margin:0 0 8px;color:var(--stone);max-width:48ch}
@media (max-width:900px){.results__head{grid-template-columns:1fr;align-items:start}
  .results__head h2{max-width:none}.results__head p{margin-top:18px}}

.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7vw,26px)}
.shot{margin:0;min-width:0}
/* width:100% is required. With only an aspect-ratio set, a grid item whose row
   height is definite resolves its WIDTH from that height rather than stretching
   to the column, which rendered these 163px wide inside a 243px column. */
.shot__img{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:4/5;
  background:var(--ink);border:1px solid rgba(232,186,109,.18)}
.shot__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.shot:hover .shot__img img{transform:scale(1.06)}
/* The caption sat over the picture in gold and was unreadable on brushed steel. */
.shot figcaption{margin-top:14px;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);line-height:1.4}
@media (max-width:900px){.shots{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.shots{grid-template-columns:1fr}
  .shot__img{aspect-ratio:3/2}}

/* ---------- the marquee of real reviews ---------- */
.quotes{transform:rotate(-1.15deg) scale(1.035);
  border-top:1px solid rgba(232,186,109,.22);border-bottom:1px solid rgba(232,186,109,.22);
  overflow:hidden;background:var(--ink);padding:30px 0}
.quotes__in{display:flex;gap:0;width:max-content;will-change:transform}
.quote{flex:0 0 auto;width:min(460px,78vw);padding:0 34px;
  border-right:1px solid rgba(232,186,109,.16)}
.quote p{font-family:var(--display);font-size:1.14rem;color:var(--white);line-height:1.4;margin:0}
.quote span{display:block;margin-top:12px;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-mid)}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:40px;align-items:center}
@media (max-width:820px){.team{grid-template-columns:1fr}}
/* height:auto is load-bearing. The markup carries height="1000", and without this
   the browser uses it literally and the portrait renders 340 wide by 1000 tall. */
.team img{width:100%;height:auto;aspect-ratio:9/10;object-fit:cover;
  border:1px solid rgba(232,186,109,.3);margin-top:-72px;margin-bottom:-72px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);position:relative;z-index:2}
@media (max-width:820px){.team img{margin:0}}
/* .band__head p carries the heading-to-body gap, and this block is not a
   .band__head, so the h2 and the paragraph were sitting flush against each other. */
.team__body p{margin:20px 0 0;color:var(--stone);max-width:54ch}
.stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:34px}
.stat b{display:block;font-family:var(--display);font-size:2.6rem;color:var(--gold);line-height:1}
.stat span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}

/* ---------- areas ---------- */
/* The sidebar already takes 300px, so two columns only work on a wide screen.
   Below that the map goes under the text rather than crushing it to 290px. */
.areas__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);
  gap:clamp(32px,4.4vw,72px);align-items:center}
.areas__text p{color:var(--stone);max-width:46ch;margin:18px 0 30px}
.areas__map{position:relative;width:100%;margin-inline:auto}
.map{display:block;width:100%;height:auto;overflow:visible}
.map__rose text{font-size:12px}
/* Sized in viewBox units, so the rendered size is this times (width / 560).
   At the 540 the column gives it, 16 lands at 15 real pixels. */
.map__t{font-family:var(--body);font-size:16px;fill:#CAB8AE;
  dominant-baseline:middle;letter-spacing:.02em}
.map__t--lead{font-size:20px;fill:#FFFFFF;letter-spacing:.06em}
.map__scale line{stroke:#E8BA6D;stroke-opacity:.5;stroke-width:1.5}
.map__k{font-family:var(--body);font-size:12px;fill:#E8BA6D;fill-opacity:.7;
  letter-spacing:.2em}
.areas__note{margin:16px 0 0;font-size:.78rem;color:rgba(202,184,174,.72);line-height:1.5}
/* The sidebar eats 300px before this section gets any width at all, so two
   columns need about 1450px before the text column stops being squeezed. At 1280
   it was 386px wide, which broke the heading over four lines. Stacked, the whole
   block centres on the map beneath it rather than hanging off to the left. */
@media (max-width:1450px){
  .areas__grid{grid-template-columns:1fr}
  .areas__text{text-align:center}
  .areas__text p{margin-inline:auto}
  .areas{justify-content:center}
  .areas__map{max-width:540px;margin-top:24px}
  .areas__note{text-align:center;max-width:42ch;margin-inline:auto}
}
@media (max-width:760px){
  /* the svg shrinks with the column, so the labels scale up inside the viewBox
     or they land at nine real pixels on a phone */
  .map__t{font-size:24px}
  .map__t--lead{font-size:29px}
  .map__k{font-size:17px}
  .map__rose text{font-size:19px}
}
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.areas li{list-style:none;border:1px solid rgba(232,186,109,.34);padding:10px 18px;
  font-size:.9rem;color:var(--stone);transition:.18s}
.areas li:hover{border-color:var(--gold);color:var(--white);background:rgba(232,186,109,.08)}

/* ---------- closing CTA ---------- */
.end{text-align:center;padding:clamp(60px,8vw,120px) 24px;
  background:radial-gradient(ellipse at 50% 0%,rgba(232,186,109,.14),transparent 62%),var(--ink)}
.end h2{margin-bottom:18px}
.end .hero__cta{justify-content:center}

.foot{background:var(--ink);padding:34px clamp(24px,4vw,66px);
  border-top:1px solid rgba(232,186,109,.2);font-size:.82rem;color:rgba(202,184,174,.72)}
.foot a{color:var(--gold-mid);text-decoration:none}
.foot a:hover{color:var(--gold)}
.credits{margin:16px 0 0;font-size:.72rem;color:rgba(202,184,174,.5);line-height:1.7}
.credits a{color:rgba(202,184,174,.66)}

/* ---------- reveal, hidden by DEFAULT only when JS is present ---------- */
.js .reveal{opacity:0;transform:translateY(26px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}

/* ---------- mobile: the bar becomes a top strip plus a sticky call bar ---------- */
/* The sidebar becomes a header below 900px. It used to be a wrapping flex row,
   which left the logo stranded small on the left, the number and the button in a
   cramped column beside it, and the six links breaking over two ragged rows.
   It is a two-row grid now: identity and contact on one line, the links on their
   own line as a single strip that scrolls, with a fade to say there is more. */
@media (max-width:900px){
  .bar{position:static;width:auto;display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:"logo contact" "nav nav";
    align-items:center;column-gap:16px;row-gap:0;
    padding:12px 18px 0;border-right:0;
    border-bottom:1px solid rgba(232,186,109,.26);overflow:visible}
  .bar__home{grid-area:logo;width:96px;margin:0}
  .bar__contact{grid-area:contact;display:flex;align-items:center;justify-content:flex-end;
    gap:14px;flex-wrap:wrap}
  .bar__spacer{display:none}
  .bar__call{margin:0;font-size:1.14rem}
  .bar__wa{margin:0;padding:10px 15px;font-size:.84rem;white-space:nowrap}
  .bar__mail{display:none}

  .bar__nav{grid-area:nav;display:flex;flex-wrap:nowrap;gap:0;margin:10px -18px 0;
    padding:0 18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%)}
  .bar__nav::-webkit-scrollbar{display:none}
  .bar__nav a{flex:0 0 auto;padding:12px 14px;font-size:.94rem;white-space:nowrap;
    border-left:0;border-bottom:2px solid transparent}
  .bar__nav a:first-child{padding-left:0}
  .bar__nav a:hover,.bar__nav a:focus-visible{padding-left:14px;background:none;
    border-bottom-color:var(--gold)}
  .bar__nav a:first-child:hover,.bar__nav a:first-child:focus-visible{padding-left:0}

  .wrap{margin-left:0}
  .hero{min-height:76vh}
}
@media (max-width:430px){
  .bar{grid-template-areas:"logo contact" "nav nav";column-gap:10px}
  .bar__home{width:78px}
  .bar__call{font-size:1rem;flex:1 1 100%;text-align:right}
  .bar__contact{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- inner page heads ---------------------------------------------- */
.phead{padding:clamp(64px,7vw,110px) clamp(24px,4.4vw,72px) clamp(30px,3.4vw,50px);
  max-width:1180px;margin:0 auto}
.phead__eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px}
.phead__h1{font-family:var(--display-2);font-weight:400;color:var(--white);margin:0;
  font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.1;letter-spacing:0;
  text-transform:none;text-wrap:balance}
.phead__lead{max-width:58ch;margin:22px 0 0;color:var(--stone);
  font-size:clamp(1rem,1.4vw,1.14rem)}

/* ---------- forms ---------------------------------------------------------- */
/* The honeypot must be reachable by a bot filling everything in and invisible
   to a person. display:none is skipped by some bots, so it is moved off screen
   instead, and no visible field may ever be named company_url. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form{max-width:900px;margin:0 auto}
.form__set{border:0;border-top:1px solid rgba(232,186,109,.2);margin:0 0 clamp(26px,3vw,40px);
  padding:clamp(24px,2.6vw,34px) 0 0}
.form__set legend{padding:0 14px 0 0;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold)}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.field{display:block;margin:18px 0 0}
.form__row .field{margin:18px 0 0}
.field > span{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stone);margin:0 0 9px}
.field > span b{color:var(--gold);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;box-sizing:border-box;background:rgba(14,10,9,.72);color:var(--white);
  border:1px solid rgba(232,186,109,.26);padding:13px 15px;font:inherit;font-size:1rem;
  border-radius:0;transition:border-color .2s,background .2s}
.field textarea{resize:vertical;min-height:120px;line-height:1.55}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(232,186,109,.5)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--gold);background:rgba(14,10,9,.95)}
.field input::placeholder,.field textarea::placeholder{color:rgba(202,184,174,.45)}

.field--file input[type=file]{padding:12px;cursor:pointer;font-size:.92rem}
.field--file input[type=file]::file-selector-button{
  background:rgba(232,186,109,.12);color:var(--gold);border:1px solid rgba(232,186,109,.4);
  padding:9px 16px;margin-right:14px;font:inherit;font-size:.86rem;cursor:pointer;
  transition:background .2s}
.field--file input[type=file]::file-selector-button:hover{background:rgba(232,186,109,.22)}
.field--file small{display:block;margin-top:10px;font-size:.78rem;color:rgba(202,184,174,.72)}

.ticks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;
  margin:18px 0 8px}
.tick{display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1px solid rgba(232,186,109,.26);padding:13px 16px;transition:.2s}
.tick:hover{border-color:var(--gold);background:rgba(232,186,109,.06)}
.tick input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:15px;height:15px;
  border:1px solid rgba(232,186,109,.55);background:transparent;cursor:pointer;position:relative}
.tick input:checked{background:var(--gold);border-color:var(--gold)}
.tick input:checked::after{content:"";position:absolute;left:4px;top:0;width:4px;height:9px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tick input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tick span{font-size:.92rem;color:var(--stone)}
.tick:has(input:checked) span{color:var(--white)}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:8px}
.form__note{margin:0;font-size:.78rem;color:rgba(202,184,174,.7);max-width:44ch;line-height:1.5}
.form__msg{margin:26px 0 0;padding:18px 20px;font-size:.95rem;line-height:1.5;
  border-left:3px solid var(--gold);background:rgba(232,186,109,.08);color:var(--white)}
.form__msg[data-bad]{border-left-color:#E9AD9C;background:rgba(233,173,156,.09)}
.form button[disabled]{opacity:.55;cursor:progress}

/* ---------- why work here -------------------------------------------------- */
.perks{list-style:none;margin:0;padding:0;max-width:1180px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.perks li{border:1px solid rgba(232,186,109,.2);padding:30px 28px;background:rgba(14,10,9,.4)}
.perks h3{margin:0 0 12px}
.perks p{margin:0;font-size:.95rem;color:var(--stone)}

/* ---------- hiring teaser on the home page --------------------------------- */
.hiring{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,60px);align-items:center;
  border:1px solid rgba(232,186,109,.24);padding:clamp(30px,3.6vw,48px)}
.hiring h2{margin:0 0 14px}
.hiring p{margin:0;color:var(--stone);max-width:52ch}
@media (max-width:720px){.hiring{grid-template-columns:1fr;text-align:center}
  .hiring p{margin-inline:auto}}


/* ---- demo build additions -------------------------------------------------
   The headline was a traced SVG of the previous owner's handwritten wordmark.
   It is real type now. The demo bar has to clear the 300px fixed sidebar or
   its first words sit underneath it. */
.mark{margin:0;font-family:var(--display-2),Georgia,serif;line-height:1.04;
  font-size:clamp(2.4rem,6.2vw,4.6rem);letter-spacing:-.01em}
.mark__l{display:block}
.mark__l--gold{color:var(--gold)}


/* ---- horizontal overflow -------------------------------------------------
   Proved by dragging the page and reading scrollX back, not by scrollWidth,
   which inflates for content inside a box that clips it. Measured before the
   fix: 22px of drag at 1440 from section.quotes (its inner marquee track is
   width:max-content) and 94px at 768 from svg.map.

   overflow-x on html ALONE does nothing: the root's overflow propagates to
   the viewport instead of clipping the root box. Clipping html stops that
   propagation and then body's clip actually holds, so both are needed.
   clip rather than hidden, because hidden makes the element a scroll
   container and silently breaks position:sticky inside it. */
html{overflow-x:clip}
body{overflow-x:clip}
.quotes{overflow-x:clip}
.map{max-width:100%;height:auto}