/* ==========================================================================
   KRAFTIMA — pages.css
   Work · Case study · Services · Service detail · About · Contact
   Shares tokens from base.css. Each page gets a distinct layout language.
   ========================================================================== */

/* Push content below fixed header on inner pages */
.page-top { padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem)); }

/* Generic page hero (editorial masthead) */
.masthead { padding-bottom: clamp(2.5rem, 6vw, 5rem); border-bottom: 1px solid var(--hairline); }
.masthead__eyebrow { display:flex; align-items:center; gap:1rem; margin-bottom: 1.8rem; }
.masthead__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-4); line-height: .92; letter-spacing: -0.04em;
  max-width: 16ch;
}
.masthead__title em { font-family: var(--font-serif); font-style: italic; font-weight: 380; color: var(--accent); }
.masthead__sub { font-family: var(--font-serif); font-size: var(--step-1); max-width: 42ch; margin-top: 1.6rem; color: var(--fg-muted); }
.masthead__row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:2rem; }
.masthead__count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-muted); letter-spacing:.1em; }
.masthead__count b { color: var(--fg); font-size: var(--step-1); }

/* ============================ WORK — visual archive ====================== */
.filters {
  position: sticky; top: var(--header-h); z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  padding-block: 1rem;
}
.filters__inner { display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.filters__inner::-webkit-scrollbar { display:none; }
.filter {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing:.05em;
  padding:.6em 1.05em; border:1px solid var(--hairline); border-radius:999px;
  color: var(--fg-muted); transition: all .3s var(--ease); white-space:nowrap;
}
.filter:hover { color: var(--fg); border-color: var(--fg); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Masonry-ish editorial archive: CSS columns give organic mixed heights */
.archive { columns: 2; column-gap: var(--gutter); margin-top: clamp(2rem,5vw,3.5rem); }
.archive__item {
  break-inside: avoid; margin-bottom: var(--gutter);
  opacity: 1; transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.archive__item.is-hidden { display:none; }
.archive__item.is-featured { column-span: all; }
.archive__link { display:block; position:relative; overflow:hidden; background: var(--bg-2); }
.archive__media { position:relative; overflow:hidden; }
.archive__media img { width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease-out); }
.archive__link:hover .archive__media img { transform: scale(1.05); }
.archive__link::after {
  content:"View case ↗"; position:absolute; z-index:2; left:1rem; bottom:1rem;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink); background: var(--paper); padding:.55em .9em; border-radius:999px;
  opacity:0; transform:translateY(8px); transition: all .4s var(--ease-out);
}
.archive__link:hover::after { opacity:1; transform:none; }
.archive__cap { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1rem .2rem 0; }
.archive__name { font-family:var(--font-display); font-weight:500; font-size:var(--step-1); letter-spacing:-0.02em; }
.archive__meta { font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-muted); text-align:right; }
.is-featured .archive__media { aspect-ratio: 16/9; }
.is-featured .archive__name { font-size: var(--step-2); }
.archive__empty { display:none; padding:4rem 0; text-align:center; color:var(--fg-muted); font-family:var(--font-serif); font-size:var(--step-1); }
.archive__empty.is-on { display:block; }
@media (max-width: 720px){ .archive { columns: 1; } .is-featured .archive__media { aspect-ratio: 4/3; } }

/* ============================ CASE STUDY — immersion ==================== */
.cs-hero { position:relative; min-height: 82svh; display:flex; align-items:flex-end;
  background: var(--ink); color: var(--paper); overflow:hidden; }
.cs-hero__media { position:absolute; inset:0; }
.cs-hero__media img { width:100%; height:100%; object-fit:cover; transform: scale(1.05); }
.cs-hero__media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,18,16,.5), rgba(20,18,16,.15) 45%, rgba(20,18,16,.85)); }
.cs-hero__inner { position:relative; z-index:2; width:100%; padding-bottom: clamp(2.5rem,6vw,5rem); }
.cs-hero__cat { font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:var(--amber-2); }
.cs-hero__title { font-family:var(--font-display); font-weight:500; font-size:var(--step-5); line-height:.9; letter-spacing:-0.04em; margin-top:1.2rem; max-width:16ch; }
.cs-hero__intro { font-family:var(--font-serif); font-size:var(--step-1); max-width:40ch; margin-top:1.4rem; color:rgba(245,241,233,.85); }

.cs-facts { display:grid; grid-template-columns: repeat(4,1fr); gap:var(--gutter);
  padding-block: clamp(2rem,5vw,3.5rem); border-bottom:1px solid var(--hairline); }
.cs-fact .cs-fact__k { display:block; font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:.6rem; font-weight:500; }
.cs-fact p { font-family:var(--font-display); font-weight:500; font-size:var(--step-1); letter-spacing:-0.01em; }
@media (max-width:760px){ .cs-facts { grid-template-columns:1fr 1fr; gap:2rem 1rem; } }

.cs-block { padding-block: clamp(3rem,8vw,7rem); }
.cs-block + .cs-block { border-top:1px solid var(--hairline); }
.cs-two { display:grid; grid-template-columns: 1fr 1.4fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.cs-two--flip { grid-template-columns: 1.4fr 1fr; }
.cs-block__label { font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:1.4rem; }
.cs-block__h { font-family:var(--font-display); font-weight:500; font-size:var(--step-2); letter-spacing:-0.03em; line-height:1.02; max-width:16ch; }
.cs-block__body { font-size:var(--step-1); line-height:1.5; color:var(--fg); max-width:52ch; }
.cs-block__body.serif { font-family:var(--font-serif); font-weight:380; }
@media (max-width:820px){ .cs-two, .cs-two--flip { grid-template-columns:1fr; gap:1.4rem; } }

.cs-figure { width:100%; overflow:hidden; background:var(--bg-2); }
.cs-figure img { width:100%; display:block; }
.cs-figure--wide { aspect-ratio:16/9; }
.cs-figure img.cover { height:100%; object-fit:cover; }
.cs-gallery { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gutter); }
.cs-gallery .g-2 { grid-column: span 2; } .cs-gallery .g-3 { grid-column: span 3; }
.cs-gallery .g-4 { grid-column: span 4; } .cs-gallery .g-6 { grid-column: span 6; }
.cs-gallery figure { overflow:hidden; background:var(--bg-2); aspect-ratio:4/3; }
.cs-gallery img { width:100%; height:100%; object-fit:cover; }
@media (max-width:720px){ .cs-gallery { grid-template-columns:1fr 1fr; }
  .cs-gallery .g-2,.cs-gallery .g-3,.cs-gallery .g-4,.cs-gallery .g-6 { grid-column: span 1; } }

.cs-result { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
.cs-result .stat__num { font-size: clamp(2.4rem,5vw,3.6rem); }
.cs-quote { font-family:var(--font-serif); font-size:var(--step-2); line-height:1.35; font-weight:380; max-width:24ch; }
.cs-quote cite { display:block; font-family:var(--font-mono); font-size:var(--step--1); font-style:normal; color:var(--fg-muted); margin-top:1.5rem; letter-spacing:.05em; }

.cs-next { display:block; padding-block: clamp(3rem,7vw,6rem); position:relative; overflow:hidden; }
.cs-next__label { font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-muted); }
.cs-next__title { font-family:var(--font-display); font-weight:500; font-size:var(--step-4); letter-spacing:-0.04em; margin-top:1rem; transition: color .4s; }
.cs-next:hover .cs-next__title { color: var(--accent); }
.cs-error { padding-block: clamp(4rem,12vw,10rem); text-align:center; }

/* ============================ SERVICES — capability system ============== */
.svc-group { padding-block: clamp(2.5rem,6vw,5rem); border-top:1px solid var(--hairline); }
.svc-group__head { display:grid; grid-template-columns: 1fr 2fr; gap:2rem; align-items:baseline; margin-bottom:2.5rem; }
.svc-group__key { font-family:var(--font-display); font-weight:500; font-size:var(--step-3); letter-spacing:-0.03em; }
.svc-group__key .n { font-family:var(--font-mono); font-size:var(--step--1); color:var(--accent); vertical-align:top; margin-right:.6rem; }
.svc-group__note { font-family:var(--font-serif); font-size:var(--step-1); color:var(--fg-muted); max-width:34ch; }
.svc-list { }
.svc-row {
  display:grid; grid-template-columns: 1fr auto; gap:1.5rem; align-items:center;
  padding: clamp(1.4rem,3vw,2.2rem) 0; border-top:1px solid var(--hairline);
  position:relative; transition: padding-left .4s var(--ease);
}
.svc-row::before { content:""; position:absolute; left:-100vw; right:-100vw; top:0; bottom:0; z-index:-1;
  background:var(--accent); transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease); }
.svc-row:hover { padding-left:1.4rem; color:var(--paper); }
.svc-row:hover::before { transform:scaleY(1); }
.svc-row:hover .svc-row__disc { color:rgba(245,241,233,.85); }
.svc-row__name { font-family:var(--font-display); font-weight:500; font-size:var(--step-2); letter-spacing:-0.02em; line-height:1.02; }
.svc-row__disc { font-size:var(--step--1); color:var(--fg-muted); max-width:40ch; margin-top:.5rem; }
.svc-row__go { font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.08em; opacity:.6; transition:opacity .3s, transform .3s; }
.svc-row:hover .svc-row__go { opacity:1; transform:translateX(4px); }
@media (max-width:720px){ .svc-group__head { grid-template-columns:1fr; gap:.8rem; } .svc-row__go{ display:none; } }

/* ============================ SERVICE DETAIL ========================== */
.sd-hero { padding-block: clamp(2rem,5vw,4rem) clamp(3rem,7vw,6rem); }
.sd-hero__eyebrow { display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem; }
.sd-hero__title { font-family:var(--font-display); font-weight:500; font-size:var(--step-4); line-height:.94; letter-spacing:-0.04em; max-width:14ch; }
.sd-statement { font-family:var(--font-serif); font-size:var(--step-2); line-height:1.35; font-weight:380; max-width:26ch; }
.sd-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.sd-caps { display:grid; grid-template-columns:1fr 1fr; gap:.4rem 2rem; }
.sd-caps li { padding:.9rem 0; border-bottom:1px solid var(--hairline); font-size:var(--step-0); display:flex; align-items:center; gap:.7rem; }
.sd-caps li::before { content:"—"; color:var(--accent); }
.sd-value { font-family:var(--font-display); font-weight:500; font-size:var(--step-2); letter-spacing:-0.02em; line-height:1.1; max-width:20ch; }
.sd-value em { font-family:var(--font-serif); font-style:italic; font-weight:380; color:var(--accent); }
.sd-deliver { display:flex; flex-wrap:wrap; gap:.6rem; }
.sd-motif { aspect-ratio: 4/3; background:var(--bg-2); position:relative; overflow:hidden; border:1px solid var(--hairline); }
@media (max-width:820px){ .sd-grid { grid-template-columns:1fr; } .sd-caps { grid-template-columns:1fr; } }

/* FAQ accordion */
.faq { border-top:1px solid var(--hairline); }
.faq__item { border-bottom:1px solid var(--hairline); }
.faq__q { width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding: clamp(1.2rem,3vw,1.8rem) 0; font-family:var(--font-display); font-weight:500; font-size:var(--step-1); letter-spacing:-0.01em; }
.faq__q .plus { flex:0 0 auto; width:1.4rem; height:1.4rem; position:relative; }
.faq__q .plus::before, .faq__q .plus::after { content:""; position:absolute; inset:0; margin:auto; background:var(--accent); }
.faq__q .plus::before { width:100%; height:2px; } .faq__q .plus::after { width:2px; height:100%; transition:transform .3s var(--ease); }
.faq__item[open] .plus::after { transform:rotate(90deg); opacity:0; }
.faq__a { padding-bottom: clamp(1.2rem,3vw,1.8rem); color:var(--fg-muted); max-width:60ch; font-size:var(--step-0); }
details.faq__item summary { list-style:none; cursor:pointer; } details.faq__item summary::-webkit-details-marker{ display:none; }

/* ============================ ABOUT — editorial narrative ============== */
.ab-lead { font-family:var(--font-display); font-weight:500; font-size:clamp(1.8rem,4vw,3.4rem);
  line-height:1.08; letter-spacing:-0.03em; max-width:22ch; }
.ab-lead em { font-family:var(--font-serif); font-style:italic; font-weight:380; color:var(--accent); }
.ab-story { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.ab-story__body p { font-size:var(--step-1); line-height:1.55; max-width:54ch; }
.ab-story__body p + p { margin-top:1.4rem; }
.ab-aside { position:sticky; top:calc(var(--header-h) + 2rem); }
.ab-aside dl { display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.5rem; }
.ab-aside dt { font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-muted); letter-spacing:.05em; }
.ab-aside dd { font-family:var(--font-display); font-weight:500; }
@media (max-width:820px){ .ab-story { grid-template-columns:1fr; } .ab-aside { position:static; } }

.ab-belief { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
.ab-belief__item { border-top:2px solid var(--fg); padding-top:1.4rem; }
.ab-belief__n { font-family:var(--font-mono); font-size:var(--step--1); color:var(--accent); }
.ab-belief__h { font-family:var(--font-display); font-weight:500; font-size:var(--step-1); letter-spacing:-0.02em; margin:2rem 0 .8rem; }
.ab-belief__b { color:var(--fg-muted); }
@media (max-width:760px){ .ab-belief { grid-template-columns:1fr; gap:2rem; } }

.ab-markets { display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; }
.ab-markets span { font-family:var(--font-serif); font-size:clamp(1.4rem,3vw,2.4rem); color:rgba(245,241,233,.5); transition:color .3s; }
.ab-markets span.on { color:var(--paper); }

/* ============================ CONTACT — funnel ========================= */
.ct-wrap { display:grid; grid-template-columns: 1fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.ct-aside__title { font-family:var(--font-display); font-weight:500; font-size:var(--step-3); line-height:1; letter-spacing:-0.03em; }
.ct-aside__title em { font-family:var(--font-serif); font-style:italic; font-weight:380; color:var(--accent); }
.ct-direct { margin-top:2.5rem; display:grid; gap:1rem; }
.ct-direct a { display:flex; align-items:center; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--hairline); font-size:var(--step-1); transition:color .3s; }
.ct-direct a:hover { color:var(--accent); }
.ct-direct .k { font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-muted); width:5.5rem; letter-spacing:.05em; }

.wizard { border:1px solid var(--hairline); padding:clamp(1.5rem,4vw,2.8rem); background:var(--bg-2); }
.wizard__bar { display:flex; gap:.4rem; margin-bottom:2rem; }
.wizard__bar span { flex:1; height:3px; background:var(--hairline); overflow:hidden; }
.wizard__bar span.on { background:var(--accent); }
.wizard__step { display:none; }
.wizard__step.is-active { display:block; animation: stepIn .5s var(--ease-out); }
@keyframes stepIn { from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .wizard__step.is-active { animation:none; } }
.wizard__q { font-family:var(--font-display); font-weight:500; font-size:var(--step-2); letter-spacing:-0.02em; margin-bottom:.5rem; }
.wizard__hint { color:var(--fg-muted); font-size:var(--step--1); margin-bottom:1.6rem; }
.wizard__stepno { font-family:var(--font-mono); font-size:var(--step--1); color:var(--accent); letter-spacing:.1em; margin-bottom:1rem; }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.opt { border:1px solid var(--hairline); padding:1rem 1.2rem; text-align:left; font-size:var(--step-0); font-weight:500;
  transition: all .25s var(--ease); display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:var(--bg); }
.opt:hover { border-color:var(--fg); }
.opt[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.opt[aria-pressed="true"]::after { content:"✓"; color:var(--amber-2); }
.field { display:block; margin-bottom:1.1rem; }
.field label { display:block; font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.06em; color:var(--fg-muted); margin-bottom:.5rem; text-transform:uppercase; }
.field input, .field textarea, .field select {
  width:100%; padding:.9rem 1rem; font:inherit; font-size:var(--step-0); color:var(--fg);
  background:var(--bg); border:1px solid var(--hairline); border-radius:0;
  transition:border-color .25s; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--accent); }
.field textarea { resize:vertical; min-height:110px; }
.field.two { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field.err input, .field.err textarea { border-color:var(--amber); }
.field__msg { color:var(--amber); font-size:var(--step--1); margin-top:.4rem; min-height:1em; }
.wizard__nav { display:flex; justify-content:space-between; align-items:center; margin-top:1.8rem; gap:1rem; }
.wizard__back { font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-muted); letter-spacing:.05em; }
.wizard__back:hover { color:var(--fg); }
.wizard__back[hidden]{ display:none; }
.wizard__done { text-align:center; padding:2rem 0; display:none; }
.wizard__done.is-on { display:block; animation: stepIn .6s var(--ease-out); }
.wizard__done .tick { width:64px; height:64px; border-radius:50%; background:var(--accent); color:var(--paper);
  display:grid; place-items:center; margin:0 auto 1.6rem; font-size:1.8rem; }
.wizard__done h3 { font-size:var(--step-2); margin-bottom:.8rem; }
.wizard__done p { color:var(--fg-muted); max-width:36ch; margin:0 auto 1.5rem; }
@media (max-width:900px){ .ct-wrap { grid-template-columns:1fr; } }
@media (max-width:520px){ .opts { grid-template-columns:1fr; } .field.two { grid-template-columns:1fr; } }

/* Section utility for inner pages */
.p-section { padding-block: clamp(3rem,7vw,6rem); }
.p-section--tight { padding-block: clamp(2rem,5vw,4rem); }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2rem,5vw,3.5rem); }
.sec-head h2 { max-width:16ch; }

/* ==========================================================================
   PHASE 3 — refinement layer (overflow safety, rhythm, mobile art direction)
   ========================================================================== */

/* Prevent any single long word in oversized display type from overflowing
   narrow viewports (e.g. "Professional" at 320px). */
.hero__title, .cs-hero__title, .masthead__title, .cta__big, .ct-aside__title,
.sd-hero__title, .ab-lead, .svc-group__key, .entry__title, .archive__name {
  overflow-wrap: break-word;
}

/* Container never exceeds a comfortable measure on ultrawide; centre the
   composition with a touch more gutter past 1800px. */
@media (min-width: 1800px){
  :root { --gutter: clamp(4rem, 5vw, 6rem); }
}

/* Tablet in-between (768–1024): tighten two-column case blocks earlier and
   keep the work archive from getting too wide per column. */
@media (min-width: 721px) and (max-width: 1024px){
  .archive { column-gap: 2rem; }
  .cs-facts { gap: 1.5rem; }
  .sd-grid { gap: 3rem; }
}

/* Mobile (<=560px) deliberate composition, not shrunk desktop */
@media (max-width: 560px){
  /* Hero: give the title room, pin CTA above the UI bar */
  .hero { min-height: 560px; }
  .hero__content { padding-bottom: 8.5rem; }
  .hero__line { font-size: var(--step-0); }
  /* Masthead sits closer under the header on small screens */
  .page-top { padding-top: calc(var(--header-h) + 2rem); }
  /* Case-study hero: shorter, tighter */
  .cs-hero { min-height: 68svh; }
  /* Wizard options stack full width, larger touch targets */
  .opt { padding: 1.15rem 1.2rem; }
  /* Section rhythm: slightly tighter so mobile doesn't feel sparse */
  .section, .p-section { padding-block: clamp(3rem, 12vw, 4.5rem); }
  /* Manifesto and CTA scale down gracefully */
  .manifesto { padding-block: clamp(3.5rem, 14vw, 6rem); }
}

/* Very small (<=360px): final safety on gutters + counters */
@media (max-width: 360px){
  :root { --gutter: 1.1rem; }
  .hero__count, .masthead__count { font-size: 0.72rem; }
}

/* Logo/identity project media must NOT be blindly cover-cropped.
   Projects can opt into "contain" presentation via data (mediaMode: 'contain'),
   which the templates apply as .is-contain. */
.entry__media.is-contain img,
.archive__media.is-contain img,
.cs-figure.is-contain img { object-fit: contain; background: var(--bg-2); }

/* Focus-visible consistency on interactive cards/rows */
.opt:focus-visible, .filter:focus-visible, .cap:focus-visible,
.svc-row:focus-visible, .entry__link:focus-visible, .archive__link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}