/* KROMA iPhone Experience v0.8
   Mobile-first polish for iOS Safari: safe areas, touch ergonomics, compact technical rhythm. */
@supports (-webkit-touch-callout:none){
  html{-webkit-text-size-adjust:100%}
}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{overscroll-behavior-x:none;-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea{touch-action:manipulation}
a,button{-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
:focus-visible{outline:3px solid #65bdf0;outline-offset:3px}
section[id]{scroll-margin-top:96px}

@media(max-width:700px){
  .site-header,
  .home-premium .premium-header{
    position:sticky!important;top:0;z-index:100;width:100%;max-width:none;
    height:calc(70px + env(safe-area-inset-top));
    min-height:calc(70px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top)!important;
    padding-left:max(18px,calc(env(safe-area-inset-left) + 14px))!important;
    padding-right:max(18px,calc(env(safe-area-inset-right) + 14px))!important;
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid #d9e2e9!important;
    box-shadow:0 8px 28px rgba(6,29,51,.06)!important;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  }
  .brand,.home-premium .premium-brand{gap:10px}
  .brand-mark,.home-premium .premium-brand .brand-mark{width:40px!important;height:40px!important}
  .brand strong,.home-premium .premium-brand strong{font-size:16px!important;letter-spacing:.14em!important}
  .brand small,.home-premium .premium-brand small{display:none!important}

  .menu-toggle{
    display:inline-flex!important;align-items:center;justify-content:center;
    min-width:54px;min-height:46px;padding:0 14px;
    border:1px solid #ccd8e1!important;background:#f7f9fb!important;color:#102538!important;
    font-size:13px;font-weight:800;letter-spacing:.02em;border-radius:2px;
  }
  .nav,.home-premium .premium-header .nav{
    display:none;position:fixed!important;
    top:calc(70px + env(safe-area-inset-top))!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    max-height:calc(100dvh - 86px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow:auto;padding:10px!important;gap:0!important;
    background:rgba(255,255,255,.985)!important;border:1px solid #d4dfe7!important;
    box-shadow:0 24px 70px rgba(6,29,51,.22)!important;border-radius:4px;z-index:110;
    -webkit-overflow-scrolling:touch;
  }
  .nav.open,.home-premium .premium-header .nav.open{display:flex!important}
  .nav a,.home-premium .premium-header .nav a{
    min-height:54px;display:flex!important;align-items:center;justify-content:space-between;
    padding:0 14px!important;border:0!important;border-bottom:1px solid #e4ebf0!important;
    background:transparent!important;color:#102538!important;font-size:16px!important;font-weight:720!important;
  }
  .nav a:after{content:"↗";font-size:14px;color:#5f7485}
  .nav a:last-child{border-bottom:0!important}
  .nav .nav-cta,.home-premium .premium-header .nav-cta{
    margin-top:8px;justify-content:center!important;background:#061d33!important;color:#fff!important;border-bottom:0!important;
  }
  .nav .nav-cta:after{color:#fff}
  body.menu-open{overflow:hidden;touch-action:none}

  .section,.home-premium .section{
    padding-left:max(20px,calc(env(safe-area-inset-left) + 16px))!important;
    padding-right:max(20px,calc(env(safe-area-inset-right) + 16px))!important;
    padding-top:72px!important;padding-bottom:72px!important;
  }
  .eyebrow,.section-kicker,.section-kicker.light,
  .home-premium .section-kicker,.home-premium .section-kicker.light{
    font-size:12px!important;letter-spacing:.10em!important;
  }
  .btn,.home-premium .btn{min-height:56px!important;width:100%;padding:16px 18px!important;font-size:15px!important}

  .home-premium .hero-kroma-grid{display:block!important;min-height:0!important}
  .home-premium .hero-kroma-copy{
    min-height:calc(100svh - 70px - env(safe-area-inset-top));
    padding-top:44px!important;padding-bottom:36px!important;
    padding-left:max(20px,calc(env(safe-area-inset-left) + 16px))!important;
    padding-right:max(20px,calc(env(safe-area-inset-right) + 16px))!important;
    justify-content:center;
  }
  .home-premium .hero-premium h1{
    font-size:clamp(42px,11.6vw,49px)!important;line-height:.98!important;letter-spacing:-.045em!important;
    margin:17px 0 22px!important;max-width:100%;
  }
  .home-premium .hero-premium .hero-lead{font-size:17px!important;line-height:1.58!important;max-width:100%}
  .home-premium .hero-premium .hero-actions{
    display:grid!important;grid-template-columns:1fr;gap:10px!important;margin-top:28px!important;
  }
  .home-premium .hero-proof-premium{
    display:block!important;margin-top:34px!important;padding-top:4px!important;
    border-top:1px solid rgba(255,255,255,.22)!important;
  }
  .home-premium .hero-proof-premium div{
    display:grid;grid-template-columns:minmax(104px,.72fr) 1.28fr;gap:16px;align-items:start;
    padding:14px 0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;
  }
  .home-premium .hero-proof-premium strong{font-size:17px!important;line-height:1.25!important}
  .home-premium .hero-proof-premium span{margin-top:0!important;max-width:none!important;font-size:13px!important;line-height:1.45!important}

  .home-premium .hero-identity{
    min-height:480px!important;border-left:0!important;border-top:1px solid rgba(255,255,255,.12)!important;
  }
  .home-premium .identity-grid{background-size:44px 44px!important}
  .home-premium .identity-tag{left:20px!important;top:22px!important}
  .home-premium .identity-k{width:310px!important;height:310px!important;right:-46px!important;top:38px!important;opacity:.82}
  .home-premium .identity-orbit-a{width:330px!important;height:330px!important;right:-76px!important;top:28px!important}
  .home-premium .identity-orbit-b{width:440px!important;height:440px!important;right:-190px!important;top:-20px!important}
  .home-premium .identity-statement{left:20px!important;right:20px;bottom:166px!important}
  .home-premium .identity-statement>strong{font-size:42px!important;max-width:270px}
  .home-premium .identity-process{
    bottom:0!important;grid-template-columns:1fr 1fr!important;background:rgba(4,24,41,.24);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .home-premium .identity-process div{min-height:72px!important;padding:13px 16px!important}
  .home-premium .identity-process b{font-size:11px!important}
  .home-premium .identity-process span{font-size:12px!important}
  .home-premium .identity-footer{display:none!important}

  .home-premium .premium-intro{padding-top:72px!important;padding-bottom:76px!important}
  .home-premium .premium-intro-label{margin-bottom:30px!important}
  .home-premium .premium-intro-grid{gap:28px!important}
  .home-premium .premium-intro h2,.home-premium .premium-section-title h2{
    font-size:38px!important;line-height:1.02!important;letter-spacing:-.04em!important;
  }
  .home-premium .premium-intro-grid p{font-size:16px!important;line-height:1.65!important}
  .home-premium .premium-section-title{margin-bottom:34px!important}
  .home-premium .premium-service-grid article{
    grid-template-columns:38px 1fr 18px!important;gap:12px!important;padding:23px 0!important;
  }
  .home-premium .premium-service-grid h3{font-size:20px!important;margin-bottom:7px!important}
  .home-premium .premium-service-grid p{font-size:14.5px!important;line-height:1.55!important}
  .home-premium .premium-method-heading{padding:42px 0 38px!important;gap:24px!important}
  .home-premium .premium-method-heading h2{font-size:44px!important;line-height:.98!important}
  .home-premium .premium-method-heading p{font-size:15.5px!important;line-height:1.6!important}
  .home-premium .premium-method-flow{grid-template-columns:1fr 1fr!important}
  .home-premium .premium-method-flow article{min-height:142px!important;padding:17px!important}
  .home-premium .premium-method-flow span{font-size:17px!important}
  .home-premium .premium-method-flow small{font-size:12.5px!important}

  .home-premium .premium-case-grid{
    display:grid!important;grid-template-columns:1fr!important;grid-template-rows:none!important;gap:12px!important;
  }
  .home-premium .premium-case,.home-premium .premium-case-large{grid-row:auto!important}
  .home-premium .premium-case-large{min-height:450px!important}
  .home-premium .premium-case-data{min-height:330px!important;padding:24px!important}
  .home-premium .premium-case-photo:not(.premium-case-large){min-height:370px!important}
  .home-premium .case-meta{left:22px!important;right:22px!important;bottom:22px!important}
  .home-premium .case-meta h3{font-size:31px!important}
  .home-premium .premium-case-data>strong{font-size:52px!important}
  .home-premium .premium-case-notes{margin-top:12px!important}

  .home-premium .premium-software-grid{padding-top:72px!important;padding-bottom:72px!important}
  .home-premium .premium-software h2{font-size:42px!important}
  .home-premium .premium-software p{font-size:16px!important}
  .home-premium .premium-software-screen{display:none!important}

  .home-premium .premium-person{gap:28px!important}
  .home-premium .premium-person-photo{width:100%;max-width:none!important;height:auto!important;aspect-ratio:4/5}
  .home-premium .premium-person-copy h2{font-size:38px!important}
  .home-premium .person-links{display:grid!important;gap:10px!important}

  .home-premium .premium-contact{
    gap:38px!important;padding-top:72px!important;
    padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;
    padding-left:max(20px,calc(env(safe-area-inset-left) + 16px))!important;
    padding-right:max(20px,calc(env(safe-area-inset-right) + 16px))!important;
  }
  .home-premium .premium-contact h2{font-size:40px!important;line-height:1!important}
  .home-premium .premium-contact form{padding:18px!important}
  .home-premium .premium-contact input,.home-premium .premium-contact select,.home-premium .premium-contact textarea{
    min-height:52px;font-size:16px!important;
  }
  .home-premium .premium-contact textarea{min-height:128px}

  .home-premium .premium-footer,footer{
    padding-left:max(20px,calc(env(safe-area-inset-left) + 16px))!important;
    padding-right:max(20px,calc(env(safe-area-inset-right) + 16px))!important;
    padding-bottom:calc(30px + env(safe-area-inset-bottom))!important;
  }

  .case-hero,.bio-hero,.local-hero,.service-hero,.retail-hero{
    padding:48px 20px 52px!important;
    padding-left:max(20px,calc(env(safe-area-inset-left) + 16px))!important;
    padding-right:max(20px,calc(env(safe-area-inset-right) + 16px))!important;
    gap:34px!important;
  }
  .case-hero h1,.bio-hero h1,.local-hero h1,.service-hero h1,.retail-hero h1,.product-hero h1{
    font-size:44px!important;line-height:.98!important;letter-spacing:-.045em!important;overflow-wrap:anywhere;
  }
  .case-hero p,.bio-hero p,.local-hero p,.service-hero p,.retail-hero p,.product-hero p{
    font-size:16.5px!important;line-height:1.62!important;
  }
  .case-facts{grid-template-columns:1fr 1fr!important}
  .case-facts div,.credential-grid div{padding:17px!important}
  .case-facts dd,.credential-grid dd{font-size:15px!important;line-height:1.4}
  .case-band-inner,.expertise-grid,.local-band-inner{
    padding:58px 20px!important;
    padding-left:max(20px,calc(env(safe-area-inset-left) + 16px))!important;
    padding-right:max(20px,calc(env(safe-area-inset-right) + 16px))!important;
    gap:34px!important;
  }
  .case-band h2,.expertise-grid h2,.local-band h2{font-size:38px!important;line-height:1.02!important}
  .scope-list{gap:8px!important}
  .scope-list div{padding:16px!important}
  .evidence-grid article{padding:22px!important}
  .timeline article,.timeline-pro article{padding:22px 0!important}

  .bio-mark,.local-portrait{width:100%;max-width:none!important}
  .credential-grid{margin-top:24px!important}
  .expertise-list div{padding:20px!important}

  .deliver-grid article{min-height:0!important;padding:24px!important}
  .fit{gap:38px!important}
  .proof-box{padding:34px 24px!important}
  .proof-box strong{font-size:48px!important}

  .retail-stat{padding:28px!important}
  .retail-stat strong{font-size:54px!important}
  .retail-card{padding:24px!important}
  .retail-cover{margin:-24px -24px 0!important;height:230px!important}

  .product-hero{min-height:0!important}
  .product-wrap{
    padding:52px 20px!important;
    padding-left:max(20px,calc(env(safe-area-inset-left) + 16px))!important;
    padding-right:max(20px,calc(env(safe-area-inset-right) + 16px))!important;
    gap:34px!important;
  }
  .feature-flow article{min-height:0!important;padding:22px!important}
  .why-grid{gap:36px!important}

  .site-photo-gallery,.experience-photos{gap:10px!important}
  .site-photo-gallery img,.experience-photos img{height:auto!important;aspect-ratio:4/3;object-fit:cover}
  .site-photo-gallery .featured img{min-height:0!important;aspect-ratio:4/3}
  .roncao-main,.roncao-main img{min-height:0!important}
  .roncao-main img{aspect-ratio:4/3}
  .roncao-mini{grid-template-columns:1fr 1fr!important}
  .roncao-mini img{height:auto!important;aspect-ratio:4/3}

  .contact{
    gap:38px!important;padding-top:64px!important;
    padding-bottom:calc(64px + env(safe-area-inset-bottom))!important;
    padding-left:max(20px,calc(env(safe-area-inset-left) + 16px))!important;
    padding-right:max(20px,calc(env(safe-area-inset-right) + 16px))!important;
  }
  .contact h2{font-size:40px!important;line-height:1!important}
  .contact input,.contact select,.contact textarea{min-height:52px;font-size:16px!important}
  .contact textarea{min-height:128px}

  .floating-contact{
    right:max(14px,calc(env(safe-area-inset-right) + 10px))!important;
    bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px))!important;
    width:52px;height:52px;min-height:52px;padding:0!important;justify-content:center;
    border-radius:50%;box-shadow:0 14px 34px rgba(6,29,51,.24)!important;
  }
  .floating-contact span{display:none!important}
  .floating-contact:before{width:auto!important;height:auto!important;background:transparent!important;color:#fff!important;font-size:19px!important}

  @media(hover:none){
    .premium-case-photo:hover>img{transform:none!important}
    .floating-contact:hover{transform:none!important}
  }
}

@media(max-width:390px){
  .home-premium .hero-premium h1{font-size:42px!important}
  .home-premium .identity-statement>strong{font-size:39px!important}
  .case-hero h1,.bio-hero h1,.local-hero h1,.service-hero h1,.retail-hero h1,.product-hero h1{font-size:41px!important}
  .case-facts{grid-template-columns:1fr!important}
}

/* iPhone landscape: keep Safari chrome, notch and menu disciplined */
@media(max-height:500px) and (pointer:coarse){
  .site-header,
  .home-premium .premium-header{
    position:sticky!important;top:0;z-index:100;max-width:none;
    height:calc(58px + env(safe-area-inset-top));
    min-height:calc(58px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top)!important;
    padding-left:max(18px,calc(env(safe-area-inset-left) + 12px))!important;
    padding-right:max(18px,calc(env(safe-area-inset-right) + 12px))!important;
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid #d9e2e9!important;
  }
  .brand small,.home-premium .premium-brand small{display:none!important}
  .brand-mark,.home-premium .premium-brand .brand-mark{width:36px!important;height:36px!important}
  .menu-toggle{
    display:inline-flex!important;align-items:center;justify-content:center;
    min-height:42px;padding:0 13px;border:1px solid #ccd8e1!important;
    background:#f7f9fb!important;color:#102538!important;
  }
  .nav,.home-premium .premium-header .nav{
    display:none;position:fixed!important;
    top:calc(58px + env(safe-area-inset-top))!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    max-height:calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow:auto;background:#fff!important;z-index:110;
  }
  .nav.open,.home-premium .premium-header .nav.open{display:flex!important}
  .home-premium .hero-kroma-copy{
    min-height:0!important;
    padding:32px max(28px,calc(env(safe-area-inset-right) + 18px)) 32px max(28px,calc(env(safe-area-inset-left) + 18px))!important;
  }
  .home-premium .hero-premium h1{font-size:46px!important;max-width:690px!important}
  .home-premium .hero-proof-premium{margin-top:28px!important}
  .home-premium .hero-identity{min-height:390px!important}
  .floating-contact{
    right:max(12px,calc(env(safe-area-inset-right) + 8px))!important;
    bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important;
  }
}