/* Shared interior hero for the service and contact templates. */
.reference-template .hero-service .hero-grid {
  min-height: 558px;
  padding-block: 63px 130px;
}
.reference-template .hero-service h1 {
  font-size: clamp(45px, 4.7vw, 74px);
  line-height: 1.16;
}
.reference-template .hero-service .hero-image {
  opacity: .65;
  width: 56%;
}
.reference-template .hero-service .hero-copy>p {
  font-size: 14px;
  line-height: 1.9;
  max-width: 640px;
  min-height: 79.8px;
}
.reference-template .hero-service .context-strip{color:#D0D0C8;font-size:11px;line-height:1.8;margin-top:12px}
.reference-template .hero-service .context-strip strong{color:var(--accent)}
.reference-template .hero-service .context-strip .text-link{color:white;font-size:11px;min-height:25px}
.reference-template .hero-service .hero-actions .button{font-size:12px}

.reference-preparation{border-bottom:1px solid var(--line);padding-block:43px 40px}
.reference-preparation>.eyebrow{font-size:10px;line-height:1.7}
.reference-preparation>div{display:grid;gap:28px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:19px}
.reference-preparation p{font-size:12px;font-weight:700;line-height:1.7}

.reference-service-content{display:grid;gap:90px;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);padding-block:68px 70px;align-items:start}
.reference-service-content>aside{min-width:0}
.reference-service-content>aside>.eyebrow{font-size:10px;line-height:1.7}
.reference-service-content>aside>h2{font-size:38px;line-height:1.35;margin-top:15px;font-weight:850}
.reference-service-content>aside>p{color:var(--muted);font-size:12px;line-height:1.9;margin-top:24px}
.reference-service-content>aside>.button{margin-top:25px;min-height:52px;font-size:12px;gap:20px}
.reference-service-articles{min-width:0}
.reference-service-articles .guide-article{border-top:0;border-bottom:1px solid var(--line);margin:0 0 28px;padding:0 0 29px;scroll-margin-top:110px}
.reference-service-articles .guide-article:last-child{margin-bottom:0}
.reference-service-articles .guide-article h2{font-size:24px;line-height:1.35;margin:0;font-weight:800}
.reference-service-articles p{color:var(--muted);font-size:13px;line-height:1.9;margin:16px 0 0}
.reference-service-articles .guide-article p.source-note{font-size:11px;line-height:1.9;margin-top:20px}
.reference-service-content.reference-service-supplement {
  padding-block-start: 0;
}
.reference-service-supplement .reference-service-articles>p:first-child {
  margin-block-start: 0;
}
.service-index{border-top:1px solid var(--line);margin-top:25px;padding-top:15px}
.service-index>summary{display:flex;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;font-size:11px;line-height:1.8;color:var(--accent-ink)}
.service-index>summary::-webkit-details-marker{display:none}.service-index>summary::after{content:'+';font-family:Arial,sans-serif}.service-index[open]>summary::after{content:'−'}
.service-index .page-breadcrumb{width:100%;padding-block:15px;font-size:10px;gap:10px}
.service-index .page-index{position:static;top:auto;padding:0;border:0;background:transparent;margin-top:8px}
.service-index .page-index>p{font-size:10px;margin-bottom:6px}
.service-index .page-index>a{font-size:11px;padding:9px 0;min-height:35px}

.service-faq-background{background:var(--surface)}
.page-service-detail.reference-template .service-faq-background .faq-open{background:transparent}
.page-service-detail.reference-template .service-faq-background .f-heading h2{font-size:38px;line-height:1.35;max-width:430px}
.page-service-detail.reference-template .service-faq-background .faq-open>.shell{display:grid;align-items:start}
.page-service-detail .service-faq-background .f-heading{grid-column:1}
.page-service-detail .service-faq-background .home-faq-list{grid-area:1/2}
.page-service-detail .service-faq-background .faq-entry summary{min-block-size:24px}
.reference-related{padding-block:44px 45px}
.reference-related>.eyebrow{font-size:10px;line-height:1.7}
.reference-related>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:19px}
.reference-related a{display:flex;align-items:center;background:white;border:1px solid var(--line);font-size:11px;line-height:1.8;padding:9px 13px}
.reference-related a:hover{background:#F5EAE2}
.page-service-detail.reference-template .closing h2{font-size:38px;line-height:1.35;max-width:780px}
.page-service-detail.reference-template .closing h2+p{font-size:12px;line-height:1.8;margin-top:16px;max-width:610px}
.reference-template:is(.page-service-detail, .page-contact) .closing .closing-actions>.button {
  min-width: 245px;
  min-height: 52px;
  font-size: 12px;
  background: var(--deep);
  border-color: var(--deep);
  color: white;
}
.reference-template:is(.page-service-detail, .page-contact) .closing .hero-phone {
  display: block;
  color: var(--deep);
  font-size: 12px;
  line-height: 1.8;
  font-weight: 700;
  margin-block-start: 16px;
}
.reference-template:is(.page-service-detail, .page-contact) .closing .hero-phone small {
  display: inline;
  color: inherit;
  font-size: 10px;
  margin-inline-end: 8px;
}

.reference-contact-info .contact-details {
  margin-block: 14px 8px;
}
.reference-contact-info .contact-details>div {
  border-color: var(--line);
  padding-block: 13px;
}
.reference-contact-info .contact-details dd {
  color: var(--deep);
  font-size: 13px;
  line-height: 1.9;
}
.reference-contact-info .contact-inquiry-link {
  margin-block-start: 16px;
}
.reference-contact-breadcrumb {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
  margin-block-start: 20px;
}
.reference-contact-breadcrumb a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media(min-width:1600px){.reference-template .hero-service .hero-grid{min-height:590px}}
@media(max-width:1150px){.reference-template .hero-service h1{font-size:58px}.reference-service-content{gap:55px}.reference-service-content>aside>h2{font-size:35px}}
@media(max-width:820px){
 .reference-template .hero-service .hero-grid{min-height:530px;padding-block:46px 126px}
 .reference-template .hero-service .hero-image{opacity:.35;width:100%}
 .reference-template .hero-service h1{font-size:clamp(44px,6.8vw,62px)}
 .reference-template .hero-service .hero-copy>p{max-width:470px;font-size:14px}
 .reference-preparation>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .reference-service-content{grid-template-columns:1fr;gap:35px;padding-block:48px}
 .reference-service-content>aside>h2{font-size:35px}
 .reference-service-content>aside>p{margin-top:15px;max-width:650px}
 .reference-service-content>aside>.button{margin-top:20px}
 .reference-service-articles .guide-article h2{font-size:24px}
 .page-service-detail.reference-template .service-faq-background .f-heading h2{font-size:35px;max-width:none}
 .page-service-detail .service-faq-background .home-faq-list{grid-area:auto/1}
 .reference-related{padding-block:36px}
 .page-service-detail.reference-template .closing h2{font-size:35px}
}
@media(max-width:480px){
 .reference-template .hero-service .hero-grid{min-height:560px;padding-block:36px 113px}
 .reference-template .hero-service h1{font-size:clamp(34px,9.5vw,45px);line-height:1.18}
 .reference-template .hero-service .hero-copy>p{font-size:13px;line-height:1.85;max-width:340px;min-height:96.2px}
 .reference-template .hero-service .hero-actions .button{font-size:11px;padding:13px 14px;min-width:220px}
 .reference-preparation{padding-block:32px 29px}.reference-preparation p{font-size:11px}
 .reference-service-content>aside>h2{font-size:32px}
 .reference-service-articles .guide-article h2{font-size:22px}.reference-service-articles p{font-size:12px}
 .page-service-detail.reference-template .service-faq-background .f-heading h2{font-size:32px}
 .reference-related>div{gap:8px}.reference-related a{font-size:10px;padding:8px 10px}
 .page-service-detail.reference-template .closing h2{font-size:31px}.page-service-detail.reference-template .closing h2+p{font-size:11px}
}

/* The stock and parts pages use the same photographic treatment as the service pages. */
:is(.page-catalog-hub,.page-catalog) .catalog-hero {
  position:relative;
  isolation:isolate;
  padding-block:63px 72px;
  color:#fff;
  background:var(--deep);
}
:is(.page-catalog-hub,.page-catalog) .catalog-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 auto 0 0;
  width:56%;
  background:linear-gradient(270deg,var(--deep),#11131540),url("media/automatic.webp") center/cover;
}
:is(.page-catalog-hub,.page-catalog) .catalog-hero h1 {
  color:inherit;
  max-width:700px;
  font-size:clamp(45px,4.7vw,74px);
  line-height:1.16;
}
:is(.page-catalog-hub,.page-catalog) .catalog-hero h1 em { color:var(--accent); }
:is(.page-catalog-hub,.page-catalog) .catalog-hero :is(.page-kicker,.page-lead) {
  color:#d2d2c6;
  max-width:495px;
}
.page-catalog .catalog-hero .text-link { color:#fff; }
@media(max-width:820px){
  :is(.page-catalog-hub,.page-catalog) .catalog-hero { padding-block:46px 56px; }
  :is(.page-catalog-hub,.page-catalog) .catalog-hero::before {
    width:100%;
    background-image:linear-gradient(270deg,#111315e8,#111315a6),url("media/automatic.webp");
  }
}
@media(max-width:480px){
  :is(.page-catalog-hub,.page-catalog) .catalog-hero { padding-block:36px 44px; }
  :is(.page-catalog-hub,.page-catalog) .catalog-hero h1 { font-size:clamp(34px,9.5vw,45px); }
}