:root {
  --paper: #f8f7f3;
  --ink: #191a18;
  --muted: #60605a;
  --rule: #d8d6cf;
  --hot: #f3532c;
  --burnt: #ad361c;
  --gutter: clamp(28px, 5.6vw, 100px);
  --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:78px}
body {margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
p,h1,h2,h3,figure {margin:0}
a {color:inherit;text-decoration:none}
button {font:inherit;color:inherit}
button,a {-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible {outline:3px solid #186d9c;outline-offset:4px}
.hero a:focus-visible,footer a:focus-visible {outline-color:#ffc362}
[hidden] {display:none!important}
::selection {background:#ffd9bc;color:#1c1916}
.wrap {width:min(100% - var(--gutter) * 2, 1560px);margin-inline:auto}
.symbols {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.icon {width:18px;height:18px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.skip {position:fixed;top:6px;left:10px;padding:12px 18px;z-index:10;background:var(--paper);transform:translateY(-150%)}
.skip:focus {transform:none}
.masthead {position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav-wrap {height:75px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.identity {display:inline-flex;gap:11px;align-items:center;min-height:44px}
.identity img {width:73px;height:auto;flex-shrink:0}
.identity span {display:grid;gap:4px}
.identity strong {font-size:23px;font-weight:800;letter-spacing:.08em;line-height:1}
.identity small {font:700 8px/1 var(--mono);letter-spacing:.105em}
nav {display:flex;align-items:center;gap:36px}
nav a,.explore {display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;font-weight:550}
.nav-link {gap:8px;color:#51534e}
.nav-link::before {content:"";width:5px;height:5px;border-radius:50%;background:transparent}
.nav-link.current {color:var(--ink);font-weight:650}
.nav-link.current::before {background:var(--hot)}
.nav-link:hover {color:var(--burnt)}
.contact-link {gap:20px;background:var(--ink);color:#fff;padding:0 18px;border-radius:2px;transition:background .18s}
.contact-link:hover {background:#393a36}
.contact-link .icon {width:14px;height:14px}
.hero {position:relative;isolation:isolate;overflow:hidden;background:#142222;color:#fffaf2}
.hero-photo,.hero-wash {position:absolute;inset:0;width:100%;height:100%;z-index:-2;object-fit:cover;object-position:55% 53%}
.hero-wash {z-index:-1;background:linear-gradient(90deg,rgba(3,13,15,.75),rgba(3,13,15,.35) 37%,transparent 64%),linear-gradient(0deg,rgba(3,8,8,.55),transparent 17%)}
.hero-wrap {min-height:clamp(480px,40vw,650px);position:relative;display:flex;align-items:center;padding:53px 0 77px}
.hero-copy {position:relative}
.eyebrow,.catalog-count,.num,.frame-id,.film-edge,.legal .domain {font-family:var(--mono)}
.eyebrow {display:flex;gap:11px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.15em;line-height:1.5}
.eyebrow i {width:24px;height:3px;display:block;background:var(--hot);flex:none}
.hero-kicker span {color:#b6b7ad;margin-inline:1px}
.hero h1 {margin-top:24px;font-size:clamp(70px,6.85vw,116px);font-weight:750;line-height:1.08;letter-spacing:-.05em}
.hero-english {font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(56px,5.45vw,96px);line-height:1.03;letter-spacing:-.064em;margin:2px 0 0 -2px}
.hero-english span {color:var(--hot)}
.company-name {font-size:clamp(14px,1.13vw,18px);margin:21px 0 25px;color:#e3e4dc;line-height:1.65;letter-spacing:.065em}
.explore {background:var(--paper);color:var(--ink);padding:0 18px;gap:26px;min-height:44px;border:1px solid var(--paper);border-radius:2px;transition:background .18s}
.explore:hover {background:#e6dbcc}
.explore .icon {width:16px;height:16px}
.film-edge {position:absolute;left:0;right:0;bottom:23px;display:flex;align-items:center;gap:15px;line-height:1;font-size:9px;font-weight:500;letter-spacing:.105em;color:#e3e4db}
.film-edge span {display:flex;align-items:center;white-space:pre}
.film-edge b {height:7px;width:7px;background:var(--hot);margin-right:8px}
.film-rule {flex:1;height:1px;background:rgba(255,255,255,.34)}
.services {padding-block:clamp(48px,4vw,75px) clamp(58px,5.2vw,90px)}
.section-title {display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:29px;gap:12px}
.section-kicker {color:var(--burnt);font-size:10px;letter-spacing:.16em}
.section-kicker i {width:20px;height:2px}
.section-title h2 {font-size:clamp(36px,3.15vw,56px);font-weight:730;line-height:1.2;letter-spacing:-.045em;margin-top:12px}
.section-title em {display:inline-block;font:italic 400 .84em/1 var(--serif);letter-spacing:-.065em;color:#686a60;margin-left:.2em}
.catalog-count {font-size:10px;letter-spacing:.1em;display:inline-flex;align-items:center;gap:11px;margin-bottom:6px}
.catalog-count b {width:24px;height:9px;background:repeating-linear-gradient(90deg,#53564e 0 1px,transparent 1px 5px)}
.catalog {display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);column-gap:clamp(30px,4.2vw,75px);grid-template-rows:repeat(5,minmax(72px,auto))}
.service {display:contents}
.service h3 {grid-column:2;grid-row:var(--row);display:flex;font-size:inherit;margin:0;min-width:0}
.service button {cursor:pointer;background:transparent;border:0;border-top:1px solid var(--rule);width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:8px;align-items:center;text-align:left;padding:15px 0;min-height:73px}
.service:last-child button {border-bottom:1px solid var(--rule)}
.num {font-size:11px;align-self:center;font-weight:500;color:var(--muted)}
.service-name {font-size:clamp(18px,1.7vw,29px);font-weight:650;line-height:1.24;letter-spacing:-.02em}
.service-name small {display:block;margin-top:5px;font:400 11px/1.25 var(--mono);color:var(--muted);letter-spacing:.01em}
.service .long-name {font-size:clamp(16px,1.4vw,24px)}
.service-arrow {display:grid;place-items:center;width:28px;height:28px;border-radius:50%;justify-self:end;color:#575a50}
.service-arrow .icon {width:15px;height:15px;transform:rotate(-45deg)}
.service.selected button {border-top-color:var(--hot)}
.service.selected .num,.service.selected .service-name {color:var(--burnt)}
.service.selected .service-arrow {background:var(--hot);color:#171815}
.service.selected .service-arrow .icon {transform:none}
.service button:hover .service-name {color:var(--burnt)}
.service button:hover .service-arrow {background:#e4e1d7;color:var(--ink)}
.service figure {grid-column:1;grid-row:1 / span 5;position:relative;display:flex;flex-direction:column;background:#ebeae3;overflow:hidden;min-width:0}
.still {position:relative;min-height:200px;flex:1;overflow:hidden;background:#1b252a}
.still > img {position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 52%}
.still.gear > img {object-position:83% center}
.frame-id {position:absolute;left:15px;top:14px;background:#141715bd;color:white;font-size:10px;font-weight:550;letter-spacing:.09em;padding:6px 9px;border:1px solid #ffffff4d;border-radius:1px;z-index:1}
.corners {position:absolute;right:15px;bottom:15px;width:13px;height:13px;border-right:1px solid #fff9;border-bottom:1px solid #fff9;pointer-events:none}
figcaption {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;padding:16px 19px 18px}
figcaption>span {font-size:16px;line-height:1.5;font-weight:650}
figcaption>p {grid-column:1 / -1;grid-row:2;font-size:13px;color:#4e5049;line-height:1.75;margin-top:4px}
figcaption>small {font-size:10px;color:#606159;letter-spacing:.06em}
.platform {display:grid;place-items:center;background-color:#273337;background-image:radial-gradient(ellipse at 85% 80%,#4d635c,transparent 62%),repeating-linear-gradient(90deg,transparent 0 26px,#ffffff08 26px 27px)}
.album {width:69%;max-width:440px;background:#f9f7f0;padding:3.1%;transform:rotate(-3deg);border:1px solid #e7e9df;box-shadow:9px 10px 0 -1px #d6d6cb,10px 11px 0 #404946,19px 21px 0 -1px #828f83}
.album-top,.album-bottom {display:flex;align-items:center;justify-content:space-between}
.album-top {font-size:clamp(10px,1vw,16px);margin-bottom:4%}
.album-top strong span {color:var(--burnt);padding:0 .3em}
.album-top b,.album-bottom span {font:600 8px var(--mono);letter-spacing:.08em}
.album-grid {display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;aspect-ratio:2.55}
.album-grid img {width:100%;height:100%;object-fit:cover;min-height:0}
.album-grid img:first-child {grid-row:span 2}
.album-bottom {margin-top:3%;font-size:10px}
footer {background:#1d201d;color:var(--paper)}
.contact-row,.legal,.legal>div {display:flex;justify-content:space-between;align-items:center;gap:18px}
.contact-row {padding:39px 0}
footer .eyebrow {font-size:10px;color:#d2d3c9;gap:8px}
footer .eyebrow i {width:18px;height:2px}
.contact-row h2 {margin-top:9px;font-size:28px;letter-spacing:-.035em}
.email-block {display:grid;gap:4px;justify-items:start}
.email-block>span {font-size:12px;color:#c4c6ba}
.email-block a {display:inline-flex;align-items:center;gap:21px;min-height:44px;font-size:clamp(23px,2.2vw,40px);letter-spacing:-.04em}
.email-block a:hover,.legal a:hover {text-decoration:underline;text-underline-offset:5px}
.email-block .icon {color:var(--hot);width:22px;height:22px}
.legal {border-top:1px solid #424640;min-height:61px;padding:11px 0;color:#c4c6bc;font-size:12px}
.legal>div {gap:25px}
.legal a {display:inline-flex;align-items:center;min-height:44px}
@media (min-width:1700px) { .hero-wrap {min-height:650px} }
@media (max-width:1000px) {
  :root {--gutter:4.5vw}
  .catalog {gap:0 24px;grid-template-columns:minmax(0,.97fr) minmax(0,1fr)}
  .service button {grid-template-columns:24px minmax(0,1fr) 26px}
}
@media (max-width:740px) {
  :root {--gutter:clamp(18px,5.4vw,35px)}
  html {scroll-padding-top:66px}
  .nav-wrap {height:62px;gap:8px}
  nav {gap:13px}
  .nav-link {gap:0;font-size:12px}
  .nav-link::before,.nav-link:first-child {display:none}
  .identity {gap:7px}
  .identity img {width:clamp(44px,13.5vw,57px);height:auto}
  .identity strong {font-size:19px}
  .identity small {font-size:6.8px;letter-spacing:.09em}
  .contact-link {min-height:44px;padding:0 11px;gap:7px;font-size:12px}
  .contact-link .icon {width:12px;height:12px}
  .hero-wrap {min-height:clamp(478px,122vw,555px);align-items:flex-end;padding:0 0 55px}
  .hero-photo {object-position:67% 50%}
  .hero-wash {background:linear-gradient(0deg,#071010f0,rgba(6,14,14,.78) 25%,rgba(4,13,13,.22) 65%,rgba(4,13,13,.03)),linear-gradient(90deg,rgba(6,17,18,.19),transparent 80%)}
  .hero-kicker {font-size:9px;gap:8px}
  .hero-kicker i {width:18px;height:2px}
  .hero h1 {font-size:clamp(53px,12.9vw,72px);margin-top:13px;letter-spacing:-.05em}
  .hero-english {font-size:clamp(44px,10.7vw,65px);margin-top:0}
  .company-name {font-size:13px;letter-spacing:.02em;margin:14px 0 18px}
  .explore {min-height:44px;font-size:12px;padding:0 13px;gap:19px}
  .film-edge {bottom:15px;gap:8px;font-size:7px;letter-spacing:.04em}
  .film-edge b {width:5px;height:5px;margin-right:5px}
  .services {padding:36px 0 45px}
  .section-title {margin-bottom:20px}
  .section-title h2 {font-size:34px;margin-top:9px}
  .section-kicker {font-size:9px}
  .catalog-count {font-size:9px;gap:7px;margin-bottom:4px}
  .catalog-count b {width:16px}
  .catalog,.service,.service h3 {display:block}
  .service button {min-height:70px;grid-template-columns:23px minmax(0,1fr) 26px;gap:8px;padding:13px 1px}
  .service-name {font-size:20px}
  .service .long-name {font-size:clamp(15px,4.3vw,21px)}
  .service-name small {font-size:10px}
  .service figure {margin-bottom:14px}
  .still {min-height:0;flex:auto;aspect-ratio:1.88}
  .frame-id {top:10px;left:10px;font-size:8px}
  figcaption {padding:12px 13px 14px}
  figcaption>span {font-size:14px}
  figcaption>p {font-size:13px}
  .contact-row {display:grid;gap:23px;padding:30px 0 23px}
  .contact-row h2 {font-size:24px;margin-top:7px}
  .email-block {gap:0}
  .email-block a {font-size:clamp(19px,5.7vw,28px);gap:10px}
  .email-block .icon {width:17px;height:17px}
  .legal {display:block;padding:14px 0 12px;font-size:11px}
  .legal>div {justify-content:flex-start;gap:16px}
}
@media (prefers-reduced-motion:reduce) { html {scroll-behavior:auto} *,*::before,*::after {transition:none!important} }