/* Final visual corrections for the published responsive layout. */
:root {
  --paper:#f7f5f0;
  --surface:#fffdf9;
  --ink:#1d2529;
  --muted:#647177;
  --line:#d9e0df;
  --pale:#edf3f1;
  --accent:#2f7f82;
  --accent-blue:#2d6476;
}
:root[data-theme='dark'] {
  --paper:#171c20;
  --surface:#20272b;
  --ink:#f1f5f4;
  --muted:#b8c2c3;
  --line:#3a464b;
  --pale:#1b2226;
  --accent:#9bd4c8;
  --accent-blue:#9fcfdd;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme='light']) {
    --paper:#171c20; --surface:#20272b; --ink:#f1f5f4; --muted:#b8c2c3;
    --line:#3a464b; --pale:#1b2226; --accent:#9bd4c8; --accent-blue:#9fcfdd;
  }
}
.site-header, .blog-header { background:#171c20; }
@media (max-width:900px) { #main-nav { background:#20272b; border-color:#3a464b; } }

/* The color photo is reused for both halves. The editorial half is filtered,
   so its transparent cut-out stays transparent instead of becoming a black
   rectangle on the light theme. */
.hero-portrait .portrait-natural,
.hero-portrait .portrait-editorial {
  transform:translate3d(var(--portrait-lean),0,0) scale(1.22);
  transform-origin:50% 28%;
}
.hero-portrait .portrait-natural { filter:none; }
.hero-portrait .portrait-editorial {
  display:block;
  filter:grayscale(1) contrast(1.12) brightness(1.04);
}
.hero-portrait::after {
  display:block;
  position:absolute;
  top:8%; bottom:0; left:var(--pointer-split); width:1px;
  content:"";
  background:color-mix(in srgb, var(--surface) 68%, transparent);
  opacity:.7; pointer-events:none;
}

.section-kicker, .heading-point { color:var(--accent); }
.hero-mode-build .hero-mode-title { color:var(--accent)!important; }
.hero-mode-lead .hero-mode-title { color:var(--ink)!important; }
.capabilities-copy:first-child h3 { color:var(--accent-blue); }
.capabilities-copy:last-child h3, .selected-project h3 > span { color:var(--accent); }
.contact-form .button, .button, .button:hover {
  background:var(--accent-blue);
  border-color:var(--accent-blue);
  color:#fff;
}
.button:hover { box-shadow:0 10px 24px rgb(45 100 118 / 18%); }
.pale { background:var(--paper)!important; }
.hero-portrait .portrait-natural,
.hero-portrait .portrait-editorial {
  transform:translate3d(var(--portrait-lean),var(--hero-scroll-shift,0px),0) scale(1.22);
}
.hero-code { transform:translate3d(var(--hero-code-shift,0px),0,0); transition:transform .45s cubic-bezier(.16,1,.3,1); }
.hero-stage::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:10% 28%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at var(--hero-glow-x,50%) var(--hero-glow-y,50%), rgb(47 127 130 / 11%), transparent 64%);
  opacity:.72;
}
.section-kicker { display:block; }
.section-kicker::after { display:none; }

.language-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:#fff;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
}
.language-toggle:hover,
.language-toggle:focus-visible { border-color:var(--accent); color:#fff; }

/* Hero copy stays centered and fully readable on narrow screens. */
.hero-summary > p:not(.intro, .hero-overline) {
  margin-inline:auto;
  text-align:center;
}

@media (prefers-reduced-motion:no-preference) {
  .js-ready .capabilities-copy .plain-list li {
    opacity:0;
    translate:0 14px;
  }
  .js-ready .capabilities-copy.is-visible .plain-list li {
    animation:list-rise .6s cubic-bezier(.16,1,.3,1) forwards;
  }
  .js-ready .capabilities-copy.is-visible .plain-list li:nth-child(2) { animation-delay:.09s; }
  .js-ready .capabilities-copy.is-visible .plain-list li:nth-child(3) { animation-delay:.18s; }
  .js-ready .capabilities-picture svg {
    opacity:.4;
    rotate:-8deg;
    scale:.86;
    transition:opacity .8s ease, rotate 1s cubic-bezier(.16,1,.3,1), scale 1s cubic-bezier(.16,1,.3,1);
  }
  .js-ready .capabilities-picture.is-visible svg { opacity:1; rotate:0deg; scale:1; }
  .js-ready .selected-project { transition:opacity .75s ease, transform .8s cubic-bezier(.16,1,.3,1), translate .8s cubic-bezier(.16,1,.3,1); }
  .js-ready .selected-project:nth-child(2) { transition-delay:.08s; }
  .js-ready .selected-project:nth-child(3) { transition-delay:.16s; }
  .js-ready .selected-project:nth-child(4) { transition-delay:.24s; }
  @keyframes list-rise { to { opacity:1; translate:0 0; } }
}

@media (max-width:900px) {
  .hero-stage {
    --portrait-size:clamp(330px,47vw,410px);
    min-height:clamp(400px,52vw,500px);
  }
  .hero-mode-title, .hero-mode-lead .hero-mode-title {
    font-size:clamp(22px,4.2vw,32px);
    white-space:nowrap;
  }
  .hero-portrait .portrait-natural,
  .hero-portrait .portrait-editorial {
    transform:translate3d(var(--portrait-lean),var(--hero-scroll-shift,0px),0) scale(1.22);
  }
}
@media (max-width:560px) {
  .hero-stage {
    --portrait-size:min(78vw,330px);
    min-height:calc(var(--portrait-size) + 76px);
    grid-template-columns:1fr 1fr;
    align-items:start;
    padding-top:22px;
  }
  .hero-mode, .hero-mode-build, .hero-mode-lead { align-self:start; gap:8px; }
  .hero-mode-build { grid-column:1; }
  .hero-mode-lead { grid-column:2; padding-left:4px; }
  .hero-portrait { bottom:0; }
  .hero-portrait .portrait-natural,
  .hero-portrait .portrait-editorial {
    transform:translate3d(var(--portrait-lean),var(--hero-scroll-shift,0px),0) scale(1.18);
  }
}

@media (max-width:700px) {
  .hero-mode,
  .hero-mode-build,
  .hero-mode-lead { min-width:0; }
  .hero-mode-title,
  .hero-mode-lead .hero-mode-title {
    font-size:clamp(21px,6.4vw,34px);
    line-height:1.05;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    text-wrap:balance;
    max-width:100%;
  }
  .hero-mode-lead .hero-mode-title {
    font-size:clamp(19px,5.8vw,31px);
    letter-spacing:-.07em;
  }
  .hero-mode-detail {
    max-width:100%;
    font-size:clamp(11px,3.1vw,15px);
    line-height:1.4;
  }
  .capabilities-layout {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(22px,8vw,52px);
    row-gap:34px;
    align-items:start;
  }
  .capabilities-copy,
  .capabilities-copy:last-child { text-align:center; }
  .capabilities-copy h3 {
    font-size:clamp(21px,6vw,30px);
    white-space:nowrap;
  }
  .capabilities-copy .plain-list {
    font-size:clamp(14px,3.8vw,17px);
    line-height:1.8;
  }
  .capabilities-picture {
    grid-column:1/-1;
    grid-row:2;
    max-width:270px;
    justify-self:center;
  }
}

/* The right-hand role must never be clipped between tablet and mobile widths. */
@media (max-width:900px) {
  .site-header .header-inner,
  .blog-header > .blog-shell {
    justify-content:flex-start;
  }
  .site-header .header-inner > .brand,
  .blog-header .blog-brand { margin-right:auto; }
  .site-header .header-inner .theme-toggle,
  .blog-header > .blog-shell .theme-toggle {
    order:3;
    margin-left:10px;
  }
  .site-header .header-inner .language-toggle,
  .blog-header > .blog-shell .language-toggle {
    order:4;
    margin-left:10px;
  }
  .site-header .header-inner .menu-toggle,
  .blog-header > .blog-shell .menu-toggle {
    order:5;
    margin-left:10px !important;
  }
  .hero-mode-title,
  .hero-mode-lead .hero-mode-title {
    max-width:100%;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    text-wrap:balance;
  }
  .hero-mode-lead .hero-mode-title {
    font-size:clamp(19px,5.8vw,31px);
    letter-spacing:-.07em;
  }
  .hero-mode-detail { max-width:100%; }
}

/* On wide screens, keep the role inside its half of the hero instead of
   letting the final word disappear past the stage edge. */
@media (min-width:901px) {
  .hero-mode-lead .hero-mode-title {
    max-width:100%;
    font-size:clamp(24px,3.5vw,48px);
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    text-wrap:balance;
    letter-spacing:-.07em;
  }
}