* {padding: 0; margin: 0;  border: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.39vw, 24px); scroll-behavior: smooth; overscroll-behavior: none;   scroll-padding-top: 3rem;}
body {font-size: var(--font-size-body); color: var(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
a {text-decoration: none; color: inherit; }
:is(ul,ol,p) a {  text-underline-offset: 0.15rem; transition: 0.2s opacity ease-in-out; text-decoration: underline; }
:is(ul,ol,p) a:hover { opacity: .5; }
a[href^="mailto:"] {text-decoration: none;}
ul {list-style-type: none;}
p {margin-bottom: 1.6em;}
p:last-child, ul:last-child {margin-bottom: 0;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
p strong { font-weight: var(--font-bold); }
p em { font-style: italic;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primary-font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --header-font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono-font: 'Sometype Mono', ui-monospace, monospace;

    /* Font weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 600;

    /* Font sizes */
    --font-size-huge:  4rem;             
    --font-size-h1:    2.5rem;           
    --font-size-h2:    2rem;             
    --font-size-h3:    1.7rem;           
    --font-size-h4:    1.5rem;           
    --font-size-h5:    1.2rem;           
    --font-size-h6:    1rem;             
    --font-size-body:  max(16px,.8rem);  
    --font-size-small: max(14px,.7rem);  
    --font-size-tiny:  max(12px,.6rem);  

    /* Colors */  
    --main-color: var(--my-black);
    --background-color: var(--my-white);
    
    --my-black: #1c1c1c;
    --my-black-40: rgba(0, 0, 0, 0.4);
    --my-full-black: #000;
    --my-white: #fff;
    --my-white-40: rgba(255,255,255,0.4);
    --my-soft-white: #f5f5f5;
    --my-soft-black: #494949;
    --my-red: #cb4520;

    /* Line heights */
    --line-height-tiny: 1;
    --line-height-small: 1.2;
    --line-height-medium: 1.35;
    --line-height-regular: 1.5;
    --line-height-large: 1.6; 

    /* Widths */
    --gutter-side: 2rem;
    --gutter-top: 1rem;
    --max-width: 75rem;
    --max-width-ultra-wide: 150rem;
    --max-width-narrow: 35rem;
    --margin-left: 0%;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 5rem; 
    --padding-top: 4rem;
    --btn-padding: 0 1.35rem;

    /* Transitions */
    --my-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --my-ease-out: cubic-bezier(.17,.84,.44,1); 

    /* Shadows */
    --drop-shadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blur-shadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --border-radius: 0.5rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 1.5rem;

    /* Logos */
    --logo-width: 5rem; 
}

/* =========================================================== */
/* ======================== HEADINGS ========================= */
/* =========================================================== */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-medium); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.5em; }
h1, .h1 {font-size: var(--font-size-h1); line-height: var(--line-height-small);} 
h2, .h2 {font-size: var(--font-size-h2); }
h3, .h3 {font-size: var(--font-size-h3); }
h4, .h4 {font-size: var(--font-size-h4); } 
h5, .h5 {font-size: var(--font-size-h5); } 
h6, .h6 {font-size: var(--font-size-h6); } 

h1:has(strong) { font-weight: var(--font-regular); }
h1 strong {  font-weight: var(--font-bold); }

main section:not(.h2-normal) h2 { font-size: var(--font-size-h5); font-family: var(--mono-font); text-transform: uppercase; border-bottom: 1px solid var(--my-black-40); font-weight: var(--font-regular); margin-block: 3rem 2rem; padding-bottom: .3rem; letter-spacing: 0.025em; }
main section:not(.h2-normal) h2:first-child { margin-top: 0; }
main section.h2-normal h2 { font-size: var(--font-size-h3); max-width: 28em; }

/* =========================================================== */
/* ========================= GENERAL ========================= */
/* =========================================================== */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main { padding-top: var(--padding-top);  }
header, main, footer { min-width: 0; max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }

/* --------------- LENIS --------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* --------------- IMAGES --------------- */
figure, picture { position: relative;}
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
picture { display: flex; }
img, video { width: 100%; height: auto; user-select: none;}

/* --------------- SELECTION --------------- */
*::selection { background: var(--main-color); color: var(--background-color); }

/* --------------- NO VISIBLE SCROLLBAR --------------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

/* --------------- SOCIALS --------------- */
ul.socials { display: flex; align-items: center; gap: 0.2rem; --icon-size: 2rem;  }
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {width: var(--icon-size); height: var(--icon-size); display: flex; justify-content: flex-start; align-items: center; border: 1px solid var(--my-white);  padding: .5rem; border-radius: 50%;}
ul.socials li svg { width: var(--icon-size); height: var(--icon-size); }

/* --------------- LOGO --------------- */
.logo {text-decoration: none;}
.logo img, .logo svg {display: block; height: auto; width: var(--logo-width);}

/* --------------- BUTTONS --------------- */
button { touch-action: manipulation;  text-align: center; font-family: inherit; }
button,label { cursor: pointer;  user-select: none; }
.btn { background: var(--main-color); color: var(--background-color); padding: var(--btn-padding); border-radius: var(--btn-border-radius); text-align: center; transition: 250ms; transition-property: border,background,color, opacity; }
.btn:hover, .btn.reversed:not(:hover) {background: transparent; color: var(--my-soft-black);}

.buttons { display: flex; gap: 1rem;}
.buttons button { width: 1.8rem; height: 1.8rem; padding: 0.4rem;  display: grid; place-items: center; cursor: pointer; }
.buttons button:hover { background: var(--my-soft-black); }
.buttons.outline button { width: 2rem; height: 2rem; background: transparent; border: 1px solid; }
.buttons.outline button:hover { background: var(--my-soft-white); border: 1px solid var(--my-soft-white);}
.buttons.outline button svg { width: 1rem; height: auto; }
.buttons.outline button path { fill: currentColor;}

/* --------------- SECTIONS --------------- */
section { margin: 0 auto; position: relative; background: var(--background-color); padding-block: var(--margin-y); }
section:first-of-type { padding-top: 0;}
section .container { margin: 0 auto; }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }
section:nth-of-type(even) { background: var(--my-soft-white); }

section.dark + section.dark { padding-top: 0; display: flex; flex-direction: column; }

/* --------------- DARK SECTIONS --------------- */
section.dark { 
    background: var(--my-black); color: var(--my-soft-white);
    a {color: var(--my-white);}
    &:not(.h2-normal) h2  { border-color: var(--my-white-40); }
}
section.black { background: var(--my-full-black); } 

/* --------------- CUT CORNER --------------- */
.cut-corner { position: relative;  --border-width: 1px; --corner-offset: 3rem; }
.cut-corner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-white-40); z-index: -1;  clip-path: polygon( 0 0, calc(100% - var(--corner-offset)) 0, 100% var(--corner-offset), 100% 100%, 0 100%, 0 0, var(--border-width) var(--border-width), var(--border-width) calc(100% - var(--border-width)), calc(100% - var(--border-width)) calc(100% - var(--border-width)), calc(100% - var(--border-width)) calc(var(--corner-offset) + var(--border-width) / 2), calc(100% - var(--corner-offset) - var(--border-width) / 2) var(--border-width), var(--border-width) var(--border-width) ) }


/* --------------- BIGTEXT --------------- */
section.has-bigtext .container {
    & > h2:first-child { margin-top: 0; margin-bottom: 7rem; }
    & > p { padding-block: 1rem;  font-weight: var(--font-medium); font-size: var(--font-size-h1);  line-height: var(--line-height-medium); max-width: 25em; margin-bottom: 2rem; }
    & > p .word { color: var(--my-soft-black); transition: color 1s;  }
    & > p .word[data-lit=true] { color: var(--my-soft-white);}
}

/* --------------- PARALLAX --------------- */
p:has(img.parallax) { display: flex; }
img.parallax { --parallax-ratio: 5; width: 100%; aspect-ratio: var(--parallax-ratio); object-fit: cover; animation: parallax linear both; animation-timeline: view(); }
@keyframes parallax { from { object-position: center 0%; } to { object-position: center 100%; } }
@media only screen and (max-width: 1000px) { img.parallax { --parallax-ratio: 1.9; } }
@media only screen and (max-width: 600px)  { img.parallax { --parallax-ratio: 1; } }
@media (prefers-reduced-motion: reduce)    { img.parallax { animation: none; } }

/* The same pan on every other still. The header is left out -- its still has
   the slow zoom instead -- and so is everything that is not a photograph: the
   blueprint overlay, the facility diagram with its hotspots pinned to it,
   portraits, ui icons. Carousel slides are out too; they already travel, and
   sideways.

   `img.parallax` above brings its own letterbox crop. These do not: they pan
   inside whatever box their context already gives them, which keeps the crop
   a design decision rather than something this rule imposes. The corollary is
   that a photo cut no taller than its box has nothing to travel through, and
   the pan is inert on it. */
div.crafts .images img,
section.fullwidth-image img:not(.parallax) {
    animation: parallax linear both;
    animation-timeline: view();
}
@media (prefers-reduced-motion: reduce) {
    div.crafts .images img,
    section.fullwidth-image img:not(.parallax) { animation: none; }
}


/* --------------- SECTIONS --------------- */
/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; color: var(--main-color); padding-block: 1rem 0.675rem; user-select: none; transition: transform 0.3s ease; }
header::before { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--background-color);}
header .container { margin-block: 0}
header .container nav { display: flex; justify-content: space-between; align-items: center; }
header .container nav ul { display: flex; gap: 1.8rem; padding-top: 1.1rem; }
header a { font-weight: var(--font-medium); user-select: none; text-decoration: none; }
header button { display: none; width: 2.4rem; height: 2.4rem; background: url(/img/menu.svg) center center / contain no-repeat; color: transparent; overflow: hidden; cursor: pointer; position: relative; left: 0.4rem; }

body.header-hidden header { transform: translateY(-100%); }
body.menuopen header button { background: url('/img/close.svg') center center / contain no-repeat; }

@media (max-width: 1000px) {
    header button { display: block; }
    header .container nav ul { position: absolute; bottom: 0; left: 0; width: 100%;  flex-direction: column; justify-content: center; text-align: center; gap: 0; margin: 0; padding-block: 0 1rem; background: var(--background-color); pointer-events: none; transition: transform 0.25s ease-in-out; transform: translateY(0%); z-index: -1; }
    header .container nav ul li { opacity: 0; pointer-events: none; transition: none; }
    header .container nav ul li a { display: block; padding-block: 0.35rem; font-size: var(--font-size-h5); }
   
    body.menuopen header .container nav ul { transform: translateY(100%); opacity: 1; pointer-events: all; }
    body.menuopen header .container nav ul li { opacity: 1; pointer-events: all; transition: opacity 0.3s ease-in-out; transition-delay: 0.15s; }
}


/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */
footer { color: var(--my-white); background: var(--my-black); overflow: clip;}
footer a { text-decoration: none;}
footer .container { display: grid; grid-template-columns: 1fr; margin: 0 auto; }
footer .left { grid-row: span 2; padding-block: 3rem;  grid-template-columns: auto auto; display: grid;  grid-gap: 3rem; max-width: 35rem; }
footer .left .logo { filter: brightness(0) invert(1); width: 7.55rem; position: relative; display: block; grid-column: -1/1; }
footer .left .logo svg { width: 100%; }
footer .left > ul > li:first-of-type { font-weight: var(--font-medium); }
footer .left > ul > li { margin-bottom: .33rem;}
footer .left address strong { font-weight: var(--font-medium);}
footer .left address em { opacity: .5;}

footer .left:has(ul > li:nth-of-type(7)) { grid-template-columns: 1fr;}
footer .left > ul:has(li:nth-of-type(7)) { display: grid; grid-template-columns: auto 1fr 1fr; grid-column: -1/1; grid-gap: 0 2rem;}
footer .left > ul:has(li:nth-of-type(7)) > li:first-of-type { grid-column: 1; }
footer .left > ul:has(li:nth-of-type(7)) > li:not(:first-of-type) a { opacity: .6;}
footer .left > ul:has(li:nth-of-type(7)) > li:not(:first-of-type) a:hover { opacity: 1;}

footer .large { display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem; align-items: center;  font-size: var(--font-size-h1); line-height: var(--line-height-tiny); padding: 3rem 2rem;  position: relative; transition: color 250ms; font-weight: var(--font-medium);   }
footer a.large:hover { color: var(--my-white-40);}
footer a.large:hover::after { opacity: .4;}
footer a.large::after { content: ''; width: 4rem; height: 3.5rem; background: url('/img/arrow-right-new.svg') center center / contain no-repeat; display: inline-block;  margin-left: auto;  transition: opacity 250ms;}
footer a.large:nth-child(2):last-child { grid-row: span 1;}

footer .postfooter { background: var(--my-full-black); padding-block: 1.5rem;}
footer .postfooter .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
footer .postfooter p { margin-bottom: 0;}
footer .postfooter ul { display: flex;  gap: 1rem;}

@media only screen and (min-width: 1025px) {
    footer .container { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;}
    footer .left { padding-right: 2rem; border-right: 1px solid var(--my-white-40); max-width: unset; }
    footer .large:nth-child(2)::before { content: ""; position: absolute; bottom: 0; left: 0; width: 50vw; background: var(--my-white-40); height: 1px; }
    footer .large:last-child::before { display: none;}
}

@media only screen and (max-width: 1024px) {
    footer .large:nth-child(2)::before { position: absolute; top: 0; left: calc(var(--gutter-side) * -1); width: calc(100% + var(--gutter-side) * 2); height: 100%; border-block: 1px solid var(--my-white-40); content: "";  }
}

@media only screen and (min-width: 769px) {
    footer .left > ul:has(li:nth-of-type(7)) > li:nth-of-type(2n+2) { grid-column: 2; }
}


@media only screen and (max-width: 768px) {
    footer .left { grid-template-columns: 1fr;}
    footer .large { font-size: var(--font-size-huge); padding-inline: 0;}
    footer .large::after { width: 3rem; height: 2rem;}
    footer .postfooter .container { display: flex; flex-direction: column; align-items: center; }
    footer .postfooter ul { justify-content: center; flex-wrap: wrap; width: 100%;  order: -1; gap: .5rem 1.5rem; margin-bottom: 2rem;  }
    footer .socials { display: flex; justify-content: center; }
    footer .postfooter ul:not(:has(li)) { display: none; }
    /* Two columns read in the wrong order on a phone: one plain left-aligned
       list instead, with `Inocea` still heading it. */
    footer .left > ul:has(li:nth-of-type(7)) { display: block; }
}


/* =========================================================== */
/* ======================== HAS-VIDEO ======================== */
/* =========================================================== */
section.has-video:first-of-type { 
    padding-block: 0 2rem;

    & + section { padding-top: 2rem;}
    & .container { display: flex; flex-direction: column; }
}

/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
section.header h1 { max-width: 22em; margin-top: 2rem;}
section.header h1:last-child { margin-bottom: 0;}

/* The group's opener, lifted from inocea.com: the hero creeps from scale(1) to
   scale(1.15) over twenty seconds from load -- slow enough that you feel it
   rather than watch it -- and the copy under it rises into place once. Both
   are that site's own numbers (`zoomin` 20s forwards, `fadein` 1.25s after
   0.5s). It is a duration, not a scroll: the zoom runs whether or not the
   reader moves.

   Only a still gets the zoom. Footage already moves on its own, and pushing a
   slow scale through it fights the shot and softens it.

   `.media` is the slot the header bricks wrap their image or video in. It is
   what keeps the scaled still off the heading below, and what holds the media
   out of the fade stagger the copy runs on. */
section.header .media { overflow: clip; }
section.header .media > :is(img, video) { display: block; }

@keyframes slow-zoom { from { scale: 1; } to { scale: 1.15; } }

@media (prefers-reduced-motion: no-preference) {
    section.header .media > img {
        transform-origin: 50% 50%;
        animation: slow-zoom 20s forwards;
    }
    /* Child 1 is `.media`, so the heading is child 2 and the copy follows it.
       Only below 1000px: wider than that the line reveal takes the copy (see
       REVEAL), and the two would be animating the same words past each other. */
    @media (max-width: 999px) {
        section.header .container > :not(.media) { animation: fade-in 1.25s var(--delay, .5s) backwards; }
        section.header .container > :not(.media):nth-child(3)   { --delay: .6s; }
        section.header .container > :not(.media):nth-child(4)   { --delay: .7s; }
        section.header .container > :not(.media):nth-child(n+5) { --delay: .8s; }
    }
}

@media only screen and (min-width: 769px) {
    section.header h2 ~ * { margin-left: var(--margin-left);}    
}



/* =========================================================== */
/* ========================= BLOCKS ========================== */
/* =========================================================== */
section.has-blocks { 
    & h1 { font-size: var(--font-size-h2); max-width: 28em;}
    & h2 ~ :not(.blocks) { max-width: 40em;}
    & ul.blocks {  
        display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-top: 2.5rem; cursor: pointer; 

        &:has(> *:last-of-type:nth-of-type(odd)) > *:nth-child(2) {grid-column: span 2; aspect-ratio: auto;}
        & > li { 
            background: var(--my-soft-black); aspect-ratio: 1/1; color: var(--my-soft-white); padding: 1.5rem 1rem; position: relative; display: flex; flex-direction: column; justify-content: flex-end; 
            
            &::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(28,28,28,1) 0%, rgba(28,28,28,0) 75%);}
            & ul { padding-left: .8rem;}
            & ul li { margin-bottom: .5rem;}
            & ul li::before { content: '>'; display: block; position: absolute; margin-left: -.8rem;}
            
            & > * { position: relative; z-index: 2; }

            & > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 333ms; overflow: clip;}
            & > div > * { min-height: 0;}
            &:is(.active,:hover) > div { grid-template-rows: 1fr;}
        
        }
    }
    @media screen and (max-width: 1450px) {
        & ul.blocks {grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));}
    }
    @media screen and (max-width: 1250px) {
        & ul.blocks { display: flex; flex-wrap: wrap; }
        & ul.blocks > li {flex: 1; min-width: min(20rem, 100%); aspect-ratio: 1!important;}
    }
    @media (pointer: coarse) {
        & ul.blocks > li div { grid-template-rows: 1fr;}
    }
}


/* =========================================================== */
/* ======================= LARGE LIST ======================== */
/* =========================================================== */
section.large-list .container {
    & > ul { margin-top: 2.75rem; margin-left: var(--margin-left); }
    & > ul > li { border-bottom: 1px solid var(--my-black-40); padding: 1.25rem 0; }
    & > ul > li:first-child { border-top: 1px solid var(--my-black-40); }
    & > ul > li strong:first-child { font-weight: var(--font-medium); font-size: var(--font-size-h5); display: block; }
    & > ul > li > p:first-child:not(:last-child) { margin-bottom: .8em; }
    & > ul > li ul { padding-left: .8rem;}
    & > ul > li ul li { margin-bottom: .25em;}
    & > ul > li ul li::before { content: '>'; display: block; position: absolute; margin-left: -.8rem;}
    
    
    @media only screen and (max-width: 768px) {
        & > ul > li strong:first-child { font-size: var(--font-size-h3); margin-bottom: .2em;}
    }
} 



/* =========================================================== */
/* ======================== FACILITY ========================= */
/* =========================================================== */
div.facility {
    display: grid; grid-template-columns: 1fr 20rem; padding: 0 !important; align-items: flex-start; grid-gap: 1rem; 
     
    & figure {position: relative; display: flex; align-items: flex-start;  }
    & img { width: 100%;  }
    
    & .dots {  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
    & .dots li { position: absolute; left: var(--left); top: var(--top);  padding: 0; width: 1rem; height: 1rem; clip-path: none;
        &::before { display: none; }
        & button { position: relative; width: 100%; height: 100%;  transform: translate(-50%, -50%); border-radius: 50%; background: #494949; transition: background 333ms;  border: none; cursor: pointer; }
        & button::before { position: absolute; top: 50%; left: 50%; width: 160%; height: 160%; border-radius: 50%; border: 1px solid #CB4520; content: ""; transform: translate(-50%, -50%) scale(var(--scale, 0)); transition: transform 333ms, border-color 333ms; }
        & button::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; border-radius: 50%; content: ""; }
        & button:is(:hover,.active) { background: #CB4520; }
        &:has(button.active) { z-index: 2; }
    }
    & .dots li button.active::before { --scale: 1;  }
    
    & .captions { height: 100%;  margin-inline: auto;  width: 100%; }
    & .captions > li { padding: 1rem .5rem; height: 100%; animation: fade-in 500ms forwards;   display: none; }
    & .captions > li.active {  display: block;  }
    & .captions > li::before { display: none; }
    & .captions > li > * {padding-inline: .5rem;}
    & .captions > li h3 { max-width: unset; margin-block: unset; position: relative;  font-size: 1rem; font-weight: var(--font-bold);}
    & .captions > li h2 { padding-block: .5rem 2rem; margin-bottom: 1rem; padding-right: 2rem;  display: flex;  margin-top: 0;}
    & .captions > li h2::before { position: relative; display: block; margin-right: 1rem; margin-top: .5rem;  content: ""; flex-shrink: 0; width: .9rem; height: .9rem;  border-radius: 50%; background: #CB4520; box-shadow: 0 0 0 4px #1c1c1c, 0 0 0 5px #CB4520;}
    & .captions > li hr { padding-block: 1rem; margin-block: auto; height: 1px; border-top: 1px solid rgba(255, 255, 255, 0.4); }

    .buttons { position: absolute; bottom: 0.5rem; right: 0.5rem;  display: flex; gap: .25rem; }

    @media only screen and (max-width: 1024px) {
         grid-template-columns: 1fr;
        & .dots li { width: 0.8rem; height: 0.8rem; }
    }
}


/* =========================================================== */
/* ==================== CURTAIN CAROUSEL ===================== */
/* =========================================================== */
/* --------------- CARROUSEL --------------- */
section.has-carousel { padding-block: 0; background: var(--my-black); overflow: clip; }
section.has-carousel .container {width: 100%;  }
figure.curtain-carousel { display: flex; position: relative; flex-direction: column; 
    
    & .slider { position: relative; }
    & .slider ul { display: flex; overflow: auto; scroll-snap-type: x mandatory;  margin: 0;  -ms-overflow-style: none; scrollbar-width: none;  scroll-behavior: smooth;}
    & .slider ul::-webkit-scrollbar { display: none; } 

    & .slider ul > li { flex-shrink: 0; width: 100%; scroll-snap-align: center; display: flex; }
    & .slider li img { user-select: none;}
    
    & .buttons { position: relative; }
    
    & .indicators { position: absolute; left: 0; right: 0; margin: 0 auto; z-index: 2; bottom: .8em;  display: flex; justify-content: center; gap: .6em;  pointer-events: none; }
    & .indicators > button { --_size: .8em; width: var(--_size); height: var(--_size);  border-radius: 50%;  transition: transform 500ms; pointer-events: all; position: relative; border: none; background: var(--my-soft-white);   opacity: .5; cursor: pointer; }
    & .indicators > button::before { content: ""; position: absolute;  --_excess: -0.15em; top: var(--_excess); left: var(--_excess); width: calc(100% - var(--_excess) * 2); height: calc(100% - var(--_excess) * 2); }
    & .indicators > button[data-active=true] {  transform: scale(1.3);   opacity: 1;}
    
    & .bottom { display: grid; grid-template-columns: 1fr auto; color: var(--my-soft-white); padding: 2rem var(--gutter-side) 2rem var(--gutter-side);  }
    & .bottom .buttons { margin-top: 2.5rem; gap: 1rem;  }
    
    & .bottom h3 { position: relative; max-width: unset; }
    & .bottom > ul { position: relative; margin: 0; display: grid; max-width: 35rem; }
    & .bottom > ul > li { grid-area:-1/1; opacity: 0; transition: opacity 333ms 125ms;}
    & .bottom > ul > li[data-active=true] { opacity: 1; transition: opacity 333ms 0ms}
    
    &[data-pos="left"] .bottom .buttons button:first-of-type,
    &[data-pos="right"] .bottom .buttons button:last-of-type {opacity: .3; pointer-events: none;}

    & .slider::before,
    & .slider::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: var(--my-black);  z-index: 3;  transition: transform 500ms 500ms;}
    & .slider::after { right: 0; left: unset;}
    &.in-view .slider::before { transform: translateX(-100%);}
    &.in-view .slider::after { transform: translateX(100%);}

    @media only screen and (max-width: 768px) {
        & .bottom { padding: 1rem;  align-items: flex-end; gap: 1rem; }
        & .bottom h3 { margin-bottom: .8rem;}
        & .bottom h3:last-child { margin-bottom: 0; }
    }
}


/* =========================================================== */
/* ===================== FULLWIDTH IMAGE ===================== */
/* =========================================================== */
section.fullwidth-image { padding: 0; }
section.fullwidth-image .container { width: 100%; max-width: var(--max-width-ultra-wide);}

/* =========================================================== */
/* ======================= LEADERSHIP ======================== */
/* =========================================================== */
.leadership {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 3rem 1rem;

    li {padding: 0!important;}
    li::before {content: none!important;}
    li h3 {position: relative; font-size: 1.3rem; max-width: 100%; font-weight: 600;}
    li img {width: 100%; height: auto; margin-bottom: 0.81rem;}
}

/* =========================================================== */
/* ========================== PAGE =========================== */
/* =========================================================== */
body:has(section.page) header .logo svg { filter: brightness(0) invert(1);}
body:has(section.page),
body:has(section.page) header,
section.page { background: var(--my-black); color: var(--my-soft-white);}
section.page .container { max-width: 45rem; padding-block: 3rem;}



/* =========================================================== */
/* ===================== HAS SHIP OUTLINE ==================== */
/* =========================================================== */
section.has-bigtext:has(+section.has-outline) { padding-bottom: 0; display: flex; flex-direction: column; background: var(--my-black);}
section.has-outline .container h2 { margin-top: 0; }
section.has-outline .container h2 ~ *:not(p:has(img.ship-outline)) { max-width: 30em;}
section.has-outline img.ship-outline { opacity: .5; margin-top: -20%; }

@media only screen and (min-width: 769px) {
    section.has-outline .container { padding-bottom: 12rem;}
    section.has-outline img.ship-outline { position: absolute;  top: 4rem; bottom: 0; right: 0; width: calc(100% - 10em); margin-top: 0; max-width: 50rem; }
}


/* =========================================================== */
/* ===================== TEXT AND VIDEO ====================== */
/* =========================================================== */
section .split { display: grid;  align-items: center; grid-gap: 2rem; max-width: 40rem; margin-inline: auto;  }
section .split:not(:last-of-type) { margin-bottom: 6rem; }

@media only screen and (min-width: 1025px) {
    section .split {grid-template-columns: 1fr 1fr; max-width: unset;}
    section .split:not(:last-of-type) { margin-bottom: 4rem; }
}


/* =========================================================== */
/* ========================= CRAFTS ========================== */
/* =========================================================== */
section.has-crafts { --overlap: 10rem; --arrows-below: 0rem; background: linear-gradient(var(--my-black) calc(100% - var(--margin-y) - var(--overlap)), var(--my-soft-white) 0); }
div.crafts {
    position: relative; 
    & .top { display: flex; justify-content: space-between; gap: 2rem; margin-block: 3.5rem 2rem; }
    & .tabs { display: flex; gap: 3rem; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
    & .tabs button {  font-size: var(--font-size-h5); font-weight: var(--font-medium); white-space: nowrap; background: none; color: var(--my-white-40); padding-bottom: .75rem; border-bottom: 2px solid transparent; transition:  250ms; transition-property: border-color,color; }
    & .tabs button:hover { color: var(--my-soft-white); }
    & .tabs button.active { color: var(--my-white); border-color: var(--my-white); }
    & .buttons { flex-shrink: 0; }

    & .images { display: grid; }
    & .images > li { grid-area: 1 / 1; opacity: 0; transition: opacity 500ms 300ms; overflow: clip; }
    & .images > li.active { opacity: 1; transition-delay: 0s;  z-index: 2;}
    & .images img { display: block; aspect-ratio: 16 / 9; object-fit: cover; }

    /* The same twenty-second creep the hero gets, picked up where the photo's
       fade leaves off -- `--delay` is the fade's own, `.8s` is its length. It
       hangs off `.active` rather than the section, so each craft starts from
       scale(1) when you turn to it instead of quietly burning through its
       twenty seconds behind a tab nobody has opened. `overflow: clip` on the
       li above is what keeps the growing photo inside its frame. */
    @media (prefers-reduced-motion: no-preference) {
        & .images > li.active img { transform-origin: 50% 50%; }
        .reveal.visible & .images > li.active img {
            animation: slow-zoom 20s calc(var(--delay, 0s) + .8s) forwards;
        }
    }

    @media only screen and (max-width: 768px) {
        /* Room under the photo for the arrows, which on a phone sit below it
           rather than on top of it -- on a touch screen they covered the boat. */
        padding-bottom: var(--arrows-below);

        & .top { gap: 1rem; margin-top: 2rem; margin-left: calc(var(--gutter-side) * -1); width: calc(100% + var(--gutter-side) * 2);  }
        /* No room to scroll a name off the edge on a phone, so the ones that
           do not fit are cut with an ellipsis instead. The tab you are on keeps
           its full name wherever there is room for it, which puts the squeeze
           on the ones you are not reading -- and the arrows below the photo are
           how you reach those anyway. */
        & .tabs { gap: 1.5rem; padding-inline: var(--gutter-side); overflow: hidden; }
        & .tabs li { min-width: 0; max-width: 100%; }
        & .tabs li:has(button.active) { flex-shrink: 0; }
        & .tabs button { font-size: var(--font-size-small); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
        & .buttons { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 3;  }
        /* Below the photo the arrows stand on the tinted band, not on the boat,
           so they take the dark ink instead of the white they wore on the image. */
        & .buttons.outline button { color: var(--my-black); }
        & .buttons.outline button:hover { background: var(--my-black); border-color: var(--my-black); color: var(--my-soft-white); }
    }
}
@media only screen and (max-width: 768px) {
    /* The tinted band still has to break the same distance up the photo, so it
       clears the row of arrows the section grew by. */
    section.has-crafts { --arrows-below: 3.5rem; --overlap: calc(4rem + var(--arrows-below)); }
}


/* =========================================================== */
/* ====================== PUBLICATIONS ======================= */
/* =========================================================== */
section.image-header + section.has-publications { padding-top: 0;}
section.has-publications { background: var(--my-white);}
section.has-publications .publications { 
     display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem 2rem;
     & li { display: flex; flex-direction: column; padding: 1rem; background: var(--my-soft-white);  position: relative; }
     & span { order: -1; display: block;  font-size: var(--font-size-h6);}
     & h3 { margin-block: 2rem; transition: color 250ms; }
     & a { display: inline-block; margin: auto 0 0 auto;  }
     & a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
     & a::before { content: ''; display: block;  width: 2rem; height: 1.75rem; background: url('/img/arrow-right-black.svg') center center / contain no-repeat; }

     /* The arrow fading on its own (via `:is(ul,ol,p) a:hover`) was too quiet a
        hover, so the title goes with it -- the same move the big `Contact us`
        link in the footer makes. */
     & li:hover h3, & li:has(a:focus-visible) h3 { color: var(--my-black-40); }

     @media only screen and (max-width: 768px) {
          grid-template-columns: 1fr;
     }
 }


/* --------------- LEGAL --------------- */
body.legal { --background-color: var(--my-black); --main-color: var(--my-soft-white); }
body.legal :is(.logo, header button) { filter: brightness(0) invert(1)}
body.legal section.wide .container { max-width: 40rem; padding-top: 2rem; }
body.legal footer { border-top: 1px solid var(--my-white-40);}

/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.5em 0 0;}
.prose img,  .prose iframe { width: 100%; } 
.prose ul, .prose ul ul ul { list-style: none}
.prose ul > li, .prose ul ul ul > li { margin-bottom: .5em;}
.prose ul > li::before, .prose ul ul ul > li::before { content: ">"; display: inline-block; margin-right: .3em; }
.prose ul ul,.prose ul ul ul ul { list-style: circle; }
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--main-color);}
.prose > * strong { font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.btn) { text-decoration: underline; }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4) + :is(h1,h2,h3,h4) { margin-top: .2em;}
.prose p + ul { margin-top: 1em;}



/* --------------- MEDIA QUERIES --------------- */
/* MIN */


/* MAX */
@media only screen and (min-width: 769px) {
    :root { 
        --margin-left: 30%; 
    }
}
@media only screen and (max-width: 768px) {
    :root { 
        --gutter-top: 1rem; 
        --gutter-side: 1rem; 

        --font-size-huge:  2.5rem;             
        --font-size-h1:    1.5rem;           
        --font-size-h2:    1.4rem;             
        --font-size-h3:    1.3rem;           
        --font-size-h4:    1.2rem;           
        --font-size-h5:    1.1rem;           
        --font-size-h6:    1rem;     
    }
}

@media only screen and (max-width: 350px) {
    html { font-size: 4.575vw;}
    :root { 
        --font-size-body:  .8rem;  
        --font-size-small: .7rem;  
        --font-size-tiny:  .6rem;  
    }
}

/* --------------- REVEAL --------------- */
/* Copy arrives from its own base, as on daviedefense.com: `.line-wrap` clips a
   line, `.line-inner` sits a line-height below it, and `visible` on the section
   walks them up on a stagger. `scroll-reveal.js` writes the wrappers, sets the
   `--delay` per line and takes them out again once the section has landed. */
.reveal .line-wrap { display: block; overflow: hidden; }
.reveal .line-inner { display: block; white-space: nowrap; transform: translateY(110%); }
.reveal.visible .line-inner {
    transform: translateY(0);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
}

/* Photographs fade instead; `scroll-reveal.js` picks them and times them. */
.reveal .fade-in { opacity: 0; }
.reveal.visible .fade-in { opacity: 1; transition: opacity .8s ease var(--delay, 0s); }

/* The rule under a heading would otherwise sit there on its own while the
   heading is still below its clip, and so would a list marker: both are
   painted outside the wrap that hides the words. */
.reveal :is(h1, h2, h3) { border-color: transparent; }
.reveal.visible :is(h1, h2, h3) { border-color: var(--my-black-40); transition: border-color 1.5s ease var(--delay, 0s); }
.reveal.dark.visible :is(h1, h2, h3) { border-color: var(--my-white-40); }
.reveal li::before { opacity: 0; }
.reveal.visible li::before { opacity: 1; transition: opacity .6s ease var(--delay, 0s); }

/* Except the prose marker, which is an inline-block sitting in the line rather
   than beside it: a block-level wrap next to that drops the words onto the line
   below. While the lines are wrapped the marker moves inside the first one, so
   it rides up with its own text and the wrap has the line to itself. The widths
   are unchanged, so the line breaks measured a moment earlier still hold. */
.reveal .prose ul > li:has(> .line-wrap)::before { content: none; }
.reveal .prose ul > li > .line-wrap:first-child .line-inner::before { content: ">"; display: inline-block; margin-right: .3em; }

@media (prefers-reduced-motion: reduce) {
    .reveal .line-inner { transform: none; }
    .reveal :is(li::before, .fade-in) { opacity: 1; }
}


/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion) { }
  

/* --------------- ANIMATIONS --------------- */
@view-transition {navigation: auto;}
@keyframes fade-in  {
    from { opacity: 0; transform: translateY(1rem);}
    to { opacity: 1; transform: none;}
}