:root {
  --ink: #111418;
  --ink-soft: #1a1e22;
  --paper: #f1eee8;
  --paper-warm: #e6e1d8;
  --mist: #a7aba8;
  --copper: #c88b55;
  --copper-light: #e1ae75;
  --line: rgba(17, 20, 24, .15);
  --white-line: rgba(255,255,255,.19);
  --display: "Playfair Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { border: 0; }
.site-shell { overflow: hidden; position: relative; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.site-header { height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 82px); position: absolute; inset: 0 0 auto; z-index: 10; border-bottom: 1px solid var(--white-line); }
.brand { display: inline-flex; align-items: center; gap: 11px; position: relative; }
.brand-mark { width: 22px; height: 24px; display: flex; align-items: flex-end; gap: 3px; }
.brand-mark i { display: block; width: 5px; background: var(--copper-light); transform: skew(-20deg); }
.brand-mark i:nth-child(1) { height: 11px; opacity: .7; }.brand-mark i:nth-child(2) { height: 18px; }.brand-mark i:nth-child(3) { height: 24px; opacity: .8; }
.brand-name { font-size: clamp(12px, 1.15vw, 15px); letter-spacing: .16em; font-weight: 800; white-space: nowrap; }
.brand-caption { font-family: var(--mono); color: var(--mist); font-size: 8px; letter-spacing: .12em; margin-left: 6px; border-left: 1px solid var(--white-line); padding-left: 12px; }
.desktop-nav { display: flex; gap: clamp(22px, 3vw, 48px); margin-left: 4%; }
.desktop-nav a { color: #dedbd5; font-size: 12px; font-weight: 600; letter-spacing: .08em; transition: color .25s ease; }
.desktop-nav a:hover { color: var(--copper-light); }
.header-cta { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; padding: 12px 17px; border: 1px solid var(--white-line); transition: background .25s, color .25s, border .25s; }
.header-cta span, .button span, .card-link span, .footer-top span { color: var(--copper-light); margin-left: 13px; font-size: 15px; }
.header-cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.menu-toggle { display: none; background: none; color: var(--paper); cursor: pointer; padding: 8px 0 8px 15px; }
.menu-toggle span { display: block; width: 26px; height: 1px; background: var(--paper); margin: 6px 0; }
.hero { min-height: 720px; height: min(100vh, 900px); position: relative; display: flex; align-items: center; padding: 140px clamp(24px, 10vw, 160px) 120px; isolation: isolate; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: -3; transform: scale(1.02); animation: hero-breathe 14s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8,11,16,.9) 0%, rgba(8,11,16,.62) 38%, rgba(8,11,16,.03) 80%), linear-gradient(0deg, rgba(8,11,16,.72) 0%, transparent 35%); }
.hero-content { max-width: 700px; }.eyebrow { display: flex; align-items: center; gap: 13px; color: var(--copper-light); font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; margin: 0 0 27px; }.eyebrow.dark { color: #8a6c50; }.eyebrow-line { width: 38px; height: 1px; display: inline-block; background: currentColor; opacity: .85; }
h1, h2, h3, p { margin-top: 0; } h1, h2 { font-weight: 500; line-height: .98; letter-spacing: -.05em; } h1 { font-size: clamp(52px, 7.2vw, 112px); margin-bottom: 28px; } h1 em, h2 em, h3 em { font-family: var(--display); font-weight: 500; letter-spacing: -.03em; }
.hero-intro { color: #d1d1cb; max-width: 435px; font-size: 17px; line-height: 1.65; margin-bottom: 39px; }
.hero-actions { display: flex; align-items: center; gap: 28px; }.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 16px 20px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; font-size: 10px; cursor: pointer; touch-action: manipulation; transition: transform .25s, background .25s, color .25s; }.button:hover { transform: translateY(-3px); }.button-light { background: var(--paper); color: var(--ink); }.button-light span { color: #9e6333; }.button-copper { background: var(--copper); color: #fff; width: 100%; }.button-copper:hover { background: var(--copper-light); color: var(--ink); }
.text-link { color: #d2d3cf; font-family: var(--mono); text-transform: uppercase; font-size: 10px; letter-spacing: .07em; }.text-link span { color: var(--copper-light); margin-left: 11px; font-size: 16px; }.text-link:hover { color: #fff; }
.hero-side-note { position: absolute; right: 5vw; top: 48%; writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; color: #c8c9c5; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }.side-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--copper-light); box-shadow: 0 0 0 5px rgba(225,174,117,.13); }
.hero-scroll { position: absolute; bottom: 34px; left: clamp(24px, 5vw, 82px); display: flex; align-items: center; gap: 17px; font-family: var(--mono); color: #acb0ad; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.hero-scroll i { height: 1px; width: 82px; background: #acb0ad; position: relative; }.hero-scroll i:after { content: ""; position: absolute; width: 5px; height: 5px; border-right: 1px solid #acb0ad; border-bottom: 1px solid #acb0ad; transform: rotate(45deg); right: 0; top: -2px; }
.promise-bar { background: var(--copper); color: var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 clamp(24px, 10vw, 160px); }.promise-bar > div { min-height: 112px; display: grid; grid-template-columns: 38px 1fr; align-content: center; gap: 3px 16px; border-right: 1px solid rgba(17,20,24,.21); padding: 22px clamp(17px, 3vw, 45px); }.promise-bar > div:first-child { padding-left: 0; }.promise-bar > div:last-child { border: 0; }.promise-index { grid-row: 1 / span 2; font-family: var(--mono); font-size: 10px; opacity: .65; padding-top: 3px; }.promise-bar strong { font-size: 14px; }.promise-bar small { font-size: 12px; opacity: .68; }
.section { background: var(--paper); color: var(--ink); padding: clamp(90px, 12vw, 175px) clamp(24px, 10vw, 160px); }.section-heading { max-width: 690px; }.section-heading h2, .experience-copy h2, .contact-copy h2 { font-size: clamp(45px, 6vw, 80px); margin-bottom: 26px; }.heading-copy { color: #60625f; max-width: 390px; font-size: 15px; line-height: 1.7; }
.services-grid { margin-top: 75px; display: grid; grid-template-columns: 1.24fr 1fr 1fr; gap: 2px; background: var(--line); }.service-card { min-height: 470px; padding: 39px 37px 34px; background: var(--paper); position: relative; overflow: hidden; transition: background .35s, color .35s; }.service-card:hover { background: var(--ink); color: var(--paper); }.service-card:hover p { color: #b5b6b1; }.service-card:hover .card-link { color: var(--paper); }.service-art { height: 146px; position: relative; margin: -10px -12px 23px; overflow: hidden; }.art-living { border-bottom: 1px solid rgba(17,20,24,.15); }.art-orbit { position: absolute; border: 1px solid rgba(200,139,85,.72); border-radius: 50%; transform: rotate(-30deg); }.orbit-one { width: 205px; height: 82px; top: 27px; left: 15%; }.orbit-two { width: 260px; height: 105px; top: 15px; left: 8%; border-color: rgba(17,20,24,.3); }.art-core { font-family: var(--display); font-size: 62px; position: absolute; left: 45%; top: 29px; color: var(--copper); }.art-wiring span { position: absolute; height: 1px; background: var(--copper); transform-origin: left; }.art-wiring span:nth-child(1) { width: 90%; top: 40px; left: 3%; transform: rotate(18deg); }.art-wiring span:nth-child(2) { width: 84%; top: 96px; left: 6%; transform: rotate(-12deg); }.art-wiring span:nth-child(3) { width: 58%; top: 20px; left: 24%; transform: rotate(82deg); }.art-wiring b { position: absolute; left: 47%; top: 55px; color: var(--copper); font-size: 40px; font-weight: 400; }.art-comfort { border-bottom: 1px solid rgba(17,20,24,.15); }.comfort-sun { position: absolute; width: 43px; height: 43px; border: 1px solid var(--copper); border-radius: 50%; left: 15%; top: 33px; box-shadow: 0 0 0 12px rgba(200,139,85,.08), 0 0 0 25px rgba(200,139,85,.05); }.comfort-wave { position: absolute; border: 1px solid rgba(17,20,24,.38); width: 100px; height: 35px; border-radius: 50%; left: 44%; top: 61px; transform: rotate(-18deg); }.wave-two { top: 81px; left: 50%; }.service-number { color: var(--copper); font-family: var(--mono); font-size: 10px; margin-bottom: 19px; }.service-card h3 { font-size: 29px; line-height: 1.05; font-weight: 700; letter-spacing: -.05em; margin-bottom: 17px; }.service-card h3 em { font-size: 34px; }.service-card p { color: #656764; font-size: 14px; max-width: 290px; line-height: 1.65; margin-bottom: 30px; transition: color .3s; }.card-link { position: absolute; bottom: 33px; font-family: var(--mono); text-transform: uppercase; font-size: 10px; letter-spacing: .07em; }.card-link span { margin-left: 18px; }
.experience-section { background: var(--ink-soft); display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px, 10vw, 170px); align-items: center; padding: clamp(95px, 12vw, 170px) clamp(24px, 10vw, 160px); position: relative; }.experience-section:before { content: "AURASMART"; position: absolute; font-size: min(20vw, 300px); font-weight: 800; letter-spacing: -.1em; color: rgba(255,255,255,.018); left: 1vw; bottom: -35px; pointer-events: none; }.experience-copy { position: relative; z-index: 1; }.experience-copy p:not(.eyebrow) { color: #aeb1ae; font-size: 15px; line-height: 1.72; max-width: 390px; margin-bottom: 44px; }.experience-copy h2 { color: var(--paper); }.scenario-tabs { border-top: 1px solid var(--white-line); }.scenario-tab { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; background: none; color: #777c7a; text-align: left; border-bottom: 1px solid var(--white-line); cursor: pointer; font-size: 14px; transition: color .25s, padding .25s; }.scenario-tab span { font-family: var(--mono); font-size: 10px; }.scenario-tab:hover, .scenario-tab.active { color: var(--paper); padding-left: 10px; }.scenario-tab.active span { color: var(--copper-light); }
.experience-panel { min-height: 490px; position: relative; overflow: hidden; background: radial-gradient(circle at 70% 10%, rgba(200,139,85,.17), transparent 30%), linear-gradient(140deg, #22282b, #101214 64%); border: 1px solid rgba(255,255,255,.12); }.panel-glow { position: absolute; width: 270px; height: 270px; border-radius: 50%; background: rgba(200,139,85,.19); filter: blur(75px); top: 22%; right: 10%; }.panel-topline { position: relative; display: flex; justify-content: space-between; padding: 21px 24px; border-bottom: 1px solid var(--white-line); color: #c5c9c7; font-family: var(--mono); text-transform: uppercase; font-size: 9px; letter-spacing: .08em; }.panel-status { display: flex; align-items: center; gap: 8px; }.panel-status i { width: 6px; height: 6px; border-radius: 50%; background: #9acf88; box-shadow: 0 0 0 4px rgba(154,207,136,.1); }.panel-time { color: var(--copper-light); }.panel-body { position: relative; padding: clamp(48px, 7vw, 90px) 10% 70px; z-index: 1; }.panel-kicker { color: var(--copper-light); font-family: var(--mono); text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }.panel-body h3 { color: var(--paper); font-size: clamp(45px, 5vw, 72px); letter-spacing: -.06em; line-height: .92; margin: 18px 0 22px; }.panel-body > p:not(.panel-kicker) { color: #b7bbb8; font-size: 15px; line-height: 1.7; max-width: 360px; }.panel-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }.panel-tags span { color: #d8d8d1; border: 1px solid var(--white-line); font-family: var(--mono); font-size: 9px; padding: 8px 11px; letter-spacing: .05em; }.panel-visual { position: absolute; width: 340px; height: 340px; right: -40px; bottom: -145px; border-radius: 50%; border: 1px solid rgba(200,139,85,.3); }.visual-ring { position: absolute; inset: 25px; border: 1px solid rgba(200,139,85,.25); border-radius: 50%; }.ring-b { inset: 56px; border-color: rgba(255,255,255,.1); }.ring-c { inset: 92px; border-color: rgba(200,139,85,.4); }.visual-house { color: var(--copper-light); position: absolute; inset: 0; display: grid; place-items: center; font-size: 35px; font-family: var(--display); }
.split-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; max-width: 900px; }.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: 85px; }.process-step { padding: 25px 35px 0 0; min-height: 200px; position: relative; }.process-step:not(:last-child) { border-right: 1px solid var(--line); margin-right: 33px; }.process-step > span { font-family: var(--mono); color: #9a6e4b; font-size: 11px; }.process-line { width: 100%; height: 1px; position: absolute; top: -1px; left: 0; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .8s ease; }.process-step.revealed .process-line { transform: scaleX(1); }.process-step h3 { font-size: 20px; margin: 28px 0 11px; letter-spacing: -.03em; }.process-step p { color: #6b6d69; font-size: 13px; line-height: 1.65; max-width: 185px; }
.contact-section { background: #1a1f21; position: relative; overflow: hidden; padding: clamp(100px, 12vw, 175px) clamp(24px, 10vw, 160px); }.contact-section:after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(200,139,85,.08), transparent 45%); pointer-events: none; }.contact-inner { position: relative; z-index: 1; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 10vw, 170px); max-width: 1240px; margin: auto; }.contact-copy h2 { color: var(--paper); }.contact-copy > p:not(.eyebrow) { color: #adb1ae; max-width: 340px; line-height: 1.75; font-size: 15px; }.contact-detail { display: flex; gap: 18px; align-items: flex-start; margin-top: 48px; }.detail-icon { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid var(--copper); border-radius: 50%; color: var(--copper-light); font-family: var(--display); font-size: 22px; }.contact-detail small { display: block; color: var(--copper-light); font-family: var(--mono); text-transform: uppercase; font-size: 9px; letter-spacing: .1em; margin-bottom: 6px; }.contact-detail strong { color: #d3d5d0; font-size: 13px; font-weight: 500; line-height: 1.7; }.contact-form { background: rgba(255,255,255,.045); border: 1px solid var(--white-line); padding: clamp(26px, 4vw, 51px); }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }.contact-form label { display: block; margin-bottom: 24px; }.contact-form label > span { display: block; color: #c0c2bd; font-family: var(--mono); text-transform: uppercase; font-size: 9px; letter-spacing: .08em; margin-bottom: 9px; }.contact-form label > span i { text-transform: none; color: #777e7a; font-style: normal; }.contact-form input, .contact-form select, .contact-form textarea { width: 100%; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); padding: 9px 0 12px; outline: none; border-radius: 0; font-size: 16px; }.contact-form input::placeholder, .contact-form textarea::placeholder { color: #727774; }.contact-form select { color: #b6bbb7; }.contact-form select option { color: var(--ink); }.contact-form textarea { resize: vertical; }.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--copper-light); }.contact-form input:invalid:not(:placeholder-shown), .contact-form select:invalid:not(:focus), .contact-form textarea:invalid:not(:placeholder-shown) { border-color: #d98775; }.form-trap { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }.form-note { text-align: center; color: #777e7a; font-size: 11px; margin: 15px 0 0; }.form-success { color: #b4d3a3; text-align: center; font-size: 13px; margin: 18px 0 0; }
.contact-orb { position: absolute; width: 350px; height: 350px; border-radius: 50%; border: 1px solid rgba(200,139,85,.16); }.orb-left { left: -190px; top: 80px; }.orb-right { right: -210px; bottom: -190px; box-shadow: 0 0 0 35px rgba(200,139,85,.04), 0 0 0 70px rgba(200,139,85,.025); }
.site-footer { background: var(--ink); padding: 47px clamp(24px, 5vw, 82px) 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 30px; color: #898e8b; position: relative; }.footer-brand { color: var(--paper); }.site-footer p { font-size: 12px; line-height: 1.7; margin: 0; }.footer-top { justify-self: end; font-family: var(--mono); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; color: #b8bbb6; }.site-footer small { grid-column: 1 / -1; border-top: 1px solid var(--white-line); padding-top: 20px; font-family: var(--mono); font-size: 9px; color: #606562; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }.revealed { opacity: 1; transform: translateY(0); }.services-grid .reveal:nth-child(2), .process-grid .reveal:nth-child(2) { transition-delay: .08s; }.services-grid .reveal:nth-child(3), .process-grid .reveal:nth-child(3) { transition-delay: .16s; }.process-grid .reveal:nth-child(4) { transition-delay: .24s; }
@keyframes hero-breathe { from { transform: scale(1.02); } to { transform: scale(1.07); } }
@media (max-width: 900px) { .desktop-nav { gap: 18px; margin-left: 0; }.header-cta { display: none; }.hero { min-height: 680px; }.hero-side-note { right: 24px; }.services-grid { grid-template-columns: 1fr 1fr; }.service-main { grid-column: 1 / -1; min-height: 430px; }.experience-section, .contact-inner { grid-template-columns: 1fr; gap: 60px; }.experience-copy h2, .contact-copy h2 { font-size: clamp(52px, 11vw, 78px); }.experience-panel { min-height: 460px; }.process-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }.process-step:nth-child(2) { border-right: 0; }.contact-copy > p:not(.eyebrow) { max-width: 500px; } }
@media (max-width: 650px) { .site-header { height: 70px; padding-left: 18px; padding-right: 18px; }.brand { gap: 8px; }.brand-name { font-size: 12px; letter-spacing: .1em; }.brand-caption { display: none; }.desktop-nav { position: absolute; left: 0; right: 0; top: 69px; background: rgba(17,20,24,.98); display: grid; gap: 0; padding: 10px 24px 22px; border-bottom: 1px solid var(--white-line); transform: translateY(-150%); transition: transform .3s ease; }.desktop-nav.open { transform: translateY(0); }.desktop-nav a { padding: 13px 0; border-bottom: 1px solid var(--white-line); }.menu-toggle { display: block; }.hero { height: 720px; padding-top: 130px; align-items: flex-start; }.hero-image { object-position: 72% center; }.hero-shade { background: linear-gradient(90deg, rgba(8,11,16,.76) 0%, rgba(8,11,16,.34) 100%), linear-gradient(0deg, rgba(8,11,16,.82), transparent 55%); }.hero-intro { font-size: 15px; max-width: 330px; }.hero-actions { flex-direction: column; align-items: flex-start; gap: 23px; }.hero-scroll { display: none; }.hero-side-note { display: none; }.promise-bar { grid-template-columns: 1fr; padding: 0 24px; }.promise-bar > div, .promise-bar > div:first-child { min-height: 85px; padding: 17px 0; border-right: 0; border-bottom: 1px solid rgba(17,20,24,.21); }.promise-bar small { font-size: 11px; }.section { padding: 85px 24px; }.section-heading h2 { font-size: 49px; }.services-grid { grid-template-columns: 1fr; margin-top: 50px; }.service-main { grid-column: auto; }.service-card { min-height: 430px; }.experience-section { padding: 85px 24px; }.experience-panel { min-height: 500px; }.panel-body { padding: 50px 24px 80px; }.panel-body h3 { font-size: 52px; }.panel-visual { width: 260px; height: 260px; right: -82px; bottom: -110px; }.split-heading { grid-template-columns: 1fr; gap: 25px; }.process-grid { grid-template-columns: 1fr; margin-top: 55px; }.process-step, .process-step:not(:last-child) { min-height: 155px; border-right: 0; border-bottom: 1px solid var(--line); margin: 0; padding-right: 0; }.process-step:last-child { border-bottom: 0; }.contact-section { padding: 85px 24px; }.form-row { grid-template-columns: 1fr; gap: 0; }.site-footer { grid-template-columns: 1fr; gap: 23px; }.footer-top { justify-self: start; }.site-footer small { grid-column: auto; margin-top: 15px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hero-image { animation: none; }.reveal { transition: none; } }