@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
/* Phone-first layout inspired by the user's sketch. Desktop styles remain unchanged. */
*{min-width:0}
img,video,iframe{max-width:100%}
@media(max-width:600px){
 html,body{width:100%;overflow-x:clip}
 @supports not (overflow:clip){html,body{overflow-x:hidden}}
 body{font-size:15px}
 main{padding-left:12px!important;padding-right:12px!important}
 .site-nav{position:sticky;top:0}
 .site-nav-inner{padding:10px 12px;gap:8px;display:flex;flex-wrap:wrap}
 .site-brand{font-size:clamp(15px,4vw,19px);white-space:normal;max-width:70%;line-height:1.15}
 .nav-menu{display:block;margin-left:auto;flex-shrink:0}
 .site-links{display:none;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .site-links.open{display:grid}
 .site-links a{padding:10px 7px;font-size:12px;text-align:center;white-space:normal;background:#f5f5f5;border:1px solid #f5f5f5;border-radius:10px}
 /* The sketch uses one wide heading area followed by two cards per row. */
 .hero,.office-hero{border-radius:18px!important;padding:22px 16px!important;min-height:0!important}
 .hero h1,.office-hero h1{font-size:clamp(26px,7vw,38px)!important;line-height:1.1!important;overflow-wrap:anywhere}
 .hero p,.office-hero p{font-size:14px!important;line-height:1.5!important}
 .grid,.product-grid,.content-grid,.office-results,.office-detail-grid,.faculty-grid,.resource-grid,.cards-grid,.hostel-grid,.category-grid{
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important
 }
 .card,.faculty,.product-card,.office-card,.office-detail-card,.event-card,.art-card,.hostel-card,.resource-card{
   min-width:0!important;width:auto!important;border-radius:14px!important;overflow-wrap:anywhere
 }
 .card img,.faculty img,.product-card img,.office-card img,.hostel-card img{width:100%;max-width:100%;object-fit:cover}
 .card-body,.faculty-body,.office-card-body,.product-card-body{padding:10px!important}
 .card h2,.card h3,.faculty h3,.product-card h3,.office-card h3,.office-detail-card h2{font-size:clamp(13px,3.7vw,16px)!important;line-height:1.25!important}
 .card p,.faculty p,.product-card p,.office-card p,.office-detail-card p{font-size:12px!important;line-height:1.45!important;overflow-wrap:anywhere}
 .office-page{padding:12px 10px 30px!important}
 .office-topbar{align-items:center;flex-wrap:wrap;gap:8px}
 .office-brand{font-size:19px!important;max-width:65%;line-height:1.15}
 .office-brand img{width:30px!important;height:30px!important}
 .office-menu-toggle{padding:9px 10px!important;font-size:12px!important}
 .office-resource-links.open{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
 .office-resource-links a{font-size:12px!important;text-align:center;padding:10px 6px!important}
 .office-search{gap:5px;padding:5px 6px 5px 10px!important;border-radius:13px!important}
 .office-search input{font-size:14px!important;padding:10px 2px!important}
 .office-search button{padding:10px 9px!important;font-size:12px!important;white-space:nowrap}
 .office-cats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:14px 0 20px!important}
 .office-cat{padding:11px 8px!important;text-align:center;font-size:12px!important}
 .office-section-head{align-items:flex-start;gap:8px}
 .office-section-head h2{font-size:21px!important}
 .office-detail-card{padding:12px!important}
 .office-note{font-size:12px!important;line-height:1.5!important}
 .searchbar,.form-grid{display:grid!important;grid-template-columns:1fr!important}
 input,select,textarea{max-width:100%;font-size:16px!important}
 .modal-panel,.modal-card{width:calc(100vw - 20px)!important;max-width:none!important;margin:10px!important;padding:15px!important}
 .nav,.navlinks{flex-wrap:wrap}
 .nav{padding:10px 12px!important}
 .navlinks{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%}
 .navlinks button{font-size:12px!important;padding:9px 6px!important}
 .hero{margin:10px 0}
 footer{padding:18px 12px!important;font-size:12px!important}
}
@media(max-width:360px){
 .site-brand{font-size:14px}
 .grid,.product-grid,.content-grid,.office-results,.office-detail-grid,.faculty-grid,.resource-grid,.cards-grid,.hostel-grid,.category-grid{gap:7px!important}
 .card-body,.faculty-body,.office-card-body,.product-card-body{padding:8px!important}
 .office-search button{font-size:11px!important;padding:9px 7px!important}
}

/* Revert the previously rejected two-column content cards on phones; keep navigation menus compact. */
@media(max-width:600px){.grid,.product-grid,.content-grid,.office-results,.office-detail-grid,.faculty-grid,.resource-grid,.cards-grid,.hostel-grid,.category-grid{grid-template-columns:1fr!important}.office-extras-grid{grid-template-columns:1fr!important}.card img,.faculty img,.product-card img,.office-card img,.hostel-card img{object-fit:contain!important}}

/* ===== Hub theme: Roboto + orange / charcoal (shared by every page) ===== */
:root{--hub-font:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif}
html body *:not(code):not(pre):not(kbd):not(samp):not(svg):not(svg *){font-family:var(--hub-font)!important}
html body{background-color:#f5f5f5;color:#282828;-webkit-font-smoothing:antialiased}
a{-webkit-tap-highlight-color:rgba(246,139,30,.2)}
::selection{background:linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%);color:#fff}
.hub-header{border-bottom:0!important;box-shadow:0 2px 6px rgba(0,0,0,.1)!important}
.hub-header-brand span{letter-spacing:.02em}
.hub-header-menu{background:linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%)!important;border-color:#f68b1e!important;border-radius:8px!important}
.hub-header-menu:hover,.hub-header-menu[aria-expanded="true"]{background:#e07400!important}
.hub-header-links{border-color:#e6e6e6!important;border-radius:10px!important;box-shadow:0 12px 32px rgba(0,0,0,.2)!important}
.hub-header-links a{background:#fafafa!important;border-color:#e6e6e6!important;color:#282828!important;border-radius:8px!important}
.hub-header-links a:hover,.hub-header-links a:focus{background:#fff1de!important;border-color:#f68b1e!important}
.hub-header-links a[aria-current="page"]{background:linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%)!important;border-color:#f68b1e!important;color:#fff!important}
.hub-backbar{background:#fff!important;border-bottom:1px solid #e6e6e6!important}
.hub-back-btn{border-radius:8px!important;border-color:#d0d0d0!important}
.hub-back-btn:hover{background:#fff1de!important;border-color:#f68b1e!important}
.hub-acct-link{border-radius:8px!important}