@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/instrument-serif-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #111216;
  --panel: #1e1f24;
  --panel-soft: #25252b;
  --paper: #f2eee8;
  --paper-deep: #e6ded5;
  --coral: #fa9488;
  --coral-dark: #d66f67;
  --violet: #443d54;
  --violet-soft: #b9a8ca;
  --mint: #9fd2c4;
  --muted: #a9a6b0;
  --line: rgba(242, 238, 232, .13);
  --display: 'Instrument Serif', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
:where(a, button, summary):focus-visible { outline: 3px solid var(--mint); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 12px 16px; background: var(--paper); color: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.scroll-line { position: fixed; z-index: 101; inset: 0 0 auto; height: 2px; background: transparent; }
.scroll-line span { display: block; height: 100%; background: var(--coral); transform: scaleX(0); transform-origin: left; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 4vw, 68px); transition: background .3s, border-color .3s, padding .3s; border-bottom: 1px solid transparent; }
.site-header.scrolled { padding-block: 13px; background: rgba(17,18,22,.88); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--display); font-size: 23px; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.site-header nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 38px); }
.site-header nav a { text-decoration: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.site-header nav a:not(.nav-cta) { color: #c7c3ca; }
.portfolio-return { padding-left: clamp(12px, 1.4vw, 22px); border-left: 1px solid var(--line); color: var(--coral) !important; }
.nav-cta { padding: 13px 18px; border: 1px solid rgba(250,148,136,.5); border-radius: 999px; background: rgba(250,148,136,.1); }

.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); align-items: center; gap: clamp(36px, 5vw, 100px); padding: 130px clamp(24px, 6vw, 100px) 72px; overflow: hidden; }
.hero-copy { max-width: 760px; }
.eyebrow, .section-number { margin: 0 0 20px; color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 28px; height: 1px; margin: 0 10px 3px 0; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 28px; font-family: var(--display); font-size: clamp(68px, 8.1vw, 142px); font-weight: 400; line-height: .82; letter-spacing: -.045em; }
h1 em, h2 em { color: var(--coral); font-weight: 400; }
.hero-lead { max-width: 650px; color: #bab7c0; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 23px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.button-primary { background: var(--coral); color: var(--ink); box-shadow: 0 12px 34px rgba(250,148,136,.18); }
.button-primary:hover { background: #ffa499; transform: translateY(-2px); }
.text-link { display: inline-flex; align-items: center; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid #57575e; color: #d9d5db; text-decoration: none; font-size: 13px; }
.text-link.light { border-color: rgba(242,238,232,.35); }
.trust-list { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 30px 0 0; padding: 0; color: #84818a; list-style: none; font-size: 12px; }
.trust-list li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--mint); }

.hero-visual { position: relative; min-height: 680px; display: grid; place-items: center; }
.loom-rings { position: absolute; width: min(46vw, 650px); aspect-ratio: 1; border: 1px solid rgba(185,168,202,.18); border-radius: 50%; }
.loom-rings::before, .loom-rings::after { content: ''; position: absolute; border: 1px solid rgba(185,168,202,.14); border-radius: 50%; inset: 12%; }
.loom-rings::after { inset: 27%; }
.phone { position: relative; overflow: hidden; border: 7px solid #27282d; border-radius: 49px; background: #0f1014; box-shadow: 0 40px 90px rgba(0,0,0,.46); }
.phone::after { content: ''; position: absolute; inset: 0; border-radius: 41px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.phone-front { width: min(22vw, 330px); z-index: 3; transform: rotate(-3deg); }
.phone-back { position: absolute; width: min(18vw, 270px); right: 1%; z-index: 1; transform: rotate(8deg) translateY(35px); opacity: .74; }
.floating-note { position: absolute; z-index: 4; max-width: 210px; padding: 16px 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(31,31,37,.82); box-shadow: 0 20px 50px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
.floating-note b { display: block; margin-bottom: 7px; color: var(--coral); font-size: 9px; letter-spacing: .14em; }
.floating-note span { color: #ccc8cf; font-family: var(--display); font-size: 17px; line-height: 1.15; }
.note-one { left: -3%; top: 17%; }
.note-two { right: -2%; bottom: 14%; }

.quiet-strip { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 28px clamp(24px, 6vw, 100px); border-block: 1px solid var(--line); color: #8f8c95; }
.quiet-strip p { margin: 0; font-family: var(--display); font-size: clamp(19px, 2vw, 28px); }
.pulse-mark, .final-mark { display: flex; align-items: center; gap: 5px; }
.pulse-mark i, .final-mark i { display: block; width: 4px; height: 28px; border-radius: 999px; background: var(--coral); }
.pulse-mark i:nth-child(2), .pulse-mark i:nth-child(4), .final-mark i:nth-child(2), .final-mark i:nth-child(4) { height: 44px; }
.pulse-mark i:nth-child(3), .final-mark i:nth-child(3) { height: 58px; }

.problem-section, .principles, .access-section, .faq-section { padding: clamp(80px, 8vw, 140px) clamp(24px, 6vw, 100px); }
.problem-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 9vw; align-items: end; }
.problem-grid h2, .principles h2, .privacy-copy h2, .access-section h2, .faq-heading h2, .final-cta h2 { margin: 0; font-family: var(--display); font-size: clamp(45px, 6.2vw, 100px); font-weight: 400; line-height: .98; letter-spacing: -.03em; }
.problem-grid h2 em, .principles h2 em, .access-section h2 em, .final-cta h2 em { display: inline-block; max-width: 1100px; }
.problem-copy { padding-bottom: 4px; color: #a9a6af; font-size: 17px; line-height: 1.65; }

.journey { padding: 0 clamp(16px, 3vw, 48px) clamp(80px, 10vw, 160px); background: var(--paper); color: var(--ink); }
.journey-intro { display: grid; grid-template-columns: .6fr 1fr .6fr; gap: 5vw; align-items: end; padding: clamp(90px, 11vw, 170px) clamp(8px, 3vw, 52px) 80px; }
.journey-intro .section-number { color: var(--coral-dark); align-self: start; }
.journey-intro h2 { margin: 0; font-family: var(--display); font-size: clamp(49px, 6vw, 92px); font-weight: 400; line-height: .94; }
.journey-intro > p:last-child { color: #65616a; font-size: 16px; line-height: 1.6; }
.feature { min-height: min(780px, 80vh); display: grid; grid-template-columns: .88fr 1.12fr; margin-bottom: clamp(28px, 4vw, 64px); border-radius: 32px; overflow: hidden; background: #e8e1d9; }
.feature:nth-of-type(odd) { grid-template-columns: 1.12fr .88fr; }
.feature:nth-of-type(odd) .feature-copy { order: 2; }
.feature-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(44px, 7vw, 110px); }
.feature-index { position: absolute; top: 35px; right: 40px; color: #777179; font-size: 11px; letter-spacing: .16em; }
.feature-copy .eyebrow { color: #5f5870; }
.feature-copy h3 { margin-bottom: 28px; font-family: var(--display); font-size: clamp(46px, 5vw, 82px); font-weight: 400; line-height: .92; }
.feature-copy > p:not(.eyebrow) { max-width: 590px; color: #5e5961; font-size: 17px; line-height: 1.65; }
.feature-detail { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.feature-detail span { padding: 10px 13px; border: 1px solid rgba(17,18,22,.18); border-radius: 999px; color: #4e4a50; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.feature-screen { position: relative; display: grid; place-items: end center; min-height: 650px; overflow: hidden; }
.coral-panel { background: #efaea4; }
.violet-panel { background: #514960; }
.mint-panel { background: #a8d6ca; }
.feature-phone { width: min(52%, 350px); max-height: 87%; border-width: 6px; border-radius: 45px 45px 0 0; box-shadow: 0 40px 75px rgba(0,0,0,.28); }
.feature-phone::after { border-radius: 39px 39px 0 0; }
.screen-caption { position: absolute; left: 28px; bottom: 25px; color: rgba(17,18,22,.6); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.pattern-card { position: absolute; right: 7%; top: 15%; display: flex; gap: 12px; align-items: end; padding: 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; color: var(--paper); background: rgba(17,18,22,.4); backdrop-filter: blur(12px); }
.pattern-card b { font-family: var(--display); font-size: 46px; font-weight: 400; line-height: .8; }
.pattern-card span { font-size: 11px; line-height: 1.2; }
.report-slip { position: absolute; left: 6%; bottom: 9%; max-width: 230px; padding: 21px; border-radius: 15px; background: var(--paper); box-shadow: 0 20px 50px rgba(31,54,48,.2); }
.report-slip span { display: block; margin-bottom: 13px; color: #6e6a70; font-size: 9px; letter-spacing: .13em; }
.report-slip b { display: block; font-family: var(--display); font-size: 24px; font-weight: 400; line-height: 1.05; }
.report-slip i { display: block; margin-top: 18px; color: var(--coral-dark); font-size: 25px; font-style: normal; }

.principles { background: #17181c; }
.principles-heading { max-width: 1180px; margin: 0 auto 90px; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.principle-grid article { padding: 34px 35px 16px 0; border-right: 1px solid var(--line); }
.principle-grid article + article { padding-left: 35px; }
.principle-grid article:last-child { border-right: 0; }
.principle-grid span { color: var(--coral); font-size: 10px; letter-spacing: .15em; }
.principle-grid h3 { margin: 55px 0 15px; font-family: var(--display); font-size: 35px; font-weight: 400; }
.principle-grid p { max-width: 390px; color: #9b98a1; line-height: 1.6; }

.privacy-section { min-height: 780px; display: grid; grid-template-columns: 1fr 1fr; background: var(--violet); }
.privacy-visual { position: relative; display: grid; place-items: center; min-height: 690px; overflow: hidden; }
.privacy-visual img { position: relative; z-index: 2; width: min(30%, 210px); border-radius: 22%; box-shadow: 0 35px 70px rgba(0,0,0,.28); }
.privacy-orbit { position: absolute; width: 62%; aspect-ratio: 1; border: 1px solid rgba(242,238,232,.18); border-radius: 50%; }
.orbit-two { width: 88%; }
.privacy-label { position: absolute; z-index: 3; padding: 10px 13px; border: 1px solid rgba(242,238,232,.22); border-radius: 999px; color: #d7d1dc; background: rgba(68,61,84,.75); font-size: 9px; letter-spacing: .12em; }
.label-local { left: 10%; top: 23%; }
.label-choice { right: 9%; bottom: 22%; }
.privacy-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(55px, 8vw, 120px); background: #2b2834; }
.privacy-copy h2 { font-size: clamp(54px, 6vw, 96px); }
.privacy-copy > p:not(.section-number) { max-width: 610px; margin: 34px 0; color: #b7b1be; font-size: 17px; line-height: 1.65; }
.privacy-copy ul { margin: 0 0 40px; padding: 0; list-style: none; }
.privacy-copy li { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(242,238,232,.12); }
.privacy-copy li span { color: var(--coral); font-size: 10px; }

.access-section { display: grid; grid-template-columns: 1fr minmax(320px, .65fr); gap: 9vw; align-items: center; background: var(--paper); color: var(--ink); }
.access-section .section-number { color: var(--coral-dark); }
.access-section h2 em { color: var(--coral-dark); }
.access-card { padding: clamp(35px, 5vw, 68px); border: 1px solid rgba(17,18,22,.15); border-radius: 26px; background: #e7e0d8; }
.access-card > span { color: #686269; font-size: 10px; letter-spacing: .13em; }
.access-card p { margin: 26px 0; color: #5c575e; line-height: 1.65; }

.faq-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: 8vw; }
.faq-heading h2 { font-size: clamp(55px, 6vw, 90px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 27px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: clamp(21px, 2vw, 29px); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--coral); font-family: var(--sans); font-size: 25px; font-weight: 300; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 720px; padding: 0 55px 25px 0; color: #9e9aa4; line-height: 1.65; }

.final-cta { display: flex; min-height: 680px; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; background: #202126; }
.final-mark { margin-bottom: 35px; }
.final-cta > p { color: #96939c; font-size: 14px; }
.final-cta h2 { margin: 20px 0 42px; font-size: clamp(78px, 10vw, 160px); line-height: .78; }
.final-cta small { margin-top: 25px; color: #75727a; }

footer { display: grid; grid-template-columns: .7fr 1fr; gap: 40px; padding: 45px clamp(24px, 5vw, 80px); border-top: 1px solid var(--line); color: #8b8891; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--paper); }
.footer-brand img { width: 34px; border-radius: 9px; }
.footer-brand span { color: #77747c; font-size: 12px; }
footer nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 18px 30px; }
footer nav a, footer nav button { padding: 0; border: 0; color: #aaa6af; background: none; text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
footer > p { grid-column: 1 / -1; margin: 25px 0 0; font-size: 10px; }

.consent-banner { position: fixed; z-index: 999; left: 18px; right: 18px; bottom: 18px; display: flex; justify-content: space-between; gap: 28px; align-items: center; padding: 24px 26px; border: 1px solid rgba(255,255,255,.15); border-radius: 19px; color: var(--paper); background: rgba(31,32,37,.96); box-shadow: 0 25px 70px rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.consent-banner[hidden] { display: none; }
.consent-label { margin: 0 0 6px; color: var(--coral); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.consent-banner h2 { margin: 0 0 5px; font-family: var(--display); font-size: 25px; font-weight: 400; }
.consent-banner p:last-child { margin: 0; color: #aaa7af; font-size: 12px; }
.consent-actions { display: flex; gap: 10px; }
.consent-actions button { min-width: 125px; padding: 13px 17px; border-radius: 999px; cursor: pointer; font-size: 12px; }
.consent-secondary { border: 1px solid #56545c; color: var(--paper); background: transparent; }
.consent-primary { border: 1px solid var(--coral); color: var(--ink); background: var(--coral); }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 440px; }
  .hero-visual { min-height: 580px; }
  .phone-front { width: 275px; }
  .phone-back { width: 220px; }
  .journey-intro { grid-template-columns: 1fr 1.5fr; }
  .journey-intro > p:last-child { grid-column: 2; }
  .feature, .feature:nth-of-type(odd) { grid-template-columns: .9fr 1.1fr; }
  .feature-copy { padding: 60px; }
  .privacy-section { grid-template-columns: .85fr 1.15fr; }
}

@media (max-width: 820px) {
  .site-header nav a:not(.nav-cta):not(.portfolio-return) { display: none; }
  .site-header nav a.portfolio-return { display: inline-flex; padding-left: 0; border-left: 0; font-size: 10px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 150px; }
  .hero-copy { text-align: center; margin: auto; }
  .hero-copy .eyebrow, .hero-actions, .trust-list { justify-content: center; }
  .hero-visual { min-height: 630px; }
  .phone-front { width: 285px; }
  .phone-back { width: 220px; right: 9%; }
  .note-one { left: 3%; }
  .note-two { right: 1%; }
  .problem-grid, .access-section, .faq-section { grid-template-columns: 1fr; }
  .problem-copy { max-width: 640px; }
  .journey-intro { grid-template-columns: 1fr; gap: 28px; }
  .journey-intro > p:last-child { grid-column: auto; }
  .feature, .feature:nth-of-type(odd) { grid-template-columns: 1fr; }
  .feature:nth-of-type(odd) .feature-copy { order: 0; }
  .feature-copy { min-height: 520px; }
  .feature-screen { min-height: 620px; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid article, .principle-grid article + article { padding: 30px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .principle-grid h3 { margin-top: 25px; }
  .privacy-section { grid-template-columns: 1fr; }
  .privacy-visual { min-height: 620px; }
  .privacy-copy { min-height: 720px; }
  footer { grid-template-columns: 1fr; }
  footer nav { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .site-header { padding: 13px 16px; }
  .brand span { font-size: 20px; }
  .nav-cta { padding: 11px 14px; }
  .hero { padding: 125px 18px 45px; }
  h1 { font-size: clamp(62px, 20vw, 92px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { flex-direction: column; }
  .hero-visual { min-height: 535px; margin-inline: -15px; }
  .phone-front { width: 240px; }
  .phone-back { width: 180px; right: 1%; }
  .floating-note { max-width: 150px; padding: 12px; }
  .floating-note span { font-size: 14px; }
  .note-one { left: 0; top: 11%; }
  .note-two { right: 0; bottom: 8%; }
  .quiet-strip { align-items: flex-end; }
  .quiet-strip p { max-width: 250px; }
  .problem-section, .principles, .access-section, .faq-section { padding: 85px 20px; }
  .problem-grid h2, .principles h2, .privacy-copy h2, .access-section h2 { font-size: 48px; }
  .journey { padding-inline: 8px; }
  .journey-intro { padding: 85px 14px 45px; }
  .journey-intro h2 { font-size: 50px; }
  .feature { border-radius: 21px; }
  .feature-copy { min-height: auto; padding: 75px 26px 55px; }
  .feature-copy h3 { font-size: 48px; }
  .feature-screen { min-height: 540px; }
  .feature-phone { width: 67%; }
  .pattern-card { right: 3%; top: 8%; }
  .report-slip { left: 3%; max-width: 190px; }
  .privacy-visual { min-height: 510px; }
  .privacy-visual img { width: 34%; }
  .privacy-copy { min-height: 650px; padding: 75px 25px; }
  .access-card { padding: 30px 24px; }
  .final-cta { min-height: 690px; }
  .final-cta h2 { font-size: 84px; }
  footer { padding: 36px 20px; }
  .consent-banner { left: 10px; right: 10px; bottom: 10px; align-items: stretch; flex-direction: column; padding: 20px; }
  .consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .consent-actions button { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}