/* FISCHRAINE Phase 79 — Mobile + Tablet Perfection */
:root{--fr-mobile-pad:18px;--fr-tablet-pad:28px}
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,video,svg,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
@media(pointer:coarse){button,a,[role="button"],input[type="button"],input[type="submit"]{min-height:44px}}
@media(max-width:1100px){
  body{min-width:0}
  main,.page,.wrap,.shell,.content,.workspace,.app,.admin-shell{min-width:0;max-width:100%}
  table{font-size:.88em}
  .table-wrap,.table-scroll,[class*="table-wrap"],[class*="table-scroll"]{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .modal,.dialog,.drawer,.box,[class*="modal-card"],[class*="dialog-card"]{max-width:calc(100vw - 32px)}
}
@media(max-width:820px){
  .grid,.grid2,.split,.case,.service-intro,.service-detail-title,.service-detail-grid,.detail-investment,.investment-head,.home-why-grid,.why-value-head{grid-template-columns:1fr!important}
  .cards,.service-offerings,.why-grid,.why-price-grid{grid-template-columns:1fr!important}
  .flow{overflow-x:auto;grid-template-columns:repeat(7,minmax(118px,1fr));-webkit-overflow-scrolling:touch}
  .row{grid-template-columns:1fr!important;gap:8px!important}
  .actions{align-items:stretch}
  .actions .button{min-height:50px}
}
@media(max-width:620px){
  :root{--fr-pad:18px;--pad:18px}
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .top{min-height:64px;padding-left:18px;padding-right:18px}
  .hero{min-height:auto;padding:84px 18px 64px!important}
  .hero h1,.display{font-size:clamp(3.35rem,17vw,5.7rem)!important;line-height:.82!important;overflow-wrap:anywhere}
  .hero p.lead{font-size:.98rem;line-height:1.6}
  .section{padding:64px 18px!important}
  .section h2{font-size:clamp(2.7rem,14vw,4.6rem)!important}
  .actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .actions .button,.button{width:100%;padding-left:16px;padding-right:16px;text-align:center}
  .card,.case>div,.why-card,.service-offer{padding:26px!important}
  .card{min-height:250px}.card h3{margin-top:52px}
  .case .screen{min-height:300px}.ui{width:96%;transform:none!important}
  .footer{padding:30px 18px max(30px,env(safe-area-inset-bottom));flex-direction:column;gap:12px}
  .grid2{grid-template-columns:1fr!important;gap:18px!important}.field.full{grid-column:auto!important}
  .choice label{min-height:70px;padding:16px}
  .inquiry-shell{padding-left:18px!important;padding-right:18px!important}
  h1,h2,h3,p,a,span,strong{overflow-wrap:break-word}
}
/* Command workspaces */
@media(max-width:1100px){
  .studio-mobile-header{padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important}
  .studio-sidebar{padding-left:max(16px,env(safe-area-inset-left))!important}
  body.studio-nav-open{overflow:hidden}
}
@media(max-width:760px){
  body > main,body > .page,body > .wrap,body > .shell,body > .content,body > .workspace,body > .app,body > .admin-shell{padding-left:16px!important;padding-right:16px!important;width:100%!important}
  .studio-mobile-brand{font-size:.56rem!important;letter-spacing:.12em!important;max-width:62%}
  .studio-mobile-menu{min-width:74px!important;min-height:44px!important}
  .stats,.metrics,.sales-metrics,[class$="-metrics"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat,.metric,[class$="-metric"]{min-width:0}
  .panelhead{align-items:flex-start!important;gap:10px!important;flex-wrap:wrap!important}
  .panelhead span{white-space:normal!important}
  .loginrow{flex-direction:column!important}.loginrow input,.loginrow button{width:100%!important}
}
@media(max-width:430px){
  .stats,.metrics,.sales-metrics,[class$="-metrics"]{grid-template-columns:1fr 1fr!important}
  .studio-sidebar{width:min(92vw,330px)!important}
}
/* Client portals */
@media(max-width:760px){
  .portal-shell,.portal-wrap,.project-shell,.client-shell{padding-left:16px!important;padding-right:16px!important}
  .portal-nav,.project-nav,[class*="portal-tabs"],[class*="project-tabs"]{overflow-x:auto!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .portal-nav::-webkit-scrollbar,.project-nav::-webkit-scrollbar{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* Phase 79.1 — Studio iPad header alignment fix */
@media (min-width:981px) and (max-width:1180px){
  .top{padding-left:32px;padding-right:32px;gap:28px;align-items:center}
  .brand-environment{flex:0 0 auto;align-items:center;gap:12px}
  .nav{flex:1 1 auto;justify-content:flex-end;align-items:center;gap:18px;min-width:0}
  .nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;line-height:1;white-space:nowrap}
  .nav .nav-divider{align-self:center;margin:0 4px}
  .nav .cta{padding:12px 14px}
}
@media (min-width:981px) and (max-width:1050px){
  .top{padding-left:24px;padding-right:24px;gap:20px}
  .nav{gap:14px}
  .nav a{font-size:.58rem;letter-spacing:.1em}
  .brand-environment{gap:10px}
}

/* Phase 79.2 — iPad brand/environment alignment + device-neutral arrows */
.fr-external-arrow{
  display:inline-block!important;
  width:.68em!important;height:.68em!important;
  min-width:0!important;min-height:0!important;
  box-sizing:border-box!important;
  border-top:1.5px solid currentColor!important;
  border-right:1.5px solid currentColor!important;
  position:relative!important;
  margin-left:.34em!important;
  vertical-align:.02em!important;
  transform:translateY(-.06em)!important;
  line-height:1!important;
  flex:0 0 auto!important;
  transition:transform var(--fr-base,280ms) var(--fr-ease,cubic-bezier(.2,.8,.2,1))!important;
}
.fr-external-arrow::after{
  content:""!important;position:absolute!important;
  width:.92em!important;height:1.5px!important;
  background:currentColor!important;
  right:-.08em!important;top:.28em!important;
  transform:rotate(-45deg)!important;transform-origin:right center!important;
}
a:hover .fr-external-arrow,button:hover .fr-external-arrow{transform:translate(2px,-2px)!important}
@media(hover:none){a:hover .fr-external-arrow,button:hover .fr-external-arrow{transform:translateY(-.06em)!important}}

/* Studio: keep parent brand, divider and environment label on one optical centerline. */
.top .brand-environment{display:flex!important;align-items:center!important}
.top .brand,.top .environment-name{display:inline-flex!important;align-items:center!important;min-height:44px!important;line-height:1!important}
.top .brand span,.top .environment-name{line-height:1!important}
.top .environment-divider{align-self:center!important;margin-top:0!important;margin-bottom:0!important}

/* Collection: same lockup treatment for FR / FISCHRAINE / COLLECTION. */
.site-header .brand-environment{display:flex!important;align-items:center!important}
.site-header .brand-lockup,.site-header .environment-name{display:inline-flex!important;align-items:center!important;min-height:44px!important;line-height:1!important}
.site-header .brand-name,.site-header .brand-type,.site-header .environment-name{line-height:1!important}
.site-header .fr-mark{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
.site-header .environment-divider{align-self:center!important;margin-top:0!important;margin-bottom:0!important}

/* iPad landscape: preserve full navigation while holding the lockups to one line. */
@media (min-width:981px) and (max-width:1420px){
  .top .brand-environment,.site-header .brand-environment{align-self:center!important}
  .top .brand,.top .environment-name,.site-header .brand-lockup,.site-header .environment-name{height:44px!important}
  .top .nav,.site-header .main-nav{align-items:center!important}
  .top .nav a,.site-header .main-nav a{display:inline-flex!important;align-items:center!important;line-height:1!important;min-height:44px!important}
}

/* Phase 79.4 — one arrow system only. SVG owns all arrow geometry. */
.fr-external-arrow{
  display:inline-flex!important;
  width:.72em!important;height:.72em!important;
  min-width:0!important;min-height:0!important;
  margin-left:.34em!important;
  vertical-align:-.02em!important;
  align-items:center!important;justify-content:center!important;
  position:relative!important;
  border:0!important;
  background:none!important;
  transform:translateZ(0)!important;
  line-height:1!important;
  flex:0 0 auto!important;
  transition:transform var(--fr-base,280ms) var(--fr-ease,cubic-bezier(.2,.8,.2,1))!important;
}
.fr-external-arrow::before,.fr-external-arrow::after{content:none!important;display:none!important;border:0!important;background:none!important}
.fr-external-arrow svg{display:block!important;width:100%!important;height:100%!important;overflow:visible!important}
.fr-external-arrow path{fill:none!important;stroke:currentColor!important;stroke-width:1.35!important;stroke-linecap:square!important;stroke-linejoin:miter!important;vector-effect:non-scaling-stroke!important}
a:hover .fr-external-arrow,button:hover .fr-external-arrow{transform:translate(2px,-2px)!important}
@media(hover:none){a:hover .fr-external-arrow,button:hover .fr-external-arrow{transform:translateZ(0)!important}}