/* Martin Tate — site styles. Most layout lives inline in the templates, matching the design canvas. */
body{margin:0;background:#ffffff}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
::selection{background:var(--c-selection);color:var(--c-primary-dark)}
a{color:var(--c-primary)}a:hover{color:var(--c-accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--c-accent-light);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--c-primary);color:#fff;padding:12px 16px;z-index:50}
.skip-link:focus{left:16px;top:16px;color:#fff}

/* Header */
.mt-hdr{background:#ffffff;border-bottom:1px solid #E3E6EB;position:sticky;top:0;z-index:20;transition:background-color .9s ease,border-color .9s ease}
.mt-hdr.is-scrolled{background:var(--c-accent);border-color:var(--c-accent)}
.mt-hdr-row{max-width:1200px;margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.mt-logo{position:relative;display:block;width:182px;height:48px}
.mt-logo img,.mt-logo .logo-svg{position:absolute;left:0;top:0;height:48px;width:auto;display:block;transition:opacity .9s ease,transform .9s ease}
/* Header logo: two traced SVG layers used as masks, so "Martin" and the tagline take the palette's primary colour and "Tate" its light accent */
.mt-logo .logo-svg{aspect-ratio:591/156}
.logo-svg > span{position:absolute;inset:0;-webkit-mask:var(--logo-mask) center/100% 100% no-repeat;mask:var(--logo-mask) center/100% 100% no-repeat}
.logo-svg .logo-ink{--logo-mask:url(/images/site/logo-ink.svg);background:var(--c-primary)}
.logo-svg .logo-accent{--logo-mask:url(/images/site/logo-accent.svg);background:var(--c-logo-accent,var(--c-accent-light))}
.mt-logo .logo-color{opacity:1;transform:translateY(0)}
.mt-logo .logo-bug{opacity:0;transform:translateY(6px)}
.is-scrolled .mt-logo .logo-color{opacity:0;transform:translateY(-6px)}
.is-scrolled .mt-logo .logo-bug{opacity:1;transform:translateY(0)}
.mt-nav{display:flex;flex-wrap:wrap;gap:4px 32px;align-items:center;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mt-nav a{color:var(--c-primary);text-decoration:none;padding:12px 0;border-bottom:2px solid transparent;transition:color .9s ease,border-color .9s ease,opacity .2s ease}
.mt-nav a:hover{opacity:.7;color:var(--c-primary)}
.mt-nav a[aria-current="page"]{border-bottom-color:var(--c-accent-light)}
.is-scrolled .mt-nav a{color:#ffffff}
.is-scrolled .mt-nav a[aria-current="page"]{border-bottom-color:#ffffff}
.mt-menu-btn{display:none;width:44px;height:44px;padding:0;border:0;background:transparent;align-items:center;justify-content:center;cursor:pointer;color:var(--c-primary)}
.is-scrolled .mt-menu-btn{color:#ffffff}

/* Footer */
footer nav a:hover{opacity:.75;color:#ffffff}

/* Components */
.bio-chip{transition:background .15s,border-color .15s}
.bio-chip:hover{background:var(--c-tint-hover);border-color:var(--c-accent-light) !important}
.pa-card{transition:background .15s,border-color .15s,box-shadow .15s}
.pa-card:hover{background:var(--c-tint-hover) !important;border-color:var(--c-primary) !important;box-shadow:0 6px 18px color-mix(in srgb, var(--c-primary-dark) 8%, transparent)}
.pa-track::-webkit-scrollbar{display:none}
.news-card,.news-card span{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.news-card:hover,.news-card:focus-visible{background:var(--c-primary) !important;border-color:var(--c-primary) !important}
.news-card:hover span,.news-card:focus-visible span{color:#ffffff !important}
.news-feature{transition:background-color .25s ease}
.news-feature:hover{background:var(--c-tint-hover) !important}
.at-frame{position:relative;overflow:hidden}
.at-frame img,.at-frame .at-photo{transition:transform .5s ease}
.at-ov{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(180deg,color-mix(in srgb, var(--c-primary) 0%, transparent) 45%,color-mix(in srgb, var(--c-primary) 88%, transparent) 100%);opacity:0;transition:opacity .35s ease}
.at-ov span{color:#ffffff;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;transform:translateY(8px);transition:transform .35s ease}
.at-card:hover .at-frame img,.at-card:focus-visible .at-frame img{transform:scale(1.06)}
.at-card:hover .at-ov,.at-card:focus-visible .at-ov{opacity:1}
.at-card:hover .at-ov span,.at-card:focus-visible .at-ov span{transform:none}
.at-card:hover .at-name{text-decoration:underline}
.pa-att:hover .pa-att-name{text-decoration:underline}
.prose p{margin:0 0 1.1em;font-size:18px;line-height:1.75;color:#2A3442}
.prose p:last-child{margin-bottom:0}
.prose h2,.prose h3{font-family:'Source Serif 4',Georgia,serif;font-weight:400;color:var(--c-primary);margin:1.4em 0 .5em}
.prose ul,.prose ol{font-size:18px;line-height:1.75;color:#2A3442;padding-left:1.3em}
.placeholder{color:#5B6575 !important}
[hidden]{display:none !important}

@media (max-width: 760px){
  [style*="max-width: 1200px"]{padding-left:16px !important;padding-right:16px !important}
  .mt-hdr-row{flex-wrap:nowrap;padding-top:12px;padding-bottom:12px;position:relative}
  .mt-menu-btn{display:flex}
  .mt-nav{display:none}
  .mt-nav.is-open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#ffffff;border-bottom:1px solid #E3E6EB;padding:4px 16px 12px;box-shadow:0 12px 24px color-mix(in srgb, var(--c-primary-dark) 12%, transparent)}
  .mt-nav.is-open a{color:var(--c-primary) !important;padding:14px 0;border-bottom:1px solid #EEF0F3 !important}
  .mt-foot-offices{text-align:left !important}
  .mt-foot-offices > div{padding-left:0 !important;padding-right:24px !important;border-left:0 !important}
}
aside > div:last-child{border-bottom:0 !important}
/* Keep the footer at the bottom of the window on short pages */
.skip-link + div{min-height:100vh;display:flex;flex-direction:column}
#main{flex:1 0 auto}

/* Typefaces: Source Sans 3 for body text, Work Sans for headings, menus, buttons and names */
*{font-family:'Source Sans 3',system-ui,sans-serif !important}
h1,h2,h3,.mt-nav a,button,.at-name,.pa-att-name,.pa-card,[style*="Source Serif"],[style*="text-transform: uppercase"],a[download],a[style*="font-weight: 700"]{font-family:'Work Sans',system-ui,sans-serif !important}
h1,h2{font-weight:600 !important}

/* Accessibility: respect reduced-motion settings; sidebar panel spacing */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}}
.side-panel > div:last-child{border-bottom:0 !important}

/* News post: article with a right sidebar (date, attorneys in this story) */
.post-grid{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:64px;justify-content:space-between;align-items:start}
.post-side{display:flex;flex-direction:column;gap:28px;padding-left:32px;border-left:1px solid #E3E6EB;position:sticky;top:24px}
.post-side-block{display:flex;flex-direction:column;gap:12px}
.post-side-label{margin:0;font-size:13px !important;font-weight:700 !important;letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent)}
@media (max-width: 900px){
  .post-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .post-side{order:-1;position:static;padding:0 0 28px;border-left:0;border-bottom:1px solid #E3E6EB}
}

/* Homepage hero. Without the scroll effect (no JavaScript, or reduced motion) it is simply the photo
   followed by a navy block with the headline. With .is-live (added by site.js) the photo stays pinned,
   the headline block starts just below the screen and scrolls up over it, and --p (0 to 1) fades the navy in until it is solid. */
.hero-scroll{position:relative}
.hero-sticky{position:relative;overflow:hidden;height:62vh;min-height:360px}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}
/* Phones: center the crop on the right-hand glass door so the etched Martin Tate logo sits in the middle, with the door handle just out of frame */
@media (max-width: 760px){.hero-img{object-position:80% 55%}}
/* Hero video: centred crop (the walk-through is framed down the middle) */
.hero-video{object-position:center 50%;background:#1b1e22}
/* Hero photo of the glass doors: desktop shows both doors (perspective-corrected, left edge trimmed); phones get a
   separate crop of just the right-hand door, handle out of frame (see <picture> in index.njk) */
.hero-photo{object-position:center 50%}
@media (max-width: 760px){.hero-photo{object-position:center 45%}}
/* Still of the glass doors that the video cross-fades into when it ends (and that reduced-motion visitors see straight away) */
.hero-final{object-position:center 50%;opacity:0;transition:opacity 1.6s ease}
.hero-final.is-shown{opacity:1}
@media (max-width: 760px){.hero-video{object-position:center 50%}}
.hero-fill{position:absolute;inset:0;background:var(--c-primary);opacity:0;z-index:1}
.hero-cue{display:none;z-index:2}
.hero-text{position:relative;padding:72px 0 80px}
.hero-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid #ffffff;border-radius:4px;color:#ffffff !important;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;transition:background-color .2s ease,color .2s ease}
.hero-btn:hover,.hero-btn:focus-visible{background:#ffffff;color:var(--c-primary) !important}
.hero-scroll.is-live{--hh:calc(100vh - var(--hdr-h,66px))}
@supports (height:100svh){.hero-scroll.is-live{--hh:calc(100svh - var(--hdr-h,66px))}}
.hero-scroll.is-live .hero-sticky{position:sticky;top:var(--hdr-h,66px);height:var(--hh);min-height:0}
.hero-scroll.is-live .hero-fill{opacity:var(--p,0)}
.hero-scroll.is-live .hero-text{margin-top:0;min-height:calc(var(--hh) * 0.6);padding:0 0 72px;box-sizing:border-box}
.hero-scroll.is-live .hero-text > div{position:sticky;top:calc(var(--hdr-h,66px) + var(--hh) * 0.22)}
.hero-scroll.is-live .hero-cue{display:flex;flex-direction:column;align-items:center;gap:4px;position:absolute;right:32px;top:24px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 8px rgba(0,0,0,.6);opacity:calc(1 - var(--p,0) * 4)}
.hero-scroll.is-live .hero-cue svg{animation:hero-bob 1.6s ease-in-out infinite}
@keyframes hero-bob{50%{transform:translateY(5px)}}

/* Palette preview banner (only shown while previewing a palette from /palettes/) */
.palette-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;max-width:calc(100% - 32px);box-sizing:border-box;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;padding:12px 18px;background:#1F2733;color:#ffffff;font-size:15px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.palette-bar a{color:#ffffff;font-weight:700}

/* Homepage Rapid Response: an illustrated semi-truck, facing left (SVG viewBox 440 × 156). The cab is painted red
   (the Rapid Response red); the label sits centred on the white trailer (x 150–436, y 4–108). On hover or focus the
   truck rolls forward a little and its wheels turn (not for visitors who prefer reduced motion). */
.rr-truck{display:block;width:100%;max-width:440px;align-self:center;margin-top:12px;text-decoration:none;color:inherit;container-type:inline-size}
.rr-truck-figure{position:relative;display:block;width:100%;aspect-ratio:440/156;transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.rr-truck-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rr-truck-art .rr-cab-hi{stop-color:#E5554F}
.rr-truck-art .rr-cab-mid{stop-color:#C62828}
.rr-truck-art .rr-cab-lo{stop-color:#7E1414}
.rr-truck-art .rr-wheel{transform-origin:0 0;transition:transform .6s cubic-bezier(.3,.7,.3,1)} /* each wheel is drawn centred on its group origin */
.rr-truck-text{position:absolute;left:34.1%;top:2.6%;width:65%;height:66.7%;box-sizing:border-box;padding:0 4%;display:flex;align-items:center;justify-content:center}
.rr-truck-title{display:flex;align-items:center;gap:10px;font-family:'Work Sans',system-ui,sans-serif;font-weight:600;font-size:clamp(13px,4.2cqw,19px);line-height:1.25;color:var(--c-primary);text-align:left;text-wrap:balance}
.rr-truck-title svg{flex:none}
/* Clock as large as possible without making the three-line label wrap to a fourth line. Its size scales with the
   truck's width (cqw = 1% of the truck), fitted just under limits measured at every width from 250px to 1280px. */
.rr-truck-clock{width:max(0px,min(14.3cqw,calc((100cqw - 232px) * .55)));height:auto;aspect-ratio:1}
.rr-truck:hover .rr-truck-title,.rr-truck:focus-visible .rr-truck-title{text-decoration:underline;text-underline-offset:4px}
.rr-truck:hover .rr-truck-figure,.rr-truck:focus-visible .rr-truck-figure{transform:translateX(-10px)}
.rr-truck:hover .rr-wheel,.rr-truck:focus-visible .rr-wheel{transform:rotate(-90deg)}
@media (prefers-reduced-motion: reduce){.rr-truck-figure,.rr-truck-art .rr-wheel{transition:none}.rr-truck:hover .rr-truck-figure,.rr-truck:focus-visible .rr-truck-figure,.rr-truck:hover .rr-wheel,.rr-truck:focus-visible .rr-wheel{transform:none}}
.rr-truck:focus-visible{outline:2px solid var(--c-accent);outline-offset:6px;border-radius:6px}