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

/* Bigger circles and framing lifted toward the faces. CSS can enlarge and reposition
   but cannot crop tighter inside the circle — for a true head-and-shoulders crop the
   six nb-*.png sources need re-cropping. */
.cardgrid.ind .mini.svc .svc-img{flex:0 0 auto;width:clamp(184px,15vw,240px);height:clamp(184px,15vw,240px);aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 20%;margin:0;display:block}
.cardgrid.ind .mini.svc .svc-body{padding:0;text-align:left;flex:1}
.cardgrid.ind .mini.svc .svc-more{align-self:flex-start;margin-top:12px;padding-top:0}@media(max-width:640px){.cardgrid.ind{grid-template-columns:1fr}.cardgrid.ind .mini.svc{flex-direction:column;text-align:center}.cardgrid.ind .mini.svc .svc-body{text-align:center}.cardgrid.ind .mini.svc .svc-more{align-self:center}}@media(max-width:900px){.cardgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.cardgrid,.cardgrid.two{grid-template-columns:1fr}}@media(min-width:1px){
  .cardgrid.svc-strip{grid-template-columns:repeat(3,1fr);gap:0;width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2)}
  .cardgrid.svc-strip .mini{border:0;border-radius:0;background:none;padding:0}
  /* No hover on the services strip: they are content, not controls. */
.cardgrid.svc-strip .mini:hover{transform:none}
.cardgrid.svc-strip .mini.svc .svc-img,.cardgrid.svc-strip .svc-split{transition:none}
.cardgrid.svc-strip .mini:hover .svc-img,.cardgrid.svc-strip .mini:hover .svc-split{transform:none;filter:none}
  /* .svc-canvas rides in this selector on purpose: the live 360 projection has to sit
   exactly on top of the still it replaces, and if the two aspect ratios are declared
   separately they drift the moment one is changed. */
.cardgrid.svc-strip .mini.svc .svc-img,.cardgrid.svc-strip .mini.svc .svc-canvas,.cardgrid.svc-strip .svc-split{aspect-ratio:3/2;border-radius:0}
  .cardgrid.svc-strip .mini.svc .svc-body{padding:clamp(26px,3vw,38px) clamp(24px,2.8vw,40px) clamp(34px,3.6vw,46px)}
  .cardgrid.svc-strip .mini.svc p{max-width:52ch}
  /* outer cells align their copy with the header line, not the raw viewport */
  /* Uniform padding on every cell — an --edge inset here is measured against the
     viewport but applied inside a 1/3-width cell, so on ultrawide it exceeded the
     cell and crushed the outer columns to one word per line. */
  .cardgrid.svc-strip .mini.svc .svc-body{max-width:var(--measure);margin-inline:auto;width:100%}
  .cardgrid.svc-strip .mini.svc p{max-width:46ch}}@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(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(--accent);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(--accent);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(--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}