:root{--ink:#172b31;--muted:#66767a;--line:#dbe2e0;--accent:#176b69;--wash:#f2f6f5;--pad:clamp(24px,5vw,76px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:16px;line-height:1.8;letter-spacing:.02em}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.site-header{height:82px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:2}.brand{font:700 13px/1 Arial,sans-serif;letter-spacing:.16em}.site-header nav{display:flex;gap:clamp(18px,3vw,44px);font:600 12px/1 Arial,sans-serif;letter-spacing:.12em}.site-header nav a:hover{color:var(--accent)}.hero{min-height:calc(100svh - 82px);padding:clamp(80px,12vh,140px) var(--pad) 32px;display:flex;flex-direction:column;background:linear-gradient(120deg,#fff 55%,var(--wash));position:relative}.eyebrow,.section-no{margin:0 0 28px;font:700 11px/1.2 Arial,sans-serif;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}.hero h1{font-size:clamp(38px,6.3vw,92px);line-height:1.25;letter-spacing:-.055em;margin:0;max-width:1100px;font-weight:600}.hero-copy{font-size:clamp(15px,1.4vw,18px);max-width:650px;margin:42px 0 32px;color:#43565b}.button{display:inline-flex;width:max-content;align-items:center;gap:56px;border-bottom:1px solid var(--ink);padding:10px 0;font-weight:700}.button span{font-size:22px}.hero-meta{margin-top:auto;display:flex;gap:32px;padding-top:72px;font:600 10px/1 Arial,sans-serif;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.section{padding:clamp(90px,13vw,180px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:8vw}.section h2,.section-heading h2,.contact h2{font-size:clamp(34px,4.6vw,68px);line-height:1.35;letter-spacing:-.04em;margin:0;font-weight:600}.body-copy{max-width:560px;font-size:18px}.body-copy p{margin:0 0 28px}.strength-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 var(--pad)}.strength-grid article{padding:50px 6%;border-right:1px solid var(--line)}.strength-grid article:last-child{border:0}.strength-grid strong{font:500 clamp(26px,3vw,46px)/1 Arial,sans-serif;letter-spacing:-.03em}.strength-grid p{margin:18px 0 0;color:var(--muted)}.services{align-items:start}.services ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.services li{display:flex;align-items:center;gap:28px;padding:18px 0;border-bottom:1px solid var(--line);font-size:20px}.services li span{font:500 10px Arial,sans-serif;color:var(--accent)}.section-block{padding:clamp(90px,12vw,160px) var(--pad)}.works{background:var(--ink);color:#fff}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:70px}.section-heading>p{max-width:400px;color:var(--muted);margin:0}.works .section-heading>p{color:#b7c2c4}.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:72px 28px}.work-visual{aspect-ratio:16/10;background:#263c42;display:grid;place-items:center;color:#829297;font:600 11px Arial,sans-serif;letter-spacing:.15em;overflow:hidden}.work-visual img{width:100%;height:100%;object-fit:cover}.work-type{font:600 10px Arial,sans-serif;letter-spacing:.14em;color:#8eb8b6;margin:22px 0 8px}.work-card h3{font-size:28px;margin:0}.work-card>p:last-child{color:#b7c2c4}.empty-state{min-height:440px;border:1px solid #405158;padding:clamp(32px,6vw,80px);display:flex;flex-direction:column;justify-content:end;background:linear-gradient(135deg,#1b3339,#13262b)}.empty-state h3{font-size:clamp(28px,4vw,54px);line-height:1.45;margin:0 0 24px;font-weight:500}.empty-state>p:last-child{max-width:600px;color:#afbec0}.pending-note{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0;color:var(--muted)}.process{background:var(--wash)}.process ol{list-style:none;padding:0;margin:0;border-top:1px solid #ccd6d4}.process li{display:grid;grid-template-columns:80px 1fr;padding:26px 0;border-bottom:1px solid #ccd6d4}.process li span{font:600 11px Arial,sans-serif;color:var(--accent)}.process li strong{font-size:20px}.contact{padding:clamp(100px,15vw,220px) var(--pad);text-align:center;background:#e3eeec}.contact .section-no{margin-bottom:38px}.contact p{color:var(--muted);margin:32px auto;max-width:560px}.contact-pending{display:inline-block;border:1px solid #aebfbc;padding:14px 22px;font:700 10px Arial,sans-serif;letter-spacing:.14em}footer{padding:30px var(--pad);display:flex;justify-content:space-between;font:600 10px Arial,sans-serif;letter-spacing:.12em}@media(max-width:760px){.site-header{height:68px}.site-header nav a:not(:last-child){display:none}.hero{min-height:calc(100svh - 68px);padding-top:72px}.hero h1{font-size:clamp(38px,11.3vw,58px)}.hero-copy{margin-top:32px}.hero-meta{gap:12px;flex-wrap:wrap}.section{grid-template-columns:1fr;gap:36px}.strength-grid{grid-template-columns:1fr}.strength-grid article{border-right:0;border-bottom:1px solid var(--line);padding:34px 0}.section-heading{display:block;margin-bottom:44px}.section-heading>p{margin-top:22px}.work-grid{grid-template-columns:1fr}.empty-state{min-height:360px}.process li{grid-template-columns:52px 1fr}footer{flex-wrap:wrap;gap:16px}}@media print{body{font-size:10pt;color:#111}.site-header{position:static;height:50px}.site-header nav,.button{display:none}.hero{min-height:auto;padding-top:60px;page-break-after:always;background:#fff}.hero h1{font-size:44pt}.section,.section-block,.contact{padding:48px 36px}.section h2,.section-heading h2,.contact h2{font-size:28pt}.strength-grid{margin:0 36px}.works{background:#fff;color:#111}.works .section-heading>p,.empty-state>p:last-child{color:#555}.empty-state{background:#fff;color:#111;min-height:260px}.process{background:#fff}.section-block{break-before:page}.contact{background:#fff}footer{padding:20px 36px}}


.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.work-tags span {
  border: 1px solid #52646a;
  border-radius: 99px;
  padding: 5px 10px;
  font-size: 10px;
  color: #c7d1d3;
}
.work-visual {
  padding: clamp(12px, 1.8vw, 24px);
  background: #e8eeec;
  border: 1px solid rgba(255, 255, 255, .12);
}
.work-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid #d9dfdd;
  box-shadow: 0 12px 28px rgba(8, 25, 30, .16);
}
.work-visual.legacy-clean,
.case-image:has(img[src*="/legacy-portfolio/"]) {
  aspect-ratio: auto;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
}
.work-visual.legacy-clean img,
.case-image:has(img[src*="/legacy-portfolio/"]) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 676 / 390;
  object-fit: cover;
  object-position: center bottom;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.macbook-stage {
  display: grid;
  place-items: center;
  padding: clamp(24px, 3.6vw, 50px) clamp(24px, 4.5vw, 60px);
  background: #fff;
}
.macbook {
  position: relative;
  width: 90%;
}
.macbook-display {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #050607;
  border: clamp(7px, .85vw, 11px) solid #111314;
  border-bottom-width: clamp(8px, .85vw, 12px);
  border-radius: clamp(11px, 1.15vw, 16px) clamp(11px, 1.15vw, 16px) 5px 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.macbook-display img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border: 0;
  box-shadow: none;
}
.macbook-camera {
  position: absolute;
  z-index: 2;
  top: calc(clamp(7px, .85vw, 11px) * -.72);
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #415264, #07090b 72%);
  transform: translateX(-50%);
}
.macbook-hinge {
  position: relative;
  z-index: 2;
  width: 72%;
  height: 3px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, #292d2f 10%, #74797b 50%, #292d2f 90%, transparent);
}
.macbook-base {
  position: relative;
  left: -6%;
  width: 112%;
  height: clamp(8px, .7vw, 11px);
  margin-top: 0;
  background: linear-gradient(180deg, #fafafa 0, #dfe2e3 25%, #b8bdbe 66%, #747a7c 100%);
  border-radius: 1px 1px 8px 8px / 1px 1px 6px 6px;
  clip-path: polygon(0 0, 100% 0, 99.15% 70%, 97.7% 100%, 2.3% 100%, .85% 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(45,50,52,.52);
}
.macbook-base span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: rgba(83,88,90,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.58);
  transform: translateX(-50%);
}
.case-list { display: grid; gap: 110px; }
.case {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.case-image {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e8eeec;
  border: 1px solid var(--line);
  padding: clamp(14px, 2.4vw, 34px);
}
.case-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid #d9dfdd;
  box-shadow: 0 14px 32px rgba(8, 25, 30, .12);
}
.case-copy h3 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.35; margin: 0 0 18px; }
.case-summary { font-size: 18px; color: #43565b; }
.case dl { margin: 32px 0; }
.case dl div { display: grid; grid-template-columns: 70px 1fr; border-top: 1px solid var(--line); padding: 15px 0; }
.case dl div:last-child { border-bottom: 1px solid var(--line); }
.case dl div:last-child,
.case-copy .text-link { display: none; }
.case dt { font-size: 12px; font-weight: 700; color: var(--accent); }
.case dd { margin: 0; }
.text-link { display: inline-block; border-bottom: 1px solid var(--ink); padding: 6px 0; font-weight: 700; }
.confidentiality { font-size: 11px; color: var(--muted); margin-top: 22px; }
@media (max-width: 760px) {
  .case { grid-template-columns: 1fr; gap: 24px; }
  .case-list { gap: 80px; }
  .case dl div { grid-template-columns: 58px 1fr; }
  .macbook-stage { padding: 22px 18px 28px; }
  .macbook { width: 94%; }
}
@media print {
  .case { grid-template-columns: 1fr 1fr; gap: 24px; break-inside: avoid; }
  .work-tags { display: none; }
  .work-visual img, .case-image img { box-shadow: none; }
}

/* KINDORA-inspired editorial direction */
@media (min-width: 761px) {
  body { padding-left: 84px; }
  .site-header {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    width: 84px;
    height: 100vh;
    padding: 24px 0;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 0;
    border-right: 1px solid #e5e5e1;
  }
  .brand { writing-mode: vertical-rl; font-size: 10px; letter-spacing: .18em; font-weight: 500; }
  .site-header nav { flex-direction: column; gap: 18px; align-items: center; }
  .site-header nav a { writing-mode: vertical-rl; font-size: 9px; letter-spacing: .14em; color: #727573; }
}

.hero {
  min-height: 0;
  padding: 0;
  display: block;
  background: #fff;
}
.hero-content { min-height: 72svh; padding: clamp(90px, 10vw, 150px) clamp(42px, 8vw, 120px) 42px clamp(32px, 4vw, 64px); display: flex; flex-direction: column; }
.hero .eyebrow { color: #8b8e8b; font-weight: 500; }
.hero h1 { margin: 0; font: 400 clamp(54px, 6.5vw, 104px)/.98 Arial, sans-serif; letter-spacing: -.045em; color: #4c4f4d; white-space: nowrap; }
.hero h2 { margin: 34px 0 0; font-size: clamp(19px, 2vw, 28px); letter-spacing: .05em; color: #4f5350; }
.hero-copy { max-width: none; margin: 34px 0 28px; color: #8a8e8b; font-size: 15px; line-height: 2.1; word-break: normal; overflow-wrap: normal; }
.button { min-width: 226px; justify-content: space-between; padding: 14px 18px 14px 24px; border: 1px solid #cfd1ce; border-radius: 999px; color: #555957; font-size: 13px; font-weight: 600; }
.button span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #34484d; color: #fff; font-size: 14px; }
.hero-meta { margin-top: auto; color: #929592; }
.hero-visual { position: relative; min-height: 0; margin: 0; overflow: hidden; background: #fff; }
.hero-visual img { width: 100%; height: auto; object-fit: contain; }
.hero-visual figcaption { position: absolute; right: 24px; bottom: 28px; writing-mode: vertical-rl; color: #fff; font: 500 10px Arial,sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.section, .section-block { padding-top: clamp(110px, 13vw, 190px); padding-bottom: clamp(110px, 13vw, 190px); }
.section-no, .eyebrow { color: #78847f; font-weight: 500; }
.section h2, .section-heading h2, .contact h2 { color: #4b504d; font-weight: 500; letter-spacing: -.025em; }
.intro { background: #f5f5f1; }
.body-copy { color: #747976; line-height: 2.1; }
.profile-detail + .profile-detail { margin-top: 34px; }
.profile-detail h3 {
  margin: 0 0 10px;
  color: #4a4f4c;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .12em;
  font-weight: 700;
}
.profile-detail p { margin-bottom: 0; }
.strength-grid { margin: 0; padding: 0 var(--pad); border-color: #e2e3df; background: #f5f5f1; }
.strength-grid article { border-color: #dedfdb; }
.strength-grid strong { color: #59605c; font-weight: 400; }
.services { background: #fff; }
.services li { color: #5b615d; border-color: #dedfdb; }

.works { background: #f1f1ed; color: #4b504d; }
.works .section-heading>p, .work-card>p { color: #858a87; }
.work-grid { width: 100%; max-width: 1280px; margin-inline: auto; gap: clamp(80px, 9vw, 140px) clamp(28px, 4vw, 64px); }
.work-card:nth-child(even) { margin-top: clamp(60px, 8vw, 130px); }
.work-card h3 { color: #454b47; font-size: clamp(22px, 2.1vw, 32px); font-weight: 500; }
.work-type { color: #75847e; font-weight: 500; }
.work-tags span { border-color: #c9ccc8; color: #737a76; background: rgba(255,255,255,.45); }
.work-visual { background: #fff; border-color: #e1e2de; }
.work-visual.legacy-clean { max-width: 676px; margin-inline: auto; }

.cases { background: #fff; }
.case { align-items: center; }
.case-image:has(img[src*="/legacy-portfolio/"]) { width: 100%; max-width: 676px; justify-self: center; }
.case:nth-child(even) .case-image { order: 2; }
.case-copy h3 { color: #4a4f4c; font-weight: 500; }
.case-summary, .case dd { color: #747a76; }
.process { background: #34484d; color: #fff; }
.process .section-heading h2, .process .section-no { color: #fff; }
.process .section-heading>p { color: #c3cecb; }
.process ol, .process li { border-color: rgba(255,255,255,.2); }
.process li { align-items: baseline; }
.process li span {
  color: #b8c9c3;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .08em;
}
.process li strong { font-weight: 500; line-height: 1.4; }
.contact { background: #ecece7; color: #4b504d; }
.contact-pending { border-color: #bfc3bf; border-radius: 999px; }
.contact-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 48px; min-width: min(100%, 310px); padding: 14px 16px 14px 24px; border: 1px solid #bfc3bf; border-radius: 999px; font-size: 13px; font-weight: 600; }
.contact-link span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #34484d; color: #fff; }
.contact-link:hover { background: #fff; }
.contact-form { width: min(100%, 720px); margin: 56px auto 26px; display: grid; gap: 26px; text-align: left; }
.contact-form label { display: grid; gap: 9px; }
.contact-form label > span { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid #bfc3bf; border-radius: 0; padding: 14px 4px; background: transparent; color: #3f4541; font: inherit; outline: none; }
.contact-form textarea { border: 1px solid #bfc3bf; padding: 14px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #34484d; box-shadow: 0 1px 0 #34484d; }
.contact-form button { justify-self: center; display: inline-flex; align-items: center; justify-content: space-between; gap: 48px; min-width: min(100%, 280px); margin-top: 10px; padding: 14px 16px 14px 24px; border: 1px solid #34484d; border-radius: 999px; background: #34484d; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.contact-form button span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #34484d; }
.contact-form button:hover { background: #24383d; }

/* Primary actions */
.button,
.contact-form button {
  border-color: #343638;
  background: #343638;
  color: #fff;
  box-shadow: 0 8px 20px rgba(28, 30, 31, 0.14);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.button:hover,
.contact-form button:hover {
  border-color: #202224;
  background: #202224;
  color: #fff;
  box-shadow: 0 10px 24px rgba(28, 30, 31, 0.2);
  transform: translateY(-1px);
}

.button span,
.contact-form button span {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0;
  line-height: 1;
}

.button span::before,
.contact-form button span::before {
  content: "›";
  display: block;
  font: 400 24px/1 Arial, sans-serif;
  transform: translateY(-1px);
}

/* Compact button sizing */
.button {
  min-width: 150px;
  padding: 8px 10px 8px 15px;
  font-size: 11px;
}

.contact-form button {
  min-width: min(100%, 216px);
  gap: 24px;
  margin-top: 7px;
  padding: 10px 12px 10px 18px;
  font-size: 13px;
}

.button span,
.contact-form button span {
  width: 22px;
  height: 22px;
}

.button span::before,
.contact-form button span::before {
  font-size: 18px;
}

.contact-form button span {
  width: 26px;
  height: 26px;
}

.contact-form button span::before {
  font-size: 21px;
}
footer { color: #727773; border-top: 1px solid #e1e2de; }

@media (max-width: 760px) {
  .hero { min-height: auto; }
  .hero-content { min-height: 78svh; padding: 72px 24px 28px; }
  .hero h1 { font-size: clamp(30px, 8.2vw, 38px); white-space: nowrap; }
  .hero h2 { font-size: 18px; }
  .hero-visual { min-height: 0; }
  .work-card:nth-child(even) { margin-top: 0; }
  .case:nth-child(even) .case-image { order: initial; }
}



.form-status,.form-privacy-note{margin:14px 0 0;font-size:13px;line-height:1.7}.form-status.is-success{color:#176b69}.form-status.is-error{color:#8c3d3d}.form-privacy-note a,footer a{text-decoration:underline;text-underline-offset:3px}