:root{
  --bg:#f7f6f3;
  --bg-soft:#f1efeb;
  --ink:#171717;
  --muted:#8f8a83;
  --line:#cbc6bd;
  --line-soft:#e1ddd6;
  --curve:#bdb6ab;
  --sans:"Noto Sans SC","Inter",sans-serif;
  --serif:"Playfair Display",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
#page{position:relative;background:linear-gradient(180deg,#faf9f7 0,#f7f6f3 34%,#f3f1ed 100%)}
.gridline{
  position:fixed;
  top:0;
  width:1px;
  height:100vh;
  background:rgba(23,23,23,.045);
  pointer-events:none;
  z-index:1;
}
.gridline-left{left:7vw}
.gridline-center{left:50vw;opacity:.35}
.header{
  height:68px;
  padding:0 2.8vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.header>*{pointer-events:auto}
.logo{
  font-family:"Inter",sans-serif;
  font-weight:500;
  font-size:17px;
  letter-spacing:.16em;
}
.header-nav{
  display:flex;
  gap:2vw;
  font-size:11px;
  letter-spacing:.08em;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:10px;
  letter-spacing:.16em;
}
.round-menu{
  width:36px;height:36px;
  border:1px solid rgba(23,23,23,.62);
  border-radius:50%;
  background:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
}
.round-menu i{width:12px;height:1px;background:#171717;display:block}

.section{
  position:relative;
  min-height:128vh;
  padding:17vh 7vw 15vh;
}
.soft-section{background:rgba(239,236,230,.42)}
.kicker{
  font-family:"Inter",sans-serif;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#77736d;
}
.main-curve-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:13;
  pointer-events:none;
}
.main-curve-track{
  fill:none;
  stroke:rgba(189,182,171,.045);
  stroke-width:1;
}
.main-curve-progress{
  fill:none;
  stroke:rgba(181,174,164,.56);
  stroke-width:1.05;
  stroke-linecap:round;
}
#curve-tip{
  position:absolute;
  width:4px;height:4px;
  background:#b1aaa0;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(177,170,160,.055);
  z-index:14;
  opacity:0;
  pointer-events:none;
}
.curve-anchor{
  position:absolute;
  width:2px;height:2px;
  pointer-events:none;
}
.aux{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:3;
}
.aux-line{
  fill:none;
  stroke:rgba(23,23,23,.13);
  stroke-width:1;
}
.aux-soft{stroke:rgba(23,23,23,.065)}
.geometry-dot{fill:#171717;opacity:0}

/* hero */
.hero{
  min-height:122vh;
  padding-top:13vh;
  overflow:hidden;
}
.aux-hero{left:4%;width:92%}
.anchor-hero{left:81%;top:14%}
.hero-grid{
  position:relative;
  z-index:20;
  display:grid;
  grid-template-columns:43% 57%;
  min-height:82vh;
  align-items:center;
}
.hero-copy{padding-left:1.5vw}
.hero-title{
  font-weight:200;
  font-size:clamp(54px,5.4vw,104px);
  line-height:1.18;
  letter-spacing:.02em;
  margin:4vh 0 5vh;
}
.hero-title span{display:block}
.hero-sub{
  max-width:450px;
  font-size:14px;
  line-height:1.85;
  color:#77736d;
}
.hero-visual{
  position:relative;
  min-height:82vh;
}
.image-panel{
  position:absolute;
  overflow:hidden;
  background:#eae7e1;
}
.image-panel img{
  width:100%;height:100%;
  object-fit:cover;
}
.image-panel-large{
  left:8%;
  top:0;
  width:58%;
  height:67vh;
}
.hero-side-copy{
  position:absolute;
  right:2%;
  top:7%;
  display:flex;
  flex-direction:column;
  gap:4px;
  font:500 9px/1.55 "Inter",sans-serif;
  letter-spacing:.22em;
  color:#7b7770;
}
.hero-stat{
  position:absolute;
  right:7.5vw;
  bottom:9vh;
  display:flex;
  gap:5px;
  align-items:flex-start;
  z-index:25;
}
.hero-stat strong{font:300 42px/1 "Inter",sans-serif}
.hero-stat span{font-size:10px;color:#918c84;margin-top:8px}

/* about */
.about{min-height:146vh}
.aux-about{left:0}
.anchor-about{left:86%;top:35%}
.about-title-block{
  position:relative;
  z-index:20;
  max-width:720px;
}
.about-title-block h2,
.mission-head h2,
.innovation-copy h2,
.quality-copy h2,
.story-copy h2,
.media-copy h2{
  font-weight:200;
  font-size:clamp(48px,4.6vw,88px);
  line-height:1.18;
  margin:2vh 0 0;
  letter-spacing:.025em;
}
.about-layout{
  position:relative;
  z-index:20;
  display:grid;
  grid-template-columns:40% 60%;
  gap:4vw;
  margin-top:14vh;
}
.about-text{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:3vh;
}
.about-text>p{
  max-width:380px;
  font-size:14px;
  line-height:1.9;
  color:#76716a;
}
.about-meta{
  display:flex;
  gap:3vw;
  margin-top:8vh;
}
.about-meta div{display:flex;flex-direction:column;gap:3px}
.about-meta strong{font-size:22px;font-weight:300}
.about-meta span{font-size:10px;color:#918c84}
.about-images{
  min-height:68vh;
  position:relative;
}
.image-panel-portrait{
  left:5%;
  top:0;
  width:43%;
  height:66vh;
}
.image-panel-square{
  right:7%;
  top:15vh;
  width:38%;
  height:44vh;
}

/* mission */
.mission{min-height:138vh}
.anchor-mission{left:78%;top:48%}
.mission-head{
  display:grid;
  grid-template-columns:1fr .62fr;
  gap:8vw;
  align-items:end;
}
.mission-copy{
  font-size:14px;
  line-height:1.9;
  color:#77726b;
  max-width:420px;
  margin:0;
}
.mission-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14vh;
}
.mission-card{
  margin:0;
  overflow:hidden;
  background:#ece9e3;
}
.mission-card img{
  width:100%;
  height:52vh;
  object-fit:cover;
}
.mission-card figcaption{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mission-card strong{font-size:13px;font-weight:400}
.mission-card span{font:500 9px/1 "Inter",sans-serif;letter-spacing:.2em;color:#99948c}

/* innovation */
.innovation{
  min-height:142vh;
  display:grid;
  grid-template-columns:38% 62%;
  gap:5vw;
  align-items:center;
}
.anchor-innovation{left:91%;top:54%}
.innovation-copy{position:relative;z-index:20}
.innovation-copy>p:not(.kicker){
  max-width:390px;
  font-size:14px;line-height:1.9;color:#77726b;
}
.innovation-copy a{
  display:inline-block;
  margin-top:3vh;
  font-size:11px;
  letter-spacing:.08em;
}
.innovation-art{
  position:relative;
  height:82vh;
  z-index:20;
}
.innovation-circles{
  position:absolute;
  left:0;top:0;
  width:74%;
  height:100%;
}
.innovation-photo{
  position:absolute;
  left:26%;top:9%;
  width:38%;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  margin:0;
}
.innovation-photo img{
  width:100%;height:100%;object-fit:cover;
}
.innovation-list{
  position:absolute;
  right:1%;
  top:22%;
  display:flex;
  flex-direction:column;
  gap:28px;
  width:27%;
}
.innovation-list span{
  padding-bottom:13px;
  border-bottom:1px solid rgba(23,23,23,.08);
  font-size:11px;
  color:#77736d;
}
.innovation-list b{
  display:inline-block;
  width:35px;
  font-weight:400;
}

/* quality */
.quality{
  min-height:136vh;
  display:grid;
  grid-template-columns:43% 57%;
  gap:6vw;
  align-items:center;
}
.aux-quality{left:0}
.anchor-quality{left:88%;top:70%}
.quality-copy{
  z-index:20;
  position:relative;
}
.quality-copy>p:not(.kicker){
  max-width:420px;
  font-size:14px;line-height:1.9;color:#77726b;
}
.quality-image{
  margin:0;
  height:66vh;
  overflow:hidden;
  z-index:20;
  position:relative;
}
.quality-image img{
  width:100%;height:100%;object-fit:cover;
}

/* story */
.story{
  min-height:146vh;
  display:grid;
  grid-template-columns:38% 62%;
  gap:5vw;
  align-items:center;
}
.anchor-story{left:84%;top:55%}
.story-copy{position:relative;z-index:20}
.story-copy>p:not(.kicker){
  max-width:390px;font-size:14px;line-height:1.9;color:#77726b;
}
.story-collage{
  position:relative;
  height:88vh;
  z-index:20;
}
.story-arc{
  position:absolute;
  width:92%;height:100%;
  left:0;top:0;
}
.story-img{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#e7e3dd;
}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-img-a{width:25%;height:26%;left:35%;top:10%}
.story-img-b{width:33%;height:28%;left:12%;top:47%}
.story-img-c{width:28%;height:40%;right:3%;bottom:4%}

/* media */
.media{
  min-height:118vh;
  display:grid;
  grid-template-columns:45% 55%;
  gap:7vw;
  align-items:center;
}
.anchor-contact{left:72%;top:45%}
.media-copy{position:relative;z-index:20}
.media-copy>p:not(.kicker){
  max-width:420px;font-size:14px;line-height:1.9;color:#77726b;
}
.media-copy a{
  display:inline-block;margin-top:3vh;
  font:500 8px/1 "Inter",sans-serif;letter-spacing:.18em;
  border-bottom:1px solid #77736d;padding-bottom:7px;
}
.media-words{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4vh 3vw;
  align-items:center;
  color:#9c978f;
  font-family:"Playfair Display",serif;
  font-size:clamp(28px,3vw,52px);
}

/* footer */
.footer{
  position:relative;
  min-height:25vh;
  padding:5vh 7vw;
  display:grid;
  grid-template-columns:1.3fr 1fr .8fr;
  gap:5vw;
  align-items:start;
  border-top:1px solid rgba(23,23,23,.07);
  background:#efede8;
}
.footer-brand{display:flex;flex-direction:column;gap:7px}
.footer-brand strong{font:500 18px/1 "Inter",sans-serif;letter-spacing:.16em}
.footer-brand small{font:500 6px/1.4 "Inter",sans-serif;letter-spacing:.23em;color:#99948c}
.footer-links,.footer-note{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 24px;
  font-size:10px;color:#747069;
}
.footer-note{
  grid-template-columns:1fr;
  font:500 9px/1.6 "Inter",sans-serif;
  letter-spacing:.2em;
}


.anchor-footer{left:71.8%;top:6%;}

/* animation states */
.animate-up{
  opacity:0;
  transform:translateY(30px);
}
.reveal-image{
  clip-path:inset(100% 0 0 0);
}
.parallax-image{
  transform:scale(1.06) translateY(-2%);
  backface-visibility:hidden;
  transform-origin:center center;
}
.image-monochrome{
  filter:grayscale(100%);
  transition:filter 1.2s ease;
}
.image-panel:hover .image-monochrome,
.quality-image:hover .image-monochrome{
  filter:grayscale(0%);
}

@media(max-width:900px){
  .header-nav{display:none}
  .gridline-center{display:none}
  .main-curve-svg,#curve-tip,.curve-anchor{display:none}
  .section{padding-left:6vw;padding-right:6vw}
  .hero-grid,.about-layout,.mission-head,.innovation,.quality,.story,.media{
    grid-template-columns:1fr;
  }
  .hero-visual{margin-top:5vh}
  .image-panel-large{position:relative;left:auto;top:auto;width:100%;height:52vh}
  .hero-side-copy{right:3%;top:5%}
  .image-panel-portrait{position:relative;left:auto;width:58%;height:50vh}
  .image-panel-square{width:42%;right:0;top:18vh;height:34vh}
  .mission-gallery{grid-template-columns:1fr}
  .mission-card img{height:52vh}
  .innovation-art{height:70vh}
  .innovation-circles{width:100%}
  .innovation-list{right:0;width:36%}
  .quality-image{height:52vh}
  .story-collage{height:68vh}
  .media-words{margin-top:8vh}
  .footer{grid-template-columns:1fr}
}


/* V4.1 motion system */
.main-curve-svg{
  opacity:0;
  transition:opacity .7s cubic-bezier(.16,1,.3,1);
}
.main-curve-svg.is-visible{opacity:1}
#curve-tip{
  transition:opacity .45s ease;
}
body.lenis, html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}


/* =========================================================
   V4.3 — Visual Journey Curve
   The main curve is a narrative drawing instrument:
   line -> node -> image -> headline -> copy.
   ========================================================= */

.main-curve-track{
  stroke:rgba(157,151,142,.025);
  stroke-width:1;
}

.main-curve-progress{
  stroke:rgba(153,147,138,.58);
  stroke-width:1.08;
  stroke-linecap:round;
}

.main-curve-svg{
  opacity:0;
  transition:opacity .48s cubic-bezier(.16,1,.3,1);
}

.main-curve-svg.is-visible{
  opacity:1;
}

#curve-tip{
  width:4px;
  height:4px;
  background:#918a81;
  box-shadow:
    0 0 0 4px rgba(145,138,129,.055),
    0 0 14px rgba(145,138,129,.10);
  opacity:0;
  transition:opacity .22s ease;
}

.journey-node{
  z-index:24;
  pointer-events:none;
}

.journey-node-core{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#817a72;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  box-shadow:0 0 0 5px rgba(129,122,114,.06);
}

.journey-node-ripple{
  position:absolute;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  border:1px solid rgba(129,122,114,.25);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.3);
  opacity:0;
}

.journey-node-label{
  position:absolute;
  left:18px;
  top:50%;
  transform:translate(-7px,-50%);
  white-space:nowrap;
  font:500 9px/1.2 "Inter",sans-serif;
  letter-spacing:.18em;
  color:#8e887f;
  opacity:0;
}

.journey-node.is-active .journey-node-core{
  box-shadow:0 0 0 5px rgba(129,122,114,.085);
}

/* Hero copy is now revealed by the origin node timeline. */
.motion-js .hero-title span{
  opacity:0;
  transform:translateY(24px);
}

/* Keep the auxiliary system visually secondary. */
.aux-line{
  stroke:rgba(23,23,23,.105);
}

.aux-soft{
  stroke:rgba(23,23,23,.047);
}

@media(max-width:900px){
  .journey-node,
  .journey-guide{
    display:none;
  }
}


/* =========================================================
   V4.3.2 — Reversible curve + early image reveal + editorial
   scroll motion.
   ========================================================= */

/* Curve stays visible in whitespace, but never sits on top of imagery. */
.mission-gallery,
.about-images,
.innovation-art,
.quality-image,
.story-collage,
.hero-visual,
.media-words{
  position:relative;
  z-index:22;
}

/* Text remains the top information layer. */
.hero-copy,
.about-title-block,
.about-text,
.mission-head,
.innovation-copy,
.quality-copy,
.story-copy,
.media-copy{
  position:relative;
  z-index:28;
}

/* Main curve belongs between background geometry and content. */
.main-curve-svg{
  z-index:12;
}

#curve-tip{
  z-index:13;
}

/* Smooth GPU-backed motion. */
.reveal-image,
.parallax-image,
.story-img,
.mission-card,
.image-panel,
.quality-image,
.innovation-photo{
  will-change:transform,clip-path;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

/* Keep image reveal elegant even if remote image takes a moment. */
.reveal-image{
  background:#ebe8e2;
}



/* V4.3.3 motion refinement */
.mission-card,.image-panel,.quality-image,.innovation-photo,.story-img,.reveal-image{overflow:hidden;}
.mission-card img,.image-panel img,.quality-image img,.innovation-photo img,.story-img img,.parallax-image{will-change:transform;transform-origin:center center;}
.image-motion-strong{will-change:transform;}


/* =========================================================
   V4.3.4 — stronger parallax, lower animation cost
   ========================================================= */
.image-motion-strong{
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
  contain:paint;
}
.image-motion-strong img{
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
}


/* V4.3.7 — smooth nav + performance polish */
.header-nav a,
.logo{
  cursor:pointer;
}

.header-nav a{
  position:relative;
}

.header-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  opacity:.45;
}

.header-nav a:hover::after{
  transform:scaleX(1);
}