:root { --salmon:#ef8f7b; --salmon-deep:#de745f; --cream:#f8f4ed; --ink:#171615; --muted:#827d76; --line:rgba(23,22,21,.16); --serif:'Playfair Display', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.site-header { align-items:center; display:flex; justify-content:space-between; left:0; padding:26px 5.2vw; position:absolute; right:0; top:0; z-index:10; }
.brand { align-items:center; display:flex; font-size:18px; font-weight:700; gap:10px; letter-spacing:-.05em; }
.wordmark { display:block; height:24px; width:130px; }
.brand-dot { color:var(--salmon-deep); }
.brand-mark { display:flex; gap:2px; height:19px; transform:skew(-20deg); width:20px; }
.brand-mark span { background:var(--ink); display:block; flex:1; }
.brand-mark span:nth-child(2) { margin-top:4px; }.brand-mark span:nth-child(3) { margin-top:8px; }
.site-nav { align-items:center; display:flex; font-family:var(--mono); font-size:11px; gap:32px; letter-spacing:.04em; text-transform:uppercase; }
.site-nav a:not(.nav-cta), .footer-links a, .footer-bottom a { transition:color .2s ease; }.site-nav a:hover, .footer-links a:hover, .footer-bottom a:hover { color:var(--salmon-deep); }
.nav-cta { background:var(--ink); color:var(--cream); padding:11px 15px; }.nav-cta span { color:var(--salmon); margin-left:15px; }
.menu-toggle { display:none; }
.section-pad { padding-left:10vw; padding-right:10vw; }
.hero { min-height:100vh; overflow:hidden; padding-top:190px; position:relative; }
.eyebrow, .section-number, .app-meta, .scroll-cue, .contact-aside, .footer-bottom { color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.eyebrow { align-items:center; display:flex; gap:14px; }.eyebrow-line { background:var(--salmon); height:1px; width:38px; }
.hero-grid { align-items:end; display:grid; grid-template-columns:1.1fr .9fr; margin-top:62px; position:relative; z-index:1; }
h1,h2,h3,p { margin-top:0; }.hero h1 { font-size:clamp(55px,8.3vw,126px); font-weight:500; letter-spacing:-.075em; line-height:.94; margin-bottom:38px; }.hero h1 em,h2 em,.big-quote em { font-family:var(--serif); font-weight:500; letter-spacing:-.07em; }
.hero-intro { font-size:18px; line-height:1.45; max-width:380px; }.hero-actions { align-items:center; display:flex; gap:28px; margin-top:39px; }
.button { align-items:center; display:inline-flex; font-family:var(--mono); font-size:11px; gap:24px; letter-spacing:.04em; padding:16px 18px; text-transform:uppercase; }.button-dark { background:var(--ink); color:var(--cream); }.button-light { background:var(--cream); color:var(--ink); }.button span { color:var(--salmon); font-size:17px; line-height:0; }.text-link,.arrow-link { border-bottom:1px solid var(--ink); font-family:var(--mono); font-size:11px; padding-bottom:4px; text-transform:uppercase; }.text-link span,.arrow-link span { color:var(--salmon-deep); margin-left:11px; }
.hero-note { justify-self:end; margin-bottom:25px; max-width:260px; width:65%; }.logo-placeholder { align-items:center; aspect-ratio:1; border:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; margin-bottom:42px; position:relative; transform:rotate(4deg); }.logo-placeholder:before,.logo-placeholder:after { border:1px solid var(--line); content:''; inset:12px; position:absolute; }.logo-placeholder:after { inset:22px; }.logo-sun { background:var(--salmon); border-radius:50%; height:40px; margin-bottom:16px; width:40px; }.logo-word { font-family:var(--serif); font-size:25px; font-style:italic; letter-spacing:-.07em; }.logo-caption { color:var(--muted); font-family:var(--mono); font-size:8px; letter-spacing:.15em; margin-top:8px; text-transform:uppercase; }.hero-note-copy { border-top:1px solid var(--line); display:flex; gap:20px; padding-top:13px; }.hero-note-copy span { color:var(--salmon-deep); font-family:var(--mono); font-size:10px; }.hero-note-copy p { font-family:var(--serif); font-size:15px; line-height:1.3; }
.hero-orbit { border:1px solid rgba(239,143,123,.28); border-radius:50%; height:560px; position:absolute; right:-225px; top:130px; width:560px; }.orbit-two { height:390px; right:-105px; top:215px; width:390px; }.scroll-cue { align-items:center; bottom:32px; display:flex; gap:14px; position:absolute; }.scroll-cue span { background:var(--salmon); border-radius:50%; height:7px; width:7px; }
.apps { background:#f2ebe1; padding-bottom:125px; padding-top:128px; }.section-heading { margin-bottom:67px; }.split-heading { align-items:end; display:flex; justify-content:space-between; }.section-heading h2 { font-size:clamp(43px,5.5vw,78px); font-weight:500; letter-spacing:-.07em; line-height:.98; margin:17px 0 0; }.section-heading > p { color:var(--muted); max-width:250px; }.app-list { display:grid; gap:22px; grid-template-columns:1fr 1fr; }.app-card { display:grid; grid-template-rows:auto 1fr; }.app-visual { align-items:end; background:#eaa18e; display:flex; height:300px; justify-content:space-between; padding:18px; position:relative; }.app-skycipher .app-visual { background:#d8d5cd; }.app-image-placeholder { align-items:center; background:rgba(248,244,237,.25); border:1px dashed rgba(23,22,21,.35); display:flex; height:160px; justify-content:center; margin:auto; width:160px; }.app-image-placeholder span { font-family:var(--mono); font-size:10px; letter-spacing:.08em; line-height:1.5; text-align:center; text-transform:uppercase; }.app-index { font-family:var(--mono); font-size:10px; }.app-info { border-bottom:1px solid var(--line); padding:25px 0 23px; }.app-meta { display:flex; gap:28px; }.app-info h3 { font-size:38px; font-weight:500; letter-spacing:-.06em; margin:17px 0 9px; }.app-info p { color:var(--muted); font-size:14px; max-width:335px; }.arrow-link { display:inline-block; margin-top:9px; }.muted-link { color:var(--muted); }
.mission { background:var(--salmon); display:grid; gap:9vw; grid-template-columns:1fr 3fr; padding-bottom:142px; padding-top:142px; }.mission-label { display:flex; flex-direction:column; gap:20px; }.mission-label .section-number { color:rgba(23,22,21,.58); }.mission-label > span:last-child { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; transform:rotate(180deg); writing-mode:vertical-rl; }.vertical-rule { background:rgba(23,22,21,.45); height:115px; margin-left:3px; width:1px; }.mission-body { max-width:800px; }.big-quote { font-size:clamp(37px,5.1vw,70px); letter-spacing:-.065em; line-height:1.04; }.mission-detail { align-items:flex-start; border-top:1px solid rgba(23,22,21,.35); display:flex; gap:25px; margin-top:75px; padding-top:18px; }.detail-mark { font-size:18px; }.mission-detail p { font-size:15px; max-width:390px; }
.principles { padding-bottom:140px; padding-top:130px; }.principles-grid { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); }.principle { border-right:1px solid var(--line); min-height:235px; padding:22px 24px 15px 0; }.principle + .principle { padding-left:24px; }.principle:last-child { border:0; }.principle-num { color:var(--salmon-deep); font-family:var(--mono); font-size:10px; }.principle h3 { font-size:19px; font-weight:500; letter-spacing:-.03em; margin:54px 0 10px; }.principle p { color:var(--muted); font-size:13px; max-width:190px; }
.contact { background:var(--ink); padding-bottom:110px; padding-top:110px; }.contact-card { background:var(--salmon-deep); min-height:540px; padding:57px 7%; position:relative; }.contact-stamp { align-items:center; border:1px solid rgba(23,22,21,.45); border-radius:50%; display:flex; font-size:23px; height:70px; justify-content:center; position:absolute; right:7%; top:54px; width:70px; }.contact h2 { font-size:clamp(54px,7vw,100px); font-weight:500; letter-spacing:-.08em; line-height:.91; margin:60px 0 25px; }.contact p { font-size:16px; max-width:365px; }.contact-aside { bottom:60px; color:rgba(23,22,21,.65); position:absolute; right:7%; text-align:right; }.site-footer { background:var(--ink); color:var(--cream); padding-bottom:27px; padding-top:55px; }.footer-top { align-items:flex-start; display:grid; grid-template-columns:2fr 1fr 1fr; padding-bottom:85px; }.footer-brand { color:var(--cream); }.footer-brand .brand-mark span { background:var(--cream); }.footer-top p { color:#948e86; font-family:var(--serif); font-size:18px; line-height:1.3; }.footer-links { display:flex; flex-direction:column; font-family:var(--mono); font-size:11px; gap:11px; text-transform:uppercase; }.footer-bottom { border-top:1px solid rgba(248,244,237,.18); color:#77716a; display:flex; justify-content:space-between; padding-top:16px; }.footer-bottom a { color:var(--cream); }.footer-star { color:var(--salmon); }
@media (max-width:700px) { .section-pad { padding-left:7vw; padding-right:7vw; }.site-header { padding:23px 7vw; }.menu-toggle { background:none; border:0; display:block; font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.menu-toggle span { color:var(--salmon-deep); font-size:17px; margin-left:6px; }.site-nav { background:var(--cream); border-bottom:1px solid var(--line); display:none; flex-direction:column; gap:21px; left:0; padding:85px 7vw 26px; position:absolute; right:0; top:0; z-index:-1; }.site-nav.is-open { display:flex; }.site-nav .nav-cta { padding:11px 15px; }.hero { min-height:760px; padding-top:142px; }.hero-grid { display:block; margin-top:47px; }.hero h1 { font-size:55px; }.hero-intro { font-size:16px; max-width:320px; }.hero-note { margin:74px 0 0 auto; width:72%; }.hero-note .logo-placeholder { margin-bottom:25px; }.hero-orbit { height:390px; right:-225px; top:145px; width:390px; }.orbit-two { display:none; }.scroll-cue { bottom:23px; }.apps { padding-bottom:85px; padding-top:90px; }.split-heading { display:block; }.section-heading { margin-bottom:45px; }.section-heading h2 { font-size:48px; }.split-heading > p { margin-top:26px; }.app-list { display:block; }.app-card + .app-card { margin-top:45px; }.app-visual { height:255px; }.app-image-placeholder { height:130px; width:130px; }.mission { display:block; padding-bottom:86px; padding-top:88px; }.mission-label { gap:12px; margin-bottom:60px; }.mission-label > span:last-child { transform:none; writing-mode:initial; }.vertical-rule { height:1px; margin:7px 0; width:55px; }.big-quote { font-size:40px; }.mission-detail { margin-top:48px; }.principles { padding-bottom:86px; padding-top:88px; }.principles-grid { grid-template-columns:1fr 1fr; }.principle { min-height:250px; padding-right:13px; }.principle + .principle { padding-left:13px; }.principle:nth-child(2) { border-right:0; }.principle:nth-child(n+3) { border-top:1px solid var(--line); }.principle h3 { font-size:17px; margin-top:38px; }.contact { padding-bottom:60px; padding-top:60px; }.contact-card { min-height:540px; padding:38px 9%; }.contact h2 { font-size:55px; margin-top:65px; }.contact-stamp { height:55px; right:9%; top:37px; width:55px; }.contact-aside { bottom:33px; left:9%; right:auto; text-align:left; }.footer-top { display:block; padding-bottom:50px; }.footer-top p { margin-top:38px; }.footer-links { margin-top:38px; }.footer-bottom { flex-wrap:wrap; gap:14px; line-height:1.5; }.footer-bottom span:nth-child(2) { order:3; width:100%; } }

/* Sharper visual pass: keep the system open and tactile instead of boxed-in. */
.logo-placeholder { background:rgba(239,143,123,.1); border:0; border-radius:50%; overflow:hidden; }
.logo-placeholder:before,.logo-placeholder:after { border-radius:50%; }
.app-list { gap:clamp(38px,6vw,92px); }
.app-visual { overflow:hidden; }
.app-visual:after { border:1px solid rgba(23,22,21,.15); border-radius:50%; content:''; height:230px; left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); width:230px; }
.app-image-placeholder { background:rgba(248,244,237,.45); border:0; border-radius:50%; height:142px; position:relative; width:142px; z-index:1; }
.app-image-placeholder span { color:rgba(23,22,21,.68); font-size:9px; }
.app-index { position:relative; z-index:1; }
.app-info { border-bottom:0; padding-bottom:7px; }
.contact-card { overflow:hidden; }
.contact-card:after { border:1px solid rgba(23,22,21,.2); border-radius:50%; content:''; height:520px; position:absolute; right:-180px; top:-90px; width:520px; }
.contact-stamp { z-index:1; }
.contact h2,.contact p,.contact .button,.contact .section-number,.contact-aside { position:relative; z-index:1; }

@media (max-width:700px) {
  .app-visual:after { height:205px; width:205px; }
  .app-image-placeholder { height:124px; width:124px; }
  .contact-card:after { height:350px; right:-175px; top:55px; width:350px; }
}

/* Real image slots. Add the matching files to /assets to replace the fallbacks. */
.logo-placeholder img,
.app-image-placeholder img { display:block; height:100%; object-fit:contain; position:relative; width:100%; z-index:2; }
.logo-placeholder img { padding:0; }
.media-slot-fallback { color:rgba(23,22,21,.52); font-family:var(--mono); font-size:8px; letter-spacing:.05em; line-height:1.4; max-width:80%; overflow-wrap:anywhere; position:absolute; text-align:center; text-transform:uppercase; z-index:0; }
.logo-placeholder .media-slot-fallback { max-width:46%; }
.logo-placeholder img[src=""] + .media-slot-fallback,
.app-image-placeholder img[src=""] + .media-slot-fallback { display:block; }
.media-missing .media-slot-fallback { display:block; }
.media-missing img { display:none; }
.detail-mark,.contact-stamp,.footer-star { font-variant-emoji:text; }

/* Eight principles: a considered 4 x 2 rhythm on larger screens. */
.principles-grid { grid-template-rows:repeat(2, auto); }
.principle:nth-child(4n) { border-right:0; }
.principle:nth-child(n+5) { border-top:1px solid var(--line); }

@media (max-width:700px) {
  .principles-grid { grid-template-columns:1fr 1fr; grid-template-rows:none; }
  .principle:nth-child(2n) { border-right:0; }
  .principle:nth-child(2n+1) { border-right:1px solid var(--line); }
  .principle:nth-child(n+3) { border-top:1px solid var(--line); }
  .scroll-cue { display:none; }
  .contact-card { min-height:0; padding-bottom:38px; }
  .contact-aside { bottom:auto; left:auto; margin-top:28px; position:static; right:auto; text-align:left; }
}