/* TECH MEDIA CORPORATION V5.4 — VIEWPORT-FIRST SECTION COMPOSITION
   The first meaningful frame of every section fits beneath the live sticky header.
   Deeper content remains scrollable; no scroll-snap, section clipping or forced scroll traps.
*/
:root{--stage-h:calc(100svh - var(--tmc-nav-h, 86px));--stage-ease:cubic-bezier(.18,.9,.25,1)}
html{scroll-padding-top:var(--tmc-nav-h,86px)}
#about,#expertise,#approach,#performance,#experience,#divisions,#network,#contact{scroll-margin-top:var(--tmc-nav-h,86px)}
/* Prevent sticky navbar + extreme top padding from leaving first frame almost empty. */
@media(min-width:1024px){
  .about,.expertise,.performance,.experience,.divisions,.network,.contact{
    padding-top:clamp(15px,2.3svh,29px)!important;
    padding-bottom:clamp(35px,5.5svh,75px)!important;
  }
  .about .section-meta,.expertise .section-meta,.performance .section-meta,.experience .section-meta,
  .divisions .section-meta,.network .section-meta,.contact .section-meta,
  .approach .section-meta{min-height:27px;padding-bottom:11px}
  .display-heading{font-size:clamp(64px,min(7.3vw,9.2svh),112px);line-height:.89;letter-spacing:-.025em}
  /* WHO WE ARE: hero statement, image and full editorial summary share one fold. */
  .about-layout{padding-top:clamp(15px,3svh,30px);gap:clamp(30px,4vw,58px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
    min-height:min(520px,calc(var(--stage-h) - 78px))}
  .about-layout .display-heading{font-size:clamp(64px,min(7.4vw,10svh),112px)}
  .about-art{width:clamp(155px,18vw,265px);max-height:clamp(145px,28svh,260px);object-fit:contain;margin:clamp(7px,2svh,18px) 0 0 21%}
  .about-right{padding:0 clamp(0px,1vw,14px) 0 0}
  .oversized-quote{font-size:clamp(42px,6svh,70px);line-height:.9}
  .statement{font-size:clamp(23px,min(2.45vw,3.3svh),35px);line-height:1.17;margin:4px 0 clamp(10px,1.3svh,17px)}
  .about .body-copy{font-size:clamp(12px,1vw,14px);line-height:1.57;margin-bottom:clamp(8px,1svh,13px)}
  .about .inline-link{margin-top:clamp(9px,1.5svh,17px)}
  /* OUR EXPERTISE: leading row is fully legible on landing; other 3 services remain below. */
  .expertise-intro{padding-top:clamp(15px,2.5svh,26px);margin-bottom:clamp(16px,2.7svh,27px);gap:34px;align-items:end}
  .expertise-intro .display-heading{font-size:clamp(64px,min(7.1vw,9svh),102px)}
  .expertise-intro .body-copy{width:min(32%,400px);font-size:clamp(12px,.95vw,14px);line-height:1.6}
  .capabilities{gap:14px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .capability{min-height:clamp(252px,36svh,345px);padding:clamp(15px,1.35vw,22px) clamp(17px,1.45vw,23px)!important}
  .capability img{height:clamp(76px,11.5svh,120px);margin:clamp(3px,.8svh,8px) auto clamp(6px,1svh,12px)}
  .capability h3{font-size:clamp(26px,min(2.6vw,4svh),37px);line-height:1.0;margin-bottom:8px}
  .capability p{font-size:clamp(11px,.87vw,12px);line-height:1.42;margin-bottom:12px}
  .capability .cap-explore{font-size:8px}.capability .cap-tag{font-size:9px;padding-top:10px}
  /* APPROACH: no hard min-height taller than viewport; intro and workflow form one balanced screen. */
  .approach{padding-top:0!important}
  .approach-primary{height:var(--stage-h)!important;min-height:0!important;max-height:none;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    padding-top:clamp(15px,2.3svh,25px)!important;
    padding-bottom:clamp(10px,1.5svh,20px)!important}
  .approach-header{padding-top:clamp(14px,2svh,25px)!important;gap:clamp(25px,3vw,44px);align-items:center!important}
  .approach-header .display-heading{font-size:clamp(60px,min(6.9vw,9svh),104px)!important;line-height:.88}
  .approach-header .body-copy{max-width:435px;width:35%;font-size:clamp(12px,.9vw,14px);line-height:1.48}
  .approach-body{margin-top:clamp(12px,2svh,23px);grid-template-columns:minmax(0,52fr) minmax(0,48fr);
    gap:clamp(12px,2vw,25px);min-height:0;height:100%;align-items:stretch;overflow:visible}
  .approach-visual{min-height:0!important;max-height:100%;height:100%!important;overflow:hidden}
  .diagram-frame{width:93%;height:100%;max-height:100%}
  .diagram-frame>img{width:min(70%,350px);height:auto;max-height:79%;object-fit:contain}
  .steps{min-height:0;height:100%;display:flex;flex-direction:column;justify-content:center;padding-left:8px}
  .step{padding:clamp(7px,1svh,13px) 0!important;gap:0}
  .step h3{font-size:clamp(26px,3.7svh,36px);line-height:1.0;margin:0 0 4px}
  .step p{font-size:clamp(11px,1.35svh,13px);line-height:1.4}
  .philosophy-teaser{margin-top:clamp(20px,4svh,45px)}
  /* METRICS: intro + all four statistic cards within the first scene. */
  .performance-intro,.experience-header{margin:clamp(17px,2.6svh,27px) 0 clamp(13px,2.4svh,24px);gap:35px}
  .performance-intro .display-heading,.experience-header .display-heading{font-size:clamp(63px,min(7vw,9svh),104px)}
  .performance-intro .body-copy,.experience-header .body-copy{font-size:clamp(12px,.95vw,14px);line-height:1.55;width:35%}
  .metric-card{min-height:clamp(205px,28svh,260px);padding:clamp(17px,2svh,24px) 17px}
  .metric-figure{font-size:clamp(49px,min(5.2vw,8svh),80px);margin:clamp(9px,2svh,18px) 0 10px}
  .metric-label{font-size:10px;line-height:1.4}
  .metric-disclosure{margin-top:clamp(12px,2svh,20px)}
  /* Experience: first case fully visible; remaining case studies flow below it. */
  .experience-grid{gap:16px}
  .experience-feature{min-height:0;height:clamp(305px,48svh,430px)}
  .experience-feature .experience-art{height:100%;min-height:0}
  .experience-feature .experience-copy{min-height:0;height:100%;padding:clamp(20px,2.3vw,33px)}
  .experience-feature .experience-copy h3{font-size:clamp(32px,min(3.5vw,5.3svh),55px);margin:clamp(10px,1.5svh,18px) 0 12px}
  .experience-feature .experience-copy p{font-size:clamp(11px,.95vw,13px);line-height:1.48}
  /* Ecosystem: two brand tiles visible in full on landing. */
  .divisions>.display-heading{font-size:clamp(64px,min(7vw,9svh),102px);padding:clamp(20px,3svh,32px) 0 clamp(15px,2.7svh,25px)}
  .divisions-grid{gap:16px}
  .division{height:clamp(338px,calc(var(--stage-h) - 220px),510px)!important;min-height:0!important;padding:clamp(18px,2vw,28px)}
  .division-header{font-size:9px}.division-header span:last-child{font-size:10px}
  .division-logo-stage{top:15%;height:35%;left:5%;right:5%;padding:12px}
  .division-foot h3{font-size:clamp(29px,min(3.5vw,5.2svh),46px)!important;margin:8px 0}
  .division-foot>p{font-size:11px;line-height:1.4;margin:7px 0}
  /* Network: the imagery, expertise and message fit without leading whitespace. */
  .network-grid{padding-top:clamp(16px,3svh,32px);gap:clamp(20px,2.5vw,35px);align-items:center}
  .network .display-heading{font-size:clamp(64px,min(7vw,9svh),104px)}
  .network .body-copy{margin-top:clamp(10px,2svh,20px);font-size:clamp(12px,1vw,14px);line-height:1.5}
  .network-note{font-size:11px;line-height:1.55}
  .network-visual{min-height:0;height:clamp(240px,46svh,430px)}
  .network-visual img{width:min(83%,420px);max-height:90%;object-fit:contain}
  .network-visual>span{bottom:0}
  .network-pills{margin-top:clamp(9px,1.5svh,17px)}
  .network-pills span{padding:clamp(10px,1.4svh,17px) 5px;font-size:9px}
  .network-explore{margin-top:clamp(13px,2svh,23px)}
  /* Contact: headline, explanation, action CTAs and actual address visible together. */
  .contact-inner{padding:clamp(20px,2.5svh,30px) clamp(25px,3.5vw,45px) clamp(23px,3svh,35px)}
  .contact .display-heading{font-size:clamp(67px,min(8.2vw,10.5svh),122px);padding:clamp(24px,4svh,42px) 0 clamp(19px,3svh,31px)}
  .contact-bottom{padding-top:clamp(15px,2.4svh,24px)}
  .contact .body-copy{font-size:clamp(12px,.95vw,14px);line-height:1.6}
  .contact-actions .button{padding:12px 16px;font-size:10px}
}
/* Intermediate widths: each selected section still has a clear beginning and a full readable first frame. */
@media(min-width:701px) and (max-width:1023px){
  .about,.expertise,.performance,.experience,.divisions,.network,.contact{padding-top:clamp(15px,2.8svh,30px)!important;padding-bottom:50px!important}
  .about-layout,.expertise-intro,.network-grid{padding-top:clamp(18px,3svh,29px)!important}
  .expertise-intro,.performance-intro,.experience-header{margin-bottom:20px!important}
  .about-layout .display-heading,.expertise .display-heading,.performance .display-heading,.experience .display-heading,
  .divisions .display-heading,.network .display-heading{font-size:clamp(54px,8vw,84px)}
  .about-art{width:180px;margin:10px auto;max-height:210px}
  .about-right{padding:0}.about-right .oversized-quote{font-size:50px}
  .about-right .statement{font-size:clamp(21px,2.8vw,29px)}
  .about .body-copy{font-size:12px;line-height:1.5}
  .capability{min-height:295px!important;padding:16px}.capability img{height:90px}
  .capability h3{font-size:30px}
  .experience-grid{gap:13px}.experience-feature{height:360px}
  .experience-feature .experience-art{height:100%}
  .divisions>.display-heading{padding:25px 0 20px}
  .division{height:420px!important;min-height:0!important}
  .division-logo-stage{height:30%;top:14%}
  .network-visual{min-height:260px;height:310px}
  .contact .display-heading{padding:25px 0;font-size:clamp(68px,9.6vw,95px)}
}
/* Mobile: readable section intros in the initial viewport, natural scrolling through detailed cards. */
@media(max-width:700px){
  .about,.expertise,.approach,.performance,.experience,.divisions,.network,.contact{
    padding-top:clamp(13px,2.3svh,22px)!important;padding-bottom:46px!important;
  }
  .section-meta{padding-bottom:11px;font-size:8px;gap:12px;line-height:1.5}
  .section-meta span:last-child{text-align:right}
  .display-heading{font-size:clamp(48px,12vw,75px);line-height:.94}
  .about-layout{padding-top:clamp(14px,2.2svh,22px);display:flex;flex-direction:column;align-items:start;gap:0}
  .about-layout .display-heading{font-size:clamp(51px,12.3vw,70px)}
  .about-art{width:clamp(90px,24vw,150px);max-height:130px;margin:12px 0 0 23%}
  .about-right{padding:12px 0 0}
  .oversized-quote{display:none}
  .about-right .statement{font-size:clamp(22px,5.4vw,29px);margin:0 0 10px;line-height:1.18}
  .about .body-copy{font-size:12px;line-height:1.48;margin-bottom:8px}
  .about .inline-link{margin-top:10px}
  .expertise-intro{padding-top:clamp(14px,2.6svh,22px);margin-bottom:clamp(14px,2.6svh,22px)}
  .expertise-intro .display-heading{font-size:clamp(52px,12.3vw,75px)}
  .expertise-intro .body-copy{font-size:12px;line-height:1.45;margin-top:12px}
  .capability{min-height:270px!important;padding:17px 18px!important}
  .capability img{height:80px;margin:7px auto 9px}
  .capability h3{font-size:32px}.capability p{font-size:11px;line-height:1.44}
  .approach-primary{min-height:0!important;height:auto!important;padding-top:clamp(10px,2svh,20px)!important}
  .approach-header{padding-top:clamp(13px,3svh,25px)!important}
  .approach-header .display-heading{font-size:clamp(53px,12.2vw,73px)}
  .approach-header .body-copy{font-size:12px;line-height:1.46;margin-top:12px}
  .approach-body{margin-top:clamp(10px,2svh,20px)}
  .approach-visual{height:clamp(140px,23svh,220px);min-height:0}
  .diagram-frame>img{width:45%;max-height:90%;object-fit:contain}
  .diagram-label{font-size:7px;padding:5px 7px}
  .steps{display:grid;grid-template-columns:1fr 1fr;gap:0 13px;margin-top:9px}
  .step{display:block;padding:11px 0!important}
  .step>span,.step b{display:none}
  .step h3{font-size:23px;margin:0 0 4px}
  .step p{font-size:10px;line-height:1.38}
  .performance-intro,.experience-header{margin:clamp(13px,2svh,21px) 0 18px}
  .performance-intro .display-heading,.experience-header .display-heading{font-size:clamp(51px,12.5vw,72px)}
  .performance-intro .body-copy,.experience-header .body-copy{font-size:12px;line-height:1.44;margin-top:13px}
  .metric-card{min-height:175px!important;padding:15px 13px}
  .metric-figure{font-size:clamp(42px,11vw,60px);margin:8px 0}
  .metric-label{font-size:9px}
  .metric-open{font-size:8px;padding-top:9px}
  .experience-feature{display:block;height:auto}
  .experience-feature .experience-art{height:clamp(145px,23svh,200px)}
  .experience-feature .experience-copy{min-height:0;padding:20px}
  .experience-feature .experience-copy h3{font-size:clamp(29px,7.4vw,40px);margin:12px 0}
  .divisions>.display-heading{font-size:clamp(55px,12.5vw,73px);padding:clamp(15px,3svh,26px) 0 18px}
  .division{height:clamp(390px,57svh,470px)!important;min-height:0!important}
  .division-logo-stage{top:14%;height:33%}
  .division-foot h3{font-size:clamp(35px,8vw,44px)!important}
  .network-grid{padding-top:clamp(13px,2.4svh,24px)}
  .network .display-heading{font-size:clamp(55px,13vw,76px)}
  .network .body-copy{margin-top:12px;font-size:12px;line-height:1.48}
  .network-note{font-size:10px;line-height:1.4}
  .network-visual{height:clamp(175px,27svh,260px);min-height:0}
  .network-pills span{padding:12px 6px}
  .network-explore{margin-top:15px;padding:15px}
  .contact-inner{padding:18px 17px 23px}
  .contact .display-heading{font-size:clamp(51px,12vw,75px);padding:clamp(25px,4svh,40px) 0 clamp(16px,3svh,26px)}
  .contact-bottom{padding-top:17px}
  .contact-actions{margin-top:15px;gap:9px}
  .contact-actions .button{font-size:9px;padding:12px 13px}
}
@media(max-width:700px) and (max-height:710px){
  .about-art{width:90px;max-height:100px;margin-top:7px}
  .approach-visual{height:135px}
  .contact .display-heading{padding:20px 0;font-size:clamp(47px,11.7vw,65px)}
}
@media(min-width:1024px) and (max-height:700px){
  /* Short laptop viewports should extend vertically rather than clip the workflow. */
  .approach-primary{height:auto!important;min-height:var(--stage-h)!important}
  .approach-body{min-height:clamp(285px,43svh,360px);height:auto!important;overflow:visible}
  .approach-visual{height:clamp(275px,42svh,355px)!important}
}
@media(prefers-reduced-motion:reduce){.approach-primary,.about-layout,.experience-feature{transition:none!important}}