/* ==========================================================================
   Treasure Island Construction — shell stylesheet

   Tokens, base, nav, menu card, footer and the page-transition shutter. That
   is all: every page section ships its own file (hero.css, crosshair.css,
   services.css, project.css, contact.css) loaded after this one.

   Rule bodies are copied verbatim out of the vendored references — only the
   CSS-module hashes were dropped from the selectors:
     reference/senawa/tokens-and-base.css   -> §1
     reference/senawa/nav.css               -> §2  (.Nav-module__bLoQaq__* -> .nav-*)
     reference/stanzza/menu-button.css      -> §3  (1rem there = 18px, converted)
     reference/senawa/footer.css            -> §4  (.Footer-module__Grjkva__* -> .ft-*)
     reference/senawa/page-transition.css   -> §5  (.PageTransition-module__* -> .pt-*)
   Do not "tidy" the values; they are measurements.
   ========================================================================== */


/* =========================================================================
   1. TOKENS + BASE — reference/senawa/tokens-and-base.css
   Senawa is a Next.js build and injects --font-sans / --font-sora from
   next/font. We have no such injection, so they are defined here first —
   without them every var(--font-body) declaration is invalid at computed
   value time and the whole site falls back to Times.
   Dropped from the reference: the ::view-transition block (we use the wool
   shutter instead) and html.no-scroll (the hero does not lock the page).
   ========================================================================= */
:root{--font-sans:"Inter";--font-sora:"Sora";--wool:#f6f2eb;--linen:#ede6d8;--sand:#d4c9b4;--oak:#a8967e;--walnut:#6b5a48;--slate:#302620;--lichen:#4a5247;--flax:#8c7b5c;--color-bg:var(--wool);--color-text:var(--slate);--color-text-sub:var(--slate);--color-text-caption:var(--slate);--color-border:var(--sand);--font-body:var(--font-sans), "Inter", "Helvetica Neue", sans-serif;--font-display:var(--font-sora), "Sora", var(--font-sans), "Helvetica Neue", sans-serif;--font-accent:var(--font-sora), "Sora", var(--font-sans), "Helvetica Neue", sans-serif;--leading-tight:1.2;--leading-body:1.75;--space-comfortable:24px;--space-breathing:40px;--space-section-padding:80px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-settle:cubic-bezier(.76, 0, .24, 1);--duration-quick:.3s;--duration-fast:.4s;--duration-mid:.6s;--duration-slow:.9s;--scrim-ink:22, 17, 13;--hairline-on-dark:#f6f2eb24;--seam-on-dark:#f6f2eb33;--rule-light:#dcd2bf;--clay:#7a3a20;--umber:#8a5a2b;--radius-sm:2px;--radius-md:4px;--z-badge:90;--z-nav:100;--z-nav-trigger:110;--z-overlay:200;--z-skip:1000;--z-transition:9000;--z-preloader:9999}
*,:before,:after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:14px}
body{font-family:var(--font-body);color:var(--color-text);background-color:var(--color-bg);font-weight:300;line-height:var(--leading-body);font-variant-numeric:tabular-nums;overflow-x:hidden}
:focus-visible{outline-offset:3px;outline:2px solid}
:focus:not(:focus-visible){outline:none}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;font-weight:300;line-height:var(--leading-tight)}
h1{font-size:clamp(1.5rem,2.6vw,2.25rem)}
h2{font-size:clamp(1.25rem,1.8vw,1.625rem)}
h3{font-size:clamp(1.0625rem,1.3vw,1.25rem)}
.section-label{font-family:var(--font-body);letter-spacing:.18em;font-size:10px;font-weight:500;line-height:var(--leading-tight);text-transform:uppercase;color:var(--color-text-caption)}
.container{width:100%;max-width:1440px;margin-left:auto;margin-right:auto;padding-left:140px;padding-right:140px}
@media (max-width:1439px){.container{padding-left:80px;padding-right:80px}}
@media (max-width:1023px){.container{padding-left:40px;padding-right:40px}}
@media (max-width:767px){.container{padding-left:24px;padding-right:24px}}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background-color:var(--sand);color:var(--slate)}
html{scrollbar-width:thin;scrollbar-color:var(--sand) var(--wool)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--wool)}
::-webkit-scrollbar-thumb{background:var(--sand);border-radius:3px}
.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
.skip-link{z-index:var(--z-skip);background-color:var(--slate);color:var(--wool);font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius-sm);transition:transform .2s var(--ease-out);padding:10px 16px;font-size:12px;font-weight:500;text-decoration:none;position:fixed;top:8px;left:8px;transform:translateY(-150%)}
.skip-link:focus{outline:2px solid var(--wool);outline-offset:2px;transform:translateY(0)}
#main-content:focus{outline:none}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}


/* =========================================================================
   2. NAV BAR — reference/senawa/nav.css
   Fixed, transparent, pointer-events:none on the bar and auto on the three
   children. Menu button pinned left, wordmark centred, nothing right.
   Senawa's drawer / search / backdrop rules are not carried over — the
   Stanzza card in §3 replaces them. The responsive paddings come from the
   spec §2.1 (the vendored file only has the 28px/60px desktop pair).
   ========================================================================= */
.nav{z-index:var(--z-nav);pointer-events:none;transition:background-color .5s var(--ease-out), padding .5s var(--ease-out), transform .34s ease-out;background-color:#0000;padding:28px 60px;position:fixed;top:0;left:0;right:0}
@media (max-width:1023px){.nav{padding:24px 40px}}
@media (max-width:767px){.nav{padding:20px 24px}}
.nav-inner{justify-content:center;align-items:center;max-width:1440px;margin:0 auto;display:flex;position:relative}
.nav-wordmark{font-family:var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--color-text);pointer-events:auto;transition:opacity var(--duration-fast) var(--ease-out);font-size:18px;font-weight:500;text-decoration:none;position:relative}
.nav-wordmark:hover{opacity:.7}
.nav-wordmark:before{content:"";width:100%;min-width:56px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.nav-wordmark img{width:auto;height:32px}
/* Home only: the dark hero bar carries the crest at 40px (client asked for a
   bigger logo, 2026-09-22). The preloader wordmark in hero.css matches so the
   hand-off stays a pure translate. Light pages keep 32px. */
.nav--dark .nav-wordmark img{height:40px}
/* At 32px the crest is 82px wide, and under ~360px that runs into the MENU
   pill parked at the left edge (they overlap by 7px at 320). Step it down
   below the narrowest phone we lay out for. */
@media (max-width:359px){.nav-wordmark img{height:20px}.nav--dark .nav-wordmark img{height:24px}}
.nav-menu{z-index:var(--z-nav-trigger);cursor:pointer;color:var(--color-text);pointer-events:auto;background:0 0;border:none;align-items:center;display:flex;position:absolute;left:0}
.nav-menu:before{content:"";width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* Senawa's .navHome colours — the bar sits over the hero photograph, so the
   ink is wool and the dark wordmark webp is knocked out to white. */
.nav--dark .nav-menu,.nav--dark .nav-wordmark{color:var(--wool)}
.nav--dark .nav-wordmark img{filter:brightness(0) invert(1)}
.nav--light .nav-menu,.nav--light .nav-wordmark{color:var(--color-text)}

/* Senawa's `.nav.scrolled` (reference/senawa/nav.css): once the bar clears
   the hero photograph it takes the page background and tightens its padding.
   Only the dark bar needs it — the knocked-out white wordmark and the wool
   MENU pill are invisible against the cream section that follows the hero.
   site/js/menu.js toggles the class off the hero's height. */
.nav.is-scrolled{background-color:var(--nav-scrolled-bg,var(--color-bg));padding-top:20px;padding-bottom:20px}

/* Stanzza's header hide-on-scroll (spec §2): past 5vh, scrolling down lifts
   the whole bar out; scrolling up brings it back. Never while a menu is
   open — site/js/menu.js owns that guard. */
.nav.is-hide{transform:translateY(-110%)}
.nav--dark.is-scrolled .nav-menu,.nav--dark.is-scrolled .nav-wordmark{color:var(--color-text)}
.nav--dark.is-scrolled .nav-wordmark img{filter:none}
.nav--dark.is-scrolled .nav-menu{background-color:color-mix(in srgb,transparent,var(--sand) 40%);color:var(--slate)}


/* =========================================================================
   3. MENU BUTTON + CARD — reference/stanzza/menu-button.css
   .u-btn.blur + .u-btn-awards, converted from Stanzza's 18px root:
     .555556rem .888889rem -> 10px 16px      .333333rem -> 6px
     1.111rem -> 20px (icon)                 16.6667rem -> 300px (card)
     1.33333rem -> 24px (card padding/gap)   .444444rem -> 8px
   Stanzza's --_color---milk (#e5e4dc) stays literal in the color-mix; the
   ink becomes var(--wool).
   ========================================================================= */
.nav-menu{grid-column-gap:6px;grid-row-gap:6px;gap:6px;background-color:color-mix(in srgb,transparent,#e5e4dc 24%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--wool);font-family:var(--font-body);font-size:12px;line-height:1.18;font-weight:400;text-align:center;letter-spacing:.16em;text-transform:uppercase;border-radius:2px;justify-content:center;align-items:center;padding:10px 16px;transition:all .3s ease-out;display:flex}
.nav-menu:hover{background-color:color-mix(in srgb,transparent,#e5e4dc 40%)}
.nav-menu:active,.nav-menu:focus,.nav-menu:focus-visible{background-color:color-mix(in srgb,transparent,#e5e4dc 54%)}
.nav--light .nav-menu{background-color:color-mix(in srgb,transparent,var(--sand) 40%);color:var(--slate)}
.nav--light .nav-menu:hover{background-color:color-mix(in srgb,transparent,var(--sand) 60%)}
.nav--light .nav-menu:active,.nav--light .nav-menu:focus,.nav--light .nav-menu:focus-visible{background-color:color-mix(in srgb,transparent,var(--sand) 75%)}

/* .u-btn-awards — the two stacked labels; the second is parked one line down
   and both slide up together on hover of the button. */
.nav-menu-labels{flex-flow:column;display:flex;position:relative;overflow:hidden}
.nav-menu-label{transition:all .4s cubic-bezier(.32,.72,0,1)}
.nav-menu-label.is-second{top:12px;padding-top:2px;position:absolute}
.nav-menu:hover .nav-menu-label{transform:translateY(-100%)}
.nav-menu-icon{color:currentColor;width:20px;min-width:auto;height:20px;min-height:auto;justify-content:center;align-items:center;transition:all .3s;display:flex}
.nav-menu:hover .nav-menu-icon{transform:scale(.85)}
.nav-menu-ico{width:20px;height:20px;display:block}
.nav-menu-ico.is-close{display:none}
.nav-menu[aria-expanded=true] .nav-menu-ico.is-open{display:none}
.nav-menu[aria-expanded=true] .nav-menu-ico.is-close{display:block}

/* The dropdown (spec §2, Webflow DROPDOWN_OPEN `a-3` / DROPDOWN_CLOSE `a-4`).
   No CSS transition here: site/js/menu.js animates `.nav-card`'s height
   0 -> scrollHeight -> auto over 450ms easeOut with an inline transition,
   and the rule's width 0 -> 100% over 200ms linear, delayed 400ms. The card
   must keep overflow:hidden or the content spills while the box is short;
   `.nav-card-inner` carries the padding so its scrollHeight is the target.
   Measured on stanzza.design: card at top 68px (= button bottom + 4px),
   300px wide, wool #f4f3eb, radius 2px, padding 24px, link rows 32px tall,
   rule 1px #d8d6cb. Link hover measured as NO change — do not add one. */
.nav-card-wrap{z-index:var(--z-nav);pointer-events:auto;width:300px;position:absolute;top:40px;left:0}
/* The nav bar's button is absolute and centres on the 32px wordmark, so it
   starts 4px above .nav-inner: top:40px lands the card at 68px, the
   measured Stanzza value. The rail's button is in flow at its wrapper's
   own top, so the same 4px gap needs 44px there. */
.pp-rail-menu-wrap .nav-card-wrap{top:44px}
.nav-card-wrap[hidden]{display:none}
.nav-card{background-color:var(--wool);border-radius:2px;width:100%;height:0;overflow:hidden;transition:none}
.nav-card-inner{flex-flow:column;gap:24px;width:300px;padding:24px;display:flex}
.nav-card-links{flex-flow:column;justify-content:flex-start;align-items:flex-start;display:flex}
.nav-card-link{font-family:var(--font-body);color:var(--slate);cursor:pointer;letter-spacing:-.01em;font-size:24px;font-weight:400;line-height:1.32;text-decoration:none;transition:all .35s ease-out;position:relative}
.nav-card-rule{background-color:var(--sand);pointer-events:none;flex:none;width:0;height:1px}
.nav-card-address{grid-column-gap:8px;grid-row-gap:8px;gap:8px;flex-flow:column;font-style:normal;display:flex}
.nav-card-row{justify-content:space-between;width:100%;display:flex}
.nav-card-tag{font-family:var(--font-body);color:color-mix(in srgb,transparent,var(--slate) 80%);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;font-size:12px;line-height:1.18}
.nav-card-val{justify-content:flex-start;align-items:flex-start;width:100%;max-width:120px;display:flex}
.nav-card-val a{font-family:var(--font-body);color:var(--slate);opacity:.8;letter-spacing:.16em;text-transform:uppercase;font-size:12px;line-height:1.18;transition:all .35s ease-out}
.nav-card-val a:hover{opacity:1}
@media (max-width:991px){.nav-card-wrap{right:0;left:0;width:auto}.nav-card-inner{width:auto}}
@media (prefers-reduced-motion:reduce){.nav-menu,.nav-menu-label,.nav-menu-icon,.nav-card-link{transition:none}}


/* =========================================================================
   4. FOOTER — reference/senawa/footer.css
   Slate block on every page. Kicker + oversized CTA line on the left, the
   wordmark tinted to --oak on the right, then three columns and fine print.
   (view-transition-name dropped with the rest of the view-transition work.)
   ========================================================================= */
.ft{background-color:var(--slate);color:var(--sand);border-top:1px solid var(--seam-on-dark);padding:clamp(56px,8vh,100px) clamp(24px,8vw,140px) clamp(28px,4vh,44px)}
.ft-inner{max-width:1480px;margin:0 auto}
.ft-cta{justify-content:space-between;align-items:flex-start;gap:40px;padding-bottom:clamp(40px,6vh,76px);display:flex}
.ft-cta-text{flex-direction:column;gap:clamp(16px,2.4vh,24px);display:flex}
.ft-kicker{font-family:var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--oak);font-size:10px;font-weight:500}
.ft-cta-link{max-width:16ch;font-family:var(--font-display);letter-spacing:-.02em;font-size:clamp(1.875rem,4.4vw,3.5rem);font-weight:300;line-height:var(--leading-tight);color:var(--wool);transition:opacity var(--duration-fast) var(--ease-out);align-items:center;gap:.42em;text-decoration:none;display:inline-flex}
.ft-cta-link:hover{opacity:.75}
.ft-cta-arrow{width:.52em;height:.52em;transition:transform var(--duration-mid) var(--ease-out);flex:none;margin-top:.12em}
.ft-cta-link:hover .ft-cta-arrow{transform:translate(.08em,-.08em)}
.ft-mark{color:var(--oak);flex:none;margin-top:6px}
/* The wordmark is a dark webp; knocking it out and holding it at 60% lands
   on the --oak the reference paints its SVG mark with. */
.ft-mark img{width:auto;height:40px;filter:brightness(0) invert(1) opacity(.6)}
.ft-rule{background-color:var(--hairline-on-dark);height:1px}
.ft-cols{grid-template-columns:1.5fr 1fr 1fr;gap:36px 40px;padding:clamp(34px,5vh,56px) 0;display:grid}
/* The shell shipped the three-column track at every width; reference/senawa
   /footer.css drops to two under 1023 and the reference has no phone rule at
   all, which leaves ~93px columns at 390. One column on phones. */
@media (max-width:1023px){.ft-cols{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.ft-cols{grid-template-columns:1fr;gap:32px 0}}
.ft-col{flex-direction:column;align-items:flex-start;gap:11px;display:flex}
.ft-col-label{font-family:var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--oak);margin-bottom:6px;font-size:10px;font-weight:500}
.ft-link{font-family:var(--font-body);letter-spacing:.01em;color:var(--sand);overflow-wrap:anywhere;transition:color var(--duration-fast) var(--ease-out);font-size:14px;font-weight:300;text-decoration:none}
.ft-link:hover{color:var(--wool)}
.ft-address{font-family:var(--font-body);font-size:14px;font-style:normal;font-weight:300;line-height:var(--leading-body);color:var(--sand)}
.ft-bottom{flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding-top:clamp(20px,3vh,30px);display:flex}
.ft-fine{font-family:var(--font-body);letter-spacing:.08em;color:var(--oak);font-size:11px;font-weight:400}
@media (prefers-reduced-motion:reduce){.ft-cta-link,.ft-cta-arrow,.ft-link{transition:none}}


/* =========================================================================
   5. PAGE TRANSITION — reference/senawa/page-transition.css
   A wool layer that covers on the way out and reveals on the way in, with
   the wordmark pulsing while it covers. site/js/transition.js drives it and
   does nothing at all under reduced motion, so the layer is hidden there.
   ========================================================================= */
.pt-shutter{z-index:var(--z-transition);background-color:var(--wool);opacity:0;visibility:hidden;pointer-events:none;will-change:opacity;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}
.pt-shutter.covering{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
.pt-shutter.revealing{opacity:0;visibility:visible;pointer-events:none;transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.pt-mark{width:auto;height:36px;color:var(--slate);opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1);transform:scale(.94)}
.pt-shutter.covering .pt-mark{opacity:1;animation:1.1s cubic-bezier(.4,0,.2,1) .45s infinite markPulse;transform:scale(1)}
.pt-shutter.revealing .pt-mark{opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1);transform:scale(.94)}
@keyframes markPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.pt-shutter{display:none}}


/* =========================================================================
   6. UTILITIES — the 404 page is the only thing in the shell with a body.
   ========================================================================= */
.nf{background-color:var(--wool);align-items:center;min-height:70svh;display:flex}
.nf-inner{flex-direction:column;align-items:flex-start;gap:16px;padding-top:clamp(100px,14vh,160px);padding-bottom:clamp(60px,10vh,120px);display:flex}
.nf-text{max-width:46ch;font-size:15px}
.nf-link{font-family:var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--walnut);border-bottom:1px solid var(--sand);transition:color var(--duration-fast) var(--ease-out);margin-top:8px;padding-bottom:4px;font-size:11px;font-weight:500}
.nf-link:hover{color:var(--slate)}