/* ============================================================
   Uchida Systems — static marketing page (Stage 1, no motion)
   Hand-written CSS. Mobile-first. Matte base + gloss on CTAs only.
   ============================================================ */

:root {
  /* palette */
  --coffee:    #1F150C;
  --brown:     #412D15;
  --black:     #0B0805;
  --beige:     #E1DCC9;
  --beige-dim: rgba(225, 220, 201, .55);
  --faint:     rgba(225, 220, 201, .12);
  --amber:     #C98A4B;
  /* systems-graphic flat-icon palette */
  --maroon:    #5F1919;
  --clay:      #BC8E70;
  --cream:     #EFE7DB;

  /* type */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body:    "Instrument Sans", system-ui, sans-serif;

  /* rhythm */
  --gutter:  clamp(1.5rem, 6vw, 4rem);
  --section: clamp(4.75rem, 13vw, 9.5rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--coffee);
  scroll-behavior: auto;
}

body {
  background: var(--coffee);
  color: var(--beige);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

::selection { background: var(--amber); color: var(--coffee); }

/* ---------- film-grain matte overlay ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---------- layout primitives ---------- */
.container {
  width: 100%;
  max-width: 66rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: calc(50rem + var(--gutter) * 2); }

.section { padding-block: var(--section); position: relative; }

.section--coffee { background: var(--coffee); }
.section--brown  { background: var(--brown); }

/* hairline only where two same-ground sections meet */
.section--rule { border-top: 1px solid var(--faint); }

/* ---------- eyebrow ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--beige-dim);
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: clamp(1.4rem, 3.5vw, 2.1rem);
}
/* neutral tick for section eyebrows */
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--faint);
  flex: 0 0 auto;
}
/* the single amber focal moment — hero only */
.eyebrow--accent {
  color: var(--beige);
}
.eyebrow--accent::before {
  width: .5rem;
  height: .5rem;
  background: var(--amber);
}

/* ---------- headings ---------- */
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8.4vw, 4.85rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 16ch;
}
.h1 span { display: block; }
.h1 .dim { color: var(--beige-dim); }

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  max-width: 19ch;
  text-wrap: balance;
}

/* ---------- body copy ---------- */
.body {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
  line-height: 1.7;
  max-width: 47ch;
  color: var(--beige);
  margin-top: clamp(1.25rem, 3vw, 1.8rem);
  text-wrap: pretty;
}
.lead {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.35rem);
  line-height: 1.6;
  max-width: 42ch;
}

/* ---------- hero ---------- */
.hero {
  min-height: min(92svh, 58rem);
  display: flex;
  align-items: center;
  padding-top: clamp(6rem, 16vh, 10rem);
}

/* ---------- CTA button (the only gloss on the page) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .005em;
  color: var(--coffee);
  /* lacquered sheen: faint top-down light catch over flat amber */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 52%),
    var(--amber);
  padding: .95rem 1.65rem;
  border-radius: 100px;
  margin-top: clamp(2rem, 4.5vw, 2.85rem);
  transition: background-color .2s ease, filter .2s ease;
}
.btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 52%),
    var(--amber);
  filter: brightness(1.04);
}
.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* ---------- recent work ---------- */
.work-intro { color: var(--beige-dim); max-width: 44ch; }

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.tile { display: block; }

.tile__media {
  position: relative;
  aspect-ratio: 700 / 1350;
  background: var(--brown);
  border: 1px solid var(--faint);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.tile:hover .tile__media { border-color: var(--beige-dim); }
.tile:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 12px; }

.tile__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* labeled placeholder shown only if media fails to load */
.tile__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  text-align: center;
  color: var(--beige-dim);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* "Concept" stays visible over the video */
.tile__badge {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--beige);
  background: rgba(11, 8, 5, .58);
  border: 1px solid var(--faint);
  padding: .34rem .62rem;
  border-radius: 100px;
}

.tile__caption {
  margin-top: 1rem;
  color: var(--beige-dim);
  font-size: .95rem;
  line-height: 1.5;
  max-width: 36ch;
}

/* ---------- how I work ---------- */
.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 2.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
.how-item__num {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--beige-dim);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--faint);
}
.how-item p {
  color: var(--beige);
  font-size: 1.0625rem;
  line-height: 1.62;
  max-width: 34ch;
}

/* ---------- footer ---------- */
.footer { background: var(--black); }
.footer .container { padding-block: clamp(3rem, 8vw, 4.5rem); }
.footer p {
  color: var(--beige-dim);
  font-size: .9rem;
  letter-spacing: .03em;
}

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 720px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 46rem;
  }
}

@media (min-width: 760px) {
  .how-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
  }
}

/* ============================================================
   Stage 2 — Motion
   ============================================================ */

/* Lenis smooth-scroll (recommended baseline) */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Anti-FOUC: pre-hide elements that animate in, ONLY when motion is allowed.
   GSAP fromTo() takes over and resolves each to its final, visible state.
   Headings are pre-hidden here too; motion.js then wraps them in masks and
   re-sets opacity:1 so the mask clip (not opacity) holds them out of view. */
html.anim-ready .hero .eyebrow,
html.anim-ready .hero .h1,
html.anim-ready .hero .lead,
html.anim-ready .hero .btn,
html.anim-ready .section .eyebrow,
html.anim-ready .section .h2,
html.anim-ready .section .body,
html.anim-ready .section .tile,
html.anim-ready .section .how-item,
html.anim-ready .section .btn {
  opacity: 0;
  will-change: transform, opacity;
}

/* Mask-reveal headlines: a line sits below its mask and wipes up into view.
   Wrappers are injected by motion.js (motion-only), so static / reduced-motion
   markup never clips. overflow is switched to visible once the wipe completes. */
.line-mask { display: block; overflow: hidden; }
.line-inner { display: block; }

/* Type-as-image: oversized section numbers as a quiet structural layer behind
   the copy. Faint, off-edge, never the thing you look at. */
.has-bgnum { position: relative; overflow: hidden; }
.has-bgnum > .container { position: relative; z-index: 1; }
.bg-number {
  position: absolute;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.8;
  font-size: clamp(11rem, 40vw, 34rem);
  color: var(--beige);
  opacity: 0.06;
  white-space: nowrap;
}
.bg-number--01 { top: 50%; right: -0.06em; transform: translateY(-50%); }
.bg-number--02 { top: 42%; left: -0.07em; transform: translateY(-50%); }
.bg-number--03 { bottom: 2%; right: -0.04em; }

/* The systems section — pinned while the four tool cards assemble into a 2×2
   grid inside the "one place" panel. Copy sits above the stage; the paragraph
   sits below and fades in once assembly resolves. */
.section--systems {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section--systems > .container { position: relative; z-index: 1; }

/* ---- locked tool-card design (palette, flat icons, layout approved) ---- */
.sys-stage{position:relative;width:340px;height:470px;margin:2rem auto 0;max-width:92vw}
.sys-frame{position:absolute;left:2px;top:92px;width:336px;height:280px;border:1px solid rgba(239,231,219,.28);border-radius:16px;background:rgba(239,231,219,.03);opacity:0}
.sys-frame .sys-label{position:absolute;left:50%;top:-13px;transform:translateX(-50%);background:var(--brown);padding:0 10px;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:13px;color:var(--amber);letter-spacing:.02em;white-space:nowrap;opacity:0}
.frag{position:absolute;width:150px;height:92px;background:var(--cream);border-radius:11px;padding:11px 12px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.frag .cap{position:absolute;left:12px;bottom:9px;font-size:11px;font-weight:500;color:var(--maroon)}
.frag .ico{position:absolute;right:11px;top:11px}
.frag .row{height:5px;border-radius:3px;background:rgba(95,25,25,.42);margin-top:6px}
#f1{left:14px;top:110px}#f2{left:176px;top:110px}#f3{left:14px;top:240px}#f4{left:176px;top:240px}
.dms{position:relative;width:36px;height:26px}
.dms .b1{position:absolute;left:0;top:1px;width:25px;height:16px;background:var(--clay);border-radius:7px 7px 7px 2px}
.dms .b2{position:absolute;right:0;top:9px;width:19px;height:13px;background:var(--maroon);border-radius:6px 6px 2px 6px}
.cal{width:30px}
.cal .hd{display:block;width:30px;height:6px;background:var(--maroon);border-radius:3px 3px 0 0}
.cal .grid{display:grid;grid-template-columns:repeat(4,6px);gap:2px;margin-top:2px}
.cal .grid i{width:6px;height:6px;border-radius:1px;background:rgba(95,25,25,.3)}
.cal .grid i.on{background:var(--amber)}
.boxes{position:relative;width:34px;height:30px}
.boxes .bx{position:absolute;width:15px;height:14px;background:var(--clay);border-radius:2px;border-top:2px solid var(--maroon)}
.boxes .top{left:9px;top:0}.boxes .l{left:1px;top:15px}.boxes .r{left:18px;top:15px}
.pay{position:relative;width:34px;height:23px;background:var(--maroon);border-radius:4px}
.pay .stripe{position:absolute;left:0;top:4px;width:34px;height:4px;background:rgba(0,0,0,.28)}
.pay .chip{position:absolute;left:4px;top:12px;width:8px;height:6px;background:var(--amber);border-radius:1.5px}
.pay .num{position:absolute;right:4px;bottom:4px;width:16px;height:2.5px;background:rgba(239,231,219,.55);border-radius:1.5px}

/* Responsive: scale the stage down on narrow phones (no horizontal overflow).
   transform-origin top + negative margin keeps the paragraph flush below. */
@media (max-width: 430px) {
  /* top-align so the heading + assembly are always framed; tighter top padding */
  .section--systems { justify-content: flex-start; padding-top: clamp(2rem, 7vh, 3.5rem); }
  .sys-stage { transform: scale(0.76); transform-origin: top center; margin-top: 1.25rem; margin-bottom: -113px; }
}
@media (max-width: 340px) {
  .sys-stage { transform: scale(0.66); transform-origin: top center; margin-bottom: -160px; }
}

/* Reduced motion: enriched static page — text fully visible, no transform or
   clipping; numbers stay faint; the cards shown already assembled in the 2×2
   grid with the frame + label visible (no scatter, no animation). */
@media (prefers-reduced-motion: reduce) {
  .eyebrow,
  .h1,
  .h1 span,
  .h2,
  .body,
  .tile,
  .how-item,
  .btn,
  .line-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .line-mask { overflow: visible !important; }
  .frag { transform: none !important; }
  .sys-frame, .sys-frame .sys-label { opacity: 1 !important; }
}