/* ==========================================================================
   Jalam Enviro Solutions — site.css

   Design direction: the bore log. Hydrogeology's native artifact is the
   vertical section, so depth is the organising idea of the page rather than
   another row of cards. Colours are taken from Deccan Trap stratigraphy (the
   basalt Mumbai actually sits on) instead of generic water-blue.

   This is the only stylesheet. All eleven pages load it via partials/head.html.
   ========================================================================== */

/* ===== Fonts ============================================================= */

/* Self-hosted, latin subset, woff2. Bricolage and Plex Sans ship from Google
   as variable fonts, so each is one file instanced to the weight range this
   site actually uses (600-700 and 400-600), which is where most of the saving
   comes from: 156 KB -> 124 KB.

   Bricolage keeps its optical-size axis on purpose. Pinning opsz took it to
   34.5 KB, but the wider low-opsz cut made the hero headline wrap to three
   lines instead of two. 26 KB is not worth degrading the largest type on the
   site. Plex Mono has no variable version on Google Fonts, hence two files.

   Paths resolve from this stylesheet, not from the page that loads it. */

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* ===== Tokens ============================================================ */

:root {
    /* Rock — the dark ground, from basalt */
    --rock:        #16201e;
    --rock-2:      #22302d;
    --rock-3:      #35463f;

    /* Groundwater — the accent. Water in rock, not water in a swimming pool.
       --aquifer is 4.38:1 on paper: fine for focus rings and graphics (3:1)
       but short of the 4.5:1 needed behind button text, so solid buttons use
       --aquifer-lo (6.51:1) and deepen to --aquifer-deep on hover. */
    --aquifer:      #0e7c74;
    --aquifer-lo:   #0a5f59;
    --aquifer-deep: #084b47;
    --aquifer-hi:   #48c6b3;

    /* Murum — the weathered laterite band. Strata graphics only, never text:
       #a8603a is 4.13:1 on paper, which clears 3:1 for graphics but not 4.5:1.
       --murum-soft was #c98a63 (2.49:1) and failed even as a rail, so it is
       darkened to #b8764c (3.17:1). */
    --murum:       #a8603a;
    --murum-soft:  #b8764c;

    /* Paper — cool mineral off-white, the dominant surface */
    --paper:       #eeefeb;
    --paper-2:     #e4e6e0;
    --paper-3:     #d6d9d1;

    --ink:         #121917;
    --ink-soft:    #4c5a56;
    /* Was #7c8783, which came out at 3.22:1 on paper - under AA for the small
       mono labels this is used on. #5e6764 clears 4.5:1 on both paper tints. */
    --ink-faint:   #5e6764;

    --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Fluid type scale */
    --t-display: clamp(2.6rem, 1.6rem + 4.2vw, 5.1rem);
    --t-h2:      clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
    --t-h3:      clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
    --t-lead:    clamp(1.05rem, 0.98rem + 0.36vw, 1.28rem);
    --t-body:    1rem;
    --t-small:   0.875rem;
    --t-micro:   0.75rem;

    --shell:     1220px;
    --gutter:    clamp(1.15rem, 0.6rem + 2.2vw, 2.5rem);
    --band-y:    clamp(4rem, 2.5rem + 6vw, 7.5rem);
    --nav-h:     74px;

    /* Light-only design. Declaring it stops the browser rendering form
       controls and scrollbars in dark chrome on a dark-mode OS. */
    color-scheme: light;

    --edge:      1px solid var(--paper-3);
    --edge-dark: 1px solid rgba(255, 255, 255, 0.12);

    --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===== Base ============================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Any explicit display value beats the UA's [hidden] rule, so a grid or flex
   element stays visible when JS sets .hidden = true. This puts that back. */
[hidden] {
    display: none !important;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

ul,
ol {
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--aquifer);
    outline-offset: 3px;
    border-radius: 2px;
}

/* The navbar is sticky, so an anchor target would otherwise land underneath
   it. Applies to services.html#cgwa-noc and friends, and to the skip link. */
[id] {
    scroll-margin-top: calc(var(--nav-h) + 1.25rem);
}

a,
button,
summary,
label,
select,
input,
textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(14, 124, 116, 0.18);
}

.container {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    /* Safe-area insets keep the dark full-bleed bands clear of a notch in
       landscape; max() so the normal gutter still applies everywhere else. */
    padding-inline: max(var(--gutter), env(safe-area-inset-left))
                    max(var(--gutter), env(safe-area-inset-right));
}

.band {
    padding-block: var(--band-y);
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1200;
    background: var(--ink);
    color: var(--paper);
    padding: 0.7rem 1.1rem;
    font-size: var(--t-small);
    font-weight: 500;
    transition: top 0.2s var(--ease);
}

.skip-link:focus {
    top: 1rem;
}

/* Shared type helpers */

.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aquifer-lo);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: currentColor;
    flex: none;
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.022em;
    max-width: 20ch;
    margin-top: 1.1rem;
}

.section-lead {
    font-size: var(--t-lead);
    color: var(--ink-soft);
    max-width: 58ch;
    margin-top: 1.1rem;
}

/* ===== Buttons =========================================================== */

.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-edge: var(--ink);

    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.92rem 1.5rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-edge);
    font-family: var(--font-body);
    font-size: var(--t-small);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s var(--ease), background 0.18s var(--ease),
                color 0.18s var(--ease);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn--primary {
    --btn-bg: var(--aquifer-lo);
    --btn-edge: var(--aquifer-lo);
}

.btn--primary:hover {
    --btn-bg: var(--aquifer-deep);
    --btn-edge: var(--aquifer-deep);
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-edge: var(--ink);
}

.btn--ghost:hover {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
}

.btn--onrock {
    --btn-bg: var(--paper);
    --btn-fg: var(--ink);
    --btn-edge: var(--paper);
}

.btn .arw {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.18s var(--ease);
}

.btn:hover .arw {
    transform: translateX(3px);
}

/* ===== Navigation ======================================================== */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: var(--edge);
    transition: border-color 0.25s var(--ease);
}

.navbar.is-scrolled {
    border-bottom-color: var(--paper-3);
    box-shadow: 0 1px 18px rgba(18, 25, 23, 0.07);
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--nav-h);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}

.logo img {
    height: 38px;
    width: auto;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.05;
    text-transform: none;
    color: var(--ink);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.3rem + 1.6vw, 2.1rem);
}

.nav-menu a {
    position: relative;
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    padding-block: 0.4rem;
    transition: color 0.18s var(--ease);
}

.nav-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--aquifer);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s var(--ease);
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--ink);
}

.nav-menu a.active::after,
.nav-menu a:hover::after {
    transform: scaleX(1);
}

/* ----- Services submenu ------------------------------------------------- */

.nav-sub {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.nav-sub-toggle {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ink-soft);
    cursor: pointer;
}

.nav-sub-toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s var(--ease);
}

.nav-sub-toggle:hover {
    color: var(--ink);
}

.nav-sub[data-open="true"] .nav-sub-toggle svg {
    transform: rotate(180deg);
}

.subnav {
    position: absolute;
    top: calc(100% + 0.55rem);
    /* Right-anchored: the nav sits at the right of a centred container, so a
       left-anchored panel runs off the viewport on narrower desktops. */
    right: -0.9rem;
    z-index: 1050;
    min-width: 20rem;
    max-width: calc(100vw - 2rem);
    padding: 0.4rem;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 16px 34px rgba(18, 25, 23, 0.14);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s var(--ease), transform 0.16s var(--ease),
                visibility 0.16s;
}

.nav-sub[data-open="true"] .subnav {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.subnav a {
    display: block;
    padding: 0.6rem 0.7rem;
    font-size: var(--t-small);
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.14s var(--ease), color 0.14s var(--ease);
}

.subnav a::after {
    display: none;
}

.subnav a:hover {
    background: var(--paper-2);
    color: var(--aquifer-lo);
}

.subnav-all {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: var(--edge);
}

.subnav-all a {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink);
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== Hero ============================================================== */

.hero {
    position: relative;
    background: var(--paper);
    border-bottom: var(--edge);
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3rem, 1.8rem + 5vw, 6rem);
}

.hero-title {
    font-family: var(--font-display);
    font-size: var(--t-display);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.032em;
    margin-top: 1.4rem;
    text-wrap: balance;
}

.hero-title .wet {
    color: var(--aquifer);
}

.hero-sub {
    font-size: var(--t-lead);
    color: var(--ink-soft);
    max-width: 46ch;
    margin-top: 1.5rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2.1rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.4rem;
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: var(--edge);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    text-transform: uppercase;
}

.hero-meta b {
    color: var(--ink);
    font-weight: 500;
}

/* ===== Bore log ========================================================== */

.borelog {
    width: 100%;
    height: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.figure-frame {
    position: relative;
    padding: clamp(1rem, 0.4rem + 1.8vw, 1.9rem);
    background: var(--paper-2);
    border: var(--edge);
}

.figure-cap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.bl-axis {
    stroke: var(--paper-3);
    stroke-width: 1;
}

.bl-tick-label {
    fill: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.04em;
}

.bl-band {
    transform-box: fill-box;
    transform-origin: top;
}

.bl-label {
    fill: var(--ink-soft);
    font-size: 11px;
    letter-spacing: 0.01em;
}

.bl-label--key {
    fill: var(--aquifer-lo);
    font-weight: 500;
}

.bl-leader {
    stroke: var(--paper-3);
    stroke-width: 1;
}

/* Two distinct levels. The shallow water table is the phreatic surface CGWB
   monitors in dug wells; the piezometric level is where water stands in a
   borewell tapping the deeper semi-confined zone. Different things, so they
   get different dash patterns and separate labels. */
.bl-water {
    stroke: var(--aquifer);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.bl-piezo {
    stroke: var(--aquifer-lo);
    stroke-width: 1.5;
    stroke-dasharray: 9 3 2 3;
}

.bl-rise {
    fill: none;
    stroke: var(--aquifer-lo);
    stroke-width: 1;
    opacity: 0.8;
}

.bl-water-fill {
    fill: var(--aquifer);
    opacity: 0.14;
}

/* Light enough that the murum band still reads as murum underneath it */
.bl-phreatic-fill {
    fill: var(--aquifer);
    opacity: 0.15;
}

.figure-note {
    margin-top: 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.67rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: var(--ink-faint);
}

.bl-strike {
    fill: none;
    stroke: var(--aquifer);
    stroke-width: 1.5;
}

.bl-strike-dot {
    fill: var(--aquifer);
}

/* Load sequence: strata settle downward, then the water arrives */
@media (prefers-reduced-motion: no-preference) {
    .bl-band {
        animation: bl-settle 0.62s var(--ease) both;
    }

    .bl-band:nth-of-type(1) { animation-delay: 0.05s; }
    .bl-band:nth-of-type(2) { animation-delay: 0.13s; }
    .bl-band:nth-of-type(3) { animation-delay: 0.21s; }
    .bl-band:nth-of-type(4) { animation-delay: 0.29s; }
    .bl-band:nth-of-type(5) { animation-delay: 0.37s; }

    .bl-annot {
        animation: bl-fade 0.5s var(--ease) both;
        animation-delay: 0.5s;
    }

    .bl-wet {
        animation: bl-fade 0.7s var(--ease) both;
        animation-delay: 0.72s;
    }
}

@keyframes bl-settle {
    from { transform: scaleY(0); opacity: 0.4; }
    to   { transform: scaleY(1); opacity: 1; }
}

@keyframes bl-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===== Credentials strip ================================================= */

/* Tighter than a full band — three figures do not need 7rem of air */
.strip {
    background: var(--rock);
    color: var(--paper);
    padding-block: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
}

.strip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
    border: var(--edge-dark);
}

.strip-cell {
    background: var(--rock);
    padding: clamp(1.4rem, 1rem + 1vw, 2rem);
}

.strip-fig {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--aquifer-hi);
}

.strip-lab {
    margin-top: 0.55rem;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(238, 239, 235, 0.62);
}

/* ===== Cross-section services ============================================ */

.section-head {
    max-width: 62ch;
    margin-bottom: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
}

/* For a second section head inside one band, which needs the gap a band
   boundary would otherwise have given it. */
.section-head--spaced {
    margin-top: var(--band-y);
}

.strata {
    border-top: 1px solid var(--ink);
}

.stratum {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: clamp(1.2rem, 0.5rem + 2vw, 3rem);
    padding-block: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem);
    border-bottom: var(--edge);
}

.stratum-rail {
    position: relative;
    padding-left: 1.15rem;
}

.stratum-rail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42rem;
    bottom: 0.2rem;
    width: 3px;
    background: var(--band, var(--paper-3));
}

.stratum-depth {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.02em;
}

.stratum-zone {
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
    line-height: 1.5;
}

.stratum-title {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.2;
}

.stratum-note {
    margin-top: 0.5rem;
    color: var(--ink-soft);
    max-width: 62ch;
}

.svc-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 0.55rem 1.6rem;
    margin-top: 1.4rem;
}

.svc {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-top: var(--edge);
    font-size: var(--t-small);
    text-decoration: none;
    color: var(--ink);
    transition: color 0.16s var(--ease);
}

.svc:hover {
    color: var(--aquifer-lo);
}

.svc .dot {
    width: 5px;
    height: 5px;
    flex: none;
    background: var(--band, var(--aquifer));
    transform: translateY(-2px);
}

.svc .arw {
    margin-left: auto;
    width: 0.85em;
    height: 0.85em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.svc:hover .arw {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Process =========================================================== */

.process {
    background: var(--rock);
    color: var(--paper);
}

.process .section-title {
    color: var(--paper);
}

.process .eyebrow {
    color: var(--aquifer-hi);
}

.process .section-lead {
    color: rgba(238, 239, 235, 0.72);
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.13);
    border: var(--edge-dark);
}

.step {
    background: var(--rock);
    padding: clamp(1.4rem, 1rem + 1vw, 1.9rem);
}

.step-n {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--aquifer-hi);
}

.step-t {
    margin-top: 1.6rem;
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.25;
}

.step-d {
    margin-top: 0.5rem;
    font-size: var(--t-small);
    color: rgba(238, 239, 235, 0.66);
}

/* ===== Closing call ====================================================== */

.close-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 1rem + 3vw, 4rem);
    align-items: start;
    padding: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem);
    background: var(--paper-2);
    border: var(--edge);
    border-left: 3px solid var(--aquifer);
}

.close-title {
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.022em;
    max-width: 18ch;
}

.close-note {
    margin-top: 1rem;
    color: var(--ink-soft);
    max-width: 50ch;
}

.close-lines {
    display: grid;
    gap: 0.75rem;
}

.close-line {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.75rem;
    border-bottom: var(--edge);
    font-size: var(--t-small);
    text-decoration: none;
    transition: color 0.16s var(--ease);
}

.close-line:hover {
    color: var(--aquifer-lo);
}

.close-line .ico {
    width: 17px;
    height: 17px;
    flex: none;
    fill: none;
    stroke: var(--aquifer);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.close-line b {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.close-actions {
    margin-top: 1.4rem;
}

/* ===== Footer ============================================================ */

.footer {
    background: var(--rock);
    color: rgba(238, 239, 235, 0.72);
    padding-block: clamp(3rem, 2rem + 3.4vw, 4.6rem) 2rem;
    font-size: var(--t-small);
}

/* Explicit columns, not auto-fit: the wide cell spans 2, and auto-fit kept
   resolving to 4 tracks, which bumped the contact column onto its own row. */
.footer-grid {
    display: grid;
    grid-template-columns: 1.9fr 1fr 1.15fr 1.5fr;
    gap: clamp(1.8rem, 1rem + 2.6vw, 3.2rem);
}

.footer-col {
    min-width: 0;
}

.footer-col--wide {
    grid-column: auto;
}

@media (max-width: 1020px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-col--wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.footer-mark {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--paper);
}

.footer-mark span {
    display: block;
    font-weight: 600;
    color: var(--aquifer-hi);
}

.footer-blurb {
    margin-top: 0.9rem;
    max-width: 46ch;
}

.footer-head {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--paper);
    padding-bottom: 0.7rem;
    border-bottom: var(--edge-dark);
}

.footer-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.footer-list a {
    text-decoration: none;
    transition: color 0.16s var(--ease);
}

.footer-list a:hover {
    color: var(--aquifer-hi);
}

.footer-list--contact li {
    display: flex;
    gap: 0.6rem;
    align-items: start;
}

.footer .ico {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 0.28rem;
    fill: none;
    stroke: var(--aquifer-hi);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 1.5rem;
    margin-top: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
    padding-top: 1.5rem;
    border-top: var(--edge-dark);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.03em;
    color: rgba(238, 239, 235, 0.5);
}

/* ===== Interior page hero ================================================ */

.page-hero {
    border-bottom: var(--edge);
    padding-block: clamp(2.6rem, 1.8rem + 3.2vw, 4.8rem);
}

.page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.028em;
    max-width: 19ch;
    margin-top: 1.1rem;
    text-wrap: balance;
}

.page-hero-sub {
    font-size: var(--t-lead);
    color: var(--ink-soft);
    max-width: 62ch;
    margin-top: 1.3rem;
}

/* ===== Service page diagrams ============================================= */

/* Each service page opens with a schematic of the thing it actually produces,
   in the same drawing language as the bore log. Inlined rather than loaded as
   <img> so they inherit the page's fonts and palette tokens. */

.page-hero--figure .page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(1.8rem, 1rem + 3.6vw, 3.8rem);
    align-items: center;
}

.dgm {
    width: 100%;
    height: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.dgm text {
    fill: var(--ink-soft);
    font-size: 11px;
    letter-spacing: 0.01em;
}

.dgm .k {
    fill: var(--aquifer-lo);
    font-weight: 500;
}

.dgm .t {
    fill: var(--ink-faint);
    font-size: 9.5px;
    letter-spacing: 0.06em;
}

/* Labels sitting on the rock fills, not on paper. Keep geology inside its
   column and annotations outside it - overlaying paper-coloured text on the
   dark strata is unreadable. */
.dgm .onrock {
    fill: rgba(238, 239, 235, 0.78);
    font-size: 9.5px;
    letter-spacing: 0.06em;
}

.dgm .wet-hi {
    fill: none;
    stroke: var(--aquifer-hi);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.dgm .ln {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dgm .hair {
    fill: none;
    stroke: var(--paper-3);
    stroke-width: 1;
}

.dgm .wet {
    fill: none;
    stroke: var(--aquifer);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dgm .box {
    fill: var(--paper);
    stroke: var(--ink);
    stroke-width: 1.4;
}

.dgm .rock {
    fill: var(--rock-2);
}

.dgm .soil {
    fill: var(--murum);
}

.dgm .aq {
    fill: var(--aquifer);
    opacity: 0.16;
}

.dgm .solid {
    fill: var(--aquifer);
}

.dgm .dash {
    stroke-dasharray: 5 4;
}

/* ===== Record (register extract) ========================================= */

/* The company record is a register entry, so it is set as one: ruled rows,
   mono values, nothing dissolved into marketing cards. The GST number and
   incorporation date are checkable, which is the point of showing them. */
.record {
    border: 1px solid var(--ink);
    background: var(--paper-2);
}

.section-title + .record {
    margin-top: 1.4rem;
}

.record-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.8rem 1.15rem;
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.record-row {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    gap: 0.25rem 1.1rem;
    padding: 0.72rem 1.15rem;
    border-bottom: var(--edge);
    font-size: var(--t-small);
}

.record-row:last-child {
    border-bottom: 0;
}

.record-key {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-top: 0.15rem;
}

.record-val {
    color: var(--ink);
}

.record-val--code {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.record-val a {
    color: inherit;
    text-decoration-color: var(--paper-3);
    text-underline-offset: 3px;
}

.record-val a:hover {
    color: var(--aquifer-lo);
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.8rem, 1rem + 3.4vw, 4rem);
    align-items: start;
}

.about-prose > p + p {
    margin-top: 1rem;
}

.about-prose .lead {
    margin-top: 1.1rem;
    font-size: var(--t-lead);
    color: var(--ink);
}

.about-prose p {
    color: var(--ink-soft);
    max-width: 58ch;
}

/* ===== Mission / vision statements ======================================= */

/* Sits inside the record section rather than getting its own band - two
   short statements do not earn a full band gap either side of them. */
.statements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.6rem, 1rem + 2.4vw, 3rem);
    margin-top: clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
}

.statement {
    border-top: 2px solid var(--aquifer);
    padding-top: 1.1rem;
}

.statement-label {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aquifer-lo);
}

.statement-text {
    margin-top: 0.8rem;
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--ink);
    max-width: 46ch;
}

/* ===== Claims ============================================================ */

/* Dark band, same role as .process on the home page: this is the emphasis
   block on the page, and it stops four paper-coloured bands stacking up. */
.claims-band {
    background: var(--rock);
    color: var(--paper);
}

.claims-band .section-title {
    color: var(--paper);
}

.claims-band .eyebrow {
    color: var(--aquifer-hi);
}

.claims-band .section-lead {
    color: rgba(238, 239, 235, 0.72);
}

.claims {
    border-top: var(--edge-dark);
}

.claims-band .claim {
    border-bottom: var(--edge-dark);
}

.claims-band .claim-d {
    color: rgba(238, 239, 235, 0.7);
}

.claims-band .claim-d a {
    color: var(--aquifer-hi);
    text-underline-offset: 3px;
}

.claim {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 0.5rem clamp(1.2rem, 0.5rem + 2.4vw, 3rem);
    padding-block: clamp(1.2rem, 0.9rem + 1.1vw, 1.75rem);
    border-bottom: var(--edge);
}

.claim-t {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
}

.claim-d {
    color: var(--ink-soft);
    max-width: 60ch;
}

/* ===== Filter bar ======================================================== */

/* Only rendered when scripting is available - a filter that cannot filter is
   worse than no filter. See the .js gate in projects.html. */
.filterbar {
    display: none;
}

.js .filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

.filter-btn {
    padding: 0.5rem 0.9rem;
    background: transparent;
    /* --ink-soft, not a paper-3 hairline: this is a control, so its boundary
       has to clear 3:1 against the page. */
    border: 1px solid var(--ink-soft);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease),
                border-color 0.16s var(--ease);
}

.filter-btn:hover {
    border-color: var(--ink);
    background: var(--paper-2);
}

.filter-btn[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.filter-status {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin-bottom: 1.6rem;
}

.js .filter-status {
    display: block;
}

/* ===== Register of approvals ============================================= */

.register {
    border-top: 1px solid var(--ink);
}

.reg-head {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) 12rem 10rem;
    gap: 1.2rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.reg-row {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) 12rem 10rem;
    gap: 0.3rem 1.2rem;
    padding: 1rem 0;
    border-bottom: var(--edge);
}

.reg-no {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-small);
    color: var(--ink-faint);
    padding-top: 0.15rem;
}

.reg-client {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.reg-sector,
.reg-loc {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    padding-top: 0.3rem;
}

.reg-scope {
    grid-column: 2;
    margin-top: 0.5rem;
}

.reg-details {
    margin-top: 0.55rem;
}

.reg-details summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aquifer-lo);
    cursor: pointer;
    list-style: none;
}

.reg-details summary::-webkit-details-marker {
    display: none;
}

.reg-details summary::before {
    content: "+";
    display: grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid currentColor;
    font-size: 0.8rem;
    line-height: 1;
}

.reg-details[open] summary::before {
    content: "\2212";
}

.reg-body {
    margin-top: 0.9rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--paper-3);
    max-width: 60ch;
}

.reg-body p {
    color: var(--ink-soft);
    font-size: var(--t-small);
}

.reg-deliv {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.3rem;
}

.reg-deliv li {
    position: relative;
    padding-left: 1rem;
    font-size: var(--t-small);
    color: var(--ink);
}

.reg-deliv li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    background: var(--aquifer);
}

.reg-deliv-h {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 0.95rem;
}

/* ===== Service pages ===================================================== */

/* Which authority is involved and what they want. This is the thing a
   prospect is actually searching for, so it sits above the deliverables. */
.regulator {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: 1rem clamp(1.2rem, 0.6rem + 2vw, 2.6rem);
    padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
    background: var(--paper-2);
    border: 1px solid var(--paper-3);
    border-left: 3px solid var(--aquifer);
}

.regulator-label {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aquifer-lo);
}

.regulator-who {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.regulator-what {
    color: var(--ink-soft);
    max-width: 62ch;
}

.regulator-what + .regulator-what {
    margin-top: 0.7rem;
}

.deliv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 0 clamp(1.2rem, 0.6rem + 2vw, 2.6rem);
    border-top: 1px solid var(--ink);
    margin-top: 1.4rem;
}

.deliv li {
    position: relative;
    padding: 0.6rem 0 0.6rem 1.15rem;
    border-bottom: var(--edge);
    font-size: var(--t-small);
}

.deliv li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 5px;
    height: 5px;
    background: var(--aquifer);
}

.deliv-group {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 2rem;
}

.related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
    gap: clamp(1.1rem, 0.8rem + 1.2vw, 2rem);
}

.related-item {
    border-top: 2px solid var(--aquifer);
    padding-top: 0.85rem;
}

.related-client {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
}

.related-what {
    margin-top: 0.4rem;
    font-size: var(--t-small);
    color: var(--ink-soft);
}

/* ===== Contact form ====================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(1.8rem, 1rem + 3.4vw, 4rem);
    align-items: start;
}

.form-grid {
    display: grid;
    gap: 1.05rem;
    margin-top: 1.4rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.05rem;
}

.field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.field > label {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* --ink-soft, not a paper-3 hairline: an input boundary is a UI component
   and has to clear 3:1 against the page. */
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.72rem 0.8rem;
    background: var(--paper);
    border: 1px solid var(--ink-soft);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: var(--t-body);
    color: var(--ink);
    transition: border-color 0.16s var(--ease);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--ink);
}

.field textarea {
    min-height: 8.5rem;
    resize: vertical;
}

/* :user-invalid, not :invalid - an untouched required field is invalid from
   the moment the page loads, which would flag every empty box as an error
   before the visitor has typed anything. */
.field input:user-invalid,
.field textarea:user-invalid {
    border-color: var(--murum);
}

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

/* Spam honeypot. Clipped rather than display:none, because bots filter on the
   latter - but clipped rather than pushed to -9999px either, since a negative
   offset can produce a stray horizontal scrollbar. Nobody reaches this: it is
   aria-hidden and tabindex="-1" in the markup. */
.botcheck {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

.form-note {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.03em;
    color: var(--ink-faint);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.3rem;
}

/* Empty until the submit handler writes to it, so it takes no space at rest */
.form-status:empty {
    display: none;
}

.form-status {
    padding: 0.85rem 1rem;
    border: 1px solid var(--paper-3);
    border-left: 3px solid var(--ink-soft);
    background: var(--paper-2);
    font-size: var(--t-small);
}

.form-status--ok {
    border-left-color: var(--aquifer);
}

.form-status--err {
    border-left-color: var(--murum);
}

/* ===== Map =============================================================== */

.map-frame {
    border: 1px solid var(--ink);
    background: var(--paper-2);
    line-height: 0;
}

.map-frame iframe {
    display: block;
    width: 100%;
    height: clamp(280px, 42vw, 440px);
    border: 0;
}

/* ===== Sector tags ======================================================= */

.sectors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sector-tag {
    padding: 0.42rem 0.8rem;
    border: 1px solid var(--paper-3);
    background: var(--paper-2);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

/* ===== People ============================================================ */

/* No stock portraits. The monogram is a deliberate placeholder shaped to take
   a real photograph of Mr. Kanse the moment one exists - swap the .monogram
   element for an <img> and nothing else needs to move. */
.principal {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: clamp(1.2rem, 0.8rem + 1.4vw, 2rem);
    align-items: start;
    padding-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
    border-bottom: var(--edge);
}

.monogram {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    background: var(--rock);
    color: var(--aquifer-hi);
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.principal-role {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aquifer-lo);
}

.principal-name {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.1;
}

.principal-note {
    margin-top: 0.7rem;
    color: var(--ink-soft);
    max-width: 56ch;
}

.disciplines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: clamp(1.2rem, 0.8rem + 1.4vw, 2.2rem);
    margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
}

.discipline {
    border-top: 2px solid var(--paper-3);
    padding-top: 0.9rem;
}

.discipline-t {
    font-weight: 600;
    font-size: var(--t-body);
}

.discipline-d {
    margin-top: 0.35rem;
    font-size: var(--t-small);
    color: var(--ink-soft);
}

.people-note {
    margin-top: 1.6rem;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
    max-width: 62ch;
}

/* ===== Scroll reveal (driven by js/script.js) ============================ */

/* Gated on .js, which the inline script in head-v2.html sets on <html>.
   Without JavaScript the hidden state is never applied at all, so the content
   is visible by default and the animation is purely additive. Do NOT hoist
   these declarations onto a bare .reveal - that hides the page for anyone
   whose JS fails to run. */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ===== Responsive ======================================================== */

@media (max-width: 960px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.6rem;
    }

    .figure-frame {
        max-width: 460px;
    }

    .page-hero--figure .page-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.4rem;
    }

    .close-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .about-grid,
    .claim,
    .contact-grid,
    .regulator {
        grid-template-columns: minmax(0, 1fr);
    }

    .reg-head {
        display: none;
    }

    .reg-row {
        grid-template-columns: 2.2rem minmax(0, 1fr);
    }

    .reg-sector,
    .reg-loc {
        grid-column: 2;
        padding-top: 0;
    }

    .reg-sector {
        margin-top: 0.35rem;
    }
}

@media (max-width: 560px) {
    /* Give the bore log every pixel it can get; the annotations are small */
    .figure-frame {
        padding: 0.85rem 0.7rem;
    }

    .figure-cap span + span {
        display: none;
    }

    /* The address needs the full width once the label column is this narrow */
    .record-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .principal {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 780px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        inset: var(--nav-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-bottom: var(--edge);
        padding: 0.5rem var(--gutter) 1.4rem;
        transform: translateY(-130%);
        transition: transform 0.3s var(--ease);
        box-shadow: 0 18px 30px rgba(18, 25, 23, 0.1);
    }

    .nav-menu.active {
        transform: translateY(0);
    }

    .nav-menu a {
        padding-block: 0.85rem;
        border-bottom: var(--edge);
        font-size: 1rem;
    }

    .nav-menu a::after {
        display: none;
    }

    /* In the mobile panel the submenu is inline, not a floating layer. */
    .nav-sub {
        display: block;
        position: relative;
        border-bottom: var(--edge);
    }

    .nav-sub > a {
        border-bottom: 0;
    }

    .nav-sub-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 3rem;
        height: 3.1rem;
    }

    .subnav {
        position: static;
        min-width: 0;
        max-width: none;
        padding: 0 0 0.6rem 0.9rem;
        border: 0;
        box-shadow: none;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-sub[data-open="true"] .subnav {
        display: block;
    }

    .subnav a {
        padding: 0.6rem 0.5rem;
        border-left: 2px solid var(--paper-3);
    }

    .subnav a:hover {
        border-left-color: var(--aquifer);
    }

    .stratum {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .stratum-rail {
        display: flex;
        align-items: baseline;
        gap: 0.7rem;
        padding-left: 0;
        padding-top: 0.55rem;
        border-top: 3px solid var(--band, var(--paper-3));
    }

    .stratum-rail::before {
        display: none;
    }

    .stratum-zone {
        margin-top: 0;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Must match .js .reveal's specificity to override it */
    .js .reveal {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .navbar,
    .hero-actions,
    .close-actions {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }
}