.home-main{padding-top:var(--hh)}.home-hero{position:relative;min-height:calc(100svh - var(--hh));padding-block:42px 28px;isolation:isolate}
.home-hero::before{content:'';position:absolute;inset:15% 0 0;background:radial-gradient(ellipse at 72% 58%,#abc9b00a,transparent 55%);z-index:-1}
.hero-word{position:relative;z-index:42;font-family:var(--font-brand);font-size:clamp(42px,10.85vw,164px);font-weight:500;line-height:1.08;letter-spacing:.05em;white-space:nowrap;transform-origin:0 0;color:var(--text-hi);pointer-events:none;width:max-content;max-width:100%;will-change:transform;display:flex;gap:.16em}.hero-word img{width:auto;height:.72em;object-fit:contain;filter:drop-shadow(0 8px 24px #0008)}
.hero-kicker{display:flex;justify-content:space-between;gap:22px;margin-bottom:24px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-kicker span:last-child{font-family:var(--font-mono);letter-spacing:.03em}.hero-body{position:relative;display:grid;grid-template-columns:36% 64%;align-items:center;min-height:490px;margin-top:0}
.hero-copy{position:relative;z-index:2;padding-block:40px}.hero-copy h1{font-size:clamp(36px,4.2vw,60px);font-weight:400;line-height:1.08;letter-spacing:-.045em;margin:0 0 22px}
.hero-copy h1 span{display:block}.hero-copy h1 span:last-child{color:var(--sage)}.hero-copy>p{font-size:15px;line-height:1.8;color:var(--muted);max-width:305px}
.hero-actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:30px}.hero-actions .rv-btn{font-size:13px;padding:14px 18px}
/* gap is 0 here on purpose: the dimension mark carries its own margin-left, and the two
   stacked gave a 23px hole between a link's last word and its mark. */
.text-link{display:inline-flex;align-items:center;gap:0;font-size:13px;color:var(--text);min-height:44px}.text-link svg{width:var(--ico-md,18px);height:var(--ico-md,18px)}.text-link:hover{color:var(--sage)}
.hero-sculpture{position:absolute;inset:-24px -5% -18px 27%;display:flex;align-items:center;pointer-events:none;z-index:0}
.hero-sculpture img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 95%,transparent)}
.hero-spec{position:absolute;right:0;bottom:14px;font-size:10px;color:var(--muted);letter-spacing:.04em;text-align:right}.hero-spec span{display:block;color:var(--faint);margin-top:5px}
.hero-bottom{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--border-2);padding-top:22px;margin-top:14px;align-items:center;color:var(--muted);font-size:11px;letter-spacing:.04em}
.hero-bottom a{display:flex;gap:14px;align-items:center}.hero-bottom svg{width:var(--ico-sm,16px);height:var(--ico-sm,16px)}.hero-bottom .line{width:56px;height:1px;background:var(--sage)}
.home-section{padding-block:var(--space-section)}.home-section-head{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:end;margin-bottom:44px}
.eyebrow{display:block;font-size:11px;color:var(--sage);letter-spacing:.11em;margin-bottom:22px;text-transform:uppercase}.home-section h2,.scene-copy h2{font-size:clamp(34px,4.4vw,62px);font-weight:400;letter-spacing:-.045em;line-height:1.12;max-width:680px}
.home-section-head>div:last-child{display:flex;flex-direction:column;gap:20px;align-items:flex-start;max-width:450px;justify-self:end}.home-section-head p{color:var(--muted);font-size:16px;line-height:1.8}
.home-services{background:var(--surface-1);border-block:1px solid var(--border-2)}.service-index{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.service-line{display:grid;grid-template-columns:1fr 22px;gap:18px;align-items:center;border-top:1px solid var(--border-3);padding-block:24px;transition:color var(--t-ctl);min-height:106px;position:relative;overflow:hidden}
.service-line.has-media{grid-template-columns:minmax(118px,34%) 1fr 22px;gap:20px}.service-media{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:7px;background:var(--surface-2)}.service-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04);transition:transform .65s var(--ease),filter .35s}.service-line:hover .service-media img{transform:scale(1.035);filter:saturate(.92) contrast(1.02)}
/* ONE COLUMN. This grid used to be `36px 1fr` so a decorative `01..08` could sit beside the
   service name; the number went with the 2026-09-22 addendum - a catalogue is not a sequence,
   the value changed whenever the owner reordered, and nothing anywhere referred to it. With the
   column gone the title takes the full width of the copy area, which also retires the narrow-
   width surgery that was needed to stop Armenian compounds breaking in the 142px that was left
   over. Removing the decoration fixed the typography better than working around it did. */
.service-copy{display:grid;grid-template-columns:1fr;gap:5px;align-items:start;min-width:0}.service-line h3{font-size:clamp(18px,2vw,26px);font-family:var(--font-body);font-weight:400;letter-spacing:-.02em;line-height:1.25}.service-summary{font-size:12.5px;line-height:1.55;color:var(--muted);max-width:34ch}.service-line>.link-mark{justify-self:end}.service-line:hover{color:var(--sage)}
/* The homepage's own copy of the old arrow lived here and, loading after shell.css, quietly
   overrode the shared dimension mark on the one page that matters most - so the site had the new
   mark everywhere EXCEPT the homepage. One definition now, in shell.css. */
.scene-chapter{height:170svh;position:relative;background:var(--bg)}.scene-sticky{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));overflow:hidden;isolation:isolate;border-bottom:1px solid var(--border-2)}
.scene-copy{position:absolute;top:12%;left:clamp(22px,4.5vw,64px);z-index:2;width:36%;max-width:480px}.scene-copy h2 span{display:block}.scene-copy h2 span:last-child{color:var(--sage)}.scene-copy p{font-size:14px;line-height:1.8;color:var(--muted);max-width:280px;margin-top:22px}.scene-copy .text-link{margin-top:20px}
#stairCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}.scene-caption{position:absolute;bottom:34px;left:clamp(22px,4.5vw,64px);right:clamp(22px,4.5vw,64px);display:flex;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.05em;color:var(--muted);z-index:2}.scene-rail{display:inline-flex;align-items:center;gap:18px}.scene-rail i{width:100px;height:2px;background:var(--border-3);overflow:hidden}.scene-rail b{display:block;width:100%;height:100%;background:var(--sage);transform:scaleX(var(--scene-progress,0));transform-origin:left}
.scene-portal{position:absolute;inset:0;background:var(--surface-1);clip-path:inset(100% 0 0);pointer-events:none;z-index:3}.home-work{position:relative;background:var(--surface-1)}
.home-projects{display:grid;grid-template-columns:1fr 1fr;gap:54px 30px;align-items:start}.home-project{display:block}.home-project:nth-child(even){padding-top:56px}.home-project .project-image{aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--surface-2)}
.home-project img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.home-project:hover img{transform:scale(1.035)}.project-caption{display:flex;gap:18px;justify-content:space-between;align-items:center;padding-top:22px}.project-caption h3{font-family:var(--font-body);font-size:clamp(20px,2vw,29px);font-weight:400;letter-spacing:-.025em;line-height:1.3}.project-caption>span{font-size:23px;color:var(--sage);flex:none}.project-no{font-size:10px;font-family:var(--font-mono);color:var(--muted);display:block;margin-bottom:10px}
.home-process{display:grid;grid-template-columns:1fr 1.15fr;gap:90px}.process-list{list-style:none;border-top:1px solid var(--border-3)}.process-list li{display:grid;grid-template-columns:32px 1fr;gap:20px;padding-block:22px;border-bottom:1px solid var(--border-2);transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .35s}.home-ready .process-step{opacity:.36;transform:translateY(10px)}.home-ready .process-step.is-active{opacity:1;transform:none;border-bottom-color:var(--sage)}.process-list .no{font:11px var(--font-mono);color:var(--sage);padding-top:6px}.process-list h3{font-family:var(--font-body);font-size:22px;letter-spacing:-.02em;font-weight:500}.process-list p{font-size:14px;color:var(--muted);line-height:1.75;margin-top:10px;max-width:480px}
.promise-list{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:64px;padding-top:34px;border-top:1px solid var(--border-3)}.promise-list h3{font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:14px}.promise-list p{font-size:14px;line-height:1.8;color:var(--muted)}
.home-faq{border-top:1px solid var(--border-2)}.faq-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:90px}.faq-list details{padding-block:23px;border-bottom:1px solid var(--border-3)}.faq-list details:first-child{border-top:1px solid var(--border-3)}.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:22px;font-size:18px;font-weight:400;line-height:1.45}.faq-list summary::after{content:'+';color:var(--sage);font-size:24px;line-height:1}.faq-list details[open] summary::after{content:'−'}.faq-list summary::-webkit-details-marker{display:none}.faq-list p{font-size:15px;color:var(--muted);line-height:1.8;padding-top:18px;max-width:520px}
.home-reviews{background:var(--surface-1);border-block:1px solid var(--border-2)}.reviews-head{margin-bottom:34px}.reviews-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.reviews-write{font-size:12px;color:var(--muted);border-bottom:1px solid var(--border-3);padding-block:10px}.reviews-write:hover{color:var(--sage);border-color:var(--sage)}.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border-3)}.review-card{padding:30px 28px 30px 0;border-bottom:1px solid var(--border-3)}.review-card:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--border-3)}.review-stars{color:var(--sage);font-size:12px;letter-spacing:.18em}.review-text{font-size:15px;line-height:1.75;margin-top:20px;color:var(--text)}.review-byline{display:flex;justify-content:space-between;gap:12px;margin-top:24px;color:var(--muted);font:10px var(--font-mono);letter-spacing:.03em}.reviews-score{font:clamp(34px,4vw,54px) var(--font-body);color:var(--text-hi);letter-spacing:-.04em}.reviews-count{color:var(--muted);font-size:12px;margin-top:5px}
.home-contact{padding-block:80px;background:var(--sage);color:var(--on-sage)}.home-contact-inner{display:flex;justify-content:space-between;align-items:center;gap:44px}.home-contact h2{font-size:clamp(32px,4vw,58px);font-weight:400;letter-spacing:-.04em;max-width:700px}.home-contact .rv-btn{background:var(--on-sage);color:var(--sage-bright);flex:none}.home-brand-lockup{display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;font-family:var(--font-brand);font-size:15px;font-weight:700;letter-spacing:.16em}.home-brand-lockup img{width:auto;height:25px;filter:brightness(.32)}
.home-contact .text-link{color:var(--on-sage);margin-top:14px}.home-contact-actions{display:flex;flex-direction:column;align-items:center}.home-main .rv-wrap{max-width:1328px}.home-ready .rv-hdr .brand{transition:opacity .22s var(--ease)}/* The whole header lockup stands down while the hero is showing the large one - hiding only
   the wordmark left the R mark sitting in the corner competing with the brand moment. It is
   taken out of the tab order too, so it is not a focus stop that cannot be seen. */
.home-ready:not(.word-docked) .rv-hdr .brand{opacity:0;visibility:hidden}
@media(min-width:1600px){.hero-sculpture{right:-10%}.hero-body{min-height:570px}}
@media(max-width:1000px){.hero-body{grid-template-columns:45% 55%;min-height:400px}.hero-sculpture{left:30%;right:-12%}.hero-copy h1{font-size:44px}.home-process,.faq-layout{gap:44px}.scene-copy{width:40%}.reviews-grid{grid-template-columns:1fr 1fr}.review-card:not(:nth-child(3n+1)){padding-left:0;border-left:0}.review-card:nth-child(even){padding-left:24px;border-left:1px solid var(--border-3)}}
@media(max-width:600px){.home-hero{padding-top:25px;min-height:0;padding-bottom:26px}.hero-kicker{font-size:9px;margin-bottom:22px;letter-spacing:.055em;gap:10px}.hero-kicker span:last-child{display:none}.hero-word{font-size:10.5vw;letter-spacing:.035em}.hero-body{display:block;min-height:570px;margin-top:22px}.hero-copy{padding-block:10px;max-width:100%}.hero-copy h1{font-size:42px;line-height:1.12;margin-bottom:14px}.hero-copy>p{max-width:290px;font-size:14px}.hero-actions{margin-top:20px;gap:14px}.hero-actions .rv-btn{padding:12px 15px;min-height:46px;font-size:12px}.hero-actions .text-link{font-size:12px}.hero-sculpture{inset:auto -11% 10px -11%;height:320px}.hero-spec{bottom:0;font-size:9px}.hero-spec span{display:none}.hero-bottom{font-size:10px;margin-top:0;gap:8px}.hero-bottom .line{width:26px}.home-section-head{grid-template-columns:1fr;gap:26px;margin-bottom:30px}.home-section h2,.scene-copy h2{font-size:38px}.home-section-head>div:last-child{justify-self:start}.home-section-head p{font-size:15px}.eyebrow{font-size:10px;margin-bottom:16px}.service-index{grid-template-columns:1fr}.service-line{padding-block:23px;min-height:82px;grid-template-columns:32px 1fr 20px;gap:14px}.service-line h3{font-size:22px}.scene-chapter{height:135svh}.scene-copy{top:7%;width:auto;left:22px;right:22px;max-width:300px}.scene-copy h2{font-size:36px}.scene-copy p{max-width:255px;font-size:13px;margin-top:14px}.scene-copy .text-link{margin-top:6px}.scene-caption{bottom:24px;font-size:9px;gap:10px;left:22px;right:22px}.scene-rail{gap:10px}.scene-rail i{width:50px}.home-projects{grid-template-columns:1fr;gap:36px}.home-project:nth-child(even){padding-top:0}.project-caption{padding-top:17px}.project-caption h3{font-size:24px}.home-process,.faq-layout{grid-template-columns:1fr;gap:32px}.promise-list{grid-template-columns:1fr;gap:28px;margin-top:40px}.promise-list h3{margin-bottom:9px}.home-contact{padding-block:52px}.home-contact-inner{display:block}.home-contact-actions{align-items:flex-start;margin-top:28px}.home-contact h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){.hero-word{transform:none!important;opacity:1!important;will-change:auto}.home-ready:not(.word-docked) .rv-hdr .rv-brand-word{opacity:1}.scene-chapter{height:90svh;min-height:600px}.scene-sticky{position:relative;top:0;height:100%}.scene-portal{display:none}.home-project img{transform:none!important}}
html[data-motion=off] .hero-word{transform:none!important;opacity:1!important}html[data-motion=off] .scene-chapter{height:90svh;min-height:600px}html[data-motion=off] .scene-sticky{position:relative;top:0;height:100%}html[data-motion=off] .scene-portal{display:none}
.hero-sculpture{mix-blend-mode:lighten;mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent)}
@media(max-width:600px){.hero-body{min-height:0;padding-bottom:330px}.hero-sculpture{bottom:20px}.hero-spec{bottom:6px}.hero-bottom{padding-bottom:52px}}
@media(max-width:600px){.service-line{grid-template-columns:1fr 20px}.service-line.has-media{grid-template-columns:104px 1fr 20px;gap:14px}.service-copy{gap:4px}.service-summary{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.service-media{aspect-ratio:4/3}.home-brand-lockup{margin-bottom:16px}}
@media(max-width:600px){.reviews-grid{grid-template-columns:1fr}.review-card,.review-card:nth-child(even),.review-card:not(:nth-child(3n+1)){padding:24px 0;border-left:0}.reviews-actions{gap:16px}}
@media(prefers-reduced-motion:reduce){.home-ready .process-step{opacity:1;transform:none}.link-mark::before,.service-media img{transition:none}}

/* ---------------------------------------------------- brand-green conversion section
   The section is the one deliberate full-brand-colour moment on the page, so the identity in it
   has to carry: the lockup was set at 15px beside a 25px mark, which read as a caption rather
   than as the company signing the invitation. It keeps the icon + wordmark pairing (this is a
   lockup context, not prose) and gains a hairline rule so the mark sits on something.

   The two actions were centred in a column, which gave a solid button and a quiet text link the
   same axis and so no hierarchy at all. They now share a left edge, and the secondary is clearly
   subordinate to the primary rather than merely smaller. */
.home-contact{padding-block:clamp(72px,8vw,104px)}
.home-brand-lockup{gap:14px;font-size:19px;letter-spacing:.13em;margin-bottom:26px;
  padding-bottom:18px;border-bottom:1px solid rgba(21,36,27,.22);width:fit-content}
.home-brand-lockup img{width:auto;height:34px}
.home-contact h2{line-height:1.06}
.home-contact-actions{align-items:flex-start;gap:6px}
/* 13.5 was the one primary action on the site not set at 14. Same control, same family, so
   the same type size; the emphasis here comes from the 54px height and the band behind it. */
.home-contact .rv-btn{min-height:54px;padding-inline:26px;font-size:14px;letter-spacing:.02em}
.home-contact .rv-btn:hover{background:#0E1913}
/* Subordinate, and readable on sage: the muted treatment used elsewhere on dark does not have
   the contrast for this ground. */
.home-contact .text-link{margin-top:10px;font-size:13px;opacity:.78;padding-block:8px}
.home-contact .text-link:hover{opacity:1}
@media(max-width:600px){
  .home-brand-lockup{font-size:17px;margin-bottom:20px;padding-bottom:14px}
  .home-brand-lockup img{width:auto;height:29px}
  .home-contact-actions{margin-top:30px}
}

/* The clearance that used to be reserved here is gone. It existed so the floating quote control
   could not sit on the legal line, but the control hides once the footer is reached - measured at
   the very bottom of all six public routes, at 1440 and at 390, the only fixed element left on
   screen is the header. So this was reserving space against a collision that does not happen, and
   it was doing it on the homepage ONLY: 64px against 0 on desktop, 78px against 86 on a phone.
   Another shared-footer geometry edited from a page stylesheet, and another reason the homepage
   footer measured different from every other footer on the site. product.css owns this row. */
/* Actions settle on the headline's baseline rather than floating in the vertical centre, which is
   what left the composition with an empty band through its middle. */
.home-contact-inner{align-items:flex-end}
.home-contact-actions{padding-bottom:6px}
@media(max-width:600px){.home-contact-actions{padding-bottom:0}}

/* ------------------------------------------------------------------- selected projects
   Two things made this read as awkward rather than editorial.

   The stagger was a blunt 56px push on every even card, so the second column simply sat lower
   with nothing explaining why, and at the bottom of the grid it left a ragged hole. It is now a
   smaller, deliberate offset that reads as a set rhythm, and it stops entirely once the grid is
   too narrow for a stagger to mean anything.

   The caption was `space-between`, which threw the arrow to the far edge of a 700px image and
   left it floating in space with no relationship to the title it belonged to. Number, title and
   mark are now one group, on a hairline that gives the caption a top edge to sit on. */
.home-projects{gap:60px 34px}
.home-project:nth-child(even){padding-top:38px}
@media(max-width:900px){.home-project:nth-child(even){padding-top:0}}
.project-caption{justify-content:flex-start;align-items:baseline;gap:16px;
  border-top:1px solid var(--border-3);margin-top:20px;padding-top:18px}
.project-caption>div{flex:0 1 auto;min-width:0}
.project-no{margin-bottom:8px;letter-spacing:.14em}
/* The mark is quiet until the card is addressed, so eight of them down a page are not eight
   decorations competing with the photographs. */
.project-caption>span{font-size:19px;align-self:center;opacity:.5;
  transition:opacity var(--t-ctl) var(--ease),transform var(--t-ctl) var(--ease)}
.home-project:hover .project-caption>span,
.home-project:focus-visible .project-caption>span{opacity:1;transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.project-caption>span{transition:none;transform:none!important}}
/* Truthful absent-feed note: informative, deliberately not styled as a review card. */
.reviews-offline{grid-column:1/-1;margin:0;padding:22px 0;max-width:62ch;
  font-size:14px;line-height:1.75;color:var(--muted)}

/* ---------------------------------------------------- service rows on a phone
   With a cover photograph the copy column is only ~190px wide at 390px, and Armenian compounds
   like "կոնստրուկցիաներ" are a single ~200px word - so the title ran under the arrow and was cut
   off by the row's overflow:hidden. Give the copy more room, drop the title to a size the column
   can actually hold, and let a long compound break rather than be clipped. */
@media(max-width:600px){
  .service-line.has-media{grid-template-columns:88px 1fr 18px;gap:12px;align-items:center}
  .service-line.has-media h3{font-size:17px;line-height:1.28;overflow-wrap:anywhere;hyphens:auto}
  .service-line.has-media .service-summary{font-size:11px;line-height:1.5}
  .service-line.has-media .service-copy{gap:3px}
  .service-line.has-media>.link-mark{align-self:center}
}

/* The conversion section speaks as Ravenor through composition, not through a fourth copy of the
   lockup on one page (header, footer, assistant already carry it). A drawn rule holds the same
   hierarchy the mark did, and needs no new copy in three locales. */
.home-contact-rule{display:block;width:64px;height:2px;margin-bottom:26px;
  background:linear-gradient(90deg,var(--on-sage),rgba(21,36,27,.25));border-radius:2px}
@media(max-width:600px){.home-contact-rule{margin-bottom:20px;width:52px}}

/* ------------------------------------------------------------------- trusted by
   Restored from the live Ravenor experience. Every real mark shown ONCE - production had learned
   this the hard way: a repeating marquee showed the same client twice in one viewport, which reads
   as more clients than there are.

   The supplied marks are not a consistent set - some are transparent PNGs, others carry an opaque
   white or black box baked into the artwork. Greyscaling them alone leaves those boxes glaring on
   graphite, so every mark instead sits on the SAME plate. The client's artwork is never altered;
   the plate is what makes the row read as one system whatever the source file contains. */
.home-trust{padding-block:clamp(46px,6vw,74px);border-top:1px solid var(--border-3)}
.trust-lbl{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.3em;
  font-size:11px;font-weight:500;color:var(--faint);margin-bottom:26px;text-align:center}
.trust-track{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vw,40px)}
.trust-mark{display:inline-flex;align-items:center;flex:none;opacity:.62;
  transition:opacity .35s var(--ease)}
.trust-mark:hover{opacity:1}
.trust-logo{height:40px;width:auto;max-width:170px;object-fit:contain;display:block;
  box-sizing:content-box;padding:10px 16px;border-radius:var(--r-control,2px);
  background:rgba(236,246,238,.05);box-shadow:inset 0 0 0 1px rgba(236,246,238,.07);
  filter:grayscale(1) brightness(1.38);
  transition:filter .35s var(--ease),background .35s var(--ease)}
.trust-mark:hover .trust-logo{filter:grayscale(0) brightness(1);background:rgba(236,246,238,.08)}
.trust-name{font-family:var(--font-display);font-weight:500;letter-spacing:.09em;
  font-size:clamp(14px,1.5vw,18px);color:var(--text);line-height:1;white-space:nowrap;
  padding:13px 18px;border-radius:var(--r-control,2px);background:rgba(236,246,238,.05);
  box-shadow:inset 0 0 0 1px rgba(236,246,238,.07);transition:color .35s var(--ease),background .35s var(--ease)}
.trust-mark:hover .trust-name{color:var(--text-hi);background:rgba(236,246,238,.08)}
@media(max-width:600px){
  .home-trust{padding-block:40px}
  .trust-track{gap:14px}
  .trust-logo{height:30px;max-width:120px;padding:8px 12px}
  .trust-name{font-size:13px;padding:10px 14px}
}
@media(prefers-reduced-motion:reduce){.trust-mark,.trust-logo,.trust-name{transition:none}}

/* ------------------------------------------------------------------- process: travelling light
   A rail down the left of the stages carries a fill driven by --proc (0..1, set from the section's
   own travel through the viewport). The head of the fill glows and breathes, so the section reads
   as energy moving through the process rather than as five blocks fading in. Restrained on
   purpose: one hairline, one accent, no neon. */
.process-list{position:relative;padding-left:28px}
.process-list::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--border-3);border-radius:2px}
.process-list::after{content:'';position:absolute;left:0;top:0;width:2px;border-radius:2px;
  height:calc(var(--proc,0) * 100%);
  background:linear-gradient(180deg,rgba(171,201,176,.25),var(--sage));
  box-shadow:0 0 12px rgba(171,201,176,.45),0 0 2px rgba(171,201,176,.8)}
/* the leading edge: a small travelling pulse at the head of the fill */
.process-list .proc-head,
.home-process .process-list::after{will-change:height}
.process-step{position:relative;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.process-step .no{transition:color .45s var(--ease),text-shadow .45s var(--ease)}
.process-step::before{content:'';position:absolute;left:-33px;top:1.15em;width:10px;height:10px;
  border-radius:50%;background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--border-3);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.process-step.is-active::before{background:var(--sage);transform:scale(1.12);
  box-shadow:inset 0 0 0 1.5px var(--sage),0 0 12px rgba(171,201,176,.6)}
.process-step.is-active .no{color:var(--sage);text-shadow:0 0 14px rgba(171,201,176,.35)}

/* the live stage readout that fills the previously empty left column */
.process-meter{margin-top:38px;max-width:270px}
.pm-row{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;
  color:var(--muted);letter-spacing:.12em}
.pm-idx{color:var(--sage);font-variant-numeric:tabular-nums}
.pm-total{font-variant-numeric:tabular-nums}
/* The rail beside the stages is already the progress indicator. A second travelling line in the
   left column was a duplicate of it that appeared and vanished as the section entered and left,
   which is the artifact the owner asked to remove. The readout keeps the FACT (which stage) and
   drops the redundant animation. */
.pm-sep{color:var(--faint-2);opacity:.7}
.pm-name{display:block;margin-top:12px;font-size:13px;line-height:1.5;color:var(--text);
  min-height:2.6em}
@media(max-width:900px){
  .process-list{padding-left:24px}
  .process-step::before{left:-29px}
  .process-meter{margin-top:26px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .process-list::after{height:100%;box-shadow:none}
  .process-step,.process-step::before,.process-step .no,.pm-name{transition:none}
  .process-step::before{background:var(--sage);box-shadow:inset 0 0 0 1.5px var(--sage)}
}

/* ------------------------------------------------------------------- selected projects
   The two-up grid gave every project identical weight, which is the opposite of "selected": a
   curated page has a lead and a supporting cast. The first project (first by the sort order the
   owner already controls in Admin) becomes the feature at full width and a wider crop; the rest
   sit beneath it as a supporting row. No stagger, because the offset was arbitrary rhythm rather
   than editorial intent, and the mark stays quiet until the card is addressed. */
.home-projects{grid-template-columns:repeat(3,1fr);gap:44px 30px;align-items:start}
.home-project:nth-child(even){padding-top:0}
.home-project:first-child{grid-column:1 / -1}
.home-project:first-child .project-image{aspect-ratio:21/9;border-radius:var(--r-surface,12px)}
.home-project:first-child .project-caption{padding-top:22px}
.home-project:first-child .project-caption h3{font-size:clamp(26px,3.1vw,42px)}
.home-project:first-child .project-no{font-size:11px}
.home-project:nth-child(n+2) .project-image{aspect-ratio:4/3}
.home-project:nth-child(n+2) .project-caption h3{font-size:clamp(18px,1.6vw,23px)}
/* the feature earns a slower, deeper response than the supporting row */
.home-project:first-child img{transition:transform .9s var(--ease)}
@media(hover:hover){.home-project:first-child:hover img{transform:scale(1.028)}}

@media(max-width:1000px){
  .home-projects{grid-template-columns:1fr 1fr}
  .home-project:first-child .project-image{aspect-ratio:16/9}
}
@media(max-width:600px){
  .home-projects{grid-template-columns:1fr;gap:34px}
  .home-project:first-child .project-image,
  .home-project:nth-child(n+2) .project-image{aspect-ratio:4/3}
  .home-project:first-child .project-caption h3{font-size:25px}
}

/* ------------------------------------------------------- green conversion section, art-directed
   Three problems: the page cut from black straight to solid green in one pixel, the headline sat
   alone against a wide void, and the actions floated with nothing anchoring them.

   The edge is now a short graded approach so the brand colour arrives rather than jumps; the
   composition is a real two-column relationship with the actions anchored on their own column
   rule; and a faint setting-out motif — the same drafting language the Admin panel uses — gives
   the right side something engineered to sit on instead of empty paint. */
/* ============================================================== GREEN AS RHYTHM, NOT A SLAB
   This section used to be a full-bleed panel of --sage with dark type on it: the page went
   near-black, then to a large pale mint field, then back to near-black for the footer. Two
   violent luminance jumps within one scroll, and the brand colour spent all of its impact on
   a background nobody was asked to look at. The previous attempt softened the TOP edge with a
   gradient and left the bottom edge hard, so the jump simply moved.

   The colour is right and stays. What changes is its JOB. Sage is the brand's precision accent
   — the file's own tokens say so — so the closing section becomes a DEEP GREEN SURFACE, dark
   enough to sit in the same luminance family as the rest of the page, and the only genuinely
   saturated sage left in the composition is the primary button. That inverts the hierarchy the
   right way round: the eye now lands on the thing we want pressed rather than on the paint.

   Both edges are graded into the page, so the section arrives and leaves instead of cutting,
   and a single sage hairline marks the top of it — the narrow brand band that recurs across
   the product rather than one big block of colour.
   ========================================================================================== */
.home-contact{position:relative;isolation:isolate;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(11,13,12,1) 0%,rgba(18,30,23,1) 26%,
                           rgba(20,34,26,1) 62%,rgba(11,13,12,1) 100%);
  color:var(--text)}
/* the brand band: one sage hairline, brightest in the middle where the eye enters */
.home-contact::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(171,201,176,.62) 28%,
                             rgba(171,201,176,.62) 72%,transparent)}
/* setting-out motif: two hairline families, now light-on-dark, still well under 5% */
.home-contact::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(171,201,176,.055) 0 1px,transparent 1px 128px),
    repeating-linear-gradient(0deg,rgba(171,201,176,.038) 0 1px,transparent 1px 128px);
  mask-image:linear-gradient(100deg,transparent 38%,#000 78%)}

.home-contact-inner{align-items:center;gap:clamp(40px,6vw,90px)}
.home-contact h2{max-width:15ch;color:var(--text-hi)}
.home-contact-actions{align-items:stretch;padding-bottom:0;
  border-left:1px solid rgba(171,201,176,.16);padding-left:clamp(24px,3vw,44px);gap:0}
/* the one saturated sage object in the section */
.home-contact .rv-btn{justify-content:space-between;min-width:270px;
  background:var(--sage);color:var(--on-sage)}
/* The colour is RESTATED here, and that is the whole fix. This button is the solid primary
   of the contact block by context - `.home-contact .rv-btn` paints it sage with dark text -
   but it does not carry the .rv-btn-solid CLASS, so on hover the generic outline rule
   `.rv-btn:not(.rv-btn-solid):hover{color:var(--sage)}` won the colour while this rule only
   lightened the background. Sage text on bright sage measured 1.22:1 against a 4.5 floor -
   the unreadable highlighted state the owner photographed. Restating the colour on all three
   interactive states keeps the dark ink through every one of them. */
.home-contact .rv-btn:hover,
.home-contact .rv-btn:focus-visible{background:var(--sage-br);color:var(--on-sage)}
.home-contact .rv-btn:active{background:var(--sage);color:var(--on-sage)}
.home-contact .text-link{margin-top:18px;padding-top:16px;color:var(--text-rev);opacity:1;
  border-top:1px solid rgba(171,201,176,.14)}
.home-contact .text-link:hover{color:var(--sage)}
.home-contact-rule{background:var(--sage)}

@media(max-width:600px){
  .home-contact::after{mask-image:linear-gradient(160deg,transparent 30%,#000 90%)}
  .home-contact h2{max-width:none}
  .home-contact-actions{border-left:0;padding-left:0;margin-top:30px;
    border-top:1px solid rgba(171,201,176,.16);padding-top:26px}
  .home-contact .rv-btn{min-width:0;width:100%}
}

/* ---------------------------------------------------- process readout retired
   The left column's "03 / 05 + stage name" was a second progress indicator competing with the
   travelling light. One progression language only: the rail and the illuminating steps. */
.process-meter,.pm-row,.pm-idx,.pm-total,.pm-sep,.pm-name{display:none!important}

/* ------------------------------------------------------------------ trusted by, optically even
   The supplied marks are wildly different densities - a wordmark, a tight glyph, a thin serif -
   so equal BOX sizes do not read as equal WEIGHT. The plate is bigger and the marks are given
   room to breathe inside it, which is what makes a mixed set look like one row. */
.home-trust{padding-block:clamp(56px,7vw,88px)}
.trust-track{gap:clamp(14px,2vw,28px)}
.trust-logo{height:34px;max-width:132px;padding:16px 22px;border-radius:var(--r-surface,12px);
  filter:grayscale(1) brightness(1.25) contrast(.95);opacity:.92}
.trust-mark{opacity:.72}
.trust-mark:hover .trust-logo{filter:grayscale(0) brightness(1) contrast(1)}
.trust-name{font-size:clamp(13px,1.2vw,16px);padding:17px 22px;border-radius:var(--r-surface,12px);letter-spacing:.12em}

/* --------------------------------------------------------------- reviews: no unfinished void
   With no live feed the grid collapsed and left ~150px of empty black under the heading, which
   reads as a section that did not finish loading. The truthful note now sits in a proper panel
   that occupies the space deliberately. */
.reviews-grid:empty{display:none}
.reviews-offline{padding:26px 28px;border:1px solid var(--border-3);border-radius:var(--r-surface,12px);
  background:linear-gradient(180deg,rgba(171,201,176,.035),transparent 70%);
  max-width:none;color:var(--text);font-size:14.5px}
.home-reviews .reviews-actions{gap:26px;flex-wrap:wrap}

/* ------------------------------------------------------------------- footer rhythm on a phone
   REMOVED. This block lived in home.css, which only the homepage loads, and it reached into the
   SHARED footer: link min-height 42 against 44, padding 6 against 10, paragraph leading 1.6
   against 1.9, heading margin 12 against 16, grid gap 30 against 28. Six differences, so the
   homepage footer and every other footer on the site were measurably different objects - which is
   exactly what the owner was seeing when they reported "homepage footer A, process footer B".

   It was also the worse of the two: a 42px row is under the 44px touch minimum the rest of the
   product holds. The footer is one component and product.css owns it; a page stylesheet has no
   business editing it. If the shared rhythm ever needs to change, it changes there, for every
   route at once. */

/* ==============================================================================================
   SELECTED PROJECTS — editorial, two intents
   The image is the way into the WORK (it opens the gallery); the caption carries a separate
   "View project" for the detail page. Previously one click did both jobs and the visitor could
   not simply look at the photographs.
   ============================================================================================== */
.home-projects{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(34px,3.4vw,58px) clamp(18px,2vw,30px);align-items:start}
.home-project{grid-column:span 4;display:flex;flex-direction:column;padding-top:0!important}
.home-project.is-lead{grid-column:1 / -1}

.home-project .project-image{position:relative;display:block;width:100%;padding:0;margin:0;border:0;
  background:var(--surface-2);border-radius:var(--r-surface,12px);overflow:hidden;cursor:zoom-in;aspect-ratio:4/3}
.home-project.is-lead .project-image{aspect-ratio:21/9;border-radius:var(--r-surface,12px)}
.home-project .project-image img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease),filter .5s var(--ease)}
.home-project .project-image::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(6,9,8,.55));opacity:0;transition:opacity .45s var(--ease)}
@media(hover:hover){
  .home-project .project-image:hover img{transform:scale(1.035)}
  .home-project .project-image:hover::after{opacity:1}
  .home-project .project-image:hover .project-zoom{opacity:1;transform:none}
}
.home-project .project-image:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* the affordance that says "this opens the pictures", not "this navigates" */
.project-zoom{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;
  background:rgba(10,13,11,.62);backdrop-filter:blur(6px);border:1px solid rgba(236,246,238,.18);
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.project-zoom::before,.project-zoom::after{content:'';position:absolute;background:var(--sage-br,#C2DCC6)}
.project-zoom::before{left:12px;right:12px;top:18.5px;height:1.5px}
.project-zoom::after{top:12px;bottom:12px;left:18.5px;width:1.5px}
.project-caption{display:block;padding-top:18px;border-top:1px solid var(--border-3);margin-top:18px;
  transition:border-color var(--t-ctl) var(--ease)}
.home-project:hover .project-caption{border-top-color:rgba(171,201,176,.42)}
/* index and photograph count on ONE drawing line. The count is the only hard fact the database
   holds about a project besides its name, so it is stated rather than hinted at with a pill. */
.project-meta{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.project-no{font:11px var(--font-mono);letter-spacing:.14em;color:var(--muted)}
/* No padding-left and no border-left: those divided the photo count from the decorative
   project index, and the index is gone (2026-09-22, owner addendum) - a portfolio is not a
   sequence and nothing referred to "project 03". Left as-is the rule became a hairline in
   front of the first item in the row. */
.project-spec{font:11px var(--font-mono);letter-spacing:.08em;color:var(--faint)}
.project-caption h3{font-family:var(--font-body);font-weight:400;letter-spacing:-.025em;line-height:1.22;
  font-size:clamp(19px,1.7vw,24px);color:var(--text-hi)}
.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.project-tag{font:11px var(--font-mono);letter-spacing:.08em;color:var(--muted);
  padding:5px 10px;border:1px solid var(--border-3);border-radius:99px}
.project-open{margin-top:14px;font-size:13px}

/* ---------------------------------------------------------------- THE LEAD PROJECT
   The lead used to be a wide photograph with a caption sitting in a band underneath it, which
   is the same object as the three small cards only bigger — so the section read as four cards
   rather than as one featured piece of work with support. The owner rejected that arrangement.

   Here the lead's caption is set ON the photograph over a scrim, which is what a magazine does
   with its opening picture: the image keeps the full height it was given, the dead caption band
   disappears, and the difference between the feature and the supporting three is a difference
   in KIND rather than in scale.

   The caption is pointer-events:none so a click anywhere on the scrim still reaches the image
   button underneath and opens the gallery; only the "View project" link takes its clicks back.
   That keeps the two intents the owner asked to separate — look at the work / go to the page —
   without putting a dead zone over the bottom third of the photograph.
   ------------------------------------------------------------------------------------------ */
.home-project.is-lead{position:relative}
.home-project.is-lead .project-image{aspect-ratio:16/7}
.home-project.is-lead .project-image::before{content:'';position:absolute;inset:auto 0 0 0;
  height:72%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,9,8,.42) 44%,rgba(6,9,8,.90))}
.home-project.is-lead .project-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  margin:0;border-top:0;padding:clamp(22px,2.8vw,40px);max-width:min(74%,780px);
  pointer-events:none}
.home-project.is-lead .project-caption h3{font-size:clamp(27px,3vw,40px)}
.home-project.is-lead .project-no{color:var(--text-rev)}
.home-project.is-lead .project-spec{color:var(--text-rev);border-left-color:rgba(236,246,238,.26)}
.home-project.is-lead .project-open{pointer-events:auto;color:var(--text-hi)}
.home-project.is-lead .project-open:hover{color:var(--sage)}
.home-project.is-lead .project-zoom{z-index:3}

@media(max-width:1000px){ .home-project{grid-column:span 6} }
@media(max-width:760px){
  /* Mobile gets its own art direction rather than a squeezed desktop: the overlay needs a wide
     photograph to sit on, so below this width the lead returns to a caption under the image. */
  .home-project.is-lead .project-image{aspect-ratio:4/3}
  .home-project.is-lead .project-image::before{display:none}
  .home-project.is-lead .project-caption{position:static;max-width:none;padding:18px 0 0;
    border-top:1px solid var(--border-3);margin-top:18px}
  .home-project.is-lead .project-no,
  .home-project.is-lead .project-spec{color:var(--muted)}
  .home-project.is-lead .project-spec{border-left-color:var(--border-3)}
  .home-project.is-lead .project-open{color:var(--text)}
}
@media(max-width:600px){
  .home-projects{grid-template-columns:1fr;gap:40px}
  .home-project,.home-project.is-lead{grid-column:1 / -1}
  .home-project.is-lead .project-caption h3{font-size:24px}
  .project-zoom{opacity:1;transform:none;width:34px;height:34px}
  .project-zoom::before{left:11px;right:11px;top:16.5px}
  .project-zoom::after{top:11px;bottom:11px;left:16.5px}
}
@media(prefers-reduced-motion:reduce){
  .home-project .project-image img,.home-project .project-image::after,.project-zoom{transition:none}
}

/* ------------------------------------------------------------------------ scroll-to-explore
   The cue's treatment lives in signature.css, which is the LAST stylesheet the homepage loads.
   A full styling block sat here and was silently losing to it: this file set
   `.signature-cue::before,::after{content:none}` to remove the two long flanking rules, and
   signature.css put them straight back, so the control the owner asked to calm down never
   actually changed. One definition, in the file that wins. */

/* ==================================================================== CAPABILITY INDEX
   The eight capabilities were set as a two-column table with each row vertically centred, and
   that produced two specific problems a demanding reader sees immediately. The dimension mark
   was centred on the ROW while the title sat at the top of it, so on every two-line row the
   mark floated in mid-air with no line to belong to. And the thumbnails were letterboxed into
   a short 3:2 strip, so a section whose entire job is to show what the workshop makes carried
   the least photograph of any section on the page.

   Both fix the same way: the row is set from its TOP edge, the photograph stretches to the full
   height of the row it is in, and the mark is aligned to the title it terminates. The register
   is unchanged — this is still a precise index, not a card grid — it is just set properly.
   ====================================================================================== */
/* The index was a hard `1fr 1fr` that only collapsed below 600px, so between 601 and about 820
   each column held a 132px photograph, a 26px arrow and whatever was left - 92px of text column
   at 668px. Headings wrapped mid-word and the right-hand column was clipped by the row's own
   overflow:hidden: "Railings & balustrade", "Interior/exterio". A tablet in portrait is a real
   device, not a gap between two breakpoints.
   auto-fit with a real minimum lets the column count follow the space instead of a magic width:
   a media row needs roughly 420px to read, so two of them appear when two of them fit and not
   before. One rule covers every width, which is why there is no second breakpoint to forget. */
.service-index{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:0 clamp(28px,3.4vw,56px)}
.service-line{align-items:start;padding-block:clamp(22px,2.4vw,30px)}
.service-line.has-media{grid-template-columns:minmax(132px,32%) 1fr 26px;
  gap:clamp(16px,1.8vw,26px)}
/* The photograph gets more height than the old 3:2 letterbox, but from a DECLARED ratio rather
   than from align-self:stretch — stretching handed row height to the image's intrinsic size and
   blew every row out to ~290px with the copy stranded at the top of it. */
.service-line .service-media{align-self:start;aspect-ratio:4/3;border-radius:var(--r-surface,12px)}
/* the mark terminates the TITLE, which is the line it actually refers to */
.service-line>.link-mark{align-self:start;margin-top:clamp(9px,1vw,15px)}
/* the row acknowledges the pointer on its own rule, the way a drawing highlights a callout */
.service-line{transition:color var(--t-ctl) var(--ease),border-top-color var(--t-ctl) var(--ease)}
@media(hover:hover){
  .service-line:hover{border-top-color:rgba(171,201,176,.42)}
  .service-line:hover h3{color:var(--text-hi)}
}
@media(max-width:600px){
  .service-line.has-media{grid-template-columns:96px 1fr 20px;gap:14px}
  .service-line .service-media{min-height:76px}
  .service-line>.link-mark{align-self:center;margin-top:0}
}
/* 360px is the last width where the title column is the binding constraint. Removing the
   decorative index gave it 172px, which clears Armenian (158px at 17px) but not Russian:
   `Металлоконструкции` needs 180px and was still breaking after the letter. Twelve pixels come
   off the thumbnail rather than off the type - 84px still reads as a photograph, and 17px is
   already the floor for a service name. Measured, not chosen: qa/mc_typography.py. */
@media(max-width:380px){
  .service-line.has-media{grid-template-columns:84px 1fr 20px}
}
/* The narrow-width correction that used to live here is gone with the index number it was
   working around (2026-09-22 addendum). It reclaimed the 22px column and the 8px gap that a
   decorative `01..08` held beside the service name, because Armenian compounds did not fit in
   the 142px that was left. With the number removed the title has the whole copy column at every
   width - 266px at 360px instead of 142px - and the media column keeps its original 96px.
   Verified by qa/mc_typography.py: 0 words split, three languages, 360/390/430/768. */

/* ================================================== REVIEWS, WHEN THERE ARE NO REVIEWS
   The Google feed is fetched live. When it cannot be reached the section used to keep its full
   shape — eyebrow, a 62px headline, a wide empty grid and a bordered box containing one line of
   apology. A visitor does not read that as "the feed is offline"; they read it as a section that
   is unfinished, which is exactly what the owner kept seeing.

   This does NOT hide the section, and it never invents a rating or a quotation. It closes it to
   the part that is still true and still useful: the heading, and the two real Google links. The
   populated state is untouched, so a working feed in production renders exactly as before. */
.home-reviews.is-offline{padding-block:clamp(44px,5vw,64px)}
.home-reviews.is-offline .reviews-head{margin-bottom:0;align-items:center}
.home-reviews.is-offline h2{font-size:clamp(26px,3vw,38px)}
/* the note belongs with the actions it explains, not in a box of its own in an empty grid */
.home-reviews.is-offline .reviews-grid{display:block;margin-top:18px}
.home-reviews.is-offline .reviews-offline{padding:0;border:0;border-radius:0;
  color:var(--faint);font-size:13px;max-width:56ch}
@media(max-width:600px){
  .home-reviews.is-offline .reviews-grid{margin-top:14px}
}

/* ============================================================== TRUSTED BY, ONE ROW
   The marks are supplied by real clients and they are wildly different objects: a tight glyph,
   a wide wordmark, a thin serif, and two that carry their OWN background baked into the file -
   one black, one pale grey. Sizing each by its own height therefore produced five plates of five
   different widths (78, 125, 108, 76, 76px), and the pale one read as a lit rectangle in a dark
   row. The result looked like five logos that happened to be near each other.

   The plate is now a FIXED optical box and the mark is contained inside it, so the rhythm comes
   from the row rather than from whatever the client's export happened to measure. Nothing is
   recoloured or re-cropped - these are other companies' marks and they stay as supplied; the
   even plate is what makes a mixed set read as one row. */
.trust-track{gap:clamp(12px,1.6vw,20px)}
.trust-mark{opacity:.78;display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:clamp(104px,11vw,146px);height:clamp(58px,6vw,72px);padding:0;
  border:1px solid var(--border-2);border-radius:var(--r-surface,12px);background:rgba(255,255,255,.014);
  transition:opacity var(--t-ctl) var(--ease),border-color var(--t-ctl) var(--ease),
             background var(--t-ctl) var(--ease)}
.trust-mark:hover{opacity:1;border-color:var(--chip-bd);background:rgba(236,246,238,.045)}
.trust-logo{height:auto;width:auto;max-height:clamp(26px,2.6vw,34px);max-width:78%;padding:0;
  border-radius:0;background:none;object-fit:contain;
  filter:grayscale(1) brightness(1.18) contrast(.95)}
.trust-mark:hover .trust-logo{filter:grayscale(0) brightness(1) contrast(1);background:none}
.trust-name{font-size:clamp(12px,1.1vw,15px);padding:0;border:0;border-radius:0;
  background:none;letter-spacing:.12em}
.trust-mark:hover .trust-name{background:none}
@media(max-width:600px){
  .trust-mark{width:clamp(88px,27vw,116px);height:56px}
}

/* ============================================================ SECTION RHYTHM AND SURFACES
   Measured down the homepage, the surface sequence was:

     services 1188px  #0E1110
     work     1390px  #0E1110   <- identical, and no rule between them
     trust     293px  transparent
     process   931px  transparent
     reviews   287px  #0E1110
     contact   358px  deep green

   So 2578px of one tone ran straight into 1224px of another, with the brand colour appearing
   exactly once at the very bottom. Two tones and one green moment over a 4500px page is what
   makes a dark site read as flat no matter how good the individual sections are.

   The sections now ALTERNATE, and green is a system with three intensities rather than one slab:

     hero      media
     services  raised    an index, lifted off the page
     work      base      photographs sit on the DARKEST ground, where they read brightest
     trust     tint      a narrow band carrying the faintest sage wash - the first green note
     process   raised    the technical chapter, with a setting-out motif behind it
     reviews   base
     contact   deep green  the full brand moment, earned because it is the only one
     footer    raised

   Nothing here is decoration for its own sake: each surface says whether you are reading an
   index, looking at work, or being asked for something. */

/* work drops to the page base so the photography has the darkest ground under it */
.home-work{background:var(--base);border-top:1px solid var(--border-2)}

/* TRUST — the first green note, at the lowest intensity the eye can still register */
.home-trust{position:relative;background:
  linear-gradient(180deg,rgba(171,201,176,.030),rgba(171,201,176,.012));
  border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2)}
.home-trust .trust-lbl{color:var(--faint)}

/* PROCESS — raised, and the one section that carries a drawing motif behind it. Two hairline
   families at well under 5%, masked so they fade out rather than tile to the edges. */
.home-section.rv-wrap:has(.home-process){position:relative;isolation:isolate}
.home-section.rv-wrap:has(.home-process)::before{content:'';position:absolute;
  inset:0 calc(50% - 50vw);z-index:-1;background:var(--surface-1)}
.home-section.rv-wrap:has(.home-process)::after{content:'';position:absolute;
  inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(171,201,176,.038) 0 1px,transparent 1px 132px),
    repeating-linear-gradient(0deg,rgba(171,201,176,.022) 0 1px,transparent 1px 132px);
  -webkit-mask-image:linear-gradient(200deg,#000 8%,transparent 62%);
  mask-image:linear-gradient(200deg,#000 8%,transparent 62%)}

/* reviews return to the base so the closing green arrives off the darkest ground */
.home-reviews{background:transparent;border-top:1px solid var(--border-2)}

/* ------------------------------------------------------------------ THE PROMISES
   Three headings and three paragraphs under one hairline: the flattest block left on the page,
   and the content least deserving of it - these are the commitments the workshop is prepared to
   be held to, which is the most valuable trust copy the site has.

   Set as a spec block, the same device the footer's title block uses: a sage datum rule over
   each commitment and a hairline between the columns. The site now repeats ONE structural idea
   in two places instead of inventing a different treatment per section. */
.promise-list{gap:clamp(24px,3vw,44px)}
.promise-list > div{position:relative;padding-top:22px}
/* the datum: a short sage rule that says "this is a stated commitment" */
.promise-list > div::before{content:'';position:absolute;left:0;top:0;width:26px;height:2px;
  background:var(--sage)}
/* the column rule, matching the footer block */
.promise-list > div + div::after{content:'';position:absolute;
  left:calc(clamp(24px,3vw,44px) / -2);top:0;bottom:0;width:1px;background:var(--border-2)}
.promise-list h3{font-size:clamp(17px,1.5vw,20px);line-height:1.3;margin-bottom:10px;
  color:var(--text-hi)}
.promise-list p{font-size:14px;line-height:1.75;color:var(--muted);max-width:38ch}
@media(max-width:600px){
  .promise-list > div + div::after{display:none}
  .promise-list > div + div{border-top:1px solid var(--border-2);margin-top:6px;padding-top:24px}
  .promise-list > div + div::before{top:24px}
  .promise-list > div + div{padding-top:40px}
}


/* TRUSTED BY — canonical Admin data, duplicated only in the presentation track for a seamless loop. */
.home-trust{overflow:hidden;padding-block:clamp(50px,5.5vw,76px)}
.home-trust .rv-wrap{pointer-events:none}
.trust-viewport{--trust-gap:clamp(16px,2vw,28px);width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.trust-track{display:flex;align-items:center;width:max-content;gap:var(--trust-gap);transform:translate3d(0,0,0)}
.trust-track.is-marquee{animation:trust-marquee var(--trust-duration,54s) linear infinite;will-change:transform}
.trust-group{display:flex;align-items:center;flex:none;gap:var(--trust-gap)}
.trust-mark{width:clamp(138px,12vw,176px);height:clamp(78px,7vw,94px);opacity:.9;
  background:rgba(255,255,255,.018)}
.trust-control{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
.trust-control:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.trust-viewport.is-paused .trust-track.is-marquee,
.trust-viewport:hover .trust-track.is-marquee,
.trust-viewport:focus-within .trust-track.is-marquee{animation-play-state:paused}
.trust-mark:has(.trust-control[aria-pressed="true"]){border-color:var(--sage);background:rgba(171,201,176,.08)}
.trust-logo{max-width:82%;max-height:clamp(48px,4.5vw,62px);filter:none}
.trust-mark:hover .trust-logo{filter:none}
@keyframes trust-marquee{to{transform:translate3d(calc(-50% - var(--trust-gap)/2),0,0)}}
@media(max-width:600px){
  .home-trust{padding-block:42px}
  .trust-viewport{--trust-gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .trust-mark{width:124px;height:72px}
  .trust-logo{max-height:48px;max-width:82%}
}
@media(prefers-reduced-motion:reduce){
  .trust-viewport{overflow:visible;-webkit-mask-image:none;mask-image:none;padding-inline:var(--pad)}
  .trust-track,.trust-track.is-marquee{display:block;width:100%;animation:none;transform:none;will-change:auto}
  .trust-group{display:flex;flex-wrap:wrap;justify-content:center}
  .trust-group[aria-hidden="true"]{display:none}
}

/* OWNER VISUAL ACCEPTANCE — restrained per-brand light without changing marquee geometry. */
.trust-viewport{padding-block:12px;margin-block:-12px}
.trust-mark{position:relative;isolation:isolate;overflow:visible;transform:translateZ(0);
 transition:opacity .34s var(--ease),border-color .34s var(--ease),background .34s var(--ease),
            transform .42s var(--ease),box-shadow .42s var(--ease)}
.trust-mark::before{content:'';position:absolute;z-index:-1;inset:14% 9%;border-radius:18px;
 background:radial-gradient(ellipse,rgba(171,201,176,.18),rgba(171,201,176,.055) 46%,transparent 74%);
 opacity:0;transform:scale(.84);transition:opacity .42s var(--ease),transform .42s var(--ease);
 pointer-events:none}
/* No resting opacity here. `.trust-mark` already sits at .9, so a second .88 on the logo
   multiplied to .79 and quietly dimmed the whole marquee by twelve percent - a change nobody
   asked for, arriving inside a change that was only supposed to add a hover. */
.trust-logo{transition:filter .34s var(--ease),opacity .34s var(--ease)}
@media(hover:hover) and (pointer:fine){
 .trust-mark:hover{z-index:2;transform:translateZ(0) scale(1.045);border-color:rgba(171,201,176,.38);
  background:rgba(236,246,238,.038);box-shadow:0 14px 42px -26px rgba(171,201,176,.5)}
 .trust-mark:hover::before{opacity:1;transform:scale(1)}
 .trust-mark:hover .trust-logo{filter:brightness(1.08) contrast(1.04);opacity:1}
 .trust-mark:hover .trust-name{color:var(--text-hi)}
}
@media(prefers-reduced-motion:reduce){
 .trust-mark,.trust-mark::before,.trust-logo{transition:none}
 .trust-mark:hover{transform:none}
}