/* components part 5 of 11 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

.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(--accent);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(--accent);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(33px,4.4vw,54px);font-weight:800;margin-bottom:16px;letter-spacing:-0.035em}
.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}
/* .pagecta stacks: bg image z0, scrim ::after z1, copy z2. The loop replaces the
   image, so it takes the image's layer, not one above the scrim. */
.pagecta > .motion-v{z-index:0}
[data-motion] > .motion-v.on{opacity:1}
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,19,16,.94);display:none;align-items:center;justify-content:center;padding:16px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:4px;display:block}
/* SHARE. Top-left: the close button owns top-right, the counter owns top-centre, and
   the caption and the panorama bar both own the bottom. Copy link comes first because in
   this business that is the one that gets used -- the link goes into an email to a client
   -- and the rest are icons. Instagram is deliberately not here: there is no web share
   intent for it and a link cannot be posted to it from a browser, so the button would do
   nothing. On a phone the native share sheet covers Instagram and everything else the
   device has, and it is shown only where navigator.share actually exists. */
.lb-share{position:absolute;left:16px;top:14px;z-index:6;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.lb-share button,.lb-share a{display:inline-flex;align-items:center;gap:7px;height:34px;
  padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:rgba(20,19,16,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:background .18s,border-color .18s,color .18s}
.lb-share a{padding:0;width:34px;justify-content:center}
.lb-share svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.lb-share button:hover,.lb-share a:hover,
.lb-share button:focus-visible,.lb-share a:focus-visible{
  background:rgba(20,19,16,.68);border-color:rgba(255,255,255,.5);color:#fff}
.lb-share button[hidden]{display:none}
.lb-share .ok{border-color:var(--accent);color:var(--accent)}@media(max-width:700px){.lb-share{left:12px;top:12px;gap:6px}
  .lb-share button span{display:none}
  .lb-share button{width:34px;padding:0;justify-content:center}}
.lb-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:rgba(255,255,255,.82);font-size:13.5px;padding-inline:16px}
/* Step through the gallery without closing and re-opening. Same visual language as the
   panorama viewer's arrows so the lightbox has one grammar, and disabled rather than
   hidden at the ends so the control does not jump about. */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(255,255,255,.14);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s,opacity .18s;z-index:2}
.lb-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lb-nav:hover,.lb-nav:focus-visible{background:rgba(255,255,255,.26)}
.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-nav[disabled]{opacity:.28;cursor:default}
.lb-prev{left:16px} .lb-next{right:16px}