/* ==========================================================================
   SERVICES — four chapters of one atelier.
   Shared spine: hero → story → the service's own idea → process → close.
   Each page keeps its own signature figure and its own composition.
   ========================================================================== */

/* --- HERO — shared shell, two compositions -------------------------------- */

.shero__inner {
  padding-top: calc(var(--nav-h) + clamp(60px, 12vh, 150px));
  padding-bottom: clamp(70px, 10vw, 150px);
}

/* Pressing: centred, ceremonial */
.shero--centred .shero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.shero--centred .shero__headline { max-width: min(15ch, 100%); }
.shero--centred .shero__sub { margin: clamp(26px, 3vw, 42px) auto 0; max-width: min(38ch, 100%); }
.shero--centred .shero__para { margin: clamp(40px, 5vw, 70px) auto 0; max-width: min(64ch, 100%); }
.shero--centred .shero__ctas { justify-content: center; }

/* Logistics · Edge Bending · Cut to Size: split, figure beside the type */
.shero__inner--split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: center;
}
.shero__inner--split .shero__type { grid-column: 1 / span 6; }
.shero__inner--split .route,
.shero__inner--split .fold,
.shero__inner--split .sheet { grid-column: 8 / span 5; }

.shero__headline { margin-top: clamp(22px, 3vw, 38px); }
.shero__sub { margin-top: clamp(24px, 3vw, 40px); max-width: min(36ch, 100%); }
.shero__para { margin-top: clamp(26px, 3vw, 40px); font-size: var(--fs-small); max-width: min(54ch, 100%); }
.shero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 3.6vw, 48px); }
.shero__cap { margin-top: 18px; }

@media (max-width: 960px) {
  .shero__inner--split .shero__type,
  .shero__inner--split .route,
  .shero__inner--split .fold,
  .shero__inner--split .sheet { grid-column: 1 / -1; }
  .shero__inner--split .route,
  .shero__inner--split .fold,
  .shero__inner--split .sheet { margin-top: 56px; }
}


/* --- PRESSING · The Union ------------------------------------------------- */

.union {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: 16 / 9;
  margin-top: clamp(50px, 7vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 8%;
}

.union__layer {
  display: block;
  width: 100%;
  background: var(--plate);
  will-change: transform;
}
.union__layer--surface { height: 12%; }
.union__layer--glue    { height: 4%;  background: rgba(255,255,255,0.14); }
.union__layer--board   { height: 30%; }

/* the hairline that flashes at the bond line, at the moment of contact */
.union__flash {
  position: absolute;
  left: 8%; right: 8%;
  top: 50%;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  will-change: opacity, transform;
}


/* --- LOGISTICS · The Route ------------------------------------------------ */

.route { display: flex; flex-direction: column; align-items: center; }
.route__svg { width: min(100%, 320px); height: auto; }

.route__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.route__stop { fill: var(--ink); opacity: 0; }
.route__cap { margin-top: 22px; text-align: center; max-width: min(34ch, 100%); }


/* --- EDGE BENDING · The Fold ------------------------------------------------- */

.fold { display: flex; flex-direction: column; align-items: center; }
.fold__svg { width: min(100%, 340px); height: auto; }
.fold__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fold__cap { margin-top: 22px; text-align: center; max-width: min(34ch, 100%); }

/* a single continuous curved surface */
.curve {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--plate);
  border-top-right-radius: 46% 30%;
  border-bottom-right-radius: 46% 30%;
}


/* --- CUT TO SIZE · The Grid ----------------------------------------------- */

.sheet {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule-strong);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr 0.8fr;
  gap: 6px;
  padding: 6px;
}
.piece { display: block; background: var(--plate); will-change: transform, opacity; }
.piece--a { grid-column: 1; grid-row: 1 / span 2; }
.piece--b { grid-column: 2; grid-row: 1; }
.piece--c { grid-column: 2; grid-row: 2; }
.piece--d { grid-column: 1; grid-row: 3; }
.piece--e { grid-column: 2; grid-row: 3; }
.sheet__cap { position: absolute; left: 0; top: calc(100% + 18px); max-width: min(34ch, 100%); }


/* --- THE STORY ------------------------------------------------------------ */

.sstory__grid { row-gap: 40px; }
.sstory__grid .index { margin-bottom: 8px; }
.sstory__title { margin-bottom: clamp(34px, 4.4vw, 60px); }
.sstory__body { row-gap: 30px; }


/* --- PRESSING · five advantages, pinned ----------------------------------- */

.advantages { position: relative; }

.advantages__rail {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--gutter);
  width: 1px;
  background: rgba(128, 128, 128, 0.28);
  z-index: 5;
}
.advantages__rail span {
  position: absolute; inset: 0;
  background: var(--wood-light);
  transform: scaleY(0);
  transform-origin: top center;
}

.advantage { min-height: 100svh; display: flex; align-items: center; }

.advantage__inner {
  padding-block: var(--sp-block);
  padding-left: clamp(28px, 5vw, 90px);
  max-width: 1080px;
}
.advantage__title { margin: 18px 0 18px; max-width: min(15ch, 100%); }

.advantage__lede {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.4vw, 22px);
  letter-spacing: -0.018em;
  color: var(--accent);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.advantage__inner .lead { max-width: min(54ch, 100%); }

@media (max-width: 860px) {
  .advantage { min-height: 0; }
  .advantage__inner { padding-block: var(--sp-band); }
  .advantages__rail { display: none; }
}


/* --- LOGISTICS · nine stations, horizontal -------------------------------- */

.stations { padding-block: var(--sp-band); }
.stations__head { margin-bottom: clamp(44px, 6vw, 80px); }
.stations__head .index { margin-bottom: 12px; }

.stations__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.stations__viewport::-webkit-scrollbar { display: none; }
.stations__viewport.is-dragging { cursor: grabbing; }

.stations__track {
  display: flex;
  gap: 0;
  padding-inline: var(--gutter);
  width: max-content;
  border-top: 1px solid var(--rule);
}

/* each commitment docks onto the line as a station */
.station {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 22vw, 320px);
  padding: clamp(28px, 3vw, 46px) clamp(20px, 2vw, 36px) clamp(34px, 4vw, 56px) 0;
}
.station::before {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.station h3 { margin: 12px 0 10px; font-size: clamp(18px, 1.5vw, 24px); }
.station p { font-size: var(--fs-small); }


/* --- EDGE BENDING · benefits beside the curve -------------------------------- */

.curved__grid { row-gap: 56px; align-items: center; }
.curved__cap { margin-top: 18px; }
.curved__grid .index { margin-bottom: 8px; }
.curved__title { margin: 18px 0 clamp(30px, 4vw, 50px); }

.curved__list { border-top: 1px solid var(--rule); }
.curved__row { padding-block: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--rule); }
.curved__row h3 { margin-bottom: 10px; font-size: clamp(17px, 1.4vw, 22px); }
.curved__row p { font-size: var(--fs-small); }


/* --- CUT TO SIZE · the modular grid --------------------------------------- */

.modular__head { align-items: end; row-gap: 24px; margin-bottom: clamp(44px, 6vw, 80px); }
.modular__head .index { margin-bottom: 8px; }

.modular__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.component { background: var(--bg); padding: clamp(24px, 2.6vw, 40px); }
.component h3 { margin: 14px 0 10px; font-size: clamp(17px, 1.4vw, 22px); }
.component p { font-size: var(--fs-small); }

@media (max-width: 1024px) { .modular__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .modular__grid { grid-template-columns: 1fr; } }


/* --- PROCESS — horizontal on every page ----------------------------------- */

.process { padding-block: var(--sp-band); }
.process__head { margin-bottom: clamp(44px, 6vw, 80px); }
.process__head .index { margin-bottom: 12px; }

.process__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.process__viewport::-webkit-scrollbar { display: none; }
.process__viewport.is-dragging { cursor: grabbing; }

.process__track {
  display: flex;
  gap: clamp(20px, 2.4vw, 44px);
  padding-inline: var(--gutter);
  width: max-content;
  list-style: none;
  margin: 0;
}

.step2 {
  flex: 0 0 auto;
  width: clamp(220px, 21vw, 300px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--rule-strong);
}
.step2 h3 { margin: 12px 0 10px; font-size: clamp(19px, 1.7vw, 27px); }
.step2 p { font-size: var(--fs-small); }


/* --- APPLICATIONS + WHY US ------------------------------------------------ */

.sapps__head { row-gap: 24px; margin-bottom: clamp(56px, 7vw, 110px); }
.sapps__head .index { margin-bottom: 8px; }

.sapps__list { border-top: 1px solid var(--rule); }
.sapps__list li {
  padding-block: clamp(14px, 1.8vw, 24px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 24px);
  letter-spacing: -0.02em;
}

.swhy { row-gap: 24px; }
.swhy .index { margin-bottom: 8px; }
.swhy__body { margin-top: clamp(26px, 3vw, 40px); max-width: min(56ch, 100%); font-size: var(--fs-small); }


/* --- CLOSE ---------------------------------------------------------------- */

.sclose__inner { padding-block: var(--sp-band); text-align: center; }
.sclose__headline { max-width: min(16ch, 100%); margin-inline: auto; }
.sclose__statement { margin-inline: auto; max-width: min(20ch, 100%); }
.sclose__ctas {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(34px, 4vw, 56px);
}


/* ==========================================================================
   PERSONALITY — THE ATELIER
   Service sections are introduced as workshop dockets: a short rule, the
   index tight against the label, the statement compact beside it.
   ========================================================================== */

.sec-head { align-items: start; }
.sec-head > .col-3 {
  position: relative;
  padding-top: 16px;
}
.sec-head > .col-3::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 1px;
  background: var(--accent);
}
.sec-head h2 {
  font-size: clamp(28px, 4vw, 62px);
  letter-spacing: -0.03em;
  max-width: min(18ch, 100%);
}

/* the atelier — light falling into a working space */
.plate { background-image: url("../assets/fields/aperture.svg"); }
.union__layer { background-image: url("../assets/fields/strata.svg"); background-size: cover; }
.curve { background-image: url("../assets/fields/light-fall.svg"); background-size: cover; }
.piece { background-image: url("../assets/fields/edge.svg"); background-size: cover; }

/* objects on this page are made of its own material */
.object { --object-field: url("../assets/fields/aperture.svg"); }




/* ==========================================================================
   THREE SERVICES, THREE COMPOSITIONS
   These heroes previously shared one arrangement — type left, thin diagram
   right — so at a glance they were the same page three times. Each now has a
   composition that belongs to its own process: Edge Bending works across a wide
   stage because bending is a horizontal event; Cut to Size is an orthographic
   plan, because that is how a cutting list is actually read; Logistics is a
   letterbox band, because dispatch is a journey along a line.
   ========================================================================== */

/* --- EDGE BENDING · the section turning ----------------------------------- */

.shero--bend { position: relative; overflow: hidden; }

.bendstage {
  position: absolute;
  inset: auto 0 0 0;
  height: min(58vh, 520px);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.bendstage__svg { width: 100%; height: 100%; display: block; }

.bendstage__body  { fill: url(#bendFace); }
.bendstage__arris { fill: none; stroke: url(#bendEdge); stroke-width: 2; }

.bendstage__datum { stroke: rgba(233, 236, 230, 0.20); fill: none; stroke-width: 1; }
.bd-base { stroke-dasharray: 2 9; }
.bd-arc  { stroke: rgba(233, 236, 230, 0.34); stroke-dasharray: 4 6; opacity: 0; }
.bd-tan  { stroke: rgba(233, 236, 230, 0.42); opacity: 0; }
.bd-r {
  fill: rgba(233, 236, 230, 0.66); stroke: none;
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em;
  opacity: 0;
}

.shero__inner--bend { position: relative; z-index: 1; display: block; }
.shero__inner--bend .shero__type { max-width: min(46ch, 100%); }
.shero__inner--bend .shero__para { max-width: min(50ch, 100%); }
.bend__cap { margin-top: clamp(30px, 5vh, 64px); opacity: 0.62; }

@media (max-width: 860px) {
  .bendstage { height: 40vh; }
  .bend__cap { margin-top: 28px; }
}

/* --- CUT TO SIZE · the plan -------------------------------------------- */

.shero__inner--plan {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vh, 70px);
}
.shero__inner--plan .shero__type {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap, 24px);
  align-items: end;
}
.shero__inner--plan .label      { grid-column: 1 / -1; }
.shero__inner--plan .shero__headline { grid-column: 1 / span 5; margin-top: 12px; }
.shero__inner--plan .shero__sub      { grid-column: 7 / span 6; margin-top: 0; }
.shero__inner--plan .shero__para     { grid-column: 7 / span 6; }
.shero__inner--plan .shero__ctas     { grid-column: 7 / span 6; }

.nest { width: 100%; }
.nest__svg { width: 100%; height: auto; display: block; }
.nest__sheet { fill: rgba(233, 236, 230, 0.045); stroke: rgba(233, 236, 230, 0.22); stroke-width: 1; }
.np {
  fill: rgba(233, 236, 230, 0.075);
  stroke: rgba(233, 236, 230, 0.5);
  stroke-width: 1;
  opacity: 0;
}
.nest__dims { stroke: rgba(233, 236, 230, 0.30); fill: none; stroke-width: 1; }
.nd-f {
  fill: rgba(233, 236, 230, 0.72); stroke: none;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em;
  text-anchor: middle;
}
.nd-f--v { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
.nest__blade { stroke: rgba(240, 244, 236, 0.9); stroke-width: 1.5; opacity: 0; }
.nest__cap { margin-top: 20px; opacity: 0.6; }

@media (max-width: 860px) {
  .shero__inner--plan .shero__headline,
  .shero__inner--plan .shero__sub,
  .shero__inner--plan .shero__para,
  .shero__inner--plan .shero__ctas { grid-column: 1 / -1; }
  .shero__inner--plan .shero__sub  { margin-top: 22px; }
}

/* --- LOGISTICS · the transit band --------------------------------------- */

.shero__inner--transit { display: block; }
.shero__inner--transit .shero__type { max-width: min(52ch, 100%); }

.transit { margin-top: clamp(40px, 7vh, 96px); }
.transit__band {
  position: relative;
  height: clamp(150px, 22vh, 210px);
  border-top: 1px solid rgba(233, 236, 230, 0.14);
  border-bottom: 1px solid rgba(233, 236, 230, 0.14);
}
.transit__rule, .transit__fill {
  position: absolute; left: 0; top: 50%; height: 1px;
}
.transit__rule { width: 100%; background: rgba(233, 236, 230, 0.18); }
.transit__fill { width: 100%; background: rgba(233, 236, 230, 0.66); transform: scaleX(0); transform-origin: left center; }

.transit__stops {
  position: absolute; inset: 0; margin: 0; padding: 0;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.ts { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ts:first-child { align-items: flex-start; }
.ts:last-child  { align-items: flex-end; }
.ts i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(233, 236, 230, 0.28);
  transition: background 300ms var(--ease), transform 300ms var(--ease);
}
.ts b {
  font-family: var(--font-body); font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(233, 236, 230, 0.34);
  transition: color 300ms var(--ease);
  white-space: nowrap;
}
.ts.is-on i { background: var(--ink); transform: scale(1.5); }
.ts.is-on b { color: var(--ink); }

/* the load itself: a stack of panels, seen slightly from the side */
.transit__load {
  position: absolute; top: 50%; left: 0;
  width: clamp(96px, 12vw, 150px); height: 46px;
  transform: translate(0, -100%);
}
.tl {
  position: absolute; left: 0; right: 0; height: 7px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(226,230,222,0.92), rgba(150,156,146,0.92));
  box-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.tl--1 { bottom: 0;  }
.tl--2 { bottom: 9px;  left: 4px; right: 4px; }
.tl--3 { bottom: 18px; left: 8px; right: 8px; }
.tl--4 { bottom: 27px; left: 13px; right: 13px; }
.transit__cap { margin-top: 22px; opacity: 0.6; }

@media (max-width: 860px) {
  .transit__band { height: clamp(126px, 20vh, 170px); }
  .ts b { font-size: 9px; letter-spacing: 0.12em; }
  .transit__load { width: 84px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .np, .bd-arc, .bd-tan, .bd-r { opacity: 1; }
  .transit__fill { transform: scaleX(1); }
  .ts i { background: var(--ink); }
  .ts b { color: var(--ink); }
}

/* --- the three heroes must resolve inside the first viewport -------------
   The shared hero padding is generous, which is right for a centred,
   ceremonial hero like Pressing but pushed these figures below the fold.
   Each is now bounded so the type and the drawing are read together. */

.shero--bend .shero__inner,
.shero--plan .shero__inner,
.shero--transit .shero__inner {
  padding-top: calc(var(--nav-h) + clamp(34px, 7vh, 86px));
  padding-bottom: clamp(34px, 5vh, 70px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.shero--plan .shero__inner    { justify-content: space-between; }
.shero--transit .shero__inner { justify-content: space-between; }

.nest__svg { max-height: min(46svh, 420px); }
.nest__cap { margin-top: 14px; }

.transit { margin-top: clamp(24px, 4vh, 54px); }

/* the section reads as a machined part, so it is given real presence */
.bendstage { height: min(66vh, 560px); }

@media (max-width: 860px) {
  .shero--bend .shero__inner,
  .shero--plan .shero__inner,
  .shero--transit .shero__inner { min-height: auto; }
  .nest__svg { max-height: 38svh; }
  .bendstage { height: 34vh; }
}

/* The transit band is anchored to the foot of the hero rather than flowing
   after the type, so the journey is always in the first viewport no matter
   how many lines the headline takes. */
.shero--transit { position: relative; overflow: hidden; }
.shero--transit .shero__inner {
  padding-bottom: clamp(200px, 30svh, 300px);
  justify-content: center;
}
.shero--transit .transit {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(30px, 5svh, 64px);
  margin-top: 0;
  padding-inline: var(--gutter);
}
@media (max-width: 860px) {
  .shero--transit .shero__inner { padding-bottom: clamp(170px, 26svh, 230px); }
  .nest__svg { max-height: 34svh; }
}
.shero--plan .nest__svg { max-height: min(40svh, 380px); }

/* final clearances: the drawing must be whole in the first viewport, and the
   transit band must not run under the call to action on a phone */
.shero--plan .shero__inner { padding-bottom: clamp(26px, 4svh, 52px); }
.shero--plan .nest__svg    { max-height: min(34svh, 330px); }
.shero--plan .shero__type  { margin-bottom: clamp(18px, 3svh, 36px); }

.shero--bend .bendstage { height: min(60vh, 520px); }

@media (max-width: 860px) {
  .shero--transit .shero__inner { padding-bottom: clamp(210px, 30svh, 260px); }
  .shero--bend .bendstage { height: 30vh; }
  .shero--plan .nest__svg { max-height: 30svh; }
}

/* the plan is the point of this page, so the sheet, its dimensions and its
   caption are all sized to land inside the first screen */
.shero--plan .shero__inner {
  padding-top: calc(var(--nav-h) + clamp(18px, 3svh, 44px));
  padding-bottom: clamp(18px, 3svh, 38px);
}
.shero--plan .shero__type { margin-bottom: clamp(10px, 2svh, 22px); }
.shero--plan .nest__svg   { max-height: min(27svh, 262px); }
.shero--plan .nest__cap   { margin-top: 10px; }

@media (max-width: 860px) {
  .shero--plan .nest__svg { max-height: 23svh; }
}