@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:#111}
body{font-family:'Cormorant Garamond',Georgia,serif}

.home{
 position:relative;
 width:1137px;
 height:717px;
 margin:0 auto;
 background:#fff;
 overflow:hidden;
}

.header{position:absolute;left:65px;right:62px;top:22px;height:42px;z-index:20}
.logo{position:absolute;left:0;top:0;width:78px}
.logo img{width:100%;height:auto;display:block}
nav{position:absolute;right:0;top:16px;display:flex;gap:26px;align-items:center;white-space:nowrap}
nav a{font-family:Arial,sans-serif;font-size:9px;color:#111;text-decoration:none}

.hero{position:absolute;left:0;top:0;width:100%;height:431px}
.intro{position:absolute;left:65px;top:98px;width:310px}
.intro h1{
 margin:0;
 font-size:79px;
 line-height:87.2px;
 letter-spacing:-2px;
 font-weight:500;
 white-space:nowrap;
}
.intro p{margin:0;font-size:14px;line-height:18px;letter-spacing:-0.2px;font-weight:500}
.intro .role{margin-top:1px}
.intro .practice{margin-top:21px}
.selected{display:block;margin-top:24px;color:#111;font-size:14px;line-height:18px;letter-spacing:0}
.selected span{font-family:Arial,sans-serif;margin-left:10px}

.star{position:absolute;left:249px;top:106px;width:90px;height:auto}
.line{position:absolute;left:159px;top:66px;width:210px;height:auto}

.slider{position:absolute;left:368px;top:104px;width:669px;height:295px}
.slides{position:absolute;left:0;top:0;width:617px;height:295px}
.slide-pair{position:absolute;left:0;top:0;width:617px;height:295px;display:flex;gap:28px;opacity:0}
.slide-pair.active{opacity:1}
.slide-pair img{width:295px;height:295px;object-fit:cover;display:block}

.slider-control{position:absolute;left:648px;top:74px;width:84px;height:214px}
.selected-label{position:absolute;left:0;top:0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px}
.counter{position:absolute;left:18px;top:166px;font-size:10px}
.slider-control button{position:absolute;border:0;background:transparent;padding:0;font-family:Arial,sans-serif;font-size:16px;cursor:pointer;color:#111}
.prev{left:0;bottom:0}.next{right:0;bottom:0}

.rule{position:absolute;left:55px;top:430px;width:1010px;height:1px;background:#aaa}

.cards{position:absolute;left:55px;top:454px;display:grid;grid-template-columns:repeat(7,128px);column-gap:21px}
.cards article{width:128px;margin:0}
.cards img{width:128px;height:116px;object-fit:cover;display:block}
.cards h2{margin:7px 0 0;font-size:10px;line-height:12px;font-weight:600;letter-spacing:-0.2px}
.cards p{margin:14px 0 0;font-size:9px;line-height:16px;letter-spacing:-0.2px}
.cards a{display:block;margin-top:9px;font-size:10px;line-height:12px;color:#111;text-decoration:none;letter-spacing:-0.2px}
.cards a span{font-family:Arial,sans-serif;margin-left:4px}

@media(max-width:1137px){
 .home{transform-origin:top left;transform:scale(calc(100vw / 1137));margin:0;height:calc(717px * (100vw / 1137))}
}


/* FINAL SITE-WIDE MENU — Home is the visual reference. */
.header nav { gap: 26px; }
.header nav a { font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 1; font-weight: 400; letter-spacing: 0; text-transform: uppercase; }


/* RESPONSIVE MOBILE — preserve desktop composition, create a dedicated mobile flow. */
@media (max-width: 650px){
  .home{width:100%;height:auto !important;min-height:100vh;transform:none !important;overflow:visible;padding:0 20px 40px;}
  .header{position:relative;left:auto;right:auto;top:auto;width:100%;height:auto;padding-top:20px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
  .logo{position:relative;left:auto;top:auto;width:72px;flex:0 0 72px;}
  .header nav{position:relative;right:auto;top:auto;left:auto;width:auto;height:auto;display:flex;flex:1;justify-content:flex-end;flex-wrap:wrap;gap:9px 14px;white-space:normal;}
  .header nav a{font-size:8px;line-height:1.1;}
  .hero{position:relative;left:auto;top:auto;width:100%;height:auto;padding-top:55px;}
  .intro{position:relative;left:auto;top:auto;width:100%;}
  .intro h1{font-size:54px;line-height:1;white-space:normal;letter-spacing:-1.2px;}
  .intro p{font-size:13px;line-height:1.45;}
  .intro .practice{margin-top:16px;}
  .selected{margin-top:20px;font-size:13px;}
  .star{position:absolute;left:auto;right:5%;top:18px;width:58px;}
  .line{position:relative;left:auto;top:auto;width:150px;margin:22px 0 0 18%;}
  .slider{position:relative;left:auto;top:auto;width:100%;height:auto;margin-top:38px;}
  .slides{position:relative;left:auto;top:auto;width:100%;height:auto;}
  .slide-pair{display:none;position:relative;width:100%;height:auto;gap:10px;}
  .slide-pair.active{display:grid;grid-template-columns:1fr 1fr;opacity:1;}
  .slide-pair img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;}
  .slider-control{position:relative;left:auto;top:auto;width:100%;height:42px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;}
  .selected-label,.counter{position:relative;left:auto;top:auto;}
  .selected-label{writing-mode:horizontal-tb;transform:none;font-size:9px;}
  .counter{font-size:9px;}
  .slider-control button{position:relative;left:auto;right:auto;bottom:auto;font-size:18px;}
  .rule{position:relative;left:auto;top:auto;width:100%;margin-top:28px;}
  .cards{position:relative;left:auto;top:auto;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin-top:22px;}
  .cards article{width:auto;}
  .cards img{width:100%;height:auto;aspect-ratio:1.1/1;object-fit:cover;}
  .cards h2{font-size:10px;}
  .cards p{font-size:9px;line-height:1.45;margin-top:9px;}
}


/* RESPONSIVE SAFEGUARDS — mobile only; desktop composition remains unchanged */
@media (max-width: 650px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .home { width:100%; max-width:100%; min-width:0; height:auto !important; margin:0; padding:0 20px 40px; overflow:visible; transform:none !important; }
  .header { position:relative !important; inset:auto !important; width:100%; height:auto; padding:20px 0 0; display:flex; align-items:flex-start; gap:14px; }
  .logo { position:relative !important; inset:auto !important; display:block; width:68px; flex:0 0 68px; }
  .header nav { position:relative !important; inset:auto !important; width:auto; min-width:0; height:auto; flex:1 1 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px 12px; white-space:normal; }
  .header nav a { font-size:8px; line-height:1.25; }
  .hero { position:relative !important; inset:auto !important; width:100%; height:auto; padding-top:42px; }
  .intro { position:relative !important; inset:auto !important; width:100%; max-width:100%; }
  .intro h1 { font-size:clamp(42px, 12vw, 54px); line-height:1; letter-spacing:-1px; white-space:normal; overflow-wrap:anywhere; }
  .intro p { max-width:100%; font-size:13px; line-height:1.45; }
  .star { position:relative !important; inset:auto !important; display:block; width:54px; margin:22px 8% 0 auto; }
  .line { position:relative !important; inset:auto !important; display:block; width:min(150px,55%); height:auto; margin:10px 0 0 18%; }
  .slider { position:relative !important; inset:auto !important; width:100%; height:auto; margin:28px 0 0; }
  .slides { position:relative !important; inset:auto !important; width:100%; height:auto; }
  .slide-pair { position:relative !important; inset:auto !important; width:100%; height:auto; display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .slide-pair.active { display:grid; }
  .slide-pair img { width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
  .slider-control { position:relative !important; inset:auto !important; width:100%; display:flex; justify-content:flex-end; gap:16px; margin-top:12px; }
  .selected-label, .counter { position:relative !important; inset:auto !important; display:block; margin-top:16px; }
  .rule { position:relative !important; inset:auto !important; width:100%; margin:26px 0 0; }
  .cards { position:relative !important; inset:auto !important; width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; margin-top:20px; }
  .cards article { width:auto; min-width:0; }
  .cards img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
  .cards h2, .cards p { overflow-wrap:anywhere; }
}

/* V8 targeted refinements */

@media (max-width:650px){
  .header{flex-direction:column !important;align-items:stretch !important;gap:12px !important;}
  .header nav{width:100% !important;max-width:100%;flex:0 0 auto !important;display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;gap:0 13px !important;overflow-x:auto !important;overflow-y:hidden !important;white-space:nowrap !important;padding:4px 0 8px;scrollbar-width:none;}
  .header nav::-webkit-scrollbar{display:none;}
  .header nav a{flex:0 0 auto;white-space:nowrap !important;font-size:8px !important;}
  .star{width:72px !important;right:5% !important;margin-top:18px !important;}
  .intro .practice{max-width:66%;margin-top:16px !important;}
  .line{position:absolute !important;left:auto !important;right:0 !important;top:190px !important;width:76px !important;max-width:27% !important;margin:0 !important;}
  .slider{margin-top:30px !important;}
}