@import url("https://fonts.googleapis.com/css2?family=Anton&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --heal-slate: #283c44;
  --heal-slate-deep: #17282f;
  --heal-cream: #f2e7d2;
  --heal-paper: #fbf7ef;
  --heal-gold: #dda958;
  --heal-gold-soft: #efc986;
  --heal-ink: #152228;
  --heal-white: #fffdf8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--heal-cream); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--heal-cream); color: var(--heal-ink); font-family: Manrope, sans-serif; }
img, video { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.heal-grain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .055;
  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='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.heal-header {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1px auto 1fr;
  align-items: center;
  gap: 18px;
  width: min(1210px, calc(100% - 34px));
  min-height: 66px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(19,34,40,.92);
  color: var(--heal-white);
  box-shadow: 0 15px 42px rgba(10,22,27,.22);
  backdrop-filter: blur(18px) saturate(130%);
  transform: translateX(-50%);
}
.heal-header__makerz img { width: 112px; }
.heal-header > i { width: 1px; height: 38px; background: rgba(255,255,255,.16); }
.heal-header__client { display: flex; align-items: center; gap: 8px; }
.heal-header__client b { color: var(--heal-gold); font: 400 2.05rem/.8 Anton,sans-serif; }
.heal-header__client > span { font: 800 .56rem/1 Manrope,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.heal-header__client small { display: block; margin-top: 4px; color: rgba(255,255,255,.48); font: 500 .39rem/1 "DM Mono",monospace; letter-spacing: .08em; }
.heal-header nav { justify-self: end; display: flex; align-items: center; gap: 26px; }
.heal-header nav a { color: rgba(255,255,255,.68); font: 700 .56rem/1 Manrope,sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.heal-header nav a:hover { color: var(--heal-gold-soft); }
.heal-header nav a:last-child { display: flex; align-items: center; gap: 10px; color: var(--heal-white); }

.heal-hero {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(42px,6vw,100px);
  min-height: 100svh;
  padding: 132px max(26px,calc((100% - 1280px)/2)) 78px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 15%,rgba(221,169,88,.24),transparent 26%),
    linear-gradient(135deg,var(--heal-paper),var(--heal-cream));
}
.heal-hero::after { content:""; position:absolute; right:-15vw; bottom:-55vw; width:86vw; height:86vw; border:1px solid rgba(40,60,68,.13); border-radius:50%; }
.heal-hero__ring { position:absolute; top:8%; right:34%; width:146px; height:146px; border:1px solid rgba(40,60,68,.26); border-radius:50%; animation:heal-spin 18s linear infinite; }
.heal-hero__ring::after { content:""; position:absolute; right:-6px; bottom:17px; width:17px; height:17px; border-right:4px solid var(--heal-slate); border-bottom:4px solid var(--heal-slate); transform:rotate(-15deg); }
.heal-hero__ring span { position:absolute; inset:17px; display:grid; place-items:center; border-radius:50%; color:var(--heal-slate); font:500 .48rem/1.45 "DM Mono",monospace; letter-spacing:.13em; text-align:center; }
@keyframes heal-spin { to { transform:rotate(360deg); } }
.heal-hero__copy,.heal-hero__visual { position:relative; z-index:2; }
.heal-kicker { display:flex; align-items:center; gap:12px; margin:0 0 25px; color:var(--heal-slate); font:500 .65rem/1 "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.heal-kicker span { width:34px; height:1px; background:var(--heal-gold); }
.heal-hero h1,.heal-section-head h2,.heal-depth h2,.heal-outro h2 { margin:0; font:400 clamp(72px,8.2vw,132px)/.82 Anton,sans-serif; letter-spacing:-.03em; text-transform:uppercase; }
.heal-hero h1 em,.heal-section-head h2 em,.heal-depth h2 em,.heal-outro h2 em { display:block; color:var(--heal-gold); font-style:normal; }
.heal-hero__line { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:34px; padding-top:22px; border-top:1px solid rgba(21,34,40,.22); }
.heal-hero__line p { max-width:330px; margin:0; color:rgba(21,34,40,.68); font:600 .9rem/1.55 Manrope,sans-serif; }
.heal-hero__line a,.heal-outro a { display:inline-flex; align-items:center; gap:16px; min-height:46px; padding:7px 7px 7px 16px; border:1px solid rgba(21,34,40,.28); border-radius:999px; font:800 .55rem/1 Manrope,sans-serif; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }
.heal-hero__line a i,.heal-outro a i { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--heal-slate); color:var(--heal-white); }
.heal-hero__visual { min-height:min(72vh,720px); }
.heal-hero__poster { position:absolute; right:2%; bottom:2%; width:min(66%,480px); margin:0; overflow:hidden; border:8px solid var(--heal-paper); border-radius:130px 130px 18px 18px; box-shadow:0 35px 80px rgba(22,43,50,.25); transform:rotate(2deg); }
.heal-hero__poster img { aspect-ratio:3/4; object-fit:cover; }
.heal-hero__note { position:absolute; left:0; bottom:7%; width:min(38%,260px); margin:0; overflow:hidden; border:6px solid var(--heal-white); border-radius:14px; box-shadow:0 25px 54px rgba(22,43,50,.2); transform:rotate(-5deg); }
.heal-hero__note img { aspect-ratio:4/5; object-fit:cover; }
.heal-hero__mark { position:absolute; top:8%; left:3%; display:grid; place-items:center; width:176px; height:112px; padding:14px; overflow:hidden; border:1px solid rgba(40,60,68,.16); border-radius:55%; background:var(--heal-white); box-shadow:0 14px 34px rgba(22,43,50,.14); }
.heal-hero__mark img { mix-blend-mode:multiply; }
.heal-hero__axis { position:absolute; top:8%; right:0; margin:0; color:rgba(40,60,68,.54); font:500 .48rem/1 "DM Mono",monospace; letter-spacing:.16em; writing-mode:vertical-rl; }

.heal-ticker { overflow:hidden; background:var(--heal-gold); color:var(--heal-slate-deep); }
.heal-ticker div { display:flex; align-items:center; width:max-content; padding:15px 0; animation:heal-ticker 20s linear infinite; }
.heal-ticker span { padding:0 28px; font:400 1rem/1 Anton,sans-serif; letter-spacing:.11em; }
.heal-ticker i { width:7px; height:7px; border-radius:50%; background:var(--heal-slate); }
@keyframes heal-ticker { to { transform:translateX(-50%); } }

.heal-thesis { position:relative; padding:clamp(95px,11vw,170px) max(26px,calc((100% - 1280px)/2)); overflow:hidden; background:var(--heal-slate-deep); color:var(--heal-white); }
.heal-thesis__orbit { position:absolute; top:-24vw; right:-16vw; width:64vw; height:64vw; border:1px solid rgba(239,201,134,.16); border-radius:50%; }
.heal-thesis__orbit::after { content:""; position:absolute; inset:12%; border:1px solid rgba(239,201,134,.1); border-radius:50%; }
.heal-section-head { position:relative; z-index:2; display:grid; grid-template-columns:170px 1fr; gap:40px; align-items:start; margin-bottom:clamp(58px,7vw,100px); }
.heal-section-head > p { margin:9px 0 0; color:rgba(21,34,40,.56); font:500 .62rem/1 "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
.heal-section-head h2 { max-width:1000px; font-size:clamp(58px,7.5vw,116px); }
.heal-section-head--dark > p { color:rgba(255,255,255,.45); }
.heal-section-head--dark h2 { color:var(--heal-white); }
.heal-thesis__copy { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:end; gap:40px; margin-left:210px; margin-bottom:48px; border-top:1px solid rgba(255,255,255,.15); padding-top:22px; }
.heal-thesis__copy span { color:var(--heal-gold-soft); font:500 .55rem/1 "DM Mono",monospace; letter-spacing:.12em; }
.heal-thesis__copy p { max-width:650px; margin:0; color:rgba(255,255,255,.66); font:600 clamp(1.25rem,2.3vw,2.2rem)/1.3 Manrope,sans-serif; }
.heal-thesis__banner { position:relative; z-index:2; margin:0; overflow:hidden; border-radius:18px; }
.heal-thesis__banner img { aspect-ratio:2/1; object-fit:cover; }

.heal-world { padding:clamp(95px,11vw,170px) max(26px,calc((100% - 1280px)/2)); background:var(--heal-paper); }
.heal-gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2vw,30px); align-items:start; }
.heal-card { position:relative; margin:0; overflow:hidden; border-radius:16px; background:var(--heal-slate-deep); box-shadow:0 20px 54px rgba(30,48,55,.12); }
.heal-card img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.heal-card--cream { background:var(--heal-cream); }
.heal-card--cream img { aspect-ratio:4/5; object-fit:contain; }
.heal-card figcaption { position:absolute; left:10px; right:10px; bottom:10px; display:flex; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid rgba(255,255,255,.24); border-radius:10px; background:rgba(20,34,40,.72); color:var(--heal-white); backdrop-filter:blur(12px); }
.heal-card figcaption span,.heal-card figcaption b { font:600 .48rem/1 Manrope,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.heal-card figcaption span { color:rgba(255,255,255,.62); }
.heal-card figcaption b { color:var(--heal-gold-soft); }
.heal-card--one { grid-column:1/span 5; }
.heal-card--two { grid-column:6/span 3; margin-top:90px; }
.heal-card--three { grid-column:9/span 4; margin-top:32px; }
.heal-gallery__statement { grid-column:1/span 5; padding:90px 0 46px; }
.heal-gallery__statement > span { color:var(--heal-gold); font:500 .62rem/1 "DM Mono",monospace; letter-spacing:.13em; }
.heal-gallery__statement h3 { margin:24px 0; color:var(--heal-slate); font:400 clamp(55px,6vw,92px)/.82 Anton,sans-serif; letter-spacing:-.03em; }
.heal-gallery__statement h3 em { color:var(--heal-gold); font-style:normal; }
.heal-gallery__statement p { max-width:340px; margin:0; color:rgba(21,34,40,.58); font:600 .9rem/1.6 Manrope,sans-serif; }
.heal-card--four { grid-column:6/span 4; margin-top:110px; }
.heal-card--five { grid-column:10/span 3; margin-top:25px; }
.heal-card--six { grid-column:2/span 3; margin-top:-150px; }
.heal-card--seven { grid-column:6/span 5; margin-top:-70px; }

.heal-depth { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(48px,7vw,110px); align-items:center; padding:clamp(95px,11vw,170px) max(26px,calc((100% - 1280px)/2)); overflow:hidden; background:var(--heal-cream); }
.heal-depth__copy > p { margin:0 0 26px; color:var(--heal-gold); font:500 .63rem/1 "DM Mono",monospace; letter-spacing:.14em; }
.heal-depth h2 { font-size:clamp(62px,7vw,108px); color:var(--heal-slate); }
.heal-depth__copy > span { display:block; max-width:470px; margin-top:35px; color:rgba(21,34,40,.62); font:600 1rem/1.65 Manrope,sans-serif; }
.heal-depth__portraits { position:relative; min-height:min(72vw,760px); }
.heal-depth figure { position:absolute; margin:0; overflow:hidden; border-radius:120px 120px 16px 16px; box-shadow:0 28px 70px rgba(22,43,50,.2); }
.heal-depth figure img { height:100%; object-fit:cover; }
.heal-depth__main { inset:0 18% 0 0; }
.heal-depth__side { right:0; bottom:-5%; width:37%; height:54%; border:7px solid var(--heal-cream); border-radius:16px !important; transform:rotate(4deg); }

.heal-motion { padding:clamp(95px,10vw,150px) max(22px,calc((100% - 1280px)/2)); background:var(--heal-slate-deep); color:var(--heal-white); }
.heal-reels { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.heal-reel { position:relative; min-width:0; overflow:hidden; aspect-ratio:9/16; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:#0b1418; }
.heal-reel video { height:100%; object-fit:cover; }
.heal-reel__shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,20,24,.88),transparent 54%); pointer-events:none; }
.heal-reel__meta { position:absolute; left:20px; right:76px; bottom:20px; z-index:2; }
.heal-reel__meta span { display:block; margin-bottom:10px; color:var(--heal-gold-soft); font:500 .52rem/1 "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.heal-reel__meta b { font:400 clamp(27px,2.7vw,43px)/.9 Anton,sans-serif; letter-spacing:-.02em; }
.heal-reel .media-sound { position:absolute; z-index:4; right:16px; bottom:16px; }

.heal-outro { position:relative; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:60px; min-height:88svh; padding:110px max(26px,calc((100% - 1180px)/2)); overflow:hidden; background:var(--heal-paper); }
.heal-outro > img { position:relative; z-index:2; width:100%; max-width:480px; padding:22px; mix-blend-mode:multiply; }
.heal-outro__ring { position:absolute; left:-12vw; bottom:-27vw; width:64vw; height:64vw; border:1px solid rgba(40,60,68,.17); border-radius:50%; }
.heal-outro__ring::after { content:""; position:absolute; inset:13%; border:1px solid rgba(40,60,68,.12); border-radius:50%; }
.heal-outro__copy { position:relative; z-index:2; text-align:right; }
.heal-outro__copy > span { color:var(--heal-slate); font:500 .58rem/1 "DM Mono",monospace; letter-spacing:.13em; }
.heal-outro h2 { margin:34px 0 44px; font-size:clamp(72px,8vw,124px); color:var(--heal-slate); }
.heal-outro a { justify-content:flex-end; border-color:rgba(21,34,40,.28); }

.heal-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:22px; min-height:90px; padding:20px max(24px,calc((100% - 1280px)/2)); background:var(--heal-slate-deep); color:rgba(255,255,255,.5); border-top:1px solid rgba(255,255,255,.1); }
.heal-footer > a:first-child img { width:110px; }
.heal-footer p,.heal-footer > a:last-child { font:500 .5rem/1 "DM Mono",monospace; letter-spacing:.1em; }
.heal-footer > a:last-child { justify-self:end; display:flex; align-items:center; gap:10px; }

.heal-reveal { opacity:0; transform:translateY(28px); transition:opacity 680ms ease,transform 680ms cubic-bezier(.22,1,.36,1); }
.heal-reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .heal-header { grid-template-columns:auto 1px auto; }
  .heal-header nav { display:none; }
  .heal-hero { grid-template-columns:1fr; gap:38px; padding-top:124px; }
  .heal-hero__copy { max-width:760px; }
  .heal-hero__visual { min-height:min(104vw,760px); }
  .heal-hero__ring { right:8%; }
  .heal-thesis__copy { margin-left:0; }
  .heal-section-head { grid-template-columns:1fr; gap:16px; }
  .heal-depth { grid-template-columns:1fr; }
  .heal-depth__copy { max-width:760px; }
  .heal-depth__portraits { min-height:min(105vw,760px); }
  .heal-outro { grid-template-columns:1fr; gap:30px; }
  .heal-outro > img { width:60%; }
}

@media (max-width: 620px) {
  .heal-header { top:9px; width:calc(100% - 18px); min-height:56px; padding:7px 9px; gap:10px; border-radius:13px; }
  .heal-header__makerz img { width:88px; }
  .heal-header > i { height:31px; }
  .heal-header__client b { font-size:1.65rem; }
  .heal-header__client > span { font-size:.48rem; }
  .heal-header__client small { font-size:.33rem; }
  .heal-hero { gap:25px; min-height:auto; padding:104px 18px 60px; }
  .heal-hero__ring { top:8%; right:-12%; width:118px; height:118px; opacity:.65; }
  .heal-kicker { margin-bottom:20px; font-size:.53rem; }
  .heal-hero h1 { font-size:clamp(68px,21vw,96px); }
  .heal-hero__line { align-items:flex-start; margin-top:27px; }
  .heal-hero__line p { max-width:155px; font-size:.76rem; }
  .heal-hero__line a { min-height:41px; padding-left:12px; font-size:.49rem; }
  .heal-hero__line a i { width:27px; height:27px; }
  .heal-hero__visual { min-height:126vw; }
  .heal-hero__poster { right:-2%; width:76%; border-width:5px; border-radius:86px 86px 14px 14px; }
  .heal-hero__note { left:-4%; bottom:4%; width:39%; border-width:4px; }
  .heal-hero__mark { top:6%; left:0; width:135px; height:82px; padding:10px; }
  .heal-hero__axis { display:none; }
  .heal-ticker div { padding:12px 0; }
  .heal-ticker span { padding:0 20px; font-size:.82rem; }
  .heal-thesis,.heal-world,.heal-depth,.heal-motion { padding:78px 18px; }
  .heal-section-head { margin-bottom:45px; }
  .heal-section-head h2 { font-size:clamp(52px,16vw,73px); }
  .heal-thesis__copy { display:block; margin-bottom:30px; }
  .heal-thesis__copy p { margin-top:22px; font-size:1.1rem; }
  .heal-thesis__banner { margin-left:-18px; margin-right:-18px; border-radius:0; }
  .heal-thesis__banner img { aspect-ratio:2/1; object-fit:cover; }
  .heal-gallery { display:flex; flex-direction:column; gap:18px; }
  .heal-card { width:92%; }
  .heal-card:nth-of-type(even) { align-self:flex-end; width:84%; }
  .heal-card--one,.heal-card--two,.heal-card--three,.heal-card--four,.heal-card--five,.heal-card--six { margin:0; }
  .heal-gallery__statement { order:3; padding:54px 0 30px; }
  .heal-gallery__statement h3 { font-size:clamp(58px,18vw,80px); }
  .heal-card--four { order:4; }
  .heal-card--five { order:5; }
  .heal-card--six { order:6; }
  .heal-card--seven { order:7; }
  .heal-depth { gap:50px; }
  .heal-depth h2 { font-size:clamp(61px,18vw,84px); }
  .heal-depth__copy > span { margin-top:28px; font-size:.88rem; }
  .heal-depth__portraits { min-height:132vw; }
  .heal-depth__main { right:14%; }
  .heal-depth__side { width:43%; height:50%; }
  .heal-motion { padding-left:0; padding-right:0; }
  .heal-motion .heal-section-head { padding:0 18px; }
  .heal-reels { grid-template-columns:1fr; gap:16px; }
  .heal-reel { width:100%; min-height:82svh; aspect-ratio:auto; border-radius:0; }
  .heal-reel video { object-fit:cover; object-position:center; }
  .heal-reel__meta { left:18px; right:74px; bottom:20px; }
  .heal-reel__meta b { font-size:clamp(31px,10vw,43px); }
  .heal-reel .media-sound { right:16px; bottom:20px; }
  .heal-outro { min-height:88svh; padding:86px 18px; }
  .heal-outro > img { width:82%; padding:12px; }
  .heal-outro__copy { text-align:left; }
  .heal-outro h2 { font-size:clamp(68px,20vw,92px); }
  .heal-outro a { justify-content:flex-start; width:max-content; }
  .heal-footer { grid-template-columns:1fr auto; min-height:78px; padding:16px 18px; }
  .heal-footer p { display:none; }
  .heal-footer > a:first-child img { width:94px; }
  .heal-footer > a:last-child { font-size:.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .heal-hero__ring,.heal-ticker div { animation:none; }
  .heal-reveal { opacity:1; transform:none; transition:none; }
}
