/* The Texas Laser Services website. The brand's colours and fonts are the channel's (channels.theme): red #E11B22,
   Oswald for headings, Lato for text. No script and no inline style anywhere, so the policy can forbid both. */

/* The fonts are the site's own (Google Fonts' Latin files, SIL Open Font License), preloaded by the layout. Until they
   arrive the text is set in Arial sized to take the same room, so nothing moves when they swap in (Rhett, 21 October
   2026: the quality page's headings shifted the page by 0.15 to 0.16 of a screen). The fallbacks' sizes were measured
   against the real fonts in Chrome: the total width of the site's own 116 headings and 120 paragraphs in each, and
   each font's ascent and descent. Arial Bold stands in for Oswald, whose 600 and 700 are the only weights used. */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url('/fonts/oswald-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/lato-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/lato-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald Fallback'; font-weight: 400 600;
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
    size-adjust: 77.55%; ascent-override: 153.45%; descent-override: 37.4%; line-gap-override: 0%; }
@font-face { font-family: 'Oswald Fallback'; font-weight: 700 900;
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
    size-adjust: 79.02%; ascent-override: 150.59%; descent-override: 36.7%; line-gap-override: 0%; }
@font-face { font-family: 'Lato Fallback'; font-weight: 100 600;
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 97.13%; ascent-override: 101.92%; descent-override: 21.62%; line-gap-override: 0%; }
@font-face { font-family: 'Lato Fallback'; font-weight: 700 900;
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
    size-adjust: 90.03%; ascent-override: 109.97%; descent-override: 23.33%; line-gap-override: 0%; }

:root {
    --red: #E11B22;
    --red-dark: #B5141A;
    --ink: #111111;
    --grey: #555555;
    --line: #DDDDDD;
    --paper: #FFFFFF;
    --mist: #F4F4F4;
    --night: #141414;
    --head: 'Oswald', 'Oswald Fallback', sans-serif;
    --body: 'Lato', 'Lato Fallback', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-dark); }
a:hover { color: var(--red); }
h1, h2, h3 { font-family: var(--head); font-weight: 600; text-transform: uppercase; line-height: 1.1; letter-spacing: .01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--paper); padding: 8px 12px; }

.btn { display: inline-block; padding: .65em 1.2em; background: var(--red); color: #FFFFFF; font: 600 1rem/1.2 var(--head); text-transform: uppercase;
    letter-spacing: .04em; text-decoration: none; border: 2px solid var(--red); }
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #FFFFFF; }
.btn-big { font-size: 1.15rem; padding: .8em 1.5em; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); color: inherit; border-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header */
.top { border-bottom: 1px solid var(--line); background: var(--paper); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand img { width: 160px; }
.bar { display: none; }
.menu summary { cursor: pointer; list-style: none; font: 600 1rem/1 var(--head); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border: 2px solid var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--ink); color: #FFFFFF; }
.menu nav { position: absolute; left: 0; right: 0; top: 77px; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; padding: 8px 16px 16px; }
.menu nav a { padding: 12px 0; font: 600 1.1rem/1 var(--head); text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu nav a.btn { margin-top: 12px; text-align: center; color: #FFFFFF; border-bottom: 2px solid var(--red); }
.top { position: relative; }
@media (min-width: 900px) {
    .menu { display: none; }
    .bar { display: flex; align-items: center; gap: 22px; }
    .bar a { font: 600 .95rem/1 var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); text-decoration: none; }
    .bar a:hover, .bar a[aria-current="page"] { color: var(--red); }
    .bar a.btn { color: #FFFFFF; }
    .bar a.btn[aria-current="page"] { color: #FFFFFF; }
    .bar .phone { color: var(--grey); }
    .brand img { width: 200px; }
}

/* Hero and page heads */
.hero { color: #FFFFFF; background: #000000 url('/img/hero.jpg') center / cover no-repeat; position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .65) 55%, rgba(0, 0, 0, .25) 100%); }
.hero .wrap { position: relative; padding-top: 72px; padding-bottom: 72px; }
.hero h1 { max-width: 8.15em; } /* 15 of Oswald's figures; in em, so the fallback font breaks the lines where Oswald will */
.hero .lead { max-width: 38em; font-size: 1.2rem; }
.kicker { font: 600 .95rem/1.2 var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--red); margin-bottom: .8em; }
.hero .kicker { color: #FF5A5F; }
.lead { font-size: 1.15rem; }
.page-head { background: var(--night); color: #FFFFFF; }
.page-head .wrap { padding-top: 56px; padding-bottom: 48px; }
.page-head .kicker { color: #FF5A5F; }
.page-head h1 { max-width: 11.95em; } /* 22 of Oswald's figures, in em for the same reason */
.page-head .lead { max-width: 40em; color: #E8E8E8; }
.page-head a { color: #FFFFFF; }
@media (min-width: 900px) { .hero .wrap { padding-top: 120px; padding-bottom: 120px; } }

/* Facts */
.facts { background: var(--red); color: #FFFFFF; }
.facts-grid { display: grid; grid-template-columns: 1fr; gap: 18px; padding-top: 24px; padding-bottom: 24px; }
.facts-grid div { display: flex; flex-direction: column; }
.facts-grid strong { font: 700 1.9rem/1.1 var(--head); }
.facts-grid span { font-size: .98rem; }
.facts-grid a { color: #FFFFFF; }
@media (min-width: 640px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .facts-grid { grid-template-columns: repeat(4, 1fr); } }

/* Bands */
.band { padding: 56px 0; }
.band-grey { background: var(--mist); }
.band-dark { background: var(--night); color: #FFFFFF; }
.band-dark a { color: #FFFFFF; }
.split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.prose { max-width: 40em; }
.side-img { width: 100%; }
.note { color: var(--grey); font-size: .95rem; }
.band-dark .note { color: #CCCCCC; }

/* Cards */
.cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card { border: 1px solid var(--line); background: var(--paper); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card h3, .card p { padding: 0 18px; }
.card h3 { margin-top: 18px; }

/* Tables and lists */
.spec { width: 100%; border-collapse: collapse; margin-bottom: 1em; background: var(--paper); }
.spec th, .spec td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec thead th { font: 600 .9rem/1.2 var(--head); text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--ink); }
.spec tbody th { font-weight: 700; }
.ticks, .kit { padding: 0; margin: 0 0 1em; list-style: none; }
.ticks li, .kit li { position: relative; padding: 0 0 .7em 26px; }
.ticks li::before, .kit li::before { content: ''; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; background: var(--red); }
.kit { display: grid; grid-template-columns: 1fr; gap: 4px 40px; }
@media (min-width: 900px) { .kit { grid-template-columns: 1fr 1fr; } }
.steps { padding-left: 1.4em; margin: 0 0 1.2em; }
.steps li { margin-bottom: .6em; }

/* Testimonial */
.quote { margin: 0; padding: 28px; background: var(--mist); border-left: 6px solid var(--red); }
.quote blockquote { margin: 0 0 1em; font-size: 1.2rem; }
.quote figcaption { font-weight: 700; }

/* Gauges */
.gauges { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0 28px; }
@media (min-width: 800px) { .gauges { grid-template-columns: repeat(3, 1fr); } }
.gauge { display: flex; flex-direction: column; gap: 4px; padding: 22px; background: #1F1F1F; border-top: 4px solid var(--red); }
.gauge-label { font: 600 1rem/1.2 var(--head); text-transform: uppercase; letter-spacing: .06em; }
.gauge > strong { font: 700 3rem/1 var(--head); }
.gauge-target { color: #FF8A8E; font-weight: 700; font-size: .95rem; }
.gauge-how { color: #CCCCCC; font-size: .95rem; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1000px) { .contact { grid-template-columns: 2fr 1fr; } }
.rfq { width: 100%; height: 1760px; border: 0; }
@media (min-width: 600px) { .rfq { height: 1250px; } }
.contact-side { padding: 24px; background: var(--mist); align-self: start; }
.cert { width: 270px; margin-top: 12px; }

/* Call to action and footer */
.call { background: var(--red); color: #FFFFFF; }
.call-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 36px; padding-bottom: 36px; }
.call-row p { margin: 0; font: 600 1.5rem/1.2 var(--head); text-transform: uppercase; }
.call .btn { background: var(--paper); color: var(--red-dark); border-color: var(--paper); }
.call .btn-ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.foot { background: var(--night); color: #DDDDDD; font-size: .95rem; }
.foot a { color: #FFFFFF; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 40px; padding-bottom: 24px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } }
.foot-name { font: 600 1.2rem/1.2 var(--head); text-transform: uppercase; color: #FFFFFF; }
.foot-cert img { width: 220px; background: #FFFFFF; padding: 8px; }
.foot-legal { padding-bottom: 28px; color: #999999; font-size: .85rem; }

/* Added for the home page: the intro under a heading, the hero's optional video, and the questions. */
.intro { max-width: 46em; margin-bottom: 1.5em; }
.hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { z-index: 1; }
.hero .wrap { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font: 600 1.1rem/1.3 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.faq details p { margin: 0 0 16px; }

/* The quality page, as the WordPress page drew it: the red "We prove it", the section index, the tolerance bands
   narrowing as they tighten, the thickness tiles, the cut-sequence diagram (a wide and a narrow drawing), the
   callout, the numbered list beside its pull quote, the PPAP chips, and the gauge bars. */
:root { --green: #46D07F; --amber: #E0A94A; --panel: #0E0E10; --panel-line: #2A2A2E; --muted: #9A9A9E; }
.redbox { display: inline-block; margin-top: .15em; padding: .05em .3em; background: var(--red); color: #FFFFFF; }
.q-head .wrap:first-child { padding-bottom: 32px; }
.q-head .lead { color: #DDDDDD; }
.idx { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--panel-line); border-top: 1px solid var(--panel-line); }
.idx a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; background: var(--night); color: #FFFFFF; text-decoration: none; }
.idx a:hover { background: #1E1E20; }
.idx .n { font: 600 .8rem/1 var(--head); color: var(--red); letter-spacing: .08em; }
.idx strong { font: 600 1rem/1.2 var(--head); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.idx a span:last-child { color: var(--muted); font-size: .85rem; }
@media (min-width: 700px) { .idx { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .idx { grid-template-columns: repeat(6, 1fr); } }
.q-kicker span { color: var(--ink); margin-right: .4em; }
.band-dark .q-kicker span, .ppap .q-kicker span { color: #FFFFFF; }
.q-kicker::before { content: ''; display: inline-block; width: 28px; height: 3px; background: var(--red); vertical-align: middle; margin-right: 12px; }

.tol { background: var(--panel); color: #FFFFFF; padding: 18px 20px 8px; margin: 8px 0 20px; }
.tol-head { display: flex; justify-content: space-between; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--panel-line);
    font: 600 .8rem/1 var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.tol-row { padding: 12px 0; border-bottom: 1px solid #1C1C1F; }
.tol-row:last-child { border-bottom: 0; }
.tol-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.tol-name { font-size: .95rem; }
.tol-val { font: 700 1.3rem/1 var(--head); color: var(--green); white-space: nowrap; }
.tol-val.q { color: var(--amber); font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.tol-track { position: relative; height: 12px; background: #050506; border-radius: 2px; overflow: hidden; }
.tol-track::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .35); z-index: 1; }
.tol-band { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(70, 208, 127, .14), rgba(70, 208, 127, .5), rgba(70, 208, 127, .14)); }
.tol-band.q { background: linear-gradient(90deg, rgba(224, 169, 74, .12), rgba(224, 169, 74, .4), rgba(224, 169, 74, .12)); }
.w94 { width: 94%; } .w52 { width: 52%; } .w30 { width: 30%; } .w15 { width: 15%; }

.thick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 10px; }
.thick div { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--paper); }
.thick span { font: 600 .78rem/1 var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--grey); }
.thick strong { font: 700 1.8rem/1 var(--head); }
@media (min-width: 700px) { .thick { grid-template-columns: repeat(5, 1fr); } }

.seq { margin: 8px 0 24px; padding: 24px 24px 16px; background: var(--panel); }
.seq svg { width: 100%; height: auto; }
.seq-narrow { display: none; }
@media (max-width: 640px) { .seq-wide { display: none; } .seq-narrow { display: block; } .seq { padding: 18px 16px 12px; } }
.seq figcaption { margin-top: 10px; text-align: center; font: 600 .78rem/1.4 var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.callout { max-width: 46em; padding: 4px 0 4px 20px; border-left: 4px solid var(--red); }

.pair { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 800px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair-card { padding: 22px; background: var(--paper); border-top: 3px solid var(--red); }
.pair-kicker { font: 600 .78rem/1 var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--red); margin-bottom: .8em; }

.numbered { list-style: none; margin: 0; padding: 0; }
.numbered li { display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); }
.numbered li span:first-child { font: 600 .9rem/1.6 var(--head); color: var(--red); }
.pull { margin: 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--red); font: 600 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--head); text-transform: uppercase; }

.ppap { padding: 32px 28px; background: var(--night); color: #FFFFFF; border-left: 6px solid var(--red); }
.ppap p { max-width: 46em; color: #DDDDDD; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 18px 0 0; list-style: none; }
.chips li { padding: 8px 12px; border: 1px solid #3A3A3E; font: 600 .8rem/1 var(--head); text-transform: uppercase; letter-spacing: .06em; }

.numbers-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.numbers-head h2 { max-width: 18em; }
.live { margin: 0 0 1.4em; font: 600 .85rem/1 var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--green); }
.live::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--green); }
.numbers-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .85rem; }
.gauge > strong small { font-size: .45em; margin-left: .1em; color: #CCCCCC; }
.gauge-bar { width: 100%; height: 6px; margin: 6px 0 2px; }
.gauge-why { color: #FFFFFF; font-size: .95rem; margin-top: 6px; }

.test { background: var(--red); color: #FFFFFF; text-align: center; }
.test .wrap { padding-top: 56px; padding-bottom: 56px; }
.test h2 { font-size: clamp(2rem, 5vw, 3rem); }
.test p { max-width: 36em; margin-left: auto; margin-right: auto; }
.test .actions { justify-content: center; }
.btn-white { background: #FFFFFF; color: var(--red-dark); border-color: #FFFFFF; }
.btn-white:hover { background: #F0F0F0; border-color: #F0F0F0; color: var(--red-dark); }
.test .btn-ghost { color: #FFFFFF; }