:root{
  --bg:#F7F5EF;
  --bg-gradient:radial-gradient(circle at top left, #fbfaf6 0%, #f7f5ef 45%, #f1eee7 100%);
  --text:#111111;
  --muted:#5f6368;
  --line:rgba(0,0,0,.08);
  --accent:#37BEB0;
  --dark:#061413;
  --white:#ffffff;
  --master-width:min(100%, 2200px);
  --master-side:20px;
}

/* =========================================================
   Base
========================================================= */
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:var(--bg-gradient);
}
body{
  margin:0;
  background:var(--bg-gradient);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans JP",Arial,sans-serif;
  overflow-x:hidden;
  line-height:1.75;
  letter-spacing:.03em;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:4px 4px;
  opacity:.11;
  mix-blend-mode:overlay;
}

/* =========================================================
   Header
========================================================= */
.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
  padding:0 clamp(18px,3vw,42px);
  background:rgba(55,190,176,.68);
  color:var(--dark);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.logo{
  font-weight:800;
  letter-spacing:-.03em;
  text-transform:lowercase;
}
.navlinks{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:13px;
  font-weight:700;
}
.navlinks a:last-child{
  background:var(--white);
  color:var(--dark);
  padding:10px 16px;
  border-radius:999px;
}

/* =========================================================
   Layout / Shared
========================================================= */
main{padding-top:0}
section{padding:72px clamp(18px,4vw,56px)}
#works,#service,#flow,#contact{scroll-margin-top:96px}

.section-head{
  width:var(--master-width);
  margin:0 auto 24px;
  padding-left:var(--master-side);
  padding-right:var(--master-side);
  text-align:left;
}
.section-head h2,
.service-head-v31 h2,
#contact h2{
  margin:0 0 10px;
  font-size:clamp(30px,3.2vw,48px);
  line-height:1;
  letter-spacing:.08em;
  font-weight:700;
}
.section-head p{
  max-width:1120px;
  margin:0;
  color:var(--muted);
  line-height:1.7;
}
.section-divider{
  width:var(--master-width);
  margin:0 auto 84px;
  padding-left:var(--master-side);
  padding-right:var(--master-side);
}
.section-divider::before{
  content:"";
  display:block;
  width:100%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(55,190,176,.95) 0%,rgba(55,190,176,.48) 35%,rgba(55,190,176,0) 100%);
}
.service-divider{margin-bottom:92px}

/* =========================================================
   Hero
========================================================= */
.hero-catch-only{
  position:relative;
  min-height:0;
  height:auto;
  padding:0;
  margin-top:-72px;
  overflow:hidden;
  background:#000;
  aspect-ratio:16/9;
}
.hero-catch-only .hero-video-v4,
.hero-catch-only .hero-image-v113{
  position:relative;
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  z-index:0;
}
.hero-catch-only::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,.38));
}
.hero-catch{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:144px 20px 40px;
}
.hero-catch-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.hero-catch h1{
  margin:0;
  color:#fff;
  font-size:clamp(56px,9vw,148px);
  line-height:.92;
  letter-spacing:-.03em;
  font-weight:900;
  white-space:normal;
  text-shadow:0 16px 46px rgba(0,0,0,.35);
}
.hero-subtitle{
  margin:0;
  color:#fff;
  font-size:clamp(13px,1.5vw,20px);
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:.88;
  text-shadow:0 8px 24px rgba(0,0,0,.46);
}

/* =========================================================
   Intro
========================================================= */
.hero-meta{
  padding:96px clamp(18px,4vw,56px) 120px;
  background:var(--bg);
  color:var(--text);
  text-align:center;
}
.hero-meta .hero-heading-group{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:0 auto 12px;
  text-align:center;
}
.eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  color:rgba(17,17,17,.72);
  font-size:clamp(16px,1.8vw,24px);
  font-weight:600;
  letter-spacing:.38em;
}
.hero-meta .eyebrow::before,
.hero-meta .eyebrow::after{
  content:"";
  display:block;
  width:clamp(70px,10vw,160px);
  height:1px;
  background:var(--accent);
}
.hero-meta p{
  max-width:980px;
  margin:34px auto 0;
  color:rgba(17,17,17,.76);
  font-size:clamp(17px,1.55vw,22px);
  line-height:2.15;
}
.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:42px auto 0;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:13px 18px;
  font-weight:800;
  font-size:14px;
  border:1px solid var(--line);
}
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
  box-shadow:0 10px 24px rgba(55,190,176,.22);
}
.btn.ghost{
  background:rgba(17,17,17,.06);
  color:var(--text);
  border-color:rgba(17,17,17,.18);
}

/* =========================================================
   Works
========================================================= */
.works-scroll-v58{
  display:flex;
  gap:18px;
  width:var(--master-width);
  margin:0 auto;
  padding:0 var(--master-side) 18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.work-card{
  position:relative;
  flex:0 0 420px;
  aspect-ratio:16/9;
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:18px 20px;
  background-size:cover;
  background-position:center;
  scroll-snap-align:start;
}
.work-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(to top,rgba(5,5,7,.72),rgba(5,5,7,.05));
}
.work-card .tag,
.work-card h3{
  position:relative;
  z-index:1;
  color:var(--white);
}
.work-card .tag{
  margin:0 0 2px;
  font-size:11px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.work-card h3{
  margin:0;
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.works-scroll-hint{
  width:var(--master-width);
  margin:14px auto 0;
  padding:0 var(--master-side);
  text-align:right;
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}

/* =========================================================
   Visual Banners
========================================================= */
.works-pre-banner,
.service-flow-banner{
  width:100vw;
  height:clamp(150px,20vw,260px);
  margin:8px 0 18px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background-size:100% auto;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#050507;
  border-top:1px solid rgba(55,190,176,.28);
  border-bottom:1px solid rgba(55,190,176,.28);
}
@media (min-width:768px){
  .works-pre-banner,
  .service-flow-banner{background-attachment:fixed}
}

/* =========================================================
   Service
========================================================= */
#service.service-mockup{
  background:transparent;
  padding:96px clamp(20px,5vw,76px) 104px;
  color:#111;
}
.service-head-v31{
  width:var(--master-width);
  margin:0 auto 24px;
  padding-left:var(--master-side);
  padding-right:var(--master-side);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.service-head-v31 h2{
  margin:0;
}
.service-head-v31 span,
.service-head-v31 a{display:none}
.service-list-v31{
  width:var(--master-width);
  margin:0 auto;
  padding-left:var(--master-side);
  padding-right:var(--master-side);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.service-item-v31{
  position:relative;
  text-align:center;
  padding:8px 34px 2px;
}
.service-item-v31:not(:last-child){
  border-right:1px solid rgba(55,190,176,.28);
}
.service-icon-v31{
  width:72px;
  height:72px;
  margin:0 auto 28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.service-icon-v31 svg,
.service-brand-icon-v49 svg,
.service-product-icon-v45 svg,
.service-sns-icon-v46 svg,
.service-event-icon-v47 svg{
  width:72px;
  height:72px;
  fill:none;
  color:var(--accent);
  stroke:var(--accent);
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.service-item-v31 h3{
  margin:0 0 18px;
  color:#111;
  font-size:clamp(17px,1.25vw,24px);
  line-height:1.25;
  letter-spacing:.08em;
  font-weight:800;
}
.service-item-v31 p{
  margin:0;
  color:rgba(17,17,17,.72);
  font-size:14px;
  line-height:2;
  font-weight:600;
}

/* =========================================================
   Flow
========================================================= */
#flow{
  background:transparent;
  color:var(--text);
  overflow:hidden;
  padding-top:96px;
  padding-bottom:120px;
}
#flow .section-head h2{color:var(--text)}
#flow .section-head p{color:var(--muted)}
#flow .flow-mockup-v63{
  width:var(--master-width);
  max-width:var(--master-width);
  margin:0 auto;
  padding:0 var(--master-side);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:22px;
  overflow:visible;
}
#flow .flow-mockup-v63 > div{
  position:relative;
  height:420px;
  min-height:420px;
  padding:32px 24px;
  border-radius:24px;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  scroll-snap-align:start;
  overflow:visible;
}
#flow .flow-mockup-v63 > div:nth-child(1){
  background:linear-gradient(145deg,#f4f4f2 0%,#d8dadc 100%);
  color:#101214;
}
#flow .flow-mockup-v63 > div:nth-child(2){
  background:linear-gradient(145deg,#d9dcdf 0%,#b9bec3 100%);
  color:#101214;
}
#flow .flow-mockup-v63 > div:nth-child(3){
  background:linear-gradient(145deg,#9fa4aa 0%,#737980 100%);
  color:#101214;
}
#flow .flow-mockup-v63 > div:nth-child(4){
  background:linear-gradient(145deg,#666b72 0%,#3f444a 100%);
  color:#fff;
}
#flow .flow-mockup-v63 > div:nth-child(5){
  background:linear-gradient(145deg,#353a40 0%,#1d2025 100%);
  color:#fff;
}
#flow .flow-num{
  position:absolute;
  top:24px;
  left:24px;
  font-size:20px;
  line-height:1;
  font-weight:300;
  letter-spacing:.06em;
  color:currentColor;
  opacity:.78;
}
#flow .flow-mockup-v63 > div:nth-child(3) .flow-num{
  color:#fff;
  opacity:.9;
}
#flow .flow-mockup-v63 h3{
  margin:0;
  color:currentColor;
  font-size:clamp(28px,2.1vw,46px);
  line-height:1;
  letter-spacing:-.06em;
  font-weight:300;
}
#flow .flow-line{
  display:block;
  width:54px;
  height:2px;
  margin:24px auto 22px;
  background:var(--accent);
  opacity:.92;
}
#flow .flow-mockup-v63 p{
  max-width:100%;
  margin:0;
  color:currentColor;
  font-size:15px;
  line-height:1.85;
  font-weight:500;
  opacity:.86;
}
#flow .flow-mockup-v63 > div:nth-child(1) h3,
#flow .flow-mockup-v63 > div:nth-child(2) h3,
#flow .flow-mockup-v63 > div:nth-child(1) p,
#flow .flow-mockup-v63 > div:nth-child(2) p{
  color:#111;
}
#flow .flow-mockup-v63 > div::after{
  content:"";
  position:absolute;
  top:50%;
  right:-17px;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-top:24px solid transparent;
  border-bottom:24px solid transparent;
  border-left:30px solid var(--accent);
  filter:drop-shadow(6px 6px 8px rgba(0,0,0,.18));
  z-index:10;
  pointer-events:none;
}
#flow .flow-mockup-v63 > div:last-child::after{
  display:none;
}

/* =========================================================
   Contact
========================================================= */
#contact{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.contact-accent-line{
  grid-column:1/-1;
  width:100%;
  height:2px;
  margin:0 0 24px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(55,190,176,.95) 0%,rgba(55,190,176,.48) 35%,rgba(55,190,176,0) 100%);
}
.contact-card{
  padding:28px;
  background:var(--accent);
  color:var(--white);
  border:1px solid var(--accent);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(55,190,176,.18);
}
.contact-card *{color:var(--white)}
.contact-card .btn{
  background:var(--white);
  color:var(--dark)!important;
  border-color:var(--white);
}

/* =========================================================
   Footer
========================================================= */
footer{
  background:var(--accent);
  color:var(--dark);
  padding:24px clamp(18px,4vw,56px);
  font-weight:800;
}

/* =========================================================
   Responsive
========================================================= */
@media (min-width:1400px){
  #flow .flow-mockup-v63{gap:28px}
  #flow .flow-mockup-v63 > div{
    height:450px;
    min-height:450px;
    padding:38px 28px;
  }
}
@media (max-width:1024px){
  .section-divider{margin-bottom:64px}
  .service-divider{margin-bottom:72px}
  .service-list-v31{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:46px;
  }
  .service-item-v31:nth-child(2){border-right:none}
}
@media (max-width:767px){
  .nav{min-height:64px}
  .navlinks{gap:10px;font-size:11px}
  .navlinks a:last-child{padding:8px 12px}
  main{padding-top:64px}
  section{padding:56px 18px}

  .hero-catch-only{
    margin-top:0;
    aspect-ratio:16/9;
  }
  .hero-catch{padding:16px 18px 18px}
  .hero-catch h1{
    max-width:92vw;
    font-size:clamp(30px,8.8vw,40px);
    line-height:1.06;
    letter-spacing:-.032em;
  }
  .hero-subtitle{
    max-width:92vw;
    font-size:8px;
    line-height:1.2;
    letter-spacing:.16em;
    white-space:nowrap;
  }

  .hero-meta{padding:64px 18px 80px}
  .eyebrow{
    gap:12px;
    font-size:13px;
    letter-spacing:.24em;
  }
  .hero-meta .eyebrow::before,
  .hero-meta .eyebrow::after{width:42px}
  .hero-meta p{
    margin-top:24px;
    font-size:14px;
    line-height:2;
  }
  .hero-actions{
    flex-wrap:wrap;
    margin-top:30px;
  }

  .section-head,
  .section-divider,
  .works-scroll-v58,
  .works-scroll-hint,
  .service-head-v31,
  .service-list-v31{
    width:100%;
    padding-left:0;
    padding-right:0;
  }
  .section-divider{margin-bottom:40px}
  .works-scroll-v58 .work-card{flex-basis:78vw}

  .works-pre-banner,
  .service-flow-banner{
    height:118px;
    margin-top:6px;
    margin-bottom:14px;
    background-attachment:scroll;
    background-size:cover;
    background-position:center center;
  }

  #service.service-mockup{padding:72px 18px 78px}
  .service-head-v31{margin-bottom:42px}
  .service-list-v31{grid-template-columns:1fr}
  .service-item-v31{
    padding:32px 8px;
    border-right:none!important;
  }
  .service-item-v31:not(:last-child){
    border-bottom:1px solid rgba(55,190,176,.28);
  }

  #flow{
    padding-top:72px;
    padding-bottom:88px;
  }
  #flow .flow-mockup-v63{
    width:100%;
    max-width:100%;
    margin-top:0;
    padding:0 0 22px;
    display:flex;
    gap:0;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  #flow .flow-mockup-v63 > div{
    flex:0 0 82vw;
    width:82vw;
    height:420px;
    min-height:420px;
    padding:34px 28px;
    border-radius:24px;
  }
  #flow .flow-num{
    top:26px;
    left:28px;
    font-size:20px;
  }
  #flow .flow-mockup-v63 h3{font-size:42px}
  #flow .flow-line{
    width:54px;
    margin:24px auto 22px;
  }
  #flow .flow-mockup-v63 p{
    font-size:14px;
    line-height:1.95;
  }
  #flow .flow-mockup-v63 > div::after{
    right:-21px;
    border-top-width:30px;
    border-bottom-width:30px;
    border-left-width:38px;
  }
  #flow::after{
    content:"SCROLL FLOW →";
    display:block;
    width:100%;
    margin:18px auto 0;
    padding:0;
    text-align:right;
    color:var(--accent);
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
  }

  #contact{grid-template-columns:1fr}
}

/* Embedded image backgrounds */
.works-scroll-v58 .work-card:nth-child(1){
  background-image:

    url("assets/images/lamborghini.jpg") !important;
  background-size:cover !important;
  background-position:center center !important;
}

.works-scroll-v58 .work-card:nth-child(2){
  background-image:

    url("assets/images/binetsu.jpg") !important;
  background-size:cover !important;
  background-position:center center !important;
}

.works-scroll-v58 .work-card:nth-child(3){
  background-image:

    url("assets/images/kyoto.jpg") !important;
  background-size:cover !important;
  background-position:center center !important;
}

.works-scroll-v58 .work-card:nth-child(4){
  background-image:

    url("assets/images/masterpiece.jpg") !important;
  background-size:cover !important;
  background-position:center center !important;
}

.works-scroll-v58 .work-card:nth-child(5){
  background-image:

    url("assets/images/dinner.jpg") !important;
  background-size:cover !important;
  background-position:center center !important;
}

.works-scroll-v58 .work-card:nth-child(6){
  background-image:

    url("assets/images/wedding.jpg") !important;
  background-size:cover !important;
  background-position:center center !important;
}

.works-pre-banner{
  background-image:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url("assets/images/embedded-006.jpg");
}

.service-flow-banner{
  background-image:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url("assets/images/embedded-007.jpg");
}

/* Enlarge the first letter of each section heading */
.section-head h2::first-letter,
.service-head-v31 h2::first-letter,
#contact h2::first-letter{
  font-size:1.35em !important;
  font-weight:inherit !important;
  line-height:0.9 !important;
  letter-spacing:-0.04em !important;
}

/* Relax spacing for SERVICE and FLOW first letters */
#service .service-head-v31 h2::first-letter,
#flow .section-head h2::first-letter{
  letter-spacing:0.01em !important;
}

/* CONTACT layout */
#contact{
  display:block !important;
  padding-top:96px !important;
  padding-bottom:120px !important;
}

#contact .section-divider{
  margin-bottom:72px !important;
}

.contact-layout-v72{
  width:var(--master-width);
  margin:0 auto;
  padding-left:var(--master-side);
  padding-right:var(--master-side);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:start;
}

.contact-text-v72 p{
  margin:0;
  max-width:640px;
  color:var(--muted);
  font-size:16px;
  line-height:2.1;
}

.contact-card{
  padding:42px !important;
  background:var(--accent) !important;
  color:#fff !important;
  border-radius:28px !important;
  border:none !important;
  box-shadow:0 18px 40px rgba(55,190,176,.18) !important;
}

.contact-card h3{
  margin:0 0 18px;
  font-size:28px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.04em;
}

.contact-card p{
  margin:0 0 28px;
  color:rgba(255,255,255,.9);
  line-height:2;
}

.contact-card .btn{
  background:#fff !important;
  color:#061413 !important;
  border:none !important;
}

/* Mobile */
@media (max-width:767px){
  #contact{
    padding-top:72px !important;
    padding-bottom:88px !important;
  }

  #contact .section-divider{
    margin-bottom:40px !important;
  }

  .contact-layout-v72{
    grid-template-columns:1fr !important;
    gap:32px !important;
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .contact-text-v72 p{
    font-size:14px !important;
  }

  .contact-card{
    padding:32px 28px !important;
    border-radius:24px !important;
  }

  .contact-card h3{
    font-size:24px !important;
  }
}

.contact-layout-v72{
  width:var(--master-width);
  margin:0 auto;
  padding-left:var(--master-side);
  padding-right:var(--master-side);
  display:flex !important;
  justify-content:center !important;
}

.contact-layout-v72 .contact-card{
  width:min(100%, 760px) !important;
}

@media (max-width:767px){
  .contact-layout-v72{
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .contact-layout-v72 .contact-card{
    width:100% !important;
  }
}

/* Elegant contact card */
.contact-layout-v72 .contact-card{
  width:min(100%, 860px) !important;
  padding:56px 60px !important;
  border-radius:34px !important;
  background:
    linear-gradient(135deg, rgba(55,190,176,.94), rgba(55,190,176,.72)) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:none !important;
  position:relative !important;
  overflow:hidden !important;
}

.contact-layout-v72 .contact-card::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:24px;
  pointer-events:none;
}

.contact-layout-v72 .contact-card::after{
  content:"CONTACT";
  position:absolute;
  right:34px;
  bottom:18px;
  color:rgba(255,255,255,.16);
  font-size:clamp(52px, 8vw, 110px);
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  pointer-events:none;
}

.contact-layout-v72 .contact-card h3{
  position:relative;
  z-index:1;
  margin:0 0 22px !important;
  font-size:clamp(28px, 3vw, 44px) !important;
  letter-spacing:.04em !important;
}

.contact-layout-v72 .contact-card p{
  position:relative;
  z-index:1;
  max-width:620px;
  margin:0 0 36px !important;
  font-size:16px;
  line-height:2.05 !important;
}

.contact-layout-v72 .contact-card .btn{
  position:relative;
  z-index:1;
  min-width:170px;
  padding:14px 24px !important;
}

@media (max-width:767px){
  .contact-layout-v72 .contact-card{
    padding:42px 30px !important;
    border-radius:28px !important;
  }

  .contact-layout-v72 .contact-card::before{
    inset:12px;
    border-radius:20px;
  }

  .contact-layout-v72 .contact-card::after{
    right:18px;
    bottom:12px;
    font-size:58px;
  }

  .contact-layout-v72 .contact-card p{
    font-size:14px;
  }
}

/* Make CONTACT heading match the CRAFTING YOUR VISION section */
#contact .section-head{
  text-align:center !important;
}

#contact .hero-heading-group{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 auto 12px !important;
}

#contact .eyebrow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:24px !important;
  color:rgba(17,17,17,.72) !important;
  font-size:clamp(16px,1.8vw,24px) !important;
  font-weight:600 !important;
  letter-spacing:.38em !important;
}

#contact .eyebrow::before,
#contact .eyebrow::after{
  content:"" !important;
  display:block !important;
  width:clamp(70px,10vw,160px) !important;
  height:1px !important;
  background:var(--accent) !important;
}

#contact .section-head p{
  max-width:980px !important;
  margin:34px auto 0 !important;
  color:rgba(17,17,17,.76) !important;
  font-size:clamp(17px,1.55vw,22px) !important;
  line-height:2.15 !important;
}

@media (max-width:767px){
  #contact .eyebrow{
    gap:12px !important;
    font-size:13px !important;
    letter-spacing:.24em !important;
  }

  #contact .eyebrow::before,
  #contact .eyebrow::after{
    width:42px !important;
  }

  #contact .section-head p{
    margin-top:24px !important;
    font-size:14px !important;
    line-height:2 !important;
  }
}

#contact{
  padding-top:96px !important;
  padding-bottom:120px !important;
}

@media (max-width:767px){
  #contact{
    padding-top:72px !important;
    padding-bottom:88px !important;
  }
}

.contact-cta-v81{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:42px;
}

.contact-cta-button-v81{
  min-width:240px;
  padding:18px 36px !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.18em !important;
  border-radius:999px !important;
  box-shadow:0 14px 30px rgba(55,190,176,.18) !important;
}

@media (max-width:767px){
  .contact-cta-v81{
    margin-top:30px;
  }

  .contact-cta-button-v81{
    min-width:210px;
    padding:16px 30px !important;
    font-size:13px !important;
  }
}

.scroll-indicator-v84{
  position:fixed;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  z-index:1200;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  pointer-events:none;
  opacity:.95;
  mix-blend-mode:normal;
}

.scroll-indicator-label-v84{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:10px;
  font-weight:800;
  letter-spacing:.28em;
  color:rgba(17,17,17,.78);
}

.scroll-indicator-line-v84{
  position:relative;
  width:1px;
  height:132px;
  background:rgba(17,17,17,.18);
  overflow:hidden;
}

.scroll-indicator-line-v84::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:44px;
  background:linear-gradient(
    to bottom,
    rgba(55,190,176,0),
    rgba(55,190,176,.95),
    rgba(55,190,176,0)
  );
  animation:scrollIndicatorMove 2.2s ease-in-out infinite;
}

@keyframes scrollIndicatorMove{
  0%{ transform:translateY(-44px); opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateY(132px); opacity:0; }
}

@media (max-width:767px){
  .scroll-indicator-v84{
    right:10px;
    gap:8px;
    opacity:.5;
  }

  .scroll-indicator-label-v84{
    font-size:8px;
    letter-spacing:.18em;
  }

  .scroll-indicator-line-v84{
    height:64px;
  }
}

/* Page fade-in */
body{
  opacity:0;
  animation:pageFadeInV92 1.25s ease forwards;
}

/* Slower blur-in for Hero copy */
.hero-catch h1{
  opacity:0;
  transform:translateY(34px) scale(.985);
  filter:blur(18px);
  animation:heroTitleBlurInV92 2.05s cubic-bezier(.16,1,.3,1) .35s forwards;
}

.hero-subtitle{
  opacity:0;
  transform:translateY(22px);
  filter:blur(14px);
  animation:heroSubtitleBlurInV92 1.65s cubic-bezier(.16,1,.3,1) 1.05s forwards;
}

@keyframes pageFadeInV92{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes heroTitleBlurInV92{
  0%{
    opacity:0;
    transform:translateY(34px) scale(.985);
    filter:blur(18px);
  }
  55%{
    opacity:.72;
    filter:blur(7px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes heroSubtitleBlurInV92{
  0%{
    opacity:0;
    transform:translateY(22px);
    filter:blur(14px);
  }
  100%{
    opacity:.88;
    transform:translateY(0);
    filter:blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  body,
  .hero-catch h1,
  .hero-subtitle{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* Safe mode: hero always starts below the fixed header on every device */
main{
  padding-top:72px !important;
}

.hero-catch-only{
  margin-top:0 !important;
  aspect-ratio:16 / 9 !important;
  overflow:hidden !important;
}

.hero-catch-only .hero-video-v4,
.hero-catch-only .hero-image-v113,
.hero-catch-only img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}

.hero-catch{
  padding-top:0 !important;
}

@media (max-width:767px){
  main{
    padding-top:64px !important;
  }

  .hero-catch-only{
    margin-top:0 !important;
  }
}

/* iPad / iPhone Safari does not reliably render fixed background attachments */
@media (hover:none) and (pointer:coarse){
  .works-pre-banner,
  .service-flow-banner{
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* Explicit iPad fallback */
@media (min-width:768px) and (max-width:1366px){
  .works-pre-banner,
  .service-flow-banner{
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

.mobile-only-copy{ display:none; }
.desktop-only-copy{ display:block; }

@media (max-width:767px){
  .desktop-only-copy{ display:none !important; }
  .mobile-only-copy{ display:block !important; }
}

@media (max-width: 767px){
  #flow .flow-mockup-v63 > div{
    flex: 0 0 60vw !important;
    width: 60vw !important;
    height: 380px !important;
    min-height: 380px !important;
    padding: 30px 24px !important;
  }

  #flow .flow-mockup-v63 h3{
    font-size: 36px !important;
  }

  #flow .flow-mockup-v63 p{
    font-size: 13px !important;
    line-height: 1.9 !important;
  }

  #flow .flow-num{
    top: 22px !important;
    left: 24px !important;
    font-size: 18px !important;
  }

  #flow .flow-mockup-v63 > div::after{
    right: -18px !important;
    border-top-width: 26px !important;
    border-bottom-width: 26px !important;
    border-left-width: 34px !important;
  }
}

footer{
  text-align:center !important;
  color:#ffffff !important;
  white-space:nowrap !important;
  font-size:11px !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
  line-height:1.6 !important;
  opacity:.82 !important;
}

footer *{
  color:inherit !important;
}

/* Slightly increase spacing between FLOW cards on all devices */
#flow .flow-mockup-v63{
  gap: 28px !important;
}

@media (max-width: 767px){
  #flow .flow-mockup-v63{
    gap: 14px !important;
  }

  #flow .flow-mockup-v63 > div::after{
    right: -20px !important;
  }
}

/* FLOW card internal layout refinement */
#flow .flow-mockup-v63 > div{
  justify-content: flex-start !important;
  text-align: center !important;
}

#flow .flow-mockup-v63 h3{
  margin-top: 72px !important;
  margin-bottom: 0 !important;
  font-size: clamp(26px, 2vw, 42px) !important;
  font-weight: 300 !important;
  letter-spacing: .04em !important;
}

#flow .flow-line{
  width: 72px !important;
  height: 2px !important;
  margin: 18px auto 24px !important;
}

#flow .flow-mockup-v63 p{
  margin: auto 0 auto !important;
  max-width: 88% !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* Tablet */
@media (min-width:768px) and (max-width:1366px){
  #flow .flow-mockup-v63 h3{
    margin-top: 68px !important;
    font-size: clamp(24px, 2.4vw, 38px) !important;
  }

  #flow .flow-line{
    width: 64px !important;
    margin: 16px auto 20px !important;
  }

  #flow .flow-mockup-v63 p{
    max-width: 86% !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
}

/* iPhone */
@media (max-width:767px){
  #flow .flow-mockup-v63 h3{
    margin-top: 64px !important;
    font-size: 28px !important;
    letter-spacing: .06em !important;
  }

  #flow .flow-line{
    width: 54px !important;
    margin: 14px auto 18px !important;
  }

  #flow .flow-mockup-v63 p{
    max-width: 84% !important;
    font-size: 12.5px !important;
    line-height: 1.75 !important;
  }
}

#flow .flow-mockup-v63 > div{
  justify-content: flex-start !important;
  text-align: center !important;
}

#flow .flow-mockup-v63 h3{
  margin-top: 44px !important;
  margin-bottom: 0 !important;
  font-size: clamp(28px, 2.1vw, 44px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
}

#flow .flow-line{
  width: 120px !important;
  height: 2px !important;
  margin: 16px auto 0 !important;
}

#flow .flow-mockup-v63 p{
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  max-width: 84% !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

/* Tablet */
@media (min-width:768px) and (max-width:1366px){
  #flow .flow-mockup-v63 h3{
    margin-top: 40px !important;
    font-size: clamp(26px, 2.2vw, 38px) !important;
  }

  #flow .flow-line{
    width: 96px !important;
  }

  #flow .flow-mockup-v63 p{
    max-width: 82% !important;
    font-size: 13px !important;
  }
}

/* iPhone */
@media (max-width:767px){
  #flow .flow-mockup-v63 h3{
    margin-top: 38px !important;
    font-size: 28px !important;
  }

  #flow .flow-line{
    width: 88px !important;
    margin-top: 14px !important;
  }

  #flow .flow-mockup-v63 p{
    max-width: 82% !important;
    font-size: 12.5px !important;
    line-height: 1.75 !important;
  }
}

#flow .flow-mockup-v63 h3{
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

#flow .flow-line{
  width: calc(100% - 48px) !important;
  max-width: 220px !important;
  margin: 14px auto 0 !important;
}

#flow .flow-mockup-v63 p{
  max-width: 82% !important;
}

@media (min-width:768px) and (max-width:1366px){
  #flow .flow-mockup-v63 h3{
    margin-top: 16px !important;
  }

  #flow .flow-line{
    width: calc(100% - 44px) !important;
  }
}

@media (max-width:767px){
  #flow .flow-mockup-v63 h3{
    margin-top: 14px !important;
  }

  #flow .flow-line{
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-top: 12px !important;
  }
}

/* Third FLOW card title should be pure white */
#flow .flow-mockup-v63 > div:nth-child(3) h3{
  color: #ffffff !important;
}

/* Third FLOW card title and description in pure white */
#flow .flow-mockup-v63 > div:nth-child(3) h3,
#flow .flow-mockup-v63 > div:nth-child(3) p{
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Slightly reduce hero title size across all devices */
.hero-catch h1{
  font-size: clamp(48px, 7.5vw, 124px) !important;
}

@media (max-width: 767px){
  .hero-catch h1{
    font-size: clamp(28px, 7.6vw, 36px) !important;
  }
}

/* Refine hero title sizing and spacing */
.hero-catch h1{
  font-size: clamp(44px, 6.8vw, 112px) !important;
  line-height: 1.02 !important;
}

.hero-catch-inner{
  gap: 14px !important;
}

.hero-subtitle{
  margin-top: 6px !important;
}

@media (max-width: 767px){
  .hero-catch h1{
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.08 !important;
  }

  .hero-catch-inner{
    gap: 12px !important;
  }

  .hero-subtitle{
    margin-top: 4px !important;
  }
}

.hero-catch{
  text-align: center !important;
}

.hero-catch-inner{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.hero-catch h1{
  text-align: center !important;
  margin: 0 !important;
}

.hero-subtitle{
  display: block !important;
  text-align: center !important;
  margin-top: 8px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fixed visual banner style: image stripes + soft glass overlay */
.works-pre-banner,
.service-flow-banner{
  position: relative !important;
  overflow: hidden !important;
  border-top: none !important;
  border-bottom: none !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% 108px no-repeat,
    linear-gradient(rgba(0,0,0,.70) 0 0) 0 124px / 100% 42px no-repeat,
    linear-gradient(rgba(0,0,0,.35) 0 0) 0 178px / 100% 18px no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% 108px no-repeat,
    linear-gradient(rgba(0,0,0,.70) 0 0) 0 124px / 100% 42px no-repeat,
    linear-gradient(rgba(0,0,0,.35) 0 0) 0 178px / 100% 18px no-repeat;
}

/* Soft glass tint over 2nd and 3rd stripes */
.works-pre-banner::after,
.service-flow-banner::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:4 !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      90deg,
      rgba(247,245,239,.14),
      rgba(247,245,239,.06)
    ) 0 124px / 100% 42px no-repeat,

    linear-gradient(
      90deg,
      rgba(247,245,239,.38),
      rgba(247,245,239,.18)
    ) 0 178px / 100% 18px no-repeat !important;

  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) 0 124px / 100% 42px no-repeat,
    linear-gradient(#000 0 0) 0 178px / 100% 18px no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 124px / 100% 42px no-repeat,
    linear-gradient(#000 0 0) 0 178px / 100% 18px no-repeat;
}

@media (max-width:767px){
  .works-pre-banner,
  .service-flow-banner{
    -webkit-mask:
      linear-gradient(#000 0 0) 0 0 / 100% 54px no-repeat,
      linear-gradient(rgba(0,0,0,.70) 0 0) 0 62px / 100% 21px no-repeat,
      linear-gradient(rgba(0,0,0,.35) 0 0) 0 90px / 100% 9px no-repeat;
    mask:
      linear-gradient(#000 0 0) 0 0 / 100% 54px no-repeat,
      linear-gradient(rgba(0,0,0,.70) 0 0) 0 62px / 100% 21px no-repeat,
      linear-gradient(rgba(0,0,0,.35) 0 0) 0 90px / 100% 9px no-repeat;
  }

  .works-pre-banner::after,
  .service-flow-banner::after{
    background:
      linear-gradient(
        90deg,
        rgba(247,245,239,.14),
        rgba(247,245,239,.06)
      ) 0 62px / 100% 21px no-repeat,

      linear-gradient(
        90deg,
        rgba(247,245,239,.38),
        rgba(247,245,239,.18)
      ) 0 90px / 100% 9px no-repeat !important;

    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;

    -webkit-mask:
      linear-gradient(#000 0 0) 0 62px / 100% 21px no-repeat,
      linear-gradient(#000 0 0) 0 90px / 100% 9px no-repeat;
    mask:
      linear-gradient(#000 0 0) 0 62px / 100% 21px no-repeat,
      linear-gradient(#000 0 0) 0 90px / 100% 9px no-repeat;
  }
}

/* CRAFTING YOUR VISION supporting paragraph */
.section-head p:not(.eyebrow):not(.hero-subtitle),
.hero-heading-group + p,
#contact .section-head + p,
#contact p:first-of-type{
  font-size: clamp(13px, 0.95vw, 15px) !important;
  line-height: 1.8 !important;
  letter-spacing: 0.04em !important;
  font-weight: 300 !important;
}

/* Intro paragraph on light background */
.hero .hero-meta p,
.hero p:not(.hero-subtitle){
  font-size: clamp(13px, 0.95vw, 15px) !important;
  line-height: 1.8 !important;
  letter-spacing: 0.04em !important;
  font-weight: 300 !important;
  color: rgba(20,22,26,0.72) !important;
}

/* Contact descriptive paragraph */
#contact p{
  font-size: clamp(13px, 0.95vw, 15px) !important;
  line-height: 1.8 !important;
  letter-spacing: 0.04em !important;
  font-weight: 300 !important;
  color: rgba(247,245,239,0.78) !important;
}

@media (max-width: 767px){
  .hero p:not(.hero-subtitle),
  #contact p{
    font-size: 12.5px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.035em !important;
  }
}

/* =========================================================
   Mobile final sticky motion
   Clean consolidated block. No test CSS / no JS.
========================================================= */
/* =========================================================
   Mobile final clean CSS
   Consolidated from the stable mobile interaction + WORKS banners + CONTACT centering.
   Tablet / Desktop remain controlled by the existing base CSS above.
========================================================= */
/* =========================================================
   Mobile final layout / interaction
   Scope: iPhone only. Tablet + Desktop keep existing layout.
========================================================= */
@media (max-width: 767px){
  :root{
    --mobile-header-h: 64px;
    --panel-radius: 34px;
    --panel-handle-top: 14px;
    --panel-handle-w: 44px;
    --panel-handle-h: 3px;
  }

  html, body{
    background: "#81D8D0" !important;
  }

  /* HERO: stable background layer for the mobile stack */
  .hero-catch-only{
    position: sticky !important;
    top: var(--mobile-header-h) !important;
    z-index: 1 !important;
    margin-top: 0 !important;
  }

  /* Shared glass panel system */
  .hero-meta,
  #works,
  #service,
  #flow,
  #contact{
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: var(--panel-radius) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid rgba(255,255,255,.54) !important;
    box-shadow:
      0 -22px 48px rgba(0,0,0,.08),
      inset 0 1px 0 rgba(255,255,255,.78),
      inset 0 -1px 0 rgba(255,255,255,.18) !important;
    backdrop-filter: blur(30px) saturate(1.18) brightness(1.06) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) brightness(1.06) !important;
  }

  .hero-meta,
  #works,
  #service,
  #flow{
    position: sticky !important;
  }

  .hero-meta{
    top: var(--mobile-header-h) !important;
    z-index: 10 !important;
    margin-top: -12px !important;
    padding: 42px 20px 78px !important;
    background:
      linear-gradient(
        180deg,
        rgba(247,245,239,.64) 0%,
        rgba(247,245,239,.38) 100%
      ) !important;
  }

  #works{
    top: calc(var(--mobile-header-h) + 26px) !important;
    z-index: 20 !important;
    margin-top: -34px !important;
    padding-top: 42px !important;
    padding-bottom: 78px !important;
    background:
      linear-gradient(
        180deg,
        rgba(194,248,243,.68) 0%,
        rgba(177,238,232,.46) 44%,
        rgba(247,245,239,.36) 100%
      ) !important;
  }

  #service{
    top: calc(var(--mobile-header-h) + 52px) !important;
    z-index: 30 !important;
    margin-top: -34px !important;
    padding-top: 42px !important;
    padding-bottom: 78px !important;
    background:
      linear-gradient(
        180deg,
        rgba(250,252,251,.82) 0%,
        rgba(244,248,247,.64) 100%
      ) !important;
  }

  #flow{
    top: calc(var(--mobile-header-h) + 78px) !important;
    z-index: 40 !important;
    margin-top: -34px !important;
    padding-top: 42px !important;
    padding-bottom: 86px !important;
    background:
      linear-gradient(
        180deg,
        rgba(194,248,243,.68) 0%,
        rgba(177,238,232,.46) 44%,
        rgba(247,245,239,.36) 100%
      ) !important;
  }

  /* CONTACT stays as the same visual surface, using the uploaded v239 behavior */
  #contact{
    position: sticky !important;
    top: calc(var(--mobile-header-h) + 104px) !important;
    z-index: 50 !important;
    margin-top: -34px !important;
    min-height: calc(100svh - var(--mobile-header-h) - 104px) !important;
    height: auto !important;
    padding-top: 42px !important;
    padding-bottom: 96px !important;
    background:
      linear-gradient(
        180deg,
        rgba(250,252,251,.94) 0%,
        rgba(244,248,247,.86) 100%
      ) !important;
  }

  /* Glass highlight layer */
  .hero-meta::before,
  #works::before,
  #service::before,
  #flow::before,
  #contact::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
      radial-gradient(
        circle at 50% 0%,
        rgba(255,255,255,.72),
        rgba(255,255,255,.10) 46%,
        rgba(255,255,255,0) 78%
      ) !important;
    border-top: 1px solid rgba(255,255,255,.82) !important;
    opacity: .96 !important;
  }

  /* Panel handles */
  .hero-meta::after,
  #works::after,
  #service::after,
  #contact::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: var(--panel-handle-top) !important;
    left: 50% !important;
    width: var(--panel-handle-w) !important;
    height: var(--panel-handle-h) !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: rgba(17,17,17,.13) !important;
    pointer-events: none !important;
    z-index: 20 !important;
  }

  /* FLOW had historical ::after conflicts; use the real handle element */
  #flow::after{
    display: none !important;
    content: none !important;
  }
  #flow > .flow-panel-handle{
    display: block !important;
    position: absolute !important;
    top: var(--panel-handle-top) !important;
    left: 50% !important;
    width: var(--panel-handle-w) !important;
    height: var(--panel-handle-h) !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: rgba(17,17,17,.13) !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  .hero-meta > *,
  #works > *,
  #service > *,
  #flow > *,
  #contact > *{
    position: relative !important;
    z-index: 1 !important;
  }

  /* Section titles: match CRAFTING style */
  #works .section-head,
  #service .service-head-v31,
  #flow .section-head,
  #contact .section-head{
    display: flex !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  #works .section-head h2,
  #service .service-head-v31 h2,
  #flow .section-head h2,
  #contact .eyebrow{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 auto !important;
    color: rgba(17,17,17,.72) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .24em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  #works .section-head h2::before,
  #works .section-head h2::after,
  #service .service-head-v31 h2::before,
  #service .service-head-v31 h2::after,
  #flow .section-head h2::before,
  #flow .section-head h2::after,
  #contact .eyebrow::before,
  #contact .eyebrow::after{
    content: "" !important;
    display: block !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 1px !important;
    background: var(--accent) !important;
  }

  #works .section-divider,
  #service .section-divider,
  #flow .section-divider{
    display: none !important;
  }

  /* CRAFTING embedded banner */
  .mobile-only-crafting-banner{
    display: block !important;
    width: 100vw !important;
    margin: 34px calc(50% - 50vw) 26px !important;
    clear: both !important;
  }
  .mobile-only-crafting-banner .works-pre-banner{
    display: block !important;
    width: 100vw !important;
    height: 108px !important;
    min-height: 108px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }
  .mobile-only-crafting-banner .works-pre-banner::before,
  .mobile-only-crafting-banner .works-pre-banner::after{
    display: none !important;
    content: none !important;
  }

  /* Hide standalone banners that are not part of the mobile story */
  main > .works-pre-banner,
  .works-pre-banner[aria-hidden="true"],
  main > .service-flow-banner,
  .service-flow-banner[aria-hidden="true"]{
    display: none !important;
  }
  .mobile-only-crafting-banner .works-pre-banner{
    display: block !important;
  }

  /* WORKS three-image mask */
  .mobile-works-scene-mask-stack{
    display: grid !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100vw !important;
    height: 240px !important;
    margin: 20px calc(50% - 50vw) 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .mobile-works-mask-img{
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
  }

  .works-scroll-hint-mobile,
  .flow-scroll-hint-mobile{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 18px 0 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .24em !important;
    color: rgba(17,17,17,.48) !important;
    text-transform: uppercase !important;
  }
  .works-scroll-arrow,
  .flow-scroll-arrow{
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }

  /* SERVICE normalized to the same mobile panel rhythm */
  #service .service-head-v31 > div{
    width: 100% !important;
  }
  #service .service-list-v31{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
    margin-top: 0 !important;
  }
  #service .service-item-v31{
    min-width: 0 !important;
    padding: 22px 10px !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.26) !important;
  }
  #service .service-icon-v31{
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 14px !important;
  }
  #service .service-icon-v31 svg{
    width: 50px !important;
    height: 50px !important;
  }
  #service .service-item-v31 h3{
    font-size: 12px !important;
    letter-spacing: .14em !important;
    line-height: 1.28 !important;
    margin-bottom: 8px !important;
  }
  #service .service-item-v31 p{
    font-size: 11px !important;
    line-height: 1.65 !important;
  }

  /* Footer keeps simple ending */
  footer{
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 90 !important;
    margin-top: -24px !important;
    padding: 28px 18px 30px !important;
    border-radius: 28px 28px 0 0 !important;
    background: rgba(10,12,15,.96) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  }
}

@media (min-width: 768px){
  .mobile-only-crafting-banner,
  .works-scroll-hint-mobile,
  .flow-scroll-hint-mobile,
  .mobile-works-scene-mask-stack,
  .flow-panel-handle{
    display: none !important;
  }
}

/* WORKS restored three-image banner stack */
@media (max-width: 767px){
  /* Restore the 3 masked WORKS banners under SCROLL WORKS on mobile only */
  .mobile-works-scene-mask-stack{
    display: grid !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100vw !important;
    height: 240px !important;
    margin: 20px calc(50% - 50vw) 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .mobile-works-mask-img{
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
  }

  .mobile-works-mask-img-01{
    background-image: url("assets/images/embedded-008.jpg") !important;
  }

  .mobile-works-mask-img-02{
    background-image: url("assets/images/embedded-009.jpg") !important;
  }

  .mobile-works-mask-img-03{
    background-image: url("assets/images/embedded-010.jpg") !important;
  }
}

@media (min-width: 768px){
  .mobile-works-scene-mask-stack{
    display: none !important;
  }
}

/* CONTACT title/support copy centering */
@media (max-width: 767px){
  /* Center CONTACT title and supporting copy */
  #contact .section-head,
  #contact .contact-head,
  #contact .contact-heading{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #contact .section-head h2,
  #contact .contact-head h2,
  #contact .contact-heading h2,
  #contact .eyebrow{
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #contact .section-head p,
  #contact .contact-head p,
  #contact .contact-heading p,
  #contact .contact-lead,
  #contact .contact-copy,
  #contact .section-head .lede{
    max-width: 32ch !important;
    margin: 12px auto 0 !important;
    text-align: center !important;
  }
}

/* Final contact runway + fixed footer */
@media (max-width: 767px){
  #contact{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--mobile-header-h, 64px) + 104px) !important;
    z-index: 50 !important;
    margin-top: -34px !important;
    min-height: calc(100dvh - var(--mobile-header-h, 64px) - 104px) !important;
    padding-bottom: 82px !important;
  }

  .mobile-contact-runway{
    display: block !important;
    height: 22dvh !important;
    width: 100% !important;
    pointer-events: none !important;
    background: transparent !important;
  }

  footer{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px 20px 0 0 !important;
    background: rgba(10,12,15,.92) !important;
    color: #fff !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .08em !important;
    pointer-events: none !important;
  }

  body{
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior-y: contain !important;
  }
}

@media (min-width: 768px){
  .mobile-contact-runway{
    display: none !important;
  }
}

/* Final viewport-height locks for the stacked panels */
@media (max-width: 767px){
  .hero-meta,
  #works,
  #service,
  #flow{
    box-sizing: border-box !important;
    overflow: hidden !important;
    height: calc(100dvh - var(--mobile-header-h, 64px) - var(--panel-offset, 0px)) !important;
    max-height: calc(100dvh - var(--mobile-header-h, 64px) - var(--panel-offset, 0px)) !important;
    min-height: auto !important;
  }

  .hero-meta{ --panel-offset: 0px; }
  #works{ --panel-offset: 26px; }
  #service{ --panel-offset: 52px; }
  #flow{ --panel-offset: 78px; }
}

@media (max-width: 767px){
  .hero-meta,
  #works,
  #service,
  #flow,
  #contact{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.14) 0%,
        rgba(255,255,255,0.075) 42%,
        rgba(255,255,255,0.035) 100%
      ) !important;

    border: 1px solid rgba(255,255,255,0.50) !important;

    backdrop-filter:
      blur(64px)
      saturate(1.28)
      brightness(1.03) !important;

    -webkit-backdrop-filter:
      blur(64px)
      saturate(1.28)
      brightness(1.03) !important;

    box-shadow:
      0 34px 84px rgba(15,23,42,0.07),
      0 14px 36px rgba(15,23,42,0.04),
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 -1px 0 rgba(255,255,255,0.04) !important;
  }

  .hero-meta::before,
  #works::before,
  #service::before,
  #flow::before,
  #contact::before{
    background:
      radial-gradient(
        circle at 50% -14%,
        rgba(255,255,255,0.82) 0%,
        rgba(255,255,255,0.34) 14%,
        rgba(255,255,255,0.08) 34%,
        rgba(255,255,255,0.00) 68%
      ),
      linear-gradient(
        135deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.00) 42%,
        rgba(255,255,255,0.04) 100%
      ) !important;
    opacity: 1 !important;
  }

  .hero-meta::after,
  #works::after,
  #service::after,
  #flow::after,
  #contact::after{
    border: 1px solid rgba(255,255,255,0.16) !important;
    opacity: 1 !important;
  }
}

@media (max-width: 767px){
  /*
    Directly neutralize the actual top handle pseudo elements.
    Keep only a flat, non-glowing grey pill.
  */

  #works::after,
  #service::after,
  #contact::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 14px !important;
    left: 50% !important;
    width: 44px !important;
    height: 3px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;

    background: rgba(17,17,17,0.13) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    z-index: 30 !important;
    pointer-events: none !important;
  }

  /*
    FLOW uses a real handle element, so flatten it too.
  */
  #flow > .flow-panel-handle{
    background: rgba(17,17,17,0.13) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero-meta::after{
    background: rgba(17,17,17,0.13) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 767px){
  /*
    Final mobile ending:
    CONTACT keeps the height needed to reach the FLOW stop position.
    Once CONTACT reaches header + 104px, downward scrolling is locked.
    Upward scrolling remains available.
  */
  #contact{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--mobile-header-h, 64px) + 104px) !important;
    z-index: 50 !important;
    margin-top: -34px !important;

    min-height: calc(100dvh - var(--mobile-header-h, 64px) - 104px) !important;
    height: auto !important;
    padding-bottom: 82px !important;
  }

  .mobile-contact-runway{
    display: block !important;
    height: var(--mobile-contact-runway-h, 24dvh) !important;
    width: 100% !important;
    pointer-events: none !important;
    background: transparent !important;
  }

  footer{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px 20px 0 0 !important;
    background: rgba(10,12,15,.92) !important;
    color: #fff !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .08em !important;
    pointer-events: none !important;
  }

  body{
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior-y: contain !important;
  }

  html.mobile-end-locked,
  html.mobile-end-locked body{
    overscroll-behavior-y: none !important;
  }
}

@media (min-width: 768px){
  .mobile-contact-runway{
    display: none !important;
  }
}

@media (max-width: 767px){
  .hero-meta{
    padding-top: 38px !important;
    padding-bottom: 58px !important;
  }

  .hero-meta p{
    margin-top: 18px !important;
    font-size: 13px !important;
    line-height: 1.82 !important;
  }

  .hero-actions{
    margin-top: 20px !important;
  }

  .mobile-only-crafting-banner{
    margin-top: 24px !important;
    margin-bottom: 18px !important;
  }

  .mobile-only-crafting-banner .works-pre-banner{
    height: 86px !important;
    min-height: 86px !important;
  }

  #works{
    padding-top: 38px !important;
    padding-bottom: 58px !important;
  }

  .works-scroll-v58{
    padding-bottom: 10px !important;
  }

  .works-scroll-v58 .work-card{
    flex-basis: 72vw !important;
  }

  .works-scroll-hint-mobile{
    margin-top: 12px !important;
  }

  .mobile-works-scene-mask-stack{
    height: 206px !important;
    gap: 7px !important;
    margin-top: 14px !important;
  }

  #service{
    padding-top: 38px !important;
    padding-bottom: 58px !important;
  }

  #service .service-list-v31{
    gap: 10px !important;
  }

  #service .service-item-v31{
    padding: 18px 9px !important;
  }

  #service .service-icon-v31{
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 10px !important;
  }

  #service .service-icon-v31 svg{
    width: 44px !important;
    height: 44px !important;
  }

  #service .service-item-v31 h3{
    font-size: 11px !important;
    line-height: 1.22 !important;
    margin-bottom: 6px !important;
  }

  #service .service-item-v31 p{
    font-size: 10.5px !important;
    line-height: 1.52 !important;
  }

  #flow{
    padding-top: 38px !important;
    padding-bottom: 62px !important;
  }

  #flow .flow-mockup-v63{
    padding-bottom: 14px !important;
  }

  #flow .flow-mockup-v63 > div{
    flex-basis: 58vw !important;
    width: 58vw !important;
    height: 342px !important;
    min-height: 342px !important;
    padding: 28px 22px !important;
  }

  #flow .flow-num{
    top: 20px !important;
    left: 22px !important;
    font-size: 17px !important;
  }

  #flow .flow-mockup-v63 h3{
    font-size: 34px !important;
  }

  #flow .flow-line{
    margin: 18px auto 16px !important;
  }

  #flow .flow-mockup-v63 p{
    font-size: 12.5px !important;
    line-height: 1.72 !important;
  }

  .flow-scroll-hint-mobile{
    margin-top: 12px !important;
  }
}

@media (max-width: 767px){
  .mobile-nav-marker{
    display: block !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}

@media (min-width: 768px){
  .mobile-nav-marker{
    display: none !important;
  }
}

@media (max-width: 767px){
  .mobile-works-scene-mask-stack{
    display: grid !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 7px !important;
    width: 100vw !important;
    height: 206px !important;
    margin: 14px calc(50% - 50vw) 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .mobile-works-mask-img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
  }

  .mobile-works-mask-img-01{ background-image: url("assets/images/embedded-008.jpg") !important; }
  .mobile-works-mask-img-02{ background-image: url("assets/images/embedded-009.jpg") !important; }
  .mobile-works-mask-img-03{ background-image: url("assets/images/embedded-011.jpg") !important; }
}

@media (min-width: 768px){
  .mobile-works-scene-mask-stack{ display: none !important; }
}

@media (max-width: 767px){
  #contact .section-head p{
    max-width: 31ch !important;
    margin: 22px auto 0 !important;
    text-align: center !important;
    font-size: 12.5px !important;
    line-height: 1.9 !important;
  }

  #contact .contact-cta-v81{
    margin-top: 24px !important;
  }
}

@media (min-width: 768px){
  #contact .section-head p{
    max-width: 760px !important;
    margin: 26px auto 0 !important;
    text-align: center !important;
  }
}