/* Anvil & Hammer Agency — responsive.css
   Shared mobile/tablet layout overrides. Typography tokens live in typography.css. Pages use inline styles, so rules here use !important
   and attribute selectors. Loaded after each page's own <style> block. */

/* The `hidden` attribute must win over inline display:flex (thank-you panels, swapped forms). */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,video,svg,canvas,iframe{max-width:100%}
.tag{white-space:nowrap}
input,select,textarea{max-width:100%}
button,a,label.chip{-webkit-tap-highlight-color:transparent}

/* Shared mobile navigation */
.mobile-menu-toggle,.mobile-header-cta,.mobile-menu,.mobile-menu-backdrop{display:none}
.site-header .mobile-menu .mobile-menu-cta{display:none}
@media (max-width:900px){
  .site-header{position:relative!important;z-index:10!important;background:#121110}
  .site-header .header-inner{flex-wrap:nowrap!important;gap:12px!important;padding:16px 20px!important}
  .site-header .header-logo{min-width:0;margin-right:auto}
  .site-header .header-logo img{width:auto;max-width:100%;height:44px!important}
  .site-header .desktop-nav{display:none!important}
  .site-header .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid #34302B;border-radius:10px;background:transparent;color:#F2ECE3;cursor:pointer}
  .site-header .mobile-menu-toggle svg{width:22px;height:22px}
  .site-header .mobile-menu-toggle .close-icon{display:none}
  .site-header.is-menu-open .mobile-menu-toggle{background:#1F1C19}
  .site-header.is-menu-open .mobile-menu-toggle .menu-icon{display:none}
  .site-header.is-menu-open .mobile-menu-toggle .close-icon{display:block}
  .site-header .mobile-header-cta{display:none}
  .site-header .mobile-menu:not([hidden]){display:block;position:absolute;top:100%;left:0;width:100%;max-height:calc(100dvh - 77px);overflow-y:auto;overscroll-behavior:contain;padding:8px 10px 20px;background:#1B1916;border-bottom:1px solid #34302B}
  .site-header .mobile-menu a{display:flex;align-items:center;min-height:51px;padding:12px 14px;border-bottom:1px solid #34302B;color:#F2ECE3;text-decoration:none;font-size:var(--text-body);font-weight:500;line-height:1.5}
  .site-header .mobile-menu a[aria-current="page"]{border-left:3px solid #E8475A;padding-left:11px}
  .site-header .mobile-menu a:hover{color:#E8475A;background:#211E1A}
  .mobile-menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.35)}
  .site-header :is(a,button):focus-visible{outline:2px solid #E8475A;outline-offset:-3px}
}
@media (min-width:601px) and (max-width:900px){
  .site-header .mobile-header-cta{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:0 16px;border-radius:6px;background:#BE1E2D;color:#fff;text-decoration:none;font-size:var(--text-label);font-weight:700;white-space:nowrap}
}
@media (max-width:600px){
  .site-header .mobile-menu .mobile-menu-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:14px;padding:0 16px;border:0;border-radius:6px;background:#BE1E2D;color:#fff;font-size:var(--text-small);font-weight:700;text-align:center}
}
@media (max-width:380px){
  .site-header .header-inner{padding:14px 12px!important;gap:8px!important}
  .site-header .header-logo img{height:36px!important}
  .site-header .mobile-menu .mobile-menu-cta{padding:0 10px;font-size:var(--text-small)}
}

/* ---------- Tablet and below ---------- */
@media (max-width:1199px){
  [style*="flex: 1 1 520px"][style*="padding-top: 12px"]{padding-top:0!important}
  .fact{padding:24px 15px!important}
  [style*="max-width: 1392px"][style*="padding: 44px 24px"]{padding:30px 15px!important}
  .about-wrap {
    gap: 50px !important;
  }
  .about-content {
    padding-top: 0 !important;
  }
  .py-90 {
    padding:70px 15px !important;
  }
  .chap{padding:70px 0px 48px!important}
  [style*="padding: 80px 24px"],[style*="padding: 88px 24px"],[style*="padding: 96px 24px"],[style*="padding: 104px 24px"],
  [style*="padding: 112px 24px"],[style*="padding: 120px 24px"],[style*="padding: 128px 24px"]{padding-top:50px!important}
  [style*="padding: 80px 24px"],[style*="padding: 88px 24px"],[style*="padding: 96px 24px"],[style*="padding: 104px 24px"],
  [style*="padding: 112px 24px"],[style*="padding: 120px 24px"],[style*="padding: 128px 24px"]{padding-bottom:50px!important}
  [style*="padding: 80px 24px"],[style*="padding: 88px 24px"],[style*="padding: 96px 24px"],[style*="padding: 104px 24px"],
  [style*="padding: 112px 24px"],[style*="padding: 120px 24px"],[style*="padding: 128px 24px"]{padding-left:15px!important;padding-right:15px!important}
  [style*="padding-top: 80px"],[style*="padding-top: 88px"],[style*="padding-top: 96px"],[style*="padding-top: 104px"],
  [style*="padding-top: 112px"],[style*="padding-top: 120px"],[style*="padding-top: 128px"],
  [style*="padding: 56px 24px 120px"],[style*="padding: 104px 24px 64px"]{padding-top:50px!important}
  [style*="padding-bottom: 80px"],[style*="padding-bottom: 88px"],[style*="padding-bottom: 96px"],[style*="padding-bottom: 104px"],
  [style*="padding-bottom: 112px"],[style*="padding-bottom: 120px"],[style*="padding-bottom: 128px"],
  [style*="padding: 56px 24px 120px"],[style*="padding: 104px 24px 64px"]{padding-bottom:50px!important}
  [style*="padding: 40px 24px 56px"]{padding:30px 15px!important}
  [style*="gap: 72px"],[style*="gap: 64px"],[style*="gap: 56px"],[style*="gap: 48px"],[style*="gap: 40px 72px"],
  [style*="gap: 32px 56px"],[style*="gap: 56px 28px"],[style*="gap: 48px 72px"]{gap:32px!important}
  [style*="margin-bottom: 64px"],[style*="margin-bottom:64px"],
  [style*="margin-bottom: 56px"],[style*="margin-bottom:56px"]{margin-bottom:30px!important}
  [style*="margin-top: 48px"],[style*="margin-top:48px"]{margin-top:30px!important}
  [style*="margin: 0px 0px 56px"],[style*="margin: 0 0 56px"]{margin-bottom:30px!important}
  section[aria-label="Project details"]{margin-top:24px!important}
}
@media (max-width:1097px){
  .about-wrap {
    gap: 30px !important;
  }
  .about-content {
    padding-top: 0 !important;
  }
}
@media (max-width:1024px){
  .wrap{padding-left:15px!important;padding-right:15px!important}
}
@media (max-width:900px){
  .py-90 {
    padding:60px 15px !important;
  }
  .chap{padding:60px 0px 48px!important}
  div[style*="max-width: 1320px"],div[style*="max-width:1320px"]{padding-left:15px!important;padding-right:15px!important}
  [style*="gap: 72px"],[style*="gap: 64px"],[style*="gap: 56px"],[style*="gap: 40px 72px"],[style*="gap: 32px 56px"],[style*="gap: 48px 72px"]{gap:32px!important}
  .hero-section {
      min-height: 660px !important;
  }
  .explore-card .card {
    flex: 1 1 50% !important;
    padding: 30px !important;
  }
  .explore-card .card:nth-child(2) {
    border: none !important;
  }
  [style*="padding: 48px 40px"]{padding:30px 15px!important}
}



/* ---------- Phones ---------- */
@media (max-width:640px){
  /* Header / navigation: compact and wrapping */
  header > div[style*="max-width"]{padding:16px 20px!important;gap:14px!important}
  header img{height:44px!important}
  header nav{gap:10px 18px!important;width:100%}
  header nav a[href="#form"],header nav a[style*="min-height"]{min-height:40px!important;padding:0 16px!important}
  header > div[style*="max-width"] > div{gap:12px 16px!important;font-size:var(--text-label)!important}

  /* Boxed panels / forms / cards */
  [style*="padding: 48px 40px"]{padding:20px 15px!important}
  [style*="padding: 44px 40px"],[style*="padding: 56px 48px"],[style*="padding: 48px 44px"],
  [style*="padding: 40px 36px 44px"]{padding:28px 15px!important}
  [style*="padding: 40px 36px"]{padding:20px!important}
  [style*="gap: 56px"],[style*="gap: 64px"],[style*="gap: 72px"],[style*="gap: 40px 72px"],[style*="gap: 32px 56px"],
  [style*="gap: 48px 72px"],[style*="gap: 56px 28px"],[style*="gap: 24px 56px"],[style*="gap: 20px 48px"]{gap:28px!important}
  [style*="gap: 40px"]{gap:20px!important}

  .hero-section {
      min-height: 85dvh !important;
      padding-bottom: 50px !important;
  }

  .py-90 {
    padding:50px 15px !important;
  }
  .chap{padding:50px 0px 38px!important}

  /* Tag / chip rows wrap instead of running off-screen */
  .tag{white-space:normal}
  .tags,div:has(> .tag){flex-wrap:wrap!important;gap:8px!important}

  /* Contact detail strip: stack, no side borders */
  section[aria-label="Contact details"] a,section[aria-label="Contact details"] > div > div{border-right:0!important;border-bottom:1px solid #34302B;padding:22px 20px!important}

  /* Questionnaires */
  .qsec{padding:20px 0!important}
  .qsec > div:first-child{gap:12px!important;flex-wrap:wrap}
  .qsec h2{min-width:0}
  .chip{min-height:44px!important;padding:0 12px!important;max-width:100%}
  .js-thanks{min-height:320px!important}

  /* Buttons go full-width for easy thumb taps */
  form button[type="submit"]{width:100%;justify-content:center}
  form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),form select,form textarea{min-height:48px}
  form textarea{min-height:120px}

  /* Footer */
  footer div[style*="max-width"]{padding-left:20px!important;padding-right:20px!important}
}

/* ---------- Small phones (iPhone SE / 320–360px) ---------- */

.social-links .social-icon{border:1.5px solid #BE1E2D}

@media (max-width:575px){
  .social-links{gap:8px!important;align-items:center;border:0!important}
  .social-links .social-icon{box-sizing:border-box;width:48px!important;height:48px!important;min-width:48px;padding:0!important;flex:0 0 48px;align-items:center;justify-content:center;border:1.5px solid #BE1E2D!important}
  .social-links .social-icon svg{display:block;width:18px;height:18px;max-width:none;flex:0 0 auto}
  .explore-card .card {
        flex: 1 1 100% !important;
        padding: 30px 0px !important;
        border-bottom: 1px solid rgb(52, 48, 43) !important;
  }
  .explore-card .card:nth-child(1),.explore-card .card:nth-child(2), .explore-card .card:nth-child(3) {
        border: none !important;
        border-bottom: 1px solid rgb(52, 48, 43) !important;
  }
}

/* Project cards: 3 columns through tablet landscape, 2 on larger screens, 1 on phones. */
.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:991px){
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .inspiration-grid>.insp{flex:1 1 calc(50% - 6px)!important}
}
@media (max-width:767px){
  .h1 {
    font-size: 60px !important;
  }
}
@media (max-width:575px){
  .projects-grid{grid-template-columns:minmax(0,1fr)!important}
  .inspiration-grid>.insp{flex:1 1 100%!important}
}

@media (min-width:601px) and (max-width:800px){
  .pn{flex:1 1 calc(50% - 8px)!important}
}
@media (max-width:600px){
  .pn{flex:1 1 100%!important}
}

@media (max-width:659px){
  .idx{padding:26px 10px!important}
  .idx:nth-child(2),.idx:nth-child(4){border-right:0!important}
}

@media (max-width:450px){
  .idx{border-right:0!important}
}

@media (max-width:380px){
  header img{height:38px!important}
  header nav{gap:8px 14px!important}
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}