*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:dark}body{margin:0;background:#100b16;color:#f7f1fa;font:16px/1.55 Arial,"Segoe UI",sans-serif;--pad:clamp(16px,2.4vw,44px)}a{color:inherit;text-decoration:none}button,textarea{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid #efaaff;outline-offset:4px}header,footer{display:flex;align-items:center;gap:clamp(14px,3vw,45px);padding:12px var(--pad);font-size:14px;background:#100b16}.brand{font-size:32px;margin-right:auto;letter-spacing:-3px}.brand span,h2 em{color:#daafff}.nav-contact{margin-left:auto}.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(35px,7vh,84px) var(--pad) 18px;background:radial-gradient(ellipse at 85% 55%,#671250,transparent 57%),radial-gradient(ellipse at 62% 10%,#402077,transparent 54%),#110b1b}.wave-field{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 90% 70%,#e7286944,transparent 50%);animation:drift 9s ease-in-out infinite alternate}#universe{position:absolute;right:-1%;top:0;width:60%;height:100%;z-index:-1;pointer-events:none}.hero-copy{max-width:60%}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:450;line-height:1.04;letter-spacing:-.05em}h1{font-size:clamp(44px,6.5vw,108px);margin:.26em 0}em{font-style:normal;color:#e3c0fb}.intro,.section-head>p,.steps p,.studies p,#contact>p{color:#d1c3d4}.eyebrow,.hero-bottom,.row-number,small{font-size:11px;letter-spacing:.1em}.hero-actions,.contact-links,.brief-options{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.hero-actions{margin:22px 0}.hero-actions .text-link,.contact-links>a:not(.pill){padding:9px;text-decoration:underline;text-underline-offset:5px}.pill{display:inline-block;background:#f0dff7;color:#201128;padding:12px 20px;border-radius:24px}.hero-bottom{display:flex;justify-content:space-between;padding-top:16px;color:#c6adce}.work,#concepts,.approach,.contact{padding:clamp(26px,3vw,54px) var(--pad)}.work{background:radial-gradient(ellipse at 85% 70%,#70154a55,transparent 60%),linear-gradient(130deg,#1a0e25,#271334)}h2{font-size:clamp(32px,4vw,68px);margin:8px 0 16px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.section-head h2 br{display:none}.section-head h2 em:before{content:" "}.brief-options{margin:16px 0}.brief-options button,#copy{background:#28182f;border:0;border-radius:18px;padding:8px 14px;font-size:13px}.brief-options [aria-pressed=true]{background:#ead9f2;color:#26132c}.visual{display:grid;grid-template-columns:36px 1fr auto;width:100%;align-items:center;gap:12px;text-align:left;border:0;border-bottom:1px solid #ffffff24;background:none;padding:14px 0}.visual:hover,.visual:focus-visible{color:#e6bbff}.row-info{display:flex;align-items:center;justify-content:space-between;gap:15px}.row-info strong{font-size:clamp(20px,2.5vw,40px);font-weight:450}.row-info small,.row-number,.row-action{color:#cec0d0;letter-spacing:0}.row-action{font-size:13px}.row-info small{padding-right:24px}.studies{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.studies article{min-width:0}.study-art{height:clamp(110px,14vw,230px);overflow:hidden}.chroma{background:repeating-linear-gradient(104deg,#421353 0 4%,#ca2586 6%,#ff9346 9%,#47255f 12%);background-size:140% 100%;animation:colorSlide 7s ease-in-out infinite alternate}.atlas{background:repeating-radial-gradient(ellipse at 75% 0%,transparent 0 20px,#bdaaff50 21px 22px,transparent 23px 34px),linear-gradient(130deg,#162332,#4c2a60)}.studies h3{font-size:30px;margin-top:12px}.studies p{max-width:55ch;font-size:14px;margin:8px 0}.studies article>a,.studies small a{text-decoration:underline;text-underline-offset:4px}.studies small{display:block;margin-top:5px;color:#bcaac4;letter-spacing:0}.approach{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#1a1022}.steps article{padding:10px 0}.steps article span{display:none}.steps h3{font-size:20px}.steps p{font-size:14px;margin-top:5px}.contact{background:radial-gradient(ellipse at 92% 95%,#72244866,transparent 70%),#160e1e}.brief{max-width:850px;margin-top:20px}.brief h3{font-size:24px}.brief label{display:block;margin-bottom:6px}textarea{width:100%;background:#22162b;border:1px solid #674c70;border-radius:6px;color:#fff;padding:10px;resize:vertical}#draft{white-space:pre-wrap;overflow-wrap:anywhere;color:#edd7f5;margin:14px 0}#copy-state{display:block;min-height:1.5em}footer .brand{margin:0}footer>a:last-child{margin-left:auto}.pointer-light{position:fixed;inset:0;pointer-events:none;z-index:12;background:radial-gradient(260px circle at var(--x,-999px) var(--y,-999px),#db8cff26,transparent 74%);mix-blend-mode:screen}dialog{width:min(640px,94vw);max-height:88dvh;overflow:auto;background:#211427;color:white;border:1px solid #705175;padding:24px}dialog::backdrop{background:#08050de5}.close{float:right;background:none;border:0;font-size:28px}dialog p{margin:14px 0}.note{font-size:12px;color:#cbb5d1}.skip,.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.skip:focus{clip-path:none;width:auto;height:auto;z-index:20;background:#33213e}.scroll-progress{display:none}@keyframes drift{to{transform:scale(1.2) translateX(-4%)}}@keyframes colorSlide{to{background-position:100% 0}}@media(max-width:700px){header{font-size:12px}.hero-copy{max-width:100%}.hero{padding-top:28px}#universe{width:68%;height:68%;top:25%;opacity:.66}.hero-copy{position:relative}.hero-bottom span{display:none}.hero-bottom{justify-content:flex-end}.section-head{display:block}.row-info{display:block}.row-info small{display:block;padding:0}.row-action{font-size:12px}.approach,.studies{grid-template-columns:1fr}.studies{gap:24px}.intro{max-width:75%}.hero-actions{font-size:13px}.eyebrow{font-size:9px}.pointer-light{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}.pointer-light{display:none}}

body{isolation:isolate;background:linear-gradient(155deg,#100b16,#251230 32%,#1b1124 63%,#241120)}#universe{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:.84}header,footer,.hero,.work,.approach,.contact{background:transparent}.wave-field{display:none}#contact .brief{margin:0}#contact .contact-links{margin-top:18px}


/* Stage 1: project-led gallery. Existing colored lines remain the shared motif. */
header, main, footer { max-width: 1680px; margin-inline: auto; }
.hero { padding-block: clamp(50px, 10vh, 110px) 24px; }
.hero-copy { max-width: 860px; }
.hero h1 { font-size: clamp(50px, 7.4vw, 116px); line-height: .98; letter-spacing: -.065em; }
.hero .intro { max-width: 48ch; margin-top: 24px; font-size: clamp(16px, 1.5vw, 21px); }
.hero-actions { margin-block: 30px 64px; gap: 22px; }
.hero-bottom { align-items: center; gap: 16px; }
.work { padding-top: 64px; }
.section-head { margin-bottom: 28px; }
.section-head > p { max-width: 38ch; font-size: 15px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ae82c337; border-radius: 18px; background: #1c1325f2; box-shadow: 0 16px 48px #08050c1f; opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.65,.3,1); }
.card.reveal-pending { opacity: 0; transform: translateY(18px); }
.card:focus-within { opacity: 1; transform: none; }
.visual { position: relative; display: block; flex-shrink: 0; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 0; border-radius: 0; color: #fff; background: #0a080d; text-align: left; isolation: isolate; }
.visual:focus-visible { outline-offset: -5px; outline-width: 3px; }
.visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.65,.3,1); }
.visual::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, #0007, #0000 80%), linear-gradient(0deg, #0008, transparent 40%); }
.cover-type { position: absolute; z-index: 1; inset: 11% auto auto 7%; max-width: 85%; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.cover-type small { font-size: clamp(9px, .85vw, 12px); letter-spacing: .14em; text-transform: uppercase; }
.cover-type strong { font-size: clamp(32px, 4.3vw, 68px); line-height: .95; font-weight: 450; letter-spacing: -.06em; }
.cover-type > span { font-size: clamp(12px, 1.2vw, 18px); letter-spacing: -.01em; }
.cover-caption { position: absolute; z-index: 2; left: 7%; bottom: 6%; font-size: 10px; letter-spacing: .06em; border: 1px solid #ffffff40; border-radius: 20px; padding: 5px 10px; color: #faf4ff; background: #100b168f; }
.cover-arrow { position: absolute; z-index: 2; right: 6%; bottom: 6%; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #ffffff70; border-radius: 50%; background: #170d2080; transition: transform .3s ease, background .3s ease; }
.coffee { background: radial-gradient(ellipse at 75% 50%, #996838, transparent 60%), #38231a; }
.coffee::before { content: ''; position: absolute; width: 70%; height: 110%; top: 12%; left: 34%; border: 1px solid #ffe0a54d; border-radius: 50%; transform: rotate(-25deg); box-shadow: 0 0 0 22px #f2cf9c0a, 0 0 0 44px #f2cf9c08; }
.coffee img { object-fit: contain; width: 64%; height: 94%; inset: 10% -5% auto auto; transform: rotate(9deg); filter: drop-shadow(0 22px 24px #170a0677); }
.coffee .cover-type { color: #ffecd1; }
.coffee .cover-type strong { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(45px, 6vw, 96px); }
.husqvarna img { object-fit: contain; }
.husqvarna::after { background: linear-gradient(0deg,#0009,transparent 22%); }
.barber img { object-position: 50% 35%; }
.barber .cover-type { inset-block-start: 14%; }
.barber .cover-type strong { text-transform: uppercase; letter-spacing: -.07em; font-weight: 800; }
.ridgeline .cover-type strong { font-family: Georgia, 'Times New Roman', serif; max-width: 5ch; font-size: clamp(38px, 4.6vw, 74px); }
.shore .cover-type { color: #172e30; }
.shore .cover-type strong { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(56px, 6vw, 96px); }
.shore::after { background: linear-gradient(90deg,#f8ebcfa3,transparent 75%); }
.game { background: radial-gradient(ellipse at 75% 42%, #15685b88, transparent 44%), radial-gradient(ellipse at 90% 90%, #563cad88, transparent 60%), #102228; }
.game::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#bfe9d355 1px,transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(90deg,transparent,#000); }
.game-art { position: absolute; inset: 0; }
.gem { position: absolute; width: 22%; aspect-ratio: 1; right: 15%; top: 24%; transform: rotate(45deg); border: 1px solid #bdffe0; border-radius: 9%; background: conic-gradient(from 45deg,#bdffdf,#27a88c,#75edb6,#238979,#bdffdf); box-shadow: 0 0 50px #79ffc83b, inset 0 0 0 10px #071d2433; transition: transform .75s ease; }
.orbit { position: absolute; width: 54%; aspect-ratio: 1; right: 0; top: 3%; border: 1px solid #bfffe22b; border-radius: 50%; }
.platform { position: absolute; height: 4%; background: linear-gradient(90deg,#72b59d,#d0f8c9); border-radius: 12px; box-shadow: 0 8px 0 #487669; transform: rotate(-8deg); }
.p1 { width: 19%; right: 17%; bottom: 21%; }
.p2 { width: 11%; right: 3%; top: 23%; }
.p3 { width: 13%; right: 44%; bottom: 8%; }
.game .cover-type { max-width: 50%; }
.game .cover-type strong { max-width: 4ch; font-weight: 700; color: #d8ffe9; }
.personal-system { background: radial-gradient(ellipse at 82% 30%,#2b79686b,transparent 60%),linear-gradient(135deg,#0b242b,#0a1423 75%); }
.personal-system::before { content:'';position:absolute;width:78%;aspect-ratio:1;right:-16%;top:-13%;border:1px solid #80efd13b;border-radius:50%;box-shadow:0 0 0 28px #8ef2cf08,0 0 0 60px #8ef2cf05; }
.personal-system::after { background:linear-gradient(0deg,#04131666,transparent 25%); }
.personal-system img { inset:9% 3% auto auto;width:47%;height:88%;object-fit:cover;object-position:center top;border:1px solid #8fbec66b;border-radius:14px;box-shadow:-14px 20px 48px #0007;transform:rotate(-6deg); }
.personal-system .cover-type { max-width:49%;color:#defff2; }
.personal-system .cover-type small { color:#9ddbc8;font-size:clamp(8px,.8vw,11px);letter-spacing:.11em; }
.personal-system .cover-type strong { max-width:7ch;font-size:clamp(28px,4.3vw,66px);font-weight:700;letter-spacing:-.055em;line-height:1.02; }
.personal-system .cover-type>span { color:#b7d7d0;font-size:clamp(11px,1.15vw,17px); }
.personal-system .cover-caption { border-color:#8de7c642;color:#c6f6e6;background:#0a242ad9; }
@media(hover:hover) and (prefers-reduced-motion:no-preference){.visual.personal-system:hover img{transform:rotate(-3deg) translateY(-4px);}}
.card-copy { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.project-tag { color: #c5accf; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.card h3 { font-size: clamp(26px, 2.5vw, 38px); letter-spacing: -.04em; }
.card-summary { color: #d0c3d6; max-width: 48ch; font-size: 15px; margin: 14px 0 24px; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; justify-content: space-between; margin-top: auto; padding-top: 18px; border-top: 1px solid #bc98cb26; }
.project-details { border: 0; padding: 10px 0; min-height: 44px; background: none; color: #e7d7ed; font-size: 14px; }
.project-inquiry { display: inline-block; border: 1px solid #c092d64d; border-radius: 24px; padding: 11px 15px; min-height: 44px; font-size: 13px; color: #f3e2fa; background: #b277d011; }
.project-inquiry:focus-visible, .project-details:focus-visible { outline-color: #f1c4ff; }
.approach { margin-top: 34px; padding-block: 64px; border-block: 1px solid #a080b52b; background: #160e209c; }
.approach h2 { max-width: 14ch; }
.steps article { padding-block: 16px; }
.steps p { max-width: 52ch; font-size: 15px; line-height: 1.65; }
.contact { padding-block: 76px; }
.contact-intro { color: #d0bfd6; max-width: 54ch; }
.brief-options { margin-block: 24px 16px; }
.brief-options button { min-height: 44px; border: 1px solid #ac84bd40; }
.project-reference { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 24px; padding: 12px 16px; border: 1px solid #c292d653; border-radius: 12px; background: #40294c80; font-size: 14px; }
.project-reference[hidden] { display: none; }
#clear-reference { min-height: 44px; border: 0; background: none; color: #ebd6f4; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; }
#draft { background: #160e20a8; border-left: 2px solid #bd8ed0; padding: 16px 18px; font-size: 14px; line-height: 1.7; }
#contact-title:focus { outline: 0; }
.contact-links { gap: 14px; }
.contact-links a { min-height: 44px; }
footer { border-top: 1px solid #a080b52b; min-height: 86px; color: #d7c6df; }
dialog { width: min(760px, calc(100vw - 32px)); padding: clamp(20px, 4vw, 42px); border-radius: 18px; box-shadow: 0 32px 100px #0008; overscroll-behavior: contain; }
dialog h2 { font-size: clamp(30px, 5vw, 54px); max-width: calc(100% - 30px); }
dialog .eyebrow { max-width: calc(100% - 45px); }
.close { position: sticky; z-index: 3; top: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ba91c453; border-radius: 50%; background: #2e1d37; line-height: 1; }
.project-facts { margin-block: 24px; }
.project-facts div { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding-block: 16px; border-top: 1px solid #ad87bd33; }
.project-facts dt { color: #d5aedf; font-size: 12px; }
.project-facts dd { margin: 0; font-size: 15px; color: #e2d5e7; }
dialog .note { padding: 14px 16px; border-radius: 8px; background: #120b1b80; line-height: 1.65; }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.detail-actions .pill { font-size: 14px; }
.skip:focus { left: 16px; top: 12px; padding: 12px 18px; border-radius: 6px; }
noscript a { text-decoration: underline; }
@media (hover:hover) and (pointer:fine) {
  .visual:hover img { transform: scale(1.035); }
  .visual.coffee:hover img { transform: rotate(5deg) translateY(-5px) scale(1.025); }
  .visual.game:hover .gem { transform: rotate(53deg) translate(-3px,-3px); }
  .visual:hover .cover-arrow { transform: translate(2px,-2px); background: #4c2e65; }
  .project-inquiry:hover { background: #b277d02c; border-color: #c092d6aa; }
  .project-details:hover { color: #f0c2ff; }
}
@media (min-width:1680px) { body { --pad: 44px; } }
@media (max-width:900px) {
  .grid { gap: 18px; }
  .card-copy { padding: 20px; }
  .card-actions { align-items: flex-start; flex-direction: column; gap: 4px; }
  .cover-type strong { font-size: 40px; }
  .coffee .cover-type strong, .shore .cover-type strong { font-size: 58px; }
  .ridgeline .cover-type strong { font-size: 46px; }
}
@media (max-width:700px) {
  header { gap: 18px; min-height: 64px; }
  .hero { padding-top: 42px; }
  .hero .intro { max-width: 31ch; }
  .hero-actions { margin-block: 28px 46px; gap: 16px; }
  .hero-bottom { justify-content: space-between; }
  .hero-bottom a { margin-left: auto; }
  .work { padding-top: 42px; }
  .section-head { margin-bottom: 20px; }
  .section-head > p { margin-block: 14px 0; }
  .grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .card-actions { flex-direction: row; align-items: center; gap: 8px; }
  .cover-type { gap: 10px; }
  .cover-type strong { font-size: clamp(34px, 9vw, 64px); }
  .cover-type small { font-size: 10px; }
  .cover-type > span { font-size: 14px; }
  .coffee .cover-type strong, .shore .cover-type strong { font-size: clamp(54px, 14vw, 84px); }
  .ridgeline .cover-type strong { font-size: clamp(42px, 11vw, 70px); }
  .cover-caption { font-size: 9px; }
  .cover-arrow { width: 34px; height: 34px; }
  .approach { padding-block: 40px; margin-top: 20px; gap: 8px; }
  .contact { padding-block: 48px; }
  .project-facts div { grid-template-columns: 1fr; gap: 6px; }
  footer { flex-wrap: wrap; gap: 12px; font-size: 12px; }
}
@media (max-width:380px) {
  .card-actions { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: 46px; }
  .hero-actions { gap: 8px; }
  .hero-actions .pill { padding-inline: 15px; }
}
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html:has(body.reduced-motion) { scroll-behavior: auto; }
body.reduced-motion .pointer-light { display: none; }
body.reduced-motion .reveal-pending { opacity: 1; transform: none; }
body.reduced-motion .visual:hover img { transform: none; }
body.reduced-motion .visual.coffee:hover img, body.reduced-motion .coffee img { transform: rotate(9deg); }
body.reduced-motion .visual.game:hover .gem { transform: rotate(45deg); }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .card.reveal-pending { opacity: 1; transform: none; }
  .visual:hover img { transform: none; }
  .visual.coffee:hover img { transform: rotate(9deg); }
  .visual.game:hover .gem { transform: rotate(45deg); }
}
body.reduced-motion .visual:hover .cover-arrow { transform: none; }
@media (prefers-reduced-motion:reduce) { .visual:hover .cover-arrow { transform: none; } }

/* Stage 2: a denser opening, built from existing project materials. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(32px, 5vh, 60px) 24px;
}
.hero-copy { position: relative; z-index: 2; min-width: 0; max-width: none; }
.hero-copy > .eyebrow { font-weight: 600; letter-spacing: .08em; }
.hero h1 {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: clamp(58px, 6.2vw, 104px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.055em;
  margin-block: 22px 24px;
}
.hero h1 > span, .hero h1 > em { display: block; }
.hero h1 em { color: #e3c0fb; }
.hero .intro { margin-top: 0; max-width: 37ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.6; }
.hero-actions { margin-block: 26px 28px; gap: 12px 18px; font-weight: 600; font-size: 14px; }
.hero-actions .pill { padding: 14px 22px; border-radius: 28px; }
.hero-bottom { grid-column: 1 / -1; margin-top: 18px; padding-top: 20px; border-top: 1px solid #c29ad324; }
.hero-showcase { position: relative; min-width: 0; aspect-ratio: 1.05; width: 100%; max-width: 680px; justify-self: end; isolation: isolate; }
.hero-showcase::before { content: ''; position: absolute; inset: 10% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse,#9958c433,transparent 68%); }
.hero-frame { position: absolute; overflow: hidden; border-radius: 12px; border: 1px solid #c5a6d449; background: #100d14; box-shadow: 0 24px 60px #08040f66; }
.hero-frame-bar { display: flex; align-items: center; gap: 12px; min-height: 28px; padding: 7px 10px; font-size: clamp(8px, .65vw, 10px); letter-spacing: .01em; color: #ddcce5; background: #251c2c; line-height: 1.2; }
.frame-dots { flex: 0 0 24px; height: 4px; background: radial-gradient(circle at 2px 2px,#bb9acb 2px,transparent 2px),radial-gradient(circle at 12px 2px,#bb9acb 2px,transparent 2px),radial-gradient(circle at 22px 2px,#bb9acb 2px,transparent 2px); }
.hero-ambra { width: 61%; top: 1%; right: 4%; transform: rotate(7deg); z-index: 0; }
.hero-ambra-art { position: relative; aspect-ratio: 1.24; overflow: hidden; background: radial-gradient(ellipse at 85% 65%,#a17845,transparent 75%),#4c3020; }
.hero-ambra-art img { position: absolute; inset: 16% -9% auto auto; width: 70%; height: 94%; object-fit: contain; transform: rotate(12deg); filter: drop-shadow(0 15px 15px #17080466); }
.hero-ambra-title { position: absolute; z-index: 1; top: 12%; left: 8%; color: #ffebcf; font: clamp(26px, 3.1vw, 48px)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.06em; }
.hero-ambra-title > span { display: block; font: 11px/1.4 'Segoe UI', Arial, sans-serif; letter-spacing: .01em; margin-top: 9px; }
.hero-mechanics { width: 96%; left: 0; top: 30%; transform: rotate(-5deg); z-index: 2; }
.hero-mechanics > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.hero-shore { width: 49%; right: 1%; bottom: 0; transform: rotate(6deg); z-index: 3; }
.hero-shore-art { position: relative; aspect-ratio: 1.75; overflow: hidden; background: #b2d3c9; }
.hero-shore-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-shore-art > span { position: absolute; inset: 10% auto auto 9%; color: #17373b; font: italic clamp(28px, 3.2vw, 48px)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.06em; }
.hero-shore-art small { display: block; margin-top: 8px; font: 8px/1.3 'Segoe UI', Arial, sans-serif; letter-spacing: .08em; }
@media (max-width:1050px) and (min-width:701px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 24px; }
  .hero h1 { font-size: clamp(46px, 6.2vw, 66px); }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: .035em; }
  .hero-showcase { aspect-ratio: .9; }
  .hero-mechanics { top: 32%; }
  .hero-shore { bottom: 7%; }
  .hero-frame-bar { gap: 7px; font-size: 8px; padding-inline: 8px; }
  .frame-dots { display: none; }
}
@media (max-width:700px) {
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 28px; }
  .hero h1 { font-size: clamp(42px, 10.2vw, 70px); margin-block: 18px; line-height: 1.02; }
  .hero h1 > span { display: inline; }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: .045em; }
  .hero .intro { max-width: 37ch; font-size: 16px; }
  .hero-actions { margin-block: 22px 12px; gap: 8px 14px; font-size: 13px; }
  .hero-actions .pill { padding: 12px 18px; }
  .hero-showcase { aspect-ratio: 1.9; max-width: 520px; margin-top: 8px; justify-self: center; }
  .hero-ambra { width: 42%; top: 2%; right: 3%; transform: rotate(5deg); }
  .hero-ambra-art { aspect-ratio: 1.45; }
  .hero-ambra-title { font-size: clamp(25px, 6vw, 40px); }
  .hero-ambra-title > span { font-size: 9px; margin-top: 5px; }
  .hero-mechanics { width: 65%; top: 12%; left: 2%; transform: rotate(-4deg); }
  .hero-frame-bar { min-height: 22px; font-size: 7px; padding: 6px 8px; gap: 5px; }
  .frame-dots { display: none; }
  .hero-shore { width: 39%; bottom: 0; right: 1%; }
  .hero-shore-art > span { font-size: clamp(26px, 7vw, 40px); }
  .hero-shore-art small { font-size: 6px; margin-top: 5px; }
  .hero-bottom { margin-top: 14px; padding-top: 14px; }
}
@media (max-width:380px) {
  .hero h1 { font-size: 40px; letter-spacing: -.055em; }
  .hero-actions { gap: 6px; }
  .hero-actions .pill { padding-inline: 15px; }
}
.project-count { display: flex; align-items: center; gap: 10px; color: #cdb9d6; margin: 24px 0 28px; font-size: 13px; letter-spacing: .02em; }
.project-count > span:last-child { color: #f4e3fc; font-variant-numeric: tabular-nums; }
#contact-title { max-width: 16ch; text-wrap: balance; }
@media (max-width:700px) { .project-count { margin-block: 20px; } }

@media (min-width:701px) {
  .hero { --hero-art-shift: clamp(40px, 5vw, 64px); }
  .hero-copy { padding-right: var(--hero-art-shift); }
  .hero-showcase { left: calc(-1 * var(--hero-art-shift)); }
}