/* ============================================================
   York Studios — PHONE LAYOUT SHEET (max-width: 767px)
   Loaded after main.css + york.css. The Agntix template has no
   composed phone layout (it only stacks desktop blocks), so this
   file IS the mobile design. One rhythm, applied to every section.

   SPEC
   Gutter ........ 20px page edge
   Rhythm ........ section padding 48px · block gap 24px · sub gap 12px
   Type .......... page title 40px · section title 34px · item title 30px
                   tile title 22px · body 17px/1.6 · small 14px
   Alignment ..... everything left-aligned except the footer wordmark
   Buttons ....... full width, stacked, 12px apart
   Footer ........ one compact stack: line · links · contact · wordmark · legal
   ============================================================ */
@media (max-width: 767px) {

  /* ---- Global rhythm ---- */
  .container, .container-1430, .container-1610, .container-1830 { padding-left: 20px; padding-right: 20px; }
  h1, h2, h3, h4 { letter-spacing: -0.02em; }
  p { font-size: 17px; line-height: 1.6; }

  /* ---- HEADER: visible page links instead of a hamburger (Stuart 2026-09-17: the three-line icon is unreadable on a phone) ---- */
  .tp-header-area .container-fluid > .row { flex-wrap: wrap; }
  .tp-header-area .col-xl-8.d-none { display: block !important; flex: 0 0 100%; max-width: 100%; order: 3; }
  .tp-header-box { justify-content: stretch !important; }
  .tp-header-menu { width: 100%; }
  .tp-header-menu > nav > ul { display: flex; margin: 0; padding: 6px 0 0; border-top: 1px solid rgba(255,255,255,.12); }
  .tp-header-menu > nav > ul > li { flex: 1; margin: 0; text-align: center; }
  .tp-header-menu > nav > ul > li > a { display: block; padding: 12px 0; font-size: 16px; font-weight: 600; color: #fff; }
  .tp-header-menu > nav > ul > li > a.is-current { color: var(--york-gold); }
  .tp-header-bar { display: none; }                       /* hamburger + off-canvas retired on phones */
  .tp-header-area .col-xl-2:first-child { flex: 0 0 100%; max-width: 100%; }   /* logo row spans the width */
  .tp-header-area .col-xl-2:last-child { display: none; }                        /* right column is empty on phones */
  .tp-header-logo { text-align: center; }
  .tp-header-logo img { width: 125px !important; max-width: none; }                                           /* centred, 20% larger (Stuart 2026-09-17) */
  /* page tops sit under the taller (two-row) header */
  .york-hero-wrap, .tp-contact-us-ptb { padding-top: 140px !important; }
  .tp-breadcrumb-ptb { padding-top: 150px !important; }

  /* ---- HOME: hero ---- */
  .york-clients { margin: 20px auto 0; padding: 12px 0; }
  .york-hero-actions { padding: 24px 0 0; }
  .york-hero-h1 { font-size: 34px; line-height: 1.1; margin-bottom: 12px; }
  .york-hero-sub { font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
  .york-hero-btns { flex-direction: column; gap: 12px; }
  .york-hero-btns .york-btn { width: 100%; text-align: center; padding: 16px 20px; }

  /* ---- HOME: services ---- */
  .creative-service-area { padding-top: 48px !important; padding-bottom: 24px !important; }
  .creative-service-area .tp-section-title { font-size: 34px; line-height: 1.1; margin-bottom: 8px; }
  .creative-service-area .tp-btn-black-filter-blur { margin: 12px 0 24px; }
  .creative-service-item { padding-top: 20px; padding-bottom: 24px; }
  .creative-service-content { flex-direction: column; }
  .creative-service-content > span { margin: 0 0 6px; font-size: 14px; display: block; min-width: 0; transform: none; }
  .creative-service-title { font-size: 30px; margin-bottom: 10px; }
  .creative-service-category { row-gap: 8px; }
  .creative-service-category span { font-size: 15px; line-height: 1.4; }
  .creative-service-link { display: none; }              /* arrow circle: the title is already the link */

  /* ---- PORTFOLIO ---- */
  /* Filter tabs: 2-column grid of equal buttons, 16px text, 48px tap targets (Stuart 2026-09-17: wrapped 14px pills unreadable) */
  .tp-portfolio-inner-tab-wrap nav .nav-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px; font-weight: 600; line-height: 1.2; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; border-color: rgba(255,255,255,.25); }
  .tp-portfolio-heading.pb-30 { padding-bottom: 8px; }
  .tp-blog-title.fs-100 { font-size: 40px; }
  .tp-portfolio-inner-box.pb-100 { padding-bottom: 16px; }
  .tp-portfolio-inner-ptb.pb-70 { padding-bottom: 24px; }
  .tp-portfolio-inner-item.mb-65 { margin-bottom: 32px; }
  .tp-portfolio-inner-title.fs-30 { font-size: 22px; line-height: 1.25; margin-top: 12px; margin-bottom: 4px; }
  .tp-portfolio-inner-content span.york-tile-sub { font-size: 14px; margin-top: 2px; }
  .york-blurb { padding: 0 0 24px; }
  .york-blurb p { font-size: 17px; line-height: 1.6; margin-bottom: 14px; }
  .york-capabilities { padding: 0; }
  .york-capabilities li { font-size: 16px; padding: 8px 0; }

  /* ---- CONTACT ---- */
  .tp-contact-us-ptb { padding-bottom: 24px; }
  .tp-contact-us-bottom { display: none; }                /* "Scroll to explore" is desktop furniture */
  .tp-contact-us-ptb .ar-about-us-4-hero-ptb { padding-top: 0; }   /* template 150px void above the heading */
  .tp-career-title { font-size: 40px !important; line-height: 1.05; margin-bottom: 16px; }
  .tp-contact-us-form-ptb.pt-60 { padding-top: 0; }
  .tp-contact-us-form-ptb.pb-120 { padding-bottom: 48px; }
  .york-contact-details { padding: 24px 20px !important; font-size: 17px; margin-bottom: 24px !important; height: auto !important; }
  .york-contact-details p { color: rgba(255,255,255,.85); }
  .york-contact-details .mb-15 { margin-bottom: 8px; }
  .york-contact-details .mb-40 { margin-bottom: 16px; }
  .tp-contact-us-title.mb-30 { margin-bottom: 16px; }
  .tp-contact-us-title.mb-55 { margin-bottom: 20px; font-size: 26px; }
  .tp-contact-us-title { font-size: 26px; }

  /* ---- FOOTER: one compact stack ---- */
  .creative-footer-style { margin: 12px; padding: 0 20px; border-radius: 16px; }
  .creative-footer-area { padding-top: 40px !important; padding-bottom: 8px !important; }
  .tp-footer-widget { padding-bottom: 24px !important; margin-bottom: 0 !important; }
  .tp-footer-widget-title { font-size: 30px; line-height: 1.1; margin-bottom: 0; letter-spacing: -0.03em; }
  .tp-footer-widget-title br { display: none; }
  .tp-footer-widget-title-sm { font-size: 14px; margin-bottom: 12px !important; }
  .tp-footer-widget-menu ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .tp-footer-widget-menu ul li a { padding: 10px 16px; font-size: 13px; }
  .tp-footer-widget-info { margin-bottom: 6px; }
  .tp-footer-widget-info a, .tp-footer-widget-info span { font-size: 16px; line-height: 1.5; }
  .tp-copyright-area { padding-top: 8px; }
  .york-footer-logo img { width: 60%; }
  .tp-copyright-bottom { margin-top: 12px; padding-bottom: 24px; }
  .tp-copyright-left, .tp-copyright-right { text-align: center !important; font-size: 14px; }
  .tp-copyright-right { margin-top: 6px; }
  .back-to-top-wrapper { bottom: 16px; right: 16px; }
}