*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #555;outline-offset:6px}header{max-width:1320px;margin:auto;padding:32px 6%;display:flex;justify-content:space-between;align-items:center;gap:28px}header img{width:280px;max-width:100%;height:auto}nav{display:flex;align-items:center;gap:24px;font-size:14px}nav .active{text-decoration:underline;text-underline-offset:6px}.wrap{max-width:1320px;margin:auto;padding:0 6%}.hero{padding:100px 0 110px;max-width:980px}.eyebrow{font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 34px}h1{font-size:clamp(42px,6.8vw,88px);line-height:1.04;letter-spacing:-.055em;font-weight:600;margin:0 0 35px}p{font-size:18px;line-height:1.65;margin:0 0 20px}.hero p{max-width:670px}.role{font-size:14px;margin:32px 0 26px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:20px 28px;background:#fff;color:#111;border:1px solid #222;border-radius:6px;font-size:18px;font-weight:400;transition:background .18s ease,color .18s ease}.button:hover,.button:active{background:#111;color:#fff}.section{border-top:1px solid #d5d5d5;padding:76px 0;display:grid;grid-template-columns:1fr 1.15fr;gap:80px}h2{font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-.035em;margin:0;max-width:390px}strong{font-weight:600}.section p:last-child{margin-bottom:0}.about{background:#f3f3f3}.about .section{border:0}.contact{padding:85px 0 100px}.contact h2{font-size:clamp(38px,5vw,64px);max-width:none;margin-bottom:24px}.contact p{max-width:620px}.contact .button{margin-top:15px}footer{border-top:1px solid #ddd;padding:28px 6%;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;color:#555}.gateway{min-height:100svh;display:flex;flex-direction:column}.gateway main{flex:1;display:flex;justify-content:center;align-items:center;padding:70px 24px}.gate-content{width:min(800px,100%);text-align:center}.gate-logo{width:100%;height:auto}.gate-claim{font-size:18px;margin:35px 0 60px}.languages{display:flex;justify-content:center;gap:18px}.languages a{min-width:160px;padding:18px 30px;border:1px solid #111;font-size:18px;transition:background .2s,color .2s}.languages a:hover{background:#111;color:#fff}.gateway footer{justify-content:center;border:0}.skip{position:absolute;top:-100px;left:20px;background:#111;color:#fff;padding:12px;z-index:5}.skip:focus{top:12px}@media(max-width:700px){header{padding:24px 6%;gap:18px}header img{width:205px}nav{gap:12px}.hero{padding:60px 0 75px}.eyebrow{font-size:12px;margin-bottom:25px}.section{grid-template-columns:1fr;gap:28px;padding:50px 0}p{font-size:17px}.contact{padding:60px 0 70px}.gate-claim{margin:25px 0 40px}.languages{gap:12px}.languages a{min-width:130px;padding:16px 20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.footer-links{display:flex;flex-wrap:wrap;gap:24px}.footer-links a:hover,.legal a:hover{text-decoration:underline;text-underline-offset:4px}.legal a{text-decoration:underline}.gateway footer{flex-direction:column;align-items:center;gap:18px}@media(max-width:700px){.footer-links{gap:18px}.legal{padding-top:50px}}

/* Keep the logo and language switch visible on phones and tablets. */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  body > header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    max-width: none;
    background: #fff;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: 18px;
    border-bottom: 1px solid #e5e5e5;
  }
  html { scroll-padding-top: 100px; }
}

/* Minimal language selection. */
.languages { gap: 20px; }
.languages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  min-width: 0;
  min-height: 64px;
  padding: 20px 28px;
  border: 1px solid #222;
  border-radius: 6px;
  background: #fff;
  color: #111;
  font-size: 18px;
  font-weight: 400;
  transition: background .18s ease, color .18s ease;
}
.languages a:hover, .languages a:active {
  background: #111;
  color: #fff;
}
@media (max-width: 700px) {
  .languages { gap: 14px; }
  .languages a { width: 150px; max-width: calc((100vw - 62px) / 2); padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .languages a { transition: none; }
}

/* Persistent header across viewport sizes, including tablet desktop mode. */
body > header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
html { scroll-padding-top: 110px; }

.portrait{display:block;width:100%;max-width:360px;height:auto;margin-top:28px}.button{max-width:100%;text-align:center;line-height:1.35}

/* Clearer first screen and generous language-switch hit areas. */
body > header { padding: 24px 6%; }
header > a { display: block; min-width: 0; flex: 0 1 280px; }
header img { display: block; width: 100%; height: auto; }
.language-switch { flex: 0 0 auto; gap: 2px; padding: 3px; border: 1px solid #bbb; border-radius: 8px; background: #fff; }
.language-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 12px; border-radius: 5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.language-switch a:hover { background: #eee; }
.language-switch a.active { background: #111; color: #fff; text-decoration: none; }
.hero { padding: 64px 0 80px; }
h1 { font-size: clamp(38px, 5.3vw, 68px); line-height: 1.08; letter-spacing: -.045em; margin-bottom: 28px; }
.eyebrow { margin-bottom: 24px; }
.hero p { max-width: 700px; }
.hero-lead { font-size: 20px; line-height: 1.5; }
.role { line-height: 1.6; margin: 24px 0 20px; }
.role-context { display: block; font-size: 15px; margin-top: 4px; }
.hero .cta-note { font-size: 16px; line-height: 1.55; margin: 16px 0 0; max-width: 650px; }
.contact .contact-email { font-size: 16px; margin: 20px 0 0; }
.email-link { text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.inspiration-note { padding: 30px 0; border-bottom: 1px solid #d5d5d5; }
.inspiration-note p { margin: 0; font-size: 17px; }
.inspiration-note a { display: inline-block; text-decoration: underline; text-underline-offset: 5px; padding: 8px 0; }
.skip { z-index: 101; }
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  body > header { padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: 18px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 90px; }
  body > header { gap: 16px; }
  header > a { flex-basis: 205px; }
  .language-switch { font-size: 13px; }
  .language-switch a { padding: 10px 8px; }
  .hero { padding: 40px 0 60px; }
  h1 { font-size: clamp(34px, 9.2vw, 42px); margin-bottom: 24px; }
  .eyebrow { margin-bottom: 20px; }
  .hero-lead { font-size: 18px; }
  .role { margin: 20px 0 18px; }
  .button { min-height: 56px; padding: 16px 22px; }
}

/* Readable legal information in the same restrained visual style. */
.legal-copy { max-width: 900px; }
.legal-copy h1 { font-size: clamp(34px, 5vw, 58px); overflow-wrap: anywhere; hyphens: auto; }
.legal-copy h2 { max-width: none; margin: 36px 0 16px; font-size: 25px; line-height: 1.25; letter-spacing: -.02em; }
.legal-copy p { max-width: none; }
.legal-copy .legal-date { color: #555; font-size: 15px; }
.legal-copy a { overflow-wrap: anywhere; }
.legal-copy code { overflow-wrap: anywhere; font-size: .92em; }

/* The original cloud emblem, used sparingly and kept clear of the copy. */
.brand-cloud { display: block; height: auto; pointer-events: none; user-select: none; }
.hero--branded { position: relative; max-width: none; }
.hero--branded h1 { max-width: 980px; }
.hero-cloud { display: none; }
.contact-cloud { width: 80px; margin-bottom: 22px; }
.brand-tail { position: relative; height: 126px; overflow: hidden; }
.brand-tail .brand-cloud { position: absolute; width: 420px; max-width: none; right: -70px; top: 8px; opacity: .055; }
@media (min-width: 1101px) {
  .hero-cloud { display: block; position: absolute; width: clamp(0px, calc(100% - 748px), 320px); right: 0; top: 272px; opacity: .065; }
  .gallery-hero.hero--branded { max-width: none; }
  .gallery-hero .hero-cloud { top: 150px; }
}
@media (max-width: 700px) {
  .contact-cloud { width: 64px; margin-bottom: 20px; }
  .brand-tail { height: 80px; }
  .brand-tail .brand-cloud { width: 250px; right: -55px; top: 4px; }
}