/* CODEARIS V37 — Adaptive Device Experience
   Final responsive composition layer. It deliberately reacts to available
   space and interaction mode instead of treating smaller screens as scaled desktops. */

:root{
  --safe-top:env(safe-area-inset-top);
  --safe-right:env(safe-area-inset-right);
  --safe-bottom:env(safe-area-inset-bottom);
  --safe-left:env(safe-area-inset-left);
  --device-inline:clamp(18px,5.4vw,104px);
  --device-section:clamp(64px,8svh,118px);
  --device-radius:clamp(8px,1vw,16px);
  --device-content:1760px;
}

html{max-width:100%;overflow-x:clip;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{max-width:100%;min-width:0;overflow-x:clip}
img,video,svg,canvas{max-inline-size:100%}
input,textarea,button,select{max-inline-size:100%}
.opening-copy h2,.creation-top h2,.chapter-text h2,.capability-heading h2,.story-outro h2,.your-story h2,.info-hero h1,.legal-editorial h2,.extended-services__intro h2{text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none}
.chapter-text>p,.capability-heading>p,.contact-intro,.info-lead,.legal-editorial p,.extended-service-card p{overflow-wrap:anywhere}

/* Safe-area aware fixed UI. */
.language-switch{left:max(12px,var(--safe-left));bottom:max(12px,var(--safe-bottom))}
.quiet-contact{right:max(var(--gutter),var(--safe-right));top:max(16px,var(--safe-top))}
.scroll-cue{padding-bottom:var(--safe-bottom)}
.info-header{padding-top:max(18px,var(--safe-top));padding-left:max(var(--gutter),var(--safe-left));padding-right:max(var(--gutter),var(--safe-right))}
.story-footer,.info-footer{padding-bottom:max(28px,var(--safe-bottom))}

/* Components are containers so their own available width can determine composition. */
.capability-chapter,.chapter-product,.chapter-service-perspective,.info-main{container-type: inline-size}
.chapter-service-perspective,.service-perspective,.service-client-view,.service-builder-view,.service-code-view,.chapter-service-product,.chapter-service-code{min-width:0}
.service-client-view #capability-product,.service-client-view #capability-product>.product-pane{min-width:0;max-width:100%}
.service-client-view .editorial-site,.service-client-view .board-app,.service-client-view .automation-app,.service-client-view .workspace-shell{max-width:100%;min-width:0}

/* Component-local collapse: this also protects odd split-screen and embedded window widths. */
@container (max-width: 680px){
  .chapter-service-perspective{grid-template-columns:1fr!important}
  .chapter-service-code{margin-top:6px}
  .chapter-service-product .chapter-product-visual{min-height:0}
  .editorial-main{grid-template-columns:1fr!important}
  .editorial-image{min-height:220px!important}
  .automation-flow{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .flow-connector{display:none!important}
}

/* Touch devices: controls get native-feeling hit areas without visually inflating desktop UI. */
@media (pointer: coarse){
  .build-steps button,.capability-tabs button,.mobile-week button,.mobile-nav button,.automation-action button,.board-add,.board-toolbar button,.editorial-header button,.send-button,.info-nav a,.editorial-faq summary{min-block-size:44px}
  .editorial-faq summary{align-items:center}
  .extended-service-card:after{display:none}
  .quiet-contact{padding-block:11px}
}

/* Fine pointer devices can keep richer hover feedback. */
@media (hover: hover) and (pointer: fine){
  .extended-service-card{transition:transform .28s ease,background .28s ease}
  .extended-service-card:hover{transform:translateY(-3px);background:#ffffff03}
  .info-aside a,.story-footer a{transition:opacity .18s ease,color .18s ease}
  .info-aside a:hover,.story-footer a:hover{opacity:.7}
}


/* Compact navigation keeps language choice reachable after footer language links were removed. */
@media (max-width: 900px){
  .info-nav .info-language{display:inline-flex!important;align-items:center;justify-content:center}
}

/* Large phones and narrow fold/split-screen widths get their own composition band. */
@media (min-width: 481px) and (max-width: 699px){
  :root{--gutter:clamp(22px,5vw,32px);--device-section:clamp(62px,8svh,86px)}
  .brand-intro img{width:min(82vw,500px)!important}
  .opening-copy{padding-inline:var(--gutter)!important}
  .opening-copy h2{font-size:clamp(31px,7.6vw,48px)!important}
  .creation-grid{grid-template-columns:1fr!important;gap:16px!important}
  .capability-chapter{padding:var(--device-section) var(--gutter)!important}
  .chapter-text h2{font-size:clamp(38px,8vw,54px)!important}
  .chapter-service-perspective{grid-template-columns:1fr!important}
  .chapter-service-code{margin-top:6px!important}
  .editorial-main{grid-template-columns:minmax(0,1.08fr) minmax(180px,.92fr)!important}
  .app-side-note{display:none!important}
  .mobile-surface{width:min(320px,78vw)!important}
  .automation-action{display:grid!important;gap:12px!important}
  .automation-action button{width:100%;justify-content:space-between}
  .your-story h2{font-size:clamp(64px,14vw,88px)!important}
  .contact-layout{grid-template-columns:1fr!important}
  .info-hero h1{font-size:clamp(48px,12vw,76px)!important}
  .info-content{grid-template-columns:1fr!important}
}

/* Phones: each scene becomes a deliberate vertical composition, not a squeezed desktop grid. */
@media (max-width: 480px){
  :root{--gutter:clamp(16px,5.4vw,22px);--device-section:clamp(54px,8svh,78px)}
  .brand-intro{padding-inline:max(var(--gutter),var(--safe-left));padding-block:32px}
  .brand-intro img{width:min(88vw,410px)!important}
  .brand-intro::before{width:112vw!important;height:80vw!important;filter:blur(40px)!important}
  .opening-copy{padding:clamp(40px,8svh,68px) var(--gutter)!important}
  .opening-copy h2{font-size:clamp(27px,8.8vw,41px)!important;line-height:1.14!important;letter-spacing:-.045em!important}
  .understanding-line{font-size:clamp(15px,4.4vw,18px)!important;line-height:1.58!important;max-width:31ch}
  .scene-index{margin-bottom:clamp(20px,5svh,30px)!important}
  .scroll-cue{top:auto!important;bottom:max(22px,calc(var(--safe-bottom) + 12px))!important}

  .cinematic .creation-world{padding:clamp(18px,4svh,30px) var(--gutter) 14px!important}
  .creation-top h2{font-size:clamp(22px,6.6vw,31px)!important;min-height:0!important}
  .creation-grid{gap:12px!important}
  .code-studio pre{font-size:clamp(11px,3.6vw,13px)!important;line-height:1.55!important}
  .code-line{padding-left:34px!important}
  .build-steps{grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain}
  .build-steps::-webkit-scrollbar{display:none}
  .build-steps button{min-width:66px;padding-inline:4px!important}

  .capability-chapter{padding:var(--device-section) var(--gutter)!important}
  .chapter-text h2{font-size:clamp(32px,10.5vw,46px)!important;line-height:1.02!important}
  .chapter-text>p:last-child{font-size:clamp(16px,4.6vw,18px)!important;line-height:1.55!important;max-width:30ch}
  .chapter-product{margin-top:26px!important}
  .chapter-service-perspective{gap:11px!important}
  .chapter-service-product,.chapter-service-code{padding-top:40px!important;border-radius:10px!important}
  .perspective-kicker{left:13px!important;right:13px!important;top:13px!important;font-size:8px!important}
  .perspective-kicker small{display:none!important}
  .service-code-pre{font-size:10px!important;line-height:1.58!important;max-height:300px;overflow:auto!important}
  .service-code-line{grid-template-columns:24px minmax(0,1fr)!important;padding:4px 10px!important}
  .service-code-head,.service-code-note{padding-inline:10px!important}

  .editorial-header{padding:13px 14px!important;gap:10px}
  .editorial-header nav{gap:5px!important}
  .editorial-header button{padding-inline:7px!important;font-size:8px!important}
  .editorial-copy{padding:24px 18px!important}
  .editorial-copy h3{font-size:clamp(30px,10vw,39px)!important;margin:16px 0!important}
  .editorial-image{min-height:210px!important}
  .editorial-footer{padding:14px 16px!important;gap:10px;flex-wrap:wrap}

  .board-heading,.board-toolbar,.board-app>header{padding-inline:14px!important}
  .board-columns{padding:14px!important;max-height:390px!important}
  .board-columns section{grid-template-columns:62px minmax(0,1fr)!important}
  .board-card{padding:11px!important}

  .app-composition{padding:8px!important}
  .mobile-surface,.service-client-view #capability-product>.product-pane[data-product="apps"] .mobile-surface{width:min(100%,300px)!important;max-height:none!important;padding:16px 18px 0!important;border-radius:24px!important}
  .mobile-surface>h3{font-size:27px!important}
  .mobile-focus{padding:14px!important}
  .mobile-focus h4{font-size:21px!important}

  .automation-app{padding:18px 14px!important}
  .automation-heading{padding:20px 0 16px!important}
  .automation-heading h3{font-size:clamp(28px,9vw,36px)!important}
  .automation-action{display:grid!important;gap:12px!important}
  .automation-action button{width:100%;justify-content:space-between}
  .automation-log{max-width:none!important}

  .extended-services{padding-inline:var(--gutter)!important}
  .extended-services__intro{gap:26px!important;margin-bottom:50px!important}
  .extended-services__intro h2{font-size:clamp(35px,10vw,48px)!important}
  .extended-service-card{min-height:220px!important;padding:24px 18px!important}
  .extended-service-card h3{font-size:clamp(25px,7vw,31px)!important;margin-top:30px!important}

  .story-outro{padding:62px var(--gutter)!important;min-height:72svh!important}
  .story-outro h2{font-size:clamp(31px,9.5vw,44px)!important}
  .contact-story{padding-bottom:64px!important}
  .contact-story .your-story{padding-top:74px!important;padding-bottom:52px!important}
  .your-story h2{font-size:clamp(54px,17vw,76px)!important;line-height:.96!important}
  .contact-layout{gap:38px!important;padding-top:30px!important}
  .contact-intro h3{font-size:clamp(27px,8vw,34px)!important}
  #story-contact input,#story-contact textarea{font-size:16px!important}
  .story-footer{padding-inline:var(--gutter)!important}
  .story-footer nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:12px 18px!important}

  .info-header{padding-inline:max(var(--gutter),var(--safe-left))!important;gap:8px}
  .info-brand__logo{width:clamp(124px,42vw,154px)!important}
  .info-nav{gap:7px!important;align-items:center!important}
  .info-nav .info-language{display:inline-flex!important;align-items:center;justify-content:center;min-width:42px;padding:8px 10px;border:1px solid rgba(83,60,70,.18);border-radius:999px}
  .info-idea{font-size:10px!important;padding:9px 11px!important}
  .info-main{width:100%}
  .info-hero{padding:42px var(--gutter) 52px!important}
  .info-hero h1{font-size:clamp(40px,13.5vw,62px)!important;line-height:.96!important;letter-spacing:-.06em!important}
  .info-lead{font-size:16px!important;line-height:1.55!important;margin-top:28px!important}
  .info-content{padding:34px var(--gutter) 66px!important;gap:32px!important}
  .legal-editorial>section{grid-template-columns:36px minmax(0,1fr)!important;gap:12px!important;padding:24px 0!important}
  .legal-editorial h2{font-size:clamp(23px,7vw,28px)!important}
  .legal-editorial p{font-size:14px!important}
  .editorial-faq summary{font-size:18px!important;gap:14px!important}
  .info-footer{padding:24px var(--gutter) max(24px,var(--safe-bottom))!important;gap:20px!important}
  .info-footer nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px!important;width:100%}
}

/* Tablets: touch tablets deliberately use the chapter composition, while a similarly wide laptop keeps the cinematic desktop stage. */
@media (min-width: 700px) and (max-width: 1100px){
  :root{--gutter:clamp(36px,6vw,66px);--device-section:clamp(74px,9svh,108px)}
  .opening-copy h2{font-size:clamp(38px,6.8vw,64px)!important}
  .creation-grid{gap:clamp(20px,4vw,42px)!important}
  .chapter-text h2{font-size:clamp(44px,7vw,68px)!important}
  .chapter-service-perspective{grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);gap:14px}
  .contact-layout{gap:clamp(42px,6vw,72px)!important}
  .your-story h2{font-size:clamp(74px,11vw,110px)!important}
  .info-hero{padding-top:clamp(54px,7svh,78px)!important}
  .info-content{gap:clamp(42px,6vw,76px)!important}
}

@media (min-width: 700px) and (max-width: 1100px) and (pointer: coarse){
  .capability-track{height:auto!important}
  .cinematic .capability-stage{display:none!important}
  .cinematic .capability-chapters{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important}
  .capability-chapter{padding:var(--device-section) var(--gutter)!important;border-bottom:1px solid #ffffff0a}
  .chapter-product{margin-top:40px!important}
  .capability-chapter .workspace-shell{min-height:430px}
  .service-code-pre{min-height:260px!important}
}

/* Laptop/desktop: preserve the cinematic layout but scale its working area to the actual display. */
@media (min-width: 1200px){
  :root{--gutter:clamp(54px,5.3vw,112px)}
  .cinematic .creation-grid,.cinematic .creation-top,.cinematic .build-steps{max-width:min(var(--device-content),calc(100vw - (var(--gutter) * 2)))!important}
  .capability-layout,.capability-top,.capability-caption{max-width:min(var(--device-content),calc(100vw - (var(--gutter) * 2)));margin-left:auto;margin-right:auto}
  .service-perspective{grid-template-columns:minmax(0,1.35fr) minmax(350px,.65fr)!important;min-height:clamp(470px,56svh,670px)!important}
  .service-client-view #capability-product{min-height:clamp(410px,50svh,590px)!important}
  .extended-services__intro,.extended-services__grid{max-width:var(--device-content);margin-left:auto;margin-right:auto}
  .contact-story .your-story,.contact-story .contact-layout{max-width:min(1640px,calc(100vw - (var(--gutter) * 2)))!important}
  .info-main{max-width:1900px;margin-inline:auto}
}

/* Desktop fidelity guard: V36 already had the right cinematic proportions here.
   Keep V37 adaptive behaviour around it, but do not shrink the proven desktop stage. */
@media (min-width: 1101px) and (max-width: 1999px){
  :root{--gutter:clamp(24px,5.5vw,104px)}
  .capability-layout,.capability-top,.capability-caption{width:100%;max-width:none;margin-inline:0}
  .capability-heading h2{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
  .service-perspective{grid-template-columns:minmax(0,1.32fr) minmax(340px,.68fr)!important;gap:18px!important;min-height:clamp(455px,56svh,620px)!important}
  .service-client-view #capability-product{min-height:420px!important}
}

/* Large desktop/4K: content grows in breathing room, not endlessly in font size. */
@media (min-width: 2000px){
  :root{--gutter:clamp(110px,6vw,190px);--device-content:1920px}
  .brand-intro img{width:clamp(680px,38vw,900px)!important}
  .opening-copy h2{max-width:1320px!important}
  .creation-top h2{font-size:clamp(44px,2.7vw,60px)!important}
  .service-perspective{grid-template-columns:minmax(0,1.42fr) minmax(400px,.58fr)!important;gap:24px!important}
  .service-client-view,.service-builder-view{border-radius:18px!important}
  .service-code-pre{font-size:13px!important}
  .extended-service-card{min-height:360px!important;padding:34px 30px!important}
  .your-story h2{font-size:clamp(118px,7vw,158px)!important}
  .info-main{max-width:2100px}
  .info-hero{max-width:1900px;margin-inline:auto}
  .info-content{max-width:1900px;margin-inline:auto}
  .info-divider{max-width:calc(1900px - (var(--gutter) * 2));margin-inline:auto}
}

/* Low-height windows and small laptops: fit the composition vertically instead of clipping it. */
@media (max-height: 620px){
  .opening-copy{padding-block:34px!important}
  .opening-copy h2{font-size:clamp(28px,5vw,55px)!important}
  .scene-index{margin-bottom:18px!important}
  .understanding-line{margin-top:18px!important;font-size:16px!important}
  .dive-rule{height:42px!important;margin-top:22px!important}
  .cinematic .creation-world{padding-top:18px!important;padding-bottom:10px!important}
  .creation-top{margin-bottom:12px!important}
  .creation-top h2{font-size:clamp(24px,3vw,38px)!important;min-height:0!important}
  .code-studio pre{padding-block:10px!important;line-height:1.48!important}
  .workspace-live{min-height:250px!important}
  .build-steps{margin-top:12px!important}
  .build-steps button{padding-block:9px!important}
  .cinematic .capability-stage{padding-top:22px!important;padding-bottom:14px!important}
  .capability-top{margin-bottom:16px!important}
  .service-perspective{min-height:390px!important}
  .service-client-view #capability-product{min-height:350px!important}
  .service-client-view #capability-product>.product-pane[data-product="apps"] .mobile-surface{max-height:355px!important;width:280px!important}
  .story-outro{min-height:70svh!important;padding-block:48px!important}
  .info-hero{padding-top:38px!important;padding-bottom:44px!important}
}

/* Orientation itself is part of the composition contract. */
@media (orientation: landscape){
  :root{--orientation-flow:row}
}

/* Phones/small tablets in landscape use the width instead of producing a very long single column. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1000px){
  :root{--gutter:clamp(22px,5vw,46px)}
  .brand-intro img{width:min(58vw,520px)!important}
  .scroll-cue{display:none!important}
  .opening-copy{padding:26px var(--gutter)!important}
  .opening-copy h2{font-size:clamp(29px,5.7vw,49px)!important}
  .capability-chapter{padding:48px var(--gutter)!important}
  .chapter-text h2{font-size:clamp(34px,6vw,50px)!important}
  .chapter-product{margin-top:24px!important}
  .chapter-service-perspective{grid-template-columns:minmax(0,1.05fr) minmax(250px,.95fr)!important;gap:12px!important}
  .chapter-service-code{margin-top:0!important}
  .service-code-pre{max-height:260px!important}
  .app-side-note{display:none!important}
  .mobile-surface{width:260px!important}
  .story-outro{min-height:85svh!important}
  .contact-story .your-story{padding-top:60px!important}
  .info-header{padding-block:10px!important}
  .info-hero{padding-top:30px!important;padding-bottom:36px!important}
}

/* Split-screen and browser zoom resilience. */
@media (max-width: 360px){
  :root{--gutter:16px}
  .language-switch{font-size:9px;gap:6px;padding:6px 8px}
  .quiet-contact{right:12px!important}
  .opening-copy h2{font-size:clamp(26px,8.7vw,32px)!important}
  .chapter-text h2{font-size:clamp(30px,10vw,36px)!important}
  .mobile-surface,.service-client-view #capability-product>.product-pane[data-product="apps"] .mobile-surface{width:min(100%,284px)!important}
  .info-brand__logo{width:122px!important}
  .info-idea{padding-inline:9px!important}
  .info-hero h1{font-size:clamp(38px,13vw,46px)!important}
}