/* ==========================================================================
   INDONESIA SHIPYARD — "The Register"
   A precision engineering document crossed with a luxury maritime brand.

   Design language
   ---------------
   Ground      Ink navy (#0f1b24) dominant, paper (#fbfcfc) for reading bands.
   Accent      Brass (#b6762c) used as hairlines, rules and register marks —
               never as a fill larger than a button.
   Type        Newsreader (editorial serif with an optical-size axis, so it
               reads as display at 4rem and as text at 1.2rem)
               Libre Franklin (Franklin Gothic lineage; large x-height, open
               apertures, comfortable for prose at small sizes)
               IBM Plex Mono (technical annotation: geometry, tonnage, eyebrows)
   Signature   1px brass hairlines, corner register ticks on cards, numbered
               section marks ("01 · The register"), and tabular data treated
               as the hero element rather than decoration.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
    /* ground */
    --ink:        #0f1b24;
    --ink-deep:   #0a1319;
    --ink-lift:   #16252f;
    --steel:      #1d3a4d;
    --steel-soft: #27455a;

    /* paper */
    --paper:      #fbfcfc;
    --soft:       #f5f7f8;
    --line:       #dfe5e9;
    --line-soft:  #eaeff2;

    /* accent */
    --brass:      #b6762c;
    --brass-lift: #d79a4e;
    --brass-deep: #8d5a1d;

    /* text */
    --on-ink:          #eef3f6;
    --on-ink-muted:    #9fb3c0;
    /* Was #6f8694 — 4.58:1, only just passing, on small mono labels that
       want headroom rather than the minimum. #8ba0ad is 6.43:1. */
    --on-ink-faint:    #8ba0ad;
    --on-paper:        #0f1b24;
    --on-paper-muted:  #4d6472;
    /* Was #7e919c — 3.18:1 on paper, which fails AA and is used for table
       headers, captions and section marks. #5f7079 is 5.04:1. */
    --on-paper-faint:  #5f7079;

    /* type */
    /* Newsreader carries an optical-size axis, so the same family reads as a
       display serif at 4rem and as comfortable text at 1.2rem. The fallback
       stack is metric-adjacent so a swap is not jarring. */
    --font-display: 'Newsreader', Charter, 'Iowan Old Style', Georgia, serif;
    --font-sans:    'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* scale — fluid, clamped */
    --t-h1:    clamp(2.3rem, 1.25rem + 4.3vw, 4.4rem);
    --t-h2:    clamp(1.65rem, 1.15rem + 1.9vw, 2.6rem);
    --t-h3:    clamp(1.08rem, .98rem + .4vw, 1.3rem);
    --t-lede:  clamp(1.06rem, .98rem + .38vw, 1.3rem);
    /* 17px body: the comfortable floor for sustained reading on a desktop
       screen. 15px for secondary text, which was 14px and too small for the
       FAQ answers and card bodies that use it. */
    --t-body:  1.0625rem;
    --t-small: .9375rem;
    --t-micro: .73rem;

    /* rhythm */
    --gutter:  clamp(20px, 5vw, 56px);
    --band-y:  clamp(64px, 8vw, 128px);
    /* 62ch lands near 70 characters a line — the comfortable range. 68ch
       pushed past 80, which is where the eye starts losing its place. */
    --measure: 62ch;
    --shell:   1280px;

    /* sticky offsets — one source of truth for the header, the section nav,
       the FAQ category rail and every heading anchor. --stick-bar is raised
       below when WordPress shows its admin bar. */
    --stick-bar:  0px;
    --stick-head: 74px;
    --stick-nav:  52px;

    /* motion */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur:  .42s;

    /* elevation — ink-tinted, never neutral grey */
    --lift-1: 0 1px 2px rgba(15, 27, 36, .05), 0 8px 24px -14px rgba(15, 27, 36, .18);
    --lift-2: 0 2px 4px rgba(15, 27, 36, .06), 0 22px 48px -20px rgba(15, 27, 36, .26);

    /* A fixed ink-and-paper system, not a dark-mode-adaptive theme: tell the
       browser so it does not recolour form controls or scrollbars. */
    color-scheme: light;
}

/* ----------------------------------------------------------------- 2. base */

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

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

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

/* WordPress admin bar: fixed at 32px, 46px on small screens, and not fixed at
   all below 600px — so the sticky offsets follow it rather than hiding under
   it for logged-in editors. */
body.admin-bar { --stick-bar: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar { --stick-bar: 46px; }
}
@media screen and (max-width: 600px) {
    body.admin-bar { --stick-bar: 0px; }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--on-paper);
    font-family: var(--font-sans);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
    overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

a, button, summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 400;
    letter-spacing: -.008em;
    text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Visible focus on everything interactive. Brass ring, offset so it reads
   against both grounds. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brass-lift);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--brass); color: #fff; }

.isy-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.isy-skip {
    position: absolute;
    top: 12px; left: var(--gutter);
    z-index: 200;
    padding: 12px 20px;
    background: var(--brass);
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--t-small);
    transform: translateY(-200%);
    transition: transform .18s var(--ease);
}
.isy-skip:focus { transform: none; }

/* --------------------------------------------------------- 3. layout shell */

.isy-wrap {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

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

.isy-band--paper { background: var(--paper); color: var(--on-paper); }
.isy-band--soft  { background: var(--soft);  color: var(--on-paper); }

.isy-band--ink {
    background: var(--ink);
    color: var(--on-ink);
}

/* Ink bands carry a faint blueprint grid so they read as drawn-on paper
   rather than a flat fill. */
.isy-band--ink::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(to right, rgba(159, 179, 192, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(159, 179, 192, .055) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
}

.isy-band > .isy-wrap { position: relative; z-index: 1; }

/* Hairline that separates consecutive bands of the same tone. */
.isy-band + .isy-band--paper { border-top: 1px solid var(--line-soft); }

/* ------------------------------------------------------------ 4. typography */

.isy-h1 {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    /* Newsreader has longer descenders than the didone it replaced, so the
       lines need a little more room than 1.04. */
    line-height: 1.08;
    letter-spacing: -.016em;
    font-weight: 400;
}

.isy-h2 {
    font-family: var(--font-display);
    font-size: var(--t-h2);
    line-height: 1.18;
    letter-spacing: -.011em;
    font-weight: 400;
}

.isy-h3 {
    font-family: var(--font-sans);
    font-size: var(--t-h3);
    line-height: 1.36;
    font-weight: 600;
    letter-spacing: -.003em;
}

/* The accented phrase inside a headline: brass, italic didone. */
.isy-h1 em, .isy-h2 em {
    font-style: italic;
    color: var(--brass);
}
.isy-band--paper .isy-h1 em,
.isy-band--paper .isy-h2 em,
.isy-band--soft .isy-h2 em { color: var(--brass-deep); }

.isy-lede {
    max-width: 62ch;
    font-size: var(--t-lede);
    line-height: 1.6;
    color: var(--on-paper-muted);
}
.isy-band--ink .isy-lede { color: var(--on-ink-muted); }

.isy-intro {
    max-width: var(--measure);
    margin-top: 18px;
    color: var(--on-paper-muted);
}
.isy-band--ink .isy-intro { color: var(--on-ink-muted); }

/* Eyebrow: mono, letterspaced, prefixed with a brass tick. */
.isy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brass);
}
.isy-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: currentColor;
    flex: none;
}
.isy-band--paper .isy-eyebrow,
.isy-band--soft .isy-eyebrow { color: var(--brass-deep); }
/* On ink the darker brass sits at 4.67:1; the lighter one is 7.16:1, which
   these small letterspaced caps need. */
.isy-band--ink .isy-eyebrow,
.isy-hero .isy-eyebrow,
.isy-pagehead .isy-eyebrow,
.isy-cta .isy-eyebrow { color: var(--brass-lift); }

/* Numbered section mark: "01 · The register" with a rule to the edge. */
.isy-mark {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-paper-faint);
}
.isy-band--ink .isy-mark { color: var(--on-ink-faint); }
.isy-mark__no { color: var(--brass); font-weight: 600; }
.isy-band--paper .isy-mark__no, .isy-band--soft .isy-mark__no { color: var(--brass-deep); }
.isy-mark::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
}
.isy-band--ink .isy-mark::after { background: rgba(159, 179, 192, .2); }

/* Byline under an H1 — the real site stamps every page with one. */
.isy-byline {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.isy-band--paper .isy-byline { color: var(--on-paper-faint); }

/* Section heading block. */
.isy-head { max-width: var(--measure); }
.isy-head > .isy-h2 { margin-top: 18px; }

/* Long-form prose. */
.isy-prose { max-width: var(--measure); }
.isy-prose > * + * { margin-top: 1.15em; }
.isy-prose p { color: var(--on-paper-muted); }
.isy-band--ink .isy-prose p { color: var(--on-ink-muted); }
.isy-prose strong { color: var(--on-paper); font-weight: 600; }
.isy-band--ink .isy-prose strong { color: var(--on-ink); }
.isy-prose a {
    color: var(--brass-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .18s var(--ease);
}
.isy-prose a:hover { color: var(--brass); }
.isy-band--ink .isy-prose a { color: var(--brass-lift); }
.isy-prose h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.18; letter-spacing: -.011em; margin-top: 1.8em; }
.isy-prose h3 { font-size: var(--t-h3); font-weight: 600; margin-top: 1.6em; }
.isy-prose ul { margin-top: 1.15em; }
.isy-prose ul li { position: relative; padding-left: 22px; margin-top: .55em; color: var(--on-paper-muted); }
.isy-prose ul li::before {
    content: '';
    position: absolute;
    left: 2px; top: .72em;
    width: 7px; height: 1px;
    background: var(--brass);
}
.isy-prose blockquote {
    margin: 1.6em 0;
    padding-left: 24px;
    border-left: 2px solid var(--brass);
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1.5;
}
.isy-prose img { margin-block: 1.6em; }
.isy-prose code {
    font-family: var(--font-mono);
    font-size: .88em;
    padding: .15em .4em;
    background: var(--soft);
    border: 1px solid var(--line);
}

/* Anchored headings must clear the sticky header. */
:where(h2, h3)[id], .isy-anchor {
    scroll-margin-top: calc(var(--stick-bar) + var(--stick-head) + var(--stick-nav) + 24px);
}

/* Bullet list used inside sections. */
.isy-list { margin-top: 24px; display: grid; gap: 12px; }
.isy-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--on-paper-muted);
}
.isy-band--ink .isy-list li { color: var(--on-ink-muted); }
.isy-list li i { color: var(--brass); font-size: 1rem; margin-top: .28em; flex: none; }

/* --------------------------------------------------------------- 5. buttons */

.isy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: 1px solid transparent;
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    background: none;
    transition: background-color .2s var(--ease), border-color .2s var(--ease),
                color .2s var(--ease), transform .2s var(--ease);
}
.isy-btn:active { transform: translateY(1px); }
.isy-btn i { font-size: 1.05rem; }

.isy-btn--brass {
    background: var(--brass);
    border-color: var(--brass);
    color: #fff;
}
.isy-btn--brass:hover { background: var(--brass-lift); border-color: var(--brass-lift); }

.isy-btn--ink {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
}
.isy-btn--ink:hover { background: var(--steel); border-color: var(--steel); }

.isy-btn--outline {
    border-color: currentColor;
    color: var(--on-paper);
}
.isy-btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.isy-btn--on-ink {
    border-color: rgba(238, 243, 246, .28);
    color: var(--on-ink);
}
.isy-btn--on-ink:hover { background: rgba(238, 243, 246, .1); border-color: var(--on-ink); }

.isy-btn--sm { padding: 10px 18px; font-size: .7rem; }
.isy-btn--block { width: 100%; }

.isy-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Inline arrow link — the "Ship repair desk →" pattern. */
.isy-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brass-deep);
    transition: color .2s var(--ease);
}
.isy-band--ink .isy-link { color: var(--brass-lift); }
.isy-link:hover { color: var(--brass); }
.isy-link i {
    font-size: 1rem;
    transition: transform .2s var(--ease);
}
.isy-link:hover i { transform: translateX(5px); }

/* ------------------------------------------------------------ 6. breadcrumb */

.isy-crumb {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.isy-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.isy-crumb a { transition: color .18s var(--ease); }
.isy-crumb a:hover { color: var(--brass-lift); }
.isy-crumb [aria-current] { color: var(--on-ink-muted); }
.isy-band--paper .isy-crumb { color: var(--on-paper-faint); }
.isy-band--paper .isy-crumb a:hover { color: var(--brass-deep); }
.isy-band--paper .isy-crumb [aria-current] { color: var(--on-paper-muted); }

/* -------------------------------------------------------------- 7. utility  */

.isy-util {
    background: var(--ink-deep);
    color: var(--on-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    border-bottom: 1px solid rgba(159, 179, 192, .1);
}
.isy-util__in {
    max-width: var(--shell);
    margin-inline: auto;
    padding: 9px var(--gutter);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 22px;
}
.isy-util__grp { display: flex; align-items: center; gap: 20px; }
.isy-util span, .isy-util a { display: inline-flex; align-items: center; gap: 7px; }
.isy-util a { transition: color .18s var(--ease); }
.isy-util a:hover { color: var(--brass-lift); }
.isy-util i { color: var(--brass); font-size: .92rem; }

@media (max-width: 860px) {
    .isy-util { display: none; }
}

/* --------------------------------------------------------------- 8. header  */

.isy-head-bar {
    position: sticky;
    top: var(--stick-bar);
    z-index: 100;
    background: color-mix(in srgb, var(--ink) 92%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid rgba(159, 179, 192, .12);
    transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.isy-head-bar.is-stuck { box-shadow: 0 10px 34px -22px rgba(0, 0, 0, .8); }

/* Brass hairline along the very bottom edge — the brand's signature. */
.isy-head-bar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--brass) 18%, var(--brass) 82%, transparent);
    opacity: .5;
}

.isy-head-bar__in {
    max-width: var(--shell);
    margin-inline: auto;
    padding: 0 var(--gutter);
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
}
.isy-head-bar__in > a { flex: none; }

/* Wordmark: brand name in didone + mono register line beneath. */
.isy-mark-brand { display: inline-flex; align-items: center; gap: 13px; }
.isy-mark-brand__glyph {
    width: 34px; height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--brass);
    color: var(--brass);
    font-size: 1.05rem;
}
.isy-mark-brand__txt { display: grid; gap: 3px; }
.isy-mark-brand__name {
    font-family: var(--font-display);
    font-size: 1.12rem;
    line-height: 1;
    letter-spacing: -.012em;
    color: var(--on-ink);
}
.isy-mark-brand__sub {
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--on-ink-faint);
}
.isy-mark-brand--lg .isy-mark-brand__glyph { width: 42px; height: 42px; font-size: 1.3rem; }
.isy-mark-brand--lg .isy-mark-brand__name { font-size: 1.36rem; }
.isy-mark-brand--dark .isy-mark-brand__name { color: var(--on-paper); }
.isy-mark-brand--dark .isy-mark-brand__sub { color: var(--on-paper-faint); }

.isy-logo-img { width: auto; object-fit: contain; }

/* Footer logo reads white: an invert+brightness filter lifts a dark logo file
   off the ink ground without asking the editor for a second asset. */
.isy-logo-img--invert { filter: brightness(0) invert(1); }

/* -------------------------------------------------------------- 9. nav      */

.isy-nav-primary { margin-left: auto; }

.isy-nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.isy-nav__item { position: relative; }
.isy-nav > li > a,
.isy-nav__item > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 26px 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    white-space: nowrap;
    transition: color .18s var(--ease);
}
.isy-head-bar__act .isy-btn { white-space: nowrap; }
.isy-nav__item > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    height: 1px;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .26s var(--ease);
}
.isy-nav__item > a:hover { color: var(--on-ink); }
.isy-nav__item > a:hover::after,
.isy-nav__item.is-current > a::after { transform: scaleX(1); }
.isy-nav__item.is-current > a { color: var(--on-ink); }
.isy-nav__item > a i { font-size: .8rem; opacity: .7; }

.isy-nav__drop {
    position: absolute;
    top: 100%; left: -18px;
    min-width: 286px;
    padding: 10px;
    background: var(--ink-lift);
    border: 1px solid rgba(159, 179, 192, .14);
    border-top: 1px solid var(--brass);
    box-shadow: 0 26px 56px -26px rgba(0, 0, 0, .8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.isy-nav__item:hover > .isy-nav__drop,
.isy-nav__item:focus-within > .isy-nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.isy-nav__drop a {
    display: block;
    padding: 10px 14px;
    font-size: .86rem;
    color: var(--on-ink-muted);
    transition: background-color .16s var(--ease), color .16s var(--ease);
}
.isy-nav__drop a:hover { background: rgba(182, 118, 44, .14); color: var(--on-ink); }

.isy-head-bar__act { display: flex; align-items: center; gap: 12px; }

@media (max-width: 1220px) {
    .isy-nav-primary { display: none; }
}

.isy-burger {
    display: none;
    width: 42px; height: 42px;
    place-items: center;
    border: 1px solid rgba(159, 179, 192, .26);
    background: none;
    color: var(--on-ink);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.isy-burger:hover { border-color: var(--brass); background: rgba(182, 118, 44, .12); }

@media (max-width: 1220px) {
    .isy-burger { display: grid; }
    .isy-head-bar__act { margin-left: auto; }
}
@media (max-width: 560px) {
    .isy-head-bar__act .isy-btn { display: none; }
}

/* ------------------------------------------------------------ 10. drawer    */

#isy-drawer {
    position: fixed;
    inset: 0;
    z-index: 150;
    visibility: hidden;
    pointer-events: none;
}
#isy-drawer.is-open { visibility: visible; pointer-events: auto; }

.isy-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 19, 25, .64);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}
#isy-drawer.is-open .isy-drawer__scrim { opacity: 1; }

.isy-drawer__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(420px, 90vw);
    display: flex;
    flex-direction: column;
    background: var(--ink);
    border-left: 1px solid var(--brass);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
}
#isy-drawer.is-open .isy-drawer__panel { transform: translateX(0); }

.isy-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px var(--gutter);
    border-bottom: 1px solid rgba(159, 179, 192, .14);
}
.isy-drawer__close {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid rgba(159, 179, 192, .26);
    background: none;
    color: var(--on-ink);
    font-size: 1.15rem;
    cursor: pointer;
}
.isy-drawer__close:hover { border-color: var(--brass); }

.isy-mnav { padding: 12px var(--gutter) 24px; }
.isy-mnav a, .isy-mnav summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(159, 179, 192, .1);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    cursor: pointer;
}
.isy-mnav a:hover, .isy-mnav summary:hover { color: var(--brass-lift); }
.isy-mnav summary { list-style: none; }
.isy-mnav summary::-webkit-details-marker { display: none; }
.isy-mnav details ul { padding: 4px 0 10px 16px; }
.isy-mnav details ul a {
    font-family: var(--font-sans);
    font-size: .9rem;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 0;
    border-bottom: 0;
}
.isy-mnav details[open] summary i { transform: rotate(45deg); }
.isy-mnav summary i { transition: transform .22s var(--ease); font-size: .95rem; }

.isy-drawer__foot {
    margin-top: auto;
    padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(159, 179, 192, .14);
    display: grid;
    gap: 10px;
}

/* ---------------------------------------------------------------- 11. hero  */

.isy-hero {
    position: relative;
    background: var(--ink-deep);
    color: var(--on-ink);
    overflow: hidden;
    isolation: isolate;
}

.isy-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.isy-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
}

/* Scrim: one floor wash that carries the type, plus one directional wash from
   the left. Deliberately lighter than it needs to be for contrast alone — the
   dock has to still read as a photograph, or the hero is just a dark box.
   Contrast under the type block stays above 4.5:1 because the floor wash is
   densest exactly where the text sits. */
.isy-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(10, 19, 25, .94) 0%,
            rgba(10, 19, 25, .76) 26%,
            rgba(10, 19, 25, .32) 60%,
            rgba(10, 19, 25, .22) 100%),
        linear-gradient(100deg,
            rgba(10, 19, 25, .78) 0%,
            rgba(10, 19, 25, .40) 46%,
            rgba(10, 19, 25, .04) 100%);
}

/* Interior headers stack type from breadcrumb to buttons, and on phones the
   type runs the full width, so the floor/left washes above are not under all
   of it. An even veil keeps lede text legible over bright photographs. */
.isy-hero__media::before {
    content: '';
    position: absolute;
    inset: 0;
}
.isy-pagehead .isy-hero__media::before { background: rgba(10, 19, 25, .38); }
@media (max-width: 760px) {
    .isy-hero__media::before { background: rgba(10, 19, 25, .5); }
}

/* The composition is bottom-anchored: a deliberate column of air above the
   headline, type sitting on the floor of the frame. That is what gives the
   photograph room to be seen and the hero a fixed proportion instead of
   whatever height its content happens to add up to. */
.isy-hero__in {
    position: relative;
    z-index: 1;
    min-height: clamp(540px, 76vh, 760px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-block: clamp(104px, 16vh, 172px) clamp(30px, 4vh, 48px);
}

/* Each element gets its own measure. Constraining the whole column instead
   is what made the chip row wrap into a ragged block. */
.isy-hero__body { max-width: 820px; }
.isy-hero__title { margin-top: 20px; max-width: 26ch; }
.isy-hero .isy-byline { margin-top: 16px; }
.isy-hero__lede { margin-top: 22px; max-width: 52ch; color: var(--on-ink-muted); }

/* Service families: full container width, below the text column, so six chips
   sit in one tidy line on desktop and wrap evenly rather than raggedly. */
.isy-hero__services {
    margin-top: clamp(38px, 6vh, 64px);
    padding-top: 20px;
    border-top: 1px solid rgba(159, 179, 192, .18);
}

.isy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.isy-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid rgba(159, 179, 192, .24);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--on-ink-muted);
    transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.isy-chip:hover { border-color: var(--brass); color: var(--on-ink); background: rgba(182, 118, 44, .14); }
.isy-chip i { color: var(--brass); font-size: .9rem; }

/* Data rail: mono key/value pairs on the floor of the hero, divided by
   hairlines. Columns are fixed per breakpoint rather than auto-fit, so the
   dividers land in predictable places and no stray hairline appears at the
   end of a wrapped row. */
.isy-rail {
    margin-top: clamp(26px, 3.5vh, 38px);
    border-top: 1px solid rgba(159, 179, 192, .26);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
    .isy-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.isy-rail__cell {
    min-width: 0;
    padding: 20px 22px 0;
    border-left: 1px solid rgba(159, 179, 192, .14);
}
/* A cell that starts a row carries no divider and sits flush to the gutter. */
.isy-rail__cell:nth-child(2n+1) { border-left: 0; padding-left: 0; }
@media (max-width: 759px) {
    .isy-rail__cell:nth-child(n+3) { padding-top: 26px; }
}
@media (min-width: 760px) {
    .isy-rail__cell:nth-child(2n+1) {
        border-left: 1px solid rgba(159, 179, 192, .14);
        padding-left: 22px;
    }
    .isy-rail__cell:first-child { border-left: 0; padding-left: 0; }
}

.isy-rail__v {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--on-ink);
}
.isy-rail__l {
    margin-top: 8px;
    font-size: var(--t-micro);
    font-family: var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--on-ink-faint);
    overflow-wrap: break-word;
}

/* Interior page header. Shares the hero's media and rail, but a smaller H1:
   interior headlines are long sentences, and at the front page's display size
   they overwhelm the page they introduce. */
.isy-pagehead { position: relative; background: var(--ink); color: var(--on-ink); }
.isy-pagehead__in { padding-block: clamp(38px, 5vw, 58px) clamp(44px, 5.5vw, 70px); }
.isy-pagehead__body { max-width: 62ch; margin-top: clamp(28px, 4vw, 46px); }
.isy-pagehead__title {
    margin-top: 18px;
    max-width: 30ch;
    font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.3rem);
}
.isy-pagehead__lede { margin-top: 20px; max-width: 58ch; color: var(--on-ink-muted); }
.isy-pagehead .isy-rail { margin-top: clamp(34px, 5vw, 56px); }

/* ------------------------------------------------------- 12. answer block   */

/* The "Answer first:" block every page opens with. Brass rule on the left,
   didone pull-quote scale — built to be the snippet a search engine lifts. */
.isy-answer {
    position: relative;
    padding: clamp(28px, 4vw, 44px) 0 clamp(28px, 4vw, 44px) clamp(24px, 4vw, 44px);
    border-left: 2px solid var(--brass);
    max-width: 78ch;
}
.isy-answer__t {
    font-family: var(--font-display);
    font-size: clamp(1.18rem, 1.02rem + .7vw, 1.6rem);
    line-height: 1.42;
    color: var(--on-paper);
}
.isy-band--ink .isy-answer__t { color: var(--on-ink); }
.isy-answer__pts {
    margin-top: 28px;
    display: grid;
    gap: 10px;
}
.isy-answer__pt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: var(--t-small);
    color: var(--on-paper-muted);
}
.isy-band--ink .isy-answer__pt { color: var(--on-ink-muted); }
.isy-answer__pt i { color: var(--brass); font-size: .6rem; margin-top: .62em; flex: none; }

/* ---------------------------------------------------------- 13. ledger table */

/* Tabular data is the hero of this brand, not an afterthought. */
.isy-ledger { margin-top: 44px; }

.isy-ledger__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-top: 1px solid var(--brass);
    /* Fades at the edges signal that there is more table sideways. */
    background:
        linear-gradient(to right, var(--paper) 30%, rgba(251, 252, 252, 0)) left / 44px 100% no-repeat,
        linear-gradient(to left, var(--paper) 30%, rgba(251, 252, 252, 0)) right / 44px 100% no-repeat;
    background-attachment: local, local;
}
.isy-band--ink .isy-ledger__scroll {
    background:
        linear-gradient(to right, var(--ink) 30%, rgba(15, 27, 36, 0)) left / 44px 100% no-repeat,
        linear-gradient(to left, var(--ink) 30%, rgba(15, 27, 36, 0)) right / 44px 100% no-repeat;
    background-attachment: local, local;
}

.isy-ledger table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: var(--t-small);
    font-variant-numeric: tabular-nums;
}
.isy-ledger th {
    padding: 16px 20px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-paper-faint);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    vertical-align: bottom;
}
.isy-ledger td {
    padding: 17px 20px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--on-paper-muted);
    vertical-align: top;
}
.isy-ledger tbody tr { transition: background-color .16s var(--ease); }
.isy-ledger tbody tr:hover { background: var(--soft); }
/* First column is the row's name: it carries the weight. */
.isy-ledger td:first-child { color: var(--on-paper); font-weight: 500; }
.isy-ledger td:nth-child(2) { font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; }

.isy-band--ink .isy-ledger th { color: var(--on-ink-faint); border-bottom-color: rgba(159, 179, 192, .26); }
.isy-band--ink .isy-ledger td { color: var(--on-ink-muted); border-bottom-color: rgba(159, 179, 192, .12); }
.isy-band--ink .isy-ledger tbody tr:hover { background: rgba(159, 179, 192, .055); }
.isy-band--ink .isy-ledger td:first-child { color: var(--on-ink); }

.isy-ledger__note,
.isy-ledger__swipe {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-paper-faint);
}
.isy-band--ink .isy-ledger__note,
.isy-band--ink .isy-ledger__swipe { color: var(--on-ink-faint); }

.isy-ledger__swipe { display: flex; align-items: center; gap: 8px; }
.isy-ledger__swipe i { color: var(--brass); }
@media (min-width: 860px) { .isy-ledger__swipe { display: none; } }

.isy-ledger__foot {
    margin-top: 22px;
    max-width: var(--measure);
    font-size: var(--t-small);
    color: var(--on-paper-muted);
}
.isy-band--ink .isy-ledger__foot { color: var(--on-ink-muted); }

/* --------------------------------------------------------- 14. capacity grid */

/* Home-page capacity ledger: the register in five cards, mono geometry. */
.isy-cap {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    border-top: 1px solid rgba(159, 179, 192, .22);
    border-left: 1px solid rgba(159, 179, 192, .12);
}
.isy-cap__cell {
    padding: 24px 22px 28px;
    border-right: 1px solid rgba(159, 179, 192, .12);
    border-bottom: 1px solid rgba(159, 179, 192, .12);
}
.isy-cap__place {
    font-family: var(--font-display);
    font-size: 1.22rem;
    line-height: 1.2;
    color: var(--on-ink);
}
.isy-cap__kind {
    margin-top: 9px;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--on-ink-faint);
}
.isy-cap__geo {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(182, 118, 44, .35);
    font-family: var(--font-mono);
    font-size: .74rem;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    color: var(--brass-lift);
}

/* --------------------------------------------------------------- 15. steps  */

/* Numbered protocol. A brass rail runs the length of the list. */
.isy-steps {
    margin-top: 48px;
    counter-reset: isy-step;
    display: grid;
    gap: 0;
}
.isy-step {
    counter-increment: isy-step;
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: clamp(18px, 3vw, 40px);
    padding: 28px 0;
    border-top: 1px solid var(--line);
}
.isy-band--ink .isy-step { border-top-color: rgba(159, 179, 192, .14); }
.isy-step:last-child { border-bottom: 1px solid var(--line); }
.isy-band--ink .isy-step:last-child { border-bottom-color: rgba(159, 179, 192, .14); }

.isy-step__no::before {
    content: counter(isy-step, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--brass);
}
.isy-step__win {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-paper-faint);
}
.isy-band--ink .isy-step__win { color: var(--on-ink-faint); }
.isy-step__t { font-size: var(--t-h3); font-weight: 600; }
.isy-step__x { margin-top: 10px; max-width: 64ch; color: var(--on-paper-muted); }
.isy-band--ink .isy-step__x { color: var(--on-ink-muted); }

@media (max-width: 600px) {
    .isy-step { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

.isy-steps__note {
    margin-top: 24px;
    max-width: var(--measure);
    font-size: var(--t-small);
    color: var(--on-paper-faint);
}
.isy-band--ink .isy-steps__note { color: var(--on-ink-faint); }

/* --------------------------------------------------------------- 16. cards  */

.isy-cards {
    margin-top: 48px;
    display: grid;
    gap: 1px;
    background: var(--line);
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.isy-band--ink .isy-cards { background: rgba(159, 179, 192, .14); }

.isy-card {
    position: relative;
    padding: clamp(26px, 3vw, 36px);
    background: var(--paper);
    transition: background-color .22s var(--ease);
}
.isy-band--ink .isy-card { background: var(--ink); }
.isy-band--soft .isy-card { background: var(--soft); }
.isy-card:hover { background: var(--soft); }
.isy-band--ink .isy-card:hover { background: var(--ink-lift); }

/* Register tick: a drawing registration mark in the top-left corner. */
.isy-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 22px; height: 22px;
    border-top: 2px solid var(--brass);
    border-left: 2px solid var(--brass);
    transform: scale(0);
    transform-origin: top left;
    transition: transform .3s var(--ease);
}
.isy-card:hover::before { transform: none; }

.isy-card__ico {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    color: var(--brass);
    font-size: 1.25rem;
}
.isy-band--ink .isy-card__ico { border-color: rgba(159, 179, 192, .22); }
.isy-card__t { margin-top: 22px; font-size: var(--t-h3); font-weight: 600; }
.isy-card__x { margin-top: 10px; font-size: var(--t-small); color: var(--on-paper-muted); }
.isy-band--ink .isy-card__x { color: var(--on-ink-muted); }
.isy-card__link { margin-top: 20px; }

/* A card that is itself a link. */
a.isy-card { display: block; }

/* Notes under a card grid. */
.isy-notes {
    margin-top: 32px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.isy-note {
    padding: 20px 22px;
    border-left: 2px solid var(--brass);
    background: var(--soft);
    font-size: var(--t-small);
    color: var(--on-paper-muted);
}
.isy-band--ink .isy-note { background: rgba(159, 179, 192, .06); color: var(--on-ink-muted); }

/* --------------------------------------------------------------- 17. split  */

.isy-split {
    display: grid;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}
@media (min-width: 900px) {
    .isy-split { grid-template-columns: 1fr 1fr; }
    .isy-split--flip .isy-split__fig { order: -1; }
}

.isy-split__fig {
    position: relative;
    margin: 0;
}
.isy-split__fig img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* Brass frame offset behind the image — an engraved-plate edge. */
.isy-split__fig::before {
    content: '';
    position: absolute;
    inset: -12px -12px 12px 12px;
    border: 1px solid var(--brass);
    opacity: .5;
    pointer-events: none;
    z-index: -1;
}
.isy-split__cap {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    line-height: 1.6;
    letter-spacing: .06em;
    color: var(--on-paper-faint);
}
.isy-band--ink .isy-split__cap { color: var(--on-ink-faint); }

/* Figure with no image: a drawn placeholder plate. */
.isy-split__plate {
    display: grid;
    place-content: center;
    gap: 18px;
    aspect-ratio: 4 / 3;
    padding: 36px;
    text-align: center;
    border: 1px solid var(--line);
    background:
        repeating-linear-gradient(45deg, rgba(182, 118, 44, .05) 0 1px, transparent 1px 11px),
        var(--soft);
}
.isy-band--ink .isy-split__plate { border-color: rgba(159, 179, 192, .2); background: rgba(159, 179, 192, .05); }
.isy-split__plate i { font-size: 2.1rem; color: var(--brass); justify-self: center; }

/* --------------------------------------------------------------- 18. desks  */

/* Three linked "desk" cards — docking / refit / newbuild supervision. */
.isy-desks {
    margin-top: 48px;
    display: grid;
    gap: 1px;
    background: rgba(159, 179, 192, .16);
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}
.isy-desk {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 3vw, 38px);
    background: var(--ink);
    transition: background-color .22s var(--ease);
}
.isy-band--paper .isy-desk, .isy-band--soft .isy-desk { background: var(--paper); }
.isy-desk:hover { background: var(--ink-lift); }
.isy-band--paper .isy-desk:hover, .isy-band--soft .isy-desk:hover { background: var(--soft); }
.isy-desk__no {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .18em;
    color: var(--brass);
}
.isy-desk__t { margin-top: 20px; font-family: var(--font-display); font-size: 1.42rem; line-height: 1.2; }
.isy-desk__x { margin-top: 14px; font-size: var(--t-small); color: var(--on-ink-muted); flex: 1 1 auto; }
.isy-band--paper .isy-desk__x, .isy-band--soft .isy-desk__x { color: var(--on-paper-muted); }
.isy-desk__go { margin-top: 26px; }

/* --------------------------------------------------------------- 19. cycle  */

/* Survey-cycle timeline: a brass rail with marked stations. */
.isy-cycle {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0;
}
.isy-cycle__st {
    position: relative;
    padding: 36px 24px 0 0;
    border-top: 1px solid rgba(159, 179, 192, .2);
}
.isy-band--paper .isy-cycle__st, .isy-band--soft .isy-cycle__st { border-top-color: var(--line); }
/* The station dot sits on the rail. */
.isy-cycle__st::before {
    content: '';
    position: absolute;
    top: -5px; left: 0;
    width: 9px; height: 9px;
    background: var(--brass);
    border-radius: 50%;
}
.isy-cycle__when {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass);
}
.isy-cycle__t { margin-top: 14px; font-size: var(--t-h3); font-weight: 600; }
.isy-cycle__x { margin-top: 10px; font-size: var(--t-small); color: var(--on-ink-muted); padding-bottom: 8px; }
.isy-band--paper .isy-cycle__x, .isy-band--soft .isy-cycle__x { color: var(--on-paper-muted); }

/* ------------------------------------------------------------- 20. compare  */

.isy-compare { margin-top: 44px; }
.isy-compare .isy-ledger__scroll { border-top-color: var(--brass); }
.isy-compare td:last-child { color: var(--on-paper); }
.isy-band--ink .isy-compare td:last-child { color: var(--on-ink); }
.isy-compare th:last-child { color: var(--brass); }

/* -------------------------------------------------------------- 21. intake  */

/* The copy-paste scope template. Reads as a terminal/telex block. */
.isy-intake {
    margin-top: 36px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--brass);
    background: var(--ink-deep);
    color: var(--on-ink);
    overflow: hidden;
}
.isy-intake__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(159, 179, 192, .14);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.isy-intake__copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(159, 179, 192, .26);
    background: none;
    color: var(--on-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.isy-intake__copy:hover { border-color: var(--brass); color: var(--on-ink); }
.isy-intake pre {
    margin: 0;
    padding: 24px 18px 26px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 2;
    color: var(--on-ink-muted);
    tab-size: 4;
}
.isy-intake__status {
    padding: 0 18px 16px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brass-lift);
}

/* ----------------------------------------------------------------- 22. faq  */

.isy-faq { margin-top: 44px; border-top: 1px solid var(--line); }
.isy-band--ink .isy-faq { border-top-color: rgba(159, 179, 192, .18); }

.isy-faq__i { border-bottom: 1px solid var(--line); }
.isy-band--ink .isy-faq__i { border-bottom-color: rgba(159, 179, 192, .14); }

.isy-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.5;
    transition: color .18s var(--ease);
}
.isy-faq__q::-webkit-details-marker { display: none; }
.isy-faq__q:hover { color: var(--brass-deep); }
.isy-band--ink .isy-faq__q:hover { color: var(--brass-lift); }
.isy-faq__q i {
    flex: none;
    margin-top: .18em;
    font-size: 1.05rem;
    color: var(--brass);
    transition: transform .26s var(--ease);
}
.isy-faq__i[open] .isy-faq__q i { transform: rotate(45deg); }
.isy-faq__i[open] .isy-faq__q { color: var(--brass-deep); }
.isy-band--ink .isy-faq__i[open] .isy-faq__q { color: var(--brass-lift); }

.isy-faq__a {
    padding: 0 56px 28px 0;
    max-width: 68ch;
    line-height: 1.72;
    color: var(--on-paper-muted);
}
.isy-band--ink .isy-faq__a { color: var(--on-ink-muted); }

@media (prefers-reduced-motion: no-preference) {
    .isy-faq__i[open] .isy-faq__a { animation: isy-reveal-a .3s var(--ease) both; }
}
@keyframes isy-reveal-a {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------- 23. grouped FAQ hub  */

.isy-faqg {
    margin-top: 48px;
    display: grid;
    gap: clamp(36px, 5vw, 64px);
}
@media (min-width: 980px) {
    .isy-faqg { grid-template-columns: 262px minmax(0, 1fr); align-items: start; }
}

.isy-faqg__nav {
    display: grid;
    gap: 2px;
    border-top: 1px solid var(--brass);
    padding-top: 10px;
}
@media (min-width: 980px) {
    .isy-faqg__nav {
        position: sticky;
        top: calc(var(--stick-bar) + var(--stick-head) + var(--stick-nav) + 16px);
    }
}
.isy-faqg__nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    font-size: .88rem;
    color: var(--on-paper-muted);
    border-left: 2px solid transparent;
    transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.isy-band--ink .isy-faqg__nav a { color: var(--on-ink-muted); }
.isy-faqg__nav a:hover { background: var(--soft); color: var(--on-paper); }
.isy-band--ink .isy-faqg__nav a:hover { background: rgba(159, 179, 192, .07); color: var(--on-ink); }
.isy-faqg__nav a.is-active {
    border-left-color: var(--brass);
    background: var(--soft);
    color: var(--on-paper);
    font-weight: 500;
}
.isy-band--ink .isy-faqg__nav a.is-active { background: rgba(182, 118, 44, .12); color: var(--on-ink); }
.isy-faqg__nav i { color: var(--brass); font-size: 1rem; flex: none; }
.isy-faqg__nav span:first-of-type { flex: 1 1 auto; min-width: 0; }
.isy-faqg__n {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-variant-numeric: tabular-nums;
    color: var(--on-paper-faint);
    flex: none;
}
.isy-band--ink .isy-faqg__n { color: var(--on-ink-faint); }

.isy-faqg__grp + .isy-faqg__grp { margin-top: clamp(44px, 5vw, 68px); }
.isy-faqg__grp-t {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass-deep);
}
.isy-band--ink .isy-faqg__grp-t { color: var(--brass-lift); }
.isy-faqg__grp .isy-faq { margin-top: 20px; }

/* -------------------------------------------------------------- 24. journal */

.isy-journal {
    margin-top: 48px;
    display: grid;
    gap: 1px;
    background: var(--line);
    grid-template-columns: repeat(auto-fit, minmax(286px, 1fr));
}
.isy-band--ink .isy-journal { background: rgba(159, 179, 192, .14); }

.isy-post {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    transition: background-color .22s var(--ease);
}
.isy-band--ink .isy-post { background: var(--ink); }
.isy-post:hover { background: var(--soft); }
.isy-band--ink .isy-post:hover { background: var(--ink-lift); }

.isy-post__fig { margin: 0; overflow: hidden; background: var(--soft); }
.isy-post__fig img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.isy-post:hover .isy-post__fig img { transform: scale(1.035); }

.isy-post__body { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; flex: 1 1 auto; }
.isy-post__meta {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brass-deep);
}
.isy-band--ink .isy-post__meta { color: var(--brass-lift); }
.isy-post__t {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 1.24rem;
    line-height: 1.26;
}
.isy-post__x { margin-top: 12px; font-size: var(--t-small); color: var(--on-paper-muted); flex: 1 1 auto; }
.isy-band--ink .isy-post__x { color: var(--on-ink-muted); }
.isy-post__go { margin-top: 22px; }

.isy-pager {
    margin-top: 52px;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.isy-pager .page-numbers {
    min-width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--on-paper-muted);
    transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.isy-pager .page-numbers:hover { border-color: var(--brass); color: var(--on-paper); }
.isy-pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ------------------------------------------------------------ 25. directory */

.isy-dir {
    margin-top: 48px;
    display: grid;
    gap: 1px;
    background: var(--line);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.isy-band--ink .isy-dir { background: rgba(159, 179, 192, .14); }

.isy-dir__i {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: clamp(22px, 2.4vw, 30px);
    background: var(--paper);
    transition: background-color .22s var(--ease);
}
.isy-band--ink .isy-dir__i { background: var(--ink); }
.isy-band--soft .isy-dir__i { background: var(--soft); }
.isy-dir__i:hover { background: var(--soft); }
.isy-band--ink .isy-dir__i:hover { background: var(--ink-lift); }
.isy-dir__ico {
    width: 38px; height: 38px;
    flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    color: var(--brass);
    font-size: 1.1rem;
}
.isy-band--ink .isy-dir__ico { border-color: rgba(159, 179, 192, .22); }
.isy-dir__i > span:last-child { min-width: 0; }
.isy-dir__t { display: block; font-weight: 600; font-size: .98rem; overflow-wrap: break-word; }
.isy-dir__x { display: block; margin-top: 7px; font-size: var(--t-small); color: var(--on-paper-muted); }
.isy-band--ink .isy-dir__x { color: var(--on-ink-muted); }

/* -------------------------------------------------------------- 26. contact */

.isy-contact {
    margin-top: 48px;
    display: grid;
    gap: clamp(32px, 4vw, 56px);
}
@media (min-width: 940px) {
    .isy-contact { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
}

.isy-contact__ways { display: grid; gap: 1px; background: var(--line); }
.isy-band--ink .isy-contact__ways { background: rgba(159, 179, 192, .14); }
.isy-way {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 26px;
    background: var(--paper);
}
.isy-band--ink .isy-way { background: var(--ink); }
.isy-way__ico {
    width: 42px; height: 42px;
    flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    color: var(--brass);
    font-size: 1.2rem;
}
.isy-band--ink .isy-way__ico { border-color: rgba(159, 179, 192, .22); }
.isy-way > div { min-width: 0; }
.isy-way__t { font-weight: 600; overflow-wrap: break-word; }
.isy-way__x { margin-top: 7px; font-size: var(--t-small); color: var(--on-paper-muted); }
.isy-band--ink .isy-way__x { color: var(--on-ink-muted); }
.isy-way__go { margin-top: 14px; }

.isy-panel {
    padding: clamp(26px, 3vw, 34px);
    background: var(--ink);
    color: var(--on-ink);
    border-top: 2px solid var(--brass);
}
.isy-panel h3 {
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass-lift);
}
.isy-panel__rows { margin-top: 20px; display: grid; gap: 1px; }
.isy-panel__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(159, 179, 192, .12);
    font-size: var(--t-small);
}
.isy-panel__row dt { color: var(--on-ink-muted); }
.isy-panel__row dd { margin: 0; font-family: var(--font-mono); font-size: .78rem; font-variant-numeric: tabular-nums; }
.isy-panel__addr {
    margin-top: 22px;
    font-size: var(--t-small);
    line-height: 1.7;
    color: var(--on-ink-muted);
}
.isy-panel__addr a { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--brass-lift); }
.isy-panel__addr a:hover { color: var(--brass); }

/* ------------------------------------------------------------------ 27. cta */

.isy-cta { background: var(--ink-deep); color: var(--on-ink); position: relative; overflow: hidden; }
/* A brass horizon line — the only large graphic flourish in the theme. */
.isy-cta::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--brass), transparent);
}
.isy-cta__in {
    display: grid;
    gap: clamp(32px, 5vw, 64px);
    align-items: end;
}
@media (min-width: 940px) {
    .isy-cta__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.isy-cta__t { margin-top: 20px; }
.isy-cta__x { margin-top: 22px; color: var(--on-ink-muted); max-width: 56ch; }
.isy-cta__acts { display: grid; gap: 12px; }
.isy-cta__wa {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin-top: 6px;
}

/* ----------------------------------------------------------- 28. section nav */

/* "On this page", as a sticky rail of chips under the header rather than a
   desktop-only sidebar: it survives every breakpoint and keeps the content
   bands full-bleed.

   Offsets come from --stick-head and --stick-bar (see section 1) so the
   header, this rail, the FAQ category rail and every heading anchor stay in
   sync — including when WordPress adds its admin bar. */
.isy-secnav {
    position: sticky;
    top: calc(var(--stick-bar) + var(--stick-head));
    z-index: 80;
    /* Solid first: color-mix is the enhancement, never the only declaration,
       or an unsupporting browser renders this bar transparent over content. */
    background: var(--ink-deep);
    background: color-mix(in srgb, var(--ink-deep) 94%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid rgba(159, 179, 192, .14);
}

/* A brass hairline so the rail reads as its own band rather than as the floor
   of the page header above it. */
.isy-secnav::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(182, 118, 44, .45) 18%, rgba(182, 118, 44, .45) 82%, transparent);
}

.isy-secnav__in {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    gap: 20px;
}

.isy-secnav__lbl {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass);
}
@media (max-width: 860px) {
    .isy-secnav__lbl { display: none; }
}

/* min-width:0 is load-bearing: without it this flex child refuses to shrink
   below its content width, so the chips overflow the bar instead of
   scrolling inside it — and with overflow-x hidden on the body they are
   simply clipped off the right edge and unreachable. */
.isy-secnav__list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.isy-secnav__list::-webkit-scrollbar { display: none; }

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

/* Edge fades mark the rail as scrollable. JS toggles the classes so the fade
   only appears on a side that actually has more content. */
.isy-secnav__list.has-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
            mask-image: linear-gradient(to right, transparent, #000 28px);
}
.isy-secnav__list.has-end {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 28px);
            mask-image: linear-gradient(to left, transparent, #000 28px);
}
.isy-secnav__list.has-start.has-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.isy-secnav__list a {
    flex: none;
    padding: 15px 14px;
    border-bottom: 2px solid transparent;
    font-size: .86rem;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--on-ink-faint);
    transition: color .18s var(--ease), border-color .18s var(--ease);
}
.isy-secnav__list a:hover { color: var(--on-ink); }
.isy-secnav__list a.is-active {
    color: var(--on-ink);
    border-bottom-color: var(--brass);
}
/* The focus ring would be clipped by the edge mask, so keep it inside. */
.isy-secnav__list a:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------- 29. footer   */

.isy-foot {
    background: var(--ink-deep);
    color: var(--on-ink-muted);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--brass);
}
.isy-foot__top { padding-block: clamp(52px, 7vw, 86px) 44px; }
/* Phone: link columns pair up two-by-two; brand and desk take the full row. */
.isy-foot__grid {
    display: grid;
    gap: 40px 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.isy-foot__brand, .isy-foot__desk { grid-column: 1 / -1; }
.isy-foot__desk .isy-foot__acts { max-width: 380px; }
@media (max-width: 699px) {
    .isy-foot .isy-foot__grid h2 { letter-spacing: .06em; white-space: nowrap; }
}
@media (min-width: 700px) {
    .isy-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; }
}
/* Tablet: the desk row sets contacts beside the buttons instead of stacking. */
@media (min-width: 700px) and (max-width: 1239px) {
    .isy-foot__desk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
    .isy-foot__desk h2 { grid-column: 1 / -1; }
    .isy-foot__desk .isy-foot__acts { margin-top: 18px; }
}
/* Five columns need ~1240px before labels and buttons start wrapping. */
@media (min-width: 1240px) {
    .isy-foot__grid { grid-template-columns: 1.35fr 1fr 1.1fr .85fr 1.15fr; gap: 40px; }
    .isy-foot__brand, .isy-foot__desk { grid-column: auto; }
}

.isy-foot__brand p {
    margin-top: 22px;
    max-width: 44ch;
    font-size: var(--t-small);
    line-height: 1.7;
}
.isy-foot__cx { margin-top: 18px; display: grid; gap: 12px; }
.isy-foot__cx a, .isy-foot__cx div {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: var(--t-small);
}
.isy-foot__cx span { min-width: 0; overflow-wrap: break-word; }
.isy-foot__cx i { color: var(--brass); font-size: 1rem; margin-top: .14em; flex: none; }
.isy-foot__cx strong {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin-bottom: 3px;
}
.isy-foot__cx a:hover { color: var(--on-ink); }

.isy-foot h2 {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-ink);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(159, 179, 192, .18);
}
.isy-foot__links { margin-top: 16px; display: grid; gap: 11px; }
.isy-foot__links a {
    display: inline-block;
    font-size: var(--t-small);
    transition: color .18s var(--ease), transform .18s var(--ease);
}
.isy-foot__links a:hover { color: var(--brass-lift); transform: translateX(5px); }

.isy-foot__acts { margin-top: 24px; display: grid; gap: 10px; }

/* Group-entity block: the four contracting companies. */
.isy-foot__entities {
    padding-block: 32px;
    border-top: 1px solid rgba(159, 179, 192, .12);
}
.isy-foot__entities-t {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass);
}
.isy-foot__entities-list {
    margin-top: 16px;
    display: grid;
    gap: 9px;
    max-width: 92ch;
    font-size: .8rem;
    line-height: 1.65;
    color: var(--on-ink-faint);
}
.isy-foot__entities-sum {
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-style: italic;
    color: var(--on-ink-muted);
}

.isy-foot__sites {
    padding-block: 26px;
    border-top: 1px solid rgba(159, 179, 192, .12);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.isy-foot__sites > span { color: var(--brass); }
.isy-foot__sites a { color: var(--on-ink-faint); transition: color .18s var(--ease); }
.isy-foot__sites a:hover { color: var(--on-ink); }

.isy-foot__bottom {
    padding-block: 26px 34px;
    border-top: 1px solid rgba(159, 179, 192, .12);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px 26px;
    font-size: var(--t-micro);
    font-family: var(--font-mono);
    letter-spacing: .08em;
    color: var(--on-ink-faint);
}
.isy-foot__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.isy-foot__legal a:hover { color: var(--brass-lift); }

/* ------------------------------------------------------------- 30. floating */

.isy-fab {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 90;
    width: 54px; height: 54px;
    display: grid; place-items: center;
    background: #25d366;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: var(--lift-2);
    transition: transform .22s var(--ease);
}
.isy-fab:hover { transform: translateY(-3px) scale(1.04); }

#isy-top {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 66px);
    z-index: 90;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid rgba(159, 179, 192, .3);
    background: var(--ink);
    color: var(--on-ink);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, border-color .18s var(--ease);
}
#isy-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#isy-top:hover { border-color: var(--brass); }

/* --------------------------------------------------------------- 31. search */

.isy-searchform {
    margin-top: 26px;
    display: flex;
    max-width: 440px;
    border: 1px solid rgba(159, 179, 192, .3);
}
.isy-searchform input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 16px;
    border: 0;
    background: none;
    color: inherit;
    font-size: var(--t-small);
}
.isy-searchform input::placeholder { color: var(--on-ink-faint); }
/* The focus indicator lives on the wrapper so the field shows one clear ring
   rather than a ring nested inside a border. */
.isy-searchform:focus-within {
    border-color: var(--brass);
    outline: 2px solid var(--brass-lift);
    outline-offset: 2px;
}
.isy-searchform input:focus-visible { outline: none; }
.isy-searchform button {
    padding: 0 18px;
    border: 0;
    background: var(--brass);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}
.isy-searchform button:hover { background: var(--brass-lift); }

/* --------------------------------------------------------------- 32. reveal */

.isy-rv {
    opacity: 0;
    transform: translateY(16px);
}
.isy-rv.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .62s var(--ease), transform .62s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .isy-rv { opacity: 1; transform: none; transition: none; }
    .isy-post__fig img,
    .isy-faq__q i,
    .isy-link i,
    .isy-foot__links a { transition: none; }
    /* Show the register tick outright rather than scaling it in. */
    .isy-card::before { transform: none; transition: none; }
    .isy-link:hover i,
    .isy-foot__links a:hover { transform: none; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------- 33. print / misc   */

@media print {
    .isy-util, .isy-head-bar, .isy-secnav, #isy-drawer,
    .isy-fab, #isy-top, .isy-foot__sites { display: none !important; }
    body { background: #fff; color: #000; }
    .isy-band--ink { background: #fff !important; color: #000 !important; }
    .isy-band--ink::before { display: none; }
}