/* West Imperial Water Hauling: Express 5-page concept. Tokens first, px only, hex only. */
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --color-bg-primary:#fbf8f3; --color-bg-secondary:#f2ede4; --color-bg-tertiary:#e5eff1; --color-bg-inverse:#16222e; --color-bg-card:#ffffff;
  --color-text-primary:#16222e; --color-text-secondary:#46525f; --color-text-inverse:#fbf8f3; --color-text-inverse-soft:#c9d2da;
  --color-accent:#d0222f; --color-accent-hover:#b01c27; --color-accent-text:#b51c28; --color-on-accent:#ffffff; --color-accent-soft:#fbe4e5;
  --color-water:#1d6b7a; --color-border-primary:#d9d1c4; --color-border-focus:#1d6b7a; --color-logo-ink:#16222e; --color-logo-red:#d0222f;
  --color-shadow:#16222e1f; --color-scrim:#16222ecc;
  --font-display:"Instrument Serif",Georgia,serif; --font-body:"DM Sans",system-ui,sans-serif;
  --font-size-xs:14px; --font-size-sm:15px; --font-size-base:17px; --font-size-lg:19px; --font-size-xl:24px;
  --font-size-h3:26px; --font-size-h2:clamp(32px,4vw,48px); --font-size-h1:clamp(38px,5vw,64px);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px;
  --max-width-wide:1170px; --max-width-header:1280px;
  --duration-fast:120ms; --duration-base:250ms; --duration-slow:500ms;
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1); --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --z-header:50; --z-drawer:70; --z-scroll-progress:80; --z-banner:90; --z-loader:100;
  --banner-h:44px;
  --texture-grain:url(img/paper-noise.jpg); --texture-grain-size:800px; --texture-grain-blend:multiply;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --color-bg-primary:#121a22; --color-bg-secondary:#18232e; --color-bg-tertiary:#162a33; --color-bg-inverse:#0c1218; --color-bg-card:#1b2732;
  --color-text-primary:#f3efe8; --color-text-secondary:#b9c2cb; --color-text-inverse:#f3efe8; --color-text-inverse-soft:#b9c2cb;
  --color-accent-text:#ff8a93; --color-accent-soft:#3a1c22; --color-water:#7cc4d2; --color-border-primary:#2c3a47; --color-border-focus:#7cc4d2;
  --color-logo-ink:#f3efe8; --color-logo-red:#ff5c68; --color-shadow:#00000066; --color-scrim:#0c1218d9;
  --texture-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='.09 0 0 0 .455 .09 0 0 0 .455 .09 0 0 0 .455 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --texture-grain-size:360px; --texture-grain-blend:hard-light;
}}
:root[data-theme=dark]{
  --color-bg-primary:#121a22; --color-bg-secondary:#18232e; --color-bg-tertiary:#162a33; --color-bg-inverse:#0c1218; --color-bg-card:#1b2732;
  --color-text-primary:#f3efe8; --color-text-secondary:#b9c2cb; --color-text-inverse:#f3efe8; --color-text-inverse-soft:#b9c2cb;
  --color-accent-text:#ff8a93; --color-accent-soft:#3a1c22; --color-water:#7cc4d2; --color-border-primary:#2c3a47; --color-border-focus:#7cc4d2;
  --color-logo-ink:#f3efe8; --color-logo-red:#ff5c68; --color-shadow:#00000066; --color-scrim:#0c1218d9;
  --texture-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='.09 0 0 0 .455 .09 0 0 0 .455 .09 0 0 0 .455 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --texture-grain-size:360px; --texture-grain-blend:hard-light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--color-bg-primary);color:var(--color-text-primary);font-family:var(--font-body);font-size:var(--font-size-base);line-height:1.6;padding-bottom:var(--banner-h);overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--color-accent-text);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--color-border-focus);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-0.01em}
h1{font-size:var(--font-size-h1)} h2{font-size:var(--font-size-h2)} h3{font-size:var(--font-size-h3)}
p{margin:0;text-wrap:pretty}
.wi-skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--color-bg-card);color:var(--color-text-primary);padding:12px 16px;border-radius:var(--radius-sm)}
.wi-skip:focus{left:8px}
.wi-container{width:100%;max-width:var(--max-width-wide);margin:0 auto;padding:0 20px}
.wi-section{padding:var(--space-8) 0}
.wi-section--alt{background:var(--color-bg-secondary)}
.wi-section--water{background:var(--color-bg-tertiary)}
.wi-section--ink{background:var(--color-bg-inverse);color:var(--color-text-inverse)}
.wi-eyebrow{font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-accent-text);margin-bottom:var(--space-3)}
.wi-section--ink .wi-eyebrow{color:#ff8a93}
.wi-lede{font-size:var(--font-size-lg);color:var(--color-text-secondary);max-width:640px;margin-top:var(--space-4)}
.wi-section--ink .wi-lede{color:var(--color-text-inverse-soft)}
.wi-head{max-width:760px;margin-bottom:var(--space-7)}
.wi-serif-em{font-style:italic;color:var(--color-accent-text)}
.wi-section--ink .wi-serif-em{color:#ff8a93}

/* Buttons */
.wi-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;font:700 var(--font-size-sm)/1.2 var(--font-body);text-decoration:none;border:2px solid transparent;transition:background-color var(--duration-fast) var(--ease-out-quart),color var(--duration-fast) var(--ease-out-quart),border-color var(--duration-fast) var(--ease-out-quart);white-space:nowrap;cursor:pointer}
.wi-btn:active{transform:scale(0.97)}
.wi-btn--primary{background:var(--color-accent);color:var(--color-on-accent)}
.wi-btn--primary:hover{background:var(--color-accent-hover)}
.wi-btn--ghost{border-color:var(--color-text-primary);color:var(--color-text-primary);background:transparent}
.wi-btn--ghost:hover{background:var(--color-text-primary);color:var(--color-bg-primary)}
.wi-section--ink .wi-btn--ghost,.wi-band .wi-btn--ghost{border-color:var(--color-text-inverse);color:var(--color-text-inverse)}
.wi-section--ink .wi-btn--ghost:hover,.wi-band .wi-btn--ghost:hover{background:var(--color-text-inverse);color:var(--color-bg-inverse)}
.wi-btn svg{width:18px;height:18px;flex-shrink:0}
.wi-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.wi-micro{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-top:var(--space-4)}
.wi-textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--color-accent-text);text-decoration:underline;text-decoration-thickness:2px}

/* Loader, progress, banner */
.wi-loader{position:fixed;inset:0;z-index:var(--z-loader);background:var(--color-bg-inverse);display:grid;place-items:center;animation:wi-loader-out 600ms var(--ease-out-quart) 700ms forwards;pointer-events:none}
.wi-loader svg{width:84px;color:#fbf8f3}
.wi-loader .lg-dark{fill:#fbf8f3}
html.wi-seen .wi-loader{display:none}
@keyframes wi-loader-out{to{opacity:0;visibility:hidden}}
.wi-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:var(--z-scroll-progress);background:linear-gradient(90deg,var(--color-accent),#ff5c68);pointer-events:none}
.concept{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-banner);min-height:var(--banner-h);display:flex;align-items:center;justify-content:center;padding:8px 16px;background:#0c1218;color:#f3efe8;font-size:var(--font-size-xs);text-align:center;line-height:1.35}

/* Header */
.wi-header{position:sticky;top:0;z-index:var(--z-header);background:var(--color-bg-primary);border-bottom:1px solid var(--color-border-primary)}
.wi-header__inner{max-width:var(--max-width-header);margin:0 auto;padding:10px 20px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-4)}
.wi-logo{display:inline-flex;align-items:center;min-height:44px;color:var(--color-logo-ink)}
.wi-logo svg{width:118px;height:72px}
.lg-dark{fill:var(--color-logo-ink)} .lg-red{fill:var(--color-logo-red)}
.wi-nav{display:none}
.wi-header__cta{display:none}
.wi-header__mobile{display:flex;gap:var(--space-2);align-items:center}
.wi-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 14px;border-radius:999px;border:2px solid var(--color-border-primary);background:var(--color-bg-card);color:var(--color-text-primary);font:700 var(--font-size-sm) var(--font-body);text-decoration:none;cursor:pointer}
.wi-iconbtn--call{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.wi-iconbtn svg{width:20px;height:20px}
.wi-drawer{position:fixed;inset:0;z-index:var(--z-drawer);display:none}
.wi-drawer.is-open{display:block}
.wi-drawer__scrim{position:absolute;inset:0;background:var(--color-scrim)}
.wi-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--color-bg-primary);padding:20px;display:flex;flex-direction:column;gap:var(--space-4);overflow-y:auto}
.wi-drawer__panel ul{list-style:none;margin:0;padding:0}
.wi-drawer__panel li a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--color-border-primary);font-size:var(--font-size-lg);color:var(--color-text-primary);text-decoration:none;font-weight:500}
.wi-drawer__panel li a[aria-current=page]{color:var(--color-accent-text)}
.wi-drawer__close{align-self:flex-end}
.wi-drawer__meta{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
@media (min-width:1024px){
  .wi-header__inner{grid-template-columns:1fr auto 1fr}
  .wi-nav{display:block}
  .wi-nav ul{display:flex;gap:var(--space-1);list-style:none;margin:0;padding:0}
  .wi-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--color-text-primary);text-decoration:none;font-weight:500;font-size:var(--font-size-sm)}
  .wi-nav a:hover{background:var(--color-bg-secondary)}
  .wi-nav a[aria-current=page]{color:var(--color-accent-text);background:var(--color-accent-soft)}
  .wi-header__cta{display:flex;justify-content:flex-end;flex-shrink:0}
  .wi-header__mobile{display:none}
}

/* Hero */
.wi-hero{padding:var(--space-7) 0 var(--space-8)}
.wi-hero__grid{display:grid;gap:var(--space-6);align-items:center}
.wi-hero h1{max-width:13ch}
.wi-hero--sub h1{max-width:16ch}
.wi-hero__media{position:relative}
.wi-hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.wi-tag{position:absolute;left:-8px;bottom:20px;max-width:260px;background:var(--color-accent);color:var(--color-on-accent);padding:14px 18px;border-radius:var(--radius-sm);font-weight:700;font-size:var(--font-size-sm);line-height:1.35;box-shadow:0 10px 30px var(--color-shadow)}
.wi-tag span{display:block;font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1}
/* Phone and tablet: the crest large and faded in the negative space (desktop has the photo beside the copy) */
.wi-hero{position:relative;overflow:hidden;isolation:isolate}
.wi-hero__mark{position:absolute;z-index:-1;right:-38%;top:8%;width:min(140vw,820px);opacity:.02;pointer-events:none;transform:rotate(-5deg)}
.wi-hero__mark svg{display:block;width:100%;height:auto}
:root[data-theme="dark"] .wi-hero__mark{opacity:.03}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wi-hero__mark{opacity:.03}}
@media (min-width:900px){.wi-hero__mark{display:none}}
@media (min-width:900px){
  .wi-hero{padding:var(--space-8) 0 var(--space-9)}
  .wi-hero__grid{grid-template-columns:7fr 5fr;gap:var(--space-8)}
  .wi-hero__media img{aspect-ratio:4/5}
  .wi-tag{left:-32px;bottom:32px}
}

/* Fact strip */
.wi-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--color-border-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);overflow:hidden}
.wi-fact{background:var(--color-bg-card);padding:var(--space-5)}
.wi-fact b{display:block;font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1;color:var(--color-accent-text)}
.wi-fact span{display:block;margin-top:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary)}
@media (min-width:900px){.wi-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Chooser */
.wi-choose{display:grid;gap:var(--space-5)}
.wi-door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;border-radius:var(--radius-lg);overflow:hidden;color:#fbf8f3;text-decoration:none;isolation:isolate}
.wi-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform var(--duration-slow) var(--ease-out-quart)}
.wi-door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0c121800 25%,#0c1218e6 80%)}
.wi-door__body{padding:var(--space-6)}
.wi-door h3{font-size:36px}
.wi-door p{margin-top:var(--space-3);color:#e4e9ee;max-width:46ch}
.wi-door__go{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-4);min-height:44px;font-weight:700;border-bottom:2px solid #ff5c68}
.wi-door:hover img{transform:scale(1.03)}
@media (min-width:900px){.wi-choose{grid-template-columns:7fr 5fr}.wi-door{min-height:520px}.wi-door--b{margin-top:var(--space-8)}}

/* Steps */
.wi-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);counter-reset:step}
.wi-steps li::marker{content:""}
.wi-steps li{counter-increment:step;position:relative;padding:var(--space-6) var(--space-5) var(--space-5);background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md)}
.wi-steps li::before{content:counter(step);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--color-bg-inverse);color:var(--color-text-inverse);font-family:var(--font-display);font-size:26px;margin-bottom:var(--space-4)}
.wi-steps h3{font-size:28px;margin-bottom:var(--space-2)}
.wi-steps p{color:var(--color-text-secondary)}
@media (min-width:900px){.wi-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.wi-steps li:nth-child(2){transform:translateY(32px)}}

/* Split blocks */
.wi-split{display:grid;gap:var(--space-7);align-items:center}
.wi-split__media img{width:100%;border-radius:var(--radius-lg);aspect-ratio:4/3;object-fit:cover}
.wi-split__media figcaption{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-top:var(--space-3)}
.wi-section--ink .wi-split__media figcaption{color:var(--color-text-inverse-soft)}
@media (min-width:900px){.wi-split{grid-template-columns:1fr 1fr;gap:var(--space-8)}.wi-split--rev .wi-split__media{order:2}}
.wi-checks{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-3)}
.wi-checks li{display:grid;grid-template-columns:28px 1fr;gap:var(--space-3);align-items:start}
.wi-checks li::before{content:"";width:22px;height:22px;margin-top:3px;border-radius:50%;background:var(--color-water) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat}
.wi-section--ink .wi-checks li::before{background-color:#d0222f}

/* Lists of services */
.wi-uses{display:grid;gap:var(--space-3);list-style:none;margin:0;padding:0}
.wi-uses li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-weight:500}
.wi-uses li svg{width:24px;height:24px;color:var(--color-water);flex-shrink:0}
@media (min-width:700px){.wi-uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.wi-uses--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wi-note{margin-top:var(--space-5);padding:var(--space-5);border-radius:var(--radius-md);background:var(--color-accent-soft);color:var(--color-text-primary)}
.wi-note strong{color:var(--color-accent-text)}

/* Before after */
.wi-ba{display:grid;gap:var(--space-5)}
.wi-ba__col{border-radius:var(--radius-lg);padding:var(--space-6)}
.wi-ba__col--before{background:var(--color-bg-card);border:1px solid var(--color-border-primary)}
.wi-ba__col--after{background:var(--color-bg-inverse);color:var(--color-text-inverse)}
.wi-ba__col h3{margin-bottom:var(--space-4)}
.wi-ba__col ul{margin:0;padding-left:20px;display:grid;gap:var(--space-3)}
.wi-ba__col--before li{color:var(--color-text-secondary)}
@media (min-width:900px){.wi-ba{grid-template-columns:5fr 6fr}}

/* Reviews carousel */
.wi-reviews__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--space-4);margin-bottom:var(--space-6)}
.wi-source{display:inline-flex;align-items:center;gap:8px;font-size:var(--font-size-sm);font-weight:700;color:var(--color-text-secondary)}
.wi-source svg{width:18px;height:18px}
.wi-track{display:flex;align-items:flex-start;gap:var(--space-3);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;box-sizing:border-box;transition:height var(--duration-base) var(--ease-out-quart);scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
@media (hover:hover) and (pointer:fine){.wi-track{cursor:grab}}
.wi-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none;-webkit-user-select:none}
.wi-track:focus-visible{outline:3px solid var(--color-border-focus);outline-offset:4px;border-radius:var(--radius-md)}
.wi-track::-webkit-scrollbar{display:none}
.wi-review{flex:0 0 86%;margin:0;scroll-snap-align:start;background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);min-height:168px}
.wi-review figcaption{margin-top:auto}
.wi-review img,.wi-review a{-webkit-user-drag:none}
.wi-review blockquote{margin:0;font-size:var(--font-size-base)}
.wi-review figcaption{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.wi-review figcaption b{display:block;color:var(--color-text-primary)}
@media (min-width:700px){.wi-review{flex-basis:calc(50% - 6px)}}
@media (min-width:1024px){.wi-review{flex-basis:calc(33.333% - 8px)}}
.wi-carousel__nav{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4)}
.wi-dots{display:flex;flex-wrap:wrap;gap:0;align-items:center}
.wi-dot{width:28px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.wi-dot::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--color-border-primary);transition:width var(--duration-base) var(--ease-out-quart),background-color var(--duration-base)}
.wi-dot[aria-current=true]::before{width:22px;background:var(--color-accent)}
.wi-arrow{width:44px;height:44px;border-radius:50%;border:2px solid var(--color-border-primary);background:var(--color-bg-card);color:var(--color-text-primary);display:grid;place-items:center;cursor:pointer}
.wi-arrow svg{width:18px;height:18px}

/* Areas */
.wi-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:var(--space-5) 0 0;padding:0}
.wi-chips li{padding:8px 14px;border-radius:999px;border:1px solid var(--color-border-primary);background:var(--color-bg-card);font-size:var(--font-size-sm);font-weight:500}
.wi-section--ink .wi-chips li{background:transparent;border-color:#3a4a58;color:var(--color-text-inverse)}
.wi-areas{display:grid;gap:var(--space-4)}
.wi-area{background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-6)}
.wi-area h2,.wi-area h3{font-size:32px}
.wi-area__kind{font-size:var(--font-size-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-water);margin-bottom:var(--space-2)}
.wi-area p{margin-top:var(--space-3);color:var(--color-text-secondary)}
.wi-area--home{background:var(--color-bg-inverse);color:var(--color-text-inverse);border-color:var(--color-bg-inverse)}
.wi-area--home p{color:var(--color-text-inverse-soft)}
.wi-area--home .wi-area__kind{color:#7cc4d2}
@media (min-width:800px){.wi-areas{grid-template-columns:repeat(2,minmax(0,1fr))}.wi-area--home{grid-column:1/-1;display:grid;grid-template-columns:5fr 7fr;gap:var(--space-7);align-items:center}}
@media (min-width:1100px){.wi-areas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wi-area--home img{border-radius:var(--radius-md);aspect-ratio:16/10;object-fit:cover;width:100%;margin-top:var(--space-5)}
@media (min-width:800px){.wi-area--home img{margin-top:0}}

/* FAQ accordion */
.wi-faq{border-top:1px solid var(--color-border-primary);max-width:860px}
.wi-faq__item{border-bottom:1px solid var(--color-border-primary)}
.wi-faq__q{margin:0;font:inherit}
.wi-faq__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:64px;padding:var(--space-4) 0;background:none;border:0;color:var(--color-text-primary);font:700 var(--font-size-lg)/1.35 var(--font-body);text-align:left;cursor:pointer}
.wi-faq__icon{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:2px solid var(--color-accent);display:grid;place-items:center;color:var(--color-accent-text);transition:transform var(--duration-base) var(--ease-out-quart),background-color var(--duration-base)}
.wi-faq__icon svg{width:14px;height:14px}
.wi-faq__item.is-open .wi-faq__btn{color:var(--color-accent-text)}
.wi-faq__item.is-open .wi-faq__icon{transform:rotate(45deg);background:var(--color-accent);color:var(--color-on-accent)}
.wi-faq__panel{overflow:hidden}
.wi-js .wi-faq__panel{max-height:0;transition:max-height var(--duration-slow) var(--ease-out-quart)}
.wi-faq__inner{padding:0 0 var(--space-5);color:var(--color-text-secondary);display:grid;gap:var(--space-3);max-width:70ch}
.wi-faq__inner ul{margin:0;padding-left:20px}

/* Band */
.wi-band{background:var(--color-bg-inverse);color:var(--color-text-inverse);padding:var(--space-8) 0;position:relative;overflow:hidden}
.wi-band__grid{display:grid;gap:var(--space-6);align-items:center}
.wi-band p{color:var(--color-text-inverse-soft);margin-top:var(--space-3);max-width:56ch}
@media (min-width:900px){.wi-band__grid{grid-template-columns:3fr 2fr}.wi-band .wi-actions{justify-content:flex-end;margin-top:0}}

/* Contact page */
.wi-contact{display:grid;gap:var(--space-6)}
@media (min-width:960px){.wi-contact{grid-template-columns:5fr 7fr;align-items:start}}
.wi-card{background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-6)}
.wi-card--ink{background:var(--color-bg-inverse);color:var(--color-text-inverse);border-color:var(--color-bg-inverse)}
.wi-card h2{font-size:34px;margin-bottom:var(--space-4)}
.wi-dl{display:grid;gap:var(--space-4);margin:0}
.wi-dl dt{font-size:var(--font-size-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#7cc4d2}
.wi-dl dd{margin:var(--space-1) 0 0}
.wi-card--ink a{color:#fbf8f3}
.wi-hours{display:grid;grid-template-columns:auto 1fr;gap:2px var(--space-4);margin:0}
.wi-form{display:grid;gap:var(--space-4)}
.wi-form__row{display:grid;gap:var(--space-4)}
@media (min-width:600px){.wi-form__row{grid-template-columns:1fr 1fr}}
.wi-field{display:grid;gap:6px}
.wi-field label,.wi-field legend{font-weight:700;font-size:var(--font-size-sm)}
.wi-field input,.wi-field select,.wi-field textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--color-border-primary);border-radius:var(--radius-sm);background:var(--color-bg-primary);color:var(--color-text-primary);font:var(--font-size-base) var(--font-body)}
.wi-field textarea{min-height:120px;resize:vertical}
.wi-help{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.wi-optin{display:grid;grid-template-columns:24px 1fr;gap:var(--space-3);align-items:start;font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.wi-optin input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--color-accent)}
.wi-status{font-weight:700;color:var(--color-water)}
.wi-status:empty{display:none}
.wi-form-slot{display:block}

/* Crew */
.wi-timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.wi-timeline li::marker{content:""}
.wi-timeline li{display:grid;grid-template-columns:110px 1fr;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border-primary)}
.wi-timeline b{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.1;color:var(--color-accent-text)}
.wi-team{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.wi-person{background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-5)}
.wi-person h3{font-size:30px}
.wi-person .wi-role{font-size:var(--font-size-sm);font-weight:700;color:var(--color-water);margin:var(--space-1) 0 var(--space-3)}
.wi-person p{color:var(--color-text-secondary);font-size:var(--font-size-sm)}
.wi-values{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.wi-values h3{font-size:28px;margin-bottom:var(--space-2)}
.wi-values p{color:var(--color-text-inverse-soft)}

/* Footer */
.wi-footer{background:var(--color-bg-inverse);color:var(--color-text-inverse);padding:var(--space-8) 0 var(--space-6)}
.wi-footer__grid{display:grid;gap:var(--space-6)}
@media (min-width:900px){.wi-footer__grid{grid-template-columns:4fr 3fr 3fr 3fr}}
.wi-footer .wi-logo{color:#f3efe8}
.wi-footer .lg-dark{fill:#f3efe8} .wi-footer .lg-red{fill:#ff5c68}
.wi-footer h2{font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#7cc4d2;margin-bottom:var(--space-3)}
.wi-footer ul{list-style:none;margin:0;padding:0}
.wi-footer li a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-text-inverse);text-decoration:none}
.wi-footer li a:hover{text-decoration:underline}
.wi-footer p{color:var(--color-text-inverse-soft);font-size:var(--font-size-sm)}
.wi-footer p a{color:var(--color-text-inverse);display:inline-flex;align-items:center;min-height:44px}
.wi-footer__legal{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid #2c3a47;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);justify-content:space-between;align-items:center}
.ccd-credit a{color:var(--color-text-inverse)}

/* Reveal: visible by default; JS adds --init, moves only, never opacity 0 */
.wi-reveal--init{transform:translateY(24px);transition:transform var(--duration-slow) var(--ease-out-expo)}
.wi-reveal--init.is-visible{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:200ms !important;transition-duration:1ms !important;scroll-behavior:auto !important}
  .wi-loader{animation-delay:0ms}
  .wi-reveal--init{transform:none}
}
@media (min-width:900px){.wi-section{padding:var(--space-9) 0}}

/* Grain, same texture as PR #5 (fix/west-imperial-darkmode-mobile-copy). Light: the live site's paper-noise tile
   (west-imperial-logo-hi-res_darker.jpg, 800px) multiplied into the cream so the colour stays warm. Dark: PR #5's
   feTurbulence grain (same frequency, octaves, seed, 360px tile), as mid-grey noise in hard-light so it rides on
   each dark surface instead of replacing it. Both measure about 3 levels of variation, matching PR #5. Page
   surfaces only, declared last so the shorthand backgrounds above don't reset it (body, header, drawer, alt and water sections); cards, photo bands, ink bands and fields stay flat. */
body,.wi-header,.wi-drawer__panel,.wi-section--alt,.wi-section--water{background-image:var(--texture-grain);background-size:var(--texture-grain-size);background-blend-mode:var(--texture-grain-blend)}

/* Screen-reader-only text */
.wi-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 10 Years Strong badge (live site header mark). Ink follows the theme, ribbon keeps the brand red. */
:root{--b10-ink:#000000;--b10-red:#ea3441;--b10-paper:#ffffff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--b10-ink:#f3efe8}}
:root[data-theme=dark]{--b10-ink:#f3efe8}
.wi-10yr{display:block;width:96px;height:auto;aspect-ratio:87/78}
.wi-10yr--hero{position:absolute;top:-20px;right:-8px;width:88px;padding:20px 24px 20px 18px;box-sizing:content-box;background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:50%;box-shadow:0 10px 30px var(--color-shadow)}
@media (min-width:900px){.wi-10yr--hero{width:112px;padding:28px 32px 28px 24px;top:-32px;right:-32px}}
.wi-10yr--footer{--b10-ink:#f3efe8;width:96px;margin-top:var(--space-5)}
.wi-10yr--section{width:112px;flex-shrink:0}
.wi-head--badge{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);max-width:none}
@media (min-width:700px){.wi-10yr--section{width:148px}}

/* Musical touches from the live site */
.wi-tune a{color:var(--color-accent-text);font-weight:700}

/* Service Areas: jump chips, per-area blocks, local links */
.wi-jump .wi-chips a{display:inline-flex;align-items:center;min-height:44px;margin:-8px -14px;padding:0 14px;color:var(--color-text-primary);text-decoration:none;border-radius:999px}
.wi-jump .wi-chips a:hover{text-decoration:underline}
.wi-jump .wi-chips li{padding:8px 14px}
.wi-areablocks{display:grid;gap:var(--space-5)}
.wi-areablock{scroll-margin-top:96px;background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);display:grid;gap:var(--space-6)}
.wi-areablock h2{font-size:36px}
.wi-areablock h3{font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-secondary);margin:var(--space-5) 0 var(--space-3)}
.wi-areablock__detail > h3:first-child{margin-top:0}
.wi-areablock__text{margin-top:var(--space-3);font-size:var(--font-size-lg);color:var(--color-text-primary)}
.wi-areablock__lead{margin-top:var(--space-3);color:var(--color-text-secondary)}
.wi-areablock__media{margin:var(--space-5) 0 0}
.wi-areablock__media img{width:100%;border-radius:var(--radius-md);aspect-ratio:16/10;object-fit:cover}
.wi-chips--sm{margin-top:var(--space-4)}
.wi-chips--sm li{padding:6px 12px}
.wi-uses--1 li{padding:var(--space-3) var(--space-4)}
@media (min-width:700px){.wi-uses--1{grid-template-columns:1fr}}
.wi-around{margin:0;display:grid;gap:var(--space-3)}
.wi-around div{padding-left:var(--space-4);border-left:3px solid var(--color-water)}
.wi-around dt{font-weight:700}
.wi-around dd{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-sm)}
.wi-links ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.wi-links li{display:flex;flex-direction:column;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background:var(--color-bg-primary)}
.wi-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--color-accent-text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.wi-links .wi-ext{width:16px;height:16px;flex-shrink:0}
.wi-links__note{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
@media (min-width:800px){.wi-links__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .wi-areablock{grid-template-columns:5fr 6fr;gap:var(--space-8);padding:var(--space-7)}
  .wi-areablock h2{font-size:44px}
}
.wi-areablock--home{background:var(--color-bg-inverse);color:var(--color-text-inverse);border-color:var(--color-bg-inverse)}
.wi-areablock--home .wi-areablock__text{color:var(--color-text-inverse)}
.wi-areablock--home .wi-areablock__lead,.wi-areablock--home .wi-around dd,.wi-areablock--home .wi-links__note{color:var(--color-text-inverse-soft)}
.wi-areablock--home h3{color:#7cc4d2}
.wi-areablock--home .wi-area__kind{color:#7cc4d2}
.wi-areablock--home .wi-chips li{background:transparent;border-color:#3a4a58;color:var(--color-text-inverse)}
.wi-areablock--home .wi-uses li{background:#16222e;border-color:#2c3a47;color:var(--color-text-inverse)}
.wi-areablock--home .wi-uses li svg{color:#7cc4d2}
.wi-areablock--home .wi-around div{border-left-color:#7cc4d2}
.wi-areablock--home .wi-links li{background:#16222e;border-color:#2c3a47}
.wi-areablock--home .wi-links a{color:#ff8a93}