.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:660px; gap:26px; padding-block:58px 62px; }
.hero-copy { position:relative; z-index:1; }
.hero .eyebrow { margin-bottom:27px; font-size:9px; }
h1 { font-size:clamp(58px,6.7vw,94px); line-height:1.04; letter-spacing:-5.5px; font-weight:600; }
h1 em { color:var(--orange); }
.period { display:inline-block; font-size:18px; margin-left:7px; }
.hero-description { max-width:350px; font-size:14px; line-height:1.9; color:var(--muted); margin-block:27px 29px; }
.hero-footnote { display:flex; align-items:center; gap:12px; margin-top:39px; font-size:10px; line-height:1.6; color:var(--muted); }
.tiny-mark { color:var(--orange); font-size:33px; line-height:1; }
.hero-art { position:relative; height:535px; isolation:isolate; }
.art-grid { position:absolute; inset:40px 0 30px 0; background-image:linear-gradient(#deddd680 1px,transparent 1px),linear-gradient(90deg,#deddd680 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse,#000 30%,transparent 73%); z-index:-2; }
.orange-disc { width:410px; height:410px; border-radius:50%; background:#f07950; position:absolute; left:9%; top:75px; z-index:-1; }
.orange-disc::before { content:''; position:absolute; inset:20px; border:1px solid #ffad89; border-radius:50%; }
.art-caption { position:absolute; right:9px; top:20px; font-size:8px; letter-spacing:2px; writing-mode:vertical-rl; }
.hero-art .phone { position:absolute; width:202px; }
.phone-back { left:49%; top:64px; transform:rotate(12deg); }
.phone-front { left:13%; top:28px; transform:rotate(-9deg); }
.floating-label { display:flex; gap:12px; align-items:center; position:absolute; left:0; bottom:55px; padding:15px 18px; background:var(--paper); box-shadow:0 10px 30px #3025131a; border:1px solid #deddd3; border-radius:7px; font-size:11px; line-height:1.55; transform:rotate(-4deg); }
.floating-label strong { font-weight:600; }
.label-star { font-size:27px; color:var(--orange); margin-left:15px; }
.art-index { position:absolute; bottom:0; left:20%; display:flex; align-items:center; font-size:8px; letter-spacing:1.2px; }
.art-index .status-dot { background:#6d7653; width:5px; height:5px; }
.art-index>span:last-child { margin-left:45px; color:var(--muted); }
.studio-strip { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:20px; font-size:9px; letter-spacing:1.2px; }
.studio-strip>span:last-child { color:var(--muted); }
.studio-strip>span:last-child span { margin-left:35px; font-size:20px; color:var(--ink); }
.featured-product { background:#242623; border-radius:10px; overflow:hidden; min-height:485px; display:grid; grid-template-columns:1fr 1fr; color:var(--paper); }
.product-copy { padding:49px 0 43px 48px; position:relative; z-index:2; }
.product-label { display:flex; align-items:center; gap:15px; font-size:8px; letter-spacing:1.8px; color:#c3c6bd; }
.product-copy h3 { font-size:48px; letter-spacing:-2px; margin-block:27px 14px; line-height:1.2; }
.product-copy>p { font-size:13px; line-height:1.85; max-width:335px; color:#c0c3bb; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-block:23px 30px; }
.tags span { border:1px solid #54564f; border-radius:30px; padding:4px 10px; font-size:9px; color:#d5d7d0; }
.product-note { display:block; font-size:9px; color:#aeb2a7; margin-top:17px; }
.product-art { position:relative; min-height:480px; overflow:hidden; }
.product-art-note { position:absolute; top:32px; right:26px; font-size:8px; line-height:1.5; letter-spacing:1.7px; color:#c1c5b9; }
.product-orbit { position:absolute; width:390px; height:390px; border:1px solid #4b5144; border-radius:50%; left:20px; top:120px; box-shadow:0 0 0 42px #30352c,0 0 0 43px #454c3e; }
.product-phone { position:absolute; width:195px; top:99px; }
.product-phone.first { left:37px; transform:rotate(-9deg); }
.product-phone.second { left:235px; top:160px; transform:rotate(9deg); }
.next-product { display:flex; align-items:center; gap:21px; margin-top:20px; padding:24px 0 4px; }
.next-icon { width:48px; height:48px; flex-shrink:0; border:1px dashed #aaada1; border-radius:12px; display:grid; place-items:center; font-size:21px; color:var(--muted); }
.next-product h3 { font-size:14px; font-weight:600; }
.next-product p { font-size:11px; color:var(--muted); margin-top:3px; }
.next-product>.micro { margin-left:auto; font-size:8px; }
.next-product>.micro span { font-size:18px; margin-left:20px; }
.approach-section { background:#eeeee7; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); margin-top:58px; }
.principles article { padding:0 35px; border-left:1px solid #cfd0c5; }
.principles article:first-child { padding-left:0; border-left:none; }
.principles article:last-child { padding-right:0; }
.principle-icon { display:block; width:43px; height:43px; margin-bottom:34px; }
.principle-icon svg { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.principles h3 { font-size:21px; margin-block:12px; letter-spacing:-.5px; }
.principles p { font-size:12px; line-height:1.85; color:var(--muted); max-width:285px; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:95px; align-items:center; }
.studio-poster { background:#e4e6b9; padding:27px 28px; border-radius:6px; min-height:450px; position:relative; overflow:hidden; }
.poster-top { display:flex; justify-content:space-between; font-size:7px; letter-spacing:1px; color:#4a4e35; }
.poster-mark { display:grid; grid-template-columns:repeat(2,70px); width:max-content; margin:39px auto 32px; transform:rotate(-12deg); }
.poster-mark i { width:70px; height:70px; background:#555f36; border-radius:50% 50% 0 50%; }
.poster-mark i:nth-child(2) { transform:rotate(90deg); }
.poster-mark i:nth-child(3) { transform:rotate(-90deg); }
.poster-mark i:nth-child(4) { transform:rotate(180deg); background:#f7f6f2; }
.studio-poster>p { font:500 35px/1.15 var(--display); letter-spacing:-1.5px; }
.poster-bottom { display:flex; justify-content:space-between; align-items:center; font-size:7px; letter-spacing:1px; margin-top:28px; color:#4a4e35; }
.poster-bottom>span { font-size:20px; }
.about-copy h2 { margin-block:23px 25px; }
.about-copy>p:not(.eyebrow) { font-size:13px; color:var(--muted); margin-bottom:18px; max-width:365px; }
.about-copy .text-link { margin-top:10px; }
.closing-section { background:#ef7049; border-radius:8px; padding:50px; display:flex; justify-content:space-between; align-items:center; gap:35px; }
.closing-section .eyebrow { font-size:8px; margin-bottom:20px; }
.closing-section h2 { font-size:42px; letter-spacing:-1.7px; }
.circle-link { width:86px; height:86px; border:1px solid #452a20; border-radius:50%; display:grid; place-items:center; font-size:45px; flex-shrink:0; transition:background .2s,color .2s; }
.circle-link:hover { background:var(--ink); color:var(--paper); }
@media(min-width:701px) { .hero-copy { animation:enter .8s both; } .hero-art { animation:enter 1s .15s both; } }
@keyframes enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1100px) {
  h1 { font-size:72px; }
  .hero-art { transform:scale(.9); transform-origin:center; margin-left:-10px; }
  .hero-art .phone { width:185px; }
  .orange-disc { width:350px; height:350px; }
  .product-copy { padding-left:35px; }
  .product-copy h3 { font-size:39px; }
  .product-phone { width:170px; }
  .product-phone.first { left:25px; }
  .product-phone.second { left:190px; }
  .about-grid { gap:50px; }
}
@media(max-width:850px) and (min-width:701px) {
  h1 { font-size:59px; letter-spacing:-3.5px; }
  .hero { gap:0; min-height:620px; }
  .hero-art { transform:scale(.8); margin-left:-25px; }
  .phone-back { left:47%; }
  .phone-front { left:0; }
  .hero-description { max-width:285px; }
  .product-copy { padding-left:25px; }
  .product-copy>p { padding-right:20px; }
  .product-copy h3 { font-size:34px; }
  .product-phone { width:145px; top:130px; }
  .product-phone.second { left:165px; top:200px; }
  .product-art-note { right:18px; }
  .about-grid { gap:35px; }
}
@media(max-width:700px) {
  .hero { grid-template-columns:1fr; gap:15px; padding-block:44px 26px; }
  .hero .eyebrow { font-size:8px; margin-bottom:23px; }
  h1 { font-size:clamp(60px,11.8vw,82px); letter-spacing:-3.9px; }
  .hero-description { max-width:340px; margin-block:24px; }
  .hero-footnote { display:none; }
  .hero-art { width:min(440px,100%); height:450px; margin:12px auto 0; transform:none; }
  .hero-art .phone { width:170px; }
  .phone-front { left:12%; top:25px; }
  .phone-back { left:auto; right:24px; top:60px; transform:rotate(6deg); }
  .orange-disc { width:310px; height:310px; left:10%; top:80px; }
  .floating-label { left:0; bottom:35px; padding:12px; font-size:10px; }
  .art-caption { top:20px; right:0; }
  .art-index { bottom:0; left:12%; }
  .studio-strip { font-size:7px; letter-spacing:.7px; gap:16px; padding-block:16px; }
  .studio-strip>span:last-child { max-width:160px; text-align:right; }
  .studio-strip>span:last-child span { margin-left:9px; }
  .featured-product { grid-template-columns:1fr; }
  .product-copy { padding:30px 28px 0; }
  .product-copy h3 { font-size:38px; margin-top:24px; }
  .product-art { min-height:365px; }
  .product-art-note { top:27px; right:24px; }
  .product-phone { width:160px; top:45px; }
  .product-phone.first { left:12%; }
  .product-phone.second { left:53%; top:95px; }
  .product-orbit { width:290px; height:290px; left:15%; top:90px; }
  .next-product { gap:15px; }
  .next-product h3 { font-size:12px; }
  .next-product p { font-size:10px; }
  .next-product>.micro { display:none; }
  .principles { grid-template-columns:1fr; margin-top:15px; }
  .principles article,.principles article:first-child,.principles article:last-child { border-left:0; border-top:1px solid #cfd0c5; padding:28px 0; }
  .principle-icon { float:right; margin-bottom:0; margin-right:5px; width:38px; }
  .principles h3 { font-size:23px; }
  .principles p { max-width:300px; }
  .about-grid { grid-template-columns:1fr; gap:36px; }
  .studio-poster { min-height:410px; }
  .about-copy { padding-top:5px; }
  .closing-section { padding:30px 25px; gap:15px; }
  .closing-section h2 { font-size:29px; letter-spacing:-1.2px; }
  .circle-link { width:53px; height:53px; font-size:30px; }
}
@media(max-width:370px) { .hero-art .phone { width:150px; } .hero-art { height:420px; } .orange-disc { width:270px; height:270px; left:7%; } .hero .eyebrow { letter-spacing:1.3px; } .product-copy { padding-inline:22px; } }