@charset "utf-8";
/* CSS Document */

/* ==========================================================
   NM SURFBOARDS
   Main Stylesheet
   Part 1
   ========================================================== */

/* ---------- Design Tokens ---------- */

.nm-editorial{

 --nm-bg:#F7F3ED;
 --nm-bg-soft:#FBF8F4;

 --nm-text:#171717;
 --nm-text-light:#555;

 --nm-sand:#D7C7A6;
 --nm-line:#E7DDD0;

 --nm-dark:#111111;
 --nm-white:#ffffff;

 --nm-radius:4px;

 --nm-container:1200px;

 --nm-shadow:
 0 18px 50px rgba(0,0,0,.08);

 background:var(--nm-bg);

 color:var(--nm-text);

 font-family:"Noto Serif JP",serif;

 line-height:1.8;

}

/* ---------- Reset ---------- */

.nm-editorial *,
.nm-editorial *::before,
.nm-editorial *::after{

 box-sizing:border-box;

}

.nm-editorial img{

 display:block;

 width:100%;

 height:auto;

}

.nm-editorial a{

 color:inherit;

 text-decoration:none;

}

.nm-editorial h1,
.nm-editorial h2,
.nm-editorial h3{

 font-family:"Cormorant Garamond",serif;

 font-weight:500;

 line-height:1.1;

 margin:0;

}

.nm-editorial p{

 margin:0;

}

.nm-editorial figure{

 margin:0;

}

/* ---------- Layout ---------- */

.nm-container{

 width:min(var(--nm-container),calc(100% - 80px));

 margin-inline:auto;

}

.section-space{

 padding:120px 0;

}

/* ---------- Typography ---------- */

.nm-overline{

 font-family:"Inter",sans-serif;

 font-size:12px;

 letter-spacing:.32em;

 text-transform:uppercase;

 opacity:.92;

 margin-bottom:18px;

}

.nm-section-label{

 display:inline-block;

 font-family:"Inter",sans-serif;

 font-size:12px;

 letter-spacing:.28em;

 text-transform:uppercase;

 color:#8A8178;

 margin-bottom:18px;

}

.nm-heading{

 text-align:center;

 margin-bottom:72px;

}

.nm-heading h2{

 font-size:56px;

}

/* ---------- Buttons ---------- */

.nm-btn-group{

 display:flex;

 gap:16px;

 flex-wrap:wrap;

}

.nm-btn{

 display:inline-flex;

 align-items:center;

 justify-content:center;

 min-width:180px;

 padding:15px 28px;

 border:1px solid currentColor;

 transition:
 background .35s,
 color .35s,
 border-color .35s,
 transform .35s;

 font-family:"Inter",sans-serif;

 font-size:14px;

 letter-spacing:.08em;

}

.nm-btn:hover{

 background:var(--nm-dark);

 color:#fff;

 border-color:var(--nm-dark);

 transform:translateY(-2px);

}

.nm-btn--primary{

 background:var(--nm-dark);

 color:#fff;

 border-color:var(--nm-dark);

}

.nm-btn--primary:hover{

 background:#000;

}

.nm-btn1{
 
 list-style: none;
	
 text-align: center;

 padding:15px 28px;

 border:1px solid currentColor;

 transition:
 background .35s,
 color .35s,
 border-color .35s,
 transform .35s;

 font-family:"Inter",sans-serif;

 font-size:14px;

 letter-spacing:.08em;

}

.nm-btn1:hover{

 background:var(--nm-dark);

 color:#fff;

 border-color:var(--nm-dark);

 transform:translateY(-2px);

}


/* ==========================================================
   HERO
   ========================================================== */

.nm-hero{

 position:relative;

 height:640px;

 overflow:hidden;

 background:#000;

}

.nm-hero__media{

 position:absolute;

 inset:0;

}

.nm-hero__media img{

 width:100%;

 height:100%;

 object-fit:cover;

}

.nm-hero__overlay{

 position:absolute;

 inset:0;

 background:
 linear-gradient(
 rgba(0,0,0,.18),
 rgba(0,0,0,.52)
 );

}

.nm-hero__content{
  position:absolute;
  left:10%;
  bottom:90px;
  transform:translateX(-50%);
  width:min(var(--nm-container),calc(100% - 80px));
  color:white;
  z-index:2;
}

.nm-hero h1{

 font-size:104px;

 margin-bottom:10px;

 letter-spacing:.02em;

}

.nm-hero h2{

 font-size:40px;

 margin-bottom:24px;

 max-width:620px;

}

.nm-hero__lead{

 max-width:520px;

 font-size:17px;

 opacity:.88;

 margin-bottom:36px;

}

/* ==========================================================
   STORY
   ========================================================== */

.nm-grid{

 display:grid;

 grid-template-columns:1fr 1fr;

 gap:72px;

 align-items:center;

}

.nm-story__image{

 overflow:hidden;

}

.nm-story__image img{

 aspect-ratio:4/5;

 object-fit:cover;

 transition:transform .8s;

}

.nm-story__image:hover img{

 transform:scale(1.04);

}

.nm-story__text{

 max-width:520px;

}

.nm-story h2{

 font-size:54px;

 margin-bottom:34px;

}

.nm-story p{

 font-size:17px;

 color:var(--nm-text-light);

 margin-bottom:26px;

}

.nm-story blockquote{

 position:relative;

 padding-left:28px;

 margin-top:44px;

 font-size:28px;

 font-style:italic;

 color:#222;

}

.nm-story blockquote::before{

 content:"";

 position:absolute;

 left:0;

 top:8px;

 width:3px;

 height:80%;

 background:var(--nm-sand);

}


/* ==========================================================
   TIMELINE
   ========================================================== */

.nm-timeline{

 background:var(--nm-bg-soft);

 border-top:1px solid var(--nm-line);

 border-bottom:1px solid var(--nm-line);

}

.nm-timeline__wrapper{

 position:relative;

 display:flex;

 justify-content:space-between;

 align-items:flex-start;

 padding-top:34px;

}

.nm-timeline__wrapper::before{

 content:"";

 position:absolute;

 left:8%;

 right:8%;

 top:48px;

 height:2px;

 background:#CBB28B;

}

.nm-timeline__progress{

 position:absolute;

 left:8%;

 top:48px;

 width:0;

 height:2px;

 background:#111;

}

.nm-point{

 position:relative;

 text-align:center;

 width:180px;

}

.nm-point__dot{

 width:34px;

 height:34px;

 border-radius:50%;

 background:#111;

 margin:0 auto 22px;

 border:6px solid var(--nm-bg-soft);

 box-shadow:
 0 0 0 2px #CBB28B;

}

.nm-point h3{

 font-size:24px;

}

/* ==========================================================
   GALLERY
   ========================================================== */

.nm-gallery__grid{

 display:grid;

 grid-template-columns:repeat(2,1fr);

 gap:24px;

}

.nm-gallery__item{

 overflow:hidden;

 cursor:pointer;

 background:#ddd;

}

.nm-gallery__item img{

 aspect-ratio:3/2;

 object-fit:cover;

 transition:
 transform .8s,
 filter .8s;

}

.nm-gallery__item:hover img{

 transform:scale(1.05);

 filter:brightness(.92);

}

/* ==========================================================
   MODELS
   ========================================================== */

.nm-model{

 display:grid;

 grid-template-columns:1.1fr .9fr;

 gap:72px;

 align-items:center;

 margin-bottom:150px;

}

.nm-model:last-child{

 margin-bottom:0;

}

.nm-model--reverse{

 direction:rtl;

}

.nm-model--reverse>*{

 direction:ltr;

}

.nm-model__image{

 overflow:hidden;

 background:#F1ECE6;

}

.nm-model__image img{

 aspect-ratio:4/5;

 object-fit:contain;

 padding:36px;

 transition:
 transform .8s;

}

.nm-model:hover img{

 transform:scale(1.03);

}

.nm-model__content{

 max-width:420px;

}

.nm-model h3{

 font-size:58px;

 margin-bottom:16px;

}

.nm-model__tag{

 font-family:"Inter",sans-serif;

 letter-spacing:.18em;

 text-transform:uppercase;

 color:#8A8178;

 margin-bottom:24px;

 font-size:13px;

}

.nm-model__content p{

 color:var(--nm-text-light);

 margin-bottom:34px;

}

/* ==========================================================
   VIDEO SECTION
   ========================================================== */

.nm-video{

 background:var(--nm-dark);
 color:var(--nm-white);

}

.nm-video .nm-heading h2{

 color:white;

}

.nm-video .nm-section-label{

 color:#C9B79B;

}

.nm-video__grid{

 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:32px;

}

.nm-video-card{

 display:block;

 overflow:hidden;

 background:#1A1A1A;

 transition:
 transform .4s,
 box-shadow .4s;

}

.nm-video-card:hover{

 transform:translateY(-6px);

 box-shadow:
 0 25px 60px rgba(0,0,0,.35);

}

.nm-video-card img{

 aspect-ratio:16/9;
 object-fit:cover;

 transition:transform .6s;

}

.nm-video-card:hover img{

 transform:scale(1.04);

}

.nm-video-card__body{

 padding:26px;

}

.nm-video-card__body h3{

 font-size:34px;
 color:white;
 margin-bottom:8px;

}

.nm-video-card__body p{

 color:#BEBEBE;
 font-size:15px;

}

/* ==========================================================
   CTA
   ========================================================== */

.nm-cta{

 background:#171717;
 color:white;

 padding:140px 0;

 text-align:center;

}

.nm-cta__content{

 max-width:760px;
 margin:auto;

}

.nm-cta h2{

 font-size:72px;
 margin-bottom:20px;

}

.nm-cta p{

 font-size:18px;
 color:#C8C8C8;

 margin-bottom:46px;

}

/* ==========================================================
   MICRO INTERACTIONS
   ========================================================== */

.nm-btn:active{

 transform:translateY(1px);

}

.nm-model__content .nm-btn{

 min-width:170px;

}

.nm-gallery__item{

 position:relative;

}

.nm-gallery__item::after{

 content:"";

 position:absolute;
 inset:0;

 background:rgba(0,0,0,.12);

 opacity:0;

 transition:.35s;

}

.nm-gallery__item:hover::after{

 opacity:1;

}

/* ==========================================================
   IMAGE OPTIMIZATION
   ========================================================== */

.nm-editorial img{

 image-rendering:auto;

}

.nm-hero img{

 object-position:center;

}

.nm-story img{

 object-position:center top;

}

.nm-model__image img{

 object-position:center;

}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.nm-editorial a:focus-visible,
.nm-editorial button:focus-visible{

 outline:3px solid #C9B79B;
 outline-offset:4px;

}

.nm-btn{

 cursor:pointer;

}

@media (prefers-reduced-motion:reduce){

 .nm-editorial *,
 .nm-editorial *::before,
 .nm-editorial *::after{

  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;

 }

}

/* ==========================================================
   LARGE DESKTOP (1600px+)
   ========================================================== */

@media (min-width:1600px){

 .nm-container{

  width:min(1320px,calc(100% - 120px));

 }

 .nm-hero h1{

  font-size:118px;

 }

 .nm-heading h2{

  font-size:64px;

 }

 .nm-model h3{

  font-size:64px;

 }

}

/* ==========================================================
   LAPTOP
   ========================================================== */

@media (max-width:1200px){

 .nm-container{

  width:calc(100% - 64px);

 }

 .nm-grid{

  gap:56px;

 }

 .nm-model{

  gap:56px;

 }

}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:992px){

 .section-space{

  padding:96px 0;

 }

 .nm-heading{

  margin-bottom:54px;

 }

 .nm-heading h2{

  font-size:46px;

 }

 .nm-hero{

  height:520px;

 }

 .nm-hero h1{

  font-size:78px;

 }

 .nm-hero h2{

  font-size:30px;

 }

 .nm-grid{

  grid-template-columns:1fr;

 }

 .nm-story__text{

  max-width:none;

 }

 .nm-story__image{

  max-width:640px;
  margin:auto;

 }

 .nm-model{

  grid-template-columns:1fr;

  gap:42px;

 }

 .nm-model--reverse{

  direction:ltr;

 }

 .nm-model__content{

  max-width:none;

 }

 .nm-video__grid{

  grid-template-columns:1fr;

 }

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:768px){

 .nm-container{

  width:calc(100% - 40px);

 }

 .section-space{

  padding:72px 0;

 }

 .nm-heading{

  margin-bottom:40px;

 }

 .nm-heading h2{

  font-size:38px;

 }

 .nm-hero{

  height:420px;

 }

  .nm-hero__content {
    align-items: center;
    text-align: center;
  }

  .nm-hero__content .nm-btn-group {
    justify-content: center;
  }

 .nm-hero h1{

  font-size:62px;

 }

 .nm-hero h2{


  font-size:24px;

 }

 .nm-hero__lead{

  font-size:15px;

 }

 .nm-btn-group{

  gap:12px;

 }

 .nm-btn{

  flex:1;
  min-width:140px;

  padding:14px 18px;

 }

 .nm-story h2{

  font-size:40px;

 }

 .nm-story blockquote{

  font-size:22px;

 }

 .nm-gallery__grid{

  grid-template-columns:1fr;

 }

 .nm-gallery__item img{

  aspect-ratio:4/3;

 }

 .nm-timeline__wrapper{

  display:block;

 }

 .nm-timeline__wrapper::before{

  left:17px;
  right:auto;

  top:20px;

  width:2px;
  height:calc(100% - 40px);

 }

 .nm-timeline__progress{

  left:17px;
  top:20px;

  width:2px;
  height:0;

 }

 .nm-point{

  display:flex;

  align-items:center;

  gap:20px;

  text-align:left;

  width:auto;

  margin-bottom:34px;

 }

 .nm-point__dot{

  margin:0;

 }

 .nm-point h3{

  font-size:22px;

 }

 .nm-model{

  margin-bottom:84px;

 }

 .nm-model__image img{

  padding:24px;

 }

 .nm-model h3{

  font-size:42px;

 }

 .nm-video-card__body{

  padding:20px;

 }

 .nm-video-card__body h3{

  font-size:28px;

 }

 .nm-cta{

  padding:96px 0;

 }

 .nm-cta h2{

  font-size:44px;

 }

 .nm-cta p{

  font-size:16px;

 }

}

/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width:390px){

 .nm-container{

  width:calc(100% - 32px);

 }

 .nm-hero h1{

  font-size:54px;

 }

 .nm-heading h2{

  font-size:34px;

 }

 .nm-story h2{

  font-size:34px;

 }

 .nm-model h3{

  font-size:36px;

 }

 .nm-btn{

  font-size:13px;

 }

}

/* =========================================
   FIX: HERO CONTENT VISIBILITY
   Tablet & Mobile
   ========================================= */

.nm-editorial .nm-hero {
  position: relative;
  isolation: isolate;
}

.nm-editorial .nm-hero__media {
  z-index: 0;
}

.nm-editorial .nm-hero__overlay {
  z-index: 1;
}

.nm-editorial .nm-hero__content {
  position: absolute;
  z-index: 5;

  left: 50%;
  bottom: 90px;

  width: min(1200px, calc(100% - 80px));
  margin: 0;

  color: #fff;
  text-align: left;
  align-items: flex-start;

  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

.nm-editorial .nm-hero__content h1,
.nm-editorial .nm-hero__content h2,
.nm-editorial .nm-hero__content p,
.nm-editorial .nm-hero__content .nm-btn-group,
.nm-editorial .nm-hero__content .nm-btn {
  visibility: visible;
}

.nm-editorial .nm-hero__content .nm-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nm-editorial .nm-hero__content .nm-btn {
  position: relative;
  z-index: 6;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .nm-editorial .nm-hero {
    height: 560px;
    min-height: 560px;
  }

  .nm-editorial .nm-hero__content {
    bottom: 64px;
    width: calc(100% - 64px);
  }

  .nm-editorial .nm-hero__content h1 {
    font-size: clamp(64px, 9vw, 88px);
  }

  .nm-editorial .nm-hero__content h2 {
    max-width: 500px;
    font-size: clamp(26px, 3.5vw, 34px);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nm-editorial .nm-hero {
    height: auto;
    min-height: 560px;
  }

  .nm-editorial .nm-hero__media {
    position: absolute;
    inset: 0;
  }

  .nm-editorial .nm-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .nm-editorial .nm-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.42) 35%,
      rgba(0, 0, 0, 0.78) 100%
    );
  }

  .nm-editorial .nm-hero__content {
    left: 0;
    right: 0;
    bottom: 0;

    width: auto;
    padding: 0 20px 36px;
    margin: 0;

    transform: none;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

    opacity: 1;
    visibility: visible;
    color: #fff;
  }

  .nm-editorial .nm-hero__content h1 {
    font-size: clamp(54px, 14vw, 68px);
    line-height: 0.95;
    margin-bottom: 12px;
  }

  .nm-editorial .nm-hero__content h2 {
    max-width: 100%;
    font-size: clamp(23px, 6vw, 28px);
    line-height: 1.25;
    margin-bottom: 16px;
  }

  .nm-editorial .nm-hero__lead {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  .nm-editorial .nm-hero__content .nm-btn-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .nm-editorial .nm-hero__content .nm-btn {
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    justify-content: center;
    text-align: center;
  }
}

/* Small mobile */
@media (max-width: 390px) {
  .nm-editorial .nm-hero {
    min-height: 580px;
  }

  .nm-editorial .nm-hero__content {
    padding: 0 16px 28px;
  }
}