/* components part 6 of 16 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */
@media(max-width:900px){
  .cardgrid.svc-strip{grid-template-columns:repeat(2,1fr)}
  .cardgrid.svc-strip .mini.svc:nth-child(3n+1) .svc-body,
  .cardgrid.svc-strip .mini.svc:nth-child(3n) .svc-body{padding-inline:clamp(20px,2.6vw,34px)}
  .cardgrid.svc-strip .mini.svc:nth-child(2n+1) .svc-body{padding-left:var(--gut)}
  .cardgrid.svc-strip .mini.svc:nth-child(2n) .svc-body{padding-right:var(--gut)}}@media(min-width:701px){.cardgrid.split>.srow{display:contents}}@media(min-width:701px) and (max-width:900px){
  .cardgrid.svc-strip.split .mini.svc:nth-child(n) .svc-body{padding-inline:clamp(20px,2.6vw,34px)}}@media(max-width:560px){
  .cardgrid.svc-strip .mini.svc .svc-body{padding-block:16px 22px}
  .cardgrid.svc-strip .mini.svc h3{font-size:16px}
  .cardgrid.svc-strip .mini.svc p{font-size:15.5px}}

/* CRAFT */
/* One continuous 3-image strip across the full viewport: the box loses its side
   borders and radius, the columns lose their padding (moved to .cc-body), so the
   images abut at 0px. .craft-cols already has gap:0. */
.craft-box{border:1px solid var(--hair);border-inline:0;border-radius:0;overflow:hidden;background:var(--white);width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2)}
.craft-grid{display:block}
.craft-copy{padding:clamp(30px,4vw,54px)}
.craft-copy .lead{font-size:20px;color:var(--ink);line-height:1.5;font-weight:600;letter-spacing:-0.01em;margin-bottom:10px}
.craft-copy .cblock{margin-top:32px;padding-top:28px;border-top:1px solid var(--hair);cursor:default}
.craft-copy .cicon{width:40px;height:40px;border-radius:10px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:16px;transition:.25s}
.craft-copy .cblock:hover .cicon{background:var(--wash-lt)}
.craft-copy .cicon svg{width:21px;height:21px}
.craft-copy h3{font-size:20px;font-weight:700;margin-top:0;letter-spacing:-0.02em;margin-bottom:9px}
.craft-copy p{color:var(--body);line-height:1.66;font-size:16px}
.craft-media-legacy{background:var(--grey)}
/* craft — 3 columns, each with its own image */
.craft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.craft-col{padding:0;border-right:0}
/* Equal-width text under the strip: uniform padding on every column, so the outer
   two are not squeezed by an --edge inset while the middle stays wide. The vertical
   rules are gone — they ran on past the copy into the spec row below. */
.craft-col .cc-body{padding:clamp(30px,3.4vw,44px) clamp(24px,2.8vw,40px);height:100%;max-width:var(--measure);margin-inline:auto;width:100%}
/* Third column's block is right-oriented, but its icon and heading stay left-aligned
   like the other two so the row still reads as one system. */
.craft-col:last-child .cc-body{margin-left:auto;margin-right:0}
.craft-col .cc-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0;margin-bottom:0;display:block}
.craft-col .cicon{width:40px;height:40px;border-radius:10px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:15px;transition:.25s}
.craft-col:hover .cicon{background:var(--wash-lt)}
.craft-col .cicon svg{width:21px;height:21px}
.craft-col h3{font-size:20px;font-weight:700;letter-spacing:-0.02em;margin-bottom:9px}
.craft-col p{color:var(--body);line-height:1.66;font-size:15.5px;max-width:52ch}@media(max-width:860px){.craft-cols{grid-template-columns:1fr}.craft-col .cc-body{border-right:0;border-bottom:1px solid var(--hair);padding-inline:var(--gut)}.craft-col:last-child .cc-body{border-bottom:0}}
/* 2x2 rather than 1x4: four cells under a three-column strip put every divider in
   the wrong place. Outer cells inset to the header line so the row reads as part
   of the same column system. */
.craft-spec{grid-column:1/-1;border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(4,1fr)}
.craft-spec .sp{padding:28px clamp(20px,2.6vw,34px);border-right:1px solid var(--hair)}
.craft-spec .sp:last-child{border-right:0}
.craft-spec .si{color:var(--ink);margin-bottom:14px;display:block}
.craft-spec .si svg{width:20px;height:20px}
.craft-spec .k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.craft-spec .v{font-family:var(--disp);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;line-height:1.2}@media(max-width:860px){.craft-grid{grid-template-columns:1fr}.craft-media{min-height:340px;order:-1}.craft-spec{grid-template-columns:1fr 1fr}.craft-spec .sp:nth-child(2){border-right:0}.craft-spec .sp{border-bottom:1px solid var(--hair)}}@media(max-width:480px){.craft-spec{grid-template-columns:1fr}.craft-spec .sp{border-right:0}}

/* PROCESS — white cards on grey, no number badges, scroll-snap on mobile */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2)}
.step{background:none;border:0;border-radius:0;overflow:visible;position:relative}
.step .stepimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.timeline .step:nth-child(1) .stepimg{object-position:8% center}
.timeline .step:nth-child(n+2) .stepimg{object-position:center center}
/* The chevron pointed across the inter-step gap. The strip is now gap:0, so it
   would sit on top of the neighbouring image. */
.step:not(:last-child)::after{display:none}@media(max-width:700px){.step:not(:last-child)::after{display:none}}
.step .stepmedia{position:relative}
/* Seam markers sit ON the join between two images, so they need the media box as
   their positioning context — anchoring to .step would drop them into the copy.
   Inline SVG with currentColor so the arrow follows --accent from the switcher. */
.step-jn{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);z-index:4;width:clamp(34px,2.6vw,46px);height:clamp(34px,2.6vw,46px);border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(20,19,16,.22)}
.step-jn svg{width:46%;height:46%}@media(max-width:1040px){.step-jn{left:10px;transform:translateY(-50%);width:32px;height:32px}}
.step .step-body{padding:16px clamp(16px,1.6vw,22px) 0;max-width:min(var(--measure),400px);margin-inline:auto}
.step .day{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.step h4{font-size:20px;font-weight:700;letter-spacing:-0.02em;margin-bottom:11px;line-height:1.1}
.step p{color:var(--body);font-size:16px;line-height:1.65}@media(max-width:700px){
  .timeline{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .timeline .step{scroll-snap-align:start}
  .step::after{display:none}}
.guarantee{margin:clamp(40px,5vw,60px) auto 0;max-width:none;display:flex;align-items:center;justify-content:center;gap:15px;text-align:left;color:var(--ink);font-size:clamp(16px,2vw,19px);font-weight:700;line-height:1.35;letter-spacing:-0.01em}
.guarantee .shield{width:42px;height:42px;color:var(--green);flex:0 0 42px}
.guarantee .shield svg{width:42px;height:42px}

/* TRANSFORM 2-col — dark strip */
.tf-sec{position:relative;overflow:hidden;background:var(--warm);padding-block:clamp(56px,7vw,90px)}
.tf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tf-sec::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,16,.74),rgba(20,19,16,.86));z-index:1}
.tf-sec .wrap{position:relative;z-index:2}
.tf-sec .eyebrow{color:var(--accent)}
.tf-sec h2{color:#fff}
.tf-sec p{color:#b3b2ac!important}
.tf-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(34px,5vw,64px);align-items:center}@media(max-width:860px){.tf-grid{grid-template-columns:1fr}}

/* PORTFOLIO */
.pf-head{max-width:740px;margin:0 auto clamp(30px,4vw,44px);text-align:center}
.pf-head h2{font-size:clamp(30px,4.0vw,49px);font-weight:650;margin-bottom:16px;letter-spacing:-0.024em;line-height:1.05}
.pf-head p{color:var(--muted);font-size:18px}
.filters{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.filters.country{margin-bottom:40px}
.filters.space{aspect-ratio:auto;position:static}
.filters button{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);background:transparent;border:1.5px solid var(--hair);padding:10px 20px;border-radius:999px;cursor:pointer;transition:.22s}
.filters button:hover,.filters button:focus{background:var(--wash-lt)}
.filters button.on:focus{background:var(--ink);color:#fff}
.filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters.country button.on{background:transparent;color:var(--ink);border-color:var(--ink);border-width:2px}
.pf-full{padding-inline:0;position:relative;width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2)}
.masonry{display:flex;gap:7px;align-items:flex-start}
.masonry .mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px}
/* before JS runs, and if JS fails, it still reads as a sane single column */
.masonry:not(.cols) .card{width:100%}
/* 2-up at 0 side padding still reads far bigger than the old inset single column,
   and halves the vertical scroll the client complained about. */

.card{break-inside:avoid;margin-bottom:7px;display:block;overflow:hidden;position:relative;border-radius:0}
.card figure{overflow:hidden;background:var(--grey);position:relative}
/* Lightbox — the 2-column mobile gallery makes each tile small, so a tap opens the
   full render. Enabled at every width; on desktop it doubles as a closer look. */
/* ---------------------------------------------------------- ANIMATED STILLS
   A still that quietly becomes a loop. The plan is for many of these: the closing CTA,
   hero bands, and eventually a large share of the portfolio wall. So it is a component,
   not a one-off.

   Contract: put data-motion="<mp4 url>" on any element that already contains an <img>.
   The image ships as normal and is what everyone sees first; the script below adds a
   <video> over it only when the element is near the viewport AND the page has finished
   its important loading. On failure, on a slow connection, or under reduced motion, the
   still simply stays. */
[data-motion]{position:relative}
[data-motion] > .motion-v{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .7s ease;pointer-events:none;z-index:0}