/* Enhanced full-screen navigation. Without JS the document stays readable. */
html.section-mode { height:100%; overflow:hidden; scroll-behavior:auto; scroll-padding:0; }
.section-mode body { height:100vh; height:var(--app-height,100dvh); overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.section-mode .header { position:relative; }
.section-mode #main { position:relative; min-height:0; overflow:hidden; outline:none; }
.section-mode .section-screen {
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  display:flex; flex-direction:column; padding:clamp(24px,4vh,48px) 0;
  border:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.section-screen[inert] { pointer-events:none; }
.section-mode .section-screen > .wrap { flex-shrink:0; margin-block:auto; }
.section-mode .hero-grid, .section-mode .service-strip { width:min(1240px,calc(100% - 64px)); margin-inline:auto; flex-shrink:0; }
.section-mode .hero-grid { margin-top:auto; }
.section-mode .service-strip { margin-top:32px; margin-bottom:auto; }
.section-mode .hero-slider { margin:0; }
.section-mode #contact { padding-bottom:0; }
.section-mode #contact > .wrap { margin-block:auto; }
.section-mode #contact .footer { flex-shrink:0; margin-top:32px; margin-bottom:0; padding:24px 0; }
.section-mode .nav a[aria-current="page"] { color:var(--accent-ink); }
.section-navigation { background:var(--bg); border-top:1px solid var(--line); z-index:10; }
.section-navigation-inner { display:flex; align-items:center; gap:20px; min-height:64px; }
.section-position { display:flex; align-items:center; gap:13px; min-width:190px; }
.section-counter { font:500 11px var(--mono); color:var(--accent-ink); white-space:nowrap; }
.section-title { font-size:12px; font-weight:600; }
.section-next-label { display:none; }
/* The default viewport already stays clear of browser/system chrome.
   Adding safe-area padding again creates a blank band in some Android WebViews. */
.section-dots { display:flex; align-items:center; gap:3px; margin-inline:auto; }
.section-dot { width:44px; height:44px; background:transparent; display:grid; place-items:center; border-radius:3px; }
.section-dot::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--muted); opacity:.45; transition:width .25s,background .25s,opacity .25s; }
.section-dot[aria-current="page"]::after { width:24px; border-radius:3px; background:var(--accent); opacity:1; }
.section-dot:hover::after { opacity:1; }
.section-arrows { display:flex; gap:6px; justify-content:flex-end; min-width:190px; }
.section-arrow { display:grid; place-items:center; width:44px; height:44px; background:transparent; border:1px solid var(--line); border-radius:3px; }
.section-arrow svg { width:17px; height:17px; }
.section-arrow:hover:not(:disabled) { background:var(--soft); }
.section-arrow:disabled { opacity:.3; cursor:default; }
.section-screen h1:focus, .section-screen h2:focus { outline:none; }
@media (max-width:1050px) {
  .section-mode .hero-grid, .section-mode .service-strip { width:calc(100% - 48px); }
}
@media (min-width:781px) and (max-height:800px) {
  .section-mode .section-screen { padding-block:24px; }
  .section-mode h1 { font-size:clamp(42px,4.5vw,60px); margin-bottom:20px; }
  .section-mode .hero-copy .eyebrow { margin-bottom:18px; }
  .section-mode .lead { font-size:15px; margin-bottom:23px; }
  .section-mode .service-strip { margin-top:20px; padding-top:14px; }
  .section-mode .slider-stage { max-height:max(160px,calc(var(--app-height,100dvh) - 400px)); }
  .section-mode .section-head { margin-bottom:24px; }
  .section-mode .project-cover { aspect-ratio:16/9; }
  .section-mode .project-card-body { padding:18px 20px; }
  .section-mode .project-card-summary { margin-top:9px; line-height:1.6; }
  .section-mode .project-card-meta { margin-top:12px; padding-top:12px; }
  .section-mode .service-top { margin-bottom:22px; }
}
@media (max-width:780px) {
  .section-mode .section-screen { padding-block:28px; }
  .section-mode .hero-grid, .section-mode .service-strip { width:calc(100% - 40px); }
  .section-mode .hero-grid { gap:28px; }
  .section-navigation-inner { min-height:58px; gap:10px; }
  .section-position { min-width:0; flex:1; gap:8px; }
  .section-arrows { min-width:0; }
  .section-dots { gap:0; }
  .section-dot { width:32px; }
  .section-title { font-size:11px; }
}
@media (max-width:560px) {
  .section-dots { display:none; }
  .section-position { overflow:hidden; }
  .section-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .section-arrows { flex-shrink:0; }
  .section-next { display:flex; align-items:center; justify-content:center; gap:8px; width:auto; padding-inline:12px; }
  .section-next-label { display:inline; font-size:11px; font-weight:600; white-space:nowrap; }
  .section-mode .hero h1 { font-size:clamp(36px,10vw,48px); margin-bottom:18px; }
  .section-mode .lead { font-size:15px; line-height:1.7; margin-bottom:23px; }
  .section-mode .hero-grid { gap:24px; }
  .section-mode .hero-copy .eyebrow { margin-bottom:20px; }
  .section-mode .service-strip { margin-top:28px; }
}
@media (max-width:400px) {
  .section-mode .hero-grid, .section-mode .service-strip { width:calc(100% - 32px); }
}
@media print {
  html.section-mode, .section-mode body { height:auto; overflow:visible; display:block; }
  .section-mode #main { overflow:visible; }
  .section-mode .section-screen, .section-mode .section-screen[hidden] { display:block!important; position:static; height:auto; overflow:visible; padding-block:32px; }
  .section-navigation { display:none; }
}