/* Mobile composition shares the original copy, photographs and page order. */
@media (max-width:700px) {
  :root {
    --gutter:max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
    --mobile-ease:cubic-bezier(.22,.61,.36,1);
    --mobile-dock-height:54px;
    --mobile-dock-bottom:calc(16px + env(safe-area-inset-bottom));
    --mobile-dock-clearance:calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 32px);
  }
  html { scroll-padding-top:24px }
  .header {
    height:auto; min-height:128px; padding:18px var(--gutter) 10px;
    padding-top:max(18px, env(safe-area-inset-top));
    display:grid; grid-template-columns:1fr; gap:6px;
  }
  .header>a { width:fit-content; min-height:44px; display:flex; align-items:center }
  .header-logo { width:112px }
  .header-nav { width:100%; justify-content:space-between; gap:12px }
  .header-nav a { font-size:14px; letter-spacing:.025em; min-height:44px; padding:10px 0 }
  .hero { min-height:500px; max-height:none }
  .hero-brand {
    bottom:calc(max(64px, 8svh) + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; align-items:stretch; gap:40px;
  }
  .hero-brand img { width:100%; max-width:440px }
  .hero-controls { position:static; align-self:flex-end; gap:14px; margin:0 }
  .hero-control { width:52px; height:52px; flex:none }
  .hero-control svg { width:26px; height:26px }
  .hero-control .icon-whatsapp { width:24px; height:24px }
  .hero-control .icon-instagram { width:29px; height:29px }
  .hero-rule { bottom:calc(26px + env(safe-area-inset-bottom)) }
  .dock { bottom:var(--mobile-dock-bottom); height:var(--mobile-dock-height) }
  .dock-home { flex-basis:96px; width:96px }
  .dock-actions { grid-template-columns:repeat(3,52px) }
  .dock-icon,.dock-toggle { width:52px; min-width:52px }
  .menu {
    width:calc(100% - 32px); max-height:calc(100svh - 112px - env(safe-area-inset-bottom));
    margin:auto auto calc(88px + env(safe-area-inset-bottom)); overscroll-behavior:contain;
  }
  .menu-inner { padding:24px }
  .menu-top { margin-bottom:20px }
  .menu-close,.lightbox button { width:44px; height:44px; flex:none }
  .menu nav a { font-size:clamp(30px,8.8vw,40px) }
  .menu nav .menu-calculator { font-size:21px; line-height:1.25 }
  .menu-meta { margin-top:24px; padding-top:14px; gap:0 20px; font-size:15px }
  .menu-meta a { min-height:44px; display:flex; align-items:center; overflow-wrap:anywhere }
  .section-label { min-height:44px; font-size:14px }
  .text-link { min-height:44px; font-size:14px; letter-spacing:.025em }
  /* Keep the final paragraph above the dock when the story sticks for the next sheet. */
  .home .intro { padding-bottom:max(80px, var(--mobile-dock-clearance)) }
  .intro-head .section-label { margin-bottom:24px }
  .intro-lead,.about-opening { font-size:clamp(30px,8.8vw,42px); line-height:1.2 }
  .intro-bottom p,.about-copy p,.project-copy p,.project-copy li { line-height:1.6 }
  .statement small { font-size:14px; letter-spacing:.09em }
  .statement h2 { font-size:clamp(38px,11.5vw,70px); overflow-wrap:break-word }
  .statement .text-link { font-size:14px; gap:16px; letter-spacing:.015em }
  .statement-sheet .statement-content { padding-block:64px 104px }
  .page-intro { padding-top:174px }
  .projects.page-intro { padding-top:174px }
  .page-title { font-size:clamp(46px,14.8vw,96px) }
  .section-heading h1 { font-size:clamp(42px,12vw,78px); overflow-wrap:break-word }
  .project-page .project-hero { padding-top:174px }
  .project-hero .eyebrow { font-size:14px; line-height:1.45 }
  .project-hero h1 { font-size:clamp(42px,13vw,72px); line-height:1.04; overflow-wrap:break-word }
  .project-row h3 { font-size:clamp(29px,8vw,38px); line-height:1.12 }
  .project-row .project-category { font-size:13px; letter-spacing:.045em; margin-top:20px }
  .project-row { margin-bottom:40px }
  .project-mobile-image { background:#d7d7d1 }

  /* Reveal the photograph and its caption independently, without flashing a whole card. */
  .motion-ready .project-row.reveal,
  .motion-ready .project-row.reveal:not(.is-visible) { opacity:1; transform:none; transition:color .25s }
  .motion-ready .project-row .project-mobile-image {
    clip-path:inset(0); transform:translate3d(0,0,0); opacity:1;
    transition:transform .65s var(--mobile-ease),opacity .65s ease-out;
  }
  .motion-ready .project-row:not(.is-visible) .project-mobile-image {
    clip-path:none; transform:translate3d(0,14px,0); opacity:.4;
  }
  .motion-ready .project-row .project-mobile-image img {
    scale:1; transition:none;
  }
  .motion-ready .project-row:not(.is-visible) .project-mobile-image img { scale:1 }
  .motion-ready .project-row :is(.project-category,h3) {
    opacity:1; translate:0 0;
    transition:opacity .65s ease-out,translate .75s var(--mobile-ease); transition-delay:100ms;
  }
  .motion-ready .project-row h3 { transition-delay:150ms }
  .motion-ready .project-row:not(.is-visible) :is(.project-category,h3) { opacity:0; translate:0 12px }
  .motion-ready .reveal:not(.project-row) { transition-timing-function:var(--mobile-ease) }

  /* The sheet still rises over the page; its contents use ordinary page scrolling. */
  .contact { padding:24px var(--gutter) max(16px, env(safe-area-inset-bottom)) }
  .contact-main { display:contents }
  .contact-title,.contact-page .contact-title {
    position:sticky; top:0; z-index:3; background:var(--dark);
    font-size:clamp(42px,12.8vw,64px); line-height:1; padding:max(12px, env(safe-area-inset-top)) 0 16px;
  }
  .contact-grid { margin-top:18px }
  .contact-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px }
  .contact-intro>p { grid-column:1/-1; font-size:21px; line-height:1.3; max-width:30ch }
  .contact-details { display:contents; font-size:16px }
  .contact-details a { display:flex; align-items:center; min-height:44px; overflow-wrap:anywhere }
  .contact-details a:first-child { grid-column:1/-1; margin-top:8px }
  .contact-details a:last-child { grid-column:1; white-space:nowrap }
  .socials { grid-column:2; margin-top:0; gap:12px; font-size:15px }
  .socials a { display:flex; align-items:center; min-height:44px }
  .contact-form { margin-top:16px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 16px }
  .contact-form>div { min-width:0; grid-column:auto }
  .contact-form :is(.form-tel,.form-select) { grid-column:auto }
  .contact-form .full-width { grid-column:1/-1 }
  .contact-form label { font-size:14px; line-height:1.3; margin-bottom:0 }
  .contact-form :is(input,select,textarea) { font-size:16px; min-height:44px; padding:8px 0; max-width:100% }
  .contact-form textarea { height:52px; min-height:52px }
  .send { min-height:44px; padding:11px 14px; margin-top:0 }
  .footer-nav { margin-top:20px; padding-block:8px; gap:8px; flex-wrap:nowrap; align-items:center }
  .footer-nav nav { gap:clamp(12px,4vw,24px); font-size:13px }
  .footer-nav nav a { min-height:44px; display:flex; align-items:center; letter-spacing:0 }
  .footer-nav>a { width:44px; height:44px; display:grid; place-items:center; flex:none }
  .footer-bottom { font-size:12px; padding-top:6px; gap:0 10px; align-items:center }
  .site-credit { gap:4px; margin-left:auto }
  .footer-bottom .koncepto-credit { width:104px }
  .contact-page { padding-top:156px }
  .contact .map { margin-top:20px; height:170px }
  .lightbox { width:100%; height:calc(100svh - 32px); max-height:none; padding:60px 12px max(20px, env(safe-area-inset-bottom)) }
  .lightbox button { top:8px; right:8px }
  .calculator-page .header { min-height:128px }
  .calculator-page .calculator { padding-bottom:40px }
  .calc-kicker { font-size:12px; letter-spacing:.06em }
  .calc-label-row button { min-height:44px; padding-inline:6px }
  .calc-slider-labels { font-size:13px }
  .calculator-footer { padding-bottom:max(20px, env(safe-area-inset-bottom)) }
}

/* Touch devices should never retain a mouse-hover rotation or image zoom. */
@media (hover:none), (pointer:coarse) {
  .nav-roll:hover .nav-roll-inner { transform:none }
  .hero-control:hover,.hero-down:hover { transform:none }
  .project-row:hover .project-mobile-image img { transform:none }
  .project-gallery a:hover img { scale:1 }
  .menu nav a:hover { transform:none }
}

@media (max-width:380px) {
  .contact-intro>p { font-size:19px }
  .contact-details a:last-child { font-size:15px }
  .socials { font-size:14px }
  .contact-form { column-gap:12px }
  .contact-form label { font-size:13px }
  .footer-nav nav { gap:12px; font-size:12px }
  .footer-nav>a { width:36px }
  .footer-bottom { font-size:11px; column-gap:6px }
  .footer-bottom .koncepto-credit { width:92px }
}

@media (max-width:700px) and (max-height:740px) {
  .contact { padding-top:16px; padding-bottom:max(12px,env(safe-area-inset-bottom)) }
  .contact-title,.contact-page .contact-title { font-size:42px; padding-top:max(8px,env(safe-area-inset-top)); padding-bottom:12px }
  .contact-grid { margin-top:12px }
  .contact-intro>p { font-size:19px }
  .contact-form { margin-top:12px; row-gap:10px }
  .contact-form textarea { height:48px; min-height:48px }
  .footer-nav { margin-top:12px; padding-block:4px }
  .footer-bottom { padding-top:2px }
  .contact-page { padding-top:156px }
}

@media (max-width:900px) and (max-height:500px) and (orientation:landscape) {
  :root { --gutter:max(24px,4.6vw,env(safe-area-inset-left),env(safe-area-inset-right)) }
  .hero { min-height:360px }
  .hero-brand img { width:48%; max-width:300px }
  .hero-brand { flex-direction:row; align-items:flex-end; gap:24px; bottom:70px }
  .hero-controls { margin:0; flex:none }
  .menu { max-height:calc(100svh - 32px); margin:auto }
  .menu-inner { padding:20px 28px }
}

@media (max-width:700px) and (prefers-reduced-motion:reduce) {
  .motion-ready .project-row :is(.project-mobile-image,.project-category,h3),
  .motion-ready .project-row:not(.is-visible) :is(.project-mobile-image,.project-category,h3) {
    opacity:1; transform:none; translate:none; clip-path:none;
  }
  .motion-ready .project-row .project-mobile-image img { scale:1!important }
}