:root { --paper:#faf7f2; --ink:#343533; --muted:#555550; --accent:#a01b3b; --line:#ddd7ce; --yellow:#f3d56f; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { background:var(--paper); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; font-size:18px; line-height:1.7; }
::selection { background:var(--yellow); color:var(--ink); }
a { color:inherit; }
a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
.wrap { width:min(1240px,calc(100% - 96px)); margin:auto; }
h1,h2,h3,h4 { font-family:Manrope,Arial,sans-serif; line-height:1.1; letter-spacing:-.05em; }
p { color:var(--muted); }
.topbar { background:var(--paper); border-bottom:1px solid var(--line); }
body:not(.privacy-page) .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(8px);
  background: rgba(250, 247, 242, 0.94);
}
body:not(.privacy-page) .topbar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:30px; height:68px; }
.brand { display:flex; }
.brand img { width:125px; height:auto; }
.navlinks { display:flex; gap:30px; }
.navlinks a { font-size:16px; text-decoration:none; }
.navlinks a:hover { color:var(--accent); }
.nav>.btn { font-size:15px; padding:9px 18px; border-color:var(--ink); }
.nav-toggle { display:none; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:25px; padding:16px 25px; border:1px solid var(--line); border-radius:100px; font-size:16px; text-decoration:none; font-weight:600; transition:background .2s,transform .2s; }
.btn:hover { transform:translateY(-2px); background:var(--yellow); color:var(--ink); }
.skip-link { position:fixed; top:-100px; left:20px; background:white; padding:12px; z-index:100; }
.skip-link:focus { top:15px; }
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0 30px;
  box-sizing: border-box;
}
.hero-topline { display:flex; justify-content:flex-end; align-items:center; font-size:18px; letter-spacing:.08em; }
.hero-topline a { letter-spacing:0; font-size:18px; font-weight:600; text-underline-offset:5px; color:var(--ink); }
.hero-topline a:hover { color:var(--accent); }
h1 { font-size:clamp(42px,5vw,64px); font-weight:600; letter-spacing:-.045em; margin:14px 0 28px; line-height:1.12; }
h1>span { color:var(--accent); }
.hero-grid { display:grid; grid-template-columns:1.2fr 1fr .65fr; align-items:center; gap:36px; }
.hero-role { font-family:Manrope,sans-serif; font-weight:500; font-size:clamp(24px,2.8vw,37px); color:var(--ink); line-height:1.25; letter-spacing:-.035em; }
.hero-role>span { display:block; margin-top:9px; color:var(--muted); font-size:.76em; font-weight:400; }
.hero .lead { font-size:18px; max-width:43ch; margin:23px 0; }
.text-link { display:inline-flex; gap:35px; align-items:center; font-weight:600; font-size:16px; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:8px; }
.text-link span { color:var(--accent); font-size:22px; }
.hero-image { transform:rotate(-3deg); padding:10px 10px 0; background:white; box-shadow:0 8px 30px #34291b14; }
.hero-image img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.hero-image figcaption { text-align:center; font-size:14px; padding:12px 0; letter-spacing:.025em; }
.hobby-note { background:#eee8d9; border:1px solid #e0d8c7; padding:20px 18px; display:flex; flex-direction:column; text-decoration:none; transform:rotate(2deg); border-radius:2px; transition:transform .2s; overflow:hidden; position:relative; }
.hobby-note:hover { transform:rotate(0); }
.note-plane { font-size:30px; line-height:1; margin-bottom:20px; color:#7b705b; width:fit-content; }
.hobby-note>span:not(.note-plane) { font-size:14px; letter-spacing:.12em; }
.hobby-note strong { font-size:17px; line-height:1.3; font-weight:500; letter-spacing:-.03em; margin:12px 0 22px; }
.hobby-note small { font-size:16px; line-height:1.5; }
.interest-band { border-block:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:20px; font-size:16px; }
.interest-band b { font-size:25px; color:var(--accent); font-weight:400; }
section:not(.hero) { padding:95px 0; scroll-margin-top: 75px; }
.section-kicker,.card-eyebrow { display:block; color:var(--accent); text-transform:uppercase; letter-spacing:.13em; font-size:14px; font-weight:600; margin-bottom:20px; }
h2 { font-size:clamp(38px,5.2vw,66px); font-weight:500; }
h3 { font-size:29px; font-weight:500; }
.section-header { margin-bottom:45px; }
section[aria-labelledby="work-heading"]>.section-header { display:grid; grid-template-columns:1fr 1fr; gap:0 70px; }
#business .section-kicker { grid-column:span 2; }
#business p { align-self:end; font-size:18px; max-width:46ch; }
.business-layout { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.company-panel { background:var(--accent); color:white; padding:40px; border-radius:0 45px 0 0; transition:transform .3s ease, box-shadow .3s ease; }
.company-panel:hover { transform:translateY(-3px); box-shadow:0 14px 35px rgba(160,27,59,.18); }
.company-panel .card-eyebrow { color:#f2cfda; }
.company-panel h3 { font-size:48px; margin-bottom:20px; }
.company-panel p { color:#f8e8ed; font-size:18px; margin-bottom:25px; }
.project-link { font-size:16px; text-underline-offset:6px; display:inline-flex; align-items:center; gap:8px; transition:gap .2s ease; }
.project-link:hover { gap:12px; }
.domain-panel { padding:30px 0; }
.domain-panel h3 { margin-bottom:20px; }
.domain-panel p { font-size:18px; margin-bottom:20px; }
.products-heading { display:flex; justify-content:space-between; align-items:center; gap:25px; margin:48px 0 24px; }
.products-heading h3 { font-size:22px; }
.products-heading p { font-size:16px; }
.product-list { border-top:1px solid var(--line); }
.product-row { display:grid; grid-template-columns:1fr 2fr auto; gap:25px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line); transition:padding-left .25s ease, background-color .25s ease; }
.product-row:hover { padding-left:10px; }
.product-row h4 { font-size:22px; font-weight:500; }
.product-row p,.product-row a { font-size:16px; }
.product-row a { text-underline-offset:5px; transition:color .2s; }
.additional-products { margin-top:22px; font-size:16px; }
.additional-products strong { color:var(--ink); font-weight:500; }
#cockpit-logs { padding-top:0; }
.flight-panel { display:grid; grid-template-columns:1fr 1fr; background:#e8edf0; border-radius:28px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.flight-panel:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(38,63,80,.12); }
.flight-copy { padding:55px 45px; }
.flight-copy .section-kicker { color:#4a6170; }
.flight-copy h2 { margin-bottom:22px; }
.flight-intro { font-size:20px!important; color:var(--ink); }
.flight-copy p { font-size:18px; margin-bottom:20px; }
.flight-copy .btn { background:var(--ink); color:white; border-color:var(--ink); margin-top:10px; }
.flight-copy .btn:hover { background:var(--accent); }
.flight-art { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:460px; padding:40px; background:#263f50; overflow:hidden; color:#f5eee1; }
.flight-art:before {
  content:'';
  position:absolute;
  inset:-76px;
  background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);
  background-size:38px 38px;
  animation: radarGridFly 3s linear infinite;
  will-change: transform;
}
.flight-art-label { z-index:1; letter-spacing:.16em; font-size:14px; }
.flight-art-label span { display:block; font-size:14px; margin-top:9px; }
.horizon {
  position:absolute;
  top:50%;
  left:50%;
  width:340px;
  height:340px;
  border:1px dashed #a4bbc1;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-20deg);
}
.horizon:before { content:''; position:absolute; inset:40px; border:1px solid #ffffff25; border-radius:50%; }
.horizon:after { content:''; position:absolute; inset:85px; border:1px solid #ffffff25; border-radius:50%; }
.horizon-line { position:absolute; top:50%; width:100%; border-top:1px dashed #f3d56f; }
.aircraft-mark {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--yellow);
  font-size:85px;
  transform:rotate(-25deg);
}
.flight-art-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; font-size:14px; z-index:1; }
#about { display:grid; grid-template-columns:1fr 1.5fr; gap:100px; padding-top:0; }
.about-copy>p { font-size:18px; margin-bottom:22px; }
.community-note { border-top:1px solid var(--line); margin-top:32px; padding-top:22px; }
.community-note>span { font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.community-note p { font-size:16px; margin-top:10px; }
#contact { border-top:1px solid var(--line); padding:65px 0; }
.contact-panel { position:relative; max-width:750px; }
.contact-panel h2 { font-size:clamp(48px,7vw,90px); }
.contact-panel h2>span { color:var(--accent); }
.contact-panel .lead { max-width:57ch; margin:24px 0; font-size:18px; }
.btn-primary { background:var(--accent); color:white; border-color:var(--accent); }
.contact-company { font-size:16px; margin-left:25px; text-underline-offset:5px; }
footer { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--line); padding:25px 0; }
footer p,footer>a { font-size:14px; }
footer a { text-underline-offset:4px; }
@media(max-width:1050px) {
 .wrap { width:calc(100% - 60px); }
 .navlinks { gap:18px; }
 .brand img { width:125px; }
 .hero-grid { grid-template-columns:1.2fr 1fr; gap:35px; }
 .hobby-note { grid-column:span 2; transform:none; flex-direction:row; align-items:center; gap:25px; padding:18px 24px; }
 .hobby-note strong { margin:0; font-size:18px; }
 .hobby-note strong br { display:none; }
 .note-plane { margin:0; font-size:32px; }
 .hobby-note small { margin-left:auto; max-width:140px; }
 .business-layout,section[aria-labelledby="work-heading"]>.section-header { gap:35px; }
 .flight-copy { padding:35px 28px; }
 #about { gap:50px; }
}
@media(max-width:700px) {
 .wrap { width:calc(100% - 40px); }
 .nav { height:auto; min-height:80px; flex-wrap:wrap; padding:19px 0; gap:0; }
 .nav>.btn { display:none; }
 .nav-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; background:transparent; border:1px solid var(--line); border-radius:50%; padding:11px; }
 .nav-toggle span { height:2px; width:18px; background:var(--ink); }
 .navlinks { display:none; width:100%; flex-direction:column; gap:0; padding-top:20px; }
 .navlinks.open { display:flex; }
 .navlinks a { padding:12px 0; border-top:1px solid var(--line); }
 .hero { padding:30px 0 35px; }
 .hero-topline { font-size:14px; letter-spacing:.1em; }
 .hero-topline a { font-size:14px; }
 h1 { font-size:clamp(36px,9vw,46px); margin:20px 0 28px; }
 .hero-grid { grid-template-columns:1fr; gap:28px; }
 .hero-role { font-size:29px; }
 .hero-role br { display:none; }
 .hero-role br:after { content:' '; }
 .hero .lead { max-width:none; }
 .hero-image { width:80%; justify-self:center; margin:10px 0; }
 .hobby-note { grid-column:auto; display:grid; grid-template-columns:40px 1fr; gap:6px 20px; padding:24px; }
 .note-plane { grid-row:span 3; }
 .hobby-note strong { font-size:17px; }
 .hobby-note small { margin:0; max-width:none; grid-column:2; }
 .interest-band { display:grid; grid-template-columns:1fr auto 1fr; font-size:16px; gap:8px; text-align:center; }
 .interest-band b:nth-of-type(2) { display:none; }
 .interest-band b { font-size:20px; }
 section:not(.hero) { padding:55px 0; }
 section[aria-labelledby="work-heading"]>.section-header,.business-layout,.flight-panel,#about { grid-template-columns:1fr; gap:25px; }
 #business .section-kicker { grid-column:auto; margin-bottom:0; }
 #business p { font-size:18px; }
 .section-header { margin-bottom:28px; }
 .company-panel { padding:30px; }
 .domain-panel { padding:5px 0; }
 .products-heading { display:block; margin-top:30px; }
 .products-heading p { margin-top:10px; }
 .product-row { grid-template-columns:1fr; gap:10px; }
 .flight-copy { padding:32px 25px 10px; }
 .flight-panel { gap:20px; }
 .flight-art { min-height:390px; padding:25px; }
 .horizon { width:235px; height:235px; }
 .flight-art-footer { font-size:14px; }
 #about { padding-top:0; }
 .about-copy>p { font-size:18px; }
 .contact-company { display:block; margin:20px 0 0; }
 footer { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; animation:none!important; } }

/* Smooth Scroll Reveal & Entrance Animations */
@keyframes fadeInHero {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes popPhoto {
  from { opacity: 0; transform: rotate(-6deg) scale(0.95); }
  to { opacity: 1; transform: rotate(-3deg) scale(1); }
}

@keyframes fadeInHobby {
  from { opacity: 0; transform: rotate(2deg) translateY(18px); }
  to { opacity: 1; transform: rotate(2deg) translateY(0); }
}

/* Flight Simulation Grid Translation - moving backward as plane flies forward */
@keyframes radarGridFly {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-38px, 18px);
  }
}



/* Subtle continuous ambient movements */
@keyframes floatPhoto {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-2.2deg) translateY(-6px); }
}

@keyframes floatHobby {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(2.8deg) translateY(-5px); }
}

.hero-content {
  animation: fadeInHero 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-image {
  animation: popPhoto 0.8s cubic-bezier(0.16, 1, 0.3, 1) both, floatPhoto 6s ease-in-out infinite;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hero-image:hover {
  animation-play-state: paused;
  transform: rotate(-1deg) translateY(-8px) scale(1.02);
  box-shadow: 0 18px 45px rgba(52, 41, 27, 0.16);
}

.hobby-note {
  animation: fadeInHobby 0.8s cubic-bezier(0.16, 1, 0.3, 1) both, floatHobby 7s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hobby-note:hover {
  animation-play-state: paused;
  transform: rotate(0) translateY(-6px);
  box-shadow: 0 12px 30px rgba(52, 41, 27, 0.1);
}

@keyframes flyPlaneCycle {
  /* Page load: plane starts outside the left edge and smoothly taxis into position */
  0% {
    transform: translateX(-40px);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  24% {
    transform: translateX(0);
    opacity: 1;
  }
  /* Holds position / pauses at destination */
  24%, 55% {
    transform: translateX(0);
    opacity: 1;
  }
  /* Takeoff acceleration straight through the end edge */
  76% {
    transform: translateX(290px);
    opacity: 1;
  }
  /* Vanished off the edge */
  77% {
    transform: translateX(290px);
    opacity: 0;
  }
  /* Teleport behind left edge and prepares to taxi in again */
  78%, 100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}

.note-plane {
  display: inline-block;
  animation: flyPlaneCycle 7s cubic-bezier(0.2, 0, 0.3, 1) infinite;
  will-change: transform, opacity;
}

/* Scroll reveal for sections and articles */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Privacy document uses the same brand and readable type scale. */
.privacy-page .doc-container {
  width: 100%;
  max-width: 100%;
  margin: 48px 0 72px;
}
.privacy-page h1 { font-size: clamp(36px, 5vw, 52px); margin: 12px 0 18px; }
.privacy-page .meta-date { display: block; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 32px; }
.privacy-page .doc-container h2 { font-size: 26px; letter-spacing: -.03em; line-height: 1.3; margin: 40px 0 16px; color: var(--ink); }
.privacy-page .doc-container h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.4; margin: 26px 0 12px; color: var(--ink); }
.privacy-page .doc-container p, .privacy-page .doc-container li { font-size: 17px; line-height: 1.8; color: var(--muted); }
.privacy-page .doc-container p { margin-bottom: 20px; }
.privacy-page .doc-container ul { padding-left: 24px; margin: 0 0 24px; }
.privacy-page .doc-container li { padding-left: 6px; margin-bottom: 12px; }
.privacy-page .doc-container li::marker { color: var(--accent); }
.privacy-page .doc-container a { color: var(--accent); text-underline-offset: 4px; overflow-wrap: anywhere; }
.privacy-page .topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(8px);
  background: rgba(250, 247, 242, 0.94);
}
.privacy-page .nav>.btn { display: inline-flex; }
@media(max-width:700px) {
  .privacy-page .doc-container { margin: 32px 0 45px; }
  .privacy-page .doc-container h2 { font-size: 24px; }
  .privacy-page .nav { gap: 14px; }
  .privacy-page .nav>.btn { padding: 9px 14px; font-size: 14px; }
}