/* ══════════════════════════════════════════════════════════════════════════
   CFJ Architects — Responsive Experience v7.5
   Authoritative responsive override file. Loads after cfj4.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Global fixes (all viewports) ── */
.stmt-p{font-size:15px!important;font-weight:300!important;color:var(--bod)!important;line-height:1.85!important;max-width:480px!important;}
.ft-ht{color:rgba(255,255,255,.55)!important;}
.ft-ds{color:rgba(255,255,255,.45)!important;}
.footer-in a{color:rgba(255,255,255,.55)!important;}
.footer-in a:hover{color:rgba(255,255,255,.85)!important;}
.ft-soc-link{color:rgba(255,255,255,.5)!important;}
.ft-soc-link:hover{color:rgba(255,255,255,.85)!important;}
.ft-cp,.ft-cp-right,.footer-bot a,.footer-bot span{color:rgba(255,255,255,.4)!important;}


/* ══════════════════════════════════════════════════════════════════════════
   PHONE PORTRAIT — max-width:768px
   ══════════════════════════════════════════════════════════════════════════ */

/* About page: team banner + light title */
.ab-team-banner img{border-radius:4px;}
.ab-identity-grid[style*="grid-template-columns:1fr"]{gap:0!important;}


/* About page: stack 2-col grid on all non-desktop screens */

/* About page: Who we are grid */
.ab-who-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}

/* About: stats 4-across on desktop, 2x2 on mobile */

/* About page stats styling */


/* ── About page: Who we are section ── */
.ab-who-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.ab-who-grid .ab-id-body{max-width:100%;}
.ab-who-grid .ab-clients{max-width:100%;}

/* About page stats */
.ab-who-grid .ab-proof{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid rgba(10,10,9,.1);padding-top:2rem;margin-top:2rem;}
.ab-who-grid .ab-proof-div{display:none;}
.ab-who-grid .ab-proof-item{text-align:left;padding:0;}
.ab-who-grid .ab-proof-n{font-size:clamp(1.6rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;color:#0a0a09;display:block;}
.ab-who-grid .ab-proof-l{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,9,.4);margin-top:.25rem;display:block;}
.ab-who-grid .ab-proof-star{display:flex;align-items:center;gap:.3rem;}

/* Desktop: 4-across stats */

/* Faheem photo: keep natural portrait ratio on all devices */


/* Principal section: phone fixes */
@media(max-width:768px){
}

/* Principal section: tablet fixes */
@media(min-width:769px) and (max-width:1120px){
}

@media(min-width:1121px){
.ab-who-grid .ab-proof{grid-template-columns:repeat(4,1fr);gap:0;border-top:none;padding-top:0;margin-top:1.5rem;}
.ab-who-grid .ab-proof-item{padding:0 1.5rem;border-left:1px solid rgba(10,10,9,.1);}
.ab-who-grid .ab-proof-item:first-child{padding-left:0;border-left:none;}
}

/* Tablet + Mobile: single column grid, 2x2 stats */
@media(max-width:1120px){
.ab-who-grid{grid-template-columns:1fr;gap:2.5rem;}
}

@media(min-width:1121px){
}

@media(max-width:1120px){
.ab-who-grid{grid-template-columns:1fr;gap:2rem;}
}

@media(max-width:1120px){
}

@media(max-width:768px){

/* Overseas strip */
.os-strip{display:flex!important;padding:.35rem 1rem .35rem 1.5rem!important;gap:0!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;position:relative!important;}
.os-strip.hide{display:none!important;}
.os-inner{flex:1!important;min-width:0!important;}
.os-t{font-size:9px!important;letter-spacing:.04em!important;}
.os-l{font-size:9px!important;letter-spacing:.06em!important;}
.os-x{flex-shrink:0!important;width:36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:12px!important;opacity:1!important;background:none!important;border:none!important;color:rgba(255,255,255,.6)!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;}
#nav{top:28px!important;}
.os-strip.hide~#nav{top:0!important;}

/* Hero */
.arrival{height:85vh!important;min-height:auto!important;max-height:750px!important;}

/* Page margins: outer containers 1.5rem */
.offer-in{padding:0!important;}
.work-in{padding:1.5rem!important;}
.voices{padding:7vh 1.5rem!important;}
.inv{padding:9vh 1.5rem!important;}
.con-g-inner{padding:4vh 1.5rem!important;grid-template-columns:1fr!important;}
.stmt-in{padding:0 1.5rem!important;gap:0!important;grid-template-columns:1fr!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;}
.footer-in{padding:3.5rem 1.5rem!important;}
.footer-bot{padding:1.5rem!important;}
.nav-in{padding:0 1.5rem!important;}
.rv-stat-bar{padding:0 1.5rem!important;}
.rv-container{padding:0 1.5rem!important;}
.ab-container{padding:0 1.5rem!important;}
.work-hd{padding:0 1.5rem 1.5rem!important;}
.pg-ct{padding:0 1.5rem 2.25rem!important;}
.ptypes{padding:6vh 1.5rem!important;}
.ca-intro-g,.ca-values-g,.ca-roles-g,.ca-life-g{padding:5vh 1.5rem!important;}

/* Inner containers: 0 sides */
.section-hd{padding-left:0!important;padding-right:0!important;}
.voices-in{padding-left:0!important;padding-right:0!important;}
.inv-in{padding-left:0!important;padding-right:0!important;grid-template-columns:1fr!important;}
.work-in-hm{padding:0!important;}
.work-section-hd-in{padding-left:0!important;padding-right:0!important;}
.ptypes-hd{padding-left:0!important;padding-right:0!important;}

/* Statement section */
.stmt{padding:5vh 0 3vh!important;}
.stmt-l{order:1!important;width:100%!important;}
.stmt-r{order:2!important;width:100%!important;}
.stmt-cred{order:3!important;width:100%!important;}
.stmt-sub{display:none!important;}
.stmt-h{font-size:clamp(2rem,8vw,2.8rem)!important;margin-bottom:1.25rem!important;text-align:left!important;}
.stmt-h .l2{display:block!important;}
.stmt-p{max-width:100%!important;margin-bottom:0.5rem!important;}
.stmt-r{margin-top:0!important;}

/* Stats: 2x2 grid */
.stmt-cred{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1.5rem 1rem!important;padding:2rem 0 0!important;margin-top:1.5rem!important;border-top:1px solid var(--brd)!important;box-sizing:border-box!important;width:100%!important;}
.cr-div{display:none!important;}
.cr-item{text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;}
.cr-item:last-child{display:flex!important;}
.cr-n{font-size:clamp(1.5rem,6vw,1.8rem)!important;}
.cr-l{font-size:9px!important;letter-spacing:.08em!important;white-space:nowrap!important;}

/* Service cards */
.oi{padding:2rem 1.5rem!important;border-right:none!important;border-top:1px solid var(--brd)!important;}
.oi:first-child{border-top:none!important;}
.offer-note{padding:1.5rem!important;}
.offer-in .section-hd{padding-left:1.5rem!important;padding-right:1.5rem!important;}

/* Masonry / project cards */
.masonry{padding:0!important;margin:0!important;}
.mc{width:100%!important;margin-bottom:1.5rem!important;}
.mc-cap{padding:0.75rem 0!important;}
.work-hd .tl{display:none!important;}
.work-ft{padding:0!important;margin-top:0.5rem!important;}

/* Ptypes / Sectors */
.ptypes-grid{grid-template-columns:repeat(4,80vw)!important;grid-auto-flow:column!important;overflow-x:scroll!important;scroll-snap-type:x mandatory!important;gap:1rem!important;padding-right:1.5rem!important;padding-left:0!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;}
.ptypes-grid::-webkit-scrollbar{display:none!important;}
.pt-card{scroll-snap-align:start!important;min-width:0!important;}
.pt-body{padding:1.25rem 1.25rem 1.5rem!important;}
.pt-hint{display:block!important;padding:0!important;}
.pt-dots{display:flex!important;padding:0!important;}

/* Careers */
.ca-open{padding:1.5rem 0!important;}

/* Font sizes */
.pt-tags span,.oi-ty span{font-size:10px!important;padding:.3rem .7rem!important;}
.con-lbl{font-size:10px!important;}
.mc-meta{font-size:12px!important;}
.v-year,.v-type{font-size:11px!important;}
.f-btn{font-size:12px!important;padding:1rem 1.75rem!important;}
.cf-sub{font-size:12px!important;}
.fb{font-size:11px!important;padding:.5rem 1rem!important;}
.ca-tag{font-size:11px!important;}
.ab-cred-title,.ab-sig-role,.ab-clients-lbl{font-size:11px!important;}
.ab-how-n{font-size:12px!important;}
.ab-lc-proj,.ab-lc-type,.ab-tv-proj{font-size:11px!important;}
.pt-hint{font-size:10px!important;}
.pt-num{font-size:10px!important;}
.ab-proof-l,.ab-img-cap{font-size:10px!important;}


/* About page: light title bar on mobile */
.ab-team-banner{margin-bottom:1.5rem!important;}
.ab-team-banner img{border-radius:0!important;}

/* Touch targets */
.tl{min-height:44px!important;display:inline-flex!important;align-items:center!important;font-size:11px!important;}
.ham{min-height:44px!important;min-width:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.fb{min-height:44px!important;display:inline-flex!important;align-items:center!important;}
.con-val{min-height:44px!important;display:flex!important;align-items:center!important;}
.logo{min-height:44px!important;display:flex!important;align-items:center!important;}
}


/* ══════════════════════════════════════════════════════════════════════════
   TABLET PORTRAIT — 769px to 1080px
   ══════════════════════════════════════════════════════════════════════════ */
@media(min-width:769px) and (max-width:1100px){

/* Nav: hamburger on tablets */
.nav-ul,.nav-cta,.nav-soc{display:none!important;}
.ham{display:flex!important;}

/* Services: 2 columns */
.offer-g{grid-template-columns:1fr 1fr!important;}

/* Masonry: 2 columns */
.masonry{column-count:2!important;}

/* Ptypes: 2 visible */
.ptypes-grid{grid-template-columns:repeat(4,45vw)!important;overflow-x:scroll!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;}
.ptypes-grid::-webkit-scrollbar{display:none!important;}
.pt-card{scroll-snap-align:start!important;}
.pt-hint{display:block!important;}
.pt-dots{display:flex!important;}

/* Grids: ensure proper columns */
.inv-in{grid-template-columns:1fr 1fr!important;}
.con-g-inner{grid-template-columns:1fr 1fr!important;}
.footer-in{gap:2rem!important;}

/* Hero */
.arrival{height:85vh!important;min-height:500px!important;}

/* About grids */
.ab-identity-grid,.ab-principal-grid,.ab-studio-grid,.ab-phil-grid,.ab-how-grid{grid-template-columns:1fr 1fr!important;}
}


/* ══════════════════════════════════════════════════════════════════════════
   LANDSCAPE PHONES — short viewport with wide screen
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-height:500px) and (min-width:500px){

/* Hero: fit viewport, text at bottom-left, indicators bottom-right */
.arrival{height:100vh!important;min-height:auto!important;max-height:100vh!important;overflow:hidden!important;}
.sl-content{bottom:2rem!important;top:auto!important;left:1.5rem!important;right:50%!important;max-width:none!important;height:auto!important;padding:0!important;}
.sl-h{font-size:10px!important;font-weight:300!important;margin-top:.15rem!important;line-height:1.3!important;}
.sl-type{font-size:clamp(1rem,3vh,1.4rem)!important;line-height:1.1!important;margin:0!important;}
.arr-sc{display:none!important;}
.sl-indicators{position:absolute!important;bottom:.75rem!important;right:1.5rem!important;left:auto!important;top:auto!important;z-index:10!important;}

/* Nav: hamburger */
.nav-ul,.nav-cta,.nav-soc{display:none!important;}
.ham{display:flex!important;min-height:44px!important;min-width:44px!important;align-items:center!important;justify-content:center!important;}
.nav-in{padding:0 1.5rem!important;}

/* Statement */
.stmt{padding:3vh 0!important;}
.stmt-in{gap:2rem!important;}
.stmt-h{font-size:clamp(1.6rem,4vw,2.4rem)!important;}
.stmt-p{max-width:100%!important;}

/* Services: 2 columns */
.offer-g{grid-template-columns:1fr 1fr!important;}
.oi{padding:1.5rem!important;}

/* Masonry: 2 columns */
.masonry{column-count:2!important;}

/* Stats: horizontal row */
.stmt-cred{display:flex!important;justify-content:space-evenly!important;padding:2vh 0!important;gap:0!important;width:100%!important;}
.cr-div{display:none!important;}
.cr-item{text-align:center!important;flex:0 0 auto!important;}
.cr-item:last-child{display:none!important;}
.cr-n{font-size:1.2rem!important;}
.cr-l{font-size:9px!important;white-space:nowrap!important;}

/* Grids: proper 2-column */
.inv-in{grid-template-columns:1fr 1fr!important;gap:2rem!important;}
.con-g-inner{grid-template-columns:1fr 1fr!important;}
.footer-in{grid-template-columns:repeat(4,1fr)!important;gap:1rem!important;padding:2vh 1.5rem!important;}
.footer-bot{padding:1rem 1.5rem!important;}

/* Ptypes */
.ptypes-grid{grid-template-columns:repeat(4,45vw)!important;}
.ptypes{padding:3vh 1.5rem!important;}

/* Overseas strip */
.os-strip{display:flex!important;}
.os-strip.hide{display:none!important;}

/* Invitation */
.inv{padding:4vh 1.5rem!important;}

/* Page hero */
.pg-hero{height:40vh!important;min-height:200px!important;}

/* Reviews */
.voice{min-width:0!important;}
}


/* ══════════════════════════════════════════════════════════════════════════
   SMALL SCREENS — Galaxy Fold outer, very narrow phones
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:320px){
.offer-in{padding:0!important;}
.oi{padding:1.5rem 1rem!important;}
.offer-in .section-hd{padding:0 1rem!important;}
.stmt-in{padding:0 1rem!important;}
.nav-in{padding:0 1rem!important;}
.work-in{padding:1rem!important;}
.work-hd{padding:0 1rem 1rem!important;}
.pg-ct{padding:0 1rem 1.5rem!important;}
.footer-in{padding:2.5rem 1rem!important;}
.footer-bot{padding:1rem!important;}
.con-g-inner{padding:3vh 1rem!important;}
.rv-container{padding:0 1rem!important;}
.ptypes{padding:5vh 1rem!important;}
.voices{padding:5vh 1rem!important;}
.inv{padding:6vh 1rem!important;}
.stmt-h{font-size:1.6rem!important;}
.inv-h{font-size:1.8rem!important;}
.stmt-cred{grid-template-columns:1fr 1fr!important;}
.ptypes-grid{grid-template-columns:repeat(4,90vw)!important;}
.os-strip{display:none!important;}
}


/* Principal section: phone fixes */
@media(max-width:768px){
.ab-principal-grid{display:flex!important;flex-direction:column!important;gap:2rem!important;}
.ab-principal-left{position:relative!important;top:auto!important;width:100%!important;}
.ab-faheem-img{max-width:200px!important;}
.ab-faheem-photo{aspect-ratio:3/4!important;object-fit:cover!important;object-position:top!important;}
.ab-principal-right{width:100%!important;}
.ab-pull{font-size:clamp(1.2rem,4vw,1.6rem)!important;line-height:1.4!important;margin-bottom:1.5rem!important;}
.ab-cred-block{margin-top:1rem!important;}
}

/* Principal section: tablet fixes */
@media(min-width:769px) and (max-width:1120px){
.ab-principal-left{position:relative!important;top:auto!important;}
.ab-faheem-photo{aspect-ratio:3/4!important;object-fit:cover!important;object-position:top!important;}
}

/* Team grid: 4 columns desktop, 2 columns mobile */

.ab-member-img .ab-img{aspect-ratio:4/5!important;object-fit:cover!important;object-position:top!important;}
@media(max-width:1120px){
.ab-team-grid{grid-template-columns:repeat(3,1fr)!important;gap:2rem 1.5rem!important;}
}
@media(max-width:768px){
.ab-team-grid{grid-template-columns:repeat(2,1fr)!important;gap:1.5rem 1rem!important;}
}

/* Team grid: force 4 columns on desktop */

/* Contact page — premium styling */
.ct-field{display:flex;flex-direction:column;gap:.4rem;}
.ct-lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,9,.35);}
.ct-inp{font-family:inherit;font-size:15px;font-weight:300;color:#0a0a09;background:transparent;border:none;border-bottom:1px solid rgba(10,10,9,.12);padding:.65rem 0;outline:none;transition:border-color .25s ease;border-radius:0;-webkit-appearance:none;}
.ct-inp:focus{border-bottom-color:rgba(10,10,9,.5);}
.ct-inp::placeholder{color:rgba(10,10,9,.22);font-weight:300;}
.ct-select{cursor:pointer;appearance:auto;-webkit-appearance:auto;padding-right:1rem;}
.ct-ta{resize:vertical;min-height:80px;line-height:1.6;}
.ct-submit{display:inline-flex;align-items:center;gap:.5rem;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#0a0a09;border:none;padding:.85rem 2rem;cursor:pointer;transition:all .3s ease;}
.ct-submit:hover{background:#222;transform:translateY(-1px);}
.ct-submit:active{transform:translateY(0);}
.ct-submit svg{transition:transform .25s ease;}
.ct-submit:hover svg{transform:translateX(3px);}
.ct-info-block{display:flex;flex-direction:column;gap:0;}
.ct-info-item{padding:1.1rem 0;border-bottom:1px solid rgba(10,10,9,.06);}
.ct-info-item:first-child{padding-top:0;}
.ct-info-lbl{display:block;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(10,10,9,.3);margin-bottom:.3rem;}
.ct-info-val{font-size:15px;font-weight:300;color:#0a0a09;text-decoration:none;line-height:1.5;}
a.ct-info-val:hover{color:rgba(10,10,9,.6);}
.ct-wa-btn{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;padding:.75rem 1.5rem;font-family:inherit;font-size:13px;font-weight:500;color:#0a0a09;border:1px solid rgba(10,10,9,.12);text-decoration:none;transition:all .25s ease;}
.ct-wa-btn:hover{border-color:rgba(10,10,9,.4);background:rgba(10,10,9,.02);}
.ct-wa-btn svg{color:#25d366;flex-shrink:0;}
@media(max-width:768px){
.ct-grid{grid-template-columns:1fr!important;gap:3rem!important;}
.ct-grid form > div:first-child{grid-template-columns:1fr!important;}
}
@media(max-width:480px){
.ct-container{padding:0 1.25rem!important;}
}

/* Overseas page responsive */
@media(max-width:768px){
.ov-steps{grid-template-columns:1fr!important;}
.ov-commitments{grid-template-columns:1fr 1fr!important;}
.ov-cta-grid{grid-template-columns:1fr!important;gap:2.5rem!important;}
}
@media(max-width:480px){
.ov-container{padding-left:1.25rem!important;padding-right:1.25rem!important;}
.ov-commitments{grid-template-columns:1fr!important;}
}

/* Overseas page responsive */
@media(max-width:768px){
.ov-steps{grid-template-columns:1fr!important;}
.ov-commitments{grid-template-columns:1fr 1fr!important;}
.ov-cta-grid{grid-template-columns:1fr!important;gap:2.5rem!important;}
}
@media(max-width:480px){
.ov-container{padding-left:1.25rem!important;padding-right:1.25rem!important;}
.ov-commitments{grid-template-columns:1fr!important;}
}

/* About testimonials responsive */
@media(max-width:900px){
.ab-testi-grid{grid-template-columns:1fr!important;}
}

/* Sector card image overrides */
.bg-res{background:url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?w=800&q=80&auto=format&fit=crop') center/cover no-repeat!important;}
.bg-corp{background:url('https://images.unsplash.com/photo-1716703435551-4326ab111ae2?w=800&q=80&auto=format&fit=crop') center/cover no-repeat!important;}
.bg-com{background:url('https://cdn.pixabay.com/photo/2018/01/20/07/19/tallest-3093955_1280.jpg') center/cover no-repeat!important;}
.bg-hosp{background:url('https://cdn.pixabay.com/photo/2015/06/30/18/35/st-826687_1280.jpg') center/cover no-repeat!important;}

/* Fix sector card images - remove dark gradient overlay from inner div */
.pt-img-in{background:none!important;}

/* Homepage reviews grid mobile fix */
@media(max-width:900px){
.hp-reviews-grid{grid-template-columns:1fr!important;gap:1.5rem!important;}
}

/* Abroad page v2 responsive */
@media(max-width:768px){
.ov-hero-grid{grid-template-columns:1fr!important;gap:2rem!important;}
.ov-commitments{grid-template-columns:1fr!important;}
.ov-commitments-row2{grid-template-columns:1fr!important;}
}

/* Footer mobile fix */
@media(max-width:768px){
.footer-in{flex-direction:column!important;gap:1.5rem!important;text-align:center!important;}
.footer-in .ft-lk{text-align:center!important;}
.footer-bot{flex-direction:column!important;gap:.75rem!important;text-align:center!important;}
.footer-bot .ft-social{justify-content:center!important;}
}

/* Footer mobile v2 — clean single column */
@media(max-width:768px){
.footer-in{
  flex-direction:column!important;
  gap:2rem!important;
  align-items:center!important;
  text-align:center!important;
  padding:2.5rem 0 1.5rem!important;
}
.footer-in > div:first-child{text-align:center!important;}
.footer-in .ft-lk{
  text-align:center!important;
  align-items:center!important;
}
.footer-in .ft-lk a,
.footer-in .ft-lk span{
  text-align:center!important;
  font-size:13px!important;
}
.footer-bot{
  flex-direction:column!important;
  gap:.75rem!important;
  align-items:center!important;
  text-align:center!important;
  padding:1rem 0!important;
}
}

/* Logo swap: white on dark hero, black on scrolled white bg */
.nav .logo-white{display:block!important;}
.nav .logo-black{display:none!important;}
.nav.lt .logo-white{display:none!important;}
.nav.lt .logo-black{display:block!important;}


/* Logo size on mobile */
@media(max-width:768px){
.logo-img{height:24px!important;}
}

/* Overseas strip mobile - larger text */
@media(max-width:768px){
.os-strip{font-size:12px!important;}
.os-t,.os-l{font-size:12px!important;}
}

/* Desktop: strip text larger, logo smaller */
@media(min-width:769px){
.os-strip{font-size:13px!important;}
.os-t,.os-l{font-size:13px!important;}
.logo-img{height:30px!important;}
}

/* Mobile strip text slightly larger */
@media(max-width:768px){
.os-strip{font-size:13px!important;}
.os-t,.os-l{font-size:13px!important;}
}