@import url("https://fonts.googleapis.com/css2?family=Ovo&display=swap");
:root{--blue:#073aa6;--ink:#202020;--serif:'Playfair Display',Georgia,serif;--sans:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);background:#fff}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}.site-header{height:75px;position:relative;z-index:20;display:flex;align-items:center;padding:0 4.8%;background:#f9f9f9}.brand{display:flex;align-items:center;gap:8px;color:var(--blue);font-family:var(--sans);font-size:13px;line-height:1.15;letter-spacing:.23em;font-weight:600}.brand img{width:39px;height:39px}.desktop-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:35px;font:12px var(--serif);color:var(--blue)}.desktop-nav a:hover,.project-link:hover,.view-all:hover{opacity:.65}.menu-toggle,.mobile-nav{display:none}.hero{position:relative;min-height:660px;background:#f7f7f7}.hero-copy{position:absolute;left:7%;top:190px;width:39%;z-index:1}.hero-copy h1{font-size:clamp(25px,3.1vw,45px);line-height:1.55;letter-spacing:.035em;font-weight:600;margin:0 0 22px}.hero-copy p{font-size:12px;line-height:2.1;max-width:410px}.hero-feature{position:absolute;right:10.5%;top:75px;width:39%;z-index:3}.project-placeholder{height:clamp(360px,43vw,600px);background:#efefef}.project-link{display:flex;justify-content:flex-end;align-items:center;gap:16px;color:var(--blue);font:17px var(--serif);padding-top:10px}.project-link span{font:26px var(--sans)}.vertical-caption{position:absolute;right:4.2%;top:75px;writing-mode:vertical-rl;font:11px/1.4 var(--serif);max-height:430px}.seal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:145px;aspect-ratio:1;background:var(--blue);color:white;text-align:center;font-size:13px;clip-path:polygon(50% 0%,56% 3%,63% 1%,69% 5%,76% 5%,81% 10%,88% 13%,91% 20%,96% 26%,96% 33%,100% 40%,97% 47%,100% 54%,96% 61%,97% 68%,92% 75%,88% 82%,81% 85%,76% 92%,69% 93%,63% 98%,56% 97%,50% 100%,43% 97%,36% 99%,30% 95%,23% 94%,18% 89%,11% 85%,8% 78%,3% 73%,4% 66%,0% 59%,3% 52%,0% 45%,4% 38%,3% 31%,8% 24%,12% 17%,19% 14%,24% 8%,31% 7%,37% 2%,44% 3%)}.seal span{font-size:21px}.hero-seal{position:absolute;right:6.5%;top:-62px;z-index:5}.about{position:relative;margin:-100px 4.6% 0;background:#fff;border-radius:12px 12px 0 0;padding:235px 4.5% 125px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:start}.about-photo{max-width:390px}.about-photo img{display:block;width:100%;height:auto}.about-content{max-width:430px;font-size:13px;line-height:2.15;letter-spacing:.035em}.about-content p{margin:0 0 10px}.designer{display:flex;align-items:center;gap:20px;margin:28px 0 22px;font-family:var(--serif)}.designer small{font-size:11px}.designer span{font-size:21px}.designer a{font-size:25px;margin-left:auto}.services{padding:0;list-style:none;line-height:2}.services li:before{content:'・'}.section-title{font:clamp(38px,4vw,64px) var(--serif);color:var(--blue);font-weight:400;margin:0;padding:0 4.6% 3px}.works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #7190d5}.work-card{display:block;min-width:0;border-right:1px solid #7190d5;border-bottom:1px solid #7190d5}.work-card:nth-child(3n){border-right:0}.work-thumb{height:auto;aspect-ratio:1.32;background:#efefef}.work-card:nth-child(5n) .work-thumb{background:#f2f0ed}.work-title{font-size:12px;min-height:57px;padding:15px 12px}.work-card:hover .work-thumb{background:#e5e8ef}.view-all-wrap{text-align:center;padding:50px 0 125px}.view-all{font:24px var(--serif);border-bottom:1px solid}.contact-section{background:var(--blue);color:white;min-height:700px;padding:75px 4.6% 20px;display:flex;flex-direction:column;justify-content:space-between}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:9%}.contact-copy h2{font:clamp(65px,8vw,125px)/.98 var(--serif);letter-spacing:-.04em;font-weight:400;margin:0 0 26px}.accent-mark{display:inline-block;font-family:var(--serif);font-style:italic;transform:rotate(20deg);font-weight:bold}.contact-copy p{font-size:16px}.contact-form{padding-top:10px}.form-field{display:block;margin-bottom:12px;font-size:12px}.form-field span{display:block;margin-bottom:10px}.form-field input,.form-field textarea{width:100%;background:none;color:white;border:0;border-bottom:1px solid #93afe7;border-radius:0;outline:0;padding:8px 0}.form-field textarea{height:120px;resize:vertical}.form-field input:focus,.form-field textarea:focus{border-bottom-color:white}.form-submit{width:100%;border:0;border-radius:40px;background:white;color:var(--blue);font-size:22px;padding:13px;margin-top:38px}.form-note{font-size:11px;line-height:1.7;opacity:.85}.copyright{text-align:center;font:12px var(--serif);margin:65px 0 0}.works-page{position:relative;padding-top:45px}.works-heading{display:flex;align-items:end;justify-content:space-between;padding:0 4.6% 8px}.works-heading h1{font:clamp(42px,5vw,65px) var(--serif);margin:0}.filters{display:flex;gap:25px}.filters button{border:0;background:none;padding:8px 0;color:#888;font:15px var(--serif)}.filters button.active{color:var(--blue)}.pagination{display:flex;align-items:center;justify-content:center;gap:10px;padding:38px 0 150px}.pagination button{border:1px solid #aaa;background:white;border-radius:50%;width:34px;height:34px;font:15px var(--serif)}.pagination button.active{background:var(--blue);color:white;border-color:var(--blue)}.pagination button.arrow{border:0;color:var(--blue);font-size:25px}.works-seal{position:absolute;right:7%;bottom:55px}.project-hero-space{height:480px;background:white}.project-description{padding:25px 4.6% 32px;background:#fafafa}.project-description h1{font:30px var(--serif);margin:0 0 5px}.project-subtitle{font-size:15px;margin:0 0 28px!important}.project-description p{font-size:13px;line-height:2}.project-image-space{height:490px;border-bottom:1px solid #a6b9e8}.project-image-space.second{height:470px}.project-navigation{display:flex;justify-content:space-between;padding:48px 4.6% 160px;color:var(--blue);font:16px var(--serif)}.thanks-page{min-height:calc(100vh - 75px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px 100px}.thanks-page h1{color:var(--blue);font:clamp(50px,7vw,110px) var(--serif);margin:0 0 55px}.thanks-page p{font-size:20px;line-height:2}.thanks-back{background:var(--blue);color:white;border-radius:40px;min-width:320px;padding:15px 35px;margin-top:80px;font-size:19px}
@media(min-width:1440px){.hero{min-height:800px}.hero-copy{top:250px}.hero-feature{top:100px}.about{padding-top:250px}}@media(max-width:767px){.site-header{height:68px;padding:0 6%}.brand img{width:34px;height:34px}.brand{font-size:11px}.desktop-nav{display:none}.menu-toggle{display:flex;position:absolute;right:6%;top:19px;width:35px;height:30px;flex-direction:column;justify-content:center;gap:7px;background:none;border:0}.menu-toggle span{display:block;height:2px;background:var(--blue);width:100%}.mobile-nav{position:absolute;top:68px;left:0;right:0;background:white;padding:25px 6%;box-shadow:0 8px 15px #0001;flex-direction:column;gap:22px;color:var(--blue);font:18px var(--serif)}.mobile-nav.open{display:flex}.hero{min-height:0;padding:80px 6% 75px}.hero-copy,.hero-feature,.vertical-caption,.hero-seal{position:static}.hero-copy{width:100%;margin-bottom:45px}.hero-copy h1{font-size:clamp(25px,7vw,35px)}.hero-copy p{font-size:12px}.hero-feature{width:100%}.project-placeholder{height:auto;aspect-ratio:4/5}.project-link{font-size:14px}.vertical-caption{writing-mode:horizontal-tb;max-height:none;margin:28px 0 0;font-size:10px}.hero-seal{position:absolute;right:6%;top:15px;width:82px;font-size:9px}.hero-seal span{font-size:14px}.about{margin:0;padding:65px 6% 100px;border-radius:0}.about-grid{grid-template-columns:1fr;gap:42px}.about-photo{width:75%;max-width:350px;margin:auto}.about-content{max-width:none;font-size:13px}.designer{gap:12px}.designer span{font-size:19px}.section-title{font-size:43px;padding-left:6%}.works-grid{grid-template-columns:1fr}.work-card{border-right:0!important}.work-thumb{aspect-ratio:1.4}.work-title{min-height:52px}.view-all-wrap{padding:38px 0 95px}.contact-section{padding:65px 6% 25px;min-height:0}.contact-layout{grid-template-columns:1fr;gap:35px}.contact-copy h2{font-size:clamp(67px,16vw,100px)}.contact-copy p{font-size:14px}.form-submit{font-size:18px}.copyright{margin-top:85px}.works-page{padding-top:55px}.works-heading{display:block;padding:0 6% 15px}.works-heading h1{font-size:49px;margin-bottom:15px}.filters{gap:18px;overflow-x:auto}.filters button{font-size:13px;flex-shrink:0}.pagination{padding:35px 0 130px}.works-seal{width:90px;right:6%;bottom:20px;font-size:10px}.works-seal span{font-size:14px}.project-hero-space{height:300px}.project-description{padding:25px 6%}.project-description h1{font-size:27px}.project-description p{font-size:12px}.project-image-space{height:320px}.project-image-space.second{height:300px}.project-navigation{padding:35px 6% 100px;font-size:12px}.thanks-page{min-height:calc(100vh - 68px)}.thanks-page h1{font-size:clamp(40px,10vw,68px);margin-bottom:35px}.thanks-page p{font-size:15px}.thanks-back{min-width:min(100%,320px);margin-top:60px}}@media(min-width:768px) and (max-width:1050px){.hero-copy{left:5%;width:40%}.hero-feature{right:9%;width:40%}.about-grid{gap:7%}.contact-copy h2{font-size:75px}}

/* Figma header: 1440px frame / 72px header */
:root{--blue:#01359e}
.site-header{height:72px;padding:0 5%;background:#f9f9f9}
.brand{display:block;width:146px;height:50px;flex:0 0 auto}
.brand img{display:block;width:100%;height:100%;object-fit:contain}
.desktop-nav{left:50%;gap:0;transform:translateX(-50%);align-items:center;font-family:'Playfair Display',Georgia,serif;font-size:16px;font-weight:400;letter-spacing:0;color:#01359e}
.desktop-nav a:nth-child(1){width:55px;margin-right:44px}
.desktop-nav a:nth-child(2){width:65px;margin-right:41px}
.desktop-nav a:nth-child(3){width:57px}
@media(max-width:767px){.site-header{height:68px;padding:0 6%}.brand{width:117px;height:40px}.brand img{width:100%;height:100%}}

/* Figma 1440px: wave CTA X1128 Y-32 W210 H210. Hero begins below 72px header. */
@media (min-width: 768px) {
  .hero-seal { width: 210px; height: 210px; aspect-ratio: 1; top: -104px; right: auto; left: calc(50% + 408px); }
}
@media (min-width: 768px) and (max-width: 1439px) {
  .hero-seal { left: auto; right: 7.083333%; }
}

/* Actual Figma wave SVG; keep link text accessible and editable. */
.seal{
  background: transparent url('assets/contact-button.svg') center / contain no-repeat;
  clip-path:none;
  color:#fff;
}
.seal:hover{opacity:.88}
.seal:focus-visible{outline:3px solid #01359e;outline-offset:4px}
@media(min-width:768px){
  .hero-seal{width:210px;height:210px}
}
@media(max-width:767px){
  .hero-seal{height:82px;aspect-ratio:1}
  .works-seal{height:90px;aspect-ratio:1}
}

/* Figma CTA: text at X1179 Y59 on 1440 frame; seal at X1128 Y-32 */
.seal{position:absolute;display:block;font-size:initial;gap:0;text-align:left}
.seal-label{position:absolute;left:24.2857%;top:43.3333%;white-space:nowrap;font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;font-size:18px;font-weight:500;line-height:1.5;color:#fff}
.seal-mail{position:absolute;left:50%;top:61%;width:26px;height:26px;transform:translateX(-50%)}
@media(max-width:767px){.seal-label{font-size:9px}.seal-mail{width:15px;height:15px}}

/* Keep the contact seal visually above the header. */
.site-header{z-index:1}
.hero-seal{z-index:50}

/* Center the CTA label and mail icon together inside the wave SVG. */
.seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}
.seal .seal-label {
  position: static;
  left: auto;
  top: auto;
  display: block;
  white-space: nowrap;
  line-height: 1.5;
}
.seal .seal-mail {
  position: static;
  left: auto;
  top: auto;
  display: block;
  width: 26px;
  height: 26px;
  transform: none;
}
@media (max-width:767px) {
  .seal { gap: 2px; }
  .seal .seal-label { font-size: 9px; }
  .seal .seal-mail { width: 15px; height: 15px; }
}


/* TOP / Figma desktop 1440 x 944, including 72px header. */
@media (min-width: 1100px) {
  .hero { height:872px; min-height:872px; }
  .hero-copy { left:calc(50% - 620px); top:288px; width:432px; }
  .hero-copy h1 { width:432px; margin:0 0 25px; font-family:'Zen Kaku Gothic New',sans-serif; font-size:48px; font-weight:500; line-height:65px; letter-spacing:0; }
  .hero-copy p { width:432px; max-width:none; margin:0; font-family:'Zen Kaku Gothic New',sans-serif; font-size:14px; font-weight:400; line-height:24px; letter-spacing:0; }
  .hero-feature { left:calc(50% + 10px); right:auto; top:123px; width:560px; }
  .hero-feature .project-placeholder { width:560px; height:700px; }
  .hero-feature .project-link { position:absolute; top:705px; right:0; padding:0; font-family:'Playfair Display',Georgia,serif; font-size:20px; line-height:26px; }
  .vertical-caption { left:calc(50% + 605px); right:auto; top:123px; margin:0; writing-mode:vertical-rl; max-height:none; height:619px; width:48px; font-family:'Playfair Display',Georgia,serif; font-size:14px; font-weight:400; line-height:1.3; }
}
@media (min-width:1100px) and (max-width:1439px) {
  .hero-copy { left:6.9444%; }
  .hero-feature { left:50.6944%; width:38.8889%; }
  .hero-feature .project-placeholder { width:100%; height:auto; aspect-ratio:4/5; }
  .hero-feature .project-link { top:calc(100% + 5px); }
  .vertical-caption { left:92.0139%; }
}
@media (min-width:768px) and (max-width:1099px) {
  .hero { min-height:760px; }
  .hero-copy { top:245px; left:6%; width:42%; }
  .hero-copy h1 { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:500; line-height:1.42; }
  .hero-copy p { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:400; line-height:1.8; }
  .hero-feature { top:130px; right:8%; width:41%; }
  .project-placeholder { height:auto; aspect-ratio:4/5; }
  .vertical-caption { top:130px; right:2%; font-family:'Playfair Display',Georgia,serif; }
}
@media (max-width:767px) {
  .hero-copy h1 { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:500; }
  .hero-copy p { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:400; line-height:1.8; }
  .vertical-caption { font-family:'Playfair Display',Georgia,serif; }
}

/* VIEW PROJECT: slim right-facing chevron, matching Figma reference. */
.project-link { gap: 24px; }
.project-link .project-chevron {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-right: 5px;
}
@media (max-width:767px) {
  .project-link { gap: 14px; }
  .project-link .project-chevron { width: 11px; height: 11px; border-width: 1.2px; margin-right: 3px; }
}

/* ABOUT: Figma 1440px artboard; all coordinates measured from page top. */
@media (min-width: 1100px) {
  .about {
    width:1306px; height:1011px; margin:-229px auto 0;
    padding:329px 0 0; border-radius:16px 16px 0 0;
    position:relative; z-index:2;
  }
  .about-grid {display:block; position:relative; height:100%;}
  .about-photo {position:absolute; left:65px; top:0; width:400px; max-width:none; height:474px;}
  .about-photo img {width:100%;height:100%;object-fit:cover;}
  .about-content {position:absolute;left:767px;top:0;width:372px;max-width:none;
    font-family:'Zen Kaku Gothic New',sans-serif;font-size:16px;font-weight:400;line-height:30px;letter-spacing:0;}
  .about-content>p {margin:0;}
  .designer {position:absolute;top:301px;left:0;margin:0;display:block;width:372px;height:35px;
    font-family:'Playfair Display',Georgia,serif;line-height:1;}
  .designer small {position:absolute;left:0;top:2px;font-size:14px;}
  .designer span {position:absolute;left:92px;top:0;font-size:25px;white-space:nowrap;}
  .designer a {position:absolute;left:348px;top:3px;width:24px;height:24px;margin:0;display:block;}
  .designer a img {display:block;width:24px;height:24px;object-fit:contain;}
  .services {position:absolute;left:0;top:360px;margin:0;padding:0;list-style:none;
    font-family:'Zen Kaku Gothic New',sans-serif;font-size:16px;line-height:30px;font-weight:400;}
}
@media (min-width:1100px) and (max-width:1439px) {
  .about {width:90.6944%;height:auto;min-height:850px;padding-top:clamp(235px,22.85vw,329px);}
  .about-photo {left:4.977%;width:30.63%;height:auto;aspect-ratio:400/474;}
  .about-content {left:58.73%;width:28.48%;font-size:clamp(13px,1.11vw,16px);line-height:1.875;}
  .designer {top:clamp(255px,20.9vw,301px);width:100%;}
  .designer a {left:auto;right:0;}
  .services {top:clamp(305px,25vw,360px);font-size:clamp(13px,1.11vw,16px);}
}
@media (min-width:768px) and (max-width:1099px) {
  .about {margin:-100px 4.6% 0;}
}
@media (max-width:1099px) {
  .designer a {display:block;margin-left:auto;width:24px;height:24px;}
  .designer a img {display:block;width:100%;height:100%;object-fit:contain;}
  .about-content {font-family:'Zen Kaku Gothic New',sans-serif;}
}
@media (max-width:767px) {
  .about {margin:0;padding:65px 6% 100px;height:auto;}
  .about-content {font-size:14px;line-height:1.9;}
  .services {font-size:14px;line-height:2;}
}

/* TOP WORKS — Figma 1440px reference (absolute page Y: 1726–2968).
   Each of the six cards is 480 × 448: 360 image + 88 caption. */
@media (min-width:1440px) {
  .home-works { position:relative; height:1242px; background:#fff; }
  .home-works .section-title {
    position:absolute; left:calc(50% - 653px); top:8px;
    width:372px; height:63px; padding:0; margin:0;
    font-family:'Playfair Display',Georgia,serif; font-size:64px;
    font-weight:400; line-height:1; color:#01359E;
  }
  .home-works .works-grid {
    position:absolute; left:0; top:63px; width:100%; height:896px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,448px);
    border-top:1px solid #01359E;
  }
  .home-works .work-card { height:448px; border-color:#01359E; }
  .home-works .work-thumb { width:100%; height:360px; aspect-ratio:auto; }
  .home-works .work-title {
    height:88px; min-height:0; padding:23px 16px 0;
    font-family:'Zen Kaku Gothic New',sans-serif;
    font-size:18px; font-weight:400; line-height:30px;
  }
  .home-works .view-all-wrap {
    position:absolute; top:1029px; left:0; width:100%;
    padding:0; text-align:center;
  }
  .home-works .view-all {
    font-family:'Playfair Display',Georgia,serif; font-size:35px;
    font-weight:400; line-height:1.2; color:#01359E;
  }
}
@media (min-width:768px) and (max-width:1439px) {
  .home-works .section-title {font-family:'Playfair Display',Georgia,serif;color:#01359E;}
  .home-works .works-grid {grid-template-rows:repeat(2,auto);border-color:#01359E;}
  .home-works .work-card {border-color:#01359E;}
  .home-works .work-title {font-family:'Zen Kaku Gothic New',sans-serif;font-size:clamp(14px,1.25vw,18px);line-height:30px;padding-left:16px;min-height:75px;}
  .home-works .view-all {font-family:'Playfair Display',Georgia,serif;font-size:clamp(26px,2.43vw,35px);color:#01359E;}
}
@media (max-width:767px) {
  .home-works .section-title {font-family:'Playfair Display',Georgia,serif;color:#01359E;}
  .home-works .works-grid {border-color:#01359E;}
  .home-works .work-card {border-color:#01359E;}
  .home-works .work-title {font-family:'Zen Kaku Gothic New',sans-serif;font-size:16px;line-height:26px;padding:14px 16px;}
  .home-works .view-all {font-family:'Playfair Display',Georgia,serif;color:#01359E;}
}

/* WORKS heading: add 20px of breathing room before the card grid.
   At the 1440px Figma reference width, move the grid and everything
   below it down by 20px while keeping the heading in place. */
@media (min-width:1440px) {
  .home-works { height:1262px; }
  .home-works .works-grid { top:83px; }
  .home-works .view-all-wrap { top:1049px; }
}
@media (max-width:1439px) {
  .home-works .section-title { margin-bottom:20px; }
}


/* CONTACT — Figma 1440 artboard, absolute document Y2968–3912. */
:root { --blue:#01359E; }
@media (min-width:1440px) {
  /* Preserve the 20px WORKS heading gap without shifting CONTACT from Y2968. */
  .home-works { height:1242px; }
  .contact-section {
    position:relative; width:100%; height:944px; min-height:944px;
    padding:0; display:block; border-radius:16px 16px 0 0;
    background:#01359E; overflow:hidden;
  }
  .contact-layout { display:block; }
  .contact-copy h2 {
    position:absolute; top:84px; left:67px; width:539px; height:256px;
    margin:0; font-family:'Playfair Display',Georgia,serif; font-size:128px;
    font-weight:400; line-height:122px; letter-spacing:0;
  }
  .contact-copy p {
    position:absolute; top:364px; left:67px; margin:0;
    font-family:'Zen Kaku Gothic New',sans-serif; font-size:24px;
    font-weight:400; line-height:1.4;
  }
  .contact-form {position:absolute; top:110px; left:791px; width:579px; padding:0; margin:0;}
  .contact-form .form-field {width:372px; height:42px; margin:0 0 18px; font-family:'Zen Kaku Gothic New',sans-serif; font-size:16px; font-weight:400;}
  .contact-form .form-field span {margin:0; line-height:20px;}
  .contact-form .form-field input, .contact-form .form-field textarea {
    display:block; width:100%; height:22px; min-height:22px; padding:0;
    border:0; border-bottom:1px solid #fff; border-radius:0;
    background:transparent; color:white; resize:none;
  }
  .contact-form .form-field:nth-child(3) {height:174px;}
  .contact-form .form-field:nth-child(3) textarea {height:154px;}
  .contact-form .form-submit {
    position:absolute; top:555px; left:3px; width:579px; height:70px;
    margin:0; padding:0; border:0; border-radius:50px;
    background:#fff; color:#01359E;
    font-family:'Zen Kaku Gothic New',sans-serif; font-size:30px; font-weight:500;
  }
  .contact-form .form-note {position:absolute; top:650px; left:3px; width:570px; margin:0;}
  .copyright {
    position:absolute; top:900px; left:0; width:100%; margin:0;
    font-family:'Playfair Display',Georgia,serif; font-size:16px; font-weight:400;
    line-height:24px; text-align:center;
  }
}
@media (min-width:768px) and (max-width:1439px) {
  .contact-section {background:#01359E; border-radius:16px 16px 0 0;}
  .contact-copy h2 {font-family:'Playfair Display',Georgia,serif;letter-spacing:0;line-height:.96;}
  .contact-copy p,.form-field,.form-submit {font-family:'Zen Kaku Gothic New',sans-serif;}
  .contact-form .form-field input,.contact-form .form-field textarea {border-bottom-color:#fff;}
}
@media (max-width:767px) {
  .contact-section {background:#01359E;border-radius:16px 16px 0 0;}
  .contact-copy h2 {font-family:'Playfair Display',Georgia,serif;letter-spacing:0;line-height:1;}
  .contact-copy p {font-family:'Zen Kaku Gothic New',sans-serif;}
  .contact-form .form-field {font-family:'Zen Kaku Gothic New',sans-serif;font-size:14px;}
  .contact-form .form-field input,.contact-form .form-field textarea {border-bottom-color:#fff;}
  .form-submit {font-family:'Zen Kaku Gothic New',sans-serif;}
}

/* CONTACT refinement: match form input right edge with submit button; branded exclamation SVG. */
.contact-copy .accent-mark {display:inline-block; width:.46em; height:.46em; object-fit:contain; transform:none; vertical-align:-.02em; margin-left:.015em;}
@media (min-width:1440px) {
 .contact-form .form-field {width:579px;}
 .contact-form .form-submit {left:3px;}
}
@media (min-width:768px) and (max-width:1439px) {
 .contact-form .form-field {width:100%;}
}

/* WORKS listing page — Figma desktop reference 1440px. */
body[data-page="works"] .works-heading h1 {font-family:'Playfair Display',Georgia,serif;font-weight:400;color:#181818;}
body[data-page="works"] .filters {gap:14px;align-items:center;}
body[data-page="works"] .filters button {font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:400;color:#828282;padding:0;line-height:1.2;}
body[data-page="works"] .filters button.active {color:#01359E;}
body[data-page="works"] .works-grid {border-top:1px solid #01359E;}
body[data-page="works"] .work-card {border-right:1px solid #01359E;border-bottom:1px solid #01359E;}
body[data-page="works"] .work-card:nth-child(3n) {border-right:0;}
body[data-page="works"] .work-title {font-family:'Zen Kaku Gothic New',sans-serif;font-size:18px;font-weight:400;line-height:30px;padding:18px 16px 0;min-height:88px;}
body[data-page="works"] .pagination {gap:15px;padding:0;}
body[data-page="works"] .pagination button {width:44px;height:44px;flex:0 0 44px;font:20px 'Playfair Display',Georgia,serif;}
body[data-page="works"] .pagination button.arrow {border:0;font-size:28px;}
body[data-page="works"] .works-seal {display:none;}
@media (min-width:1440px) {
 body[data-page="works"] .works-page {height:1799px;padding:0;position:relative;}
 body[data-page="works"] .works-heading {position:absolute;left:0;top:117px;width:100%;height:55px;padding:0 67px;display:block;}
 body[data-page="works"] .works-heading h1 {position:absolute;left:67px;top:0;margin:0;font-size:64px;line-height:1;}
 body[data-page="works"] .filters {position:absolute;right:67px;top:0;height:48px;}
 body[data-page="works"] .works-grid {position:absolute;top:172px;left:0;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,448px);}
 body[data-page="works"] .work-thumb {height:360px;aspect-ratio:auto;}
 body[data-page="works"] .pagination {position:absolute;left:0;right:0;top:1574px;height:44px;}
}
@media (min-width:768px) and (max-width:1439px) {
 body[data-page="works"] .works-page {padding-top:100px;min-height:0;}
 body[data-page="works"] .works-heading {padding:0 4.65% 16px;align-items:center;}
 body[data-page="works"] .works-heading h1 {font-size:clamp(44px,4.45vw,64px);}
 body[data-page="works"] .filters button {font-size:clamp(14px,1.4vw,20px);}
 body[data-page="works"] .work-thumb {aspect-ratio:4/3;}
 body[data-page="works"] .pagination {padding:58px 0 160px;}
}
@media (max-width:767px) {
 body[data-page="works"] .works-page {padding-top:55px;}
 body[data-page="works"] .works-heading {padding:0 6% 18px;}
 body[data-page="works"] .works-heading h1 {font-size:49px;}
 body[data-page="works"] .filters {gap:14px;}
 body[data-page="works"] .filters button {font-size:15px;}
 body[data-page="works"] .work-thumb {aspect-ratio:4/3;}
 body[data-page="works"] .work-title {min-height:72px;font-size:15px;line-height:24px;padding:12px 16px;}
 body[data-page="works"] .pagination {padding:40px 0 110px;gap:10px;}
 body[data-page="works"] .pagination button {width:36px;height:36px;flex-basis:36px;font-size:16px;}
}

/* WORKS list refinements — 2026-11-09 */
/* The supplied logo SVG already includes the IWA DESIGN lettering. */
.site-header .brand > span {display:none !important;}
/* Fine-line chevrons matching the supplied arrow reference. */
body[data-page="works"] .pagination button.arrow {position:relative;display:grid;place-items:center;color:transparent;font-size:0;}
body[data-page="works"] .pagination button.arrow::after {content:"";display:block;width:19px;height:19px;border-top:2px solid #01359E;border-right:2px solid #01359E;transform:rotate(45deg);}
body[data-page="works"] .pagination button.arrow[data-page="prev"]::after {transform:rotate(-135deg);}
@media (min-width:1440px) {
  /* Keep the heading fixed; provide breathing room above the grid. */
  body[data-page="works"] .works-grid {top:201px;}
  body[data-page="works"] .pagination {top:1603px;}
  body[data-page="works"] .works-page {height:1828px;}
}
@media (max-width:1439px) {
  body[data-page="works"] .works-heading {padding-bottom:36px;}
}

/* WORKS project detail — desktop Figma coordinates relative to page at 1440px.
   Empty image areas are placeholders until final project imagery is supplied. */
body[data-page="project"] .project-description h1 {font-family:'Playfair Display',Georgia,serif;font-weight:400;}
body[data-page="project"] .project-description,
body[data-page="project"] .project-subtitle {font-family:'Zen Kaku Gothic New',sans-serif;font-weight:400;}
body[data-page="project"] .project-navigation a {display:inline-flex;align-items:center;gap:14px;}
body[data-page="project"] .project-nav-chevron {display:inline-block;width:23px;height:14px;position:relative;flex:none;}
body[data-page="project"] .project-nav-chevron::before {content:'';position:absolute;top:6px;left:0;width:22px;border-top:1px solid currentColor;}
body[data-page="project"] .project-nav-chevron::after {content:'';position:absolute;top:2px;right:1px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);}
body[data-page="project"] .project-nav-chevron.prev {transform:rotate(180deg);}
@media(min-width:1440px){
 body[data-page="project"] main {height:2662px;position:relative;}
 body[data-page="project"] .project-hero-space {position:absolute;left:0;top:0;width:100%;height:700px;background:#fff;}
 body[data-page="project"] .project-description {position:absolute;left:0;top:643px;width:100%;height:327px;padding:0;background:#fff;}
 body[data-page="project"] .project-description h1 {position:absolute;left:67px;top:0;margin:0;font-size:36px;line-height:1.2;}
 body[data-page="project"] .project-description .project-subtitle {position:absolute;left:66px;top:124px;margin:0!important;font-size:21px;line-height:1.4;}
 body[data-page="project"] .project-description > p:not(.project-subtitle) {position:absolute;left:66px;top:190px;width:1306px;max-width:calc(100% - 132px);margin:0;font-size:16px;line-height:30px;}
 body[data-page="project"] .project-image-space {position:absolute;left:0;top:970px;width:100%;height:700px;border-bottom:0;background:#fff;}
 body[data-page="project"] .project-image-space.second {top:1682px;height:700px;border-top:1px solid #01359E;border-bottom:0;}
 body[data-page="project"] .project-navigation {position:absolute;left:0;top:2437px;width:100%;padding:0 95px;display:flex;justify-content:space-between;font:20px 'Playfair Display',Georgia,serif;color:#01359E;}
}
@media(max-width:1439px){
 body[data-page="project"] .project-hero-space {height:auto;aspect-ratio:1440/700;}
 body[data-page="project"] .project-description {padding:36px 4.65% 45px;background:#fff;}
 body[data-page="project"] .project-description h1 {font-size:clamp(28px,2.5vw,36px);margin:0 0 20px;}
 body[data-page="project"] .project-description .project-subtitle {font-size:clamp(17px,1.46vw,21px);margin:0 0 30px!important;}
 body[data-page="project"] .project-description > p:not(.project-subtitle) {font-size:16px;line-height:30px;margin:0;}
 body[data-page="project"] .project-image-space {height:auto;aspect-ratio:1440/700;}
 body[data-page="project"] .project-image-space.second {height:auto;aspect-ratio:1440/700;border-top:1px solid #01359E;}
 body[data-page="project"] .project-navigation {padding:65px 6.6% 130px;font:clamp(14px,1.4vw,20px) 'Playfair Display',Georgia,serif;}
}
@media(max-width:767px){
 body[data-page="project"] .project-description {padding:30px 6% 45px;}
 body[data-page="project"] .project-description h1 {font-size:28px;}
 body[data-page="project"] .project-description .project-subtitle {font-size:17px;margin-bottom:20px!important;}
 body[data-page="project"] .project-description > p:not(.project-subtitle) {font-size:14px;line-height:1.9;}
 body[data-page="project"] .project-navigation {padding:40px 6% 100px;font-size:12px;gap:14px;}
 body[data-page="project"] .project-navigation a {gap:7px;}
 body[data-page="project"] .project-nav-chevron {transform:scale(.75);transform-origin:center;}
 body[data-page="project"] .project-nav-chevron.prev {transform:rotate(180deg) scale(.75);}
}

/* 2026-11-09: shared WORKS pages refinements */
body[data-page="works"],body[data-page="project"] {background:#f9f9f9;}
body[data-page="works"] .works-page,body[data-page="project"] main {background:#f9f9f9;}
body[data-page="project"] .project-hero-space,
body[data-page="project"] .project-description,
body[data-page="project"] .project-image-space {background:#f9f9f9;}
/* Use the complete IWA DESIGN SVG on both pages, without duplicate HTML lettering. */
body[data-page="works"] .site-header .brand,
body[data-page="project"] .site-header .brand {width:146px;height:50px;}
body[data-page="works"] .site-header .brand img,
body[data-page="project"] .site-header .brand img {display:block;width:100%;height:100%;object-fit:contain;}
/* Simple pointed chevrons, no shaft, matching the reference screenshot. */
body[data-page="works"] .pagination button.arrow::after {width:15px;height:15px;border-width:1.5px;}
body[data-page="project"] .project-nav-chevron::before {content:none;}
body[data-page="project"] .project-nav-chevron::after {top:0;right:5px;width:13px;height:13px;border-width:1px;}
@media(min-width:1440px) {
  /* Tighten the title/subtitle gap; keep the body copy below them. */
  body[data-page="project"] .project-description .project-subtitle {top:58px;}
  body[data-page="project"] .project-description > p:not(.project-subtitle) {top:142px;}
}
@media(min-width:768px) and (max-width:1439px) {
  body[data-page="project"] .project-description h1 {margin-bottom:12px;}
  body[data-page="project"] .project-description .project-subtitle {margin-bottom:28px!important;}
}
@media(max-width:767px) {
  body[data-page="works"] .site-header .brand,
  body[data-page="project"] .site-header .brand {width:117px;height:40px;}
  body[data-page="project"] .project-description h1 {margin-bottom:10px;}
  body[data-page="project"] .project-description .project-subtitle {margin-bottom:24px!important;}
}

/* THANK YOU page — Figma desktop frame 1440 x 944 */
body[data-page="thanks"]{margin:0;background:#f9f9f9;color:#181818}
body[data-page="thanks"] .thanks-page{position:relative;display:block;box-sizing:border-box;width:100%;max-width:1440px;min-height:944px;height:944px;margin:0 auto;padding:0;text-align:left;background:#f9f9f9}
body[data-page="thanks"] .thanks-heading{position:absolute;left:378px;top:306px;width:680px;height:113px}
body[data-page="thanks"] .thanks-heading h1{position:absolute;left:0;top:0;margin:0;width:582px;height:113px;color:#01359E;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:100px;line-height:113px;white-space:nowrap;letter-spacing:0}
body[data-page="thanks"] .thanks-mark{position:absolute;left:595px;top:38px;width:85px;height:50px;object-fit:contain}
body[data-page="thanks"] .thanks-message{position:absolute;left:393px;top:466px;width:653px;height:76px;margin:0;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:400;font-size:24px;line-height:40px;text-align:center}
body[data-page="thanks"] .thanks-back{position:absolute;left:476px;top:714px;display:flex;align-items:center;justify-content:center;width:489px;height:70px;min-width:0;margin:0;padding:0;border-radius:50px;background:#01359E;color:white;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:400;font-size:30px;text-decoration:none}
body[data-page="thanks"] .thanks-back:hover{opacity:.85}
@media(max-width:1439px) and (min-width:768px){body[data-page="thanks"] .thanks-page{height:auto;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 24px;gap:45px}body[data-page="thanks"] .thanks-heading,body[data-page="thanks"] .thanks-heading h1,body[data-page="thanks"] .thanks-mark,body[data-page="thanks"] .thanks-message,body[data-page="thanks"] .thanks-back{position:static}body[data-page="thanks"] .thanks-heading{display:flex;align-items:center;justify-content:center;width:auto;height:auto;gap:12px}body[data-page="thanks"] .thanks-heading h1{width:auto;height:auto;font-size:clamp(55px,7vw,100px);line-height:1.2}body[data-page="thanks"] .thanks-mark{width:clamp(45px,6vw,85px);height:auto}body[data-page="thanks"] .thanks-message{width:auto;height:auto;font-size:clamp(17px,2vw,24px);line-height:1.8}body[data-page="thanks"] .thanks-back{width:min(489px,100%);height:70px;font-size:26px}}
@media(max-width:767px){body[data-page="thanks"] .thanks-page{height:auto;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:60px 20px}body[data-page="thanks"] .thanks-heading,body[data-page="thanks"] .thanks-heading h1,body[data-page="thanks"] .thanks-mark,body[data-page="thanks"] .thanks-message,body[data-page="thanks"] .thanks-back{position:static}body[data-page="thanks"] .thanks-heading{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;height:auto}body[data-page="thanks"] .thanks-heading h1{width:auto;height:auto;font-size:clamp(37px,9vw,66px);line-height:1.2}body[data-page="thanks"] .thanks-mark{width:clamp(28px,7vw,50px);height:auto}body[data-page="thanks"] .thanks-message{width:auto;height:auto;font-size:clamp(14px,3.7vw,18px);line-height:2;text-align:center}body[data-page="thanks"] .thanks-back{width:min(489px,100%);height:60px;font-size:22px}}

/* Mobile polish: home page only, 390px reference. Desktop remains unchanged. */
@media (max-width:767px) {
 body[data-page="home"] .hero {padding-top:72px;}
 body[data-page="home"] .hero-copy h1 {font-size:clamp(24px,6.4vw,29px);line-height:1.5;letter-spacing:0;margin-bottom:18px;}
 body[data-page="home"] .hero-copy p {font-size:13px;line-height:1.9;}
 body[data-page="home"] .hero-seal {width:100px;height:100px;top:12px;right:6%;font-size:11px;}
 body[data-page="home"] .hero-seal .seal-label {font-size:11px;}
 body[data-page="home"] .hero-seal .seal-mail {width:19px;height:19px;}
 body[data-page="home"] .about {padding-top:48px;padding-bottom:80px;}
 body[data-page="home"] .about-grid {gap:28px;}
 body[data-page="home"] .about-photo {width:78%;}
 body[data-page="home"] .about-content {font-size:14px;line-height:1.95;}
 body[data-page="home"] .home-works .work-card:nth-child(n+4) {display:none;}
 body[data-page="home"] .home-works .work-title {font-size:15px;line-height:1.65;min-height:56px;}
 body[data-page="home"] .contact-section {padding:58px 6% 30px;}
 body[data-page="home"] .contact-layout {gap:38px;}
 body[data-page="home"] .contact-copy h2 {font-size:clamp(60px,15vw,82px);}
 body[data-page="home"] .contact-form {padding-top:0;}
 body[data-page="home"] .contact-form .form-field {font-size:16px;margin-bottom:20px;}
 body[data-page="home"] .contact-form .form-field span {margin-bottom:9px;}
 body[data-page="home"] .contact-form .form-field input {min-height:44px;font-size:16px;}
 body[data-page="home"] .contact-form .form-field textarea {min-height:130px;font-size:16px;}
 body[data-page="home"] .contact-form .form-submit {min-height:56px;font-size:18px;margin-top:24px;}
 body[data-page="home"] .contact-form .form-note {font-size:11px;line-height:1.8;}
}

/* 2026-11-09: mobile English copy beneath the main Japanese headline. */
.mobile-english-copy {display:none;}
@media (max-width:767px) {
  body[data-page="home"] .hero-copy .mobile-english-copy {display:block;font-family:'Playfair Display',Georgia,serif;font-size:12px;line-height:18px;font-weight:400;letter-spacing:0;margin:0 0 20px;max-width:100%;}
  body[data-page="home"] .vertical-caption {display:none;}
}
/* Project detail: only one 1px separator between successive images.
   The original generic image border-bottom plus the second image border-top
   previously produced two neighboring rules at narrow viewport widths. */
body[data-page="project"] .project-image-space {border-bottom:0;}
body[data-page="project"] .project-image-space.second {border-top:1px solid #01359E;border-bottom:0;}

/* Desktop visual refinements — 2026-11-09 */
@media (min-width:1100px) {
  /* Keep the English vertical strapline above the overlapping ABOUT panel. */
  body[data-page="home"] .vertical-caption { z-index:6; color:#202020; }
  /* Shift the contents within the wave button down without moving its outline. */
  body[data-page="home"] .hero-seal .seal-label,
  body[data-page="home"] .hero-seal .seal-mail { transform:translateY(9px); }
  /* Optical alignment: glyph tops vs image top. */
  body[data-page="home"] .about-content { top:-7px; }
  /* Center all three items on the same horizontal axis. */
  body[data-page="home"] .designer { display:flex; align-items:center; height:35px; }
  body[data-page="home"] .designer small,
  body[data-page="home"] .designer span,
  body[data-page="home"] .designer a { top:auto; transform:none; }
}
/* Uniform, lighter form labels and more deliberate label/rule spacing. */
.contact-form .form-field,
.contact-form .form-field span { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:400; }
.contact-form .form-field span { line-height:1.5; }
.contact-form .form-submit { font-weight:400; }
@media (min-width:1440px) {
  .contact-form .form-field { display:flex; flex-direction:column; justify-content:space-between; }
  .contact-form .form-field span { flex:0 0 auto; margin:0; line-height:20px; }
  .contact-form .form-field input { flex:0 0 16px; height:16px; min-height:16px; padding:0; }
  .contact-form .form-field textarea { padding:0; }
  .contact-form .form-submit { font-size:26px; }
}
@media (min-width:768px) and (max-width:1439px) {
  .contact-form .form-field span { margin-bottom:7px; }
  .contact-form .form-submit { font-size:20px; }
}

/* 2026-11-09: VIEW PROJECT arrow, contact label spacing, exclamation proportions */
@media (min-width:768px) {
  .hero-feature .project-link .project-chevron {
    width:14px;
    height:14px;
    border-width:1.5px;
  }
  .contact-form .form-field > span {
    position:relative;
    top:-5px;
  }
  .contact-copy .accent-mark {
    width:85px;
    height:50px;
    object-fit:fill;
    vertical-align:-0.025em;
    margin-left:0;
  }
}

/* WORKS fine adjustments: category baseline, transparent pager, compact project heading */
body[data-page="works"] .pagination button {background:transparent;}
body[data-page="works"] .pagination button.active {background:#01359E;color:#fff;}
body[data-page="works"] .pagination button.arrow {background:transparent;border:0;}
@media (min-width:1440px) {
  body[data-page="works"] .filters {top:20px;height:auto;align-items:baseline;}
  body[data-page="project"] .project-description .project-subtitle {top:52px;}
  body[data-page="project"] .project-description > p:not(.project-subtitle) {top:112px;}
}
@media (min-width:768px) and (max-width:1439px) {
  body[data-page="works"] .works-heading {align-items:flex-end;}
  body[data-page="works"] .filters {align-items:baseline;}
  body[data-page="project"] .project-description h1 {margin-bottom:8px;}
  body[data-page="project"] .project-description .project-subtitle {margin-bottom:16px!important;}
}
@media (max-width:767px) {
  body[data-page="project"] .project-description .project-subtitle {margin-bottom:14px!important;}
}

/* Final alignment refinements — 2026-11-09 */
/* Position the filter labels on the same visual bottom edge as WORKS. */
@media (min-width:1440px) {
  body[data-page="works"] .filters {top:35px; align-items:baseline;}
}
@media (min-width:768px) and (max-width:1439px) {
  body[data-page="works"] .works-heading {align-items:flex-end;}
  body[data-page="works"] .filters {align-self:flex-end; transform:translateY(3px);}
}
/* Unselected page numbers match their gray circular outlines. */
body[data-page="works"] .pagination button:not(.active):not(.arrow) {
  color:#aaa;
  border-color:#aaa;
  background:transparent;
}
/* Increase the existing exclamation mark to 150% without changing its SVG. */
@media (min-width:768px) {
  .contact-copy .accent-mark {width:127.5px;height:75px;object-fit:fill;}
}
@media (max-width:767px) {
  .contact-copy .accent-mark {width:.69em;height:.69em;object-fit:contain;}
}
/* A lighter visual treatment for the footer copyright. */
.contact-section .copyright {
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:400;
  letter-spacing:.015em;
}

/* 2026-11-09: breakpoint and typography finishing touches */
/* Preserve the 1100px wave-button content placement at 1099px. */
@media (min-width:768px) and (max-width:1099px) {
  body[data-page="home"] .hero-seal .seal-label,
  body[data-page="home"] .hero-seal .seal-mail { transform:translateY(9px); }
}
/* Move VIEW PROJECT closer to the right edge and tighten the text/chevron gap. */
@media (min-width:768px) {
  body[data-page="home"] .hero-feature .project-link { right:-12px; gap:10px; }
  body[data-page="home"] .hero-feature .project-link .project-chevron { margin-right:0; }
}
/* Align the bottom of the exclamation SVG optically with BEGIN. */
.contact-copy h2 .accent-mark { vertical-align:-.14em; }
/* Exact Figma gray for inactive WORKS categories. */
body[data-page="works"] .filters button:not(.active) { color:#828282; }

/* 2026-11-09: Keep BEGIN and its exclamation together at tablet widths. */
.contact-copy h2 .begin-line { display:inline-flex; align-items:baseline; white-space:nowrap; max-width:100%; }
.contact-copy h2 .begin-line .accent-mark { flex:0 0 auto; vertical-align:baseline; align-self:baseline; }
@media (min-width:768px) and (max-width:900px) {
  .contact-copy h2 .begin-line .accent-mark { width:clamp(38px,5.5vw,50px); height:auto; aspect-ratio:85/50; object-fit:contain; }
  .contact-copy h2 { font-size:clamp(57px,7.3vw,66px); }
}
/* Align the arrow's right edge with the feature image's right edge. */
@media (min-width:768px) {
  body[data-page="home"] .hero-feature .project-link { right:0; }
}

/* Motion additions — preserve original layout and breakpoints */
.site-header.scroll-header{position:sticky;top:0;z-index:100;transition:transform .35s ease;will-change:transform}
.site-header.scroll-header.header-hidden{transform:translateY(-105%)}
.work-thumb{overflow:hidden;position:relative}
.work-thumb-inner{position:absolute;inset:0;background:inherit;transition:transform .6s cubic-bezier(.2,.65,.25,1);will-change:transform}
.work-card:hover .work-thumb-inner{transform:scale(1.05)}
.work-card:hover .work-thumb{background:#efefef}
.work-card:nth-child(5n) .work-thumb-inner{background:#f2f0ed}
.project-hero-space,.project-image-space{overflow:hidden;position:relative}
.project-hero-space::before,.project-image-space::before{content:"";position:absolute;inset:0;background:inherit;transition:transform .6s cubic-bezier(.2,.65,.25,1)}
.project-hero-space:hover::before,.project-image-space:hover::before{transform:scale(1.05)}
.feature-slideshow{position:relative;overflow:hidden}
.feature-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.feature-slide.is-active{opacity:1;z-index:1}
.feature-slide-art{width:100%;height:100%;background:#efefef}
.feature-slide:nth-child(2) .feature-slide-art{background:#f2f0ed}
.feature-slide:nth-child(3) .feature-slide-art{background:#e9ebef}
.feature-slide:nth-child(4) .feature-slide-art{background:#eeefea}
.feature-slide:nth-child(5) .feature-slide-art{background:#e9e9e9}
@media(hover:hover) and (pointer:fine){
 body.has-custom-cursor,body.has-custom-cursor a,body.has-custom-cursor button,body.has-custom-cursor .work-card{cursor:none}
 body.has-custom-cursor input,body.has-custom-cursor textarea,body.has-custom-cursor select{cursor:text}
 .iwa-cursor{position:fixed;left:-100px;top:-100px;width:32px;height:32px;transform:translate(-50%,-50%);pointer-events:none;z-index:99999;opacity:0;transition:opacity .12s ease}
 .iwa-cursor.visible{opacity:1}
 .iwa-cursor-dot{position:absolute;left:13px;top:13px;width:6px;height:6px;border-radius:50%;background:#01359e;transition:opacity .15s ease}
 .iwa-cursor img{position:absolute;left:0;top:0;width:32px;height:32px;opacity:0;transition:opacity .16s ease}
 .iwa-cursor.over-image .iwa-cursor-dot,.iwa-cursor.clicked .iwa-cursor-dot{opacity:0}
 .iwa-cursor.over-image .iwa-cursor-magnifier{opacity:1}
 .iwa-cursor.clicked .iwa-cursor-magnifier{opacity:0}
 .iwa-cursor.clicked .iwa-cursor-exclamation{opacity:1}
 .iwa-cursor.on-navy .iwa-cursor-dot{background:white}
 .iwa-cursor.on-navy img{filter:brightness(0) invert(1)}
 .iwa-cursor.over-input{opacity:0}
}
@media(prefers-reduced-motion:reduce){.site-header.scroll-header,.work-thumb-inner,.project-hero-space::before,.project-image-space::before,.feature-slide{transition:none!important}}

/* 2026-11-09: Contact CTA placement. Hero keeps its original art-directed position;
   a separate floating CTA takes over after the hero button scrolls away. */
body[data-page="home"] .hero-seal { z-index:110; }
.iwa-floating-contact {
  position:fixed!important; top:auto!important; left:auto!important;
  right:clamp(18px,3vw,44px)!important; bottom:clamp(18px,3vw,38px)!important;
  width:166px!important; height:166px!important; aspect-ratio:1;
  z-index:150; opacity:1; visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.iwa-floating-contact.is-inactive {
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(16px) scale(.94);
}
.iwa-floating-contact .seal-label {font-size:12px!important; transform:translateY(5px)!important;}
.iwa-floating-contact .seal-mail {width:19px!important;height:19px!important;transform:translateY(5px)!important;}
@media(max-width:767px){
  .iwa-floating-contact {width:120px!important;height:120px!important;right:16px!important;bottom:18px!important;}
  .iwa-floating-contact .seal-label{font-size:9px!important;transform:translateY(3px)!important;}
  .iwa-floating-contact .seal-mail{width:15px!important;height:15px!important;transform:translateY(3px)!important;}
}
@media(prefers-reduced-motion:reduce){.iwa-floating-contact{transition:none!important;}}

/* Continuous rotation of the wave artwork only; labels and mail icons stay upright. */
.seal { background-image:none!important; isolation:isolate; }
.seal::before {
  content:""; position:absolute; inset:0; display:block;
  background:url('assets/contact-button.svg') center / contain no-repeat;
  z-index:-1; pointer-events:none;
  animation:iwa-seal-spin 18s linear infinite;
  transform-origin:50% 50%;
}
@keyframes iwa-seal-spin { from {transform:rotate(0deg)} to {transform:rotate(360deg)} }
@media(prefers-reduced-motion:reduce){.seal::before{animation:none}}


/* 2026-11: circular lettering CTA; preserves existing positioning and visibility logic. */
a.seal.iwa-type-ring {
  clip-path:none!important; background:none!important; border-radius:50%!important;
  overflow:visible!important; isolation:isolate; display:block!important;
}
a.seal.iwa-type-ring::before {content:none!important;animation:none!important;display:none!important;}
a.seal.iwa-type-ring .iwa-ring-art {width:100%;height:100%;display:block;overflow:visible;}
.iwa-ring-center {fill:#01359e;}
.iwa-ring-lettering {fill:#01359e;font-family:'Playfair Display',Georgia,serif;font-size:15px;letter-spacing:1.6px;}
.iwa-ring-rotor {transform-origin:110px 110px;animation:iwa-ring-spin 20s linear infinite;}
.iwa-ring-japanese {fill:white;font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;font-weight:500;font-size:16px;}
@keyframes iwa-ring-spin {to {transform:rotate(360deg);}}
a.seal.iwa-type-ring:hover {opacity:1;}
a.seal.iwa-type-ring:hover .iwa-ring-center {fill:#002b83;}
a.seal.iwa-type-ring:focus-visible {outline:2px solid #01359e;outline-offset:4px;}
@media(prefers-reduced-motion:reduce){.iwa-ring-rotor{animation:none!important;}}

/* Mobile hero CTA: 110% size only in the first view.
   Keep the top/right anchor fixed; floating CTA retains its own dimensions. */
@media (max-width:767px) {
  body[data-page="home"] a.hero-seal.iwa-type-ring:not(.iwa-floating-contact) {
    width:110px;
    height:110px;
    top:12px;
    right:6%;
  }
}

/* TOP: Figma gradient from the very top of the header through the hero.
   At 1440px the header (72px) + hero (872px) = 944px.
   The mobile height is measured from the actual responsive hero. */
body[data-page="home"] {
  background-color:#fff;
  background-image:linear-gradient(to bottom,#F7F7F7 0%,#F7F7F7 91%,#FFFFFF 100%);
  background-position:top left;
  background-size:100% var(--iwa-firstview-gradient-height,944px);
  background-repeat:no-repeat;
}
body[data-page="home"] .site-header,
body[data-page="home"] .hero { background:transparent; }

/* 2026-11-10: Same Figma first-view gradient on WORKS, project detail, THANK YOU.
   The gradient starts at the page top (including the header where present),
   and becomes white after the first 944px on desktop. */
body[data-page="works"],
body[data-page="project"],
body[data-page="thanks"] {
  background-color:#FFFFFF;
  background-image:linear-gradient(to bottom,#F7F7F7 0%,#F7F7F7 91%,#FFFFFF 100%);
  background-position:top left;
  background-size:100% 944px;
  background-repeat:no-repeat;
}
body[data-page="works"] .site-header,
body[data-page="project"] .site-header,
body[data-page="works"] .works-page,
body[data-page="project"] main,
body[data-page="project"] .project-description,
body[data-page="thanks"] .thanks-page {
  background:transparent;
}
/* For smaller viewports, carry the gradient to the bottom of the first screen. */
@media(max-width:767px) {
  body[data-page="works"],
  body[data-page="project"],
  body[data-page="thanks"] {background-size:100% 100svh;}
}

/* 2026-11-10 — CONTACT heading: keep the Figma 1440px relationship
   between BEGIN and its exclamation at every responsive width.
   em dimensions follow the heading's computed font size. */
.contact-copy h2 .begin-line {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  max-width: none;
  gap: .045em;
}
.contact-copy h2 .begin-line .accent-mark {
  display: block;
  flex: 0 0 auto;
  width: .90em;
  height: .53em;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  object-fit: fill;
  align-self: baseline;
  vertical-align: baseline;
  transform: translateY(.015em);
}

/* 2026-11-10: Optically align the exclamation dot with BEGIN's glyph bottom.
   The source SVG has transparent space below its artwork, so baseline alignment
   alone places the visible dot too high. Keep em-based scaling and spacing. */
.contact-copy h2 .begin-line .accent-mark {
  transform: translateY(.13em);
}

/* 2026-11-10: enlarge CONTACT exclamation 120%, reduce gap while preserving optical bottom alignment. */
.contact-copy h2 .begin-line { gap: .015em; }
.contact-copy h2 .begin-line .accent-mark { width: 1.08em; height: .636em; transform: translateY(.13em); }

/* 2026-11-10: Bring the CONTACT exclamation closer to BEGIN.
   Keep the 120% size, baseline alignment and responsive em scaling. */
.contact-copy h2 .begin-line { gap: 0; }
.contact-copy h2 .begin-line .accent-mark { margin-left: -.14em; }

/* WORKS detail — SP image frames only (2026-11-10).
   All three slots fill the viewport width at 390:450; desktop/tablet untouched. */
@media (max-width:767px) {
  body[data-page="project"] .project-hero-space,
  body[data-page="project"] .project-image-space,
  body[data-page="project"] .project-image-space.second {
    display:block;
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:390 / 450;
    margin-left:0;
    margin-right:0;
  }
}

/* 2026-11-10: WORKS detail image frames — PC 1306:700, SP 390:450.
   At 1440px, the desktop side margins are exactly 67px.
   Keep the existing vertical positions and other page components intact. */
@media (min-width:1100px) {
  body[data-page="project"] .project-hero-space,
  body[data-page="project"] .project-image-space,
  body[data-page="project"] .project-image-space.second {
    left:50%;
    width:calc(100% - 134px);
    max-width:1306px;
    height:auto;
    aspect-ratio:1306 / 700;
    transform:translateX(-50%);
  }
}
@media (min-width:768px) and (max-width:1099px) {
  body[data-page="project"] .project-hero-space,
  body[data-page="project"] .project-image-space,
  body[data-page="project"] .project-image-space.second {
    width:calc(100% - 9.3%);
    max-width:1306px;
    margin-left:auto;
    margin-right:auto;
    height:auto;
    aspect-ratio:1306 / 700;
  }
}

/* WORKS CMS: image content and variable-length project gallery */
.work-thumb-inner img,.feature-slide-art img{width:100%;height:100%;object-fit:cover;display:block}
body[data-page="project"] main.dynamic-project{display:flex!important;flex-direction:column!important;position:relative!important;height:auto!important;min-height:0!important;padding-top:0!important}
body[data-page="project"] .dynamic-project .iwa-project-frame{position:relative!important;top:auto!important;left:auto!important;transform:none!important;display:block!important;width:calc(100% - 134px)!important;max-width:1306px!important;aspect-ratio:1306/700!important;height:auto!important;margin:0 auto 12px!important;overflow:hidden;background:#f7f7f7;flex-shrink:0}
.dynamic-project .iwa-project-frame picture,.dynamic-project .iwa-project-frame img{width:100%;height:100%;display:block}
.dynamic-project .iwa-project-frame img{object-fit:cover}
.dynamic-project .project-media-placeholder{width:100%;height:100%;background:#f4f4f4}
body[data-page="project"] .dynamic-project .project-description{position:relative!important;top:auto!important;left:auto!important;transform:none!important;width:100%!important;max-width:none!important;height:auto!important;margin:0!important;padding:45px max(4.6%,calc((100% - 1306px)/2)) 55px!important}
.dynamic-project .iwa-project-body{white-space:normal}
body[data-page="project"] .dynamic-project .project-navigation{position:relative!important;top:auto!important;left:auto!important;width:100%!important;transform:none!important;margin:0!important}
.dynamic-project .iwa-reels{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding:45px 6%}
.dynamic-project .iwa-reel{width:min(320px,100%);aspect-ratio:9/16;background:#111}
.dynamic-project .iwa-reel video{width:100%;height:100%;object-fit:contain}
@media(min-width:768px) and (max-width:1099px){body[data-page="project"] .dynamic-project .iwa-project-frame{width:90.7%!important}}
@media(max-width:767px){body[data-page="project"] .dynamic-project .iwa-project-frame{width:100%!important;max-width:none!important;aspect-ratio:390/450!important;margin:0 0 12px!important}body[data-page="project"] .dynamic-project .project-description{padding:25px 6% 35px!important}.dynamic-project .iwa-reels{padding:25px 6%;gap:16px}}

/* 2026-11-10 — CMS WORKS layout corrections.
   Reset legacy absolute Figma positioning inside dynamically rendered descriptions. */
body[data-page="project"] .dynamic-project .project-description h1,
body[data-page="project"] .dynamic-project .project-description .project-subtitle,
body[data-page="project"] .dynamic-project .project-description > p:not(.project-subtitle) {
  position:static!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  transform:none!important;
  display:block;
}
body[data-page="project"] .dynamic-project .project-description h1 {
  margin:0 0 4px!important;
  line-height:1.25;
}
body[data-page="project"] .dynamic-project .project-description .project-subtitle {
  margin:0 0 28px!important;
  line-height:1.6;
}
body[data-page="project"] .dynamic-project .project-description .iwa-project-body {
  margin:0!important;
  line-height:1.9;
  overflow-wrap:anywhere;
}
/* Ensure breathing room below project navigation at desktop widths, too. */
body[data-page="project"] .dynamic-project .project-navigation {
  padding:60px max(6.6%,calc((100% - 1306px)/2)) 135px!important;
  min-height:205px;
  box-sizing:border-box;
  align-items:flex-start;
  gap:16px;
}
@media(max-width:767px){
  body[data-page="project"] .dynamic-project .project-description .project-subtitle {margin-bottom:18px!important;}
  body[data-page="project"] .dynamic-project .project-navigation {
    padding:38px 6% 100px!important;
    min-height:150px;
  }
}

/* WORKS cards: full-bleed thumbnails; spacing is designed into the image assets. */
body[data-page="home"] .home-works .work-thumb-inner,
body[data-page="works"] .works-grid .work-thumb-inner { inset:0; }
body[data-page="home"] .home-works .work-thumb-inner img,
body[data-page="works"] .works-grid .work-thumb-inner img { width:100%;height:100%;object-fit:cover;display:block; }

/* Reel portfolio detail: four columns on desktop, two on mobile */
body[data-page="project"] .dynamic-project .iwa-reels{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px!important;align-items:start;justify-content:stretch;max-width:1306px;width:calc(100% - 134px);margin:0 auto;padding:52px 0 28px!important}
body[data-page="project"] .dynamic-project .iwa-reel-item{min-width:0}
body[data-page="project"] .dynamic-project .iwa-reel{position:relative;width:100%!important;aspect-ratio:9/16;overflow:hidden;border-radius:6px;background:#ece9e5}
body[data-page="project"] .dynamic-project .iwa-reel video{display:block;width:100%;height:100%;object-fit:cover}
body[data-page="project"] .dynamic-project .iwa-reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;border-radius:24px;padding:10px 15px;white-space:nowrap;background:#01359E;color:white;font-size:12px;cursor:pointer}
body[data-page="project"] .dynamic-project .iwa-reel.is-playing .iwa-reel-play{display:none}
body[data-page="project"] .dynamic-project .iwa-reel-label{font-family:'Playfair Display',Georgia,serif;color:var(--blue);font-size:13px;letter-spacing:.025em;padding-top:11px}
body[data-page="project"] .dynamic-project.iwa-video-project .project-description{padding-top:20px!important}
@media(max-width:767px){body[data-page="project"] .dynamic-project .iwa-reels{grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% - 32px);gap:12px!important;padding:28px 0 22px!important}body[data-page="project"] .dynamic-project .iwa-reel-play{font-size:10px;padding:8px 10px}body[data-page="project"] .dynamic-project .iwa-reel-label{font-size:12px;padding-top:8px}}
@media(min-width:768px) and (max-width:1099px){body[data-page="project"] .dynamic-project .iwa-reels{width:90.7%}}

/* Independent desktop/mobile additional WORKS images */
.iwa-extra-sp{display:none}
@media(max-width:767px){.iwa-extra-pc{display:none}.iwa-extra-sp{display:block}}

/* WORKS detail: remove vertical spacing only between additional images (PC / SP).
   Keep main image and description spacing unchanged. */
body[data-page="project"] .dynamic-project .iwa-extra-pc .iwa-project-frame,
body[data-page="project"] .dynamic-project .iwa-extra-sp .iwa-project-frame {
  margin-bottom:0!important;
  margin-top:0!important;
}

/* Instagram WORKS: three visible cards on desktop, one on tablet/mobile. */
.iwa-social-gallery{padding:46px 0 60px;overflow:hidden}
.iwa-social-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab}
.iwa-social-viewport:active{cursor:grabbing}
.iwa-social-viewport::-webkit-scrollbar{display:none}
.iwa-social-track{display:flex;gap:20px;width:max-content;padding:0 max(0px,calc((100vw - 1306px)/2));}
.iwa-social-slide{flex:0 0 calc((min(100vw - 134px,1306px) - 40px)/3);scroll-snap-align:center;scroll-snap-stop:always;min-width:0}
.iwa-social-slide img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none;user-select:none}
.iwa-social-controls{display:flex;justify-content:center;align-items:center;gap:32px;margin:24px auto 0;color:#01359E}
.iwa-social-controls button{background:none;border:1px solid #01359E;border-radius:50%;width:38px;height:38px;color:#01359E;font-size:20px;line-height:1}
.iwa-social-controls button:disabled{opacity:.25;cursor:default}
.iwa-social-count{font-size:12px;min-width:60px;text-align:center;letter-spacing:.1em}
@media(max-width:1023px){.iwa-social-track{gap:16px;padding:0 6vw}.iwa-social-slide{flex-basis:88vw}}
@media(min-width:1024px){.iwa-social-track{padding-left:max(0px,calc((100vw - 1306px)/2));padding-right:max(0px,calc((100vw - 1306px)/2))}.iwa-social-viewport{scroll-padding-inline:0}}
@media(prefers-reduced-motion:reduce){.iwa-social-viewport{scroll-behavior:auto}}

@media(min-width:1024px){.iwa-social-track{padding-left:calc((100vw - (min(100vw - 134px,1306px) - 40px)/3)/2);padding-right:calc((100vw - (min(100vw - 134px,1306px) - 40px)/3)/2)}}
@media(max-width:1023px){.iwa-social-track{padding-left:6vw;padding-right:6vw}}

/* Instagram carousel navigation: match the thin project-navigation chevrons. */
.iwa-social-controls{gap:32px}
.iwa-social-controls button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#01359E;cursor:pointer}
.iwa-social-controls button .iwa-social-chevron{display:block;width:25px;height:25px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.iwa-social-controls .iwa-social-prev .iwa-social-chevron{transform:rotate(-135deg)}
.iwa-social-controls button:disabled{opacity:.25;cursor:default}
.iwa-social-controls button:focus-visible{outline:2px solid #01359E;outline-offset:5px}
.iwa-social-count{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:16px;letter-spacing:.02em;font-variant-numeric:lining-nums tabular-nums}

/* Instagram carousel: draggable single-line progress navigation. */
.iwa-social-controls{display:flex;justify-content:center;margin:26px auto 0;padding:0 24px;gap:0}
.iwa-social-progress{--iwa-progress-width:64px;display:block;appearance:none;-webkit-appearance:none;width:min(100%,340px);height:24px;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;touch-action:pan-x;outline-offset:5px}
.iwa-social-progress::-webkit-slider-runnable-track{height:2px;background:#d5d5d5;border-radius:0}
.iwa-social-progress::-moz-range-track{height:2px;background:#d5d5d5;border-radius:0}
.iwa-social-progress::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--iwa-progress-width);height:3px;border:0;border-radius:0;background:#01359E;margin-top:-.5px;cursor:grab}
.iwa-social-progress::-moz-range-thumb{width:var(--iwa-progress-width);height:3px;border:0;border-radius:0;background:#01359E;cursor:grab}
.iwa-social-progress:active::-webkit-slider-thumb{cursor:grabbing}
.iwa-social-progress:active::-moz-range-thumb{cursor:grabbing}
.iwa-social-progress:disabled{opacity:.55;cursor:default}
@media(max-width:767px){.iwa-social-progress{width:min(100%,260px);--iwa-progress-width:52px}}

/* TOP WORKS / VIEW ALL / footer LET'S BEGIN — Playfair Display Medium Italic */
body[data-page="home"] .home-works .section-title,
body[data-page="home"] .home-works .view-all,
body[data-page="home"] .contact-copy h2 {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:500;
  font-style:italic;
}

/* English typography throughout the site; Japanese text keeps its sans-serif styling. */
body[data-page="works"] .works-heading h1 {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:500;
  font-style:italic;
}

/* 2026-11-11: Consistent footer heading typography across all pages. */
.contact-section .contact-copy h2 {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:500;
  font-style:italic;
}
/* Center pagination numerals geometrically, regardless of font metrics. */
body[data-page="works"] .pagination button:not(.arrow) {
  display:grid;
  place-items:center;
  padding:0;
  line-height:1;
  text-align:center;
}

/* 2026-11-11 — WORKS pagination optical centering. */
body[data-page="works"] .pagination button:not(.arrow) {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 3px;
  line-height:1;
  text-align:center;
}

/* CONTACT exclamation: 110% of the previous SVG dimensions, with the
   visible dot aligned to the bottom of BEGIN (not the SVG's empty canvas). */
.contact-copy h2 .begin-line .accent-mark {
  width:1.188em;
  height:.6996em;
  align-self:baseline;
  transform:translateY(.17em);
}

/* WORKS heading: consistent optical baseline and a smooth transition to
   the 1440px desktop layout, avoiding the 1439/1440 vertical jump. */
@media (min-width:768px) and (max-width:1439px) {
  body[data-page="works"] .works-heading {
    display:flex;
    align-items:flex-end;
    padding-bottom:clamp(18px,1.53vw,22px);
  }
  body[data-page="works"] .works-heading h1 {line-height:1;}
  body[data-page="works"] .filters {
    align-self:flex-end;
    align-items:baseline;
    transform:translateY(clamp(-4px,-.28vw,-2px));
  }
}

/* 2026-11-11: small finishing adjustments requested for footer and WORKS. */
.contact-copy h2 .begin-line .accent-mark {
  margin-left:-.18em; /* 0.04em left of previous position */
}
body[data-page="home"] .home-works .view-all {
  color:var(--ink); /* same black as the site's regular text */
}
body[data-page="works"] .works-heading h1 {
  color:#01359E;
}

/* TOP background video: cover the same header + hero region as the original gradient.
   Preserve the original gradient as a fallback while the MP4 loads. */
body[data-page="home"] { position:relative; isolation:isolate; }
body[data-page="home"] .iwa-top-video-bg {
  position:absolute; inset:0 0 auto; width:100%;
  height:var(--iwa-firstview-gradient-height,944px);
  z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 91%,transparent 100%);
}
body[data-page="home"] .iwa-top-video-bg video {
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}
body[data-page="home"] > .site-header,
body[data-page="home"] > main,
body[data-page="home"] > footer { position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce) {
  body[data-page="home"] .iwa-top-video-bg {display:none;}
}

/* 2026-11-11: Keep the directional header above the page/video.
   The home-specific relative positioning previously overrode sticky. */
.site-header.scroll-header,
body[data-page="home"] > .site-header.scroll-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:#F7F7F7;
  transition:transform .35s ease, background-color .25s ease;
}
body[data-page="home"] > .site-header.scroll-header:not(.header-scrolled) {
  background:transparent;
}
body[data-page="home"] > .site-header.scroll-header.header-scrolled {
  background:#F7F7F7;
}
body[data-page="home"] .iwa-top-video-bg {z-index:0;}
body[data-page="home"] > main,body[data-page="home"] > footer {position:relative;z-index:1;}

/* Header background fix: keep non-home headers opaque when revealed.
   This overrides the older page-gradient transparency rules above. */
body:not([data-page="home"]) > .site-header.scroll-header {
  background-color: #F7F7F7;
  background-image: none;
  isolation: isolate;
}
body:not([data-page="home"]) > .site-header.scroll-header.header-scrolled {
  background-color: #F7F7F7;
}

/* 2026-11-11: Custom cursor restoration. Keep cursor above video, header and overlays. */
@media (hover:hover) and (pointer:fine) {
  body > .iwa-cursor { position:fixed; z-index:2147483647; pointer-events:none; }
}

/* ABOUT: four independent SVG layers, keeping the existing layout box. */
body[data-page="home"] .about-photo .about-illustration {
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:visible;
  isolation:isolate;
}
body[data-page="home"] .about-photo .about-part {
  position:absolute;
  display:block;
  max-width:none;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  opacity:0;
  animation:about-part-appear 1s cubic-bezier(.22,1,.36,1) forwards;
}
/* Coordinates relative to the existing 400 × 474 ABOUT illustration frame. */
body[data-page="home"] .about-photo .about-stem {
  width:16%; left:42%; top:30%; z-index:1;
  animation-delay:.42s;
}
body[data-page="home"] .about-photo .about-rock-blue {
  width:46%; left:10%; top:48%; z-index:2;
  animation-delay:.08s;
}
body[data-page="home"] .about-photo .about-rock-lavender {
  width:47%; left:49%; top:52%; z-index:3;
  animation-delay:.23s;
}
body[data-page="home"] .about-photo .about-flower {
  width:62%; left:24%; top:1%; z-index:4;
  animation-delay:.75s;
}
@keyframes about-part-appear {
  from {opacity:0; transform:translateY(12px) scale(.97);}
  to {opacity:1; transform:translateY(0) scale(1);}
}
@media (max-width:767px) {
  body[data-page="home"] .about-photo .about-illustration {
    aspect-ratio:400/474;
    height:auto;
  }
}
@media (prefers-reduced-motion:reduce) {
  body[data-page="home"] .about-photo .about-part {
    animation:none;
    opacity:1;
  }
}


/* ABOUT illustration alignment: use the shared 817 × 965 source canvas.
   Every SVG retains its original aspect ratio and exact source coordinates. */
body[data-page="home"] .about-photo .about-illustration {
  aspect-ratio:817 / 965;
  height:auto;
}
body[data-page="home"] .about-photo .about-part {
  height:auto;
  object-fit:contain;
}
body[data-page="home"] .about-photo .about-flower {
  left:33.0477%; top:4.1399%; width:61.4443%;
}
body[data-page="home"] .about-photo .about-stem {
  left:44.1860%; top:29.5337%; width:14.9094%;
}
body[data-page="home"] .about-photo .about-rock-blue {
  left:5.5080%; top:49.2228%; width:42.7070%;
}
body[data-page="home"] .about-photo .about-rock-lavender {
  left:39.5349%; top:55.2332%; width:47.8377%;
}

/* ABOUT: scroll-triggered staggered reveal + independent continuous floating.
   Wrappers animate entry; inner SVGs animate floating, avoiding transform conflicts. */
body[data-page="home"] .about-photo .about-layer {
  position:absolute; display:block; height:auto;
  opacity:0; transform:translateY(22px) scale(.96);
  transition:opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
body[data-page="home"] .about-photo .about-illustration.is-visible .about-layer {
  opacity:1; transform:translateY(0) scale(1);
}
body[data-page="home"] .about-photo .about-layer-rock-blue {left:5.5080%;top:49.2228%;width:42.7070%;z-index:2;transition-delay:0s;}
body[data-page="home"] .about-photo .about-layer-rock-lavender {left:39.5349%;top:55.2332%;width:47.8377%;z-index:3;transition-delay:.28s;}
body[data-page="home"] .about-photo .about-layer-stem {left:44.1860%;top:29.5337%;width:14.9094%;z-index:1;transition-delay:.56s;}
body[data-page="home"] .about-photo .about-layer-flower {left:33.0477%;top:4.1399%;width:61.4443%;z-index:4;transition-delay:.84s;}
body[data-page="home"] .about-photo .about-layer > .about-part {
  position:relative;left:auto;top:auto;width:100%;height:auto;display:block;
  opacity:1;max-width:none;transform-origin:50% 50%;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  animation-direction:alternate;animation-fill-mode:both;
  will-change:transform;
}
body[data-page="home"] .about-photo .about-layer-rock-blue > .about-part {
  animation-name:about-float-blue;animation-duration:5.2s;animation-delay:-1.1s;
}
body[data-page="home"] .about-photo .about-layer-rock-lavender > .about-part {
  animation-name:about-float-lavender;animation-duration:6.1s;animation-delay:-3.2s;
}
body[data-page="home"] .about-photo .about-layer-stem > .about-part {
  animation-name:about-float-stem;animation-duration:4.8s;animation-delay:-2.4s;transform-origin:50% 90%;
}
body[data-page="home"] .about-photo .about-layer-flower > .about-part {
  animation-name:about-float-flower;animation-duration:5.6s;animation-delay:-.6s;
}
@keyframes about-float-blue {
  from {transform:translate3d(-9px,14px,0) rotate(-3deg);}
  to {transform:translate3d(10px,-16px,0) rotate(3deg);}
}
@keyframes about-float-lavender {
  from {transform:translate3d(10px,-14px,0) rotate(2.7deg);}
  to {transform:translate3d(-10px,16px,0) rotate(-3.3deg);}
}
@keyframes about-float-stem {
  from {transform:translate3d(-5px,8px,0) rotate(-3deg);}
  to {transform:translate3d(6px,-10px,0) rotate(3.3deg);}
}
@keyframes about-float-flower {
  from {transform:translate3d(8px,-17px,0) rotate(3.7deg);}
  to {transform:translate3d(-8px,15px,0) rotate(-3.7deg);}
}
@media (prefers-reduced-motion:reduce) {
  body[data-page="home"] .about-photo .about-layer {opacity:1;transform:none;transition:none;}
  body[data-page="home"] .about-photo .about-layer > .about-part {animation:none;transform:none;will-change:auto;}
}

/* ABOUT: four pieces reveal together, preserving independent floating. */
body[data-page="home"] .about-photo .about-layer {transition-delay:0s !important;transition-duration:1.15s,1.25s;}
/* Hero entrance; preserve existing copy typography and slideshow. */
body[data-page="home"].iwa-hero-intro .hero-copy .iwa-intro-char {display:inline-block;opacity:0;transform:translate3d(-7px,5px,0);filter:blur(2px);animation:iwa-hero-letter .62s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--iwa-char-delay,0s);}
body[data-page="home"].iwa-hero-intro .hero-feature {animation:iwa-hero-photo 1.25s cubic-bezier(.22,1,.36,1) both;animation-delay:1.15s;}
@keyframes iwa-hero-letter {to {opacity:1;transform:translate3d(0,0,0);filter:blur(0);}}
@keyframes iwa-hero-photo {from {opacity:0;transform:translate3d(0,20px,0);}to {opacity:1;transform:translate3d(0,0,0);}}
@media(prefers-reduced-motion:reduce){body[data-page="home"].iwa-hero-intro .hero-copy .iwa-intro-char,body[data-page="home"].iwa-hero-intro .hero-feature{animation:none!important;opacity:1;transform:none;filter:none;}}

/* Hero sequence 2: separate entrances with accessible reduced-motion fallback. */
body[data-page="home"].iwa-hero-intro .hero-copy .iwa-intro-char {
  animation-delay:var(--iwa-char-delay,0s);
}
/* Animate header contents rather than the sticky header, preserving hide/reveal on scroll. */
body[data-page="home"].iwa-hero-intro > .site-header > * {
  animation:iwa-intro-up .7s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.08s;
}
body[data-page="home"].iwa-hero-intro .hero-seal {
  animation:iwa-intro-up .75s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.12s;
}
/* Subtitle is one element fade, not individual characters. */
body[data-page="home"].iwa-hero-intro .hero-copy > p {
  animation:iwa-intro-up .85s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--iwa-subtitle-start,2.1s);
}
body[data-page="home"].iwa-hero-intro .hero-feature,
body[data-page="home"].iwa-hero-intro .about {
  animation:iwa-hero-photo 1.2s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--iwa-photo-start,2.9s);
}
/* Vertical text: top-to-bottom type-on reveal, after photo has appeared. */
body[data-page="home"].iwa-hero-intro .vertical-caption {
  animation:iwa-caption-type 2s steps(64,end) both;
  animation-delay:var(--iwa-caption-start,4.1s);
}
@keyframes iwa-intro-up {
  from {opacity:0;translate:0 18px;}
  to {opacity:1;translate:0 0;}
}
@keyframes iwa-caption-type {
  from {clip-path:inset(0 0 100% 0);}
  to {clip-path:inset(0 0 0 0);}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="home"].iwa-hero-intro > .site-header > *,
  body[data-page="home"].iwa-hero-intro .hero-seal,
  body[data-page="home"].iwa-hero-intro .hero-copy > p,
  body[data-page="home"].iwa-hero-intro .hero-feature,
  body[data-page="home"].iwa-hero-intro .about,
  body[data-page="home"].iwa-hero-intro .vertical-caption {
    animation:none!important;opacity:1!important;translate:none!important;
    transform:none;clip-path:none!important;
  }
}

/* Refined opening sequence: photo -> ABOUT panel -> contact CTA -> vertical caption. */
body[data-page="home"].iwa-hero-intro .hero-seal {
  animation:iwa-intro-up .9s cubic-bezier(.22,1,.36,1) both !important;
  animation-delay:var(--iwa-contact-start,4.2s) !important;
}
body[data-page="home"].iwa-hero-intro .about {
  animation:iwa-hero-photo 1.65s cubic-bezier(.22,1,.36,1) both !important;
  animation-delay:var(--iwa-about-start,3.5s) !important;
}
@media(prefers-reduced-motion:reduce){
 body[data-page="home"].iwa-hero-intro .hero-seal,
 body[data-page="home"].iwa-hero-intro .about {animation:none!important;opacity:1!important;transform:none!important;translate:none!important;}
}


/* Scroll reveal — ABOUT paragraphs, designer, services, WORKS and footer. */
body[data-page="home"] .about-content.iwa-scroll-about .iwa-about-paragraph {
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.22,1,.36,1);
}
body[data-page="home"] .about-content.iwa-scroll-about .iwa-about-paragraph:nth-child(2) {
  transition-delay:.22s;
}
body[data-page="home"] .about-content.iwa-scroll-about.iwa-scroll-visible .iwa-about-paragraph {
  opacity:1;transform:none;
}
body[data-page="home"] .iwa-scroll-designer .iwa-scroll-char,
body[data-page="home"] .iwa-scroll-services .iwa-scroll-char,
body[data-page="home"] .iwa-scroll-works .iwa-scroll-char {
  display:inline-block;
  opacity:0;
  transform:translate(-7px,5px);
  filter:blur(1.5px);
}
body[data-page="home"] .iwa-scroll-about.iwa-scroll-visible .iwa-scroll-designer .iwa-scroll-char {
  animation:iwa-scroll-letter .52s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(1.15s + var(--iwa-scroll-delay,0s));
}
body[data-page="home"] .iwa-scroll-about.iwa-scroll-visible .iwa-scroll-services .iwa-scroll-char {
  animation:iwa-scroll-letter .48s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(2.55s + var(--iwa-scroll-delay,0s));
}
body[data-page="home"] .iwa-scroll-instagram {
  opacity:0;transform:translateX(-8px);
}
body[data-page="home"] .iwa-scroll-about.iwa-scroll-visible .iwa-scroll-instagram {
  animation:iwa-scroll-letter .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(1.15s + var(--iwa-scroll-delay,0s));
}
body[data-page="home"] .iwa-scroll-works.iwa-scroll-visible .iwa-scroll-char {
  animation:iwa-scroll-letter .65s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--iwa-scroll-delay,0s);
}
@keyframes iwa-scroll-letter {
  to {opacity:1;transform:none;filter:blur(0);}
}
body[data-page="home"] .iwa-scroll-footer {
  opacity:0;
  transform:translateY(76px);
}
body[data-page="home"] .iwa-scroll-footer.iwa-scroll-visible {
  animation:iwa-footer-rise .85s cubic-bezier(.16,1,.3,1) both;
}
@keyframes iwa-footer-rise {
  from {opacity:0;transform:translateY(76px);}
  to {opacity:1;transform:translateY(0);}
}
@media(prefers-reduced-motion:reduce) {
  body[data-page="home"] .about-content.iwa-scroll-about .iwa-about-paragraph,
  body[data-page="home"] .iwa-scroll-designer .iwa-scroll-char,
  body[data-page="home"] .iwa-scroll-services .iwa-scroll-char,
  body[data-page="home"] .iwa-scroll-works .iwa-scroll-char,
  body[data-page="home"] .iwa-scroll-instagram,
  body[data-page="home"] .iwa-scroll-footer {
    opacity:1!important;transform:none!important;filter:none!important;
    transition:none!important;animation:none!important;
  }
}

/* Fix: character spans must not inherit the absolute positioning of the
   full RINA IWATA name container. Keep original designer row geometry. */
body[data-page="home"] .about-content .designer small > .iwa-scroll-char,
body[data-page="home"] .about-content .designer > span > .iwa-scroll-char {
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  font-size:inherit;
  line-height:inherit;
  white-space:pre;
  vertical-align:baseline;
}

/* Final section animations: each service appears as a whole line, not characters. */
body[data-page="home"] .iwa-scroll-services .iwa-service-line{
 opacity:0;transform:translate3d(-12px,12px,0);
}
body[data-page="home"] .iwa-scroll-about.iwa-scroll-visible .iwa-scroll-services .iwa-service-line{
 animation:iwa-service-line-in .85s cubic-bezier(.22,1,.36,1) both;
 animation-delay:var(--iwa-line-delay,0s);
}
@keyframes iwa-service-line-in{
 from{opacity:0;transform:translate3d(-12px,12px,0)}
 to{opacity:1;transform:none}
}
/* The designer name remains a normal inline span, avoiding overlap. */
body[data-page="home"] .iwa-scroll-about.iwa-scroll-visible .iwa-scroll-designer > span .iwa-scroll-char{
 animation-delay:calc(1.15s + var(--iwa-designer-offset,0s) + var(--iwa-scroll-delay,0s));
}
/* WORKS listing title and home title use the same character reveal. */
body[data-page="works"] .iwa-scroll-works .iwa-scroll-char,
body:not([data-page="home"]) .works-page .iwa-scroll-works .iwa-scroll-char{
 display:inline-block;opacity:0;transform:translate(-7px,5px);filter:blur(1.5px);
}
body[data-page="works"] .iwa-scroll-works.iwa-scroll-visible .iwa-scroll-char,
body:not([data-page="home"]) .works-page .iwa-scroll-works.iwa-scroll-visible .iwa-scroll-char{
 animation:iwa-scroll-letter .65s cubic-bezier(.22,1,.36,1) both;
 animation-delay:var(--iwa-scroll-delay,0s);
}
/* Footer entrance is consistent across home, works, and project pages. */
body .contact-section.iwa-scroll-footer{opacity:0;transform:translateY(76px)}
body .contact-section.iwa-scroll-footer.iwa-scroll-visible{
 animation:iwa-footer-rise .85s cubic-bezier(.16,1,.3,1) both;
}
@media(prefers-reduced-motion:reduce){
 body .contact-section.iwa-scroll-footer,
 body[data-page="home"] .iwa-scroll-services .iwa-service-line,
 body:not([data-page="home"]) .works-page .iwa-scroll-works .iwa-scroll-char{
  opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
 }
}

/* Desktop vertical English caption: 100px from the right edge. */
@media (min-width:1100px) {
 body[data-page="home"] .vertical-caption {left:auto !important;right:100px !important;}
}

/* Align the right margin of the vertical strapline with the left margin of the hero headline. */
@media (min-width:1100px) and (max-width:1439px) {
 body[data-page="home"] .vertical-caption {left:auto !important;right:6.9444% !important;}
}
@media (min-width:1440px) {
 body[data-page="home"] .vertical-caption {left:auto !important;right:calc(50% - 620px) !important;}
}

/* Hero slideshow artwork is an accessible clickable project link. */
.hero-feature .project-placeholder.feature-slideshow{cursor:pointer}
.hero-feature .project-placeholder.feature-slideshow:focus-visible{outline:2px solid #01359e;outline-offset:4px}


/* WORKS listing and detail: top-right CTA, then floating CTA on scroll. */
body[data-page="works"],body[data-page="project"]{position:relative}
.iwa-page-top-contact{
 position:absolute!important;
 top:92px!important;
 right:clamp(24px,6.94vw,120px)!important;
 left:auto!important;
 width:166px!important;height:166px!important;
 z-index:105;
 opacity:1;visibility:visible;
 transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
}
.iwa-page-top-contact.is-inactive{
 opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);
}
@media(max-width:767px){
 .iwa-page-top-contact{width:110px!important;height:110px!important;top:80px!important;right:16px!important}
}

/* Match the TOP hero's upper-right contact CTA precisely across pages. */
@media (min-width:768px){
 body[data-page="works"] .iwa-page-top-contact,
 body[data-page="project"] .iwa-page-top-contact{
   width:210px!important;height:210px!important;
   top:-32px!important;right:auto!important;
   left:calc(50% + 408px)!important;
 }
}
@media (min-width:768px) and (max-width:1439px){
 body[data-page="works"] .iwa-page-top-contact,
 body[data-page="project"] .iwa-page-top-contact{
   left:auto!important;right:7.083333%!important;
 }
}
@media (max-width:767px){
 body[data-page="works"] .iwa-page-top-contact,
 body[data-page="project"] .iwa-page-top-contact{
   width:110px!important;height:110px!important;
   top:84px!important;right:6%!important;left:auto!important;
 }
}

/* Keep WORKS top contact seal above the sticky navigation header. */
body[data-page="works"] .iwa-page-top-contact,
body[data-page="project"] .iwa-page-top-contact{z-index:1100!important;}

/* ABOUT illustration: mobile 80%, desktop slightly toward the text. */
@media (max-width:767px) {
  body[data-page="home"] .about-photo .about-illustration {
    transform:scale(.8);
    transform-origin:center center;
  }
}
@media (min-width:1024px) {
  body[data-page="home"] .about-photo .about-illustration {
    transform:translateX(24px);
  }
}

/* 2026-11-11: bring mobile ABOUT flower closer to the hero work image. */
@media (max-width:767px) {
 body[data-page="home"] .hero {padding-bottom:45px;}
 body[data-page="home"] .about {padding-top:20px;}
}
/* Move desktop ABOUT flower 20px further right (44px total). */
@media (min-width:1024px) {
 body[data-page="home"] .about-photo .about-illustration {transform:translateX(44px);}
}

/* ABOUT: animated English typography follows a custom flower-and-rock silhouette. */
body[data-page="home"] .about-photo .about-illustration .about-contour-type {
  position:absolute;inset:-5% -5%;width:110%;height:110%;
  overflow:visible;z-index:7;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease .9s;
}
body[data-page="home"] .about-photo .about-illustration.is-visible .about-contour-type{opacity:1}
body[data-page="home"] .about-contour-words{
  fill:#01359e;font-family:Georgia,'Times New Roman',serif;
  font-size:19px;font-weight:400;letter-spacing:3px;
}
@media(max-width:767px){body[data-page="home"] .about-contour-words{font-size:22px;letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){
 body[data-page="home"] .about-contour-type animate{display:none}
 body[data-page="home"] .about-photo .about-illustration .about-contour-type{opacity:1;transition:none}
}

/* Orange flower only: small text follows the petals, not the stem or rocks. */
body[data-page="home"] .about-contour-words{fill:#FE6D02;}

/* Flower lettering: 5-lobed petal silhouette in original illustration coordinates. */
body[data-page="home"] .about-photo .about-illustration .about-contour-type{inset:0;width:100%;height:100%;}
body[data-page="home"] .about-contour-words{fill:#FE6D02;font-size:13px;letter-spacing:1.15px;font-family:Georgia,'Times New Roman',serif;}
@media(max-width:767px){body[data-page="home"] .about-contour-words{font-size:15px;letter-spacing:1px;}}

/* Short phrases, comfortably legible while moving around the flower. */
body[data-page="home"] .about-contour-words{fill:#FE6D02;font-size:19px;letter-spacing:1.2px;font-family:Georgia,'Times New Roman',serif;}
@media(max-width:767px){body[data-page="home"] .about-contour-words{font-size:21px;letter-spacing:1px;}}


/* Desktop: slightly raise the main hero copy without changing mobile layout or entrance transforms. */
@media (min-width:1024px){body[data-page="home"] .hero-copy{translate:0 -12px;}}

/* ABOUT: stationary exclamation tucked behind the floating rocks.
   Existing illustration layers, sizes and animations are unchanged. */
body[data-page="home"] .about-photo .about-exclamation {
  position:absolute;left:66%;top:59%;width:12.5%;height:auto;
  display:block;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .9s ease .65s;
}
body[data-page="home"] .about-photo .about-illustration.is-visible .about-exclamation {opacity:1;}
body[data-page="home"] .about-photo .about-exclamation img {display:block;width:100%;height:auto;}
@media(prefers-reduced-motion:reduce){
 body[data-page="home"] .about-photo .about-exclamation {transition:none;}
}

/* ABOUT: smooth single-rise exclamation animation.
   Keep the original size, layer order and the existing flower/rock movement. */
@keyframes about-exclamation-float {
  0%, 15%, 100% { transform:translate3d(-7px,18px,0) rotate(-14deg); }
  48% { transform:translate3d(19px,-68px,0) rotate(15deg); }
  83% { transform:translate3d(-7px,18px,0) rotate(-14deg); }
}
body[data-page="home"] .about-photo .about-exclamation {
  animation:about-exclamation-float 20s cubic-bezier(.45,.05,.55,.95) infinite;
  transform-origin:50% 85%;
}
@media (max-width:767px) {
  @keyframes about-exclamation-float {
    0%, 15%, 100% {transform:translate3d(-5px,13px,0) rotate(-14deg);}
    48% {transform:translate3d(14px,-47px,0) rotate(15deg);}
    83% {transform:translate3d(-5px,13px,0) rotate(-14deg);}
  }
}
@media (prefers-reduced-motion:reduce) {
  body[data-page="home"] .about-photo .about-exclamation {animation:none;transform:translate3d(-7px,18px,0);}
}

/* 2026-11-11: Ensure submit button remains legible on hover and keyboard focus. */
.contact-section .contact-form button.form-submit:hover,
.contact-section .contact-form button.form-submit:focus-visible,
.contact-form button.form-submit:hover,
.contact-form button.form-submit:focus-visible {
  background-color:#FFFFFF !important;
  color:#01359E !important;
  -webkit-text-fill-color:#01359E !important;
  opacity:1 !important;
}
/* Standalone thank-you page cursor and image sizing. */
body[data-page="thanks"] .thanks-mark {display:block;object-fit:contain;}
@media(hover:hover) and (pointer:fine){
 body[data-page="thanks"].has-custom-cursor,
 body[data-page="thanks"].has-custom-cursor a {cursor:none !important;}
}

/* Keep the custom cursor navy over the white footer submit button.
   The footer itself still uses a white cursor for contrast. */
@media (hover:hover) and (pointer:fine) {
  body.has-custom-cursor .iwa-cursor:not(.on-navy) .iwa-cursor-dot { background:#01359E; }
  body.has-custom-cursor .iwa-cursor:not(.on-navy) img { filter:none; }
}

/* 2026-11-11: Match the actual message field, not the third DOM child. */
.contact-form .form-field:nth-child(3):not(:has(textarea)) { height:42px; }
.contact-form .form-field:nth-child(3):not(:has(textarea)) input { height:22px; }
.contact-form .form-field:has(> textarea) { height:174px; min-height:174px; }
.contact-form .form-field:has(> textarea) textarea { height:154px; min-height:120px; flex:1 1 auto; }
@media (min-width:1440px) {
  .contact-form .form-field:has(> textarea) { height:174px; min-height:174px; }
  .contact-form .form-field:has(> textarea) textarea { height:154px; min-height:120px; flex:1 1 auto; }
}
/* THANK YOU: larger exclamation, tight spacing, aligned at the baseline. */
body[data-page="thanks"] .thanks-heading { align-items:flex-end; gap:3px; }
body[data-page="thanks"] .thanks-mark { width:clamp(63px,8.4vw,119px); height:auto; align-self:flex-end; margin-bottom:0; }
@media (max-width:767px) {
  body[data-page="thanks"] .thanks-heading { gap:2px; }
  body[data-page="thanks"] .thanks-mark { width:clamp(39.2px,9.8vw,70px); }
}


/* 2026-11-11: Thank-you icon at 80% of the previous size, optically bottom-aligned. */
body[data-page="thanks"] .thanks-heading { align-items:flex-end; gap:3px; }
body[data-page="thanks"] .thanks-heading .thanks-mark {
  width:clamp(50.4px,6.72vw,95.2px);
  height:auto;
  margin-bottom:22px;
  align-self:flex-end;
}
@media (max-width:767px) {
  body[data-page="thanks"] .thanks-heading .thanks-mark {
    width:clamp(31.36px,7.84vw,56px);
    margin-bottom:13px;
  }
  /* Keep each label and its underline in the same field, with no overlap. */
  .contact-section .contact-form .form-field,
  .contact-section .contact-form .form-field:nth-child(3) {
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:0;
    margin:0 0 24px;
    gap:10px;
  }
  .contact-section .contact-form .form-field > span {
    position:static;
    top:auto;
    display:block;
    margin:0;
    line-height:1.5;
    flex:0 0 auto;
  }
  .contact-section .contact-form .form-field > input {
    display:block;
    box-sizing:border-box;
    width:100%;
    height:30px;
    min-height:30px;
    padding:3px 0 7px;
    margin:0;
    flex:0 0 auto;
  }
  .contact-section .contact-form .form-field > textarea,
  .contact-section .contact-form .form-field:has(> textarea) > textarea {
    display:block;
    box-sizing:border-box;
    width:100%;
    height:130px;
    min-height:130px;
    padding:4px 0 7px;
    margin:0;
    flex:0 0 auto;
  }
  .contact-section .contact-form .form-field:has(> textarea) {
    height:auto;
    min-height:0;
  }
}

/* Align the visible bottom of the exclamation with the THANK YOU lettering. */
body[data-page="thanks"] .thanks-heading .thanks-mark { margin-bottom:36px; }
@media (max-width:767px) { body[data-page="thanks"] .thanks-heading .thanks-mark { margin-bottom:22px; } }

/* Final visual alignment: move only the exclamation artwork, without changing flex layout. */
body[data-page="thanks"] .thanks-heading .thanks-mark {
  transform: translateY(-13px);
}
@media (max-width:767px) {
  body[data-page="thanks"] .thanks-heading .thanks-mark {
    transform: translateY(-8px);
  }
}

/* THANK YOU: proportional lockup. Both glyphs scale from one font-size.
   Replaces the earlier fixed-pixel margins and transforms. */
body[data-page="thanks"] .thanks-heading {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:.035em;
  font-size:clamp(55px, 7vw, 100px);
  width:auto;
  height:auto;
}
body[data-page="thanks"] .thanks-heading h1 {
  position:static;
  font-size:1em;
  line-height:1.13;
  width:auto;
  height:auto;
  margin:0;
  flex:none;
}
body[data-page="thanks"] .thanks-heading .thanks-mark {
  position:static;
  display:block;
  flex:none;
  width:.68em;
  height:auto;
  margin:0;
  align-self:flex-end;
  transform:translateY(-.12em);
}
@media (min-width:1440px) {
  body[data-page="thanks"] .thanks-heading {
    left:378px;
    top:306px;
    font-size:100px;
  }
}
@media (max-width:767px) {
  body[data-page="thanks"] .thanks-heading {
    font-size:clamp(37px,9vw,66px);
    gap:.035em;
  }
  body[data-page="thanks"] .thanks-heading .thanks-mark {
    width:.68em;
    margin:0;
    transform:translateY(-.12em);
  }
}

/* THANK YOU lockup: 110% exclamation, aligned to lettering baseline.
   em units keep size and vertical offset proportional at all widths. */
body[data-page="thanks"] .thanks-heading .thanks-mark {
  width: .748em;
  transform: translateY(-.20em);
}
@media (max-width:767px) {
  body[data-page="thanks"] .thanks-heading .thanks-mark {
    width: .748em;
    transform: translateY(-.20em);
  }
}

/* THANK YOU: align exclamation dot with the visible bottom of the letters, at every width. */
body[data-page="thanks"] .thanks-heading .thanks-mark { transform: translateY(0); }

/* 2026-11-11: continuous desktop THANK YOU layout, based on 1440px.
   No 1439/1440 breakpoint jump. */
@media (min-width:768px) {
  body[data-page="thanks"] .thanks-page {
    display:block;
    position:relative;
    box-sizing:border-box;
    width:100%;
    max-width:1440px;
    height:944px;
    min-height:944px;
    padding:0;
    margin:0 auto;
  }
  body[data-page="thanks"] .thanks-heading {
    position:absolute;
    left:50%;
    top:306px;
    transform:translateX(-50%);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    width:max-content;
    max-width:calc(100% - 48px);
    height:auto;
    gap:.035em;
    font-size:clamp(52px, 6.944vw, 100px);
  }
  body[data-page="thanks"] .thanks-heading h1 {
    position:static;
    flex:none;
    width:auto;
    height:auto;
    margin:0;
    font-size:1em;
    line-height:1.13;
  }
  body[data-page="thanks"] .thanks-message {
    position:absolute;
    left:50%;
    top:466px;
    transform:translateX(-50%);
    width:calc(100% - 48px);
    max-width:653px;
    height:auto;
    margin:0;
    font-size:clamp(17px, 1.67vw, 24px);
    line-height:1.8;
  }
  body[data-page="thanks"] .thanks-back {
    position:absolute;
    left:50%;
    top:714px;
    transform:translateX(-50%);
    width:min(489px, calc(100% - 48px));
    height:70px;
    min-width:0;
    margin:0;
  }
}
/* A single proportional size/position rule for the exclamation at all widths.
   0.748em × 1.10 = 0.8228em. */
body[data-page="thanks"] .thanks-heading .thanks-mark {
  position:static;
  display:block;
  flex:none;
  width:.86394em;
  height:auto;
  max-width:none;
  margin:0;
  align-self:flex-end;
  transform:translateY(-.005em);
}
@media (max-width:767px) {
  body[data-page="thanks"] .thanks-heading .thanks-mark {
    width:.86394em;
    margin:0;
    transform:translateY(-.005em);
  }
}

/* HiLo & HiLo: change only the ampersand in the project heading. */
.project-description h1 .iwa-hilo-ampersand { font-family: "Abhaya Libre", Georgia, serif; font-style: normal; font-weight: 400; display: inline-block; margin-inline: .015em; }

/* Floating contact CTA: scale continuously across phone widths up to 767px.
   390px: 120px; 767px: 166px, matching the desktop size. */
@media (max-width: 767px) {
  .iwa-floating-contact {
    width: clamp(110px, calc(120px + (100vw - 390px) * 0.122), 166px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  .iwa-floating-contact .seal-label {
    font-size: clamp(8px, calc(9px + (100vw - 390px) * 0.008), 12px) !important;
  }
  .iwa-floating-contact .seal-mail {
    width: clamp(14px, calc(15px + (100vw - 390px) * 0.0106), 19px) !important;
    height: clamp(14px, calc(15px + (100vw - 390px) * 0.0106), 19px) !important;
  }
}

/* TOP hero contact seal: scale fluidly with viewport on phones/tablets up to 767px.
   Keep the same 390px baseline, grow continuously toward the desktop layout. */
@media (max-width: 767px) {
  body[data-page="home"] a.hero-seal:not(.iwa-floating-contact) {
    width: clamp(100px, calc(110px + (100vw - 390px) * 0.14854), 166px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  body[data-page="home"] a.hero-seal:not(.iwa-floating-contact) .seal-label {
    font-size: clamp(10px, calc(11px + (100vw - 390px) * 0.0106), 15px) !important;
  }
  body[data-page="home"] a.hero-seal:not(.iwa-floating-contact) .seal-mail {
    width: clamp(17px, calc(19px + (100vw - 390px) * 0.0159), 25px) !important;
    height: clamp(17px, calc(19px + (100vw - 390px) * 0.0159), 25px) !important;
  }
}

/* Shared CONTACT footer: left-to-right letters, then softly reveal the caption. */
.contact-copy h2 .footer-reveal-line { display:inline-block; white-space:nowrap; }
.contact-copy h2 .footer-reveal-char { display:inline-block; }
.contact-copy h2 .footer-reveal-mark { display:inline-flex; align-items:baseline; vertical-align:baseline; }
.contact-copy h2 .footer-reveal-mark .accent-mark { margin-left:-.18em; }
.contact-section.footer-reveal-ready .footer-reveal-char,
.contact-section.footer-reveal-ready .footer-reveal-mark {
  opacity:0;
  transform:translateY(.2em);
}
.contact-section.footer-reveal-ready .footer-reveal-caption { opacity:0; transform:translateY(12px); }
.contact-section.footer-reveal-visible .footer-reveal-char,
.contact-section.footer-reveal-visible .footer-reveal-mark {
  animation:footer-letter-appear .48s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--footer-char-index) * 85ms);
}
.contact-section.footer-reveal-visible .footer-reveal-caption {
  animation:footer-caption-appear .85s ease-out 1.15s both;
}
@keyframes footer-letter-appear { to { opacity:1; transform:translateY(0); } }
@keyframes footer-caption-appear { to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) {
  .contact-section .footer-reveal-char,
  .contact-section .footer-reveal-mark,
  .contact-section .footer-reveal-caption { animation:none!important; opacity:1!important; transform:none!important; }
}

/* 2026-11-12: mobile copy follows the desktop type-on timing and step reveal. */
@media(max-width:767px){
 body[data-page="home"].iwa-hero-intro .hero-copy > p.mobile-english-copy {
   animation:iwa-mobile-caption-type 2s steps(72,end) both !important;
   animation-delay:var(--iwa-caption-start,4.1s) !important;
 }
}
@keyframes iwa-mobile-caption-type {
 from {clip-path:inset(0 100% 0 0);opacity:1;}
 to {clip-path:inset(0 0 0 0);opacity:1;}
}
@media(prefers-reduced-motion:reduce){
 body[data-page="home"].iwa-hero-intro .hero-copy > p.mobile-english-copy {animation:none!important;clip-path:none!important;opacity:1!important;}
}
/* Ensure the system pointer does not overlap the custom magnifier. */
@media(hover:hover) and (pointer:fine){
 body.has-custom-cursor .work-card,
 body.has-custom-cursor .work-card *,
 body.has-custom-cursor .hero-feature .project-placeholder,
 body.has-custom-cursor .hero-feature .project-placeholder *,
 body.has-custom-cursor .project-hero-space,
 body.has-custom-cursor .project-hero-space *,
 body.has-custom-cursor .project-image-space,
 body.has-custom-cursor .project-image-space * {cursor:none!important;}
}

/* 2026-11-12: mobile English types from line 1, character by character,
   simultaneously with the first Japanese headline character. */
@media(max-width:767px){
 body[data-page="home"].iwa-hero-intro .hero-copy > p.mobile-english-copy {
   animation:none!important;
   opacity:1!important;
   clip-path:none!important;
 }
 body[data-page="home"].iwa-hero-intro .mobile-english-copy .iwa-mobile-type-char {
   opacity:0;
   animation:iwa-mobile-type-letter .01s linear both;
   animation-delay:var(--iwa-mobile-char-delay, .68s);
 }
 /* Increase both the hero and floating contact buttons to 110% of their
    previous mobile dimensions without moving their anchored corners. */
 body[data-page="home"] a.hero-seal.iwa-type-ring:not(.iwa-floating-contact){
   width:clamp(110px,calc(121px + (100vw - 390px) * .163394),182.6px)!important;
 }
 .iwa-floating-contact.iwa-type-ring {
   width:clamp(121px,calc(132px + (100vw - 390px) * .1342),182.6px)!important;
 }
}
@keyframes iwa-mobile-type-letter {to{opacity:1;}}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
 body[data-page="home"] .mobile-english-copy .iwa-mobile-type-char{opacity:1!important;animation:none!important;}
}