* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --mist: #f3f5f8;
    --mist-deep: #e4e8ee;
    --white: #ffffff;
    --ink: #15171c;
    --ink-soft: #474b55;
    --line: rgba(21, 23, 28, 0.14);
    --night: #0f1b2e;
    --sun: #febe12;
    --sun-light: #ffd257;
    --rust: #ad3a08;
    /* Logo light colours */
    --blue: #2a84c6;
    --purple: #893f98;
    --magenta: #e0156a;
    --orange: #f15822;
    /* Same stops as the underline beneath STARLIGHT in the logo */
    --stripe: linear-gradient(90deg, #2a84c6 0%, #893f98 24%, #ed196f 49%, #f15822 76%, #febe12 100%);
    /* Header toggle and quote button height: the logo's, but at least 44px for touch */
    --row-h: max(44px, var(--logo-h));
    /* Standard spacing step, set per breakpoint below; the header's top and bottom padding and the hero's gaps */
    --hero-gap: 10px;
    --gutter: 16px;
    /* Header thumb slide on a page change */
    --swap: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Header logo height */
    --logo-h: 40px;
    /* Hero logo width; the lighting seam lines derive their thickness from it */
    --logo-w: min(380px, 100vw - 2 * var(--gutter));
    /* Logo underline thickness at that width: 9.96 of the logo's 660.25 */
    --line-w: calc(var(--logo-w) * 9.96 / 660.25);
    --font: 'Archivo', Arial, sans-serif;
    --radius: 8px;
    --card-shadow: 0 1px 2px rgba(21, 23, 28, 0.04), 0 6px 20px rgba(21, 23, 28, 0.06);
    color-scheme: light;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--mist);
    overflow-x: hidden;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
}

.container {
    width: min(1280px, 100% - 2 * var(--gutter));
    margin: 0 auto;
}

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

h1 {
    font-weight: 800;
}

h2 {
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
}

.eyebrow {
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rust);
}

.muted {
    color: var(--ink-soft);
}

mark {
    padding: 0 0.06em;
    background: linear-gradient(transparent 62%, var(--sun) 62% 90%, transparent 90%);
    color: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Canadian flag: square corners, thin edge so the white shows on light backgrounds */
.flag {
    display: inline-block;
    height: 1.05em;
    width: auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.location {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 54px;
    padding: 0 1.6rem;
    border: 2px solid var(--ink);
    border-radius: 3px;
    font: 700 1.05rem var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

/* Header tabs and buttons act as buttons: no link drag, text selection or mobile tap flash */
.btn,
.nav-links a {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary {
    border-color: var(--sun);
    background: var(--sun);
    color: var(--ink);
}

.btn:focus-visible,
.slider-arrow:focus-visible,
.cross-link:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

.nav-links a:focus-visible {
    outline: 2px solid var(--sun);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (hover: hover) {
    .btn-primary:hover:not(:disabled) {
        border-color: var(--sun-light);
        background: var(--sun-light);
    }

    .nav-links a:not([aria-current]):hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--white);
    }

    .slider-arrow:hover {
        background: var(--sun);
        color: var(--ink);
    }

    .footer-links a:hover,
    .cross-link:hover {
        text-decoration-color: var(--sun);
    }
}

/* Header: the navy block at the top of the page: the logo, toggle and quote button, the hero and the motif row,
   above a thin logo gradient line */
.site-header {
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--night);
    color: var(--white);
}

.site-header::after {
    content: "";
    display: block;
    height: 3px;
    background: var(--stripe);
}

/* Logo on the left, then the toggle and the quote button on the right */
.header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: var(--hero-gap);
}

.brand {
    flex: none;
}

.brand img {
    width: auto;
    height: var(--logo-h);
}

.brand:focus-visible {
    outline: 2px solid var(--sun);
    outline-offset: 4px;
}

.header-quote {
    min-height: 0;
    height: var(--row-h);
    padding: 0 0.85rem;
    border-radius: calc(var(--row-h) * 0.18);
    font-size: 0.95rem;
    white-space: nowrap;
}

.header-quote:focus-visible {
    outline: 2px solid var(--sun-light);
    outline-offset: 2px;
}

.quote-long {
    display: none;
}

/* Segmented toggle: Lighting and Roofing as equal halves of a translucent track, sized to the text. The white thumb
   is a separate element so it can slide to the current page's half. */
.nav-links {
    --pad: calc(var(--row-h) * 0.07);
    --rad: calc(var(--row-h) * 0.18);
    position: relative;
    flex: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: var(--row-h);
    padding: var(--pad);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--rad);
    background: rgba(255, 255, 255, 0.06);
}

.nav-highlight {
    position: absolute;
    top: var(--pad);
    bottom: var(--pad);
    left: var(--pad);
    width: calc(50% - var(--pad));
    border-radius: calc(var(--rad) - var(--pad) + 1px);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 10px rgba(0, 0, 0, 0.25);
    transition: transform var(--swap);
}

.site-header[data-page="roofing"] .nav-highlight {
    transform: translateX(100%);
}

.nav-links a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: calc(var(--rad) - var(--pad) + 1px);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    font-weight: 600;
    text-decoration: none;
    color: #c3cad6;
    transition: background-color 0.2s, color 0.2s;
}

/* Each half's tap area covers the track padding and border too */
.nav-links a::after {
    content: "";
    position: absolute;
    inset: calc(-1px - var(--pad)) 0;
}

.nav-links a:first-of-type::after {
    left: calc(-1px - var(--pad));
}

.nav-links a:last-of-type::after {
    right: calc(-1px - var(--pad));
}

.nav-links a[aria-current="page"] {
    color: var(--night);
}

/* Hero: the headline and the two lines under it */
.hero {
    display: grid;
}

.hero .flag {
    box-shadow: none;
}

.hero mark {
    padding: 0;
    background: none;
    color: var(--sun);
}

.hero h1 {
    line-height: 1.05;
}

/* Always exactly two lines */
.hero h1 span {
    display: block;
    white-space: nowrap;
}

/* Motif row: one cell per light (lighting) or roof tile (roofing). Each cell holds both shapes (::before is the
   light, ::after the tile) and data-page on the row picks which shows. script.js builds the cells and shifts the
   first one by a whole pixel count so the row stays centred without half-pixel edges. */
.header-motif {
    --cell: 20px;
    --dot: 9px;
    display: flex;
    overflow-x: clip;
}

.header-motif > span {
    position: relative;
    flex: none;
    width: var(--cell);
}

.header-motif > span:first-child {
    margin-left: var(--shift, 0px);
}

.header-motif > span::before,
.header-motif > span::after {
    content: "";
    position: absolute;
}

/* White lights with a soft glow */
.header-motif > span::before {
    top: 50%;
    left: 50%;
    width: var(--dot);
    height: var(--dot);
    margin: calc(var(--dot) / -2);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.3);
}

/* The logo's roof tiles, long and short in turn, traced from the SVG logo (a long and short pair spans two cells).
   The shape box runs a whole 8px past each side of the cell so Firefox draws it the same animating and at rest.
   The short tile sits 1% of a cell left of the logo so the steep and slanted gaps look equally thick. */
.header-motif > span::after {
    top: 0;
    bottom: 0;
    left: -8px;
    width: calc(var(--cell) + 16px);
    background: #2c3b54;
    clip-path: polygon(calc(8px + 0.2661 * var(--cell)) 0, calc(8px + 1.299 * var(--cell)) 0,
        calc(8px + 0.9962 * var(--cell)) 100%, calc(8px - 0.299 * var(--cell)) 100%);
}

.header-motif > span:nth-child(even)::after {
    clip-path: polygon(calc(8px + 0.4223 * var(--cell)) 0, calc(8px + 1.1232 * var(--cell)) 0,
        calc(8px + 0.558 * var(--cell)) 100%, calc(8px + 0.1193 * var(--cell)) 100%);
}

.header-motif[data-page="lighting"] > span::after,
.header-motif[data-page="roofing"] > span::before {
    opacity: 0;
}

/* The showing shape keeps the layer a morph gives it, so Chrome draws it the same at rest as when the morph ends */
.header-motif[data-page="lighting"] > span::before,
.header-motif[data-page="roofing"] > span::after {
    will-change: transform;
}

/* Page change: each cell shrinks out as its counterpart grows in, with a quarter turn, staggered left to right
   (--step comes from script.js) */
.header-motif.morph > span::before,
.header-motif.morph > span::after {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-delay: calc(var(--i) * var(--step));
}

.header-motif.morph[data-page="roofing"] > span::before,
.header-motif.morph[data-page="lighting"] > span::after {
    animation-name: cell-out;
    animation-timing-function: ease-in;
}

.header-motif.morph[data-page="roofing"] > span::after,
.header-motif.morph[data-page="lighting"] > span::before {
    animation-name: cell-in;
    animation-timing-function: cubic-bezier(0.3, 1.4, 0.6, 1);
}

@keyframes cell-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: scale(0.3) rotate(45deg); }
}

@keyframes cell-in {
    from { opacity: 0; transform: scale(0.3) rotate(-45deg); }
    to { opacity: 1; transform: none; }
}

/* Galleries */
.galleries {
    position: relative;
    display: block;
    padding: calc(24px - var(--line-w)) 0 56px;
    background: var(--white);
}

/* On the lighting page, the logo gradient line where the gallery band meets the grey sections */
[data-page="lighting"] .galleries::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--line-w);
    background: var(--stripe);
}

.galleries[hidden] {
    display: none;
}

.gallery {
    padding: 32px 0;
}

/* Room for the galleries (three per page) until script.js builds them, so the sections below don't jump */
.galleries:empty {
    min-height: calc(3 * (60vh + 105px) + 80px);
    min-height: calc(3 * (60svh + 105px) + 80px);
}

.gallery-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 16px;
}

.gallery-head h2 {
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 600;
}

.gallery-count {
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    white-space: nowrap;
}

.gallery-empty {
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.slider.dragging {
    cursor: grabbing;
}

.slider-track {
    display: flex;
    gap: 10px;
    width: max-content;
}

.slide {
    height: 60vh;
    height: 60svh;
    max-width: 84vw;
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--mist-deep);
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: none;
    border-radius: var(--radius);
    background: rgba(21, 23, 28, 0.86);
    color: var(--white);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.slider-arrow.prev {
    left: var(--gutter);
}

.slider-arrow.next {
    right: var(--gutter);
}

/* Details */
.details {
    padding: 80px 0;
}

.perks,
.features {
    display: grid;
    gap: 16px;
}

.perk,
.feature,
.product,
.app {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--card-shadow);
}

.perk,
.feature {
    padding: 24px;
}

.perk h3,
.feature h3 {
    margin: 1rem 0 0.4rem;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.perk p,
.feature p {
    font-size: 1rem;
    color: var(--ink-soft);
}

/* Tinted square with the icon in the logo colour */
.perk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--c) 12%, var(--white));
    color: var(--c);
    font-size: 1.15rem;
}

.blue { --c: var(--blue); }
.purple { --c: var(--purple); }
.magenta { --c: var(--magenta); }
.orange { --c: var(--orange); }

.product,
.app {
    display: grid;
    margin-top: 48px;
    overflow: hidden;
}

.product-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: radial-gradient(circle at 50% 50%, #3a3360 0%, var(--night) 62%);
}

.product-media img {
    width: min(78%, 340px);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(254, 190, 18, 0.18), 0 0 80px rgba(254, 190, 18, 0.35);
}

.product-body,
.app-body {
    padding: 32px 24px;
}

.product-body h3,
.app-body h3 {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.product-body > .muted {
    margin-top: 0.75rem;
}

.specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 1.75rem;
}

.specs li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--mist);
}

.specs strong {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Colour dot in the logo colour */
.specs strong::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c);
}

.specs span {
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--ink-soft);
}

/* Two spec tiles side by side overflow the card on the narrowest phones */
@media (max-width: 379px) {
    .specs {
        grid-template-columns: 1fr;
    }
}

.app-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 1.5rem;
}

.app-title .eyebrow {
    margin-bottom: 0.3rem;
}

.app-icon {
    width: 72px;
    flex: none;
    border-radius: 16px;
}

.check-list {
    display: grid;
    gap: 0.25rem 1.5rem;
}

.check-list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 2.1rem;
    border-bottom: 1px solid var(--line);
}

.check-list li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 0.68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--sun);
    color: var(--ink);
    font-family: "Font Awesome 6 Free";
    font-size: 0.7rem;
    font-weight: 900;
}

.app-media {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 32px 24px 0;
    background: var(--mist-deep);
}

.app-media img {
    width: min(62%, 240px);
}

/* Quote */
.quote {
    position: relative;
    padding: 80px 0;
    background: var(--night);
    color: var(--white);
}

.quote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--stripe);
}

.quote-grid {
    display: grid;
    gap: 36px;
    align-items: start;
}

.quote .eyebrow {
    color: var(--sun);
}

.quote-intro h2 {
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.quote-lead {
    max-width: 40ch;
    margin-top: 1rem;
    font-size: 1.1rem;
    color: #d3d9e3;
}

.cross-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

.cross-link i {
    color: var(--sun);
}

.quote-form {
    padding: 24px 20px;
    border-radius: 12px;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.quote-form .btn {
    border-radius: var(--radius);
}

.form-note {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 14px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.form-note i {
    color: var(--blue);
}

.form-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    border: none;
}

.field-full {
    grid-column: 1 / -1;
}

.field label,
.field legend {
    font-size: 0.9rem;
    font-weight: 600;
}

.field legend {
    margin-bottom: 0.4rem;
}

.req {
    color: var(--rust);
}

.field input,
.field textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid #c9ccd3;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    font: 1rem var(--font);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.field textarea {
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #61646d;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(42, 132, 198, 0.3);
}

.field input.invalid {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.chips {
    display: flex;
    gap: 10px;
}

.chip {
    position: relative;
}

.chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.chip-body {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid #c9ccd3;
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.chip input:checked + .chip-body {
    background: var(--night);
    border-color: var(--night);
    color: var(--white);
}

.chip input:checked + .chip-body::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8em;
    color: var(--sun);
}

.chip input:focus-visible + .chip-body {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

/* Web3Forms honeypot: must stay invisible to humans */
.quote-form .botcheck {
    display: none;
}

/* Captcha (303x78) and submit button share one row on wider screens */
.form-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.quote-form .h-captcha {
    align-self: center;
    /* The widget's size, kept free while its script loads */
    min-height: 78px;
}

.quote-form .h-captcha iframe {
    display: block;
}

.form-message {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
}

.form-message.success {
    background: #e3f3e7;
    color: #1e6b34;
}

.form-message.error {
    background: #fbe5e7;
    color: #a12a35;
}

/* Footer */
.site-footer {
    padding: 48px 0 calc(96px + env(safe-area-inset-bottom, 0px));
    background: var(--mist);
}

.footer-row {
    display: grid;
    gap: 28px;
    justify-items: start;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    font-weight: 600;
}

.footer-links a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s;
}

.footer-meta {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--ink-soft);
}

/* Floating quote button, shown while neither the header quote button nor the form is on screen */
.quote-fab {
    position: fixed;
    right: var(--gutter);
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(21, 23, 28, 0.28);
    transform: translateY(160%);
    visibility: hidden;
    transition: transform 0.3s, visibility 0.3s, background-color 0.2s;
}

.quote-fab.show {
    transform: none;
    visibility: visible;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 20, 30, 0.94);
    cursor: zoom-out;
}

.lightbox img {
    max-width: 100%;
    max-height: 90vh;
    cursor: default;
}

.close-lightbox {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: var(--radius);
    background: var(--sun);
    color: var(--ink);
    font-size: 1.2rem;
    cursor: pointer;
}

@media (min-width: 560px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .quote-form {
        padding: 32px;
    }

    .form-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .quote-form .h-captcha {
        flex: 0 0 auto;
        align-self: auto;
        min-width: 303px;
    }

    .quote-form .quote-submit {
        flex: 1 1 200px;
        min-height: 78px;
    }

    .specs li {
        padding: 14px 16px;
    }

    .specs span {
        font-size: 1rem;
    }
}

@media (min-width: 720px) {
    :root {
        --gutter: 32px;
        --logo-w: 460px;
    }

    .slide {
        height: clamp(360px, 70vh, 780px);
        max-width: 88vw;
    }

    .galleries:empty {
        min-height: calc(3 * (clamp(360px, 70vh, 780px) + 108px) + 80px);
    }

    .slider-arrow {
        width: 56px;
        height: 56px;
        margin-top: -28px;
    }

    .perks {
        grid-template-columns: repeat(3, 1fr);
    }

    .features {
        grid-template-columns: 1fr 1fr;
    }

    .check-list {
        grid-template-columns: 1fr 1fr;
    }

    .footer-row {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 48px;
    }

    .footer-meta {
        text-align: right;
    }
}

@media (min-width: 960px) {
    :root {
        --logo-w: min(540px, (min(1280px, 100vw - 2 * var(--gutter)) - 64px) / 2);
    }

    .galleries {
        padding: calc(40px - var(--line-w)) 0 72px;
    }

    .galleries:empty {
        min-height: calc(3 * (clamp(360px, 70vh, 780px) + 112px) + 112px);
    }

    .details,
    .quote {
        padding: 112px 0;
    }

    .product,
    .app {
        grid-template-columns: 1fr 1fr;
        margin-top: 72px;
    }

    .product-body,
    .app-body {
        padding: 56px;
        align-self: center;
    }

    .app-media {
        padding: 56px 56px 0;
    }

    .features {
        grid-template-columns: repeat(4, 1fr);
    }

    .quote-grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 72px;
    }

    .quote-intro {
        position: sticky;
        top: 48px;
    }
}

/* Header and hero sizing, one block per breakpoint. --hero-gap is the padding above and below the header row and
   the gap below the motif. */

/* Phones (under 600px): the hero is just the headline, centred */
.hero {
    justify-items: center;
    padding-block: 8px 16px;
    text-align: center;
}

.hero h1 {
    font-size: clamp(1.5rem, 7.5vw, 2rem);
}

.hero .location,
.hero-sub {
    display: none;
    line-height: 1.4;
}

.hero .location {
    font-weight: 400;
    color: #9aa4b4;
}

.hero .location .flag {
    margin-left: 0.3em;
    vertical-align: -0.15em;
}

.hero-sub {
    color: #c3cad6;
}

.nowrap {
    white-space: nowrap;
}

/* Cell pitch and row height keep the logo's tile proportions (a pair is about 2.72 times as wide as it is tall),
   in whole pixels so the tile edges stay crisp */
.header-motif {
    height: 15px;
    margin-bottom: var(--hero-gap);
}

/* Narrow phones: a smaller logo and tighter controls so the row fits */
@media (max-width: 379px) {
    :root {
        --logo-h: 33px;
    }

    .header-row {
        gap: 6px;
    }

    .nav-links a {
        padding: 0 4px;
        font-size: 0.85rem;
    }

    .header-quote {
        padding: 0 0.4rem;
        font-size: 0.85rem;
    }
}

/* Tablets and up (600px and up): the full hero, left-aligned */
@media (min-width: 600px) {
    :root {
        --hero-gap: 16px;
        --logo-h: 48px;
    }

    .header-row {
        gap: 24px;
    }

    .nav-links a {
        padding: 0 16px;
        font-size: max(0.85rem, var(--row-h) * 0.32);
    }

    .header-quote {
        padding: 0 1.1rem;
        font-size: max(0.85rem, var(--row-h) * 0.32);
    }

    .hero {
        justify-items: start;
        padding-block: 20px 24px;
        text-align: left;
    }

    .hero h1 {
        font-size: 1.9rem;
    }

    .hero .location,
    .hero-sub {
        display: block;
        max-width: 60ch;
    }

    .hero .location {
        margin-top: 12px;
        font-size: 0.95rem;
    }

    .hero-sub {
        margin-top: 6px;
        font-size: 1.0625rem;
    }
}

/* Laptops (960px and up) */
@media (min-width: 960px) {
    :root {
        --logo-h: 57px;
    }

    .header-row {
        gap: 32px;
    }

    .quote-long {
        display: inline;
    }

    .quote-short {
        display: none;
    }

    .hero {
        padding-block: 22px 26px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero .location {
        margin-top: 12px;
        font-size: 1rem;
    }

    .hero-sub {
        font-size: 1.125rem;
    }
}

/* Desktops (1280px and up): bigger lights and tiles */
@media (min-width: 1280px) {
    :root {
        --hero-gap: 18px;
        --logo-h: 62px;
    }

    .hero {
        padding-block: 24px 28px;
    }

    .hero h1 {
        font-size: 2.75rem;
    }

    .header-motif {
        --cell: 25px;
        --dot: 11px;
        height: 19px;
    }
}

/* Short landscape screens (phones on their side): slimmer header, headline only, small logo and lights */
@media (max-height: 500px) {
    :root {
        --row-h: var(--logo-h);
        --hero-gap: 6px;
        --logo-h: 35px;
    }

    .hero {
        padding-block: 4px 10px;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero .location,
    .hero-sub {
        display: none;
    }

    .header-quote {
        font-size: 0.85rem;
    }

    .header-motif {
        --cell: 18px;
        --dot: 8px;
        height: 13px;
    }
}

/* Page changes: the hero copy and the page below fade out while the next page loads, then fade back in */
.transition-fade {
    transition: opacity 0.25s ease-out;
}

html.is-leaving .transition-fade {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .nav-highlight,
    .quote-fab,
    .transition-fade {
        transition: none;
    }
}